@charset "UTF-8"; /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    -webkit-tap-highlight-color : transparent !important;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 20230317 위,아래첨자 추가 */
sup {
	vertical-align: super;
	font-size: 10px;
}

sub {
	vertical-align: sub;
	font-size: 10px;
}

/*******************************************************************
font
********************************************************************/
@font-face {
    font-family: "NanumBarunGothic";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/NanumBarunGothicLight.eot?#iefix") format("embedded-opentype"), url("../fonts/NanumBarunGothicLight.woff2") format("woff2"), url("../fonts/NanumBarunGothicLight.woff") format("woff"), url("../fonts/NanumBarunGothicLight.ttf") format("truetype"), url("../fonts/NanumBarunGothicLight.svg#NanumBarunGothic") format("svg");
}

@font-face {
    font-family: "NanumBarunGothic";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/NanumBarunGothic.eot?#iefix") format("embedded-opentype"), url("../fonts/NanumBarunGothic.woff2") format("woff2"), url("../fonts/NanumBarunGothic.woff") format("woff"), url("../fonts/NanumBarunGothic.ttf") format("truetype"), url("../fonts/NanumBarunGothic.svg#NanumBarunGothic") format("svg");
}

@font-face {
    font-family: "NanumBarunGothic";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/NanumBarunGothicBold.eot?#iefix") format("embedded-opentype"), url("../fonts/NanumBarunGothicBold.woff2") format("woff2"), url("../fonts/NanumBarunGothicBold.woff") format("woff"), url("../fonts/NanumBarunGothicBold.ttf") format("truetype"), url("../fonts/NanumBarunGothicBold.svg#NanumBarunGothic") format("svg");
}

/*******************************************************************
default
********************************************************************/
html, body, h1, h2, h3, h4, h5, h6, strong, table th, input, textarea, select, button {
    font-family: "NanumBarunGothic", "나눔바른고딕", "맑은 고딕", "Malgun Gothic", Dotum, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    /* color: #4a4a4a; */
    letter-spacing: -.15px;
}

html, body {
    height: 100%;
    min-width: 1120px;
    position: relative;
}

input[type=button], input[type=text], input[type=image], input[type=submit], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

/* IE6 */
:first-child + html .clearFix {
    zoom: 1; }

/* IE7 */
.hide, .blind, caption, legend {
/*     visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0; */
    overflow: hidden;
	  border: 0;
	  width: 1px;
	  height: 1px;
	  clip: rect(1px, 1px, 1px, 1px);
	  /* 추가 */
	  clip-path: inset(50%);
	  display: inline-block;
}

.clearFix:after {
    display: block;
    clear: both;
    content: '';
}

* html .clearFix {
    zoom: 1; }

/*******************************************************************
common
********************************************************************/
/*
Common UI
------------------------------------------------------------------ */
/* button set */
/*.btn { display: inline-block; min-width: 123px; height: 40px; line-height: 40px; padding: 0 20px; text-align: center; font-size: 16px; border-radius: 7px; font-weight: normal; vertical-align: middle; white-space: nowrap; border: 0; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }*/
.btn {
    display: inline-block;
    min-width: 110px;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    text-align: center;
    font-size: 13px;
    border-radius: 7px;
    font-weight: normal;
    vertical-align: middle;
    white-space: nowrap;
    border: 0;
    cursor: pointer;
    user-select:none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.btn.btn-primary {
    background-color: #016cbf;
    color: #fff;
}

.btn.btn-line {
    background-color: #fff;
    border: 1px solid #016cbf;
    color: #016cbf;
}

.btn.btn-darkgray {
    background-color: #5c5c5c;
    color: #fff;
}

.btn.btn-gray {
    background-color: #707070;
    color: #fff;
}

.btn.btn-sm {
    background-color: #707070;
    color: #fff;
    height: 28px;
    font-size: 13px;
    line-height: 28px;
    min-width: 50px;
    border-radius: 5px;
}

.btn.disabled {
    opacity: 0.4;
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn:hover, .btn:focus, .btn.focus {
    text-decoration: none;
}

.btn:active, .btn.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    box-shadow: none;
    opacity: .65;
}

.btn-default, a.btn-default {
    border-color: #2b2b2b;
    background-color: #fff;
    color: #2b2b2b;
}

.btn-mkt, a.btn-mkt {
    border-color: #002d6c;
    background-color: #fff;
    color: #002d6c;
}

.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active {
    border-color: #2b2b2b;
    background-color: #f4f4f4;
    color: #2b2b2b;
}

.btn-medium {
    width: auto;
    height: 30px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 27px;
}

.btn-small {
    width: auto;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
}

.btn > i {
    margin-left: 10px;
    margin-right: 0;
    margin-top: -1px;
    line-height: 44px;
}

.btn > i.i-left {
    margin-right: 10px;
    margin-left: 0;
}

.btn-medium > i {
    line-height: 36px;
}

.btn-small > i {
    line-height: 28px;
}

.btn.w100 {
    width: 100%;
}

label .hide {
    display: none;
}

/* textarea, input */
textarea, input[type=text], input[type=password], input[type=datetime], input[type=datetime-local], input[type=date], input[type=month], input[type=time], input[type=week], input[type=number], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=color] {
    border-radius: 0 !important;
    border: 1px solid #8d8d8d;
    background-clip: padding-box !important;
    background-color: #fff;
    -webkit-border-radius: 0 !important;
    -webkit-background-clip: padding-box !important;
    -moz-border-radius: 0 !important;
    -moz-background-clip: padding !important;
    box-shadow: none;
}

textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus {
    box-shadow: inset 0 2px 4px rgba(100, 100, 100, 0.1);
    outline: 0;
}

input.input, textarea.input {
    width: 100%;
    height: 36px;
    padding: 0 7px;
    font-size: 15px;
    color: #000;
}

textarea.input {
    height: 75px;
    padding-top: 10px;
    padding-bottom: 10px;
}

textarea:disabled, input[type=text]:disabled, input[type=password]:disabled, input[type=datetime]:disabled, input[type=datetime-local]:disabled, input[type=date]:disabled, input[type=month]:disabled, input[type=time]:disabled, input[type=week]:disabled, input[type=number]:disabled, input[type=email]:disabled, input[type=url]:disabled, input[type=search]:disabled, input[type=tel]:disabled, input[type=color]:disabled, textarea:disabled:hover, input[type=text]:disabled:hover, input[type=password]:disabled:hover, input[type=datetime]:disabled:hover, input[type=datetime-local]:disabled:hover, input[type=date]:disabled:hover, input[type=month]:disabled:hover, input[type=time]:disabled:hover, input[type=week]:disabled:hover, input[type=number]:disabled:hover, input[type=email]:disabled:hover, input[type=url]:disabled:hover, input[type=search]:disabled:hover, input[type=tel]:disabled:hover, input[type=color]:disabled:hover {
    border: 1px solid #eee;
    background-color: #f7f7f7;
}

.input.w100 {
    width: 100% !important;
}

.input.inline {
    width: auto !important;
}

/* Checkbox & Radio */
.checks {
    display: inline-block;
    position: relative;
    margin-right: 10px;
}

.checks input[type=checkbox] + label:before, .checks input[type=radio] + label:before, .checks input[type=checkbox]:checked + label:before, .checks input[type=radio]:checked + label:before {
    background: url(../images/common/ico_checks.png) no-repeat;
    background-size: 52px auto;
}

.checks input[type=checkbox], .checks input[type=radio] {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0 0 0 1px;
    padding: 0;
}

.checks input[type=checkbox] + label, .checks input[type=radio] + label, .radio-list input[type=radio] + label {
    display: inline-block;
    position: relative;
    padding-left: 29px;
    font-size: 15px;
    line-height: 22px !important;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.checks input[type=checkbox] + label:before {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: -1px 7px 0 -28px;
    background-position: 0 0;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    content: '';
}

.checks input[type=checkbox]:checked + label:before {
    background-position: 0 -26px;
}

.checks input[type=checkbox].disabled + label:before, .checks input[type=checkbox]:disabled + label:before {
    background-position: 0 -52px;
}

.checks input[type=checkbox]:checked.disabled + label:before, .checks input[type=checkbox]:checked:disabled + label:before {
    background-position: 0 -75px;
}

.checks input[type=radio] + label {
    padding-left: 26px;
}

.checks input[type=radio] + label:before {
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-position: -25px 0;
    text-align: center;
    content: '';
}

.checks input[type=radio]:checked + label {
    color: #002c5e;
}

.checks input[type=radio]:checked + label:before {
    background-position: -25px -26px;
}

.checks input[type=radio].disabled + label:before, .checks input[type=radio]:disabled + label:before {
    background-position: -25px -52px;
}

.checks input[type=radio].disabled + label, .checks input[type=radio]:disabled + label {
    color: #999;
}

.checks input[type=radio]:checked.disabled + label:before, .checks input[type=radio]:checked:disabled + label:before {
    background-position: -25px -78px;
}

/* Slick Slider */
.slick-loading .slick-list {
    background: #fff url(../images/common/ajax_loader.gif) center center no-repeat;
}

/* Slider */
.slick-slider {
    display: block;
    position: relative;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    display: block;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

/* .slick-list.dragging {
    cursor: pointer;
    cursor: hand;
} */

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    display: block;
    position: relative;
    top: 0;
    left: 0;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir=rtl] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

/* Slick slider Arrows */
.slick-prev, .slick-next {
    display: block;
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: transparent;
    color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: .1;
}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    color: #FFF;
    opacity: .75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir=rtl] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-next {
    right: -25px;
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px;
}

/* Slick slider Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    display: block;
    position: absolute;
    bottom: -25px;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}

.slick-dots li {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    border: 0;
    background: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: pointer;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    font-size: 6px;
    line-height: 20px;
    color: #000;
    text-align: center;
    content: '';
    opacity: .25;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    color: #000;
    opacity: .75;
}

/*
Board 게시판 설정
------------------------------------------------------------------ */
#board_wrap, #board_iframe, #board_iframe2 {
    position: relative;
    width: 100%;
}

#board_wrap a:link, #board_wrap a:visited, #board_wrap a:active, #board_iframe a:link, #board_iframe a:visited, #board_iframe a:active, #board_iframe2 a:link, #board_iframe2 a:visited, #board_iframe2 a:active {
    color: #4a4a4a;
}

#board_wrap a:hover, #board_iframe a:hover, #board_iframe2 a:hover {
    color: #268fe7;
}

#board_iframe2 {
    margin: 20px 0 0 10px;
}

/* 게시판 상단 공통 */
.bbs_top_wrap {
    width: 100%;
    height: 14px;
    margin-bottom: 12px;
}

.bbs_top_wrap .bbs_total {
    float: left;
    height: 14px;
    background: url("../images/board/ico_total.gif") no-repeat 0 0;
    padding-left: 14px;
    color: #555;
    line-height: 14px;
    font-size: 13px;
}

.bbs_top_wrap .bbs_total strong {
    color: #28689f;
    font-weight: 700;
    letter-spacing: -1px;
    font-size: 13px;
}

.bbs_top_wrap .rss_area {
    float: right;
    height: 14px;
}

.bbs_top_wrap .rss_area li {
    float: left;
    height: 14px;
    padding: 0 0 0 5px;
}

/* 게시판 하단 공통 */
.bbs_bot_wrap {
    width: 100%;
    padding-top: 14px;
    overflow: hidden;
}

.bbs_btn_area {
    text-align: right;
    margin-top: 15px;
    float: right;
}

a.btn_big {
    background: url("../images/board/bg_btn_big.gif") no-repeat 100% 0;
    padding-right: 4px;
    color: #fff;
    font-weight: 700;
    line-height: 30px;
    word-spacing: -1px;
    white-space: nowrap;
    text-decoration: none !important;
    display: block;
    float: left;
}

a.btn_big span {
    background: url("../images/board/bg_btn_big.gif") no-repeat;
    padding: 0 8px 0 12px;
    display: block;
}

a.btn_sml {
    background: url("../images/board/bg_btn_sml.gif") no-repeat 100% 0;
    padding-right: 4px;
    color: #fff;
    font-weight: 700;
    line-height: 24px;
    word-spacing: -1px;
    white-space: nowrap;
    text-decoration: none !important;
    display: block;
    float: left;
}

a.btn_sml span {
    background: url("../images/board/bg_btn_sml.gif") no-repeat;
    padding: 0 8px 0 12px;
    display: block;
}

.paginate {
    width: 100%;
    padding-top: 14px;
    text-align: center;
}

.paginate span.pre, .paginate span.next {
    width: 25px;
    height: 25px;
    display: block;
    overflow: hidden;
}

.paginate span.pre a, .paginate span.next a {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.paginate a, .paginate strong {
    margin: 0 -3px 0;
    padding: 0 8px 0;
    color: #444;
    font-weight: 700;
    line-height: 25px;
    display: inline;
    vertical-align: top;
}

.paginate strong {
    color: #0a81d0 !important;
    text-decoration: underline;
}

.bbs_serch {
    width: 100%;
    margin-top: 14px;
    padding: 12px 0;
    background: #f0f0f0;
}

.bbs_serch label {
    position: absolute;
    font-size: 0px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    line-height: 0px;
}

.bbs_serch .sch_cal_form {
    display: inline-block;
    height: 28px;
    margin-left: 10px;
    padding-right: 10px;
    width: auto;
    vertical-align: middle;
}

.bbs_serch .sch_cal_form dl dt {
    height: 28px;
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    float: left;
    margin: 0 5px 0 0;
}

.bbs_serch .sch_cal_form dl dd {
    width: auto;
    height: 28px;
    float: left;
    display: block;
    float: left;
}

.bbs_serch .sch_cal_form dl dd input {
    width: 72px;
    height: 16px;
    padding: 5px 0 0 6px;
    border: 0;
}

.bbs_serch .sch_cal_form dl dd.txt {
    width: 13px;
    height: 28px;
    text-align: center;
    background: none;
    padding: 0;
    line-height: 28px;
    display: block;
    float: left;
}

.bbs_serch .sch_sel_form {
    width: 280px;
    background-color: #fff;
    display: inline-block;
    border: 1px solid #bbb;
    height: 28px;
    line-height: 26px;
    vertical-align: middle;
}

.bbs_serch .sch_sel_form .select_wrap {
    float: left;
    display: inline-block;
}

.bbs_serch .sch_sel_form .select2-container--default .select2-selection--single {
    border: none;
    background-color: transparent;
}

.bbs_serch .sch_sel_form input {
    width: 220px;
    height: 26px;
    line-height: 26px;
    padding: 0 6px;
    border: 0;
    background-color: #fff;
}

.bbs_serch .sch_btn {
    display: inline-block;
    width: 50px;
    height: 28px;
    margin: 0px;
    vertical-align: middle;
}

.bbs_serch .sch_cal_form2 {
    display: inline-block;
    height: 24px;
    margin-left: 10px;
    padding-right: 10px;
    width: 130px;
    vertical-align: middle;
}

.bbs_serch .sch_cal_form2 dl dt {
    height: 24px;
    font-size: 12px;
    font-weight: 700;
    line-height: 30px;
    float: left;
}

.bbs_serch .sch_cal_form2 dl dd {
    width: 70px;
    height: 22px;
    padding: 1px;
    float: left;
}

.datalicense {
    background: #fafafa;
    margin-top: 15px;
    padding: 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.3;
    border: 1px solid #e8e8e8;
    display: block;
    min-height: 54px;
}

.datalicense::after {
    clear: both;
    content: "";
    display: table;
}

.datalicense a {
    display: block;
}

.datalicense a img {
    display: block;
}

.datalicense .license {
    text-align: center;
    display: block;
    float: left;
}

.datalicense .text {
    width: 82%;
    display: block;
    vertical-align: middle; 
    line-height: 15px;
    float: left;
    margin-left: 20px;
}

.bbs-prevlist {
    width: 100%;
    margin-top: 15px;
    border-top: 1px solid #c1c1c1;
}

.bbs-prevlist li {
    width: 100%;
    padding: 11px 0;
    line-height: 16px;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}

.bbs-prevlist li strong {
    float: left;
    margin: 0 20px 0 15px;
}

.bbs-prevlist li strong img {
    vertical-align: middle;
}

.bbs-prevlist li .subject {
    float: left;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
}

.bbs-prevlist li .text-info {
    float: right;
    color: #666;
    font-family: Arial,sans-serif;
    font-size: 12px;
}

.bbs-prevlist li .text-info span {
    float: left;
    padding-left: 5px;
}

.bbs-prevlist li .text-info span.data {
    background: url("../images/common/tnb_div.gif") no-repeat 0 50%;
    margin-left: 5px;
    margin-right: 15px;
}

/* 게시판 목록 */
.bbslist {
    width: 100%;
    border-top: 2px solid #457ac0;
}

.bbslist table {
    width: 100%;
}

.bbslist table thead th {
    background: url("../images/board/bbs_div.gif") #f5f5f5 no-repeat right 50%;
    padding: 11px 0 11px;
    color: #333;
    font-weight: bold;
    border-bottom: 1px solid #dedede;
}

.bbslist table thead th.ed {
    background: #f5f5f5 !important;
    padding: 11px 0 11px;
    color: #333;
    font-weight: bold;
    border-bottom: 1px solid #dedede;
}

.bbslist table tbody td {
    background: #fff;
    padding: 11px 0 11px;
    text-align: center;
    border-bottom: 1px solid #dedede;
}

.bbslist table tbody td.subject {
    background: #fff;
    padding: 11px 11px 11px;
    text-align: left;
    border-bottom: 1px solid #dedede;
}

.bbslist table tbody td.subject a {
    color: #444;
}

.bbslist table tbody td.addr {
    background: #fff;
    padding: 11px 11px 11px;
    text-align: left;
    border-bottom: 1px solid #dedede;
}

.bbslist table tbody td img {
    vertical-align: middle;
}

/* 게시판 읽기 */
.bbsview {
    width: 100%;
    border-top: 2px solid #457ac0;
}

.bbsview table {
    width: 100%;
}

.bbsview table thead th {
    background: url("../images/board/bbs_div.gif") no-repeat right 50%;
    padding: 9px 0 9px;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbsview table thead th.subject {
    background: url("../images/board/bbs_div.gif") #f5f5f5 no-repeat right 50%;
    padding: 11px 0 11px;
    color: #333;
    font-weight: 700;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbsview table td {
    padding: 9px 30px 9px;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbsview table td.subject {
    background: #f5f5f5;
    padding: 11px 30px 11px;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbsview table td.textviewer {
    min-height: 220px;
    height: auto !important;
    height: 220px;
    padding: 20px;
    line-height: 1.5;
    border-bottom: 1px solid #dedede;
    vertical-align: top;
}

.bbsview table td.textviewer table {
    border: 1px solid black;
}

.bbsview table td.textviewer th {
    border: 1px solid black;
}

.bbsview table td.textviewer td {
    border: 1px solid black;
}

.bbsview table td.textviewer p {
    margin: 12px;
}

/* 게시판 읽기(새창) */
.bbsview_window {
    background: #fff;
    margin: 20px 1px 0;
    display: block;
}

.bbsview_window table {
    width: 100%;
    border-top: 2px solid #457ac0;
}

.bbsview_window table thead th.subject {
    background: url("../images/board/bbs_div.gif") #f5f5f5 no-repeat right 50%;
    padding: 11px 0 11px;
    color: #333;
    font-weight: 700;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbsview_window table thead td.subject {
    background: #f5f5f5;
    padding: 11px 30px 11px;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbsview_window table tbody td.textviewer {
    background: #fff;
    line-height: 1.4em;
    min-height: 680px;
    height: auto !important;
    height: 680px;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #dedede;
}

/* 게시판 쓰기 */
.bbswrite {
    width: 100%;
    border-top: 2px solid #457ac0;
}

.bbswrite table {
    width: 100%;
}

.bbswrite table th {
    background: url("../images/board/bbs_div.gif") #f5f5f5 no-repeat right 50%;
    padding: 9px 0 9px;
    color: #333;
    font-weight: 700;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbswrite table td {
    padding: 3px 30px 3px;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbswrite table td.td_file {
    padding: 8px 30px 8px;
    line-height: 18px;
    border-bottom: 1px solid #dedede;
}

.bbswrite .input_text {
    padding: 3px;
}

.bbswrite .input_file {
    padding: 3px;
    margin: 1px 0;
}

.bbswrite .input_chk {
    vertical-align: middle;
}

.bbswrite .textarea {
    margin: 3px 0;
}

/* 가로 썸네일 타입 */
.bbslist-thumb {
    width: 100%;
    padding: 7px 0 0 0;
    border-top: 2px solid #457ac0;
}

.bbslist-thumb ul {
    width: 100%;
}

.bbslist-thumb ul li {
    position: relative;
    height: 148px;
    padding: 13px 0 13px 0;
    border-bottom: 1px solid #dedede;
}

.bbslist-thumb ul li::after {
    clear: both;
    content: "";
    display: table;
}

.bbslist-thumb ul li .thumbnail {
    float: left;
    width: 207px;
    height: 120px;
    background: url("../images/board/noimg.gif") #f5f5f5 no-repeat 50% 50%;
    overflow: hidden;
}

.bbslist-thumb ul li .thumbnail img {
    width: 207px;
    height: auto;
}

.bbslist-thumb ul li .contsgroup {
    float: right;
    width: 72.5%;
    padding-top: 8px;
}

.bbslist-thumb ul li .subject {
    width: 100%;
    display: block;
}

.bbslist-thumb ul li .subject a {
    color: #222;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 18px;
}

.bbslist-thumb ul li .subject a:hover {
    color: #28689f;
}

.bbslist-thumb ul li p {
    height: 55px;
    margin-top: 15px;
    line-height: 18px;
    overflow: hidden;
}

.bbslist-thumb ul li p a, .bbslist-thumb ul li p a:hover {
    color: #666;
    font-weight: 400;
    line-height: 1.5;
}

.bbslist-thumb ul li .text-info {
    position: absolute;
    bottom: 12px;
    right: 0;
    color: #787878;
    font-family: Arial,sans-serif;
    font-size: 11px;
}

.bbslist-thumb ul li .text-info span {
    float: left;
    padding-left: 5px;
}

.bbslist-thumb ul li .text-info span.data {
    background: url("../images/common/tnb_div.gif") no-repeat 0 50%;
    margin-left: 5px;
}

html {
    font-size: 62.5%;
    background-color: #fff;
}

/* Form */
button {
    overflow: visible;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

input::-ms-clear {
    display: none;
}

textarea {
    resize: none;
}

a:link, a:visited, a:active, a:hover {
    text-decoration: none;
    cursor: pointer;
}

a:active, a:hover {
    color: #1563af
}

* {
    box-sizing: border-box;
}

.row {
    clear: both;
    margin: 0;
    padding: 0;
}

.skipnav a {
    position: absolute;
    top: -9999em;
    z-index: 9999;
    width: 100%;
    background-color: #013874;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.skipnav a:hover, .skipnav a:active, .skipnav a:focus {
    top: 0;
    padding: 12px 0;
    color: #fff;
}

div.all {
    max-width: 100%;
    padding: 0;
}

.br {
    display: block;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.mb1 {
    margin-bottom: 1em;
}

.mb2 {
    margin-bottom: 2em;
}

/* margin, padding, width */
.mb_15 {
    margin-bottom: 15px;
}

.mb_30 {
    margin-bottom: 30px;
}

.mb_40 {
    margin-bottom: 40px;
}

.mb_60 {
    margin-bottom: 60px;
}

.mt_30 {
    margin-top: 30px;
}

.mtb_65 {
    margin: 65px 0;
}

.width_full, .w100 {
    width: 100% !important;
}

.width_half, .w50 {
    width: 50% !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

/*******************************************************************
layout
********************************************************************/
#content {
    max-width: 1120px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
    min-height: 700px;
    padding-bottom: 100px;
    padding-top: 50px;
}

.btn-top {
    position: fixed;
    bottom: 210px;
    right: 50%;
    margin-right: -42%;
    display: none;
    z-index: 100;
    /* transition */
}

.btn-top button {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    display: inline-block;
    width: 82px;
    height: 82px;
    line-height: 52px;
    border: 1px solid #bababa;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    position: relative;
    background-color: #fff;
}

.btn-top button:before {
    position: absolute;
    left: 50%;
    top: 20px;
    display: inline-block;
    content: "";
    width: 12px;
    height: 6px;
    background: url("../images/icon/icon_top_arrow.png") no-repeat 50% 50%;
    margin-left: -6px;
}

.btn-top button span {
    display: block;
    margin-top: 20px;
}

.container2 .inner-menu ul li.active a, .container2 .inner-menu ul li:hover a {
    border-bottom-color: #016cbf;
    color: #016cbf;
}

.container2 .tb.list tbody td > a:hover, .container2 .tb.list tbody td > a.on, .container2 .tb.list2 tbody td > a:hover, .container2 .tb.list2 tbody td > a.on {
    color: #016cbf;
}

.container2 .paging a.on, .container2 .paging a:hover {
    background-color: #016cbf;
}

.container2 .paging a.next:hover, .container2 .paging a.prev:hover, .container2 .paging a.prev-end:hover, .container2 .paging a.next-end:hover {
    background-color: transparent;
}

.container2 .paging a.on, .container2 .paging a:hover {
    background-color: #016cbf;
}

.container2 .sub-title {
    color: #016cbf;
}

.container2 .img-name {
    background: #016cbf;
}

/* table tr th, table tr td { font-size: 16px; } */
.container3 .inner-menu ul li.active a, .container3 .inner-menu ul li:hover a {
    border-bottom-color: #016cbf;
    color: #016cbf;
}

.container3 .tb.list tbody td > a:hover, .container3 .tb.list tbody td > a.on, .container3 .tb.list2 tbody td > a:hover, .container3 .tb.list2 tbody td > a.on {
    color: #016cbf;
}

.container3 .paging a.on, .container3 .paging a:hover {
    background-color: #016cbf;
}

.container3 .paging a.next:hover, .container3 .paging a.prev:hover, .container3 .paging a.prev-end:hover, .container3 .paging a.next-end:hover {
    background-color: transparent;
}

.container3 .paging a.on, .container3 .paging a:hover {
    background-color: #016cbf;
}

.container3 .sub-title {
    color: #016cbf;
}

.container3 .img-name {
    background: #016cbf;
}

table tr th, table tr td {
    font-size: 16px;
}

/*******************************************************************
header
********************************************************************/
#header {
    border-bottom: 2px solid #5a5a5a;
    position: relative;
}

#header .container {
    max-width: 1120px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
    height: 66px;
}

#header .container::after {
    clear: both;
    content: "";
    display: table;
}

/* .header-logo { float: left; margin-top: 14px; } */
.header-logo a {
    display: inline-block;
    width: 198px;
    height: 36px;
    background: url("../images/common/logo.gif") no-repeat left top;
}

#gnb {
    float: left;
    margin-top: 12px;
    margin-left: 12px;
}

.top-menu::after {
    clear: both;
    content: "";
    display: table;
}

/* .top-menu > li { float: left; } 200720*/
.top-menu > li > a {
    display: inline-block;
    color: #5a5a5a;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 31px;
}

/*.top-menu > li:hover .depth2, .top-menu > li.active .depth2 {z-index: 1000;visibility:visible;opacity:1;transition-delay: 0s;transition-duration: 0.3s;}*/
.top-menu > li .depth2 {
    display: none;
    left: 0;
    z-index: 1000;
    /*
    transition : opacity .2s ease-in;
    -webkit-transition: opacity .2s ease-in;
    visibility:visible;
    z-index: -100;
    opacity:1;
    transition: visibility 0s linear 0.1s, opacity 0.1s linear;
    -webkit-transition: visibility 0s linear 0.1s, opacity 0.1s linear;
    */
    position: absolute;
    width : 100%;
    text-align: center;
    border-top: 2px solid #5a5a5a;
    border-bottom: 1px solid black;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    padding-top: 20px;
    padding-bottom: 15px;
    min-height: 200px;
}

.top-menu > li ul.depth2 > li.children>a::before {
    content : ">";
    float: right;
}

.top-menu > li .depth2 > ul::after {
    clear: both;
    content: "";
    display: table;
}

.top-menu > li ul.depth2 > li {
    display: inline-block;
    vertical-align: top;
    padding: 0px 10px;
    font-size: 14px;
    margin-right: 40px;
}

.top-menu > li ul.depth2 > li:last-child {
    margin-right: 0px;
}

.top-menu > li.active .depth2, .top-menu > li:hover .depth2 {
    background-color: rgba(255, 255, 255, 1);
}

.top-menu > li ul.depth2 > li > a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0px 7px;
    font-size: 15px;
    color: #000;
    font-weight: bold;
    text-align: left;
}

/* .top-menu > li .depth2.sticky { position: fixed; top: 0px; } */
.top-menu > li ul.depth3 > li {
    text-align: left;
    max-width: 180px;
}

.top-menu > li ul.depth3 > li > a {
    display: inline-block;
    padding: 7px 0px 7px 0px;
    color: #262626;
    font-size: 13px;
}

.top-menu > li ul.depth3 > li > a:before {
    content: "・";
}

.top-menu > li ul.depth3 > li.active {
    display: block;
}

/* .top-menu > li.depth1.active > a, .top-menu > li.depth1:hover > a, .top-menu > li.depth1.on > a{ background-color: #262626; color: #fff; } 200720*/
.top-menu > li.depth1:hover > a {
    background-color: #5a5a5a;
    color: #fff;
}

.top-menu > ul.depth2 > li.active > a, .top-menu > ul.depth2 > li:hover > a, .top-menu > ul.depth2 > li.on > a {
    color: #016cbf;
    font-weight: bold;
}

.top-menu > li ul.depth3 li.active > a, .top-menu > li ul.depth3 li:hover > a, .top-menu > li ul.depth3 li.on > a {
    color: #1789cd;
    font-weight: bold;
}

.top-menu > li ul.depth2 > li:hover > a, .top-menu > li ul.depth2 > li.on > a {
    color: #1789cd;
}

.util-area {
    float: right;
    display: inline-block;
    margin-top: 12px;
    position: relative;
}

.util-area::after {
    clear: both;
    content: "";
    display: table;
}

.util-area .btn-search {
    float: left;
    width: 32px;
    height: 32px;
    background: transparent url("../images/icon/icon_search.png") no-repeat 0 0;
    cursor: pointer;
}

.util-menu {
    float: left;
    display: table;
    height: 32px;
}

.util-menu::after {
    clear: both;
    content: "";
    display: table;
}

.util-menu li {
    display: table-cell;
    vertical-align: middle;
    padding-left: 18px;
}

.util-menu li a {
    font-size: 13px;
    color: #7c7c7c;
}

.search-wrap {
    position: absolute;
    right: 126px;
    top: 0px;
    width: 489px;
}

.search-wrap .btn-search {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

.search-wrap .btn-x {
    width: 32px;
    height: 32px;
    background: #fff url("../images/icon/icon_btn_x.png") no-repeat 50% 50%;
    border: 1px solid #838383;
    border-right: 0;
    position: absolute;
    right: 441px;
    top: 0;
    cursor: pointer;
}

.search-wrap .search-form {
    display: none;
    opacity: 0;
    position: absolute;
    right: 17px;
    top: 0;
    z-index: 9;
}

.search-wrap .search-form input.text {
    width: 441px;
    height: 32px;
    border-radius: 0 25px 25px 0;
    padding-left: 10px;
    border: 1px solid #838383;
}

.search-wrap.open .search-form {
    display: block;
    opacity: 1;
}

.tx {
    font-size: 16px;
    line-height: 1.4;
}

/* 자료서비스 메뉴 */
.tx-data-service {
    font-size: 24px;
    color: #595958;
    margin-left: 20px;
    vertical-align: 8px;
}

.data-service-menu {
    position: absolute;
    left: 0;
    top: 66px;
    width: 100%;
    height: 48px;
    background-color: #262626;
}

.data-service-menu > ul {
    max-width: 1120px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
    position: relative;
}

.data-service-menu > ul::after {
    clear: both;
    content: "";
    display: table;
}

.data-service-menu > ul > li {
    float: left;
}

.data-service-menu > ul > li > a {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    padding: 0 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
}

.data-service-menu > ul > li:hover a, .data-service-menu > ul > li .active a {
    background-color: #016cbf;
    color: #fff;
}

.data-service-menu.sticky {
    position: fixed;
    top: 0px;
}

/*******************************************************************
Footer
********************************************************************/
#footer {
    clear: both;
    border-top: 1px solid #eaeaea;
    padding-top: 25px;
    padding-bottom: 25px;
}

#footer .footer-menu {
    max-width: 1120px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
    margin-bottom: 15px;
}

#footer .footer-menu ul::after {
    clear: both;
    content: "";
    display: table;
}

#footer .footer-menu ul li {
    float: left;
    margin-left: 33px;
}

#footer .footer-menu ul li:first-child {
    margin-left: 0;
}

#footer .footer-menu ul li a {
    font-size: 14px;
    color: #4a4a4a;
}

#footer .footer-menu ul li:first-child a {
    color: #016cbf;
    font-weight: bold;
}

