@charset "utf-8";

@import url('common.css');

#wrap {margin: 0 auto;}
.container {width: 1100px;margin: 0 auto;padding: 0;position: relative;}
.scroll {overflow: auto; -webkit-overflow-scrolling: touch; /* iPhone touch scroll */}

/* HEADER */
#header {position: relative;-webkit-box-shadow: inset 0 -3px 5px rgba(67, 154, 217, 0.3);box-shadow: inset 0 -3px 5px rgba(67, 154, 217, 0.3); height: 90px;margin-bottom: 20px; z-index: 3;}
#header h1 {float: left;margin-top: 25px;}
#gnb {float: right;position: relative;margin-top: 50px;z-index: 1;}
#gnb>ul>li {float: left;margin-left: 95px;}
.top-nav {position: absolute;right: 0;top: 10px;color: #888;}
.top-nav li {display: inline-block;font-size: 11px;margin-left: 10px;}

/* FOOTER */
#footer {margin: 70px 0 30px 0;border-top: 1px solid #e5e5e5;padding:15px 0px 10px 0px;font-size: 11px;color: #b5b5b5;}
#footer .container {padding-left: 125px;}
#footer .logo {position: absolute;left: 8px;top: 0;}
#footer address span {padding: 0 5px;}
#footer small {}
#footer .family-site {position: absolute;right: 0;top: 0; font-size: 11px;}
#footer .family-site button {background: #eeeeee;width: 180px; text-align: left;font-size: inherit;}
#footer .family-site button .caret {margin-left: 85px;}
#footer .family-site ul {width: 180px; font-size: inherit}
#footer .scroll-top {position:fixed; display:inline-block; right:80px; bottom:0; background:#5892d5; width:35px; height:35px; font-size:15px; color:#fff; line-height:35px; text-align:center; cursor:pointer; border-radius:100%; opacity:0; -webkit-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;z-index: 3}
#footer .scroll-top.is-showing {bottom:20px; opacity:0.9;}

/* INDEX */
.main-visual {margin-bottom: 10px;margin-top: -20px;}
.main-visual .slides>li {height: 320px;}
.main-visual .slides>li img {width: auto;margin: 0 auto;}
.main-visual .flex-control-nav {bottom: 35px;}
.main-visual .flex-control-nav li {margin: 0 3px;}
.main-visual .flex-control-nav a {background: none;border: 3px solid #d4d4d4; -webkit-box-shadow: none;box-shadow: none;width: 15px;height: 15px;font-size: 0;}
.main-visual .flex-control-nav a:hover {background: none;border-color: #439ad9;}
.main-visual .flex-control-nav a.flex-active {background: none; border-color: #439ad9;}

.main-content {margin-bottom: -70px;}
.main-left {width: 730px;}
.main-left .erp {height: 119px;padding: 15px;position: relative;color: #fff;font-size: 11px;}
.main-left .erp h1 {font-size: 13px;color: #fff;}
.main-left .erp .more {position: absolute;right: 0;top: 0;margin-right: 20px;margin-top: 13px;}
.main-left .erp ul {font-size: 0;text-align: center;margin-top: 8px;}
.main-left .erp ul li img {display: block;margin: 0 auto 5px; opacity: 1}
.main-left .erp ul li {display: inline-block;margin: 0 9px;font-size: 11px;}
.main-left .erp ul li * {opacity: 0.7;}
.main-left .erp ul li:hover a {opacity: 1;}
.main-left .erp.service {background: #019bdf;margin-bottom: 2px;}
.main-left .erp.solution {background: #3e8ddd}
.main-left .erp.solution li {margin: 0 18px;}
.main-left .notice {width: 50%;height: 190px; float: left;padding: 20px 25px;border-left: 1px solid #ddd;position: relative;}
.main-left .notice h1 {font-size: 14px;height: 40px;font-weight: 500}
.main-left .notice .more {position: absolute;right: 0;top: 0;margin-right: 25px;margin-top: 20px;font-size: 11px;}
.main-left .notice li {position: relative;padding-right: 40px;line-height: 24px;}
.main-left .notice li .date {position: absolute;right: 0;top: 0;font-size: 11px;color: #888}
.main-left .notice li a {white-space: nowrap;overflow: hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;display: block;}
.main-left .apply {width: 50%;height: 190px; float: left;padding: 20px 26px;border-left: 1px solid #ddd;border-right: 1px solid #ddd;position: relative;}
.main-left .apply h1 {font-size: 14px;height: 40px;font-weight: 500}
.main-left .apply ul {font-size: 0;margin-top: -8px;}
.main-left .apply li {display: inline-block;margin-right: 10px;margin-bottom: 10px;}
.main-left .apply li:nth-child(2n+2) {margin-right: 0;}
.main-right {width: 360px;font-size: 0;}
.main-right .customer>div {padding: 20px 18px;padding-top: 35px;height: 181px;}
.main-right .customer>div ul {margin-top: 23px}
.main-right .customer>div li {display: inline-block;}
.main-right .partner {/* margin-top: -1px; */margin-bottom: 2px;}
.main-right .partner li {display: inline-block;}
.main-right .partner + ul {}
.main-right .partner + ul li+li {margin-top: 2px;}

/* SUB */
.sub-content-container {}
.snb {float: left;width: 240px;padding-right: 40px;}
.snb h1 {padding-top: 15px;line-height: 1;height: 50px;font-size: 20px;font-weight: 700;}
.snb a {display: block;}
.snb>ul {font-size: 13px;border-bottom: 1px solid #e6e6e6;}
.snb>ul>li {border-top: 1px solid #e6e6e6;font-weight: 500}
.snb>ul>li.active>a, .snb>ul>li:hover>a {color: #fff;background: #009bdf url(../img/arr_snb.png) no-repeat 90% 50%;}
.snb>ul>li.active ul {display: block;}
.snb>ul>li>a {line-height: 40px;padding-left: 15px;}
.snb ul ul {display: none;border-top: 1px solid #e6e6e6;background: #fafafa;font-size: 12px;padding-top: 10px;padding-bottom: 10px;}
.snb ul ul a {line-height: 24px;padding-left: 25px;}
.snb ul ul li:hover a {color:#009bdf;}
.snb ul ul li.active>a {color: #009bdf;font-weight: 500}
.sub-top-img {margin-bottom: 30px;}

.sub-content {position: relative;float: left;width: 860px;}
.sub-content h1 {font-size: 28px;height: 40px;font-weight: 500;display: inline-block;position: relative;margin-bottom: 40px;margin-top: 50px;}
.sub-content h1 b {color: #439ad9;font-weight: 500;}
.sub-content h1:before {content: "";display: block;width: 100%;height: 1px ;background: #439ad9;position: absolute;bottom: 0;z-index: 1;}
.sub-content h1:after {content: "";display: block;width: 860px;height: 1px ;background: #efefef;position: absolute;bottom: 0}
.sub-content h2 {font-size: 22px;letter-spacing: -1.5px;color: #439ad9;padding-bottom: 10px;border-bottom: 1px solid #439ad9;margin-bottom: 20px;}
.sub-content h3 {font-size: 16px;margin-top: 25px;margin-bottom: 15px;}
.sub-content .sub-title {display: block;margin-bottom: 10px;font-size: 14px;background: url(../img/bul_sub_title.png) no-repeat 0 50%;padding-left: 10px;}
.sub-content .help-block {margin-top: -10px;}
.sub-content p {font-size: 13px;color: #666;}

.breadcrumb {position: absolute;font-size: 12px; right: 0;top: -10px; padding-right: 0;z-index: 1; border-radius: 0;background: none;color: #666;margin-bottom: 0;}
.breadcrumb > li + li:before {content: ">"}
.breadcrumb > .active {color: #666;}

.sub-content .table-bordered td {line-height: 22px;}
.sub-content .table-bordered .btn {background: #fcfcfc;
background: -o-linear-gradient(top, #fcfcfc 2%,#f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #fcfcfc),to(#f2f2f2));
background: linear-gradient(to bottom, #fcfcfc 2%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f2f2f2',GradientType=0 );border-bottom-color: #bbb;float: right;}

.media-list {overflow: hidden;}
.media-list li {float: left;margin-right: 20px;margin-bottom: 20px;}
.media-list li:nth-child(4n+4) {margin-right: 0;}
.media-list li .media-thumb {width: 200px;height0: 170px;background: #747474;position: relative;}
.media-list li .media-thumb:after {content: "";display: block;position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.4) url(../img/ico_play.png) no-repeat 50% 50%;cursor: pointer;}
.media-list li .media-info {width: 200px;border: 1px solid #ccc;padding: 12px;white-space: nowrap;display: block;overflow:hidden;-o-text-overflow: ellipsis;text-overflow: ellipsis;text-align: center}

/* COMMUNITY */
.board-list .board-top {color: #888;line-height: 1;text-align: right;height: 20px; font-size: 12px;margin-top: -25px;}
.board-list .board-top b {font-weight: normal}
.board-search {background: #fdfdfd;border: 1px solid #ebebeb;padding: 15px;font-size: 12px;}
.board-search .search-form {width: 50%;margin: 0 auto;text-align: center;}
.board-search select.form-control {display: inline-block;background-image: url(../img/arr_select_board.gif) !important;background-repeat: no-repeat;background-position: 100% 50%; width: 20%;height: 24px;padding: 0;padding-left: 5px;font-size: 12px; vertical-align:top;}
.board-search input {display: inline-block;width: auto;height: 24px;font-size: 12px;}
.board-search .btn {width: 50px;height: 24px;padding: 0;font-size: 12px;vertical-align: top}

.board-list {font-size: 13px;}
.board-list table.table {border-bottom: 1px solid #e8e8e8;}
.board-list table.table thead {background: url(../img/bg_board_head.gif)}
.board-list table.table thead th {text-align: center;background: none !important; font-weight: normal;color: #333;border-bottom: 0;}
.board-list table.table tbody td {text-align: center;color: #777;}
.board-list .table tbody > tr:first-child td {border-color: #ddd;}
.board-list table.table tbody td.title {text-align: left;}
.board-list table.table tbody td.title img {font-variant-numeric: normal;margin-left: 5px;margin-top: -2px;}
.board-list table.table .reply .title {padding-left: 20px;}
.board-list .btn-box {display: inline-block;float: right;padding: 0;margin-top: -63px;position: relative;text-align: right;z-index: 2;}
.board-list .btn-box .btn {min-width: 150px;font-size: 17px;}

.board-view {font-size: 13px;}
.board-view table.table {}
.board-view table.table tbody>tr:first-child>th, .board-view table.table tbody>tr:first-child>td {border-top: 1px solid #ddd;}
.board-view table.table th {background-color: #fafafa; color: #333;font-weight: normal;}
.board-view table.table td img {vertical-align: -2px;}
.board-view .btn-box .btn {min-width: 150px;font-size: 17px;}
.board-view .board-con img {max-width:100%;vertical-align: top}
.board-view .reply td {background:#f7f7f7;}

@media all and (max-width:420px) {
    .table {font-size:12px;}
    .board-view table.table colgroup {display:none;}
    .board-view table.table th, .board-view table.table th+td {white-space:nowrap;}
}

.board-write {font-size: 13px;}
.board-write .help-block {font-size: 14px;margin-bottom: 25px;}
.board-write table.table {}
.board-write table.table tbody>tr:first-child>th, .board-write table.table tbody>tr:first-child>td {border-top: 1px solid #ddd;}
.board-write table.table th {background-color: #fafafa;color: #333;padding-left: 30px;font-weight: normal;vertical-align: middle;}
.board-write table.table td {color: #777;vertical-align: middle;}
.board-write .btn-box .btn {min-width: 150px;font-size: 17px;}
.board-write .board-con img {width:100%;}
.board-write label {line-height:30px;}
.board-write input[type="radio"] + label:before {vertical-align: -2px;}

.pagination {padding: 30px 0;text-align: center;font-size: 11px;}
.pagination a {display: inline-block;width: 25px;height: 25px;line-height: 25px;border: 1px solid #ededed;}
.pagination a:hover {background: #f3f3f3}
.pagination .active {color: #439ad9}

/* POPUP */
.popup {max-height: 75%;min-width: 640px;max-width:640px; margin: 0 auto;position: fixed;top: 50%;left: 50%; z-index: 5555;border: 1px solid #222;background: #fff;overflow: auto;-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.7);box-shadow: 0 0 9px rgba(0,0,0,0.7);display: none;}
.popup .popup-heading {width: 100%;height: 60px;background: #2c2c2c;color: #fff;position: relative;z-index: 2;}
.popup .popup-heading img {margin-right: 5px;}
.popup .popup-heading h1 {padding: 0 25px;font-size: 18px;line-height: 58px;}
.popup .popup-heading .btn-x {width: 17px;height: 17px;padding: 0;display: block;background: url(../img/40.close.png) no-repeat 50% 50%;border: 0;font-size: 0; position: absolute;right: 20px;top: 50%;margin-top: -8px;}
.popup .popup-body {padding: 30px;color: #898989;background: #fff;}
.popup .popup-footer {padding: 30px;border-top: 1px solid #ddd;}

.popup.item-detail {width:80%;height:auto;max-height:800px;max-width:inherit;}
.popup.item-detail .btn-x {width: 25px;height: 25px;padding: 0;display: block;background: url(../img/40.close.png) no-repeat 50% 50%;border: 0;font-size: 0; position: absolute;right: 15px; top: 15px;z-index: 99}
.popup.item-detail .popup-body {padding:35px 40px;}
.popup.item-detail .popup-body img {cursor:pointer;}

/* TAB */
.tab-nav {font-size: 0;position: relative; margin-bottom: 20px;}
.tab-nav li {display: inline-block;vertical-align: top;width: 100px;font-size: 13px;}
.tab-nav li:first-child {width: 102px;}
.tab-nav.col-2 li {width: 50%;}
.tab-nav.col-3 li {width: 33.3333%;}
.tab-nav.col-4 li {width: 25%;}
.tab-nav.col-5 li {width: 20%;}
.tab-nav a {font-size: 13px;border: 1px solid #ddd;margin-left: -1px;border-bottom-color: #439ad9;vertical-align: middle;display: block;height: 50px;line-height: 48px; background: #fff; text-align: center;}
.tab-nav li.active a {background: #fff;color: #439ad9; border-color: #439ad9;border-bottom-color: #fff; position: relative;z-index: 1;}
.tab-contents {}
.tab-contents .tab-item {display: none;}

.map-list ul {}
.map-list ul li {display:inline-block; width:20%; margin:0 2.2%; vertical-align:top;}
.map-list ul li dt {font-size:16px; color:#439ad9; height:30px; border-bottom:1px solid #eee; margin-bottom:10px;}
.map-list ul li dd {font-size:13px; text-indent:5px; margin-top:10px; color:#333;}
.map-list ul li dd ul {margin-top:-5px;}
.map-list ul li dd ul li {display:block; width:100%; color:#777; font-size:12px; text-indent:10px;}