@charset "utf-8";

:root {
  --h-black: #222222;
  --h-gray: #7C7A78;
  --h-gray-light: #9A9DA0;
  --h-gray-dark: #42403D;

  --h-primary: #F37321;
  --h-secondary: #F89B6C;
  --h-border: #E5E5E5;
  --h-border-dark: #C5C5C6;
  --text-link: #1050e7;

  --small-radius: 8px;
  --medium-radius: 16px;
  --large-radius: 24px;
  --left-width: 320px;
  --left-main-menu-width: 80px;
  --left-sub-menu-width: 240px;
  --top-height: 60px;

  --h-bg: #F6F7F9;
  --h-hover-bg: #FFF7EF;
  --h-hover-border: #F89B6C;
  --h-bg-primary: #fef1e8;
  --h-bg-left: #5D5D65;

  --h-grid-subtotal-bg: #eaeef7;
  --h-grid-subtotal-bd: #dedede;
  --h-grid-footer-bg: #dde2ed;
  --h-grid-footer-bd: #d3d3d3;

  --h-disabled: #E5E6E7;
  --h-disabled-text: #92929D;
  --h-disabled-bg: #EDEDED;
  --h-required: #E4614B;
  --h-required-bg: #FFF0ED;

  --h-shadow: 0 4px 8px rgba(0, 0, 0, 12%);
  --h-shadow2: 3px 2px 12px -2px #4D7D7E12;
  --color-a :#f98a1a;
  --color-b: #15a2bc;
  --color-c: #ffc600;
  --color-d: #a188e0;
}

.inner {
  position: relative;
  width: 100%;
  height: 100%
}

.wrap {
  position: relative;
  height: 100%;
  overflow: hidden
}
.txt_gray{color:#908c89}
.widauto{width:auto}
.wid10{width:10%}
.wid20{width:20%}
.wid30{width:30%}
.wid40{width:40%}
.wid50{width:50%}
.wid60{width:60%}
.wid70{width:70%}
.wid80{width:80%}
.wid90{width:90%}
.widfull{width:100%}
/*PO Login*/
.po_login {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
}
.po_login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 136%;
    height: 108%;
    background-image: url(/resources/images/hanwha-building02.jpg);
    background-size: cover;
    background-position: left 0px;
    background-repeat: no-repeat;
    opacity: 0.45;
    z-index: -1;
}
.po_login::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 0;
    width: 100%;
    height: 50%;
    background: white;
    z-index: 0;
}

.po_login_wrap {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--h-shadow2);
    box-shadow: 2px 3px 16px 4px #6d899c36;
  z-index: 2;
}
.copyright {
  z-index: 2;
}

.po_login_top {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-82px);
}

.po_login_top>h1 {
  display: block;
  width: 165px;
  height: 88px;
  text-indent: -9999px;
  background: url(/resources/images/layout/po/po_logo.png) 0 0 no-repeat;
}

.po_login_top .po_login_titinfo {
  display: none;
  width: 500px;
  text-align: center;
  font-size: 19px;
  color: #fff
}


/* left area -----------------------------------------*/
.po_login_wrap .left {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  box-sizing: border-box;
}

.po_login_wrap .left > div:has(.logo) {
  width: 100%;
  /* 시각보정 */
  margin-left: -16px;
  gap: 4px;
}
.po_login_wrap .left div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.po_login_wrap .left div .logo {
  width: 146px;
  min-height: 56px;
  text-indent: -9999px;
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  background-image: url(/resources/images/layout/logo_henc.svg);
}

.po_login_wrap .left div .title {
  font-size: 14px;
  font-family: 'Hanwha';
  font-weight: 500;
  flex-shrink: 0;
  /* 시각 보정 */
    padding-top: 2px;
}

.po_login_wrap .left form>input {
  height: 36px !important;
  line-height: 36px;
  background: none;
}

.po_login_wrap .left form>input:first-child {
  margin-bottom: 16px;
}

.po_login_wrap .left form>input::placeholder {
  color: var(--h-disabled-text);
}