#footer .container {
    max-width: 1120px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
}

#footer .container::after {
    clear: both;
    content: "";
    display: table;
}

#footer .container .footer-address {
    display: inline-block;
    font-size: 12px;
    color: #4a4a4a;
    line-height: 1.5;
    float: left; 
}

#footer .container .site-link {
    position: relative;
    float: right;
    border: 1px solid #838383;
    width: 172px;
    height: 34px;
    line-height: 30px;
}

#footer .container .site-link > a {
    display: block;
    padding-left: 10px;
    font-size: 14px;
    color: #4a4a4a;
    background: url("../images/common/select_arrow.png") 96% center no-repeat;
}

#footer .container .site-link > a:hover {
    font-weight: bold;
}

#footer .container .site-link .site-list {
    width: 172px;
    position: absolute;
    left: -1px;
    max-height: 294px;
    overflow: auto;
    bottom: 33px;
    border: 1px solid #838383;
    background-color: #fff;
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
}

#footer .container .site-link .site-list li a {
    display: block;
    padding-left: 10px;
    font-size: 14px;
    color: #4a4a4a;
}

#footer .container .site-link .site-list li a:hover {
    font-weight: bold;
    background-color: #dfdfdf;
}

#footer .container .site-link .site-list.on {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    opacity: 1;
    visibility: visible;
}

#footer .container .site-link.category-link {
    float: left;
    margin-left: 120px;
    margin-left: 78px;
}

#footer .container .site-link.site-info {
    margin-left: 20px;
    float: left;
}

#footer .container .site-link.site-info>a {
    overflow: hidden;
    height: inherit;
}

/*******************************************************************
MAIN
********************************************************************/
.main .top-menu > li.depth1 .depth2 {
    background: rgba(0, 0, 0, 0.8);
}

.main .top-menu > li.depth1 .depth2 > li > a, .main .top-menu > li.depth1 .depth3 > li > a {
    color: #fff;
}

.main .top-menu > li .depth2 {
    border-bottom: none;
}

/*
.main .top-menu > li.depth1_1 .depth3 ul > li.active a, .main .top-menu > li.depth1_1 .depth3 ul > li:hover a { color: #016cbf; }
.main .top-menu > li.depth1_2 .depth3 ul > li.active a, .main .top-menu > li.depth1_2 .depth3 ul > li:hover a { color: #016cbf; }
.main .top-menu > li.depth1_3 .depth3 ul > li.active a, .main .top-menu > li.depth1_3 .depth3 ul > li:hover a { color: #016cbf; }
*/
#main-content {
    background-color: #eaeaea;
}

.br {
    display: block;
}

/* .visual-section { width: 100%; height: 633px; position: relative; z-index: 10; } */
/* .visual-section .text-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: table; } */
.visual-section .text-wrap .visual-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    line-height: 1.4;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.visual-section .text-wrap .visual-text .px55 {
    font-size: 55px;
}

.visual-section .text-wrap .visual-text .px35 {
    font-size: 35px;
}

.visual-section .text-wrap .visual-text .px20 {
    font-size: 20px;
}

.visual-section .text-wrap .visual-text .px30 {
    font-size: 30px;
}

/* main visual 위성  */
.main-satellite {
    margin: 0px;
    background-size: 1100px 431px;
    width: 1100px;
    height: 431px;
    background-image: url(../images/main/bg_main01_sat.png);
    background-repeat: no-repeat;
    top: -20px;
    position: absolute;
    right: 10%;
    z-index: 2;
}

@-webkit-keyframes ani-satellite {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        -moz-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
    }
}

@-moz-keyframes ani-satellite {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        -moz-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
    }
}

@-ms-keyframes ani-satellite {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        -moz-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
    }
}

@keyframes ani-satellite {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 3%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        -moz-transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
        transform: rotateZ(180deg) translate3d(0, 3%, 0) rotateZ(-180deg);
    }
}

