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

/* reset element */
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,button,
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;
}
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:inherit;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, 
menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

/* align, border, input */
img, fieldset, a {border:none;}
img {vertical-align:middle;}
table, thead, tbody, tfoot {border-collapse:collapse; border-spacing:0; border:0 none;}
ul, ol, li {list-style:none;}
address, em {font-style:normal;}
input, select, textarea, button, form img, label {vertical-align:middle;}
button, input[type="submit"] {cursor:pointer;}
input:focus, button:focus, select:focus, textarea:focus {outline:0;}
button::-moz-focus-inner {border:0 none; padding:0;}

/* anchor */
a {text-decoration:none;}
a:link {color:#222;}
a:visited {color:#222;}
a:hover {color:#222;}
a:focus {color:#222;}

/* common */
* {-webkit-text-size-adjust:none; text-shadow:0 0 0 transparent;}
html, body {/* height:100%; */}
body {font-family:'Noto Sans KR',sans-serif; font-style:normal; font-weight:400; font-size:15px; letter-spacing:-1px; color:#222; white-space:normal; word-wrap:break-word; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
input, select, textarea {box-sizing:border-box; border-radius:0; padding:0; font-size:15px; font-family:'Noto Sans KR',sans-serif; font-style:normal; font-weight:400; color:#666; letter-spacing:-1px; -webkit-appearance:none; vertical-align:middle;}
/* img {width:100%;} */
p {line-height:1.4;}
.dp_none {display:none;}
.hidden, legend {font-size:0; width:0 !important; height:0 !important; line-height:0; text-indent:-9999px; overflow:hidden; visibility:hidden; position:absolute; top:0; left:0;}
caption {font-size:0; width:0; height:0; line-height:0; text-indent:-9999px; overflow:hidden; visibility:hidden;}/* wac 인증심사 받을 경우 visibility:hidden하지 말것. */
.clear:after {content:''; display:block; clear:both;}


/* input button design */
input:-ms-input-placeholder {color:#bbb;}
input::-webkit-input-placeholder {color:#bbb;}
input::-moz-placeholder {color:#bbb;} 
input[type=checkbox] {overflow:hidden; position:absolute; left:-1000px; width:1px; height:1px;}
input[type=checkbox] + label {display:inline-block; height:13px; padding-left:24px !important; margin-right:40px; background:url('../../../images/front/kmisys/bg_checkBox_off.png') no-repeat 0 0; background-size:13px; cursor:pointer; vertical-align:middle; font-size:15px; line-height:13px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
input[type=checkbox]:checked + label {background:url('../../../images/front/kmisys/bg_checkBox_on.png') no-repeat; background-size:13px;}


/* radio button design */
input[type=radio] {overflow:hidden; position:absolute; left:-1000px; width:1px; height:1px;}
input[type=radio] + label {display:inline-block; height:17px; padding-left:25px !important; margin-right:48px; background:url('../../../images/front/kmisys/bg_radioBox_off.png') no-repeat 0 0; background-size:17px; cursor:pointer; vertical-align:middle; font-size:15px; line-height:15px;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}
input[type=radio]:checked + label {background:url('../../../images/front/kmisys/bg_radioBox_on.png') no-repeat 0 0; background-size:17px;}


input:-ms-input-placeholder {color:#939598;}
input::-webkit-input-placeholder {color:#939598;}
input::-moz-placeholder {color:#939598;}
textarea:-ms-input-placeholder {color:#939598;}
textarea::-webkit-input-placeholder {color:#939598;}
textarea::-moz-placeholder {color:#939598;}


/* input_style */
input[type=text] {-webkit-appearance:none; box-sizing:border-box; width:100%; height:44px; padding:0 10px; border:1px solid #ddd; line-height:44px; font-size:15px;}
input[type=password] {-webkit-appearance:none; box-sizing:border-box; width:100%; height:44px; padding:0 10px; border:1px solid #ddd; line-height:44px; font-size:15px;}
input[type=tel] {-webkit-appearance:none; box-sizing:border-box; width:100%; height:44px; padding:0 10px; border:1px solid #ddd; line-height:44px; font-size:15px;}
input[type=number] {-webkit-appearance:none; box-sizing:border-box; width:100%; height:44px; padding:0 10px; border:1px solid #ddd; line-height:44px; font-size:15px;}
input[type=email] {-webkit-appearance:none; box-sizing:border-box; width:100%; height:44px; padding:0 10px; border:1px solid #ddd; line-height:44px; font-size:15px;}
textarea {width:100%; -webkit-appearance:none; box-sizing:border-box; padding:10px; border:1px solid #cfd4d9; font-size:15px;}
select {-moz-appearance:none; -webkit-appearance:none; box-sizing:border-box; width:100%; height:44px; padding:0 10px; border:1px solid #ddd; line-height:44px; font-size:15px; background:#fff url('../../../images/front/kmisys/bg_select.png') no-repeat; background-position:calc(100% - 12px) 50%; background-size:12px;}
select::-ms-expand {display:none;}


/* button-style */
.btn_area {text-align:center; font-size:0;}
.btn_style01 {display:inline-block; width:100%; height:50px; padding:0 20px; background:#ffa200; text-align:center; font-size:17px; line-height:50px; color:#fff !important; box-sizing:border-box;}


/* 레이어 팝업 */
.pop_wrap {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:400; display:none;}
.common_pop {position:absolute;top:80px;left:30px; width:calc(100% - 60px); background:#fff; box-sizing:border-box;}
.pop_con {width:100%; box-sizing:border-box; padding-top:27px;}
.btn_closePop a {position:absolute;top:30px;right:30px; width:35px; height:35px; background:url('../../../images/front/kmisys/btn_exit.jpg') no-repeat; background-size:cover; text-indent:-9999px;}

.common_pop.full {position:absolute;top:0;left:0; width:100%; height:100%; background:#d57400;}
.common_pop.full .pop_con {padding-top:0;}
.common_pop.full .pop_con img {width:100%;}

/* 20221215 수정 */
.popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; z-index: 999;}
.popup.active {display: block;}
.popup.window {position: static; transform: translate(0, 0); display: block; width: block;}

#layerSurveyGuide {width: 500px; font-family: 'ONE Mobile';}
#layerSurveyGuide .pop-cont .btn-close {position: absolute; width: 30px; height: 30px; text-indent: -9999px; background: url('../../../images/front/kmisys/btn_close.png') no-repeat center; background-size: 100%; border: 0; right: 20px; top: 20px;}
#layerSurveyGuide .headline p {text-indent: -9999px; height: 213px; background: url('../../../images/front/kmisys/popup_guide_headline.png') no-repeat center top; background-size: 100%;}
#layerSurveyGuide .cont {padding: 0 24px 0; background-color: #deebff; position: relative;}
#layerSurveyGuide .cont::after {position: absolute; content: ""; width: 100%; height: 174px; background: url('../../../images/front/kmisys/popup_deco_letter.png') no-repeat center bottom; background-size: 100%; bottom: 0; left: 0;}
#layerSurveyGuide .cont .inner {padding: 30px 20px 110px; position: relative; background-color: #ffffff; border-radius: 15px;}
#layerSurveyGuide .cont .inner p {text-align: center; font-size: 16px; line-height: 1.5;}
#layerSurveyGuide .cont .inner p + p {margin-top: 6px;}
#layerSurveyGuide .cont .inner p strong {font-weight: 700;}
#layerSurveyGuide .period {margin-top: 25px;}
#layerSurveyGuide .period dl {overflow: hidden;}
#layerSurveyGuide .period dl > * {float: left; line-height: 1.556; font-size: 18px;}
#layerSurveyGuide .period dl dt {font-weight: 700; color: #186aea; width: 130px; padding-left: 10px;}
#layerSurveyGuide .btn-submit {width: 200px; line-height: 50px; height: 50px; border-radius: 25px; text-align: center; color: #ffffff; font-weight: 700; font-size: 18px; margin: 30px auto 0; border: 0; background-color: #186aea; display: block; position: relative; z-index: 1;}

#layerSurvey {font-family: 'ONE Mobile';}
#layerSurvey .pop-cont {display: flex; flex-direction: column;}
#layerSurvey .headline {flex: none;}
#layerSurvey .headline p {text-indent: -9999px; height: 345px; background: url('../../../images/front/kmisys/popup_survey_headline.png') no-repeat center top; background-size: auto 345px;}
#layerSurvey .cont {padding: 0 35px 177px; position: relative; background: #deebff url('../../../images/front/kmisys/bg_letter.png') no-repeat center bottom; background-size: 100%;}
#layerSurvey .cont .inner {position: relative; border-radius: 15px; overflow: auto; box-sizing: border-box; position: relative; padding: 70px 45px 0}
#layerSurvey .cont .inner::before {content: ""; width: calc(100% - 70px); height: calc(100% - 641px); background-color: #ffffff; border-top-left-radius: 15px; border-top-right-radius: 15px; position: fixed; top: 345px; left: 50%; transform: translateX(-50%);}
#layerSurvey .survey {position: relative; z-index: 1;}
#layerSurvey .survey + .survey {margin-top: 70px;}
#layerSurvey .survey .txt-questions {font-weight: 700; font-size: 18px; font-weight: 700;}
#layerSurvey .survey .answer {display: flex; flex-wrap: wrap; gap: 20px 0; margin-top: 25px; padding: 0 25px;}
#layerSurvey .survey .answer .item {width: 20%; flex: none;}
#layerSurvey .survey .answer .item input[type='radio'] {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
#layerSurvey .survey .answer .item input[type='radio'] + label {position: relative; min-width: 16px; min-height: 16px; width: 100%; padding-left: 0 !important; background: none; height: auto; display: flex; align-items: center;}
#layerSurvey .survey .answer .item input[type='radio'] + label::before {content: ""; width: 16px; height: 16px; background: url('../../../images/front/kmisys/ico_radio_off.png') no-repeat center; background-size: 100%; left: 0; top: 0; position: absolute;}
#layerSurvey .survey .answer .item input[type='radio']:checked + label::before {background: url('../../../images/front/kmisys/ico_radio_on.png') no-repeat center; background-size: 100%;}
#layerSurvey .survey .answer .item input[type='radio'] + label p {font-size: 14px; line-height: 16px; padding-left: 24px;}
#layerSurvey .survey .answer .item input[type='radio'] + label input[type="text"] {flex: 1 0; height: 14px; border: 0; padding: 0 5px; line-height: 16px; font-size: 14px;}
#layerSurvey .btn-submit {width: 255px; line-height: 62px; height: 62px; border-radius: 31px; text-align: center; color: #ffffff; font-weight: 700; font-size: 24px; margin: 100px auto 0; border: 0; background-color: #186aea; display: block; position: relative; z-index: 1;}
/* // 20221215 수정 */

/* 접근성 패널 */
ul#skipnavi {position:relative; left:0px; top:0px; width:100%; z-index:999; line-height:0; font-size:0;}
ul#skipnavi li a {position:absolute; top:-500px; text-indent:-9999px; line-height:1; font-size:12px;}
ul#skipnavi li a:hover, 
ul#skipnavi li a:focus, 
ul#skipnavi li a:active {display:block; position:absolute;left:0px;top:0px; width:100%; height:20px; padding:4px 0 0 0; background:#f2f2f2; font-size:12px; font-weight:bold; text-align:center; text-indent:0px; line-height:1; z-index:1000;}


/* header */
.gnbDim {display:none; position:absolute;top:0;left:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:90;}
#header {position:relative; overflow:hidden; width:100%; height:88px;/* height:100%; */ background:#10131b; z-index:400;} 
.headerInner {position:absolute;top:0;left:0; width:100%; height:88px; overflow:hidden; box-sizing:border-box; border-bottom:1px solid #3e4045;}
.gnbWrap {position:relative; width:1200px; height:88px; margin:0 auto;}
.headerInner h1.logo {display:inline-block; width:268px; height:53px; margin-top:19px;}
.headerInner h1.logo a {display:inline-block; width:100%; height:100%; background:url(../../../images/front/kmisys/logo.png) no-repeat; background-size:contain; text-indent:-9999px;}

#header.sub {position:relative; background:rgba(16,19,27,0.75);}
#header.sub .headerInner {border-bottom:none;}

#gnb {float:right;}/* width:817px; */
#gnb > li {position: relative; display:inline-block; float:left; line-height:88px; text-align:center;}
#gnb > li:first-child {width:165px;}
#gnb > li:first-child ul {width: 75px;}
#gnb > li:first-child ul:nth-child(even) {left: 7px;}
#gnb > li:first-child ul:nth-child(odd) {left: 83px;}

#gnb > li:nth-child(2), #gnb > li:nth-child(2) ul {width:184px;}
#gnb > li:nth-child(3), #gnb > li:nth-child(3) ul {width:138px;}
#gnb > li:nth-child(4), #gnb > li:nth-child(4) ul {width:184px;}
#gnb > li:nth-child(5), #gnb > li:nth-child(5) ul {width:145px;}
#gnb > li > a {display:inline-block; height:85px; color:#fff; font-size:18px;}
#gnb > li > a:hover {border-bottom:4px solid #ff7f0d;}

#gnb li ul {position:absolute;top:89px; box-sizing:border-box;}
#gnb li li {padding-top:12px; line-height:1em; text-align:center; box-sizing:border-box;}
#gnb li li:first-child {padding-top:27px;}
/* #gnb li:nth-child(4) ul li {text-align:left;} */
#gnb li:nth-child(4) ul li {center;}
#gnb li li a {color:#666; font-size:16px; line-height:1.3em;}
#gnb li li a:hover {color:#ff7f0d;}

#header.on {overflow:visible;}
#header.on .headerInner {background:#fff url(../../../images/front/kmisys/bg_gnb.jpg) no-repeat center 89px;} 
#header.on .headerInner h1.logo a {background:url(../../../images/front/kmisys/logo_on.png) no-repeat;}
#header.on .gnbBg {border-top:1px solid #eee;}
#header.on #gnb > li > a {color:#222; font-size:18px;}

.inquiry {position:absolute;top:88px;left:0; display:inline-block; width:384px; height:319px;}
.inquiry dl {width:100%; margin-top:50px; line-height:1; text-align:left;}
.inquiry dt {font-size:18px; margin-bottom:20px; font-weight:500;}
.inquiry dd {color:#666; font-size:16px; line-height:1.5em;}


/* common */
body {min-width:1400px;}
#wrap {}
#container {min-height:857px;}/* min-height:946px; */
.conW {width:1200px; margin:0 auto;}

/* 메인 */
.mainCon01 {padding:24px 0 100px; background:#1a3a5a url('../../../images/front/kmisys/bg_pt.jpg');}
.tblTime {margin-bottom:10px; color:#888;}
/*
.tblStyle01 {width:100%; border:2px solid #363a3f;}
.tblStyle01 th, .tblStyle01 td {border:1px solid #363a3f; text-align:center; font-weight:400;}
.tblStyle01 thead th {height:50px; color:#fff; font-size:16px;}
*/
.tblStyle01 {width:100%; border:2px solid #363a3f; font-size:17px;}
.tblStyle01 th, .tblStyle01 td {border:1px solid #363a3f; text-align:center; font-weight:400;}
.tblStyle01 thead th {height:50px; color:#fff; font-size:17px; font-weight:500;}
.tblStyle01 tbody tr:hover {background:rgba(116,126,146,0.15);}
.tblStyle01 tbody th {height:50px; font-weight:500; color:#fff;}
.tblStyle01 tbody td {height:50px; color:#f7d100; font-weight:500;}
.tblStyle01 td.output {}
.tblStyle01 td.updown {}
.tblStyle01 td.updown .up {color:#ff8519;}
.tblStyle01 td.updown .down {color:#3574e0;}
.tblStyle01 td.updown .none {color:#666666;}
.tblStyle01 td.updown .up img, .tblStyle01 td.updown .none img {margin-right:5px; vertical-align:3px;}
.tblStyle01 td.updown .up img, .tblStyle01 td.updown .down img {margin-right:5px; vertical-align:4px;}
.tblStyle01 td.pricePer {color:#f7d100;}
.tblStyle01 td.change {}
.tblAdd {margin-top:15px; color:#747e92; font-size:13px; text-align:right;}


.mainCon02 {background-color:#1a3a5a;}
.mainCon02 .conW {width:1210px;}
#slider {position:relative; width:100%; margin:0 auto;}
.scroll {position:relative; /* overflow:auto; overflow-x:hidden; */ width:100%; height:508px; clear:left;}
ul.navigation {position:absolute;top:-85px;left:0; width:100%; height:42px;}
ul.navigation li {display:inline-block; float:left; width:170px; height:100%; margin-left:2px; line-height:42px;}
ul.navigation li:first-child {margin-left:5px;}
/* ul.navigation a {display:inline-block; width:100%; height:100%; background:rgba(14,40,65,0.5); border-top-left-radius:3px; border-top-right-radius:3px; color:#5a6a7a; font-size:16px; text-align:center; box-sizing:border-box;} */
ul.navigation a {display:inline-block; width:100%; height:100%; background:rgba(14,40,65); border-top-left-radius:3px; border-top-right-radius:3px; color:#fff; font-size:16px; text-align:center; box-sizing:border-box;}
ul.navigation a:hover, ul.navigation a.selected {background:#1a3a5a; color:#fff;}
ul.navigation a:hover:before, ul.navigation a.selected:before {content:""; display:inline-block; margin-right:10px;}
ul.navigation .fish01 a:hover:before, ul.navigation .fish01 a.selected:before {width:25px; height:19px; background:url('../../../images/front/kmisys/ico_fish01.png') no-repeat; vertical-align:-3px;}
ul.navigation .fish02 a:hover:before, ul.navigation .fish02 a.selected:before {width:20px; height:20px; background:url('../../../images/front/kmisys/ico_fish02.png') no-repeat; vertical-align:-4px;}
ul.navigation .fish03 a:hover:before, ul.navigation .fish03 a.selected:before {width:26px; height:26px; background:url('../../../images/front/kmisys/ico_fish03.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish04 a:hover:before, ul.navigation .fish04 a.selected:before {width:35px; height:17px; background:url('../../../images/front/kmisys/ico_fish04.png') no-repeat; vertical-align:-3px;}
ul.navigation .fish05 a:hover:before, ul.navigation .fish05 a.selected:before {width:30px; height:19px; background:url('../../../images/front/kmisys/ico_fish05.png') no-repeat; vertical-align:-4px;}
ul.navigation .fish06 a:hover:before, ul.navigation .fish06 a.selected:before {width:32px; height:16px; background:url('../../../images/front/kmisys/ico_fish06.png') no-repeat; vertical-align:-2px;}

/* 3차 어종 추가 전 아이콘 크기  20210603 최재종*/
/* ul.navigation .fish07 a:hover:before, ul.navigation .fish07 a.selected:before {width:44px; height:26px; background:url('../../../images/front/kmisys/ico_fish07.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish08 a:hover:before, ul.navigation .fish08 a.selected:before {width:38px; height:26px; background:url('../../../images/front/kmisys/ico_fish08.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish09 a:hover:before, ul.navigation .fish09 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish09.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish10 a:hover:before, ul.navigation .fish10 a.selected:before {width:33px; height:26px; background:url('../../../images/front/kmisys/ico_fish10.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish11 a:hover:before, ul.navigation .fish11 a.selected:before {width:37px; height:26px; background:url('../../../images/front/kmisys/ico_fish11.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish12 a:hover:before, ul.navigation .fish12 a.selected:before {width:32px; height:26px; background:url('../../../images/front/kmisys/ico_fish12.png') no-repeat; vertical-align:-6px;}

추가 navigation 20210526 최재종
ul.navigation .fish13 a:hover:before, ul.navigation .fish13 a.selected:before {width:74px; height:26px; background:url('../../../images/front/kmisys/ico_fish13.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish14 a:hover:before, ul.navigation .fish14 a.selected:before {width:74px; height:26px; background:url('../../../images/front/kmisys/ico_fish14.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish15 a:hover:before, ul.navigation .fish15 a.selected:before {width:74px; height:26px; background:url('../../../images/front/kmisys/ico_fish15.png')  no-repeat; vertical-align:-6px;} */

/* 3차 어종 추가 후 아이콘 크기  20210603 최재종*/
ul.navigation .fish07 a:hover:before, ul.navigation .fish07 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish07.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish08 a:hover:before, ul.navigation .fish08 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish08.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish09 a:hover:before, ul.navigation .fish09 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish09.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish10 a:hover:before, ul.navigation .fish10 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish10.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish11 a:hover:before, ul.navigation .fish11 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish11.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish12 a:hover:before, ul.navigation .fish12 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish12.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish13 a:hover:before, ul.navigation .fish13 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish13.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish14 a:hover:before, ul.navigation .fish14 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish14.png') no-repeat; vertical-align:-6px;}
ul.navigation .fish15 a:hover:before, ul.navigation .fish15 a.selected:before {width:40px; height:26px; background:url('../../../images/front/kmisys/ico_fish15.png')  no-repeat; vertical-align:-6px;}



/* 3차 어종 추가 전 텝 넓이  20210603 최재종*/
/* ul.raising {position:absolute;top:-42px;left:0; width:100%; height:42px;} */
/* ul.raising li {display:inline-block; float:left; width:239px; height:100%; margin-left:2px; line-height:42px;} */

/* 3차 어종 추가 후 텝 넓이 20210603 최재종*/
ul.raising {position:absolute;top:-42px;left:0; width:100%; height:42px;}
ul.raising li {display:inline-block; float:left; width:148px; height:100%; margin-left:2.5px; line-height:42px;}


.scrollButtons {position:absolute;top:50%; margin-top:-32px; cursor:pointer;}
.scrollButtons.left {left:-74px; display:none;}/* left:-104px; */
.scrollButtons.right {right:-74px;}/* right:-104px; */
.hide {display:none;}

.scrollContainer div.panel {width:1210px; padding:5px; box-sizing:border-box;}
.chartWrap {width:100%; height:100%; padding-top:40px;}
.leftArea {float:left; width:400px;}
.rightArea {float:right; width:790px;}
.chart {overflow:hidden; border-radius:7px; box-shadow:2px 2px 5px rgba(0,0,0,0.5); box-sizing:border-box;}
.chart.box01 {height:131px;margin-bottom:10px;}
.chart.box02 {height:272px;}
.chart.box03 {height:413px;}
.chartTitle {height:45px; background:#222; color:#ddd; font-size:17px; font-weight:500; line-height:45px; text-indent:40px;}
.chartCon {height:calc(100% - 40px); background:#fff; box-sizing:border-box;}
.chart.box01 .chartCon {padding:15px 35px 18px 35px;}
.retailPrice{display:inline-block; float:left; padding:6px 0 0 10px; font-size:26px; font-weight:700;}
.retailPrice img {margin-right:10px; vertical-align:5px;}
.retailPrice img.icoNone {margin-right:10px; vertical-align:8px;}
.retailPrice .num {font-size:34px;}
.retailPrice .nodata{font-size:17px;padding:0 0 0 15px; vertical-align:20px;}
.retailPrice .per {font-size:14px; font-weight:400;}

.whsalPrice{display:inline-block; float:left; padding:6px 0 0 10px; font-size:26px; font-weight:700;}
.whsalPrice img {margin-right:10px; vertical-align:5px;}
.whsalPrice img.icoNone {margin-right:10px; vertical-align:8px;}
.whsalPrice .num {font-size:34px;}
.whsalPrice .nodata{font-size:17px;padding:0 0 0 15px; vertical-align:20px;}
.whsalPrice .per {font-size:14px; font-weight:400;}

.icoUp {}
.icoDown {}

.perArrow {display:inline-block; float:right; width:100px; height:78px; margin-top:-7px; text-align:center; box-sizing:border-box;}
.perArrow.up {padding-top:15px; background:url('../../../images/front/kmisys/bg_perArrowUp.png') no-repeat 4px 0px;} 
.perArrow.down {padding-top:5px; background:url('../../../images/front/kmisys/bg_perArrowDown.png') no-repeat 4px 0px;} 
.perArrow.none {padding-top:20px; background:url('../../../images/front/kmisys/bg_perArrowNone.png') no-repeat 0px 20px;}
.perArrow .num {color:#fff; font-size:18px; font-weight:700; line-height:1.2em;}
.perArrow.none .pre {margin-top:15px;}
.perArrow.up .pre {margin-top:2px;}
.perArrow.down .pre {margin-top:10px;}

.chart.box02 .chartCon {padding:45px 30px; font-size:13px;}
.scPanel {position:relative; display:inline-block; float:left; width:202px; height:109px; margin-top:5px; margin-bottom:20px; background:url('../../../images/front/kmisys/bg_scPanel.png') no-repeat;} 
.scPanel .up {position:absolute;top:-10px;left:-10px; padding-left:20px; background:url('../../../images/front/kmisys/bg_scPanel_up.png') no-repeat left center;}
.scPanel .down {position:absolute;top:-10px;right:-10px; padding-right:20px; background:url('../../../images/front/kmisys/bg_scPanel_down.png') no-repeat right center;}
.scPanel .scNeedle {position:absolute;bottom:-65px;left: 22px;}
.barChart {display:inline-block; float:right; width:93px; height:146px;}
.tinList {float:left; width:205px;}
.tinList li {display:inline-block;}
.tinList li:first-child {float:left;}
.tinList li:last-child {float:right;}
.tinList li:before {content:''; display:inline-block; width:10px; height:7px; margin-right:10px;}
.tinList .tin01 {color:#3bcfd4;}
.tinList .tin01:before {background:#3bcfd4;}
.tinList .tin02 {color:#48689c;}
.tinList .tin02:before {background:#48689c;}

.barList {float:left; width:100px;}
.barList li {width:49px; margin-top:5px; display:inline-block; text-align:center;}

.chart.box03 .chartCon {padding:30px 45px 25px;}
.lineChart {position:relative; width:700px; height:315px;}
.percentage {position:absolute;top:-30px;right:10px; font-size:28px; font-weight:700;}
.percentage .pre {color:#aaa; font-size:15px; font-weight:400; vertical-align:5px;}
.percentage img {margin-left:14px; margin-right:9px; vertical-align:4px;}
.percentage img.icoNone {margin-left:14px; margin-right:9px; vertical-align:10px;}
.mainCon03 {background:#e6ecf2; padding:45px 0;}
.weatherWrap {float:left; width:654px; box-sizing:border-box;}
.weatherArea {margin-bottom:20px; font-size:0;}
select.areaSelect {width:115px; margin-right:10px; float: left;}
.today {position:relative; float:left; padding-right:62px; text-align:right;}
.today .date {color:#203e64; font-size:16px;}
.today .date .lunar {color:#6e86a1; font-size:14px;}
.today .tide {position:absolute;top:10px;right:0; display:inline-block; width:48px; height:30px; background:#fff; border:1px solid #b2c2d3; font-size:14px; text-align:center; line-height:30px;}

.mainMap {float: left; margin-right: 21px;}
.mainMap a { box-sizing: border-box; display: inline-block; width: 80px; height: 44px; line-height: 40px; text-align: center; background-color: #3574e0; font-size: 15px; color: #fff; font-weight: 700; }

.weather {overflow:hidden; background:#fff; border-top:1px solid #b2c2d3; border-left:1px solid #b2c2d3; box-sizing:border-box;}
.weather li {display:inline-block; float:left; width:25%; height:80px; border-right:1px solid #b2c2d3; border-bottom:1px solid #b2c2d3; box-sizing:border-box;}
.weather dl {overflow:hidden; padding:0 15px; line-height:80px;}
.weather dt {float:left; color:#203e64; font-size:18px; font-weight:500;}
.weather dd {float:right; color:#6697cd; font-size:26px;}
.weather .wind dd {padding-top:15px; line-height:0.8em;}
.weather .wind dd .direction {display:block; font-size:14px;}

.banner {float:right; width:527px; padding-top:2px; }
.bannerImg {position: relative; float:left; width:360px; height:223px;  overflow: hidden;}
.bannerImg ul {position: absolute;  list-style: none; }
.bannerImg ul li {float: left; }


.pageLink {float:right; width:146px;}
.pageLink li {height:110px; background:#3c5272;}
.pageLink li:first-child {margin-bottom:3px;}
.pageLink li a {display:inline-block; width:100%; height:100%; color:#fff; font-weight:500; text-align:center; box-sizing:border-box; letter-spacing:0;} 
.pageLink li:first-child a {padding-top:68px; background:url('../../../images/front/kmisys/ico_pageLink01.png') no-repeat center 27px;}
.pageLink li:last-child a {padding-top:77px; background:url('../../../images/front/kmisys/ico_pageLink02.png') no-repeat center 20px;}

.mainCon04 {padding:60px 0 100px;}
.newsTitle {margin-bottom:10px; font-size:28px; font-weight:700; text-align:center;}
.newsBoard {display:inline-block; width:50%; padding:0 50px; box-sizing:border-box;}
.newsBoard.noti {float:left;}
.newsBoard.refer {float:right;}
.newsBoard li {overflow:hidden; margin-top:50px;}
.boardCate {display:inline-block; float:left; width:84px; height:78px; border:1px solid #ddd; font-size:16px; font-weight:400; text-align:center; line-height:78px;}
.noti .boardCate {color:#6697cd;}
.refer .boardCate {color:#f89a1d;}
.boardPre {display:inline-block; float:right; width:calc(100% - 105px);}
.boardPre p {margin-bottom:10px; color:#888;}
.boardPre .tit {margin-bottom:4px; color:#333; font-size:18px; font-weight:400; line-height:1.1em;}
.boardPre .con {margin-bottom:10px; color:#888;}
.boardPre .tit a, .boardPre .con a {display:inline-block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.boardPre .tit a:hover, .boardPre .con a:hover {text-decoration:underline;}
.boardPre .tit a {color:#333;}
.boardPre .con a {color:#888;}
.boardPre .regDate {color:#888; font-size:14px; text-align:right;}


/* 어종별 수급동향 */
.titleArea {height:228px; margin-top:-88px; text-align:center; padding-top:125px; box-sizing:border-box; color:#fff;}
.titleArea.visual01 {background:url('../../../images/front/kmisys/bg_titleArea01.jpg') no-repeat center;}/* 어종별 수급동향 */
.titleArea.visual02 {background:url('../../../images/front/kmisys/bg_titleArea02.jpg') no-repeat center;}/* 유통단계별 수급동향 */
.titleArea.visual03 {background:url('../../../images/front/kmisys/bg_titleArea03.jpg') no-repeat center;}/* 알림마당 */
.titleArea.visual04 {background:url('../../../images/front/kmisys/bg_titleArea04.jpg') no-repeat center;}/* 공공데이터 */
.titleArea.visual05 {background:url('../../../images/front/kmisys/bg_titleArea05.jpg') no-repeat center;}/* 사이트소개 */
.titleArea.visual06 {background:url('../../../images/front/kmisys/bg_titleArea06.jpg') no-repeat center;}/* 개인정보처리방침 */
.pageTitle {font-size:31px; font-weight:700;}
.pageTitle .fishName {font-weight:400;}
.pageTitle .fishName:before {content:''; display:inline-block; width:1px; height:31px; margin:0 25px; background:rgba(255,255,255,0.4); vertical-align:-4px;}
.location {margin-top:20px;}
.location .home {display:inline-block; width:13px; height:12px; background:url('../../../images/front/kmisys/ico_home.png') no-repeat; text-indent:-9999px; vertical-align:-5px;}
.location .loca {font-weight:400;}
.location .loca:before {content:''; display:inline-block; width:6px; height:9px; margin:0 10px; background:url('../../../images/front/kmisys/bg_locaArrow.png') no-repeat;}

.fishChart {height:488px; background:#1a3a5a;}
.fishChart .conW {position:relative; height:100%;}
.baseDate {padding:20px 0 15px; color:rgba(255,255,255,0.5); font-size:14px; font-weight:400; letter-spacing:0px;}
.baseDate:before {content:''; display:inline-block; width:20px; height:20px; margin:0 10px; background:url('../../../images/front/kmisys/ico_baseDate.png') no-repeat; vertical-align:-4px;}
.btn_chartClose {display:inline-block; position:absolute;right:344px;top:716px;width:132px; height:29px; background:url('../../../images/front/kmisys/btn_chartClose.png') no-repeat; text-indent:-9999px;}
/*2018-12-21*/
.btn_chartOpen {display:inline-block; position:absolute;right:344px; width:132px; height:29px;text-indent:-9999px; background:url('../../../images/front/kmisys/btn_chartOpen.png') no-repeat;  }

.searchArea {overflow:hidden; margin-top:60px; padding:20px; border:1px solid #d6dde4; background:#e6ecf2; box-sizing:border-box;}
.searchArea label {display:inline-block; height:44px; font-size:18px; font-weight:400; line-height:44px;}
.searchArea select, .searchArea input[type=text] {border:1px solid #b2c2d3;} 
.searchTerm {float:left;}
.searchTerm label {float:left; width:138px;}
.selecTerm {display:inline-block; float:left; font-size:0;}
.selecTerm select {width:90px; margin-left:5px;}
.selecTerm select:first-child {margin-left:0;}
.wave {display:inline-block; width:28px; height:44px; font-size:15px; line-height:44px; text-align:center;}
.searchTerm .wave {float:left;}
.btnSearch {display:inline-block; width:90px; height:44px; background:#597899; color:#fff !important; line-height:44px; font-size:14px; text-align:center; vertical-align:top;}
.searchTerm .btnSearch {float:left; margin-left:5px;}
.btnTerm {float:right; font-size:0;}
.btnTerm li {display:inline-block; margin-left:5px;}
.btnTerm li a {display:inline-block; float:left; width:90px; height:44px; background:#fff; border:1px solid #b2c2d3; color:#333; font-size:14px; line-height:42px; text-align:center; box-sizing:border-box;}
.btnTerm li.on a, .btnTerm li a:hover {background:#1a3a5a; border:1px solid #1a3a5a; color:#fff !important; text-align:center;}

.btnOutput {padding:28px 0 10px; font-size:0; text-align:right;}
.btnOutput .excel {display:inline-block; width:146px; height:41px; margin-left:10px; padding-left:50px; background:url('../../../images/front/kmisys/ico_excel.png') no-repeat 14px 10px; border:1px solid #cbd1d6; color:#333; font-size:14px; line-height:40px; text-align:left; box-sizing:border-box;}
.btnOutput .pdf {display:inline-block; width:146px; height:41px; margin-left:10px; padding-left:50px; background:url('../../../images/front/kmisys/ico_pdf.png') no-repeat 14px 10px; border:1px solid #cbd1d6; color:#333; font-size:14px; line-height:40px; text-align:left; box-sizing:border-box;}
.btnOutput .print {display:inline-block; width:146px; height:41px; margin-left:10px; padding-left:50px; background:url('../../../images/front/kmisys/ico_print.png') no-repeat 14px 10px; border:1px solid #cbd1d6; color:#333; font-size:14px; line-height:40px; text-align:left; box-sizing:border-box;}

.foldArea {position:relative; width:100%; margin-bottom:30px;}
.foldTitleBox {height:58px; background:#8999aa;}
.foldTitle {display:inline-block; margin-left:25px; font-size:20px; color:#fff; font-weight:700; line-height:58px;}
.btnOpen, .btnClose {display:inline-block; position:absolute;top:8px;right:8px; width:109px; height:41px; border-radius:5px; color:#fff !important; font-size:16px; font-weight:400; line-height:41px;}
.btnOpen {text-indent:44px; background:#556475 url('../../../images/front/kmisys/ico_open.png') no-repeat 21px center;}
.btnClose {text-indent:51px; background:#556475 url('../../../images/front/kmisys/ico_close.png') no-repeat 21px center;}

.foldCon {padding:25px 20px; border:1px solid #ddd; color:#333; box-sizing:border-box;}
.foldCon .left {float:left;}
.foldCon .right {float:right;}

.w395 {width:395px;}
.w570 {width:570px;}
.w745 {width:745px;}
.mAuto {margin:0 auto;}

.squareTilte {margin-bottom:15px; color:#193957; font-size:17px; font-weight:700;}
.squareTilte:before {content:''; display:inline-block; width:6px; height:19px; margin-right:10px; background:#193957; vertical-align:-4px;}

.point01 {color:#ed5050 !important;} /* 빨간색 */
.point02 {color:#ff8519 !important;} /* 주황색 */
.point03 {color:#3574e0 !important;} /* 파란색 */
.point04 {color:#3c5f97 !important;} /* 남색 */
.point05 {color:#0b9ca0 !important;} /* 청록색 */

.tblW {position:relative;}
.tblUnit {position:absolute;top:-33px;right:0; color:#333; font-size:13px;}
.topLine {border-top:3px solid #808080;}
.tblStyle02 {width:100%;} 
.tblStyle02 th, .tblStyle02 td {padding:12px 5px; border:1px solid #ddd; color:#333; font-size:15px; font-weight:400;}
.tblStyle02 th.bgHl01, .tblStyle02 td.bgHl01 {background:#e7eaf2;}/* 증감률th */
.tblStyle02 th.bgHl02, .tblStyle02 td.bgHl02 {background:#fffaec;}/* 증감률td */
.tblStyle02 .borderBn {border-bottom:none !important;}
.tblStyle02 .borderTn {border-top:none !important;}
.tblStyle02 .borderRn {border-right:none !important;}
.tblStyle02 .borderLn {border-left:none !important;}
.tblStyle02 thead th {background:#f1f3f8; text-align:center; line-height:1.3em;}
.tblStyle02 thead tr:first-child th {border-top:none;}
.tblStyle02 tbody th {text-align:center;}
.tblStyle02.tbodyBg tbody th {background:#f1f3f8;}
.tblStyle02 tbody td {padding:12px 10px; text-align:right;}

.remarkTxt {margin-top:10px; padding-left:50px; box-sizing:border-box; font-size:13px; font-weight:400;}
.remark {display:inline-block; width:40px; height:24px; margin-left:-50px; margin-right:8px; background:#b6bbcc; color:#fff; font-size:13px; text-align:center; line-height:24px; text-indent:0;}
.tinTxt {margin-top:10px; font-size:13px; font-weight:400;}

.sequelArea {width:100%;}
.sequelArea img {width:100%;}

.noData {height:170px; padding-top:115px; background:url('../../../images/front/kmisys/bg_noData.png') no-repeat center 35px; box-sizing:border-box;}
.noDataTxt {text-align:center; font-size:17px;}


/* 유통단계별 수급동향 */
.stableArea {overflow:hidden; margin:10px 0 100px;}
.stableArea > li {overflow:hidden; display:inline-block; float:left; width:390px; margin-left:15px; border-radius:17px;}

/* 20210602 최재종 수정 전 */
/* .stableArea > li:first-child, .stableArea > li:nth-child(4), .stableArea > li:nth-child(7), .stableArea > li:nth-child(10) {margin-left:0;} */ 
/* .stableArea > li:first-child, .stableArea > li:nth-child(2), .stableArea > li:nth-child(3), .stableArea > li:nth-child(4), .stableArea > li:nth-child(5), .stableArea > li:nth-child(6), .stableArea > li:nth-child(7), .stableArea > li:nth-child(8), .stableArea > li:nth-child(9) {margin-bottom:30px;} */

/* 20210602 최재종 수정 후 (미역, 홍합, 뱀장어 추가) */
.stableArea > li:first-child, .stableArea > li:nth-child(4), .stableArea > li:nth-child(7), .stableArea > li:nth-child(10), .stableArea > li:nth-child(13) {margin-left:0;} 
.stableArea > li:first-child, .stableArea > li:nth-child(2), .stableArea > li:nth-child(3), .stableArea > li:nth-child(4), .stableArea > li:nth-child(5), .stableArea > li:nth-child(6), .stableArea > li:nth-child(7), .stableArea > li:nth-child(8), .stableArea > li:nth-child(9), .stableArea > li:nth-child(10), .stableArea > li:nth-child(11), .stableArea > li:nth-child(12) {margin-bottom:30px;}
 
.fishTitle {height:53px; background:#222; color:#fff; font-size:17px; font-weight:400; line-height:53px; text-indent:24px;}
.fishTitle:before {content:''; display:inline-block; margin-right:10px;}
.stableArea > li:first-child .fishTitle:before {width:25px; height:19px; background:url('../../../images/front/kmisys/ico_fish01.png') no-repeat; vertical-align:-3px;}
.stableArea > li:nth-child(2) .fishTitle:before {width:20px; height:20px; background:url('../../../images/front/kmisys/ico_fish02.png') no-repeat; vertical-align:-4px;}
.stableArea > li:nth-child(3) .fishTitle:before {width:26px; height:26px; background:url('../../../images/front/kmisys/ico_fish03.png') no-repeat; vertical-align:-6px;}
.stableArea > li:nth-child(4) .fishTitle:before {width:35px; height:17px; background:url('../../../images/front/kmisys/ico_fish04.png') no-repeat; vertical-align:-3px;}
.stableArea > li:nth-child(5) .fishTitle:before {width:30px; height:19px; background:url('../../../images/front/kmisys/ico_fish05.png') no-repeat; vertical-align:-4px;}
.stableArea > li:nth-child(6) .fishTitle:before {width:32px; height:16px; background:url('../../../images/front/kmisys/ico_fish06.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(7) .fishTitle:before {width:44px; height:22px; background:url('../../../images/front/kmisys/ico_fish07.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(8) .fishTitle:before {width:38px; height:22px; background:url('../../../images/front/kmisys/ico_fish08.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(9) .fishTitle:before {width:40px; height:22px; background:url('../../../images/front/kmisys/ico_fish09.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(10) .fishTitle:before {width:33px; height:22px; background:url('../../../images/front/kmisys/ico_fish10.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(11) .fishTitle:before {width:37px; height:22px; background:url('../../../images/front/kmisys/ico_fish11.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(12) .fishTitle:before {width:32px; height:22px; background:url('../../../images/front/kmisys/ico_fish12.png') no-repeat; vertical-align:-2px;}

/* 20210602 최재종 : 유통단계별 수급동향 3차어종 css 적용 추가*/
.stableArea > li:nth-child(13) .fishTitle:before {width:33px; height:22px; background:url('../../../images/front/kmisys/ico_fish13.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(14) .fishTitle:before {width:37px; height:22px; background:url('../../../images/front/kmisys/ico_fish14.png') no-repeat; vertical-align:-2px;}
.stableArea > li:nth-child(15) .fishTitle:before {width:32px; height:22px; background:url('../../../images/front/kmisys/ico_fish15.png') no-repeat; vertical-align:-2px;}

.stableBox {padding:15px; background:#e2e5e8;}
.stableBox .chartTitle {height:38px; background:#8b9298; color:#fff; font-size:15px; text-indent:20px; line-height:38px;}
.stableBox .chartCon {height:calc(100% - 38px);}
.stableBox .chart {box-shadow:none;}
.stableBox .chart.box01 {height:152px; }
.stableBox .chart.box01 .chartCon {padding:12px 25px;}
.stableBox .chart.box02 {height:221px;}
.stableBox .retailPrice img {margin-right:8px;}
.stableBox .icoUp {}
.stableBox .icoDown {}
.stableBox .retailPrice {padding:25px 0 0 15px;}
.stableBox .retailPrice .num {font-size:28px;}
.stableBox .retailPrice .per {font-size:13px;}
.stableBox .perArrow {width:95px; margin-top:0; background-size:contain;}
.stableBox .perArrow .num {font-size:16px;}
.stableBox .perArrow .pre{margin-top:20px;}
.stableBox .perArrow .down .pre{margin-top:30px;}

.stableBox .chart.box02 .chartCon {padding:24px 22px 22px;}
.stableBox .scPanel {width:190px; height:104px; margin-top:3px; margin-left:3px; background-size:contain;}
.scPanel .up {font-size:13px;}
.scPanel .down {font-size:13px;}
/* .stableBox .scPanel .scNeedle {position:absolute;bottom:7px;left:85px; width:19px;} */
.stableBox .scPanel .scNeedle {
    position: absolute;
    bottom: -65px;
    left: 15px;
}
.stableBox .barChart {width:88px; height:138px;}
.stableBox .barChart img {width:88px; height:auto;}
.stableBox .tinList {width:196px;}
.stableBox .tinList li {font-size:12px;}


/* 알림마당 공지사항(목록) */
.searchKeyword {display:inline-block; /* width:604px; */ margin:0 auto; font-size:0;}
.searchKeyword label {width:90px; margin-left:290px;}
.searchKeyword select {width:120px; margin-right:10px;}
.searchKeyword input[type=text] {width:284px; margin-right:10px;}
.searchKeyword .btnSearch {margin-left:0;}

.boardList {}
.boardTotal {padding:29px 0 18px; font-size:15px; font-weight:400;}
.boardTotal:before {content:''; display:inline-block; width:17px; height:16px; margin-right:10px; background:url('../../../images/front/kmisys/ico_boardTotal.png') no-repeat; vertical-align:-3px;}
.boardTotal .point03 {font-weight:bold;}

.tblBoard {width:100%; border-top:2px solid #666;}
.tblBoard th, .tblBoard td {height:53px; border-bottom:1px solid #ddd; color:#333; font-size:15px; text-align:center;}
.tblBoard th {font-weight:700;}
.tblBoard td {font-weight:400;}
.tblBoard td.subject {padding:0 20px; text-align:left;}
.tblBoard td.subject > a {display:inline-block; overflow:hidden; width:690px; padding-top:3px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; box-sizing:border-box; line-height:1.4em;}
.tblBoard td.subject a:hover {text-decoration:underline;}
.new {display:inline-block; margin-left:13px; margin-top:2px;}
.new img {vertical-align:-5px;}/* 21*21 */

.pagination {margin:18px 0 100px; text-align:center;}
.paging > span, .paging > a > span {display:inline-block; color:#959595; font-size:15px; font-weight:400;}
.paging > span:before, .paging > a:before {content:''; display:inline-block; width:8px; height:8px; margin:0 8px; background:url('../../../images/front/kmisys/bg_slash.png') no-repeat;}
.paging > span:first-child:before, .paging > a:first-child:before {display:none;}
.paging .currentPage, .paging > a:hover span {padding-bottom:4px; border-bottom:1px solid #656565; color:#333;}
.btn_firstPage, .btn_prevPage, .btn_nextPage, .btn_lastPage {vertical-align:1px;}
.btn_firstPage {margin-right:13px;}
.btn_prevPage {margin-right:30px;}
.btn_nextPage {margin-left:30px;}
.btn_lastPage {margin-left:13px;}


/* 알림마당 공지사항(조회 상세) */
.boardView {margin:50px 0 100px;}
.boardView .tblBoard th, .boardView .tblBoard td {text-align:left;}
.tblBoard th.viewTitle {height:auto; padding:13px 20px 15px; color:#3574e0; font-size:17px; line-height:1.4em;}
.tblBoard th.viewTitle .new img {vertical-align:-4px;}
.tblBoard tr.viewInfo th, .tblBoard .viewInfo td {padding:0 20px;}
.tblBoard tr.viewInfo th {position:relative;}
.tblBoard tr.viewInfo th:after {content:""; display:inline-block; position:absolute;top:20px;right:0; width:1px; height:12px; background:#ddd;}
.tblBoard tr.viewInfo td {}
.tblBoard tr.viewInfo th.file {height:auto; padding:19px 20px; vertical-align:top;}
.tblBoard tr.viewInfo td.file {height:auto; padding:12px 20px 10px;}
.fileList {}
.fileList li {margin-top:10px;}
.fileList li:first-child {margin-top:0px;}
.fileIcon {margin-right:7px;}
.fileIcon img {}
.btnFileView {display:inline-block; width:108px; height:31px; margin-left:12px; background:url('../../../images/front/kmisys/btn_fileView.png') no-repeat; vertical-align:middle; text-indent:-9999px;}
.tblBoard td.viewCon {height:auto; padding:50px 0;}
.tblBoard td.viewCon p {line-height:1.8em;}
.tmpCon {}
.tmpImg {margin-bottom:40px; text-align:center;}
.tmpImg img {margin-bottom:30px;}
.tmpImg p {}

.boardBtn {margin-top:20px; text-align:right;}
.btnList {display:inline-block; width:101px; height:45px; background:url('../../../images/front/kmisys/btn_list.png') no-repeat 24px center; border:1px solid #ddd; box-sizing:border-box; font-size:14px; line-height:45px; text-indent:48px; text-align:left;}

.boardPost {margin-top:30px;}
.boardPost li {height:52px; border-bottom:1px solid #ddd; line-height:52px;}
.boardPost li:first-child {border-top:1px solid #ddd;}
.boardPost li.prevPost {background:url('../../../images/front/kmisys/bg_prevPost.png') no-repeat 18px center;}
.boardPost li.nextPost {background:url('../../../images/front/kmisys/bg_nextPost.png') no-repeat 18px center;}
.boardPost li dl {}
.boardPost li dt, .boardPost li dd {display:inline-block;}
.boardPost li dt {width:118px; font-weight:700; text-indent:54px; line-height:52px; vertical-align:top;}
.boardPost li dd {width:1060px;}
.boardPost li dd a {overflow:hidden; display:inline-block; width:100%; height:100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}


/* 알림마당 자료실(목록) */
.searchRefer {font-size:0;}
.searchRefer > li {margin-top:7px;}
.searchRefer > li:first-child {margin-top:0;}
.searchRefer label {width:142px; text-indent:34px;}
.searchRefer select, .searchRefer input[type=text] {margin-right:5px;}
.tblBoard.refer td.subject > a {width:530px;}
.w111 {width:111px !important;}

/* datepicker */
.searchRefer .datepickerW input[type=text] {margin-right:0;}
.datepickerW .btnSearch {margin-left:5px;}
.datepickerW label, .datepickerW .datepicker {vertical-align:top;}
.datepickerW .btnTerm {display:inline-block; float:none; vertical-align:top;}
.ui-datepicker-trigger {vertical-align:top; cursor:pointer; width:44px; height:44px; background:url('../../../images/front/kmisys/btn_datepicker.jpg') no-repeat; border:none; outline:none; text-indent:-9999px;}
.ui-datepicker-trigger:active {border-style:outset; border:none;}
.ui-datepicker {display:none; width:236px; border-width:1px; border-style:solid; border-color:#b2c2d3; background:#fff;}
.ui-datepicker-header {height:18px; padding-top:7px; padding-bottom:8px;} 
.ui-datepicker-header a {display:block; width:8px; height:13px; margin-top:7px; text-indent:-9999em; cursor:pointer;}
.ui-datepicker-prev {float:left; background:url('../../../images/front/kmisys/btn_datepickerPrev.png') no-repeat; margin-left:14px;}
.ui-datepicker-next {float:right; background:url('../../../images/front/kmisys/btn_datepickerNext.png') no-repeat; margin-right:14px;}
.ui-datepicker-title {text-align:center;}
.ui-datepicker-title select {width:62px; height:20px; border:1px solid #c5c5c5; font-size:12px; line-height:1em; background-position:calc(100% - 5px) 50%;}
.ui-datepicker-title select:first-child {margin-right:4px;} 
.ui-datepicker-calendar {width:214px; border-top:0 none; border-bottom:1px solid #666; background:#fff; margin:0 auto;}
.ui-datepicker-calendar th {font-weight: normal; padding:9px 0 8px 0; color:#666; border-bottom:1px solid #666; font-size:10px;}
.ui-datepicker-calendar td {width:25px; padding:2px 0; border-bottom:1px solid #e3e3e3; text-align:center; font-size:11px;}
.ui-datepicker-calendar tr td:first-child {width:26px;}
.ui-datepicker-calendar tr:last-child td {border-bottom:0;}
.ui-datepicker-calendar td a {display:inline-block; width:20px; height:20px; line-height:23px;}
.ui-datepicker-calendar th:first-child span, .ui-datepicker-calendar td:first-child a {color:#5878b3;}
.ui-datepicker-calendar th:last-child span, .ui-datepicker-calendar td:last-child a {color:#5878b3;}
.ui-datepicker-calendar a.ui-state-active {font-weight:bold;}
.ui-datepicker-calendar .ui-datepicker-today a {font-weight:bold;}
.ui-datepicker-calendar a.ui-state-active:hover {}
.ui-datepicker-buttonpane {height:14px; background:#fff;}
.ui-datepicker-buttonpane button {display:none;}


/* 사이트소개 일반개요 */
.overviewArea {padding:45px 0 55px 0; text-align:center;}
.overviewArea .titleTxt {font-size:40px; color:#333;}
.overviewArea .titleTxt .point03 {font-weight:bold;}
.overviewArea .lineTxt {display:inline-block; margin:14px 0 45px 0; padding:13px 10px; border-top:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; font-size:16px; letter-spacing:4.5px;}
.overviewArea .txt {font-size:18px;}
.overviewImg {margin-top:25px;}


/* 사이트소개 Contact-Us */
.contectWrap {}
.contectWrap .titH4 {margin:50px 0 25px;}

.contactBox {width:100%; height:230px; padding:70px 0 0 638px; background:url('../../../images/front/kmisys/bg_contact.png') no-repeat; box-sizing:border-box;}
.contactBox dl {margin-bottom:27px; color:#fff; font-size:15px;}
.contactBox dt {display:inline-block; width:115px; height:15px; font-weight:700; border-right:1px solid #a6abb4;}
.contactBox dt:before {content:''; display:inline-block; width:38px;}
.contactBox dl:first-child dt:before {height:19px; background:url('../../../images/front/kmisys/ico_contact01.png') no-repeat; vertical-align:-5px;}
.contactBox dl:nth-child(2) dt:before {height:17px; background:url('../../../images/front/kmisys/ico_contact02.png') no-repeat; vertical-align:-4px;}
.contactBox dl:last-child dt:before {height:12px; background:url('../../../images/front/kmisys/ico_contact03.png') no-repeat;}
.contactBox dd {display:inline-block; width:425px; padding-left:20px; box-sizing:border-box;}

.addressArea {font-size:0;}
.addressArea dt, .addressArea dd {display:inline-block; vertical-align:top; color:#333;} 
.addressArea .addr {width:110px; height:88px; border-top:1px solid #000; border-bottom:1px solid #000; font-size:24px; font-weight:700; line-height:86px; text-align:center; box-sizing:border-box;}
.addressArea .addrInfo {width:1090px; height:88px; padding-top:22px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-size:0; box-sizing:border-box;}
.addrInfo dl {display:inline-block; width:50%;}
.addrInfo dl:first-child, .addrInfo dl:nth-child(2) {margin-bottom:13px;}
.addrInfo dt, .addrInfo dd {font-size:15px; text-indent:15px;}
.addrInfo dt {width:90px; border-right:1px solid #e5e5e5; font-weight:700;}
.addrInfo dd {width:calc(100% - 91px);}

.pathList {margin-bottom:100px;}
.pathList li {margin-top:30px;}
.pathCircle {display:inline-block; width:99px; height:99px; color:#fff; border-radius:50px; font-size:16px; text-align:center; box-sizing:border-box;}
.path01 .pathCircle, .path02 .pathCircle {background:#3574e0; padding-top:38px;}
.path03 .pathCircle, .path04 .pathCircle {background:#3c5f97; padding-top:15px;}
.path05 .pathCircle {background:#0b9ca0; padding-top:38px;}
.pathList li dl {display:inline-block; height:99px; padding-left:111px; vertical-align:top; box-sizing:border-box;}
.path01 dl, .path02 dl {padding-top:17px; background:url('../../../images/front/kmisys/ico_bus.png') no-repeat 33px center;}
.path03 dl, .path04 dl {padding-top:30px; background:url('../../../images/front/kmisys/ico_train.png') no-repeat 42px center;}
.path05 dl {padding-top:17px; background:url('../../../images/front/kmisys/ico_car.png') no-repeat 36px center;}
.pathList li dt, .pathList li dd {margin-bottom:8px;}
.pathList li dt, .pathList li dd .bold {font-weight:700; color:#333;}
.pathList li dd .gray {color:#a6abb3;}
.pathList li dd .triangle {padding:0 8px; color:#4b4c4e; font-size:11px; vertical-align:1px;}


/* OPEN-API */
.titH3 {font-size:40px; color:#333; font-weight:400;}
.titH3 span {color:#3574e0; font-weight:bold;}

.apiBox {box-sizing:border-box; height:338px; padding:188px 0 0 663px; background:url('../../../images/front/kmisys/bg_open_api.png') no-repeat 0 0; font-size:18px; color:#333; font-weight:400;}
.apiBox .big {display:block; color:#3574e0; font-size:30px; font-weight:700;}
.apiBox .small {color:#3574e0; font-size:17px;}

.titH4 {font-size:20px; color:#333; font-weight:700;}
.titH4:before {content:""; display:block; width:15px; height:5px; margin:0 0 10px; background:#3574e0;}

.apiUseList {box-sizing:border-box; height:204px; margin-top:18px; background:url('../../../images/front/kmisys/bg_use_list.png') no-repeat 0 0;}
.apiUseList li {float:left; width:298px; padding-top:148px; text-align:center; font-size:16px; color:#333; font-weight:400;}
.apiUseList li + li {width:301px;}
.apiUseList li + li + li {width:299px;}
.apiUseList li + li + li + li {width:302px;}

.tblStyle03 {width:100%;}
.tblStyle03 thead th {padding:16px 0; border-top:2px solid #808080; border-bottom:1px solid #ddd; text-align:center; font-size:15px; color:#333; font-weight:700;}
.tblStyle03 tbody td {padding:16px 0 17px; text-align:center; border-bottom:1px solid #ddd; font-size:15px; color:#333; font-weight:400;}

.applyBox {box-sizing:border-box; height:72px; line-height:72px; margin-top:20px; padding-left:240px; background:#f6f6f6; font-size:15px; color:#333; font-weight:400;}
/* 20211203 버튼 스타일 주석 */
/* .applyBox a {box-sizing:border-box; display:inline-block; width:138px; height:40px; line-height:40px; margin-left:20px; padding-left:60px; background:#3574e0 url('../../../images/front/kmisys/bg_use.png') no-repeat 23px 9px; font-size:15px; color:#fff; font-weight:700;} */


/* OPEN-API 소개 및 이용방법 */
.marineArea {background:url('../../../images/front/kmisys/bg_marine.png') no-repeat right 0;}
.txt_marine {font-size:15px; color:#333; font-weight:400; line-height:24px;}

.serviceBox {padding-bottom:30px; border-bottom:1px solid #ddd;}
.serviceBox .left {float:left; width:345px;}
.serviceBox .right {float:left; width:855px;}

.numberList {padding-bottom:25px; border-bottom:1px solid #ddd;}
.numberList li {padding-top:14px;}
.numberList li:first-child {padding-top:20px;}
.numberList li span {box-sizing:border-box; display:inline-block; width:22px; height:22px; line-height:22px; margin-right:8px; text-align:center; border-radius:100%; background:#78859c; font-size:13px; color:#fff; font-weight:700;}

.useMethodBox {padding-top:15px;}
.useMethodBox dt {float:left; width:100px;}
.useMethodBox dt span {box-sizing:border-box; display:inline-block; width:22px; height:22px; line-height:22px; margin-right:8px; text-align:center; border-radius:100%; background:#78859c; font-size:13px; color:#fff; font-weight:700;}
.useMethodBox dd {float:left; width:755px; line-height:1.3; padding-top:1px; padding-left:11px; text-indent:-4px; word-break:keep-all; box-sizing:border-box;}
.useMethodBox dd:before {content:':'; display:inline-block; margin-right:3px;}

.txtApiInfo {font-size:18px; color:#333; font-weight:400;}

.titH5 {font-size:17px; color:#3574e0; font-weight:700;}
.titH5 span {font-weight:400;}

.fontColor5 {color:#e94b4b;}

.tblStyle04 {width:100%;}
.tblStyle04 tbody tr:first-child th, .tblStyle04 tbody tr:first-child td {border-top:2px solid #808080;}
.tblStyle04 tbody th {box-sizing:border-box; padding:0 0 0 20px; text-align:left; background:#f1f3f8; border-bottom:1px solid #ddd;}
.tblStyle04 tbody td {box-sizing:border-box; line-height:1.2; padding:13px 20px; border-bottom:1px solid #ddd;}
.tblStyle04 tbody td.inputTd {padding:9px 20px;}
.tblStyle04 tbody td textarea {box-sizing:border-box; width:100%; height:275px; padding:25px 35px; background:#f4f4f4; border:none; resize:none;}
.tblStyle04 tbody td textarea.whiteBox {height:135px; padding:15px 10px; background:#fff; border:1px solid #ddd;}
.lh24 {line-height:24px !important;}
.h55 {height:55px;}

.tblStyle05 {width:100%;}
.tblStyle05 thead th {box-sizing:border-box; padding:15px 0; text-align:center; background:#f1f3f8; border-top:2px solid #808080; border-bottom:1px solid #ddd;}
.tblStyle05 tbody td {box-sizing:border-box; padding:15px 0; text-align:center; border-bottom:1px solid #ddd;}


/* OPEN-API 인증키 신청 */
.certifyNotiBox {box-sizing:border-box; height:118px; padding:40px 0 0 369px; background:#f6f6f6 url('../../../images/front/kmisys/bg_email.png') no-repeat 253px 27px; font-size:15px; color:#333; font-weight:400;}
.certifyNotiBox span {border-bottom:2px solid #a1bdec; color:#3574e0;}

.txtImport {font-size:15px; color:#333; font-weight:400;}

.btnCertify {padding:20px 0 100px;}
.btnCertify a {box-sizing:border-box; display:block; width:198px; height:56px; line-height:56px; margin:0 auto; padding-left:72px; background:#3574e0 url('../../../images/front/kmisys/bg_pencil.png') no-repeat 40px 17px; font-size:20px; color:#fff; font-weight:400;}

.w245 {width:245px !important;}
.w135 {width:135px !important;}
.h36 {height:36px !important; line-height:36px !important;}

.btnMobile {display:inline-block;  width:105px; height:36px; line-height:36px; margin-left:5px; text-align:center; vertical-align:middle; background:#597899; font-size:14px; color:#fff !important; font-weight:400;}
.btnIpin {display:inline-block;  width:105px; height:36px; line-height:36px; margin-left:5px; text-align:center; vertical-align:middle; background:#597899; font-size:14px; color:#fff !important; font-weight:400;}


/* OPEN-API 사용 신청 */
.btnUseApply a {padding-left:85px; background:#3574e0 url('../../../images/front/kmisys/bg_clock.png') no-repeat 48px 15px;}


/* 정기간행물 */
.periodicalWrap {}

.bookBox {position:relative; min-height:900px; margin-top:50px; padding:47px 60px 28px 60px; background:url('../../../images/front/kmisys/bg_bookBox.jpg') no-repeat; border:1px solid #dedede; box-sizing:border-box;}
.bookTitle {width:500px; padding-bottom:15px; border-bottom:1px solid #d0d0d0; font-size:20px; font-weight:700;}
.bookTitle .monthly {display:inline-block; width:103px; height:43px; margin-right:12px; padding-left:62px; background:#f5f5f5 url('../../../images/front/kmisys/bg_monthly.png') no-repeat 23px 11px; color:#333; box-sizing:border-box; font-size:15px; font-weight:400; line-height:43px; border-radius:50px; vertical-align:2px;}
.bookTitle .bar {font-weight:400;}
.bookTitle .bar:before {content:''; display:inline-block; width:1px; height:19px; margin:0 10px; background:#d0d0d0; vertical-align:-3px;}
.bookImg {position:absolute;top:47px;left:605px; width: 550px;}
.bookImg img {box-shadow:4px 4px 20px 0px rgba(214,214,214,0.8); width: 550px;} /* size:316*444 */

.bookSummary {width:500px;magin-bottom:26px;box-sizing:border-box; margin-top: 20px; min-height: 630px; }
.bookSummary p {line-height:2.7}

/*
.bookSummary {width:387px; margin-bottom:26px; box-sizing:border-box;}
.bookSummary dt {margin-top:32px; font-weight:700;}
.bookSummary dt:first-child {margin-top:20px;}
.bookSummary dt:before {content:''; display:inline-block; width:2px; height:2px; margin:0 9px 0 7px; background:#3574e0; vertical-align:5px;}
.bookSummary dd {margin-top:9px; padding-left:20px;}
*/
.bookBtn {padding-left:10px; padding-bottom:30px; }
.bookBtn a {display:inline-block; width:178px; height:46px; border:1px solid #3574e0; box-sizing:border-box; font-size:16px; line-height:44px;}
.btnBookDown {padding-left:69px; margin-right:10px; background:#3574e0 url('../../../images/front/kmisys/btn_bookDown.png') no-repeat 28px 13px; color:#fff !important;}
.btnQuickView {padding-left:77px; background:#fff url('../../../images/front/kmisys/btn_quickView.png') no-repeat 48px 13px; color:#3574e0 !important;}

.periodicalWrap .searchArea {padding-left:342px;}

.tblStyle03 .monthlyBook {text-align:left;}
.monthlyBook .imgBook {margin:0 60px;}
.monthlyBook .imgBook img {width:57px; height:80px;}
.monthlyBook a:hover {text-decoration:underline;}


/* 개인정보 처리방침 */
.privacyArea {padding:50px 0 100px; color:#333; line-height:1.5em;}
.topTxt {margin-bottom:20px; font-size:18px; font-weight:700;}
.midTxt {margin-bottom:30px;}

.policyBox {padding:30px; border:1px solid #ddd; box-sizing:border-box; word-break:keep-all;}
.policyBox h3 {margin:40px 0 20px; font-size:18px; font-weight:700;}
.policyBox h3:before {content:''; display:inline-block; width:5px; height:20px; margin-right:10px; background:url('../../../images/front/kmisys/bg_policy.jpg') no-repeat; vertical-align:-3px;}
.policyBox p {}

.policyBox .tblStyle05 {margin:15px 0 20px;}
.policyBox .tblStyle05 th, .policyBox .tblStyle05 td {border-right:1px solid #ddd;}
.policyBox .tblStyle05 th:last-child, .policyBox .tblStyle05 td:last-child {border-right:none;}

.circleList {}
.circleList li, .indentTxt {margin-bottom:30px; padding-left:15px; text-indent:-15px;}

a.homepage {color:#333 !important;}
a.homepage:hover {color:#3574e0 !important; text-decoration:underline;}


/* 이메일주소 무단수집 거부 */
.denyArea {height:276px; margin-top:165px; padding:85px 0 0 440px; background:url('../../../images/front/kmisys/bg_deny.png') no-repeat 219px center;; border:1px solid #dedede; box-sizing:border-box;}
.denyArea .txt01 {font-size:20px;}
.denyArea .txt02 {margin-top:5px;}


/* footer */
#footer {background:#464d5d; font-size:14px;}
.footerInner {position:relative; width:1200px; height:135px; margin:0 auto; padding-top:25px; color:#fff; box-sizing:border-box;}
.footerNav {margin-bottom:20px;}
.footerNav li {display:inline-block;}
.footerNav li:before {content:""; display:inline-block; width:1px; height:9px; margin-left:14px; margin-right:15px; background:#7e838e;}
.footerNav li:first-child:before {display:none;}
.footerNav li a {color:#fff;}
.footerNav li a:hover {text-decoration:underline;}
.footerNav li.policy a {color:#99cfef;}

.familyWrap {position:absolute;right:50px;top:20px;}
.familySite {position:relative; width:228px; height:34px;}
a.btnFamilySite {display:inline-block; width:228px; height:34px; background:url('../../../images/front/kmisys/bg_familySite.jpg') no-repeat; color:#949494; line-height:34px; text-indent:22px;}
a.btnFamilySite.on {background:url('../../../images/front/kmisys/bg_familySite_on.jpg') no-repeat;}
.familyLink {display:none; position:absolute;left:0;bottom:34px; width:100%; padding:10px 0; border:1px solid #ddd; background:#fff; box-sizing:border-box;}
.familyLink.on {display:inline-block;}
.familyLink li {padding:5px 22px; box-sizing:border-box;}
.familyLink li a {color:#949494;}
.familyLink li a:hover {color:#222;}

.address, .copyright {}



@media all and (max-width:320px) {
}
@media only screen and (max-width : 399px) and (min-width: 360px) {
}
@media only screen and (max-width : 359px) {
}


/* 로딩 이미지 */

.loading{
    position: fixed;
    width: 10%;
    left: 66%;
    margin-left: -20%;
    top: 40%;
    overflow: auto;
    box-sizing: border-box;
    z-index: 1;
}

.loader{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

/* LOADER */

#loader span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
}

#loader span:nth-child(1){
  animation: bounce 1s ease-in-out infinite;
}

#loader span:nth-child(2){
  animation: bounce 1s ease-in-out 0.33s infinite;
}

#loader span:nth-child(3){
  animation: bounce 1s ease-in-out 0.66s infinite;
}

@keyframes bounce{
  0%, 75%, 100%{
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  25%{
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}