.po_login_wrap .left .login-help {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pw_link {
  font-size: 13px;
  color: var(--h-gray);
    letter-spacing: -0.5px;
}
/* button all style - left, right  */
/* .po_login_wrap .left .btn_login { */
.po_login_wrap .w2anchor2:not(.pw_link) {
  display: block;
  width: 100%;
  height: 36px;
  background: var(--h-primary);
  color: white;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* right area -----------------------------------------*/
.po_login_wrap .right {
  height: 100%;
  width: 420px;
  background: #5D5D65;
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 40px;
}

.po_login_wrap .right>div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: -webkit-fill-available;
}

.po_login_wrap .right>div:last-child {
  flex: 1;
  max-height: 200px;
}

.po_login_wrap .right .title {
  font-size: 16px;
  font-weight: 500;
  color: white;
}

.po_login_wrap .right .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.po_login_wrap .right .btn_link_item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 6px);
}

/* .po_login_wrap .right .notice { */
.notice {
  background: rgba(256, 256, 256, 0.2);
  border-radius: 6px;
  flex: 1;
  overflow: hidden;
}

/* .po_login_wrap .right .notice ul { */
.notice ul {
  padding: 12px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 148px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: inherit;
}

/* Chrome, Edge, Safari */
.po_login_wrap .right .notice ul::-webkit-scrollbar {
  width: 4px;
}
.po_login_wrap .right .notice ul::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 16px;
}
.po_login_wrap .right .notice ul::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding-right: 4px;
}
.po_login_wrap .right .notice ul::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* Firefox */
.po_login_wrap .right .notice ul {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.45) rgba(0, 0, 0, 0.12);
}

/* .po_login_wrap .right .notice ul li { */
.notice ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 26px;
  position: relative;
}

/* .po_login_wrap .right .notice ul li::before { */
.notice ul li::before {
  content: 'ㆍ';
  display: inline-block;
  /* width: 4px; */
  /* height: 4px; */
  /* background: white; */
  position: absolute;
  left: 2px;
}

/* .po_login_wrap .right .notice ul li:hover { */
.notice ul li:hover {
  color: var(--h-secondary);
  cursor: pointer;
}


/* .po_login_wrap .right .notice ul li div { */
.notice ul li div {
  align-content: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 16px;
  flex: 1;
}

.po_login_wrap .right .notice ul li span {
  font-weight: 300;
  font-size: 13px;
  width: 52px;
  flex-shrink: 0;
}

.policy {
  z-index: 10;
  width: 120px;
  display: flex;
  justify-content: center;
}
.policy::before {
  content: '';
  width: 1px;
  height: 10px;
  background: var(--h-border);
  margin: 2px 12px;
}
.policy a {
  color: var(--h-primary);
  font-weight: 600;
    flex-shrink: 0;
}

/*PO Layout*/
.po_inner {
  position: relative;
  width: 100%;
  height: 100%
}

.po_wrap {
  position: relative;
  height: 100%;
  overflow: hidden
}

.po_container {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff
}

.po_container .w2tabcontrol.fm_tab>.w2tabcontrol_tabhost {
  display: none
}

.po_container .w2tabcontrol.fm_tab>.w2tabcontrol_container>.w2tabcontrol_contents {
  top: 0
}

/*PO Top*/
.po_top {
  height: 60px;
  position: relative;
  box-sizing: border-box;
  border-bottom: 1px solid var(--h-border);
  z-index: 1002;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.po_top .left_wrap {
  height: 100%;
  display: flex;
  align-items: center;
}

.po_top .po_logo {
  width: 200px;
  height: 100%;
  text-indent: -9999px;
  cursor: pointer;
  background: url(/resources/images/layout/logo_henc.svg) left / auto 70px no-repeat;
}

/* sub-logo */
.po_top .sub-logo {
  font-family: 'FORENA', sans-serif;
  font-size: 18px;
  display: flex;
    align-items: center;
  gap: 4px;
}
.po_top .sub-logo .system {
  color: var(--h-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
  font-size: 28px;
}
.po_top .sub-logo .divider {
  width: 1px;
  height: 16px;
  background-color: var(--h-border);
  margin: 4px;
}
.po_top .sub-logo .module {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--h-black);
}
.po_top .sub-logo .module::after {
  content: '외주협력사시스템';
  font-size: 11px;
  color: var(--h-gray-light);
}

/*PO Top rightArea*/
.po_top .right_wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-right: 20px;
}