.main-earth, .main-bg1, .main-bg2, .main-stars, .main-gal1, .main-gal2, .main-gal3, .main-gal4, .main-gal5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.main-stars {
    background: url(../images/main/stars.png) 50% 50% repeat;
    z-index: 0;
    -webkit-animation: ani-wave 15s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: ani-wave 15s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: ani-wave 15s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.main-gal1 {
    background: url(../images/main/img_gall1.png) 50% 50% repeat;
    z-index: 0;
    width: 100px;
    height: 101px;
    top: 10%;
    bottom: auto;
    left: auto;
    right: 40%;
}

.main-gal2 {
    background: url(../images/main/img_gall2.png) 50% 50% repeat;
    z-index: 0;
    width: 140px;
    height: 92px;
    top: 60%;
    bottom: auto;
    left: auto;
    right: 10%;
}

.main-gal3 {
    background: url(../images/main/img_gall3.png) 50% 50% repeat;
    z-index: 0;
    width: 71px;
    height: 70px;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 65%;
}

.main-gal4 {
    background: url(../images/main/img_gall4.png) 50% 50% repeat;
    z-index: 0;
    width: 100px;
    height: 66px;
    top: 25%;
    bottom: auto;
    left: auto;
    right: 10%;
}

.main-gal5 {
    background: url(../images/main/img_gall5.png) 50% 50% repeat;
    z-index: 0;
    width: 100px;
    height: 66px;
    top: 70%;
    bottom: auto;
    left: auto;
    right: 90%;
}

.main-bg1 {
    background: url(../images/main/bg_main01_star.jpg) 0 0 no-repeat;
    background-size: cover;
    z-index: 0;
}

.main-bg2 {
    background: url(../images/main/bg_main03.jpg) 50% 50% no-repeat;
    background-size: cover;
    z-index: 0;
}

.main-earth {
    background: url(../images/main/bg_main01_earth.png) 0 0 no-repeat;
    z-index: 1;
    left: -40px;
}

/* parallax effect */
.main-scene, .layer {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* .main-scene { min-height: 460px; position: relative; overflow: hidden; } */
.layer {
    position: absolute;
}

.layer div {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ani-rotate-1 {
    -webkit-animation: ani-rotate 30s 0.01s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: ani-rotate 30s 0.01s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: ani-rotate 30s 0.01s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.ani-rotate-2 {
    -webkit-animation: ani-rotate 35s 0.01s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: ani-rotate 35s 0.01s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: ani-rotate 35s 0.01s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.ani-rotate-3 {
    -webkit-animation: ani-rotate 33s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: ani-rotate 33s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: ani-rotate 33s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.ani-rotate-4 {
    -webkit-animation: ani-rotate 31s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: ani-rotate 31s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: ani-rotate 31s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.ani-rotate-5 {
    -webkit-animation: ani-rotate 37s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -moz-animation: ani-rotate 37s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: ani-rotate 37s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@-webkit-keyframes ani-rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-moz-keyframes ani-rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-ms-keyframes ani-rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes ani-rotate {
    0% {
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes ani-wave {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        -moz-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
    }
}

@-moz-keyframes ani-wave {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        -moz-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
    }
}

@-ms-keyframes ani-wave {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        -moz-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
    }
}

@keyframes ani-wave {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        -moz-transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 1%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        -moz-transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 1%, 0) rotateZ(-360deg);
    }
}

.link-section {
    margin: -55px auto 0;
    width: 1100px;
    position: relative;
    z-index: 20;
    background-color: #fff;
}

.link-section::after {
    clear: both;
    content: "";
    display: table;
}

.link-section .cube {
    width: calc(100% / 4);
    float: left;
    height: 274px;
    padding: 30px 19px;
    -webkit-transition: all, 0.7s;
    -moz-transition: all, 0.7s;
    transition: all, 0.7s;
}

.link-section .cube > a {
    display: block;
    height: 100%;
}

.link-section .cube:hover {
    background-color: #effbfb;
}

.link-section .title {
    display: block;
    font-size: 20px;
    color: #464646;
    text-align: center;
}

.mini-tab {
    position: relative;
    width: 100%;
    height: 100%;
}

.mini-tab > li {
    position: absolute;
    width: 100%;
    top: 48px;
}

.mini-tab > li .tab-wrap {
    position: relative;
}

.mini-tab > li .tab-wrap .btn-plus {
    position: absolute;
    top: -48px;
    right: 0;
    border: 0;
    width: 15px;
    height: 15px;
    background: url("../images/main/img_plus.png") no-repeat 50% 50%;
}

.mini-tab > li .btn-tab {
    position: absolute;
    top: -48px;
    left: 0;
    font-size: 18px;
    margin-right: 20px;
    color: #616161;
    cursor: pointer;
}

.mini-tab > li.tab2 .btn-tab {
    left: 67px;
}

.mini-tab > li.tab3 .btn-tab {
    left: 134px;
    white-space: nowrap;
}

.mini-tab > li.on .btn-tab {
    font-weight: bold;
    color: #464646;
    box-shadow: 0 .20em 0 0 #016cbf, 0 .20em 0 0 #016cbf;
}

.mini-tab > li.on .mini-cont {
    display: block;
}

.mini-tab > li .mini-cont {
    display: none;
}

.mini-tab > li .mini-cont li {
    margin-top: 10px;
}

.mini-tab > li .mini-cont li:first-child {
    margin-top: 0;
}

.mini-tab > li .mini-cont a {
    color: #4a4a4a;
    line-height: 1.2;
}

.mini-tab > li .mini-cont a .date {
    display: block;
    color: #919191;
}

.mini-tab > li .mini-cont a .tit {
    display: block;
    /*text-overflow: ellipsis; white-space: nowrap;*/
    overflow: hidden;
    width: 99%;
}

.text-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.text-wrap .title {
    text-align: left;
}

.text-wrap .text {
    display: block;
    margin-top: 25px;
    line-height: 1.5;
    font-size: 15px;
    color: #4a4a4a;
}

.text-wrap .btn-plus {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    width: 15px;
    height: 15px;
    background: url("../images/main/img_plus.png") no-repeat 50% 50%;
}

.main1 .visual-section {
    text-align: center;
}

.main1 .link-section .mini-banner1 {
    background: #000 url("../images/main/img_earth.png") no-repeat 50% 75px;
}

.main1 .link-section .mini-banner1 .title {
    color: #fff;
}

.main1 .link-section .mini-banner1:hover {
    background-color: #283c53;
}

.main1 .link-section .mini-banner2 {
    background: url("../images/main/img_2a.png") no-repeat 50% 89px;
}

.main1 .link-section .mini-banner2:hover {
    background-color: #effbfb;
}

.main1 .link-section .mini-banner3 {
    background: #cbddf3 url("../images/main/img_dataservice.png") no-repeat 50% 89px;
}

.main1 .link-section .mini-banner3 .title {
    color: #4a6587;
}

.main1 .link-section .mini-banner3 .list {
    margin-top: 180px;
}

.main1 .link-section .mini-banner3 .list::after {
    clear: both;
    content: "";
    display: table;
}

.main1 .link-section .mini-banner3 .list li {
    float: left;
    margin: 0 10px;
}

.main1 .link-section .mini-banner3 .list li a {
    font-size: 17px;
    color: #4a6587;
    font-weight: bold;
}

.main1 .link-section .mini-banner3 .list li a:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 11px;
    background: url("../images/main/icon_arrow_right.png") no-repeat 0 0;
    margin-left: 8px;
    vertical-align: middle;
}

.main1 .link-section .mini-banner3:hover {
    background-color: #d0e8f4;
}

.main2 .visual-section {
    background: url("../images/main/bg_main02.jpg") no-repeat 50% 50%;
}

.main2 .link-section .mini-banner1 {
    background: #a24242 url("../images/main/img_star.png") no-repeat 45px 100px;
}

.main2 .link-section .mini-banner1 .title {
    color: #fff;
}

.main2 .link-section .mini-banner1 .sub {
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
    display: block;
}

.main2 .link-section .mini-banner1:hover {
    background-color: #c35b5b;
}

.main2 .link-section .mini-banner2 {
    background: url("../images/main/img_class.png") no-repeat 50% 89px;
}

.main2 .link-section .mini-banner2 .list {
    margin-top: 179px;
}

.main2 .link-section .mini-banner2 .list::after {
    clear: both;
    content: "";
    display: table;
}

.main2 .link-section .mini-banner2 .list li {
    float: left;
    margin: 0 15px;
}

.main2 .link-section .mini-banner2 .list li a {
    font-size: 14px;
    color: #4a4a4a;
    font-weight: bold;
}

.main2 .link-section .mini-banner2 .list li a:after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 11px;
    background: url("../images/main/icon_arrow_right.png") no-repeat 0 0;
    margin-left: 8px;
    vertical-align: middle;
}

.main2 .link-section .mini-banner2:hover {
    background-color: #effbfb;
}

.main2 .link-section .mini-banner3 {
    background: #cbddf3 url("../images/main/img_edu.png") no-repeat 50% 89px;
}

.main2 .link-section .mini-banner3 .title {
    color: #4a6587;
}

.main2 .link-section .mini-banner3:hover {
    background-color: #d0e8f4;
}

.main3 .link-section .mini-banner1 {
    background-color: #3e55cc;
}

.main3 .link-section .mini-banner1 .title {
    color: #fff;
}

.main3 .link-section .mini-banner1 .sub {
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
    display: block;
}

.main3 .link-section .mini-banner1 .slider {
    margin-top: 35px;
    position: relative;
}

.main3 .link-section .mini-banner1 .slider .item {
    text-align: center;
}

.main3 .link-section .mini-banner1 .slider .item .img {
    display: inline-block;
    width: 200px;
    height: 119px;
}

.main3 .link-section .mini-banner1 .slider .item .text {
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    height: 35px;
    overflow: hidden;
    line-height: 1.4;
}

.main3 .link-section .mini-banner1 .slider .slick-dots {
    position: absolute;
    top: 98px;
    height: 16px;
}

.main3 .link-section .mini-banner1 .slider .slick-dots li {
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 25px;
}

.main3 .link-section .mini-banner1 .slider .slick-dots li.slick-active {
    width: 43px;
    background-color: #e3d36a;
}

.main3 .link-section .mini-banner1:hover {
    background-color: #5d74ea;
}

.main3 .link-section .mini-banner2 {
    text-align: center;
}

.main3 .link-section .mini-banner2 a {
    color: #4a4a4a;
}

.main3 .link-section .mini-banner2 a p {
    font-size: 14px;
    margin-top: 25px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 99%;
}

.main3 .link-section .mini-banner2 .title {
    display: block;
    margin-bottom: 35px;
}

.main3 .link-section .mini-banner3 {
    background: #cbddf3;
}

.main3 .link-section .mini-banner3 .title {
    color: #4a6587;
}

.main3 .link-section .mini-banner3 img {
    margin-top: 30px;
}

.main3 .link-section .mini-banner3:hover {
    background-color: #d0e8f4;
}

/* .menu-section { background-color: #fff; width: 1100px; margin: 30px auto 0; padding: 29px 26px; } */
.menu-section::after {
    clear: both;
    content: "";
    display: table;
}

.menu-section .bottom-nav {
    float: left;
    font-size: 15px;
}

.menu-section .bottom-nav > ul::after {
    clear: both;
    content: "";
    display: table;
}

.menu-section .bottom-nav > ul > li {
    float: left;
    width: 122px;
}

.menu-section .bottom-nav > ul > li .tit {
    font-weight: bold;
}

.menu-section .bottom-nav > ul > li a {
    color: #4a4a4a;
}

.menu-section .bottom-nav > ul > li a:hover {
    color: #1563af
}

.menu-section .bottom-nav > ul > li > ul {
    margin-top: 19px;
}

.menu-section .bottom-nav > ul > li > ul > li {
    color: #4a4a4a;
    margin-top: 9px;
}

.menu-section .bottom-nav > ul > li > ul > li:first-child {
    margin-top: 0px;
}

.menu-section .banner-link > a {
    display: inline-block;
    width: 323px;
    height: 201px;
    padding: 30px 25px;
    overflow: hidden;
}

.menu-section .banner-link > a .text {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
}

.menu-section .banner-link > a .text .point {
    font-size: 22px;
}

.menu-section .banner-link .banner1 {
    background: url("../images/main/img_bottom01.jpg") no-repeat 0 0;
}

.menu-section .banner-link .banner2 {
    background: url("../images/main/img_bottom02.jpg") no-repeat 0 0;
    margin-left: 20px;
}

.menu-section .banner-zone {
    float: left;
    font-size: 15px;
    width: 33%;
    margin-right: 19px;
}

.menu-section .banner-zone .banner-zone-top {
    overflow: hidden;
    width: 100%;
    display: inline-block;
}

.menu-section .banner-zone .banner-zone-top h3 {
    font-size: 11px;
    line-height: 11px;
    display: inline-block;
    width: 44px;
    margin-bottom: 0px;
    float: left;
}

.menu-section .banner-zone .banner-zone-top > ul::after {
    clear: both;
    content: "";
    display: table;
}

.menu-section .banner-zone .banner-zone-top > ul > li {
    float: left;
    width: 15px;
}

/* .menu-section .banner-zone .cont {border : 1px solid #cdcdcd; height: 143px; padding: 3px 1px 1px 1px; background-color: #f4f4f4; position: relative;} */
.menu-section .banner-zone .cont div {
    width : 100%;
    min-height: 143px;
    text-align: center;
    line-height: 143px;
}

.menu-section .banner-zone .cont div span {
    font-size: 14px;
    vertical-align: middle;
}

.menu-section .banner-zone .cont img {
    vertical-align: middle;
}

/*******************************************************************
button style
********************************************************************/
.btn-login-group::after {
    clear: both;
    content: "";
    display: table;
}

.btn-login-group .btn-primary {
    float: left;
}

.btn-login-group .btn-line {
    float: right;
}

.btn-area {
    margin-top: 30px;
    text-align: center;
}

.btn-area.right {
    text-align: right;
}

/*******************************************************************
input style
********************************************************************/
.group .input {
    margin-top: 10px;
    color: #9c9c9c;
}

.group .input:first-child {
    margin-top: 0;
}

/* select box */
.select-style {
    position: relative;
    width: 172px;
    height: 40px;
    background: url("../images/common/select_arrow.png") 96% center no-repeat;
    /* 화살표 이미지 */
    border: 1px solid #838383;
    overflow: hidden;
}

.select-style label {
    position: absolute;
    font-size: 13px;
    color: #4a4a4a;
    top: 30%;
    left: 5px;
    letter-spacing: 1px;
    word-break: break-all;
    line-height: 1.3;
    padding-right: 12px;
}

.select-style select {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    opacity: 0;
    filter: alpha(opacity=0);
    /* IE 8 */
}

.select-style2 {
    position: relative;
    width: 258px;
    height: 40px;
    overflow: hidden;
}

.select-style2 label {
    position: absolute;
    width: 65px;
    font-size: 13px;
    color: #4a4a4a;
    top: 30%;
    left: 5px;
    letter-spacing: 0px;
    word-break: break-all;
    line-height: 1.3;
    padding-right: 12px;
}

.select-style2 select {
    float: right;
    width: 180px;
    height: 29px;
    border: 1px solid #999;
    padding: 5px 7px;
    font-size: 13px;
    -webkit-appearance: none;
    /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    background: url("../images/common/select_arrow.png") no-repeat 95% 50%;
    /* 화살표 모양의 이미지 */
}

.select-style2 select::-ms-expand {
    display: none;
}

/* IE 10, 11의 네이티브 화살표 숨기기 */
/*******************************************************************
icon style
********************************************************************/
.icon-i {
    display: inline-block;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    background: url("../images/icon/icon_i.gif") no-repeat left top;
    margin-right: 5px;
}

.icon-attach {
    display: inline-block;
    width: 18px;
    height: 21px;
    vertical-align: middle;
    background: url("../images/icon/icon_attach.gif") no-repeat left top;
}

.icon-vod-view {
    display: inline-block;
    width: 26px;
    height: 21px;
    vertical-align: middle;
    background: url("../images/icon/icon_vod_view.png") no-repeat left top;
}

.icon-down {
    display: inline-block;
    width: 25px;
    height: 21px;
    vertical-align: middle;
    background: url("../images/icon/icon_down.png") no-repeat left top;
}

/*******************************************************************
text style
********************************************************************/
.text-info {
    font-size: 18px;
}

.text-call {
    font-size: 22px;
    font-weight: bold;
}

.text-call em {
    color: #016cbf;
}

.text-warning {
    font-size: 14px;
    color: #ec4444;
    line-height: 1.3;
}

.text-warning.inline {
    display: inline;
}

.text-error {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #ec4444;
    line-height: 1.3;
}

/*******************************************************************
board style
********************************************************************/
.board-view-section {
    border-top: 1px solid #626262;
    border-bottom: 1px solid #b9b9b9;
}

.board-view-section .board-header {
    width: 100%;
    padding: 20px;
    background-color: #f4f4f4;
}

.board-view-section .board-header::after {
    clear: both;
    content: "";
    display: table;
}

/* .board-view-section .board-header strong { float: left; vertical-align: middle; font-size: 20px; font-weight: bold; width: 670px; line-height: 1.4; } */
.board-view-section .board-header .group {
    float: right;
    line-height: 1.7;
}

.board-view-section .board-header .group::after {
    clear: both;
    content: "";
    display: table;
}

.board-view-section .board-header .group span {
    float: left;
    font-size: 14px;
    margin-left: 20px;
}

.board-view-section .board-content {
    padding: 40px 20px;
    line-height: 1.5;
    border-top: 1px solid #b9b9b9;
}

.board-util {
    width: 100%;
}

.board-util::after {
    clear: both;
    content: "";
    display: table;
}

.board-util .all-tx {
    float: left; 
    display: inline-block;
    margin-top: 10px;
}

.board-util .all-tx em {
    font-weight: bold;
}

.search-box {
    float: right;
}

.search-box::after {
    clear: both;
    content: "";
    display: table;
}

.search-box .select-style {
    float: left;
    width: 120px;
    height: 36px;
    border-right: 0;
}

.search-box .search-text {
    float: left;
}

.search-box .search-text::after {
    clear: both;
    content: "";
    display: table;
}

.search-box .search-text .input {
    float: left;
    width: 206px;
    border-right: 0;
}

.search-box .search-text .btn-search {
    float: left;
    width: 36px;
    height: 36px;
    border: 1px solid #8d8d8d;
    border-left: 0;
    cursor: pointer;
    background: url("../images/common/icon_board_search.png") no-repeat 50% 50%;
}

.board-list-section {
    margin-top: 20px;
}

.board-view-section + .board-list-section {
    margin-top: 100px;
}

.board-attach {
    font-size: 16px;
    color: #9c9c9c;
    padding: 20px;
    border-top: 1px solid #b9b9b9;
}

.board-attach::after {
    clear: both;
    content: "";
    display: table;
}

.board-attach span {
    color: #4a4a4a;
    float: left;
}

.board-attach a {
    display: block;
    color: #808080;
    margin-left: 73px;
    line-height: 1.3;
}

.board-attach + .board-content {
    border-top: 1px solid #626262;
}

.tb {
    table-layout: fixed;
    width: 100%;
    border-top: 1px solid #626262;
    margin-top: 20px;
}

.tb.list thead th, .tb.list2 thead th, .tb.list3 thead th {
    background-color: #f4f4f4;
    border-bottom: 1px solid #626262;
    padding: 15px;
    font-weight: bold;
}

.tb.list tbody td, .tb.list2 tbody td, .tb.list3 tbody td {
    border-bottom: 1px solid #b9b9b9;
    padding: 15px;
    text-align: center;
    vertical-align: middle;
}

/* .tb.list tbody td > a, .tb.list2 tbody td > a, .tb.list3 tbody td > a { color: #4a4a4a; display: block; width: 90%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } */
.tb.list tbody td > a:hover, .tb.list tbody td > a.on, .tb.list2 tbody td > a:hover, .tb.list2 tbody td > a.on, .tb.list3 tbody td > a:hover, .tb.list3 tbody td > a.on {
    color: #016cbf;
}

.tb.list tbody td.left, .tb.list2 tbody td.left, .tb.list3 tbody td.left {
    text-align: left;
}

.tb.list2 {
    table-layout: auto;
}

.tb.list2 th, .tb.list2 td {
    font-size: 15px;
}

.tb.list2 thead th {
    border-left: 1px solid #626262;
}

.tb.list2 thead th:first-child {
    border-left: 0;
}

.tb.list2 tbody th {
    border-bottom: 1px solid #b6b6b6;
    vertical-align: middle;
    font-weight: bold;
}

.tb.list2 tbody td {
    border-left: 1px solid #b8b8b8;
    border-bottom: 1px solid #b8b8b8;
    line-height: 1.3;
}

.tb.list2 tbody td:first-child {
    border-left: 0;
}

.tb.list3 {
    table-layout: auto;
    border-top: 0;
}

.tb.list3 tbody th {
    border-top: 1px solid #626262;
    border-right: 1px solid #626262;
    border-bottom: 1px solid #626262;
    line-height: 1.3;
    vertical-align: middle;
    background-color: #f4f4f4;
}

.tb.list3 tbody td {
    border-color: #b8b8b8;
    border-top: 1px solid #b2b2b2;
}

.tb.list3.list3-th tbody th {
    text-align: center;
    font-weight: bold;
}

.tb.list3.list3-th tbody td {
    text-align: left;
}

.tb.list3.list3-th tbody td::after {
    clear: both;
    content: "";
    display: table;
}

.tb.list3.list3-th tbody td .img {
    float: left;
}

/* .tb.list3.list3-th tbody td .img + .tx { margin-left: 280px; clear: none; } */
.tb.list3.list3-th tbody td .hypen-list {
    margin-bottom: 0;
}

.tb.list3.list3-th tbody td .hypen-list li:first-child {
    margin-top: 0;
}

.tb.muti {
    margin-top: 40px;
}

.tb.muti thead th {
    background-color: #f4f4f4;
    border-bottom: 1px solid #b9b9b9;
    padding: 15px;
    font-weight: bold;
    vertical-align: middle;
    padding: 10px 0;
}

.tb.muti thead .small th {
    font-size: 12px;
    color: #b9b9b9;
}

.tb.muti tbody td {
    text-align: center;
    padding: 13px 5px;
    border-bottom: 1px solid #b9b9b9;
}

/*******************************************************************
Layout SUB
********************************************************************/
.title-header + section {
    margin-top: 50px;
}

.title-header {
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #626262;
}

.title-header::after {
    clear: both;
    content: "";
    display: table;
}

.title-header .title {
    float: left;
    font-size: 24px;
}

.title-header .breadcrumb {
    float: right; 
    display: inline-block;
    margin-top: 10px;
}

.title-header .breadcrumb::after {
    clear: both;
    content: "";
    display: table;
}

.title-header .breadcrumb > span {
    display: inline-block;
}

.title-header .breadcrumb .menu-active {
    font-weight: bold;
}

.title-header .breadcrumb .gt {
    margin: 0 10px;
    font-size: 10px;
}

.sub-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 17px;
    color: #016cbf;
}

.description {
    font-size: 16px;
}

.description .text-warning {
    font-size: 16px;
}

.login-section {
    width: 537px;
    margin: 95px auto 0;
}

.login-section .login-text {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.login-section .login-text span {
    font-size: 32px;
    letter-spacing: 0;
}

.login-section .login-box {
    margin: 30px 0 20px;
    padding: 30px 0;
    border-top: 1px solid #5a5a5a;
    border-bottom: 1px solid #5a5a5a;
}

.login-section .login-box::after {
    clear: both;
    content: "";
    display: table;
}

.login-section .login-box .group {
    float: left;
    width: 375px;
}

.login-section .login-box .btn {
    float: right;
    height: 86px;
}

.login-section .text-info {
    margin-top: 107px;
    margin-bottom: 10px;
}

.login-section .text-call {
    margin-left: 27px;
}

.join-section {
    margin-top: 70px;
}

.ly-table.edit {
    margin: 20px 0;
    padding: 40px 0;
    border-top: 1px solid #b9b9b9;
    border-bottom: 1px solid #b9b9b9;
}

.ly-table.edit table th, .ly-table.edit table td {
    padding: 5px 0;
    vertical-align: middle;
    height: 43px;
}

.ly-table.edit table th {
    padding-left: 45px;
    text-align: left;
}

.ly-table.edit table td {
    vertical-align: middle;
}

.ly-table.edit table td::after {
    clear: both;
    content: "";
    display: table;
}

.ly-table.edit table td .input, .ly-table.edit table td .select-style {
    float: left;
    width: 385px;
}

.ly-table.edit table td .text-warning {
    margin-left: 400px;
}

.ly-table.chart th, .ly-table.chart td {
    padding: 20px;
    vertical-align: middle;
    border-top: 1px solid #dedede;
}

.ly-table.chart th {
    padding-left: 25px;
    text-align: left;
    background-color: #f4f4f4;
}

.ly-table.chart td {
    vertical-align: middle;
    line-height: 1.5;
}

.ly-table.chart td::after {
    clear: both;
    content: "";
    display: table;
}

.ly-table.chart td .input, .ly-table.chart td .select-style {
    float: left;
    width: 385px;
}

.ly-table.chart td .text-warning {
    margin-left: 400px;
}

.ly-table .tb-input {
    width: 100%;
    border-bottom: 1px solid #b9b9b9;
}

.ly-table .tb-input th, .ly-table .tb-input td {
    padding: 20px;
    vertical-align: middle;
    border-top: 1px solid #dedede;
}

.ly-table .tb-input th {
    padding-left: 25px;
    text-align: left;
    background-color: #f4f4f4;
}

.ly-table .tb-input td {
    vertical-align: middle;
    line-height: 1.5;
}

.ly-table .tb-input td::after {
    clear: both;
    content: "";
    display: table;
}

.ly-table .tb-input td .input, .ly-table .tb-input td .select-style {
    float: left;
    width: 385px;
}

.ly-table .tb-input td .text-warning {
    margin-left: 400px;
}

.checkbox label {
    vertical-align: middle;
    margin-right: 5px;
}

.checkbox input {
    margin: 0;
    vertical-align: middle;
}

.title-group {
    border-bottom: 1px solid #b9b9b9;
    padding-bottom: 20px;
}

.title-group::after {
    clear: both;
    content: "";
    display: table;
}

.title-group .sub-title {
    float: left;
}

.title-group .checkbox {
    float: right;
}

.title-group .checkbox label {
    margin-right: 5px;
}

.terms-section {
    margin-top: 70px;
    padding-bottom: 40px;
    border-bottom: 1px solid #b9b9b9;
}

.terms-section .checkbox {
    margin-top: 15px;
}

.terms-box {
    height: 98px;
    overflow-y: scroll;
    padding: 10px;
    border: 1px solid #8d8d8d;
    line-height: 1.3;
}

.terms-title {
    display: block;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: bold;
}

.paging {
    display: table;
    margin: 90px auto 0;
}

/* .paging::after {
    clear: both;
    content: "";
    display: table;
}

.paging a {
    float: left; 
    display: inline-block;
    padding: 0 2px;
    margin: 0 2px;
    height: 23px;
    line-height: 23px;
    font-size: 15px;
    color: #2d2d2d;
    text-align: center;
}

.paging a.prev,.paging a.prev-end,.paging a.next,.paging a.next-end {
    width: 23px;
}

.paging a.on, .paging a:hover {
    color: #fff;
    background-color: #016cbf;
}

.paging a.on strong, .paging a:hover strong {
    color: #fff;
} */

/* 2022.12.20.수정 */
.paging a {
    float: left; 
    display: inline-block;
    padding: 0 3px;
    margin: 0 2px;
    height: 20px;
    min-width: 20px;
    width: fit-content;
    line-height: 22px;
    border-radius: 50%;
    font-size: 14px;
    color: #2d2d2d;
    text-align: center;
}

.paging a.prev,.paging a.prev-end,.paging a.next,.paging a.next-end {
    /* width: 16px; */ border-radius: 0;
}

.paging a.on, .paging a:hover {
    color: #fff;
    background-color: #016cbf;
}

.paging a.on strong, .paging a:hover strong {
    color: #fff;
}

/* .paging a.prev-end {
    background-color: transparent;
    background: url("../images/icon/icon_paging_first.gif") no-repeat 50% 50%;
}

.paging a.prev {
    background-color: transparent;
    background: url("../images/icon/icon_paging_prev.gif") no-repeat 50% 50%;
}

.paging a.next {
    background-color: transparent;
    background: url("../images/icon/icon_paging_next.gif") no-repeat 50% 50%;
}

.paging a.next-end {
    background-color: transparent;
    background: url("../images/icon/icon_paging_last.gif") no-repeat 50% 50%;
} */


.paging a.prev-end {
    background-color: transparent;
    background: url("../images/svg/prev-end.svg") no-repeat center/60%;
}

.paging a.prev {
    background-color: transparent;
    background: url("../images/svg/prev.svg") no-repeat center/60%;
}

.paging a.next {
    background-color: transparent;
    background: url("../images/svg/next.svg") no-repeat center/60%;
}

.paging a.next-end {
    background-color: transparent;
    background: url("../images/svg/next-end.svg") no-repeat center/60%;
}

.paging a.prev-end:hover {
    background-color: transparent;
    background: url("../images/svg/prev-end_hover.svg") no-repeat center/60%;
}

.paging a.prev:hover {
    background-color: transparent;
    background: url("../images/svg/prev_hover.svg") no-repeat center/60%;
}

.paging a.next:hover {
    background-color: transparent;
    background: url("../images/svg/next_hover.svg") no-repeat center/60%;
}

.paging a.next-end:hover {
    background-color: transparent;
    background: url("../images/svg/next-end_hover.svg") no-repeat center/60%;
}
/* //2022.12.20.수정 */

.publication-section .list {
    margin-left: -98px;
}

.publication-section .list::after {
    clear: both;
    content: "";
    display: table;
}

.publication-section .list li {
    float: left;
    width: 201px;
    margin-left: 98px;
    margin-top: 50px;
}

.publication-section .list li .img {
    display: inline-block;
    width: 201px;
    height: 284px;
    border: 1px solid #e4e4e4;
}

.publication-section .list li .img img {
    width: 100%;
    height: 100%;
}

.publication-section .list li .name {
    display: block;
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    color: #4a4a4a;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    line-height: 1.4;
}

.publication-section .list li .date {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: #4a4a4a;
}

/* .board-control { width: 600px; border-top: 1px solid #626262; border-bottom: 1px solid #626262; } */
.board-control > div {
    height: 50px;
    line-height: 48px;
}

.board-control > div > a {
    display: inline-block;
    width: 104px;
}

.board-control .next-txt, .board-control .prev-txt {
    display: table;
    width: 100%;
    border-bottom: 1px solid #b9b9b9;
}

.board-control .next-txt a, .board-control .prev-txt a {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    line-height: 50px;
}

.board-control .next-txt a span, .board-control .prev-txt a span {
    font-size: 16px;
    color: #4a4a4a;
    font-weight: bold;
}

.board-control .next-txt a span:before, .board-control .prev-txt a span:before {
    display: inline-block;
    content: "";
    width: 13px;
    height: 6px;
    margin: 0 13px;
}

/* .board-control .next-txt a em, .board-control .prev-txt a em { display: inline-block; vertical-align: middle; font-size: 16px; color: #4a4a4a; padding-left: 60px; overflow: hidden; width: 460px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } */
.board-control .next-txt > a > span:before {
    background: url("../images/icon/icon_next.png") no-repeat 50% 50%;
}

.board-control .prev-txt {
    border-bottom: 0;
}

.board-control .prev-txt > a > span:before {
    background: url("../images/icon/icon_prev.png") no-repeat 50% 50%;
}

/* .notice-box { background-color: #f4f4f4; padding: 30px 25px; width: 472px; height: 100px; } */
.notice-box img {
    float: left;
}

.notice-box p {
    margin-left: 95px;
    font-size: 14px;
    line-height: 1.4;
}

.box {
    margin-top: 53px;
}

.box::after {
    clear: both;
    content: "";
    display: table;
}

.box .inner {
    float: right;
}

.box .inner:first-child {
    float: left;
}

.inner-menu {
    margin-top: 50px;
}

.inner-menu.search {
    margin-top: 30px;
    background-color: #f4f4f4;
    padding: 15px;
    font-size: 14px;
    color: #4a4a4a;
    border: 1px solid #b9b9b9;
}

.inner-menu.search .select-style {
    height: 29px;
    width: 170px;
}

.inner-menu.search .select-style select {
    height: 29px;
    padding: 0 10px;
    width: 100%;
    border: #f4f4f4;
}

.inner-menu ul {
    display: flex;
    width: 100%;
    table-layout: fixed;
    border-right: 1px solid #626262;
    border-top: 1px solid #626262;
    border-bottom: 1px solid #626262;
}

.inner-menu ul.tabmenu {
    display: block !important;
    width: 100%;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid #626262;
    margin-bottom: 40px;
}

.inner-menu ul.tabmenu li {
    display: table-cell;
    vertical-align: middle;
    width: 230px;
    border-left: 1px solid #626262;
    border-top: 1px solid #626262;
}

.inner-menu ul.tabmenu li:last-child {
    border-right: 1px solid #626262;
}

.inner-menu ul.tabmenu li a {
    padding: 15px;
    font-size: 15px;
}

.inner-menu ul li {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    border-left: 1px solid #626262;
}

.inner-menu ul li a { 
    display: flex;
    background-color: #fff;
    text-align: center;
    color: #000;
    padding: 20px;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.inner-menu ul li.active a, .inner-menu ul li:hover a {
    border-bottom: 4px solid #016cbf;
    font-weight: bold;
    color: #016cbf;
}

.inner-menu.pink ul li.active a, .inner-menu.pink ul li:hover a {
    border-color: #ff527f;
}

.inner-menu + section {
    margin-top: 25px;
}

.inner-menu + .board-list-section {
    margin-top: 50px;
}

.inner-menu + .board-view-section,.inner-menu + .boardForm {
    margin-top: 50px;
}

.pdfobject-container {
    width: 100%;
    max-width: 600px;
    height: 700px;
    margin: 2em auto;
}

.pdfobject {
    border: solid 1px #666;
}

.video-section, .gsics-section {
    margin-top: 53px;
}

.video-section::after, .gsics-section::after {
    clear: both;
    content: "";
    display: table;
}

.video-section .search-area, .gsics-section .search-area {
    float: left;
}

.video-section .vod-area, .gsics-section .vod-area {
    margin-left: 290px;
}

.search-area {
    width: 270px;
    border: 1px solid #b9b9b9;
}

.search-area .inner-title {
    background-color: #f4f4f4;
    padding: 15px 0;
    font-size: 16px;
    color: #4a4a4a;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #b9b9b9;
}

.search-area .cont {
    padding: 10px 5px 34px;
}

.search-area .select-style {
    width: 100%;
    height: 29px;
    margin-bottom: 10px;
}

.search-area .select-style label {
    top: 8px;
}

.search-area .select-style select {
    height: 29px;
}

.search-area .group::after {
    clear: both;
    content: "";
    display: table;
}

.search-area .group .select-style {
    float: left;
    width: 100%;
    /*width: calc((100% / 2) - 5px);*/
}

.search-area .group .select-style:first-child {
    margin-right: 10px;
}

.search-area .group.type2 .select-style {
    width: calc(65% - 10px);
}

.search-area .group.type2 .select-style:first-child {
    width: 35%;
}

.search-area .datePicker {
    margin-bottom: 20px;
}

.search-area .btn-group .btn {
    width: 100%;
    min-width: 100px;
}

.search-area .btn-group .table {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 10px 0;
}

.search-area .btn-group .table .cell {
    display: table-cell;
    vertical-align: middle;
}

.search-area .btn-group .table .cell .btn {
    width: 95%;
}

.search-area .btn-group .table .cell:last-child {
    text-align: right;
}

.ui-datepicker {
    width: 248px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #e2e2e2;
}

.ui-datepicker.ui-datepicker-inline {
    border: 0;
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
    position: absolute;
    left: 7px;
    top: 12px;
    color: #fff;
    font-size: 13px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    position: absolute;
    right: 7px;
    top: 12px;
    color: #fff;
    font-size: 13px;
}

.ui-datepicker .ui-datepicker-title {
    background-color: #016cbf;
    color: #fff;
    text-align: center;
    height: 40px;
    line-height: 38px;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker .ui-datepicker-calendar thead th {
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
}

.ui-datepicker .ui-datepicker-calendar tbody td {
    text-align: center;
}

.ui-datepicker .ui-datepicker-calendar tbody td a {
    display: inline-block;
    width: 100%;
    color: #4a4a4a;
    padding: 10px 0;
}

.ui-datepicker .ui-datepicker-calendar tbody td a.ui-state-active, .ui-datepicker .ui-datepicker-calendar tbody td a:hover {
    background-color: #d4d4d4;
    /*border-radius: 50%;*/
    font-weight: bold;
}

.controls {
    display: inline-block;
    width: 100%;
    margin-bottom: 3px;
}

.controls::after {
    clear: both;
    content: "";
    display: table;
}

.controls .auto-group {
    float: left;
    border: 0px solid #b9b9b9;
    padding: 3px 0px;
    border-radius: 10px;
}

.controls .auto-group .checkbox {
    display: inline;
    vertical-align: middle;
}

.controls .auto-group .select-style {
    vertical-align: middle;
    width: 63px;
    height: 28px;
    display: inline-block;
    border-color: #b9b9b9;
    margin-left: 5px;
    margin-bottom: 0;
}

.controls .auto-group .select-style select {
    height: 25px;
    line-height: 25px;
    font-size: 12px
}

.controls .btn-group {
    float: right;
}

.controls .btn-group .btn-line {
    border-color: #b9b9b9;
    border-radius: 10px;
    color: #4a4a4a;
    margin-left: 2px;
}

.controls .btn-group .btn-ico-download {
    min-width: 40px;
    background: #fff url(/resources/homepage/images/icon/icon-download-btn.png) no-repeat 10px 50%;
    background-size: 16px 21px;
}

.controls .btn-group .btn-ico-first {
    min-width: 34px;
    background: #fff url(/resources/homepage/images/icon/icon-step-backward-btn.png) no-repeat 7px 50%;
}

.controls .btn-group .btn-ico-prev {
    min-width: 34px;
    background: #fff url(/resources/homepage/images/icon/icon-rewind-btn.png) no-repeat 7px 50%;
}

.controls .btn-group .btn-ico-play {
    min-width: 32px;
    background: #fff url(/resources/homepage/images/icon/icon-play-btn.png) no-repeat 7px 50%;
}

.controls .btn-group .btn-ico-stop {
    min-width: 34px;
    background: #fff url(/resources/homepage/images/icon/icon-pause-btn.png) no-repeat 7px 50%;
}

.controls .btn-group .btn-ico-forward {
    min-width: 34px;
    background: #fff url(/resources/homepage/images/icon/icon-forward-btn.png) no-repeat 7px 50%;
}

.controls .btn-group .btn-ico-end {
    min-width: 34px;
    background: #fff url(/resources/homepage/images/icon/icon-step-forward-btn.png) no-repeat 7px 50%;
}

.controls .btn-group .btn-ico-plus {
    min-width: 32px;
    background: #fff url(/resources/homepage/images/icon/icon-plus-btn.png) no-repeat 7px 50%;
    background-size: 16px 16px;
}

.controls .btn-group .btn-ico-minus {
    min-width: 32px;
    background: #fff url(/resources/homepage/images/icon/icon-minus-btn.png) no-repeat 7px 50%;
    background-size: 16px 16px;
}

.controls .btn-group .btn-enable {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.flag {
    display: inline-block;
    min-width: 30px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    text-align: center;
    padding: 5px;
    font-weight: 400;
    vertical-align: middle;
}

.flag.flag-new {
    background-color: #016cbf;
    color: #fff;
}

/* 댓글 style */
.comment-section {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 2px solid #4a4a4a;
}

.comment-area {
    position: relative;
}

.comment-area label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.comment-area .btn {
    position: absolute;
    right: 0;
    top: -10px;
}

.orders {
    margin-top: 15px;
}

.orders .btn-orders {
    margin-right: 15px;
    cursor: pointer;
}

.orders .btn-orders.active, .orders .btn-orders:hover {
    font-weight: bold;
}

.orders .btn-orders.active:before, .orders .btn-orders:hover:before {
    content: '';
    vertical-align: middle;
    width: 12px;
    height: 6px;
    display: inline-block;
    margin: 0 5px 0 0;
    background: url("../images/icon/ico_orders.png") 50% 50% no-repeat;
}

textarea.text {
    width: 100%;
    padding: 10px;
    height: 100px;
}

.comment-list {
    border-top: 1px solid #b9b9b9;
    margin-top: 15px;
}

.comment-list li {
    padding: 15px 0;
}

.comment-list li::after {
    clear: both;
    content: "";
    display: table;
}

.comment-list li .comment-writer {
    margin-bottom: 15px;
    font-weight: bold;
}

.comment-list li .comment-txt {
    margin-bottom: 15px;
    line-height: 1.5;
}

.re-comment {
    background-color: #f4f4f4;
    padding: 10px;
    margin-top: 10px;
    clear: both;
}

.re-comment li {
    padding-left: 35px;
    border-top: 1px solid #aaa;
}

.re-comment li:before {
    content: '';
    float: left;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url("../images/icon/ico_re.png") 0 0 no-repeat;
    margin-left: -25px;
}

.re-comment li:first-child {
    border-top: 0;
}

.re-comment .btn-ic-line {
    border: 1px solid #b9b9b9;
    background-color: #fff;
    font-size: 13px;
    padding: 3px 5px;
    cursor: pointer;
}

.re-comment .btn-ic-line i {
    margin: 0 5px;
    font-size: 14px;
}

.re-comment .btn-ic-line i.fa-thumbs-o-up {
    color: #fe5353;
}

.re-comment .btn-ic-line i.fa-thumbs-o-down {
    color: #53b7fe;
}

.comment-footer {
    margin-top: 10px;
}

.comment-footer::after {
    clear: both;
    content: "";
    display: table;
}

.comment-footer .fl {
    float: left;
}

.comment-footer .fr {
    float: right;
}

.comment-footer .date {
    font-size: 12px;
    color: #888888;
}

.comment-footer .date:after {
    content: "｜";
    margin-left: 5px;
}

.comment-footer .btn-txt {
    font-weight: bold;
    width: auto;
    height: auto;
    line-height: 1.2;
    min-width: auto;
    padding: 0 3px;
    font-size: 13px;
}

.comment-footer .re-count {
    border: 1px solid #b9b9b9;
    padding: 2px 5px;
    color: #656565;
    font-size: 13px;
}

.comment-footer .re-count .num {
    color: #4a4a4a;
    font-weight: bold;
    font-size: 13px;
}

.comment-footer .btn-icon {
    padding: 0;
    width: 25px;
    height: 25px;
    font-size: 17px;
    border: 1px solid #b9b9b9;
    margin-left: 3px;
    cursor: pointer;
}

.comment-footer .btn-icon i {
    margin: 0;
    line-height: 1.2;
}

.btn-more {
    width: 100%;
    background-color: #f8f8f8;
    padding: 10px;
    border: 1px solid #4a4a4a;
    cursor: pointer;
}

.btn-more:hover {
    background-color: #016cbf;
    color: #fff;
    border-color: #016cbf;
}

/* //댓글 style */
.vod-section {
    margin-top: 50px;
}

.gallery-list li {
    border-bottom: 1px solid #4a4a4a;
}

.gallery-list li a {
    padding: 20px 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

/* .gallery-list li a .thumb { display: table-cell; vertical-align: middle; width: 300px; height: auto; } */
.gallery-list li a .thumb img {
    width: 100%;
}

.gallery-list li a .text {
    display: table-cell;
    vertical-align: middle;
    padding-left: 30px;
}

/* .gallery-list li a .text .title { font-size: 24px; margin-bottom: 20px; display: block; line-height: 1.3; word-break: break-all; } */
/* .gallery-list li a .text span { font-size: 16px; color: #4a4a4a; margin-right: 25px; } */
.gallery-list li a:hover .text .title, .gallery-list li a:hover .text span {
    color: #016cbf;
}

.search-area .group-date .datePicker {
    margin-bottom: 0;
}

.search-area .group-date .select-style {
    margin-bottom: 0;
}

.search-area .text-list {
    margin-bottom: 70px;
}

.search-area .text-list li {
    font-size: 16px;
    margin-bottom: 15px;
}

.search-area .text-list li .name {
    display: inline-block;
    width: 60px;
    color: gray;
}

.group-date {
    margin-bottom: 5px;
}

.group-date::after {
    clear: both;
    content: "";
    display: table;
}

.group-date .input {
    float: left;
    width: 49%;
    height: 29px;
    font-size: 14px;
    color: #4a4a4a;
    border: 1px solid #838383;
}

.group-date .select-style {
    float: right;
    width: 49%;
}

.date-title {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 15px;
    color: #4a4a4a;
    text-align: center;
    background-color: #f4f4f4;
    margin-bottom: 10px;
}

.time-box {
    margin-top: 50px;
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 15px;
    color: #4a4a4a;
    text-align: left;
    margin-bottom: 30px;
    background-color: #f4f4f4;
}

.time-box::after {
    clear: both;
    content: "";
    display: table;
}

.time-box span {
    float: right;
    font-weight: bold;
}

.search-area .controls .auto-group {
    height: 42px;
    margin-bottom: 5px;
    width: 100%;
}

.search-area .controls .auto-group.auto-group2 {
    line-height: 32px;
}

.controls .fl .btn {
    min-width: 80px;
    padding: 0 10px;
}

.controls .fl .btn > i {
    margin-right: 5px;
    margin-top: 0;
    line-height: 1.2;
}

/* layer popup layout */
.dim-wrapper {
    display: none;
}

.layer-bg:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.layer-bg + .layer-wrap {
    position: absolute;
    width: 1160px;
    padding: 20px;
    border: 1px solid #4a4a4a;
    top: 50%;
    left: 50%;
    margin-left: -580px;
    z-index: 1002;
    background-color: #fff;
    margin-bottom: 50px;
}

.layer-wrap {
    width: 1160px;
    padding: 20px;
}

.layer-wrap .layer-container {
    position: relative;
}

.layer-wrap .layer-container .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 35px;
    color: #4a4a4a;
}

.layer-wrap .layer-container .layer-title {
    font-size: 30px;
}

.layer-content .video-section {
    margin-top: 20px;
}

/* //layer popup layout */
.input-table + .sub-title {
    margin-top: 50px;
}

.input + .btn {
    margin-left: 10px;
    height: 36px;
}

.description {
    font-size: 16px;
    margin: 40px 0;
    line-height: 1.4;
}

.date-inquiry label {
    font-size: 18px;
    font-weight: bold;
}

.date-inquiry .input {
    width: 210px;
    height: 38px;
    margin: 0 13px;
}

.date-inquiry .btn {
    margin-right: 10px;
}

.table-section {
    padding-top: 40px;
    border-top: 1px solid #626262;
    margin-top: 40px;
}

.table-section .table-box::after {
    clear: both;
    content: "";
    display: table;
}

.table-section .table-box .inner {
    width: calc((100% / 2) - 10px);
    float: left;
}

.table-section .table-box .inner:first-child {
    margin-right: 20px;
}

.table-box + .paging {
    margin-top: 40px;
}

.download-section {
    position: relative;
    margin-bottom: 30px;
}

.download-section .sub-title {
    font-size: 18px;
}

.download-section .box {
    margin-top: 33px;
}

.download-section .box::after {
    clear: both;
    content: "";
    display: table;
}

.download-section .box .inner {
    float: left;
}

.download-section .box .inner:first-child {
    margin-right: 20px;
}

.download-section #pdf1, .download-section #pdf2 {
    max-width: 708px;
    width: 708px;
    height: 709px;
    margin: 0;
}

.download-section .text {
    width: 368px;
    line-height: 1.4;
    font-size: 16px;
}

/*.download-section .btn-download {
     position: absolute;
    bottom: 0;
    left: 740px;
} */

.download-section .btn-download .btn {
    display: block;
    margin-top: 10px;
    text-align: left;
    position: relative;
    width: 360px;
    border-radius: 25px;
    letter-spacing: -0.7px;
}

.download-section .btn-download .btn:after {
    position: absolute;
    right: 10px;
    top: 10px;
    content: "";
    display: inline-block;
    background: url("../images/icon/icon_download.png") no-repeat left top;
    width: 24px;
    height: 19px;
    margin-left: 5px;
    vertical-align: middle;
}

.tb.tb-pdf tbody th {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #b6b6b6;
    font-size: 15px;
}

.tb.tb-pdf tbody td {
    padding: 5px;
    height: 100px;
    position: relative;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
}

.tb.tb-pdf tbody td .btn-pdf {
    background-color: #016cbf;
    color: #fff !important;
    min-width: 40px;
    font-size: 13px;
    height: 25px;
    line-height: 20px;
    padding: 5px;
    display: inline-block;
    width: 40px;
    border-radius: 5px;
    margin-left: 5px;
    display: inline-block;
    float: right;
}

.alphabet-list {
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.alphabet-list::after {
    clear: both;
    content: "";
    display: table;
}

.alphabet-list li {
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

.alphabet-list li a {
    display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 67px;
    border: 1px solid #626262;
    text-align: center;
    font-size: 20px;
    color: #626262;
}

.alphabet-list li a.all {
    width: 60px;
    height: 150px;
    line-height: 145px;
    background-color: #f4f4f4;
}

.alphabet-list li.on a, .alphabet-list li:hover a {
    border: 4px solid #016cbf;
}

.atbd-section .sub-title {
    color: #016cbf;
    font-weight: normal;
    margin-bottom: 50px;
}

.atbd-section .atbd-area::after {
    clear: both;
    content: "";
    display: table;
}

.atbd-section .side-menu {
    width: 250px;
    float: left;
}

.atbd-section .side-menu ul li {
    border-bottom: 1px solid #e4e4e4;
}

.atbd-section .side-menu ul li a {
    padding: 12px;
    display: block;
    color: #4a4a4a;
    position: relative;
}

.atbd-section .side-menu ul li.on, .atbd-section .side-menu ul li:hover {
    border: 1px solid #016cbf;
}

.atbd-section .side-menu ul li.on a, .atbd-section .side-menu ul li:hover a {
    background: url("../images/icon/icon_angle_right.png") no-repeat 230px center;
}

.atbd-area .pdf-content {
    float: right;
}

.atbd-area .pdf-content #pdf {
    width: 807px;
    max-width: 807px;
    height: 836px;
    margin: 0;
}

.info-section .sub-title {
    color: #016cbf;
    margin-top: 50px;
    margin-bottom: 30px;
    font-weight: normal;
}

.text-box::after {
    clear: both;
    content: "";
    display: table;
}

/* .text-box .left { float: left; padding-right: 50px; width: 50%; } */
/* .text-box .right { float: right; width: 50%; } */
/* .text-box.width-type2 .left { width: 689px; } */
.text-box.width-type2 .right {
    width: auto;
}

.text-box.width-type2 .right .title-hypen {
    margin-top: 43px;
}

.text-box.width-type3 .left {
    width: 430px;
}

.text-box.width-type3 .right {
    width: auto;
}

.text-box.width-type3 .right .title-hypen {
    margin-top: 0;
}

/* .text-box.width-type4 .left { width: 736px; } */
.text-box.width-type4 .right {
    width: auto;
}

.text-box.width-type4 .right .title-hypen {
    margin-top: 23px;
}

/* .text-box.width-type5 .left { width: 600px; } */
.text-box.width-type5 .right {
    width: auto;
}

.text-box.width-type5 .right .title-hypen {
    margin-top: 23px;
}

/* .text-box.width-type6 .left { width: 400px; } */
/* .text-box.width-type6 .right { width: 640px; } */
.text-box.width-type6 .right .title-hypen {
    margin-top: 23px;
}

.pr50 {
    padding-right: 50px;
}

.minidot {
    position: relative;
    font-size: 16px;
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}

.minidot:before {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background-color: #626262;
    position: absolute;
    left: 0;
    top: 11px;
    margin-top: -4px;
}

.minidot-list > li {
    font-size: 16px;
    position: relative;
    padding-left: 10px;
    line-height: 1.4;
    margin-bottom: 8px;
}

.minidot-list > li:before {
    content: "";
    display: block;
    width: 2px;
    height: 2px;
    background-color: #626262;
    position: absolute;
    left: 0;
    top: 11px;
    margin-top: -4px;
}

.minidot-list > li strong {
    display: block;
    font-size: 16px;
    margin-top: 7px;
}

.minidot-list > li .sub-list {
    margin-left: 10px;
}

.minidot-list > li .sub-list .in {
    margin-left: 10px;
}

.dot-list > li {
    font-size: 16px;
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
    margin-bottom: 25px;
}

.dot-list > li:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 25px;
    background-color: #626262;
    position: absolute;
    left: 0;
    top: 11px;
    margin-top: -4px;
}

/* .bg-box { background-color: #f4f4f4; padding: 10px 15px; } */
/* .bg-box.pd-type2 { padding: 45px 25px; width: 366px !important; position: relative; } */
/* .bg-box.pd-type2:before { position: absolute; right: -124px; top: 53px; content: ""; display: block; background: url("../images/chollian/icon_arrow_right.jpg") no-repeat left top; width: 49px; height: 81px; } */
.tx-list li {
    margin-top: 7px;
}

.tx-list li:first-child {
    margin-top: 0;
}

.tx-list li .bold {
    font-weight: bold;
}

/* .hypen-list > li { margin-top: 10px; padding-left: 20px; line-height: 1.3; font-size: 16px; } */
.hypen-list > li:before {
    content: "-";
    display: inline-block;
    clear: both;
    margin-right: 5px;
    margin-left: -12px;
}

.hypen-list > li .bold {
    font-weight: bold;
}

.line-box {
    border-top: 1px solid #626262;
    border-bottom: 1px solid #626262;
    padding: 30px;
}

.title-hypen {
    display: block;
    font-weight: bold;
    margin-bottom: 25px;
}

.tab {
    position: relative;
    padding-top: 58px;
    width: 100%;
}

.tab > li > a {
    display: block;
    position: absolute;
    top: 0;
    height: 58px;
    width: 369px;
    line-height: 58px;
    text-align: center;
    background: #ffffff;
    color: #555;
    border: 1px solid #767676;
    font-size: 20px;
}

.tab > li.on > a {
    color: #4a4a4a;
    border-bottom: 4px solid #4a4a4a;
}

.tab > li:first-child > a {
    left: 0;
}

/* .tab > li + li > a { left: 367px; } */
/* .tab > li + li + li > a { left: 731px; } */
.tab > li > .tab-content {
    height: 0;
    overflow: hidden;
    position: absolute;
}

/* .tab > li.on > .tab-content { height: auto; position: static; padding-top: 30px; } */
/* .tab.tab-4 li a { width: 275px; } */
.tab.tab-4 li.on a {
    background-color: #f4f4f4;
}

/* .tab.tab-4 > li + li > a { left: 274px; } */
.tab.tab-4 > li + li + li > a {
    left: 548px;
}

.tab.tab-4 > li + li + li + li > a {
    left: 822px;
}

.tab.tab-5 li a {
    width: 221px;
}

.tab.tab-5 li.on a {
    background-color: #f4f4f4;
}

.tab.tab-5 li .img-center .img-inline {
    width: 100%;
    text-align:center;
}

.tab.tab-5 li .img-center img {
    width: 100%;
    max-width:fit-content;
}

/* .tab.tab-5 > li + li > a { left: 220px; }

.tab.tab-5 > li + li + li > a { left: 440px; }

.tab.tab-5 > li + li + li + li > a { left: 660px; }

.tab.tab-5 > li + li + li + li + li > a { left: 880px; } */
.channel5-area {
    position: relative;
}

.channel5-area .title-channel5 {
    position: absolute;
    top: 418px;
    left: 0;
    width: 351px;
    height: 365px;
    display: table;
    background-color: #f4f4f4;
}

.channel5-area .title-channel5 span {
    display: table-cell;
    vertical-align: middle;
    font-size: 25px;
    line-height: 1.6;
    text-align: center;
}

.channel5-area .channel5-list {
    margin-left: -23px;
}

.channel5-area .channel5-list::after {
    clear: both;
    content: "";
    display: table;
}

.channel5-area .channel5-list li {
    float: left;
    margin-left: 23px;
    margin-bottom: 10px;
    width: 351px;
}

/* .channel5-area .channel5-list li.ml { margin-left: 397px; } */
.img-name {
    display: block;
    width: 100%;
    background-color: #4e92e7;
    color: #fff;
    margin-top: 10px;
    height: 31px;
    line-height: 30px;
    text-align: center;
}

.coms-img-area .title-coms {
    display: block;
    font-size: 25px;
    margin-bottom: 27px;
}

.coms-img-area .img-list::after {
    clear: both;
    content: "";
    display: table;
}

.coms-img-area .img-list li {
    float: left;
}

/* .tab-content .hypen-list {
    margin-bottom: 30px;
} */

.img-center {
    text-align: center;
}

.img-center .img-inline {
    display: inline-block;
}

.tx-block-list li {
    margin-top: 30px;
}

.tx-block-list .bold {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.text-cont-box {
    width: 100%;
}

.text-cont-box::after {
    clear: both;
    content: "";
    display: table;
}

.text-cont-box .inner {
    width: calc((100%/2) - 10px);
    min-height: 263px;
    border-top: 1px solid #626262;
    border-bottom: 1px solid #626262;
    padding-bottom: 10px;
    float: left;
}

.text-cont-box .inner:first-child {
    margin-right: 20px;
}

.text-cont-box .inner .title-box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-weight: bold;
    height: 60px;
    text-align: center;
    background-color: #f4f4f4;
    border-bottom: 1px solid #626262;
}

.text-cont-box .inner .hypen-list {
    padding: 10px 30px;
}

.text-cont-box .inner .hypen-list li {
    letter-spacing: 0;
    line-height: 1.5;
}

.gk2a-section .sub-title {
    font-size: 24px;
    color: #016cbf;
}

.gk2a-section .sub-title2 {
    font-weight: bold;
    font-size: 20px;
}

.gk2a-section #pdf {
    max-width: 1100px;
    height: 1355px;
}

.date-text {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 50px;
}

.report-section::after {
    clear: both;
    content: "";
    display: table;
}

.report-section .search-area .datePicker {
    margin-bottom: 50px;
}

.report-section .btn-group {
    margin-bottom: 10px;
}

.report-section .btn-group .btn-line {
    margin-top: 10px;
}

.report-section .btn-group .btn-line:first-child {
    margin-top: 0;
}

.report-section .search-area {
    float: left;
}

.report-section .data-area {
    margin-left: 290px;
    vertical-align: top;
}

.research-section .left {
    padding-right: 0;
    margin-right: 0;
}

/* .research-section .right { width: auto; } */
.research-section.tab1 .text-box {
    margin-bottom: 30px;
    margin-top: 30px;
}

.research-section.tab1 .box1 {
    margin-top: 0;
}

/* .research-section.tab1 .box1 .left { width: 600px; } */
.research-section.tab1 .box1 .left .img-center {
    margin-top: 30px;
}

.research-section.tab1 .box1 .right .img:first-child {
    margin-bottom: 30px;
}

/* .research-section.tab1 .box2 .left { width: 600px; margin-right: 0; } */
/* .research-section.tab1 .box2 .right { width: 469px; } */
.research-section .tx {
    clear: both;
    line-height: 1.4;
    font-size: 16px;
}

.research-section .tx + .sub-title {
    margin-top: 50px;
}

.research-section .sub-title {
    margin-bottom: 20px;
}

.tx-end {
    color: #016cbf;
    font-size: 16px;
}

.mt30 {
    margin-top: 30px !important;
}

.mt50 {
    margin-top: 50px !important;
}

.dl-list dt {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 28px;
}

.dl-list dd {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 28px;
}

.dl-list dd .text-cont-box {
    margin-bottom: 30px;
}

/*  .dl-list dd .text-cont-box .inner {
   height: 160px;
} */

.dl-list dd .text-cont-box .inner .hypen-list li {
    margin-top: 7px;
}

.dl-list dd .img-box {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.dl-list dd > ul li {
    margin-top: 30px;
}

.layout-box::after {
    clear: both;
    content: "";
    display: table;
}

/* .layout-box .left { float: left; width: 600px; } */
.layout-box .right {
    float: right;
}

.num-list li {
    font-size: 16px;
    padding-left: 20px;
    line-height: 1.4;
    margin-top: 25px;
}

.num-list li .num {
    margin-left: -15px;
    margin-right: 3px;
}

.img-box::after {
    clear: both;
    content: "";
    display: table;
}

.img-box .left {
    float: left;
    margin-bottom:28px;
}

.img-box .right {
    float: right;
}

/* .tx-infomation { font-size: 24px; line-height: 1.5; } */
.tx-infomation em {
    color: #016cbf;
}

.nmsc-section {
    font-size: 16px;
}

.nmsc-section .tx {
    line-height: 1.5;
}

.nmsc-section .sub-title + .tx {
    margin-bottom: 45px;
}

.nmsc-section .sub-title + .dl-dot-list {
    margin-bottom: 45px;
}

.img-infomation {
    margin: 40px 0;
    position: relative;
}

/* .img-infomation img { vertical-align: top; } */
/* .img-infomation p { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.5); height: 60px; line-height: 58px; color: #fff; text-align: center; font-weight: bold; font-size: 16px; } */
.tb.tb-info {
    margin-top: 70px;
    border-top: 1px solid #b8b8b8;
    border-bottom: 1px solid #b8b8b8;
}

/* .tb.tb-info thead th { background-color: #f4f4f4; padding: 19px 0; border-left: 1px solid #b8b8b8; border-bottom: 1px solid #b8b8b8; font-size: 24px; } */
.tb.tb-info thead th:first-child {
    border-left: 0px;
}

.tb.tb-info tbody td {
    border-left: 1px solid #b8b8b8;
    padding: 20px 15px;
    line-height: 1.5;
}

.tb.tb-info tbody td:first-child {
    border-left: 0;
}

.tb.tb-info tbody td .bold {
    font-weight: bold;
}

.dl-dot-list dt {
    margin-top: 25px;
    font-weight: bold;
}

.dl-dot-list dt:first-child {
    margin-top: 0;
}

.dl-dot-list dd {
    position: relative;
    padding-left: 15px;
    line-height: 1.4;
    margin-top: 5px;
}

.dl-dot-list dd:before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 25px;
    background-color: #4a4a4a;
    top: 4px;
    left: 5px;
}

.business-list {
    padding-top: 30px;
}

.business-list::after {
    clear: both;
    content: "";
    display: table;
}

/* .business-list .inner { width: 50%; float: left; margin-bottom: 100px; } */
.business-list .inner::after {
    clear: both;
    content: "";
    display: table;
}

.business-list .icon {
    float: left;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url("../images/nmsc/icon.gif") no-repeat left top;
}

.business-list .icon.icon-1 {
    background-position: 0px 0px;
}

.business-list .icon.icon-2 {
    background-position: -136px 0px;
}

.business-list .icon.icon-3 {
    background-position: -270px 0px;
}

.business-list .icon.icon-4 {
    background-position: -406px 0px;
}

.business-list .group {
    margin-left: 150px;
}

.business-list .group .dot-list > li {
    margin-bottom: 10px;
}

.greeting-section {
    padding-top: 70px;
}

.greeting-section .img {
    float: left;
}

/* .greeting-section .text { margin-left: 480px; line-height: 1.5; font-size: 16px; } */
.greeting-section .text strong {
    display: block;
    color: #016cbf;
    font-size: 24px;
    margin-bottom: 25px;
}

.greeting-section .text .name {
    margin-top: 0px;
    display: block;
    text-align: right;
    padding-right: 100px;
}

.greeting-section .text .name img {
    margin-left: 20px;
}

.img-vision {
    width: 655px;
    height: 577px;
    background: url("../images/nmsc/img_vision.gif") no-repeat left top;
    margin: 0 auto 65px;
}

.goal-area {
    position: relative;
/*     z-index: 10; */
}

.goal-area .title-goal {
    position: relative;
    padding: 0 30px;
    display: table;
    margin: 0 auto;
    font-size: 36px;
    text-align: center;
    color: #205ea5;
    background-color: #fff;
    z-index: 2;
}

.goal-area:before {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: calc(-750px/2);
    content: "";
    display: block;
    width: 750px;
    height: 50px;
    border: 1px solid #b8b8b8;
    border-bottom: 0;
    border-radius: 25px 25px 0 0;
    z-index: 1;
}

.goal-area .goal-list {
    margin-top: 35px;
}

.goal-area .goal-list::after {
    clear: both;
    content: "";
    display: table;
}

.goal-area .goal-list li {
    float: left;
    width: calc((100% / 3) - 7px);
    height: 145px;
    border: 4px solid #598ecb;
    margin-left: 10px;
    background-color: #fff;
    border-radius: 20px;
    display: table;
    text-align: center;
    font-size: 20px;
    line-height: 1.4;
}

.goal-area .goal-list li span {
    display: table-cell;
    vertical-align: middle;
}

.goal-area .goal-list li.line1 {
    margin-left: 0;
}

.goal-area .goal-list li.line2 {
    border-color: #205ea5;
}

.goal-area .goal-list li.line3 {
    border-color: #1d2e98;
}

.work-list {
    margin-top: 50px;
    margin-left: -20px;
}

.work-list::after {
    clear: both;
    content: "";
    display: table;
}

.work-list li {
    float: left;
    width: calc((100% / 3) - 20px);
    height: 257px;
    margin-left: 20px;
    margin-bottom: 20px;
    border: 1px solid #b8b8b8;
    background-color: #f4f4f4;
    padding-top: 30px;
    text-align: center;
}

.work-list li .icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url("../images/nmsc/icon.gif") no-repeat left top;
}

.work-list li .icon.icon-1 {
    background-position: 0px -172px;
}

.work-list li .icon.icon-2 {
    background-position: -133px -172px;
}

.work-list li .icon.icon-3 {
    background-position: -259px -172px;
}

.work-list li .icon.icon-4 {
    background-position: -389px -172px;
}

.work-list li .icon.icon-5 {
    background-position: -522px -172px;
}

.work-list li .icon.icon-6 {
    background-position: -648px -172px;
}

.work-list li span {
    display: block;
    margin-top: 25px;
    font-size: 14px;
}

.work-list li .name {
    font-size: 24px;
}

.idpw-section {
    width: 640px;
    margin: 0 auto;
}

.idpw-section .cont {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #999;
}

.idpw-section .cont::after {
    clear: both;
    content: "";
    display: table;
}

.idpw-section .pw-box {
    float: left;
    width: 500px;
}

.idpw-section .btn-primary {
    float: right;
    height: 82px;
}

.idpw-section .group {
    margin-top: 10px;
}

.idpw-section .group::after {
    clear: both;
    content: "";
    display: table;
}

.idpw-section .group:first-child {
    margin-top: 0;
}

.idpw-section .group label {
    display: inline-block;
    float: left; 
    width: 100px;
    margin-top: 10px;
    font-size: 16px;
}

.idpw-section .group .input {
    float: left;
    width: 400px;
    margin-top: 0;
}

.idpw-section .text-info {
    margin-top: 10px;
    font-size: 16px;
}

.gsics-section {
    margin-top: 70px;
    font-size: 16px;
    line-height: 1.4;
}

.gsics-section .sub-title {
    color: #4a4a4a;
}

.gsics-section .blue-title {
    color: #016cbf;
    font-weight: bold;
    font-size: 16px;
}

.gsics-section .blue-title strong {
    color: #016cbf;
    font-weight: bold;
    font-size: 16px;
}

.gsics-section .btn-txt {
    padding: 0;
    padding-right: 13px;
    background: url("../images/common/btn_txt.gif") no-repeat right center;
    font-size: 14px;
    font-weight: bold;
    color: #46a6f5;
    text-align: left;
    width: auto;
    min-width: auto;
}

.gsics-section .btn-txt:active {
    box-shadow: none;
}

.gsics-section .content-p {
    margin-bottom: 20px;
}

.gsics-section .content-section {
    margin-top: 50px;
}

.gsics-section .mb0 {
    margin-bottom: 0px !important;
}

.gsics-section .mt10 {
    margin-top: 10px !important;
}

.gsics-section .mt30 {
    margin-top: 30px !important;
}

.gsics-section .content-p.red {
    color: #ed1d25;
}

.gsics-section .content-sub-title {
    font-weight: bold;
    font-size: 16px;
}

.inner-sub-menu {
    border: 1px solid #626262;
}

.inner-sub-menu.tab {
    border: 0px solid #626262;
    padding-top: 20px
}

.inner-sub-menu ul {
    display: table;
    width: 100%;
    height: 60px;
}

.inner-sub-menu ul.tabmenu {
    display: block !important;
    width: 100%;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 1px solid #626262;
    height: 53px
}

.inner-sub-menu ul.tabmenu li {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    border-left: 1px solid #626262;
    border-top: 1px solid #626262;
}

.inner-sub-menu ul.tabmenu li:first-child {
    border-left: 1px solid #626262;
}

.inner-sub-menu ul.tabmenu li:last-child {
    border-right: 1px solid #626262;
}

.inner-sub-menu ul.tabmenu li a {
    padding: 15px;
    font-size: 15px;
}

.inner-sub-menu ul.tabmenu li.on a {
    font-size: 14px;
    font-weight: normal;
}

.inner-sub-menu ul li {
    display: table-cell;
    vertical-align: middle;
    width: calc(100% / 3);
    text-align: center;
    border-left: 1px solid #626262;
}

.inner-sub-menu ul li:first-child {
    border-left: 0;
}

.inner-sub-menu ul li a {
    color: #626262;
    font-size: 20px;
}

.inner-sub-menu ul li.on {
    border-bottom: 3px solid #626262;
    background-color: #f4f4f4;
}

.inner-sub-menu ul li.on a {
    font-weight: bold;
    font-size: 20px;
}

.program {
    margin-top: 80px;
}

.program::after {
    clear: both;
    content: "";
    display: table;
}

.program aside {
    float: left;
}

.program > section {
    margin-left: 300px;
}

.program aside {
    width: 270px;
    border: 1px solid #b9b9b9;
    padding: 10px;
}

.program aside .title {
    padding-left: 10px;
    margin-bottom: 10px;
}

.program aside .title strong {
    font-weight: bold;
    font-size: 16px;
}

.program aside .btn-area {
    margin-top: 5px;
}

.program aside .btn-area::after {
    clear: both;
    content: "";
    display: table;
}

.program aside .btn-area .btn {
    float: right;
    width: 49%;
    margin-bottom: 5px;
}

.program aside .btn-area .btn:first-child {
    float: left;
}

.program aside .optionBox {
    border-top: 1px solid #cecece;
    padding: 20px 0;
}

.program aside .optionBox:first-child {
    border-top: 0;
}

.program aside .optionBox > ul > li {
    margin-top: 5px;
}

.program aside .optionBox .calendar .btn {
    width: 100%;
}

.program aside .optionBox .calendar input[type="text"] {
    width: 115px;
    height: 28px;
    padding-left: 5px;
}

.program aside .optionBox.imageTab .calendar::after {
    clear: both;
    content: "";
    display: table;
}

.program aside .optionBox.imageTab .calendar input[type="text"] {
    float: left;
    margin-right: 5px;
}

.program aside .optionBox.imageTab .calendar .btn {
    float: left;
    width: auto;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 15px;
    padding: 0 11px;
    margin-right: 5px;
}

.gk2a-section .tx {
    margin: 30px 0;
}

.gk2a-section .sub-title2 {
    margin-top: 30px;
}

.gk2a-section .graphBox .sub-title2 {
    margin-top: 0;
}

.gk2a-section .mt10 {
    margin-top: 10px !important;
}

.graphBox {
    padding: 20px 10px 20px 20px;
    border: 1px solid #c7c7c7;
}

.graphBox .table-style {
    width: 100%;
}

.graphBox .table-style th, .graphBox .table-style td {
    padding: 15px 0;
    font-weight: normal;
    text-align: left;
}

.graphBox .table-style th {
    font-size: 14px;
    line-height: 22px;
    color: #555;
}

.graphBox .table-style tbody th {
    padding-right: 5px;
}

.graphBox .table-style td {
    border-top: 1px solid #c7c7c7;
}

.graphBox .table-style tr:first-child td {
    border: 0;
}

.graphBar span {
    display: inline-block;
    vertical-align: middle;
}

.graphBar .bar {
    height: 17px;
    border-radius: 8.5px;
}

.graphBar .num {
    line-height: 17px;
    font-size: 16px;
    font-weight: bold;
}

.graphBar.navy .bar {
    background: #3274c6;
}

.graphBar.navy .num {
    color: #3274c6;
}

.graphBar.sky .bar {
    background: #5ec4ff;
}

.graphBar.sky .num {
    color: #5ec4ff;
}

/* add 2017-09-11 */
.nmsc-section h4.sub-title {
    margin-top: 50px;
}

.nmsc-section table.nmsc-table {
    width: 100%;
    line-height: 1.4;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.nmsc-section table.nmsc-table thead {
    background-color: #ececec;
}

.nmsc-section table.nmsc-table tbody tr .tb-item {
    text-align: center;
}

.nmsc-section table.nmsc-table tbody tr ul.dot-list {
    overflow: hidden;
}

.nmsc-section table.nmsc-table tbody tr ul.dot-list > li {
    margin-bottom: 0;
}

.nmsc-section table.nmsc-table tbody tr ul.dot-list > li:before {
    top: 12px;
}

.nmsc-section table.nmsc-table tbody tr ul.dot-list > li > span.for-etc {
    padding-left: 1em;
    display: block;
    position: relative;
}

.nmsc-section table.nmsc-table tbody tr ul.dot-list > li > span.for-etc:before {
    position: absolute;
    content: '※';
    left: 0;
}

.nmsc-section table.nmsc-table tbody tr dl.cost:after {
    content: "※매체비용은 별도";
}

.nmsc-section table.nmsc-table th, .nmsc-section table.nmsc-table td {
    vertical-align: middle;
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.nmsc-section table.nmsc-table td > dl + dl {
    margin-top: 10px;
}

.nmsc-section p + .tx {
    margin-top: 1em;
}

.nmsc-section .img-area ul {
    width: 760px;
    margin: auto;
}

.nmsc-section .img-area ul li {
    float: left;
}

.nmsc-section .img-area ul li .step1 {
    width: 272px;
}

.nmsc-section .img-area ul li .step2 {
    width: 270px;
}

.nmsc-section .img-area ul li .step3 {
    width: 218px;
}

.nmsc-section .img-area ul:after {
    content: '';
    display: table;
    clear: both;
}

.nmsc-section .process {
    line-height: 1.3;
    margin: 0 -2.5%;
}

.nmsc-section .process > li {
    position: relative;
    height: 90px;
    float: left;
    width: 20%;
    margin: 0 2.5% 90px 2.5%;
    color: white;
    display: table;
}

.nmsc-section .process > li .process-info {
    line-height: 1;
    width: 100%;
}

.nmsc-section .process > li .process-info li {
    overflow: hidden;
}

.nmsc-section .process > li .process-info li span, .nmsc-section .process > li .process-info li div {
    float: left;
}

.nmsc-section .process > li .process-info li span {
    width: 35%;
}

.nmsc-section .process > li .process-info li div {
    width: 65%;
    height: 16px;
}

.nmsc-section .process > li .process-info li:first-child {
    margin-bottom: 10px;
}

.nmsc-section .process > li > .wrap {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

.nmsc-section .process > li > .wrap span {
    font-size: 20px;
}

.nmsc-section .process > li > .wrap p {
    padding: 0 10px;
    font-size: 15px;
}

.nmsc-section .process .a_legend {
    color: #4a4a4a;
    line-height: 1;
    padding: 0;
}

.nmsc-section .process .a_legend .sub-title {
    margin-bottom: 28px;
}

.nmsc-section .process .gray_box {
    background-color: #757575;
}

.nmsc-section .process .blue_box {
    background-color: #6b8fcd;
    border-radius: 10px
}

.nmsc-section .process .to-right-blue:after, .nmsc-section .process .to-right-gray:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 40px;
    top: 25px;
    right: -45px;
}

.nmsc-section .process .to-right-blue:after {
    background: url(../images/nmsc/icon2.gif) 14% 0% no-repeat;
}

.nmsc-section .process .to-right-gray:after {
    background: url(../images/nmsc/icon2.gif) 0% 0% no-repeat;
}

.nmsc-section .process .to-top:before, .nmsc-section .process .to-down:before {
    content: '';
    position: absolute;
    width: 38px;
    height: 26px;
    top: -60px;
    left: 42%;
}

.nmsc-section .process .to-top:before {
    background: url(../images/nmsc/process_up.png) 0% 0% no-repeat;
}

.nmsc-section .process .to-down:before {
    background: url(../images/nmsc/process_down.png) 0% 0% no-repeat;
}

.nmsc-section .process:after {
    content: '';
    display: table;
    clear: both;
}

.nmsc-section .process .li-end {
    margin-bottom: 0;
}

.btn-s_blue {
    background-color: #4e92e7;
    color: #fff !important;
    min-width: 40px;
    font-size: 13px;
    height: 25px;
    line-height: 15px;
    padding: 5px;
    display: inline-block;
    width: 40px;
    border-radius: 5px;
    margin-left: 5px;
    display: inline-block;
}

/* 개인정보처리방침 */
.userinfo_guide {
    line-height: 1.5;
}

.userinfo_guide b {
    font-weight: bold;
}

.userinfo_guide [class^="dep_"] {
    padding-left: 20px;
}

.userinfo_guide .par {
    padding-bottom: 30px;
}

.userinfo_guide .par .txt {
    display: block;
    overflow: hidden;
}

.userinfo_guide .par [class^="num_"] {
    float: left;
    margin-right: 8px;
}

.userinfo_guide .par .tb:first-of-type {
    margin-top: 0;
}

.userinfo_guide .tit-jo {
    font-weight: bold;
    padding-bottom: 20px;
}

/* 저작권보호정책 */
.copyright_guide {
    line-height: 1.8;
}

.copyright_guide b {
    font-weight: bold;
}

/* 사이트맵 */
.sitemap a {
    color: #4a4a4a;
}

.sitemap h4 > a {
    color: #fff;
}

.sitemap .col_wrap {
    overflow: hidden;
}

/* .sitemap .col_wrap .col { float: left; width: 33.33%; padding: 0 10px; } */
.sitemap [class^="section_"] .content_top {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
}

.sitemap .box_sitemap {
    padding-top: 10px;
}

.sitemap .box_sitemap .cont_top {
    margin-bottom: 5px;
    border-bottom: 1px solid #ddd;
}

.sitemap .box_sitemap .box_tit {
    display: block;
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
}

.sitemap .box_sitemap .cont_body a:before {
    content: "・"
}

.sitemap .box_sitemap .cont_body .obj {
    display: block;
    padding: 5px 15px;
}

.sitemap .section_1 .content_top, .sitemap .section_4 .content_top {
    background-color: #262626;
}

.sitemap .section_2 .content_top {
    background-color: #882c2c;
}

.sitemap .section_3 .content_top {
    background-color: darkblue;
}

/* 연혁 */
/* .center_history .cont_wrap { width: 700px; margin: 0 auto; } */
.center_history [class^="section_"] {
    position: relative;
    margin-top: -1px;
    border: 1px solid #b8b8b8;
    border-width: 1px 0;
    font-size: 16px;
}

.center_history [class^="section_"] .box_tit {
    position: absolute;
    top: 0;
    width: 170px;
    height: 170px;
    border: 1px solid #fe631e;
    font-size: 40px;
    line-height: 168px;
    color: #fe631e;
    text-align: center;
}

.center_history [class^="section_"] .box_body {
    padding: 13px 0 13px 10px;
}

.center_history [class^="section_"] .box_body li {
    padding-top: 18px;
    line-height: 1.4;
}

.center_history [class^="section_"] .box_body li:first-child {
    padding: 0;
}

.center_history [class^="section_"] .box_body .year_month {
    float: left;
    width: 123px;
    font-weight: bold;
}

.center_history [class^="section_"] .box_body .same_month {
    font-size: 0;
}

.center_history [class^="section_"] .box_body .same_month + .txt_cont {
    padding-left: 123px;
}

.center_history [class^="section_"] .box_body .txt_cont {
    display: block;
    overflow: hidden;
}

.center_history [class^="section_"] .sec_bottom {
    height: 40px;
    padding-top: 13px;
    border-top: 1px solid #b8b8b8;
    text-align: center;
}

.center_history [class^="section_"] .sec_bottom:after {
    display: inline-block;
    content: '';
    width: 18px;
    height: 11px;
    background: url(../images/nmsc/icon2.gif) no-repeat -86px 0;
}

/* .center_history .section_1 .box_tit { left: -200px; }

.center_history .section_2 .box_tit { right: -200px; }
 */
/* 오시는길 */
/* .location .txt_tit { padding-bottom: 26px; font-size: 24px; color: #fe631e; } */
.location .txt_sub_tit {
    display: block;
    margin-top: 27px;
}

.location .txt_sub_tit:first-child {
    margin: 0;
}

/* .location .txt_type1 { font-size: 20px; } */
.location .txt_type2 {
    font-size: 16px;
    line-height: 1.5;
}

.location .box_type1 {
    display: inline-block;
    margin-right: 110px;
}

.location .box_type1 [class^="ico_"] {
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
    font-size: 0;
    line-height: 0;
}

.location .box_type2 {
    display: block;
}

.location .tel .ico_tel {
    width: 15px;
    height: 18px;
    background: url(../images/icon/icon_tel.png) no-repeat 0 0;
}

.location .fax {
    padding-left: 25px;
}

.location .fax .ico_fax {
    width: 18px;
    height: 18px;
    background: url(../images/icon/icon_fax.png) no-repeat 0 0;
}

.location .noti {
    padding-top: 27px;
    font-size: 16px;
}

.location .api_map {
    height: 502px;
    margin: 30px 0 50px;
    border: 1px solid #b8b8b8;
}

.location .api_map .map {
    height: 100%;
}

.withdrawal-section {
    margin-top: 100px;
}

.withdrawal-section .tx {
    border-top: 1px solid #b9b9b9;
    border-bottom: 1px solid #b9b9b9;
    padding: 50px 0;
    text-align: center;
}

/* .organization-section { background: url("../images/content/organization-bg.png") no-repeat 50% 130px; } */
.organization-section dl::after {
    clear: both;
    content: "";
    display: table;
}

.organization-section dl dt:first-child {
    background-color: #0153a9;
}

/* .organization-section dl dt { display: table; margin: 0 auto; width: 260px; height: 130px; color: #fff; background-color: #6b8fcd; line-height: 1.4; text-align: center; margin-bottom: 107px; } */
.organization-section dl dt .bold {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.organization-section dl dt strong.bold {
    font-size: 24px;
    color: #fff;
}

.organization-section dl dt .cell {
    display: table-cell;
    vertical-align: middle;
}

.organization-section dl dt:nth-child(2) div:hover {
    border-bottom: 4px solid #016cbf;
    border-radius: 50px;
}

.organization-section dl dt:nth-child(2) .bold:hover {
	font-weight: bold;
}

/* .organization-section dl dd { background-color: #757575; display: table; width: 260px; height: 70px; float: left; margin-left: 20px; } */
.organization-section dl dd a {
    display: table-cell;
    vertical-align: middle;
    color: #000;
    font-size: 24px;
    text-align: center;
	border-radius: 50px;
}

.organization-section dl dd.on a, .organization-section dl dd:hover a {
    font-weight: bold;
    border-bottom: 4px solid #000;
}

.organization-section dl dd.first {
    margin-left: 0;
}

.organization-section + .board-list-section {
    margin-top: 30px;
}

/* 댓글달기 */
.display-table {
    display: table;
    width: 100%;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    vertical-align: top;
}

.nmsc_input {
    height: 28px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 5px;
    border: 1px solid #aaaaaa;
    font-size: 12px;
    color: #666666;
    width: 184px;
}

.nmsc_input:disabled {
    background-color: #f4f4f4;
}

.nmsc_input.input-file {
    border: 0;
    padding: 0;
    background-color: transparent;
    line-height: 30px;
}

textarea.nmsc_input {
    height: auto;
    padding: 7px 5px;
    line-height: 1.6;
}

/* Buttons */
.nmsc_btn {
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #040404;
    background: #f8f8f8;
    color: #232424;
    font-size: 12px;
    display: inline-block;
    /* 유동적인 값 */
    width: 120px;
    height: 34px;
    line-height: 32px;
    padding: 0 13px;
}

.nmsc_inline {
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.nmsc_btn:hover {
    background: #fff;
}

.nmsc_btn_radius {
    border-radius: 4px;
}

.nmsc_btn_img {
    padding-left: 30px;
    background: url(../images/icon/icon_btn_dg.png) no-repeat 30px 50%;
}

.nmsc_btn_img:hover {
    background: #040404 url(../images/icon/icon_btn_dg_on.png) no-repeat 30px 50%;
    color: #fff;
}

.nmsc_btn_style01:hover {
    border-width: 2px;
    background: #fff;
}

.nmsc_btn_style02:hover {
    border-width: 2px;
    border-color: #0e73d2;
    color: #0e79de;
}

.nmsc_btn_style03 {
    background: #7e7d7d;
    color: #fff;
}

.nmsc_btn_style03:hover {
    background: #040404;
}

.nmsc_btn_style04 {
    background: #fff;
}

.nmsc_btn_style04:hover {
    background: #0e79de;
    border-color: #0e79de;
    color: #fff;
}

/* Buttons - 작은 버튼 */
.nmsc_btn_small {
    min-width: 30px;
    height: 30px;
    line-height: 30px;
}

.nmsc_btn_tiny {
    min-width: 30px;
    height: 23px;
    line-height: 23px;
    font-size: 11px;
    padding: 0 8px;
}

.wrap-comment-list {
    clear: both;
    margin: 50px 0;
    padding: 10px;
    overflow: hidden;
    border-top: 2px solid #232424;
    border-bottom: 1px solid #d9d9d9;
}

.wrap-comment-list .comment-form {
    position: relative;
    display: block;
}

.wrap-comment-list .comment-form .h3-title {
    font-weight: bold;
    display: block;
    margin: 0 0 10px;
    line-height: 1.2;
}

.wrap-comment-list .comment-form .nmsc_btn {
    position: absolute;
    right: 0;
    top: -5px;
    width: 70px;
    height: 26px;
    line-height: 24px;
}

.wrap-comment-list .comment-form .nmsc_btn:hover {
    background: #040404;
}

.wrap-comment-list .comment-list li {
    border-top: 1px solid #aaa;
    padding: 10px 0;
    display: block;
    clear: both;
    overflow: hidden;
    position: relative;
}

.wrap-comment-list .comment-list .comment-writer {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 10px;
}

.wrap-comment-list .comment-list .comment-txt {
    line-height: 1.6;
    margin-bottom: 10px;
}

.wrap-comment-list .comment-list .comment-footer {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 11px;
    color: #777;
    overflow: hidden;
}

.wrap-comment-list .comment-list .comment-footer .date {
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid #ccc;
}

.wrap-comment-list .comment-list .comment-footer .btn-comment-report {
    cursor: pointer;
    font-weight: bold;
    color: #333;
}

.wrap-comment-list .comment-list .comment-footer .btn-comment-report:hover {
    color: #0e79de;
}

.wrap-comment-list .comment-list .comment-footer .re-count {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 3px 10px;
    line-height: 1;
}

.wrap-comment-list .comment-list .comment-footer .re-count .re-count-num {
    font-size: 12px;
    font-weight: bold;
}

.wrap-comment-list .comment-list .comment-footer .nmsc_btn_icon {
    width: 23px;
    height: 23px;
    line-height: 21px;
    padding: 0;
    border: 1px solid #aaa;
    background-color: #fff;
}

.wrap-comment-list .comment-list .comment-footer .nmsc_btn_icon i {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

.wrap-comment-list .comment-list .comment-footer .nmsc_btn_icon i.ti-pencil {
    background: url(../images/icon/ico_write.png) 0 0 no-repeat;
}

.wrap-comment-list .comment-list .comment-footer .nmsc_btn_icon i.ti-pencil-alt {
    background: url(../images/icon/ico_modi.png) 0 0 no-repeat;
}

.wrap-comment-list .comment-list .comment-footer .nmsc_btn_icon i.ti-trash {
    background: url(../images/icon/ico_trash.png) 0 0 no-repeat;
}

.wrap-comment-list .comment-list .comment-footer .nmsc_btn_icon:hover {
    border: 1px solid #0e79de;
}

.wrap-comment-list .comment-list > ul > li > ul {
    padding-left: 20px;
    padding-right: 10px;
}

.wrap-comment-list .btn-comment-more {
    margin-top: 10px;
}

.wrap-comment-list .re-comment {
    background-color: #f4f4f4;
    padding: 10px 0;
}

.wrap-comment-list .re-comment > li:first-child {
    border-top: none;
}

.wrap-comment-list .re-comment li {
    padding-left: 25px;
}

.wrap-comment-list .re-comment li:before {
    content: '';
    float: left;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../images/icon/ico_re.png) 0 0 no-repeat;
    margin-left: -25px;
}

.wrap-comment-list .re-comment li .btn-comment-submit {
    width: 70px;
    height: 26px;
    line-height: 24px;
    position: absolute;
    z-index: 1;
    bottom: 13px;
    right: 0;
}

.wrap-comment-list .re-comment li textarea.nmsc_input {
    padding-right: 75px;
}

.wrap-comment-list textarea.nmsc_input {
    height: 70px;
    border-color: #d9d9d9;
}

.wrap-comment-list .orders {
    margin: 10px 0;
}

.wrap-comment-list .orders .btn-orders {
    display: inline-block;
    margin-right: 10px;
    color: #777;
    cursor: pointer;
}

.wrap-comment-list .orders .btn-orders.__active, .wrap-comment-list .orders .btn-orders:hover {
    font-weight: bold;
    color: #111;
}

.wrap-comment-list .orders .btn-orders.__active:before, .wrap-comment-list .orders .btn-orders:hover:before {
    content: '';
    vertical-align: middle;
    width: 12px;
    height: 6px;
    display: inline-block;
    margin: 0 2px 0 0;
    background: url(../images/icon/ico_orders.png) 50% 50% no-repeat;
}

.wrap-comment-list .nmsc_btn_recom {
    width: auto;
    background-color: #fff;
    border: 1px solid #aaa;
}

.wrap-comment-list .nmsc_btn_recom i {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

.wrap-comment-list .nmsc_btn_recom i.ti-thumb-up {
    background: url(../images/icon/ico_thm_up.png) 0 0 no-repeat;
}

.wrap-comment-list .nmsc_btn_recom i.ti-thumb-down {
    background: url(../images/icon/ico_thm_down.png) 0 0 no-repeat;
}

.wrap-comment-list .nmsc_btn_recom:hover {
    border: 1px solid #0e79de;
}

/* 페이지 만족도 평가 */
.wrap-rate-content {
    clear: both;
    margin: 40px 0;
    padding: 10px;
    overflow: hidden;
    border-top: 2px solid #232424;
    border-bottom: 1px solid #d9d9d9;
}

.wrap-rate-content .h3-title {
    line-height: 1.2;
    display: inline-block;
    margin: 0px 20px 10px 0px;
    font-weight: bold;
}

.wrap-rate-content .cell-rate1 {
    width: 110px;
}

.wrap-rate-content .table-cell {
    vertical-align: middle;
}

.wrap-rate-content .cell-rate2 {
    width: 70px;
}

.wrap-rate-content .cell-rate2 .nmsc_btn {
    width: 100%;
    margin-left: 2px;
    height: 30px;
    line-height: 28px;
}

.wrap-rate-content .checks {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    margin: 3px 0;
}

.wrap-rate-content label.nmsc_label {
    position: relative;
    margin-right: 10px;
}

.wrap-rate-content input[type=radio].nmsc_radio {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.wrap-rate-content input[type=radio].nmsc_radio + span {
    margin-left: 4px;
    color: #808080;
    line-height: 20px;
}

.wrap-rate-content input[type=radio].nmsc_radio + span:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 0;
    background: url(../images/icon/bg_radio.png) no-repeat;
}

.wrap-rate-content input[type=radio].nmsc_radio + span:after {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 0;
    background: url(../images/icon/icon_radio.png) no-repeat;
    opacity: 0;
}

.wrap-rate-content input[type=radio].nmsc_radio:checked + span:after {
    opacity: 1;
}

/* 검색 결과 없음 */
.no-result {
    margin: 50px auto;
}

.no-result .ico-noresult {
    background: url(../images/common/ico_noresult.png) 50% 50% no-repeat;
    display: block;
    margin: 40px auto;
    width: 150px;
    height: 147px;
}

.no-result p {
    text-align: center;
    color: #666;
    font-size: 20px;
}

/* 통합검색 */
.search-box-wrap {
    margin-top: 50px;
}

.search-box-wrap::after {
    clear: both;
    content: "";
    display: table;
}

.search-box-wrap + .inner-menu {
    margin-top: 30px;
}

.search-section {
    position: relative;
    margin-top: 50px;
}

.search-section::after {
    clear: both;
    content: "";
    display: table;
}

.search-section .search-item {
    margin-top: 1.8em;
}

.search-section .search-item::after {
    clear: both;
    content: "";
    display: table;
}

.search-section .search-item dt {
    display: block;
    line-height: 1.2;
    margin-bottom: 0.3em;
}

.search-section .search-item dt .title {
    font-size: 16px;
    font-weight: bold;
    color: #222;
}

.search-section .search-item dt .reg-date {
    font-size: 14px;
    color: #777;
    display: inline-block;
    margin-left: 10px;
}

.search-section .search-item dd {
    color: #777;
    line-height: 1.5;
}

.search-section .search-item dd a {
    font-weight: bold;
    color: #222;
}

.search-section .search-item .keyword {
    font-weight: bold !important;
    color: #016cbf !important;
}

.search-section .search-item .btn-newwindow {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    vertical-align: middle;
    margin-top: -2px;
    background: url(../images/common/ico_link.gif) 50% 50% no-repeat;
}

.search-section .no-result {
    margin: 0;
    text-align: left;
}

.search-section .no-result .ico-noresult {
    background: url(../images/common/ico_noresult2.png) 0 50% no-repeat;
    width: 30px;
    height: 29px;
    margin: 0;
    vertical-align: middle;
    display: inline-block;
}

.search-section .no-result p {
    display: inline-block;
    text-align: left;
    font-size: 16px;
    vertical-align: middle;
}

.search-section .btn-more {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    font-size: 13px;
    width: auto;
    height: 20px;
    line-height: 22px;
    border: none;
    color: #777;
    padding: 0 0 0 17px;
    background: url(../images/common/btn_more.gif) 0 50% no-repeat;
}

.search-section .btn-more:hover {
    text-decoration: underline;
}

/*# sourceMappingURL=style.css.map */
/* indisystem add */
.inner-sub-menu ul li a {
    padding: 20px;
    display: block;
}

.ui-datepicker-calendar tbody td span {
    display: inline-block;
    width: 100%;
    color: #afafaf;
    padding: 10px 0;
}

/* 사진게시판 이미지 효과 */
.gallery-list li a .thumb img.phtImg {
    max-height: 250px;
}

.gallery-list li a .thumb img.phtImg:hover {
    -ms-transform: scale(1.02);
    /* IE 9 */
    -webkit-transform: scale(1.02);
    /* Safari 3-8 */
    transform: scale(1.02);
}

/* indisystem */
/* 품질 보고서 CSS 추가*/
.report-section .ui-state-active, .report-section .ui-widget-content .ui-state-active {
    border: 0px solid #c5c5c5;
    background: #f6f6f6;
}

/* 3depth 메뉴 배경 적용 */
.sub div.depth3_bg {
    background: #fff;
}

.sub .top-menu > li.depth1 .depth2 {
    background: rgba(255, 255, 255, 1);
}

/* 웹 접근성 관련 select 활성화 적용 */
.content-wrap .select-style.active {
    outline: 1px solid gray;
}

.inner-menu.search>.btn {
    min-width: auto;
    height: 30px;
    margin-left: 20px;
}

#content .inner-menu.search>.select-style.select-box {
    float: left;
}

/* 분배결과 버튼 */
.btn-search.searchBtn.referenceBtn {
    background: url("../images/common/icon_board_search.png") no-repeat 50% 50%;
    cursor: pointer;
    width: 36px;
    height: 36px;
}

.gsics-section .program aside .optionBox {
    border-bottom: 1px solid #cecece;
    border-top: none;
}

.gsics-section .program aside .optionBox:last-child {
    border-bottom: none;
}

.gsics-section .select-style {
    width: 122px;
    height: 29px;
    display: inline-block;
}

/*scroll*/
/* .scroll_control_a{
    position: absolute;
    width:100px;
    height:50px;
    bottom:110px;
    left:50%;
    margin-left:-50px;
    z-index:40;
}
.scrolldown {
}
 */

.scrolldown a {
    position: relative;
    display: block;
    width: 100%;
    height: 35px;
    text-align: center;
    cursor: pointer;
}

.scrolldown p {
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
}

.scrolldown .arrow {
    position: absolute;
    width: 25px;
    height: 11px;
    opacity: 0;
    left: 50%;
    margin-left: -13px;
}

.scrolldown .arrow_img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("/resources/homepage/images/main/scroll_arrow.png");
    background-size: 23px 11px;
    background-repeat: no-repeat;
    left: 0;
}

.scrolldown a .arrow {
    animation: arrow 1500ms linear infinite;
    -ms-animation: arrow 1500ms linear infinite;
    -moz-animation: arrow 1500ms linear infinite;
    -webkit-animation: arrow 1500ms linear infinite;
}

.scrolldown a .arrow:nth-child(2) {
    animation-delay: -0.5s;
    -ms-animation-delay: -500ms;
    -moz-animation-delay: -500ms;
    -webkit-animation-delay: -0.5s;
}

.scrolldown a .arrow:nth-child(3) {
    animation-delay: -1s;
    -ms-animation-delay: -1000ms;
    -moz-animation-delay: -1000ms;
    -webkit-animation-delay: -1s;
}

.arrowTxt {
    position: absolute;
    bottom: 0;
    width: 100px;
    text-align: center;
    letter-spacing: 1px;
    left: 50%;
    margin-left: -50px;
    z-index: 2;
}

.arrowTxt a {
    text-decoration: none;
    color: #fff;
    font-size: 11px;
}

.arrowTxt a:hover {
    color: #fff;
}

@-webkit-keyframes arrow {
    0% {
        -webkit-transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(9px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(18px);
        opacity: 0;
    }
}

@-ms-keyframes arrow {
    0% {
        -moz-transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -moz-transform: translateY(9px);
        opacity: 1;
    }

    100% {
        -moz-transform: translateY(18px);
        opacity: 0;
    }
}

@-moz-keyframes arrow {
    0% {
        -moz-transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -moz-transform: translateY(9px);
        opacity: 1;
    }

    100% {
        -moz-transform: translateY(18px);
        opacity: 0;
    }
}

@keyframes arrow {
    0% {
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        transform: translateY(9px);
        opacity: 1;
    }

    100% {
        transform: translateY(18px);
        opacity: 0;
    }
}

/*scroll*/
/*
 *20190408 GK2A 셈플 코드 및 자료 홈페이지 업로드 테이블 스타일 추가
*/
.sub2-3-1 .table-style {
    width: 55%;
    border: 1px solid #c7c7c7;
    border-bottom: 0
}

.sub2-3-1 .table-style th,.sub2-3-1 .table-style td {
    padding: 5px 10px;
    border-left: 1px solid #c7c7c7;
    border-bottom: 1px solid #c7c7c7;
    font-weight: normal;
    font-size: 14px;
    color: #1d1d1d;
    text-align: center
}

.sub2-3-1 .table-style th:first-child,.sub2-3-1 .table-style td:first-child {
    border-left: 0
}

.sub2-3-1 .table-style thead th {
    background: #f5f5f5
}

.sub2-3-1 .table-style thead tr:first-child th {
    background: #d8eafa;
    font-weight: bold
}

.sub2-3-1 .content-ul {
    overflow: hidden
}

.sub2-3-1 .content-ul li {
    padding-left: 13px;
    background: url(../images/content/ico_bar.gif) no-repeat 0 9px;
    line-height: 20px;
    font-size: 14px;
    color: #2b2b2b
}

.sub2-3-1 figure {
    width: 100%;
    margin: 10px 0 0;
    text-align: center
}

.sub2-3-1 figcaption {
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    color: #1d1d1d;
    text-align: center
}

.sub3-1-1 figure {
    width: 100%;
    margin: 0;
    text-align: center
}

.sub3-1-1 figure img {
    max-width: 100%
}

.sub3-1-1 figcaption {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #1d1d1d;
    text-align: center
}

.sub3-1-1 table {
    width: 100%;
    border-collapse: separate;
    border: 1px solid #cecece;
    border-bottom: 0
}

.sub3-1-1 table th,.sub3-1-1 table td {
    padding: 10px;
    border-left: 1px solid #cecece;
    border-bottom: 1px solid #cecece
}

/* ckeditor css */
/* .cke_contents {
} */

.cke_contents strong {
    font-weight: bold;
}

#snsDiv img {
    border-radius: 70%;
}

/*  */
/*
 *반응형 웹
*/
@media(max-width: 767px) {
    .main .top-menu {
        display:none;
    }

    .top-menu {
        height : 870%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: absolute;
        top: 68px;
        left: 0;
        z-index: 99;
        background-color: white;
    }

    .top-menu > li.depth1:hover > a {
        background-color: #808080;
        color: #fff;
        width: 100%;
    }

    .top-menu > li > a {
        pointer-events: none;
    }

    /* 모바일 depth1 a태그 클릭 이벤트 막기  */
    /* 토글 버튼 */
    .menuBtn {
        padding-top: 23px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 2px;
        /* border:1px solid #AAAAAA;
        border-radius:5px; */
        background-color: #FFFFFF;
        cursor: pointer;
        float: left;
    }

    /* 파란색 테두리 제거 */
    .menuBtn:focus {
        outline: none;
    }

    .menuBtn i {
        color: #888888;
    }

    /* 토글버튼 글자 숨기기 */
    .menuBtn span {
        display: inline-block;
        text-indent: -999px;
    }

    .top-menu > li .depth2 {
        display: none;
        left: 185px;
        top : -2px;
        z-index: 1000;
        position: absolute;
        width : 133%;
        text-align: center;
        border-top: 2px solid #5a5a5a;
        border-bottom: 1px solid black;
        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
        padding-top: 20px;
        padding-bottom: 15px;
        min-height: 200px;
        background-color: rgba(255, 255, 255, 1);
    }

    .top-menu > li > a {
        display: inline-block;
        color: #5a5a5a;
        font-size: 18px;
        font-weight: 700;
        padding: 25px 33px;
    }

    .top-menu > li ul.depth2 > li {
        display: inline-block;
        vertical-align: top;
        padding: 0px 24px;
        font-size: 14px;
        margin-right: 0px;
        width: 100%;
    }

    .main .top-menu > li.depth1 .depth2 {
        background: rgba(0, 0, 0, 1);
    }

    .top-menu > li ul.depth2 > li > a {
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 10px 0px 7px;
        font-size: 15px;
        color: #000;
        font-weight: bold;
        text-align: left;
    }

    /* 메인화면 이미지  */
    .main-banner {
        display: none;
    }

    .main-info .inner {
        max-width: 100%;
        margin: 0 auto
    }
}

/* ############ 768px 이상 ############ */
@media(min-width: 768px) {
    .main .top-menu {
        display:block;
    }

    .gnb-wrap .top-menu {
        display: block;
    }

    /* .top-menu{width:1200px;height:51px;margin:0 auto;border-bottom:2px solid #ff2930;box-sizing:border-box} */
    .top-menu > li .depth2.sticky {
        position: fixed;
        top: 0px;
    }

    /* 토글 버튼 */
    .menuBtn {
        display: none;
    }

    .top-menu > li {
        float: left;
    }

    /* .top-menu > li.depth1.active > a, .top-menu > li.depth1:hover > a, .top-menu > li.depth1.on > a{ background-color: #262626; color: #fff; } */
}

/* 국문 메인 페이지 반응형 웹  */
/***********************************************************************************************************************************************************/
/* ############ 767px 이하 ############ */
@media(max-width: 767px) {
    #topmenu {
        display: none;
    }

    .visual-section {
        width: 100%;
        height: 236px;
        position: relative;
        z-index: 10;
    }

    .visual-section .text-wrap {
        display: none;
    }

    .main-scene {
        display: none;
    }

    .scroll_control_a {
        display: none;
    }

    .link-section {
        margin: 0px auto 0;
        width: 100%;
        position: relative;
        z-index: 20;
        background-color: #fff;
    }

    html, body {
        height: 100%;
        min-width: 100%;
        position: relative;
    }

    .link-section .cube {
        width: 100%;
        height: 274px;
        padding: 30px 19px;
        -webkit-transition: all, 0.7s;
        -moz-transition: all, 0.7s;
        transition: all, 0.7s;
    }

    .menu-section {
        background-color: #fff;
        width: 100%;
        margin: 30px auto 0;
        padding: 29px 0px;
    }

    .menu-section .banner-zone .cont {
        border : 1px solid #cdcdcd;
        padding: 3px 1px 1px 1px;
        background-color: #f4f4f4;
        position: relative;
    }

    .menu-section .banner-link .banner2 {
        background: url(../images/main/img_bottom02.jpg) no-repeat 0 0;
        margin-left: 0px;
    }

    #footer .footer-menu {
        width: 100%;
        padding: 0 10px;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    #footer .container {
        width: 100%;
        padding: 0 10px;
        margin: 0 auto;
    }

    #footer .footer-address {
        width: 100%;
    }

    #footer .footer-link {
        width: 120%;
        float : right;
    }

    #footer .footer-menu ul li {
        float: left;
        margin-left: 10px;
    }

    /* 기관소개 - 인사말  */
    #nmscMan img {
        width: 100%;
    }

    .greeting-section .text {
        line-height: 1.5;
        font-size: 16px;
    }

    /* 연혁  */
    .center_history .cont_wrap {
        width: 100%;
        margin: 0 auto;
    }

    .center_history .section_1 .box_tit {
        right: -200px;
    }

    .center_history .section_2 .box_tit {
        right: -200px;
    }

    /* 주요업무 */
    .business-list .inner {
        width: 100%;
        float: left;
        margin-bottom: 100px;
    }

    /* 오시는길  */
    .location .txt_tit {
        font-size: 24px;
        color: #f24b00;
    }

    .location .txt_type1 {
        padding-bottom: 20px;
        font-size: 12px;
    }

    .api_map #map img {
        width: 100%;
    }

    /* 위성 분배 정보  */
    #img-area img {
        width: 100%;
    }

    /* 비전  */
    #visionImg {
        height: 390px;
    }

    /* 견학 안내  */
    .tx-infomation {
        font-size: 15px;
        line-height: 1.5;
    }

    .img-infomation img {
        vertical-align: top;
        width: 100%;
    }

    .img-infomation p {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        line-height: 25px;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
    }

    .tb.tb-info thead th {
        background-color: #f4f4f4;
        padding: 19px 0;
        border-left: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        font-size: 15px;
    }

    .hypen-list > li {
        margin-top: 10px;
        line-height: 1.3;
        font-size: 16px;
    }

    table tr th, table tr td {
        font-size: 13px;
    }

    /* 공지사항  */
    .tb.list tbody td > a, .tb.list2 tbody td > a, .tb.list3 tbody td > a {
        color: #4a4a4a;
        display: block;
        width: 90%;
    }

    .tb.list thead th:not(#thTitle) {
        display: none;
    }

    .tb.list tbody td:not(.left) {
        display: none;
    }

    #thTitle {
        width: 100%
    }

    .colTable {
        width: 10%;
    }

    #colauto {
        width: 100%
    }

    .board-control {
        width: 100%;
        border-top: 1px solid #626262;
        border-bottom: 1px solid #626262;
    }

    /* #listOrganization tr td:not(.left){display:block;} */
    /* #listOrganization thead th:not(#thTitle){display:block;} */
    /* 센터행사 */
    .gallery-list li a .thumb {
        display: table-cell;
        vertical-align: middle;
        width: 30%;
        height: auto;
    }

    .gallery-list li a .text .title {
        font-size: 20px;
        margin-bottom: 20px;
        display: block;
        line-height: 1.3;
        word-break: break-all;
    }

    .gallery-list li a .text span {
        font-size: 11px;
        color: #4a4a4a;
        margin-right: 5px;
    }

    /* 연구교육 - 기상위성교실 - 기상위성분류  */
    .tb.list2 tbody th {
        width: 10%;
    }

    .tb.list2 tbody td:first-of-type {
        width: 20%;
    }

    .img-center {
        text-align: left;
    }

    .research-section.tab1 .box1 .left {
        width: 100%;
    }

    .research-section.tab1 .box2 .right {
        width: 100%;
    }

    #img_1_3 img {
        width: 100%
    }

    #img_1_4 img {
        width: 400px
    }

    .research-section.tab1 .box2 .left {
        width: 100%;
        margin-right: 0;
    }

    /* .tb.list3.list3-th tbody td .img + .tx {
    } */

    /* clear: none;  */
    .tab.tab-4 li a {
        width: 174px;
    }

    .tab.tab-4 > li + li > a {
        left: 174px;
    }

    #earthObs {
        top: 0px;
    }

    /* 위성 영상 분석  */
    .layout-box .left {
        float: left;
        width: 100%;
    }

    .text-box.width-type4 .left {
        width: 100%;
    }

    .tab > li.on > .tab-content {
        height: auto;
        position: static;
        padding-top: 180px;
    }

    .tab.tab-5 > li + li + li + li + li > a {
        left: 0px;
        top: 113px;
    }

    .tab.tab-5 > li + li + li > a {
        left: 0px;
        top: 56px;
    }

    .tab.tab-5 > li + li > a {
        /* left: 220px; */
        left:calc(50% - 1px);
    }