.po_top .po_info {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.po_top .po_info .trade_txt {
  color: var(--h-black);
  font-weight: 500;
}

.po_top .po_info .btn_po_top {
  font-size: 12px;
  padding: 4px 8px;
  color: var(--h-primary);
  background-color: var(--h-bg-primary);
  border: 1px solid var(--h-primary);
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
}

/* .po_top .po_info .btn_po_top:hover {
  background-color: var(--h-bg-primary);
} */
.po_top .po_util {
  display: flex;
  gap: 24px;
}

.po_top .po_util li {
  position: relative;
}
.po_top .po_util li .w2anchor2 {
  color: var(--h-black);
}

.po_top .po_util li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--h-secondary);
  border-radius: 6px;
  top: 6px;
  left: -16px;
  position: absolute;
}

.po_top .po_util li .badge {
  position: absolute;
  display: inline-block;
  right: -5px;
  top: -5px;
  padding: 0 6px;
  line-height: 19px;
  min-width: 5px;
  background: #ec1d27;
  color: #fff;
  font-size: 12px;
  text-align: center;
  border-radius: 19px;
  text-indent: 0;
  z-index: 10
}

.po_top .po_util + .timer a {
  color: var(--h-black)
}

.po_top .po_util + .timer .time {
  margin-right: 8px;
  position: relative;
  padding-left: 18px;
  color: red;
    font-weight: 500;
}

.po_top .po_util + .timer .time::before {
  content: "\e966";
  font-family: 'icomoon';
  font-size: 14px;
  position: absolute;
    top: 4px;
    left: 0;
    color: var(--h-primary);
}

/*PO Lnb*/
.po_left {
  position: absolute;
  z-index: 1001;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--left-width);
  overflow: hidden;
  background: #F9F7F6;
}

.po_left .navi {
  background: var(--h-bg-left);
  width: var(--left-main-menu-width);
  height: 100%;
}

.po_left .navi>ul>li .link_wrap {
  position: relative;
  height: 78px;
  cursor: pointer;
  box-sizing: border-box;
}

.po_left .navi>ul>li.on .link_wrap {
  width: 100%;
  background: var(--h-primary);
}
.po_left .navi>ul>li.on .link_wrap > a::before {
  color: var(--h-bg-primary);
}

.po_left .navi>ul>li .link_wrap>a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  cursor: pointer;
  gap: 8px;
}

/* menu icon - icomoon */
.po_left .navi>ul>li .link_wrap>a::before {
  /* 기본 아이콘 - 마이메뉴 */
  font-family: 'icomoon';
  font-size: 22px;
  color: white;
  background: transparent;
  padding: 4px;
  border-radius: 40px;
  color: var(--h-secondary);
}
/* 외주업무 */
.po_left .navi>ul>li .link_wrap > a.PO10::before {
  content: '\e910';
}
/* 자재업무 */
.po_left .navi>ul>li .link_wrap > a.PO15::before {
  content: '\e913';
}
/* 보증보험 */
.po_left .navi>ul>li .link_wrap > a.PO30::before {
  content: '\e95c';
}
/* 실적증명 */
.po_left .navi>ul>li .link_wrap > a.PO35::before {
  content: '\e927';
}
/* 소통창구 */
.po_left .navi>ul>li .link_wrap > a.PO45::before {
  content: '\e934';
}
/* 자사정보 */
.po_left .navi>ul>li .link_wrap > a.PO50::before {
  content: '\e935';
}

.po_left .sub_wrap {
  position: absolute;
  width: var(--left-sub-menu-width);
  left: var(--left-main-menu-width);
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--h-border);
  box-sizing: border-box;
}

/* PO Lnb Sub */
.po_left .sub_wrap .sub {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 16px 16px 16px 0;
  box-sizing: border-box;
  overflow-y: auto;
}

/* scrollbar style */
.po_left .sub_wrap .sub::-webkit-scrollbar {
  width: 6px;
}

.po_left .sub_wrap .sub::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}

.po_left .sub_wrap .sub::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 16px;
}

.po_left .sub_wrap .sub ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 2depth menu */
.po_left .sub_wrap .sub>ul>li>a {
  position: relative;
  padding: 14px 20px;
  color: var(--h-black);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  background: rgba(233, 233, 233, 0.55);
  border-radius: 0 30px 30px 0;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 2depth menu icon */
.po_left .sub_wrap .sub>ul>li>a::before {
  content: '\e95b';
  font-family: 'icomoon';
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: var(--h-gray);
  background: white;
  border-radius: 20px;
  order: 2;
}

/* 2depth 하위에 3depth li가 없으면 icon 숨기기 */
.po_left .sub_wrap .sub>ul>li:not(:has(ul li)) > a::before {
  display: none;
}

.po_left .sub_wrap .sub>ul>li>a:hover {
  background-color: var(--h-hover-bg);
  color: var(--h-primary);
  padding-left: 24px;
}

/* on 2depth menu icon */
.po_left .sub_wrap .sub>ul>li.on>a::before {
  content: '\e90f';
  font-family: 'icomoon';
  color: var(--h-primary);
  background-color: white;
}

/* 2depth 열린탭 표시 */
.po_left .sub_wrap .sub>ul>li>a.openedTab, 
.po_left .sub_wrap .sub>ul>li>a:hover::before {
  color: var(--h-primary);
  background: var(--h-bg-primary);
}


.po_left .sub_wrap .sub>ul>li>ul {
  display: none
}

.po_left .sub_wrap .sub>ul>li.on>ul {
  display: block;
  padding: 5px 0 7px
}

.po_left .sub_wrap .sub>ul>li.on>ul>li>a {
  color: var(--h-black);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 36px;
  margin-left: 16px;
  padding-left: 12px;
}

.po_left .sub_wrap .sub>ul>li.on>ul>li>a:hover {
  color: var(--h-primary);
  padding-left: 16px;
}

.po_left .sub_wrap .sub>ul>li.on>ul>li>a::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: var(--h-border);
  border-radius: 16px;
  position: absolute;
  left: 12px;
}

/* 3depth 열린탭 표시 */
.po_left .sub_wrap .sub>ul>li.on>ul>li>a.openedTab::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #ff840a;
  border-radius: 16px;
  position: absolute;
  left: 12px;
}

/*PO Contents*/
.po_contents {
  position: absolute;
  left: var(--left-width);
  right: 0px;
  top: 0;
  bottom: 0;
  box-sizing: border-box
}

.po_contents .po_inner {
  overflow-x: auto;
  overflow-y: hidden;/* auto → hidden */
}

.po_contents .content_body {
  min-width: 1066px;
}

/*PO Main*/
.po_main_wrap {
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
}

.po_main_wrap .hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  flex: 1 1 70%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url(/resources/images/layout/po-hero.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px;
  position: relative;
}

.po_main_wrap .hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(178 136 92 / 25%);
}

.po_main_wrap .hero .po-tabs {
  margin-bottom: 20px;
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 40px;
  z-index: 2;
}

.po_main_wrap .hero .po-tabs a {
  color: white;
  padding: 8px 20px;
  border-radius: 40px;
  font-weight: 600;
} 
.po_main_wrap .hero .po-tabs a:hover {
  background: rgba(255, 255, 255, 0.25);
}

.po_main_wrap .hero .po-tabs a.on {
  background: var(--h-primary);
}

.po_main_wrap .hero ul {
  display: flex;
  gap: 20px;
  width: 100%;
  color: white;
}