/*     .tab.tab-5 > li + li + li + li > a {
        left: 220px;
        top: 56px;
    } */

    .text-box.width-type6 .right {
        width: 100%;
    }

    #imgAnly {
        top: 0px;
    }

    .text-box.width-type6 .left {
        width: 100%;
    }

    .text-box.width-type5 .left {
        width: 100%;
    }

    /* 위성정보> 운영공지> 천리안위성 2A호 운영공지 */
    .board-view-section .board-header strong {
        float: left;
        vertical-align: middle;
        font-size: 20px;
        font-weight: bold;
        width: 100%;
        line-height: 1.4;
    }

    /* 위성정보> 위성소개> 천리안위성 2A호  */
    .mt10 img {
        width: 100%;
    }

    /* 위성정보> 운영현황 및 보고서> 운영결과  table 가로 스크롤 */
    /* 위성정보> 사용자 가이드> 응답 함수 정보*/
    .listOperationSection {
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 위성정보> 위성소개> 천리안위성 1호  */
    .text-box .right {
        width: 100%;
    }

    .text-box.width-type2 .left {
        width: 100%;
    }

    .text-box .left {
        float: left;
        width: 100%;
    }

    .bg-box.pd-type2:before {
        position: absolute;
        right: 0px;
        top: 53px;
        content: "";
        display: block;
        background: url("../images/chollian/icon_arrow_right.jpg") no-repeat left top;
        width: 49px;
        height: 81px;
    }

    .bg-box {
        padding: 10px 15px;
    }

    .bg-box.pd-type2 {
        padding: 45px 25px;
        position: relative;
    }

    .channel5-area .channel5-list li.ml {
        margin-left: 0px;
    }

    .tab > li + li > a {
        top: 57px;
    }

    .tab > li + li + li > a {
        top: 114px;
    }

    /* 위성영상이해  */
    #seasNal {
        top: 0px;
    }
    
    .organization-section dl div div {
        width: 100%;
    }

    /*  기관소개> 기관소개> 조직구성도  */
    .organization-section dl dd {
        background-color: #f0f3f5;
        display: table;
        width: 30%;
        height: 70px;
        float: left;
        margin-left: 10px;
        border-radius: 50px;
    }
    
    .organization-section dl dd a {
        display: table-cell;
	    vertical-align: middle;
	    color: #000;
	    font-size: 16px;
	    text-align: center;
    }

    .organization-section dl dt {
        display: table;
        width: 260px;
        height: 80px;
        color: #fff;
        background-color: #01babd;
        line-height: 1.4;
        text-align: center;
        margin-left: auto;
	    margin-right: auto;
	    margin-top: auto;
	    margin-bottom: 1.95%;
	    border-radius: 50px;
    }

    /* 사이트 맵  */
    .sitemap .col_wrap .col {
        float: left;
        width: 100%;
        padding: 0 10px;
    }

    .notice-box {
        background-color: #f4f4f4;
        padding: 30px 25px;
    }

    .board-control .next-txt a em, .board-control .prev-txt a em {
        vertical-align: middle;
        font-size: 13px;
        color: #4a4a4a;
        padding-left: 60px;
        overflow: hidden;
        width: 460px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

/* ############ 768px 이상 ############ */
@media(min-width: 768px) {
    #videoTitle {
        position: absolute;
        bottom: 90px;
        left: 21%;
        z-index: 40;
        color: white;
    }

    #mainVideo {
        position: absolute;
        bottom: 110px;
        left: 21%;
        z-index: 40;
    }

    .visual-section {
        text-align: center;
        background: url("../images/main/bg_main01.jpg") no-repeat 50% 50%;
        display: block;
    }

    .visual-section {
        width: 100%;
        height: 633px;
        position: relative;
        z-index: 10;
    }

    .visual-section .text-wrap {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        display: table;
    }

    .main-scene {
        min-height: 460px;
        position: relative;
        overflow: hidden;
    }

    #imgSlide {
        position: relative;
        bottom: 300px;
        right: 369px;
    }

    .scroll_control_a {
        position: absolute;
        width: 100px;
        height: 50px;
        bottom: 110px;
        left: 50%;
        margin-left: -50px;
        z-index: 40;
    }

    .link-section {
        margin: -55px auto 0;
        width: 1100px;
        position: relative;
        z-index: 20;
        background-color: #fff;
    }

    html, body {
        height: 100%;
        min-width: 1120px;
        position: relative;
    }

    .link-section .cube {
        float: left;
        height: 274px;
        padding: 30px 19px;
        -webkit-transition: all, 0.7s;
        -moz-transition: all, 0.7s;
        transition: all, 0.7s;
    }

    .link-section .mian-board {
        width: calc(100% - 60%);
    }

    .link-section .mini-banner1 {
        width: calc(100% / 5 );
    }

    .link-section .mini-banner2 {
        width: calc(100% / 5 );
    }

    .link-section .mini-banner3 {
        width: calc(100% / 5 );
    }

    .menu-section {
        background-color: #fff;
        width: 1100px;
        margin: 30px auto 0;
        padding: 29px 26px;
    }

    .menu-section .banner-zone .cont {
        border : 1px solid #cdcdcd;
        height: 143px;
        padding: 3px 1px 1px 1px;
        background-color: #f4f4f4;
        position: relative;
    }

    .menu-section .banner-link .banner2 {
        background: url(../images/main/img_bottom02.jpg) no-repeat 0 0;
        margin-left: 20px;
    }

    #footer .footer-menu {
        max-width: 1120px;
        width: 100%;
        padding: 0 10px;
        margin: 0 auto;
        margin-bottom: 15px;
    }

    #footer .container {
        max-width: 1120px;
        width: 100%;
        padding: 0 10px;
        margin: 0 auto;
    }

    #footer .footer-address {
        width: 55%;
    }

    #footer .footer-link {
        width: 43%;
        float : right;
    }

    #footer .footer-menu ul li {
        float: left;
        margin-left: 33px;
    }

    /* 기관소개 - 인사말  */
    #nmscMan img {
        width: 435px;
    }

    .greeting-section .text {
        margin-left: 480px;
        line-height: 1.5;
        font-size: 16px;
    }

    /* 연혁  */
    .center_history .cont_wrap {
        width: 700px;
        margin: 0 auto;
    }

    .center_history .section_1 .box_tit {
        left: -200px;
    }

    .center_history .section_2 .box_tit {
        right: -200px;
    }

    /* 주요업무 */
    .business-list .inner {
        width: 50%;
        float: left;
        margin-bottom: 100px;
    }

    /* 오시는길  */
    .location .txt_tit {
        padding-bottom: 26px;
        font-size: 24px;
        color: #f24b00;
    }

    .location .txt_type1 {
        font-size: 20px;
    }

    /* 위성 분배 정보  */
    #img-area img {
        width: 1100px;
    }

    /* 견학 안내 */
    .tx-infomation {
        font-size: 24px;
        line-height: 1.5;
    }

    .img-infomation img {
        vertical-align: top;
    }

    .img-infomation p {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        height: 60px;
        line-height: 58px;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
    }

    .tb.tb-info thead th {
        background-color: #f4f4f4;
        padding: 19px 0;
        border-left: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        font-size: 24px;
    }

    .hypen-list > li {
        margin-top: 10px;
        padding-left: 20px;
        line-height: 1.3;
        font-size: 16px;
    }

    table tr th, table tr td {
        font-size: 16px;
    }

    /* 공지사항 */
    .tb.list tbody td > a, .tb.list2 tbody td > a, .tb.list3 tbody td > a {
        color: #4a4a4a;
        display: block;
        width: 90%;
/*         text-overflow: ellipsis; */
/*         white-space: nowrap; */
/*         overflow: hidden; */
    }

    #colNo {
        width: 71px;
    }

    #colTitle {
        width: auto;
    }

    #colWriter {
        width: 97px;
    }

    #colRegdt {
        width: 130px;
    }

    #colHit {
        width: 82px;
    }

    #colAtch {
        width: 61px;
    }

    .board-control {
        width: 600px;
        border-top: 1px solid #626262;
        border-bottom: 1px solid #626262;
    }

    /* 연구교육- 보고서     논문 실적 - 학술발표  */
    #colYear {
        width: 97px;
    }

    #colMainwriter {
        width: 115px;
    }

    #colContest {
        width: 280px;
    }

    /* 연구교육 - 보고서 논물 실적 - 특허  */
    #col71 {
        width: 71px;
    }

    #colauto {
        width: auto;
    }

    #col97 {
        width: 97px;
    }

    #col130 {
        width: 130px;
    }

    #col110 {
        width: 110px;
    }

    #col150 {
        width: 150px;
    }

    #col61 {
        width: 61px;
    }

    /*  연구·교육> 기상위성교실> 기상위성분류   */
    #col275 {
        width: 275px;
    }

    .research-section.tab1 .box2 .right {
        width: 469px;
    }

    /* 센터행사 */
    .gallery-list li a .thumb {
        display: table-cell;
        vertical-align: middle;
        width: 300px;
        height: auto;
    }

    .gallery-list li a .text .title {
        font-size: 24px;
        margin-bottom: 20px;
        display: block;
        line-height: 1.3;
        word-break: break-all;
    }

    .gallery-list li a .text span {
        font-size: 16px;
        color: #4a4a4a;
        margin-right: 25px;
    }

    /* 비전  */
    #visionImg {
        height: 390px;
    }

    /* 연구교육 - 기상위성교실 - 기상위성분류  */
    .img-center {
        text-align: center;
    }

    .research-section.tab1 .box1 .left {
        width: 600px;
    }

    #img_1_3 img {
        width: 100%
    }

    #img_1_4 img {
        width: 600px;
    }

    .research-section.tab1 .box2 .left {
        width: 600px;
        margin-right: 0;
    }

    .tb.list3.list3-th {
        table-layout: fixed;
    }

    .tb.list3.list3-th tbody td .img + .tx {
        margin-left: 280px;
        clear: none;
    }

    .tab.tab-4 li a {
        width: 275px;
    }

    .tab.tab-4 > li + li > a {
        left: 274px;
    }

    /* 위성 영상 분석  */
    .layout-box .left {
        float: left;
        width: 600px;
    }

    .text-box.width-type4 .left {
        width: 736px;
    }

    .tab > li.on > .tab-content {
        height: auto;
        position: static;
        padding-top: 30px;
    }

    .tab.tab-5 > li + li > a {
        left: 220px;
    }

    .tab.tab-5 > li + li + li > a {
        left: 440px;
    }

    .tab.tab-5 > li + li + li + li > a {
        left: 660px;
    }

    .tab.tab-5 > li + li + li + li + li > a {
        left: 880px;
    }

    .text-box.width-type6 .right {
        width: 640px;
    }

    .text-box.width-type6 .left {
        width: 400px;
    }

    .text-box.width-type5 .left {
        width: 600px;
    }

    /* 위성정보> 운영공지> 천리안위성 2A호 운영공지 */
    .board-view-section .board-header strong {
        float: left;
        vertical-align: middle;
        font-size: 20px;
        font-weight: bold;
        width: 670px;
        line-height: 1.4;
    }

    /* 위성정보> 위성소개> 천리안위성 1호  */
    .text-box .right {
        float: right;
        width: 50%;
    }

    .text-box.width-type2 .left {
        width: 689px;
    }

    .text-box .left {
        float: left;
        padding-right: 50px;
        width: 50%;
    }

    .bg-box.pd-type2:before {
        position: absolute;
        right: -124px;
        top: 53px;
        content: "";
        display: block;
        background: url("../images/chollian/icon_arrow_right.jpg") no-repeat left top;
        width: 49px;
        height: 81px;
    }

    .bg-box {
        background-color: #f4f4f4;
        padding: 10px 15px;
    }

    .bg-box.pd-type2 {
        padding: 45px 25px;
        width: 366px !important;
        position: relative;
    }

    .channel5-area .channel5-list li.ml {
        margin-left: 397px;
    }

    .tab > li + li > a {
        left: 367px;
    }

    .tab > li + li + li > a {
        left: 731px;
    }

    .research-section .right {
        width: auto;
    }

    /*  기관소개> 기관소개> 조직구성도  */
    .organization-section dl dd {
        background-color: #f0f3f5;
        display: table;
        width: 260px;
        height: 70px;
        float: left;
        margin-left: 20px;
        border-radius: 50px;
    }

    .organization-section {
        background: url("../images/content/organization-bg.png") no-repeat 50% 130px;
    }

    .organization-section dl dt {
        display: table;
        margin: 0 auto;
        width: 260px;
        height: 130px;
        color: #fff;
        background-color: #01babd;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 107px;
        border-radius: 50px;
    }

    #colNoOrg {
        width: 7%;

    }

    #colDeptOrg {
        width: 10%;
    }

    #colNameOrg {
        width: 20%;
    }

    /* #colTaskOrg {
        width: *%;
    } */

    #colTelOrg {
        width: 20%;
    }

    /* 사이트 맵  */
    .sitemap .col_wrap .col {
        float: left;
        width: 33.33%;
        padding: 0 10px;
    }

    .main-new .slideImage {
        width: 100%;
        height: 203px;
    }

    /*  */
    .notice-box {
        background-color: #f4f4f4;
        padding: 30px 25px;
        width: 472px;
        height: 100px;
    }

    .board-control .next-txt a em, .board-control .prev-txt a em {
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
        color: #4a4a4a;
        padding-left: 60px;
        overflow: hidden;
        width: 460px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

/* 메인 */
article.main-new {
    position: relative;
    margin: 0 auto;
    width: 1100px;
}

article.main-new:after {
    content: "";
    clear: both;
    display: block;
}

.main-new .main-cnt {
    float: left;
    padding: 1%;
    width: 60%;
}

.main-new .main-cnt.main-right {
    width: 40%;
    padding: 3% 40px;
}

.main-new .main-right > div {
    width: 100%;
}

/*관심영역*/
.main-new .image-section {
    margin-left: 13%;
    width: 500px;
}

.image-section .inner-menu {
    margin: 0
}

.image-section .inner-menu ul.tabmenu {
    margin: 0;
    border-bottom: 1px solid #ffffff;
}

.image-section .inner-menu ul.tabmenu li {
    width: 100px;
}

.image-section .inner-menu ul li a {
    padding: 8px;
    font-size: 14px;
    border-bottom: 4px solid #a3a3a3;
}

.image-section .inner-menu ul li.active a {
    border-color: #016cbf;
}

.image-section .inner-menu ul li:not(.active):hover a {
    border-color: #79b7e7;
    color: #79b7e7;
}

/*.main-new .imageArea { position: relative; width:500px;  background-size : cover; !*background: url("../images/sample.png") 0 0  no-repeat; *! }*/
.main-new .imageArea {
    width: 500px;
}

.main-new .imageArea a {
    display: block;
    border: 3px solid #016cbf;
    height: 100%;
}

.main-new .imageArea .areaImage {
    width: 100%;
}

.main-new .imageArea .intrstArea {
    z-index : 10;
    position : absolute;
    display : none;
    border : 3px solid #016cbf;
    background-color : rgba(255, 255, 255, 0.3);
    cursor : pointer;
}

.main-new .imageArea .intrstArea.selected {
    background-color : rgba(255, 255, 0, 0.3);
}

.main-new .imageArea .intrstArea:not(.selected):hover {
    background-color : rgba(100, 255, 100, 0.2);
}

.main-new .intrstBtnDiv {
    padding: 10px 0;
}

.main-new .intrstBtn {
    display: block;
    padding: 8px 0;
    width: 500px;
    border-radius: 3px;
    font-size: 18px;
    background-color: #016cbf;
    color: #fff;
    text-align : center;
}

.main-new .intrstBtn:hover {
    color: #fff;
}

/* 게시판 */
.main-new .board-section {
    position: relative;
    padding: 5px 10px;
    width: 100%;
    min-height: 250px;
    background-color: #ffffff;
}

.main-new .board-section > .board-nav {
    padding: 10px 0;
}

.main-new .board-nav .tab {
    margin-right: 10px;
    padding: 0;
    width: auto;
    font-size: 16px;
    color: #616161;
    cursor: pointer;
}

.main-new .board-nav .tab.select {
    box-shadow: 0 0.2em 0 0 #016cbf, 0 0.2em 0 0 #016cbf;
    font-weight: bold;
    color: #464646;
}

.main-new .board-section > section {
    display: none;
    padding: 0 10px;
    color: #4a4a4a;
}

.main-new .board-section > section li {
    padding: 5px 0;
    line-height: 1.3;
}

.main-new .board-section .list.on {
    display: block;
}

.main-new .board-section .list .tit {
    font-size: 15px;
}

.main-new .board-section .btn-plus {
    position: absolute;
    top: 22px;
    right: 16px;
    border: 0;
    width: 15px;
    height: 15px;
    background: url(../images/main/img_plus.png) no-repeat 50% 50%;
}

.main-new .main-right h3 {
    font-size: 16px;
    font-weight: bold;
}

.main-new .main-video h3 {
    padding: 5px 0;
}

.main-new .main-video .slideshow-container {
    max-width: 100%;
}

.main-new .main-video .slideAtag {
    position: absolute;
    left: 45%;
    top: 38%;
}

.main-new .main-video .textslide {
    bottom: 0;
}

.main-new .main-video .firstThum, .main-new .main-video .mySlides {
    width: 100%;
    height: 100%;
}

.main-new .main-video .mySlides {
    position: relative;
    border-radius: 15px;
    background: #EFEFEF;
    box-shadow: 0 0 0 2px #016cbf;
    border-radius: 5px;
    overflow: hidden;
}

.main-new .mySlides > div {
    line-height: 180px;
}

.main-new .main-video .textslide {
    color: #616161;
    background-color: rgba(255, 255, 255, 0.6);
}

.main-new .main-video .prevslides, .main-new .main-video .nextslides {
    -webkit-margin-start: 0;
}

.main-new .banner-zone {
    padding-top: 30px
}

.main-new .banner-zone > div {
    margin: 0 auto;
    padding: 3px 0;
    width: 100%;
}

.main-new .banner-zone h3 {
    display: inline-block;
}

.main-new .banner-btn, .banner-count, .main-new .banner-btn > li, .main-new .banner-count > li {
    display: inline-block;
}

.main-new .banner-count {
    float: right;
}

.main-new .banner-zone .cont img {
    display: block;
    width: 100%;
    height: 180px;
}

.main-new .main-link {
    padding-top: 50px;
}

.main-new .main-link a {
    width: 50%;
    height: 200px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.main-new .main-link a span {
    display: inline-block;
    padding-top: 15px;
    font-size: 18px;
}

.main-new .main-link .int.sat {
    background: #000 url(../images/main/img_earth.png) no-repeat 50% 40px ;
    background-size: 70%;
    color: #fff;
}

.main-new .main-link .int.gk2 {
    background: #fff url(../images/main/img_2a.png) no-repeat 50% 60px;
    background-size: 80%;
    color: #464646;
}

.main-new .main-link .int.svc {
    background: #cbddf3 url(../images/main/img_dataservice.png) no-repeat 50% 50px;
    background-size: 65%;
    color: #4a6587;
}

.main-new .main-link .ext {
    padding: 5px 8px;
    color: #fff;
    text-align: left;
}

.main-new .main-link .ext.mic {
    background: url(../images/main/img_bottom01.jpg) no-repeat 0 0;
}

.main-new .main-link .ext.swt {
    background: url(../images/main/img_bottom02.jpg) no-repeat 50% 0;
}

.main-new .main-link .ext span {
    font-size: 15px;
}

.main-new .main-link .ext em {
    display: block;
    padding: 5px 0;
    font-size: 18px;
    font-weight: bold;
}

/* ############  국문  767px 이하 ############ */
@media(max-width: 767px) {
    article.main-new {
        width: 100vw;
    }

    .content-wrap .main-new .main-cnt {
        padding: 1vw;
        width: 100vw;
    }

    .content-wrap .main-new .main-right {
        padding-top: 3vw
    }

    .content-wrap .main-new .image-section {
        margin : 0;
        width: 98vw;
    }

    /*.content-wrap .main-new .imageArea { }*/
    .content-wrap .main-new .imageArea {
        width: 98vw;
    }

    .image-section .inner-menu ul.tabmenu li {
        width: 80px;
    }

    .image-section .inner-menu ul li a {
        padding: 6px;
        font-size: 12px;
    }

    .content-wrap .main-new .intrstBtnDiv {
        padding: 1vw 0;
    }

    .content-wrap .main-new .intrstBtn {
        padding: 2vw 0;
        width: 98vw;
        font-size: 14px
    }

    .content-wrap .main-new .board-section {
        min-height: 200px;
    }

    .content-wrap .main-new .board-section > .board-nav .tab {
        font-size: 14px;
    }

    .content-wrap .main-new .board-section .list .tit {
        font-size: 13px;
    }

    .content-wrap .main-new .board-section .btn-plus {
        top: 16px;
        right: 24px;
    }

    .content-wrap .main-new .mySlides > div {
        line-height: 56vw;
    }

    .content-wrap .main-new .main-cnt .slideshow-container {
        width: 98vw;
        height: 56vw;
    }

    .content-wrap .main-new .banner-zone .cont img {
        width: 98vw;
        height: 50vw;
    }

    .content-wrap .main-new .main-link .ext span {
        font-size: 14px;
    }

    .content-wrap .main-new .main-link .ext em {
        font-size: 17px;
    }

    .content-wrap .main-new .main-link a {
        width: 49vw;
        height: 49vw;
    }
}

/* 홍보동영상 - 메인 페이지 이미지슬라이드  */
.textslide strong {
    color: #f2f2f2;
}

* {
    box-sizing: border-box
}

.mySlides {
    display: none
}

img {
    vertical-align: middle;
}

.slideAtag {
    position: relative;
    bottom: 130px;
    z-index: 999;
}

.slideImg {
    width: 50px;
    height: 50px;
}

/* Slideshow container */
.slideshow-container {
    max-width: 350px;
    position: relative;
    margin: auto;
}

.slideImage {
    width : 100%;
    height: auto
}

/* Next & previous buttons */
.prevslides, .nextslides {
    cursor: pointer;
    position: absolute;
    top: 36%;
    width: auto;
    padding: 16px;
    -webkit-margin-start: -50%;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    z-index: 999;
}

/* Position the "next button" to the right */
.nextslides {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through
.prevslides:hover, .nextslides:hover {
  background-color: rgba(0,0,0,0.8);
} */
/* Caption text */
.textslide {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 60px;
    width: 100%;
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev, .next,.text {
        font-size: 11px
    }
}


/* 위성영상 - 210906 반영예정 */
#ui-datepicker-div{z-index: 2 !important;}
.ui-datepicker{display: none;}
.new-video-section {margin-top: 0px;}
.ui-widget-overlay { z-index: 5;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #aaaaaa;opacity: .5; }
.ui-dialog { z-index: 6;background-color: #fff;box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;border-radius: 8px; }
/* .ui-dialog .ui-dialog-titlebar { display: none; } */
.ui-dialog-buttonset { text-align: center;padding:.3em 0; }

.new-video-section button:disabled { background: #a0a0a0;opacity: .5;cursor: not-allowed; }
.new-video-section button > .txt { padding:0 5px; }
.new-video-section select { padding:.2em 1.7em .2em .4em;border:1px solid #999;font-size: 13px;background: #fff url(../images/common/select_arrow.png) no-repeat 95% 50%;}
.new-video-section select:disabled { cursor: not-allowed;background: #a0a0a0;opacity: .5;cursor: not-allowed; }
.new-video-section select::-ms-expand { display: none; }
.new-search-section input[type="text"]:disabled {  border-color: #999;background: #a0a0a0;opacity: .5;cursor: not-allowed; }

.new-search-section { z-index:2;display:flex;flex-flow:row wrap;justify-content:flex-end;align-items:center;padding:.2em 0;  }
.new-search-section .title { margin-right: auto;width:calc( 100% - 7.4em );font-size: 1.15em;font-weight: 700;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }
.new-search-section .title > span + span:before { content: "-"; padding:0 .3em; }
.new-search-section .label {  padding: 0 0.3em;font-size: 1em; line-height: 1.2em;font-weight:700; }
.new-search-section .searchBox { display: flex;flex-flow: row wrap; width: 100%;height: 0;background-color: #eee;overflow: hidden;}
.searchBox button { padding: .2em 0.4em; }
.searchBox > div { display: flex;flex-flow: row wrap;align-items: center;}
.searchBox .dateTime { display: flex;flex-flow: row wrap; margin-right: auto; }
.searchBox .dateTime .datePicker{ padding : .2em .8em;width:150px;text-align: center;font-size: 13px; }
.searchBox .dateTime #searchTime { margin: 0 0.2em;min-width: 80px; }
.searchBox .dateTime .nowBtn { border:1px solid #626262;background-color:#626262;color:#fff;border-radius: 1em;}
.searchBox .condition > div { display: flex;flex-flow: row wrap;align-items: center;padding:.24em; }
.condition [data-idx="0"] select {  width: 118px; }
.condition [data-idx="1"] select {  width: 86px; }
.condition [data-idx="2"] select {  width: 130px; }
.condition [data-idx="3"] select {  width: 80px; }
.searchBox .helpBtn { background: #016cbf;color: #fff;border-radius: 5px; }
.searchBox .helpBtn.hide { display: none; }
.searchBox .reload { flex-grow: 0;flex-shrink: 0;display: flex; flex-flow: row wrap;align-items: center; position:relative;margin-right: .1em; }
.searchBox .reloadTime { display: none;z-index: 2;position: absolute;top: 100%;left: 0; width: 4em; height: 8em; background-color: #fff;overflow: auto; box-shadow: rgb(0 0 0 / 9%) 0px 2px 1px, rgb(0 0 0 / 9%) 0px 4px 2px, rgb(0 0 0 / 9%) 0px 8px 4px, rgb(0 0 0 / 9%) 0px 16px 8px, rgb(0 0 0 / 9%) 0px 32px 16px; }
.searchBox .reloadTime > li { padding: .2em .4em;font-size: .9em;cursor: pointer; }
.searchBox .reloadTime > li.on, .searchBox .reloadTime > li:hover { background-color: #016cbf;color: #fff;  }
.searchBox .reload:hover >  .reloadTime { display: block; }

.toggle { display: none; }
.toggle, .toggle:after, .toggle:before, .toggle *, .toggle *:after, .toggle *:before, .toggle + .toggle-btn { box-sizing: border-box; }
.toggle::-moz-selection, .toggle:after::-moz-selection, .toggle:before::-moz-selection, .toggle *::-moz-selection, .toggle *:after::-moz-selection, .toggle *:before::-moz-selection, .toggle + .toggle-btn::-moz-selection { background: none; }
.toggle::selection, .toggle:after::selection, .toggle:before::selection, .toggle *::selection, .toggle *:after::selection, .toggle *:before::selection, .toggle + .toggle-btn::selection { background: none; }
.toggle + .toggle-btn { outline: 0;display: block;width: 4em;height: 2em;position: relative;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }
.toggle + .toggle-btn:after{ position: relative;display: block;content: "";width: 50%;height: 100%; }
.toggle + .toggle-btn:after { left: 0; }
.toggle:checked + .toggle-btn:after { left: 50%; }

.toggle.type01 + .toggle-btn { background: #b7bcc3;border-radius: 2em;padding: 2px;width: 4.2em;height: 2em;transition: all 0.2s ease;border: 1px solid #e8eae9; }
.toggle.type01 + .toggle-btn:after { width: 50%;border-radius: 2em;background: #4a4a4a;transition: left 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.2s ease, margin 0.2s ease;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); }
.toggle.type01 + .toggle-btn:hover:after { will-change: padding; }                     /* padding: .15em;  반영안됨  */
.toggle.type01 + .toggle-btn:before {content: "OFF";position: absolute;top:3px;z-index: 2;padding: .15em;color: #fbfbfb ;font-size: .9em;font-weight: 700;letter-spacing: -1px; }
.toggle.type01 + .toggle-btn:active { box-shadow: inset 0 0 0 2em #e8eae9; }
.toggle.type01 + .toggle-btn:active:after { padding-right: 0.8em;background-color: #fbfbfb; }
.toggle.type01 ~ .searchBox {  display: none }
.toggle.type01:checked + .toggle-btn { background: #86d993; }
.toggle.type01:checked + .toggle-btn:active { box-shadow: none; }
.toggle.type01:checked + .toggle-btn:before { content: "ON";color: inherit ;padding: .2em; }
.toggle.type01:checked + .toggle-btn:after {  background: #fbfbfb; }
.toggle.type01:checked + .toggle-btn:after { left:51%; }
.toggle.type01:checked + .toggle-btn:before{ left:54%; }
.toggle.type01:checked + .toggle-btn:active:after { margin-left: -0.8em;  }
.toggle.type01:checked ~ .searchBox { display: flex; padding:.4em;height: auto;overflow: visible; }

.toggle.type02 + .toggle-btn { overflow: hidden;width:3em;height: 1.8em;transition: all 0.2s ease;background: #888;font-size: .9em; }
.toggle.type02 + .toggle-btn:after, .toggle.type02 + .toggle-btn:before { display: inline-block;transition: all 0.2s ease;width: 100%;text-align: center;position: absolute;line-height: 2em;font-weight: bold;color: #fff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.toggle.type02 + .toggle-btn:after { top:0;left: 100%; content: attr(data-tg-on); }
.toggle.type02 + .toggle-btn:before { top:0;left: 0;content: attr(data-tg-off); }
.toggle.type02 + .toggle-btn:active { background: #888; }
.toggle.type02 + .toggle-btn:active:before { left: -10%; }
.toggle.type02:checked + .toggle-btn { background: #86d993; }
.toggle.type02:checked + .toggle-btn:before { left: -100%; }
.toggle.type02:checked + .toggle-btn:after { left: 0; }
.toggle.type02:checked + .toggle-btn:active:after { left: 10%; }

.new-video-section .vod-area { z-index: 1;position:relative;margin:0; }
.new-video-section .vod-area button { padding: 0.3em 1em;border:1px solid #4a4a4a;background:#fff; border-radius: 5px;}
.new-video-section .vod-area .view {position: relative;}
.new-video-section .vod-area .player { z-index:2;position:absolute; top:2em;left:15%; display: flex;flex-flow: row wrap;padding:0.2em 0.5em;width:70%;background:rgba( 255, 255, 255, .8);opacity: 1;}
.new-video-section .vod-area .player button { margin: 0 0.1em; padding: 0.2em 0.7em 0.1em 0.6em;}
.new-video-section .vod-area .player .first { padding: 0.2em 0.5em 0.1em 0.4em; }
.new-video-section .vod-area .player .for { padding: 0.2em 0.6em 0.1em 0.7em; }
.new-video-section .vod-area .player .end { padding: 0.2em 0.4em 0.1em 0.5em; }
.new-video-section .vod-area .player .playBtn { padding: 0.2em 0.5em 0.1em 0.6em; }
.new-video-section .vod-area .player .playBtn.stop { padding: 0.2em 0.525em 0.1em 0.525em; }
.new-video-section .vod-area .player .playBtn.stop > i:before { content: "\f04c"; }
.new-video-section .vod-area .player .sliderWrap { align-self: center;flex-grow: 1;display: flex;flex-flow: row wrap; }
.new-video-section .vod-area .player .slider { position: relative; align-self: center;flex-grow: 1;padding: 0 0.5em; }
.new-video-section .vod-area .player .txtTime { align-self: center;padding: 0 0.5em;}
.new-video-section .vod-area .player .stepBar { z-index: 2;position: relative; border: 1px solid #c5c5c5; height: .6em; background: #fff; border-radius: 1em; }
.new-video-section .vod-area .player .ui-slider-range-min { height:100%;background-color: #016cbf; border-radius: 1em; }
.new-video-section .vod-area .player .stepBar > span { z-index: 2;position: absolute;top: -.38em;margin-left: -.48em;border: 1px solid #016cbf;width: 1.1em;height: 1.1em;background-color: #fff;border-radius: 1em;}
.new-video-section .vod-area .player .stepBar > span.ui-state-active {outline: none;}
.new-video-section .vod-area .player .stepBar.ui-state-disabled { background-color: #626262 }
.new-video-section .vod-area .player .stepBar.ui-state-disabled > span { background-color: #626262; }
.new-video-section .vod-area .player .stepDot { position:absolute;left:0;bottom:-9px;display: flex;flex-flow: row;justify-content: space-between; padding: 0 0.55em;width: 100%; }
.new-video-section .vod-area .player .stepDot > i {  border-left: 2px solid #aaa;height: 27px; }

.new-video-section .vod-area .viewer { z-index:2;position: absolute;right: 0.2em;top:2em; display: flex; flex-flow: column wrap;width:4.5em; }
.new-video-section .vod-area .viewer button { display:flex; flex-flow:row wrap;justify-content: center; align-items:center;padding: .4em .3em .2em .5em; }
.new-video-section .vod-area .viewer .zoom { border-radius: 5px 5px 0 0; }
.new-video-section .vod-area .viewer .zoom.in { border-bottom: none; }
.new-video-section .vod-area .viewer .zoom.init { border-bottom: none;border-radius:0; }
.new-video-section .vod-area .viewer .zoom.out { border-radius: 0 0 5px 5px; }
.new-video-section .vod-area .viewer button.origin { margin-top: .5em;  }
.new-video-section .vod-area .viewer .downBtn { margin-top: .5em; }
.new-video-section .vod-area .viewer .list { height: 0;overflow: hidden; }
.new-video-section .vod-area .viewer .list.show { height: auto; }
.new-video-section .vod-area .viewer .list li > button { width:100%;border-radius: 0; }
.new-video-section .vod-area .viewer .list li > button { border-top:none; }
.new-video-section .vod-area .viewer .list li:last-child > button { border-radius: 0 0 5px 5px ; }
.new-video-section .vod-area .viewer .list button > i:before{ content: "\f0f6";}
.new-video-section .vod-area .viewer .list button > i.image:before,
.new-video-section .vod-area .viewer .list button > i.jpg:before,
.new-video-section .vod-area .viewer .list button > i.gif:before
{content: "\f1c5";}

#download-confirm { display: none;padding: .8em 2em; }
#download-confirm .message { padding:.5em 0;font-size: 16px;font-weight: bold;text-align: center; }
#download-confirm .list { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; }
#download-confirm .list li { padding: 0.5em 0.2em; }
#download-confirm .list button { display: flex;flex-flow: column wrap;justify-content: center;align-items: center;padding:.4em;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;border-radius: 5px; }
#download-confirm .list button:hover { background-color: #eee; }
#download-confirm .list button .label{ padding:.2em 0 ;font-weight: 700;font-size: 14px; }
#download-confirm .list button .label > i { padding:0 .3em;font-weight: 400; }
#download-confirm .list button .size { padding:.2em 0;font-weight: 700;font-size: 13px; }
#download-confirm .list button .size.red { color: #ca1010 }
#download-confirm .list button .size.yellow { color: #e9b523 }
.closeBtn { padding: 0.4em 1em;background: #016cbf;color: #fff;border-radius: 5px; }

.new-video-section .vod-area .viewZone { z-index:0;position:relative;flex-grow: 1;flex-shrink: 1; width: 100%;text-align: center;}
.new-video-section .vod-area .viewZone  .iv-snap-view { top:initial;bottom: -900px; }


@media(max-width:768px) {
    /* 위성영상 반응형 210628 */
    .new-search-section .title { width: calc( 100% - 10em );font-size: .9em; }
    .new-search-section .label {  padding: 0 0.5em;font-size: .9em; }
    .new-video-section select, .new-video-section button, .searchBox .dateTime .datePicker { font-size: 0.9em; }
    .dateTime .datePicker { width: 40%; }
    .new-video-section select { padding-bottom: .1em; }
    .searchBox button { padding: 0.3em 0.4em; }
    .searchBox .dateTime { flex-basis: 100%; }
    .searchBox > div.conf { flex-basis: 100%;justify-content: flex-end; }
    .searchBox .condition { flex-basis:100%;justify-content: space-between; }
    .searchBox .condition > div { flex-direction: column;align-items: flex-start;width: 25%;padding: .2em; }
    .searchBox .condition > div select { width: 100%; }

    .new-video-section .vod-area .player { left:0; top:auto;bottom: 0; width: 100%; padding: 0.2em; }
    .new-video-section .vod-area .viewer { top:1em;width: 2em;}
    .new-video-section .vod-area .viewer button { padding: 0.4em .5em; }
    .new-video-section .vod-area .viewer button .txt { display: none; }
    .new-video-section .vod-area .player .stepDot { bottom: -7px; }
    .new-video-section .vod-area .player .stepDot > i { height: 20px; }

    .amaran-wrapper-inner .amaran.default { width: 96%;}
    .amaran-wrapper-inner .amaran.default .default-message { width: calc( 100% - 45px );}
    .amaran-wrapper-inner .amaran.default .default-message > span { line-height: 2em; }
    
}

@media(max-width:568px) {
    .searchBox .condition > div { width: 50%; }

    .searchBox .dateTime .datePicker { flex-grow: 1;width: auto; }

    .new-video-section .vod-area .player { justify-content: center; }
    .new-video-section .vod-area .player button { font-size: 0.9em; }
    .new-video-section .vod-area .player .sliderWrap { flex-basis: 100%; }
    .new-video-section .vod-area .player .sliderWrap .txtTime {  font-size: 0.9em; }
}

/* #위성영상 210906 반영예정 */




/*#################################################################[박유진] 2022-07-20수정 ######*/

/*천리안위성 2A호 > GK2A Sample Data*/
.sub2-3-1 .table-style th:first-child,
.sub2-3-1 .table-style td {vertical-align: middle;}
@media(max-width:768px) {

	.table-style{min-width:1200px;}
    .download-section .btn-download{position:static;}
    .tab.tab-5 > li + li + li + li > a {
	    left: calc(50% - 1px);
	    top: 56px;
	}
    .tab.tab-5 > li > a  {width:50%;}
}

/*자료실 > 사용자 가이드 > xRIT 형식 정의서*/
.download-section .box .box_set{
	display:flex;
	align-items: center;
    justify-content: space-between;
    width: 100%;
}

.download-section .text{
	width:50%;
	word-break: keep-all;
}

@media(max-width:768px) {
    .download-section .btn-download{ 
	    position:static; 
	    margin-top:10px;
    	width:100%;
    }
    .download-section .box .box_set {
	    flex-direction: column-reverse;
	    align-items: flex-start;
    }
    .download-section .btn-download .btn{ width:100%; }
    .sub-title,.download-section .box{margin:0;}
    .download-section .text {margin-top:30px;}
    #content .description{margin-bottom:50px;}
    .download-section .text{width:100%;}
}

/*자료실 > 기상위성교실 > 위성영상분석 > 위성영상 분석방법 > 종관규모 기상현상*/
.tab.tab-5 > li + li + li > a{ font-size : 1.25em;}
.dl-list dd .text-cont-box{ display:flex;}

@media(max-width:768px){	
	.dl-list dd .img-box { flex-direction: column;}
}


/*관측 스케줄*/
.table-mobile{display:none;}
.table-mobile .time{padding-left:12px; padding-bottom:10px;}

@media(max-width:768px) {
	
	.desk-table{display:none;}
    #content .mb-3 {margin-bottom:3px;}
    .table-desk{display:none;}
    .table-mobile{display:block;}
    .table-mobile tr td {font-size:15px;}
}

/*기관소개 > 비전·임무*/
@media(max-width:768px) {
    
    .img-vision{
    	height:200px; 
    	margin:0; 
    	margin-bottom:20px;
    }
    #visionImg{
	    width: 100%;
	    height: 220px;
	    background-size: contain;
	    background-position: center;
    }
    
    .goal-area:before{
    	width:100%;
    	right:0;
    	left:auto;
    	top:26px;
    	border:none;
    	border-top:1px solid #b8b8b8;
    	border-radius:0;
    }
    .goal-area .goal-list li{
    	width:100%;
    	margin-left:0;
    	margin-top:10px;
    }
    .work-list li {
    	width:calc((100% / 2) - 20px);
    	height:346px;
    	padding:30px 10px;
    }

}


/*위성영상 > 특별관측*/

.input_180w{width:180px; height:29px;}
.select-style2 .input_140w{width:140px; height:29px;}
.inner-btns {display:inline-block;}

@media(max-width:768px){

	body{min-width:auto !important;}
	
	.video-section .search-area{ width: 100%;}
	.select-style2{ width: 100%; height:50px;}
	.select-style2 select,
	input_180w,
	.select-style2 .input_140w {height:34px;}
	.search-area .datePicker{margin-top:20px;}
	
	.controls{margin-top:20px;}
	.controls .btn-group{float:left;}

	.video-section .vod-area{margin-left:0;}
	.ui-datepicker {width:100%;}	
}

@media(max-width:768px){
	.btn_control_02{margin-left:0;}
}

@media(max-width:390px){
	.btn-ico-minus,
	.btn-ico-plus,
	.btn-ico-first,
	.btn-ico-prev,
	.btn-ico-play,
	.btn-ico-forward,
	.btn-ico-end { min-width:28px !important;}
}


/* 자료실 테이블(위성관련동향,보고서,기술노트) */

@media(max-width:768px){
	.resp_table{width:100%; overflow:scroll;}
	.tb { width:100%; min-width:1100px; }
	.tb.list thead th:not(#thTitle),
	.tb.list tbody td:not(.left){ display:table-cell; }
	#thTitle{width:auto;}
	
	#colNo{ width:8%;}
	#colTitle { width: 40%;}
	#colWriter{ width:10%;}
	#colRegdt{ width:20%;}
	#colHit{ width:10%; }
	#colAtch{ width:8%; }
	
	.tb.list tbody td{height:52px;}
	
	/* 번호,제목만 표시 */
	/*#search-data tr td:nth-last-child(-n+4),*/
	#listComponent thead tr th:nth-last-child(-n+4),
	#listComponent colgroup col:nth-last-child(-n+4) {display:none;}
	.tb {min-width:auto;}
	
	
	.search-box{float: none; clear:both;}
	.search-box .select-style{
		border-right:1px solid #838383; 
		width:30%; 
		margin-bottom:8px;
	}	
	.board-util .all-tx{ margin-bottom:8px;}
	
}

@media(max-width:382px){
	.mb-8{
		margin-bottom:8px;
	}
	
	.search-text{width:100%;}
}


/* 자료실 테이블(연구논문,학술발표,특허)  */

@media(max-width:768px){
	
	.resp-input{
		clear:both; 
		display:block;
		width:100%;
	}
	.search-box .resp-input .input{ width:calc(100% - 36px);}
	
    #col71 {
        width: 8%;
    }

    #colauto {
        width: auto;
    }

    #col97 {
        width: 10%;
    }

    #col130 {
        width: 15%;
    }

    #col110 {
        width: 15%;
    }

    #col150 {
        width: 15%;
    }

    #col61 {
        width: 15%;
    }
    
    /* 번호,제목만 표시 */
	/*#search-data tr td:not(:nth-child(-n+2)),*/
	#content .resp_table thead tr th:not(:nth-child(-n+2)),
	.resp_table colgroup col:not(:nth-child(-n+2)) {
	/* 240104 모두 표시 
	display:none;
	*/
	}
	.tb {min-width:auto;}
     
}

/* 자료실 > 품질현황*/
@media(max-width:768px){
	
	.report-section{
		display:flex;
		flex-direction:column-reverse;
	}
	
	.search-area{width:100%;}
	.report-section .data-area {margin-left:0;}
}

/* 알림 > 위성운영 > 방송스케줄*/
#planText{
	border:1px solid #b9b9b9; 
	border-top: 0px; 
	min-height: 500px; 
	padding: 5px; 
	overflow-x: auto; 
	line-height: 1.4em;
}

.search-area #searchDate,
.search-area #searchBtn {display:none;}

.search-area #searchBtn { width: 73px; height: 30px;}

@media(max-width:768px){
	
	.video-section{
		display:flex;
		flex-direction:column;
	}
	
	.resp_wrap{ margin-top:16px;}
	.search-area .datePicker{display:none;}
	
	.search-area #searchDate,
	.search-area #searchBtn {display:block;}
	.search-area #searchDate {width:100%;}
	.search-area #searchBtn{
		width: 100%; 
		height: 44px;
		margin-top:20px;
		border:none;
		border-radius:5px;
		color:#ffffff;
		background-color:#016cbf;
	}
	
	.video-section .ui-datepicker{ width: 80%; margin-top:16px;}
}

/* 관측스케줄 > 일별 관측 스케줄 */
.float{
	display: flex;
    align-items: center;
}
#searchBtn { width: 73px; height: 30px; }
.select-wrap {display:inline-block;}

@media(max-width:768px){	
	#content .tb #search-data tr .appear {display:table-cell;}
	#content .w-scroll{ min-width:1200px;}
	.float{
		align-items: flex-start;
	    flex-direction: column;
	}
	.float div { margin-bottom:12px;}
	.float #searchBtn { 
		align-self: flex-end; 
		margin-top:12px;
		margin-left:0;
		width:100%;
		height:38px;
	}
	
	.ui-datepicker{width:60%;}
}

@media(max-width:480px){
	.select-wrap {display:block; margin-top:8px;}
	
	.ui-datepicker{width:80%;}
	#ui-datepicker-div {left:20px;}
}


/* ------------------------------------------------------------------------------------------------ */

/* 2022.08.11 오세인 수정 */

.card-body {
  padding: 1.25rem;
  flex: 1 1 auto;
  min-height: 1px;
}

.card-body.sicIntro {
  min-height: 480px !important;
}

.tab-content#tab-content .tab-pane .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  border: 0 solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
.tab-content#tab-content .tab-pane .card .card-body {
  margin-top: 0.5rem;
  box-sizing: border-box;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.13), 0 1px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  background-color: #f8f9fa;
}
.tab-content#tab-content .tab-pane .sub-title {
  margin-top: 1.5rem;
}
.tab-content#tab-content .tab-pane ul {
  padding-left: 40px;
  margin-bottom: 16px;
}
.tab-content#tab-content .tab-pane ul li {
  list-style: disc !important;
}
.tab-content#tab-content .tab-pane ul li:nth-child(even) {
  margin-top: 0.5rem;
}
.tab-content#tab-content .tab-pane ul li .row {
  margin-left: -40px;
}
.tab-content#tab-content .tab-pane .row.nowrap {
  flex-wrap: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 0.5rem;
  justify-content: center;
  box-sizing: border-box;
  width: 90%;
  margin: 0.5rem auto;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:first-child {
  width: 30%;
  margin-right: 1rem;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:first-child img {
  display: block;
  width: 100%;
  height: 200px;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2) {
  max-width: 70%;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2) table {
  width: 100%;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2) table thead th {
  text-align: center;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2) table tbody th {
  width: 30%;
  text-align: right;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2).d-flex table tbody th {
  text-align: left;
}
.tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2).d-flex table tbody td {
  text-align: center;
}
.tab-content#tab-content .tab-pane .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.5rem auto;
}
.tab-content#tab-content .tab-pane .row table.table-sm {
  border: 1px solid #dde2e6;
  margin-bottom: 1rem;
  background-color: transparent;
  width: 80%;
}
.tab-content#tab-content .tab-pane .row table.table-sm thead {
  vertical-align: bottom;
}
.tab-content#tab-content .tab-pane .row table.table-sm thead th {
  background-color: rgb(230, 230, 230);
  border: 1px solid #000;
  font-weight: 700;
  color: rgb(33, 37, 41);
  padding: 0.5rem;
}
.tab-content#tab-content .tab-pane .row table.table-sm tbody tr {
  width: 100%;
}
.tab-content#tab-content .tab-pane .row table.table-sm tbody tr th {
  padding: 0.5rem;
  vertical-align: top;
  background-color: rgb(230, 230, 230);
  border: 1px solid #000;
  text-align: left;
  font-weight: 600; /* width: 25% !important; */
  padding-left: 10px;
}
.tab-content#tab-content .tab-pane .row table.table-sm tbody tr td { /* width: 75%; */
  vertical-align: middle;
  padding: 0.5rem;
  border: 1px solid #000;
}
.tab-content#tab-content .tab-pane .row .img-fluid {
  margin-bottom: 0.5rem;
  max-width: 100%;
  height: auto;
}

/* 2022-08-18 부트스트랩 변환 (박유진) */


/* ################################# 박스 외형*/
.daily { margin-top: 20px;}

.daily .card-outline { 
    border-top: 3px solid #007bff;
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
    width: 100%;
}

.card-deck{justify-content: space-between;}

.daily .left{ width: calc(60% - 1rem);}
.daily .right{width: calc(40% - 1rem);}

@media (min-width: 576px) {
    .card-deck {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
/*       margin-right: -7.5px; */
/*       margin-left: -7.5px; */
    }

    .card-deck .card {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 0%;
                flex: 1 0 0%;
        margin-right: 7.5px;
        margin-bottom: 0;
        margin-left: 7.5px;
      }
  }

  .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.75rem 1.25rem;
    position: relative;
}

card-header:first-child {
    border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    -webkit-border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    -moz-border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    -ms-border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    -o-border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
} 


/* ################################# 박스 제목 */
.daily  .inner_row{
    display: flex;
    justify-content: space-between;
}

.inner_row .inner_left .card-title { 
    font-size: 18px;
    width: 100%;
    min-width: 70px;
}
.inner_row .inner_left .title_point{ 
    font-size: 1.4rem; 
    margin-right: 0.6rem;
    line-height: 1.8;
}

.inner_row .inner_left  #title-sea {margin-left: 1rem;}

.inner_row .inner_left,
.inner_row .inner_right { 
    display: flex;
    flex-wrap: wrap;
}

.inner_row .inner_right {justify-content: flex-end;}
.inner_row .inner_left { flex-wrap: nowrap;}

.inner_row .inner_right .custom-select { margin-right: 0.6rem;}

.btn-wrap{ 
    display: flex; 
    flex-wrap: nowrap;
}

.btn_date input,
.inner_right  .custom-select{ 
    height: 28px; 
    width: 120px;
    vertical-align: bottom;
    background: url("../images/common/select_arrow.png") no-repeat 95% 50%;
}
.btn_date .cal_icon { vertical-align: middle;}

.arrow_wrap{ margin-left: 1rem;}

/* ################################# 버튼 모음*/
.btn_square , .btn_arrow { 
    width: 28px;
    height: 28px;
    margin: 0 !important;
}


.style_btn{
    flex-grow: 1;
    height: 28px;
    color:#ffffff;
    background-color: #17a2b8;
    border-color: #10707f;
    margin-left: 0.8rem;
    font-size: 1.4rem;
    line-break: auto;
    border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    -moz-border-radius: 0.2rem;
    -ms-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
}

.style_btn.disabled{
    background-color: #67C1D0;
    cursor: default;
}

.style_btn img{
    vertical-align: middle;
}

.style_btn:not(.disabled):hover{
    color:#ffffff;
    background-color: #10707f;
}

/* ################################# 크기*/

.ml-0 {margin-left: 0 !important;}

.mr-1 {margin-right: 1rem;}

.pb-10{padding-bottom: 1rem;}

.w-100{ width: 100%;}

.w-70 { width: 70%;}

.w-30 { width: 30%;}

.w-33 { width: 33% !important;}

.padding-0 { padding: 0 !important;}

/* #################################  개별설정 */

.top_line{ border-top: 1px solid #dbdbdb;}

.border_b {border-bottom: 0;}

.custom-select {padding-left: 1rem;}

.flex_right{ justify-content: flex-end !important;}

.card-body {
     position: relative;
     height: auto;
     min-height: 600px;
}
.card-body .small {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
}

.card-body #canvas-chart{
    width: 100%;
    min-height: 540px;
    margin-bottom: 50px;
}

/* 해빙면적전망*/
.daily .green-border { border-top: 3px solid #17a2b8;}
.card-body #img-seaice{
	width: 100%;
	height: max-content;
}
.card-body #img-sat{
	width: 100%;
	height: max-content;
}

/* 해빙거칠기*/
.card-body #img-sicRgh{
	width: 100%;
	height: max-content;
}

/*눈덮힘 계철 예측 활용*/
.card-body #img-arctic{
	width: 100%;
	height: max-content;
	margin-left: 10%;
}
.card-body #sc-img-arctic{
	width: 60%;
	height: max-content;
	margin-left: 10%;
}
.card-body #img-regional, .card-body #sc-img-regional{
	width: 100%;
	height: max-content;
}
.snowCover_info .title{
    float: none;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.4rem;
}
.snowCover_info .title img {
    object-fit: contain; 
    margin-right: 1rem;
    margin-top: 0.4rem;
}
.snowCover_info .title p {
    font-size: 1.8rem; 
    font-weight: 500;
}

.snowCover_info .text { 
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.predict_cont{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.predict_box{
    width: 50%;
    padding-bottom: 2.5rem;
}

.predict_box .card-body { min-height: 300px;}

/* 해빙소개 */
.about .card-body { min-height: auto;}
.about .card-body .small {
    position: static;
}


/* 반응형 */

@media(max-width:768px){	

    /* ################################# 박스 외형*/
    .card-deck { 
        flex-direction: column;
        width: 100%;
        margin: 0;
    }
    /* 2023-12-19수정 */
    .daily .card-outline {
        width: 100% !important;
        margin-bottom: 2.5rem;
    }

    /* ################################# 버튼 모음*/
    .inner_right .btn-wrap .style_btn { 
        height: auto;
    }

    /* #################################  개별설정 */
    /* 일별 눈덮힘 변화*/
    .tablet_style {
        margin: 0;
        padding-bottom: 1rem;
    }

    /* 눈덮힘 계절 예측 활용 */
    .predict_box { padding-bottom: 0;}
    
    /* 2023-12-19수정 */
    .tab-content#tab-content .tab-pane .row.nowrap{
    	flex-direction: column;
    	gap:20px;
    }
    .tab-content#tab-content .tab-pane .row.nowrap > div:first-child img{
    	width:100%;
    }
    .tab-content#tab-content .tab-pane .row.nowrap > div:first-child{
    	width:max-content;
    }
    .tab-content#tab-content .tab-pane .row.nowrap > div:nth-child(2){
    	max-width:100%;
    }
    .inner-menu ul li.active a, .inner-menu ul li:hover a{
    	display: flex;
   	 	justify-content: center;
    	align-items: center;
    	min-height: 100px;
    }
    .inner-menu ul li a {
	    padding: 20px 0;
	    font-size: 12px;
	}

}

@media(max-width:480px){

    /* ################################# 박스 외형*/
    .daily .inner_row{ flex-direction: column;}
    .w-30, .w-70 { width: 100%;}

    .inner_right div { padding: 1rem 0;}

    .inner_right .btn-wrap,
    .inner_right .btn_date,
    .inner_right .arrow_wrap { width: 100%;}

    .inner_row .inner_right {justify-content: flex-start;}

    .inner_right .btn-wrap {flex-wrap: wrap;}

    .btn_date input {
        width: calc(100% - 32px);
    }

    /* ################################# 버튼 모음*/
    .inner_right .btn-wrap .style_btn { 
        margin: 0.4rem 0;
        width: 100%;
        height: 40px;
    }
    .inner_right .arrow_wrap .style_btn {
        width: 48%;
        height: 40px;
    }

    /* ################################# 박스 제목 */
    .inner_row .inner_left .card-title { margin: 1.2rem 0;}
}



/* ===============위성자료================================================== */

.data_service_container{
    margin-bottom: 20px;
    width: 100%;
}
.dS_layOut{
    width: 100%;
    height: max-content;
}
.dS_box_group{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    gap: 20px;
}
.dS_box_group .dS_box{
    background-color: #DAEDFA;
    border-radius: 5px;
    transition: 0.2s;
    padding: 20px;
    position: relative;
    min-height: 270px;
}
.dS_box_group .dS_box:hover{
    background-image: linear-gradient(90deg,#7BB1DA, #D7F9FF);
    transition: 0.2s;
    border-radius: 5px 5px 70px 5px;
}
.dS_box_group .dS_box:hover .icon_arrow_box{
    animation: arrowMove 0.3s linear forwards;
}
@keyframes arrowMove{
    0%{
        transform: translate(0px);
    }
    50%{
        transform: translate(10px);
    }
    100%{
        transform: translate(0px);
    }
}
.dS_box_group .dS_box .icon_box{
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
}
.dS_box_group .dS_box .icon_box img{
    width: 100%;
    height: 100%;
}
/* 25.02.13 수정 */
.dS_box_group .dS_box .text_group{
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-bottom: 45px;
}
.dS_box_group .dS_box .text_group .dS_title{
    font-size: 20px;
    color: #262626;
    font-weight: bold;
}
.dS_box_group .dS_box .text_group .dS_content_text{
    font-size: 15px;
    color: #353535;
    line-height: 22px;
}
.dS_box_group .dS_box .icon_arrow_box{
    width: max-content;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.dS_box_group .dS_box .icon_arrow_box img{
    width: 30px;
    height: 11px;
}

@media(max-width:1100px){
    .dS_box_group{
        grid-template-columns: repeat(1,1fr);
    }
    .data_service_container{
        padding: 20px;
    }
    
}


/* 폭염 및 가뭄분석 - 시계열분석 차트표현을 위한 css추가 */
.jqplot-yaxis-label{ left:10px !important;}
.jqplot-table-legend { top: 0px !important;}
.jqplot-table-legend tbody {float: right;}
.jqplot-table-legend-swatch{padding-right: 1px;}
.jqplot-table-legend .jqplot-series-hidden{ text-decoration:none; }
.jqplot-table-legend-swatch-outline{padding: 0px;}

/* 20250310 알고리즘 문서 css 추가 시작*/
.atbd_table{
	display: table;
	border-collapse: collapse;
	width: 100%;
}

.atbd_title{
	display: table-caption;
	text-align: left;
	font-weight:bold;
	font-size: larger;
	margin: 10px;
	padding: 30px 0 10px;
}

.atbd_head{
	display: table-row;
	font-weight: bold;
	text-align: center;
	border-top: solid;
}

.atbd_head .atbd_cell:nth-child(2){
	width:50px;
}

.atbd_head .atbd_cell:nth-child(3){
	width:120px;
}

.atbd_head .atbd_cell:nth-child(4){
	width:80px;
}

.atbd_row{
	display: table-row;
}

.atbd_cell{
	display: table-cell;
	border-bottom: 1px solid;
	padding: 5px 10px;
	text-align: center;
	vertical-align: middle;
}

.atbd_pdf{
	background: #ee4231;
	display: inline-block;
}

.atbd_pdf:hover{
	opacity: 0.8;
}

.atbd_pdf, .atbd_pdf:hover{
	width: 50px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-size: 14px;
	border: 0;
}
/* 20250310 알고리즘 문서 css 추가 끝*/