.po_main_wrap .hero ul li {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(233, 233, 233, 0.5);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  max-width: 180px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.po_main_wrap .hero ul li:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(-4px);
  box-shadow:
    0 8px 32px rgba(214, 104, 49, 0.25),
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.po_main_wrap .hero ul li .title {
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.po_main_wrap .hero ul li .title::after {
  content: '\e932';
  font-family: 'icomoon';
  font-size: 24px;
  font-weight: 100;
  opacity: 0.5;
}

.po_main_wrap .hero ul li .title.site::after {
  content: '\e938';
}

.po_main_wrap .hero ul li .title.bidding::after {
  content: '\e92a';
}

.po_main_wrap .hero ul li .title.contract::after {
  content: '\e909';
}

.po_main_wrap .hero ul li .title.payment::after {
  content: '\e932';
}

.po_main_wrap .hero ul li .title.certificate::after {
  content: '\e92e';
}

.po_main_wrap .hero ul li .count {
  display: flex;
  align-items: center;
}

.po_main_wrap .hero ul li .count div {
  font-size: 28px;
  font-weight: 500;
  margin-right: 4px;
}

.po_main_wrap .hero ul li .count span {
  height: 6px;
}

.po_main_wrap .boards {
  display: flex;
  gap: 20px;
  flex-direction: row;
  flex-basis: 24%;
  padding: 32px;
}

.po_main_wrap .boards .board {
  background: var(--h-bg);
  border-radius: 20px;
  padding: 20px;
  flex: 1;
}

.po_main_wrap .boards .board .title {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}

.po_main_wrap .boards .board .title h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.po_main_wrap .boards .board .title h3::before {
  content: '\e931';
  font-family: 'icomoon';
  font-size: 20px;
  font-weight: 200;
  color: var(--h-primary);
}

.po_main_wrap .boards .board .title h3+a {
  font-size: 13px;
  color: white;
  background: var(--h-black);
  border-radius: 40px;
  padding: 6px 12px;
}

.po_main_wrap .boards .board .notice ul {
  color: var(--h-black);
  padding: 0;
}


.po_main_wrap .po_ct_wrap {
  width: 1300px;
  margin: 0 auto;
  box-sizing: border-box
}

.po_main_wrap .po_main_top {
  height: 596px;
  overflow: hidden
}

.po_main_top.po_m01 {
  background: #f9f9f9 url(/resources/images/layout/po/bg_main01.png) 0 0 no-repeat
}

.po_main_top.po_m02 {
  background: #a7babf url(/resources/images/layout/po/bg_main02.png) 0 0 no-repeat
}

.po_main_top.po_m03 {
  background: url(/resources/images/layout/po/bg_main03.png) 0 0 no-repeat, url(/resources/images/layout/po/bg_main03_rpt.png) 0 0 repeat-x
}

.po_main_top.po_m04 {
  background: #e9efea url(/resources/images/layout/po/bg_main04.png) 0 0 no-repeat
}

.po_main_top .po_main_title {
  margin-top: 60px;
  text-align: center;
  display: inline-block
}

.po_main_title .po_main_tit {
  display: inline-block;
  font-size: 35px;
  color: #000;
  font-weight: bold;
  letter-spacing: -2px
}

.po_main_title .po_main_titinfo {
  letter-spacing: -2px;
  margin-top: 10px;
  font-size: 20px;
  color: #000;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  line-height: 37px;
  padding-bottom: 4px
}

.po_main_tabs {
  width: 100%;
  margin: 43px auto
}

.po_main_tabs>a {
  display: inline-block;
  min-width: 170px;
  height: 48px;
  text-align: center;
  line-height: 46px;
  padding: 0 15px;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  color: #4a4846;
  border: 1px solid #c4c4c4;
  border-left: 0;
  box-sizing: border-box;
  overflow: hidden
}

.po_main_tabs>a:first-child {
  border-left: 1px solid #c4c4c4
}

.po_main_tabs>a:hover {
  background-color: #6f6d6a;
  border-color: #6f6d6a;
  color: #fff
}

.po_main_tabs>a.on {
  border-color: #4a4846;
  background-color: #4a4846;
  color: #fff
}

.po_main_tabs .po_main_tabcont {
  position: relative;
  margin-top: 70px;
}

.po_main_tabs .po_main_tabcont .po_main_links {
  position: absolute;
  width: 100%
}

.po_main_links .po_link {
  display: inline-block;
  width: 190px;
  height: 163px;
  margin: 0 15px;
  padding: 22px;
  text-align: left;
  cursor: pointer;
  vertical-align: top;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  overflow: hidden
}

.po_link .po_link_tit{display:inline-block;font-size:25px;color:#fff;width:100%;overflow:hidden;white-space:nowrap}
.po_link .po_link_cont{text-align:right;margin-top:55px;line-height:30px;overflow:hidden}
.po_link .po_link_cont .plc_value{display:inline-block;width:120px;font-size:30px;font-weight:bold;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po_link .po_link_cont .plc_txt{font-size:17px;color:#d7d7d7;margin-left:8px;display: inline-block;vertical-align:top;margin-top:3px}
.po_main_links .po_link.b01{background:#2d5b97 url(/resources/images/layout/po/ico_m01.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b01{background-color:#2a548a}
.po_main_links .po_link.b02{background:#e4b226 url(/resources/images/layout/po/ico_m02.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b02{background-color:#daab27}
.po_main_links .po_link.b03{background:#027a88 url(/resources/images/layout/po/ico_m03.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b03{background-color:#026b77}
.po_main_links .po_link.b04{background:#f45656 url(/resources/images/layout/po/ico_m04.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b04{background-color:#e85454}
.po_main_links .po_link.b05{background:#13a672 url(/resources/images/layout/po/ico_m01.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b05{background-color:#139668}
.po_main_links .po_link.b06{background:#7d4db9 url(/resources/images/layout/po/ico_m04.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b06{background-color:#69419c}
.po_main_links .po_link.b07{background:#6a7287 url(/resources/images/layout/po/ico_m05.png) left 20px bottom 15px no-repeat}
.po_main_links .po_link:hover.b07{background-color:#5f6679}

.po_ct_wrap.mcont{margin-top:-65px;padding:10px;background:url(/resources/images/layout/po/bg_main_cont.png) 0 0 no-repeat}
.po_main_contents{width:1280px;margin:0 auto;padding:55px 60px;box-sizing:border-box;overflow:hidden;background-color:#fff}
.po_main_contents .po_main_board{float:left;width:410px;box-sizing:border-box;margin-right:60px}
.po_mboard_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.po_mboard_top .mb_title {
  font-size: 16px;
  color: var(--h-black);
}

.po_mboard_top .mb_btn_more {
  width: 23px;
  height: 23px;
  text-indent: -9999px;
    box-sizing: border-box;
    background: var(--h-bg-primary);
}
.po_mboard_top .mb_btn_more:hover {
  background-color: #f9f9f9
}
.po_main_board .po_mboard_cont{width:100%;overflow:hidden;padding-top:20px}
.po_main_board .po_mboard_cont > ul > li{line-height:2}
.po_main_board .po_mboard_cont > ul > li:before{display:inline-block;content:'';width:3px;height:3px;margin-right:10px;background:#4a4846;vertical-align:middle}
.po_main_board .po_mboard_cont > ul > li .po_brd_link{display:inline-block;width:312px}
.po_main_board .po_mboard_cont > ul > li .po_brd_link > a{display:inline-block;max-width:295px;overflow:hidden;font-weight:bold;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.po_main_board .po_mboard_cont > ul > li .po_brd_link > a:hover{text-decoration:underline}
.po_main_board .po_mboard_cont > ul > li .po_brd_link > a:visited{color:#8c7e71;font-weight:normal}
.po_main_board .po_mboard_cont > ul > li .po_brd_txt{display:inline-block;text-align:right;width:75px;margin-left:10px;color:#908c89;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.po_mboard_cont .ico_new{display:inline-block;width:12px;height:12px;margin-top:2px;margin-left:5px;text-indent:-9999px;background:url(/resources/images/layout/ico_new.png) 0 0 no-repeat;vertical-align:middle}

.po_main_contents .po_main_btns{float:left;width:220px;padding-top:50px;box-sizing:border-box}
.po_main_btns > a{display:block;border:1px solid #e9e9e9;background-color:#f3f3f3;background-position:18px 50%;background-repeat:no-repeat;border-radius:4px;height:65px;line-height:64px;color:#000;font-size:16px;padding-left:90px;box-sizing:border-box}
.po_main_btns > a:hover{border-color:#d7d7d7}
.po_main_btns > a + a{margin-top:10px}
.po_main_btns > a.cs{background-image:url(/resources/images/layout/po/po_main_btn01.png)}
.po_main_btns > a.manual{background-image:url(/resources/images/layout/po/po_main_btn02.png)}


/*PO FAQ*/
.faq_wrap > .question{border-top:1px solid #e8e8e8;padding:13px 20px;box-sizing:border-box;cursor:pointer}
.faq_wrap > .answer{background:#eee;padding:13px 20px;box-sizing:border-box}
.faq_wrap:last-child{border-bottom:1px solid #e8e8e8}
.ico_qna{display:inline-block;width:23px;height:23px;margin-right:10px;line-height:21px;border-radius:100%;background:#675237;text-align:center;font-size:15px;color:#fff;vertical-align:top}
.faq_wrap > .answer .ico_qna{background:#ed1b23}
.faq_txt{display:inline-block;font-size:15px;color:#000;vertical-align:middle;max-width:95%}

/*PO 議곗쭅�룄*/
.org_chart_wrap{position:relative;width:680px;margin:0 auto;background:url(/resources/images/layout/po/bg_org_chart.png) 50% 45px no-repeat;text-align:center;padding-bottom:40px;box-sizing:border-box}
.org_chart_wrap.orgbg1{background-image:url(/resources/images/layout/po/bg_org_chart1.png)}
.org_chart_wrap.orgbg2{background-image:url(/resources/images/layout/po/bg_org_chart2.png)}
.org_chart_wrap .org_top > span{display:inline-block;min-width:200px;height:45px;padding:0 10px;line-height:43px;border-radius:6px;text-align:center;color:#ddaf51;font-weight:bold;background:#444433;overflow:hidden;box-sizing:border-box}
.org_chart_wrap .org_list{display:inline-block;margin-top:35px;width:180px;vertical-align:top}
.org_chart_wrap .org_list > li{width:100%;box-sizing:border-box;height:37px;line-height:35px;padding:0 10px;overflow:hidden;border-radius:4px;text-align:center;color:#000;background:#fff;border:1px solid #806b47}
.org_chart_wrap .org_list > li.org_group{font-weight:bold;color:#fff;background:#995a3d;border-color:#995a3d}
.org_chart_wrap .org_list > li + li{margin-top:10px}
.org_chart_wrap .org_list + .org_list{margin-left:70px}

/*紐⑥쭛怨듦퀬 �뙘�뾽*/
.recruitment_wrap{width:700px;background:url(/resources/images/layout/po/pop_bg.png) 0 0 no-repeat;box-sizing:border-box}
.recruitment_wrap .rc_pop_header{height:33px;text-align:center;padding:5px;background:rgba(74, 72, 70, 0.97);overflow:hidden;box-sizing:border-box}
.recruitment_wrap .rc_pop_header > h1{font-weight:normal;font-size:15px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.recruitment_wrap .rc_pop_contents{padding:20px 25px;box-sizing:border-box}
.rc_pop_contents .defaultbox > h3{font-size:15px;color:#000}
.rc_pop_contents .tit_sub{margin-left:5px;font-size:13px;font-weight:normal}
.rc_pop_contents .rcbox{margin-top:15px;padding-top:15px;border-top:1px solid #e8e8e8;line-height:1.5em}
.rc_pop_contents .emd_txt{font-weight:bold;text-decoration:underline}
.rcbox .w2tb.info_tbl .w2tb_td{padding:10px 15px}
.rcbox .w2tb.info_tbl .w2tb_td.bg_gry{background:#f0f0f0}
.rc_info_list > li{width:100%;margin-bottom:10px;overflow:hidden}
.rc_info_list > li .rc_info_tit{float:left;width:140px;font-size:14px;color:#4a4846;font-weight:bold;box-sizing:border-box}
.rc_info_list > li .rc_info_tit::before{display:inline-block;content:'';width:3px;height:3px;border-radius:100%;margin:0 7px 2px 0;background:#000;vertical-align:middle}
.rc_info_list > li .rc_info_txt{float:left;font-size:14px;color:#000}
.rc_list > li{line-height:1.7em}
.rc_list > li::before{display:inline-block;content:'';width:3px;height:3px;border-radius:100%;margin:0 10px 2px 0;background:#000;vertical-align:middle}
.rc_compbox{width:100%;overflow:hidden}
.rc_compbox .left_side{float:left}
.rc_compbox .left_side > *{display:inline-block;vertical-align:top;margin-top:5px}
.rc_compbox .link_tit{margin-left:15px;color:#181818}
.rc_compbox .rc_link{background:#ee393e;color:#fff;font-weight:bold}
.rclinks{color:#8e804c;text-decoration:underline;vertical-align:middle}
.rc_grybox{margin-top:10px;padding:15px;box-sizing:border-box;background:#f7f7f7;margin-left:25px}
a.btn_mcm{display:inline-block;margin-left:5px;min-width:10px;padding:0 10px;border-radius:5px;height:27px;line-height:25px;color:#fff;background-color:#959478;vertical-align:middle;overflow:hidden;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
a.btn_mcm:hover,a.btn_mcm:active{background-color:#a5a48c !important}