@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap");
* {
  font-family: 'Noto Sans KR', 'Nanum Gothic', 'NanumBarunGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', '돋움', sans-serif, serif;
  box-sizing: border-box;
}

:root {
  --tx-width: 360px;
  --xs-width: 576px;
  --sm-width: 768px;
  --md-width: 1024px;
  --lg-width: 1280px;
  --tx-width-em: 28em;
  --xs-width-em: 36em;
  --sm-width-em: 48em;
  --md-width-em: 64em;
  --lg-width-em: 80em;
  --tx-font-size: 0.8rem;
  --xs-font-size: 0.9rem;
  --sm-font-size: 1rem;
  --md-font-size: 1.4rem;
  --lg-font-size: 2rem;
  --master-color: #995DF9;
  --main-color: #F8B300;
  --primary-color: #007A9F;
  --second-color: #FF48CA;
  --warning-color: #FF9367;
  --error-color: #ff5e93;
}

html, body {
  font-size: 16px;
  font-weight: 300;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  html .main-body, html .sub-body, body .main-body, body .sub-body {
    font-size: 14px;
  }
}

.xs-visible {
  display: none !important;
}

@media screen and (max-width: 540px) {
  .xs-visible {
    display: block !important;
  }
}

.py-ui {
  position: relative;
  font-size: 16px;
  font-weight: 300;
  box-sizing: border-box;
}

.py-ui .master-color {
  color: var(--master-color);
}

.py-ui .second-color {
  color: var(--second-color);
}

.py-ui .main-color {
  color: var(--main-color);
}

.py-ui .error-color {
  color: var(--error-color);
}

.py-ui input {
  font-weight: 300;
}

.py-ui div {
  box-sizing: border-box;
}

.py-ui h1, .py-ui h2, .py-ui h3, .py-ui h4, .py-ui h5, .py-ui h6 {
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.py-ui a {
  color: var(--link-color);
}

.py-ui a:visited {
  color: var(--link-color);
}

.py-ui a:hover, .py-ui a:active, .py-ui a:focus {
  color: var(--link-color-hover);
}

.py-ui p {
  margin-top: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
}

.py-ui .container-fluid {
  padding-right: 1.9rem;
  padding-left: 1.9rem;
}

.py-ui .container {
  width: 1320px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.py-ui .coming-soon {
  padding: 100px;
  text-align: center;
}

.py-ui .coming-soon img {
  max-width: 680px;
}

.py-ui .py-sidebar .header {
  background: url(/softflex/static/images/sample_sub_bg.jpg) no-repeat;
  background-size: cover;
  height: 200px;
  position: relative;
}

.py-ui .py-sidebar .header::before {
  background: rgba(0, 0, 0, 0.6);
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.py-ui .py-sidebar .header .bland {
  z-index: 3;
  position: absolute;
  top: 5px;
  left: 5px;
}

.py-ui .py-sidebar .header a {
  color: #ddd;
  z-index: 4;
}

.py-ui .py-sidebar .body-footer {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.py-ui .py-sidebar .body-footer a {
  display: block;
  padding: 10px;
}

.py-ui header.py-header {
  height: 70px;
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.py-ui header.py-header.sticky {
  background-color: rgba(0, 0, 0, 0.5);
  height: 70px;
  z-index: 9999;
}

.py-ui header.py-header:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.py-ui header.py-header.opend .nav-bg {
  height: 200px !important;
}

.py-ui header.py-header .bland {
  width: 300px;
}

.py-ui header.py-header .bland.bland-logo a {
  display: flex;
  color: #fff;
  align-items: center;
  gap: 5px;
}

.py-ui header.py-header .bland.bland-logo a span {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 5px 10px;
  background: #ab611f;
  background: radial-gradient(circle, #e9b486 0%, #e0590a 100%);
  border-radius: 10px 0px 10px 0px;
}

.py-ui header.py-header .bland.bland-logo a strong {
  font-size: 1.6rem;
  text-shadow: 1px 1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, -1px -1px 0 #666, 1px 0px 0 #666, 0px 1px 0 #666, -1px 0px 0 #666, 0px -1px 0 #666;
}

.py-ui header.py-header .nav-bar {
  flex: 1;
}

.py-ui header.py-header .nav-bar nav a {
  color: #fff !important;
}

.py-ui header.py-header .nav-bar .nav-bg {
  top: 70px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 0;
  border-radius: 0 0 25px 25px;
}

.py-ui header.py-header .right-nav {
  width: 300px;
  color: #fff;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
}

.py-ui header.py-header .right-nav a.telnum {
  font-size: 1.4rem;
  color: #fff;
}

.py-ui header.py-header .right-nav a {
  font-size: 1.8rem;
  color: #fff;
}

.py-ui header.py-header .right-nav a.menu-toggle {
  display: none;
}

.py-ui header.py-header .right-nav .py-profile-dropmenu a.profile-icon i {
  color: #fff;
}

.py-ui header.py-header .right-nav .py-profile-dropmenu .menu {
  right: -20px;
}

.py-ui header.py-header .right-nav .py-profile-dropmenu .menu .menu-items a {
  color: var(--py-gray-800);
  font-weight: 300 !important;
}

@media screen and (max-width: 1279px) {
  .py-ui header.py-header {
    padding-right: 1.0rem;
    padding-left: 1.0rem;
  }
  .py-ui header.py-header .nav-bar {
    display: none;
  }
  .py-ui header.py-header .bland img {
    width: 100%;
  }
  .py-ui header.py-header .right-nav a.telnum {
    display: none;
  }
  .py-ui header.py-header .right-nav a.menu-toggle {
    display: block;
  }
  .py-ui header.py-header .right-nav .py-profile-dropmenu .profile-icon {
    padding-right: 0px;
  }
}

.py-ui header.simple-header {
  display: flex;
  justify-content: center;
  background-color: var(--master-color);
  padding: 20px;
}

.py-ui header.simple-header .bland {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  justify-content: start;
}

.py-ui header.simple-header .bland a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
}

.py-ui header.simple-header .bland a span {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 5px 10px;
  background: #ab611f;
  background: radial-gradient(circle, #e9b486 0%, #e0590a 100%);
  border-radius: 10px 0px 10px 0px;
}

.py-ui header.simple-header .bland a strong {
  font-size: 1.6rem;
  text-shadow: 1px 1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, -1px -1px 0 #666, 1px 0px 0 #666, 0px 1px 0 #666, -1px 0px 0 #666, 0px -1px 0 #666;
}

.py-ui footer {
  color: #f0f0f0;
  background: var(--py-gray-800);
  background-image: url(../images/footer_map.png);
  position: relative;
}

.py-ui footer .fbland {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.py-ui footer .fbland .ci {
  font-size: 2.0em;
  font-weight: 600;
}

.py-ui footer .fbland p {
  margin: 0;
  padding: 10px 0px;
  color: #ccc;
  font-size: 1.2em;
}

.py-ui footer .fbland .bname {
  font-size: 2.5rem;
  font-weight: 500;
  color: #f0f0f0;
}

.py-ui footer .fbland .bname a {
  color: #f0f0f0;
}

.py-ui footer .footer-menu {
  padding: 50px 0px 20px 0px;
  display: flex;
}

.py-ui footer .footer-menu .fpart1, .py-ui footer .footer-menu .fpart2, .py-ui footer .footer-menu .fpart3, .py-ui footer .footer-menu .fpart4 {
  flex: 1;
  border: 0px solid #fff;
}

.py-ui footer .footer-menu .fpart1 h2, .py-ui footer .footer-menu .fpart2 h2, .py-ui footer .footer-menu .fpart3 h2, .py-ui footer .footer-menu .fpart4 h2 {
  color: var(--yellow-color);
}

.py-ui footer .footer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.py-ui footer .footer-menu ul li {
  padding: 0 10px;
}

.py-ui footer .footer-menu a {
  color: #f0f0f0;
}

.py-ui footer .copy-right {
  text-align: center;
  padding: 20px;
  border-top: 1px solid #dee2e6;
  border-color: rgba(255, 255, 255, 0.3);
}

.py-ui footer .go-top {
  display: block;
  position: absolute;
  padding: 5px 20px;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  background: #007bff;
  background: linear-gradient(128deg, #007bff 0%, #03ec55 80%);
  color: #fff;
  border: 3px solid #f0f0f0;
  border-radius: 25px;
  cursor: pointer;
}

@media screen and (max-width: 540px) {
  .py-ui footer {
    font-size: 0.9rem;
  }
  .py-ui footer .container {
    width: 100%;
  }
  .py-ui footer.container-fluid {
    padding-right: 1rem;
    padding-left: 1rem;
    width: 100%;
  }
  .py-ui footer .footer-menu {
    padding: 20px 0px 10px 0px;
    display: flex;
  }
  .py-ui footer .footer-menu .fpart1, .py-ui footer .footer-menu .fpart2 {
    display: none;
  }
  .py-ui footer .footer-menu .fpart3 {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .py-ui footer .footer-menu .fpart3 h2 {
    display: none;
  }
  .py-ui footer .footer-menu h2 {
    font-size: 1.1rem;
    padding: 0px;
    margin: 0px 0px 10px 0px;
  }
  .py-ui footer .footer-menu ul li a {
    font-size: 0.9rem;
  }
}

.py-ui .lay-fluid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.py-ui .lay-fluid .sub-cover-bg {
  background: linear-gradient(118deg, #995df9 47%, #ff48ca 100%);
}

.py-ui .lay-fluid .sub-cover-bg h2 {
  text-align: center;
  color: #fff;
  padding: 30px 0px;
}

.py-ui .lay-fluid .breadcrumb-bar {
  border-bottom: 1px solid var(--py-gray-400);
  padding: 10px 0px;
}

.py-ui .lay-fluid .breadcrumb-bar ul.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.py-ui .lay-fluid .breadcrumb-bar ul.breadcrumb > li {
  padding: 0px 5px;
  float: left;
}

.py-ui .lay-fluid .breadcrumb-bar ul.breadcrumb > li.home a span {
  font-size: 1.4rem;
}

.py-ui .lay-fluid .breadcrumb-bar ul.breadcrumb > li::after {
  content: "\e940";
  font-family: xeicon !important;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

.py-ui .lay-fluid .breadcrumb-bar ul.breadcrumb > li:last-child::after {
  content: "";
  display: none;
}

.py-ui .lay-fluid .breadcrumb-bar .py-dropdown.show ul.dropdown-menu {
  display: flex;
}

.py-ui .lay-fluid .breadcrumb-bar .py-dropdown .dropdown-button {
  min-width: 180px;
}

.py-ui .lay-fluid .breadcrumb-bar .py-dropdown ul.dropdown-menu {
  display: none;
  flex-direction: column;
}

@media screen and (max-width: 560px) {
  .py-ui .lay-fluid .breadcrumb-bar .home, .py-ui .lay-fluid .breadcrumb-bar .crumb {
    display: none;
  }
  .py-ui .lay-fluid .breadcrumb-bar .active {
    flex: 1;
  }
}

.py-ui .lay-fluid main {
  flex: 1;
}

.py-ui .sub-body {
  padding: 50px 15px 80px 15px;
}

.py-ui .sub-body .top-img img {
  border-radius: 10px;
}

@media screen and (max-width: 1279px) {
  .py-ui .container {
    width: 100%;
  }
  .py-ui .sub-body section p img {
    max-width: 100%;
  }
}

.py-ui .breadcrumb-bar {
  background-color: #607d8b;
}

.py-ui .breadcrumb-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.py-ui .breadcrumb-bar .py-dropdown {
  align-items: center;
  width: 100%;
  padding: 8px 10px 8px 10px;
}

.py-ui .breadcrumb-bar .py-dropdown .dropdown-button {
  width: 100%;
  border: 0px !important;
  padding: 0px !important;
}

.py-ui .breadcrumb-bar .py-dropdown .dropdown-button span {
  flex: 1;
  color: #fff;
}

.py-ui .breadcrumb-bar .py-dropdown .dropdown-button span a {
  color: #fff;
}

.py-ui .breadcrumb-bar .py-dropdown .dropdown-button button:after {
  color: #fff;
}

.py-ui .breadcrumb-bar .py-dropdown ul {
  width: 100%;
  left: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 0px 0px 5px 5px;
  background-color: #607d8b;
  box-shadow: none;
}

.py-ui .breadcrumb-bar .py-dropdown ul li:hover, .py-ui .breadcrumb-bar .py-dropdown ul li:focus, .py-ui .breadcrumb-bar .py-dropdown ul li:active {
  color: #444;
}

.py-ui .breadcrumb-bar .py-dropdown ul li:hover a, .py-ui .breadcrumb-bar .py-dropdown ul li:focus a, .py-ui .breadcrumb-bar .py-dropdown ul li:active a {
  color: #fff;
}

.py-ui .breadcrumb-bar .py-dropdown ul li.selected {
  color: #fff;
}

.py-ui .breadcrumb-bar .py-dropdown ul li a {
  color: #fff;
}

.py-ui .breadcrumb-bar .py-dropdown ul li a:hover, .py-ui .breadcrumb-bar .py-dropdown ul li a:focus, .py-ui .breadcrumb-bar .py-dropdown ul li a:active {
  color: #000;
}

.py-ui .breadcrumb-bar ul.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li {
  border-right: 1px solid #84939a;
  color: #fff;
  line-height: 1.2rem;
  display: flex;
  align-items: center;
  padding: 5px;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li :first-child:not(.active) {
  padding: 8px 10px 8px 10px;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li.home {
  border-left: 1px solid #84939a;
  font-size: 1.6rem;
  line-height: 0;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li.home > a {
  line-height: 0;
  padding: 0px;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li > a {
  color: #fff;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li.active {
  position: relative;
  color: #fff;
  display: block;
  min-width: 200px;
}

.py-ui .breadcrumb-bar ul.breadcrumb > li.active strong {
  font-weight: 400;
}

@media screen and (max-width: 540px) {
  .py-ui .breadcrumb-bar ul.breadcrumb > li.home, .py-ui .breadcrumb-bar ul.breadcrumb > li.crumb {
    display: none;
  }
  .py-ui .breadcrumb-bar ul.breadcrumb .py-dropdown-group {
    width: 100%;
  }
}

.py-ui .sub-cover-bg {
  background-image: url(/softflex/static/images/sample_sub_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
  height: 400px;
}

.py-ui .sub-cover-bg::before {
  background: rgba(0, 0, 0, 0.4);
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.py-ui .sub-cover-bg .sub-header {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  color: #fff;
}

.py-ui .sub-cover-bg .sub-header h1 {
  font-size: 2.2rem;
  text-shadow: 2px 2px 2px #000;
}

.py-ui .sub-cover-bg .sub-header .slogan {
  font-size: 1.4rem;
  text-shadow: 1px 1px 1px #000;
}

@media screen and (max-width: 540px) {
  .py-ui .sub-cover-bg {
    height: 250px;
  }
  .py-ui .sub-cover-bg .sub-header {
    padding-top: 30px;
  }
  .py-ui .sub-cover-bg .sub-header h2 {
    font-size: 1.6rem;
  }
  .py-ui .sub-cover-bg .sub-header .slogan {
    font-size: 1.2rem;
  }
}

.py-ui .papyboard-app .content-box .content img {
  max-width: 100%;
}

.py-ui .sub-body {
  color: #1e2022;
  min-height: 400px;
  padding-top: 100px;
  padding-bottom: 180px;
}

.py-ui .sub-body .slogan-sm {
  font-size: 1.2rem;
  color: #1e2022;
}

.py-ui .sub-body .slogan-sm .title {
  font-size: 1.5rem;
  font-weight: 600;
}

.py-ui .sub-body .slogan-sm .desc {
  margin-top: 20px;
}

.py-ui .sub-body h4 {
  font-size: 1.4rem;
  margin-top: 0px;
  margin-bottom: 20px;
}

.py-ui .sub-body .part-img-bg {
  display: block;
  border: 0px solid #f00;
  height: 100%;
  border-radius: 0.25rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.py-ui .sub-body .left-img-part {
  display: flex;
}

.py-ui .sub-body .left-img-part .part-img {
  padding: 10px 20px;
}

.py-ui .sub-body .left-img-part .part-img i {
  font-size: 3rem;
  color: #007A9F;
}

.py-ui .sub-body .left-img-part ul li {
  position: relative;
  padding: 0 0 10px 25px;
  margin: 0 0 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.py-ui .sub-body .left-img-part ul li::before {
  content: "\f192";
  position: absolute;
  top: 0;
  left: 0;
  font-family: Font Awesome\ 5 Free;
  color: #007A9F;
}

@media screen and (max-width: 540px) {
  .py-ui .sub-body .left-img-part .part-img {
    padding: 10px 10px 10px 0px;
  }
  .py-ui .sub-body .left-img-part .part-img i {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 768px) {
  .py-ui .sub-body {
    padding-top: 30px;
    padding-bottom: 50px;
  }
}

.py-ui .card-selction {
  display: flex;
  justify-content: center;
}

.py-ui .card-selction .card {
  display: inline-block;
  text-align: center;
  width: 680px;
  padding: 50px 50px;
  font-size: 1.3rem;
  background-color: #007A9F;
  color: #fff;
  font-weight: 600;
  border-bottom: solid 3px #0391d1;
}

.py-ui .card-selction .card em {
  font-weight: 400;
  font-size: 1.2rem;
}

.py-ui .box-section {
  display: flex;
  justify-content: center;
}

.py-ui .box-section .card {
  width: 500px;
  border: 0px;
  height: 250px;
  border-radius: 1rem;
}

.py-ui .box-section .card.box-1 .header {
  background-color: #03a9f4;
}

.py-ui .box-section .card.box-1 .body .icon {
  background-color: #03a9f4;
}

.py-ui .box-section .card.box-2 .header {
  background-color: #9c27b0;
}

.py-ui .box-section .card.box-2 .body .icon {
  background-color: #9c27b0;
}

.py-ui .box-section .card.box-3 .header {
  background-color: #4caf50;
}

.py-ui .box-section .card.box-3 .body .icon {
  background-color: #4caf50;
}

.py-ui .box-section .card .header {
  color: #f5f5f5;
  border-radius: 1rem 1rem 0rem 0rem;
  padding-left: 150px;
  font-size: 1.4rem;
}

.py-ui .box-section .card .body {
  position: relative;
}

.py-ui .box-section .card .body .icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 2.2rem;
  padding: 10px;
  border-radius: 50%;
  border: 10px solid #fff;
  top: -40px;
}

.py-ui .box-section .card .body p {
  padding-left: 120px;
  line-height: 1.5;
}

.py-ui .box-section .card .body em {
  font-size: 0.9rem;
}

.py-ui .box-section .plus {
  display: block;
  position: relative;
  padding: 30px;
  padding-top: 100px;
  text-align: center;
}

.py-ui .box-section .plus i {
  font-size: 3rem;
  color: #666;
}

.py-ui .box-section .equal {
  width: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  height: 50px;
  border-left: 10px solid #666;
  border-right: 10px solid #666;
  border-radius: 2px;
}

@media screen and (max-width: 960px) {
  .py-ui .box-section {
    flex-direction: column;
    justify-content: center;
  }
  .py-ui .box-section.equal-section {
    flex-direction: row;
  }
  .py-ui .box-section .card {
    width: 100%;
    height: auto;
  }
  .py-ui .box-section .card .body {
    padding-top: 70px;
  }
  .py-ui .box-section .card .body p {
    padding-left: 0px;
  }
  .py-ui .box-section .plus {
    padding-top: 30px;
  }
}

@media screen and (max-width: 960px) {
  .py-ui #pg_ci img.ci-img {
    width: 100%;
  }
}

.sub-body .response-scroll {
  display: block;
  overflow: auto;
  width: 100%;
  height: 100%;
  position: relative;
}

.sub-body table.table {
  width: 100%;
  table-layout: fixed;
  margin: 10px 0 0 0;
  border-collapse: collapse;
  border-spacing: 0px;
  border-top: 1px solid #333;
}

.sub-body table.table caption {
  width: 1px !important;
  height: 1px !important;
  margin-top: -1px;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}

.sub-body table.table.borderd tr th, .sub-body table.table.borderd tr td {
  border: 1px solid #ddd;
}

.sub-body table.table.borderd tr th:first-child, .sub-body table.table.borderd tr td:first-child {
  border-left: 1px solid #ddd;
}

.sub-body table.table thead tr th {
  padding: 10px 10px;
  vertical-align: middle;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f9f9f9;
}

.sub-body table.table thead tr th:first-child {
  border-left: 0px solid #ddd;
}

.sub-body table.table tbody tr th, .sub-body table.table tbody tr td {
  padding: 10px 10px;
  vertical-align: middle;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  text-align: center;
}

.sub-body table.table tbody tr th:first-child, .sub-body table.table tbody tr td:first-child {
  border-left: 0px solid #ddd;
}

.sub-body table.table tbody tr th {
  background-color: #f9f9f9;
}

.sub-body table.table tbody tr td {
  text-align: left;
}

.sub-body ul.bar-dot {
  display: block;
  padding-left: 20px;
  border-left: solid 6px #e0e0e0;
}

.sub-body ul.bar-dot li {
  padding: 8px 0px;
  position: relative;
  display: flex;
}

.sub-body ul.bar-dot li.line-2 {
  height: 50px;
}

.sub-body ul.bar-dot li.line-3 {
  height: 70px;
}

.sub-body ul.bar-dot li.line-4 {
  height: 90px;
}

.sub-body ul.bar-dot li.line-5 {
  height: 110px;
}

.sub-body ul.bar-dot li.line-6 {
  height: 130px;
}

.sub-body ul.bar-dot li strong {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  width: 140px;
}

.sub-body ul.bar-dot li span {
  display: inline-block;
  position: absolute;
  line-height: 1.2;
  top: 12px;
  left: 130px;
}

.sub-body ul.bar-dot li span small {
  color: #808695;
}

.sub-body ul.bar-dot li::before {
  position: absolute;
  content: '';
  left: -35px;
  top: 23px;
  transform: translateY(-50%);
  border: 12px solid #e0e0e0;
  border-radius: 50%;
}

.sub-body ul.bar-dot li::after {
  position: absolute;
  content: '';
  left: -31px;
  top: 23px;
  transform: translateY(-50%);
  border: 8px solid #007A9F;
  border-radius: 50%;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  .sub-body ul.bar-dot li {
    min-height: 70px;
  }
  .sub-body ul.bar-dot li.line-2 {
    height: 110px;
  }
  .sub-body ul.bar-dot li.line-3 {
    height: 130px;
  }
  .sub-body ul.bar-dot li.line-4 {
    height: 150px;
  }
  .sub-body ul.bar-dot li.line-5 {
    height: 170px;
  }
  .sub-body ul.bar-dot li.line-6 {
    height: 200px;
  }
  .sub-body ul.bar-dot li strong {
    padding-left: 0px;
    padding-right: 10px;
    width: 120px;
  }
  .sub-body ul.bar-dot li span {
    line-height: 1.2;
    left: 100px;
  }
}

@media screen and (max-width: 340px) {
  .sub-body ul.bar-dot li strong {
    font-size: 0.95rem;
  }
  .sub-body ul.bar-dot li small {
    display: none;
  }
}

.sub-body ul.bar-dot-sm {
  display: block;
  padding-left: 20px;
  border-left: solid 3px #e0e0e0;
}

.sub-body ul.bar-dot-sm li {
  padding: 2px 0px;
  position: relative;
  display: flex;
}

.sub-body ul.bar-dot-sm li strong {
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  width: 140px;
}

.sub-body ul.bar-dot-sm li span {
  display: inline-block;
  position: absolute;
  line-height: 1.2;
  top: 12px;
  left: 130px;
}

.sub-body ul.bar-dot-sm li span small {
  color: #808695;
}

.sub-body ul.bar-dot-sm li::before {
  position: absolute;
  content: '';
  left: -28px;
  top: 17px;
  transform: translateY(-50%);
  border: 6px solid #e0e0e0;
  border-radius: 50%;
}

.sub-body ul.bar-dot-sm li::after {
  position: absolute;
  content: '';
  left: -26px;
  top: 17px;
  transform: translateY(-50%);
  border: 4px solid #007A9F;
  border-radius: 50%;
  z-index: 1;
}

@media screen and (max-width: 960px) {
  .sub-body ul.bar-dot-sm li {
    min-height: 40px;
  }
  .sub-body ul.bar-dot-sm li strong {
    padding-left: 0px;
    padding-right: 10px;
    width: 120px;
  }
  .sub-body ul.bar-dot-sm li span {
    line-height: 1.2;
    left: 100px;
  }
}

@media screen and (max-width: 340px) {
  .sub-body ul.bar-dot-sm li strong {
    font-size: 0.95rem;
  }
  .sub-body ul.bar-dot-sm li small {
    display: none;
  }
}

.sub-body .bullet h3 {
  font-size: 1.6em;
  margin-bottom: 20px;
  position: relative;
  padding-left: 30px;
}

.sub-body .bullet h3::before {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  background: #007A9F;
  border-radius: 2px;
  width: 7px;
  height: 80%;
  content: '';
  left: 10px;
}

.sub-body .bullet h4 {
  font-size: 1.3em;
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
  font-weight: 400;
}

.sub-body .bullet h4::before {
  position: absolute;
  display: block;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: var(--py-info-color);
  border-radius: 2px;
  width: 10px;
  height: 10px;
  content: '';
  left: 10px;
}

.sub-body .bullet h4.desc {
  margin-bottom: 0px;
}

.sub-body .bullet h4.desc + p.desc {
  padding-left: 30px;
  margin-top: 0px;
  margin-bottom: 20px;
}

.sub-body .bullet p {
  margin-left: 15px;
  margin: 5px 0px;
}

.sub-body .bullet p small {
  color: var(--py-error-color);
}

.sub-body .bullet table.table {
  margin-left: 10px;
}

.sub-body .bullet ul:not(.not-bullet) {
  margin-left: 15px;
}

.sub-body .bullet ul:not(.not-bullet) > li {
  position: relative;
  padding-left: 30px;
}

.sub-body .bullet ul:not(.not-bullet) > li::before {
  position: absolute;
  display: block;
  top: 12px;
  background: #007A9F;
  border-radius: 100%;
  width: 5px;
  height: 5px;
  content: '';
  left: 10px;
}

.sub-body .bullet ol {
  list-style: none;
  font-size: 0.9em;
  margin: 0px;
  padding: 0px;
}

.sub-body .bullet ol > li {
  position: relative;
  padding-left: 20px;
}

.sub-body .bullet ol > li::before {
  position: absolute;
  display: block;
  top: 15px;
  background: var(--py-info-color);
  border-radius: 100%;
  width: 5px;
  height: 2px;
  content: '';
  left: 10px;
}

.page-content figure.ponter-plane {
  width: 130px;
  text-align: center;
  display: block;
  justify-content: center;
}

.page-content figure.ponter-plane img {
  width: 100%;
}

.page-content .slogan {
  font-size: 2.6em;
  font-weight: 600;
}

.page-content .slogan .text1 {
  color: #02909d;
}

@media screen and (max-width: 768px) {
  .page-content .slogan {
    font-size: 1.8em;
    line-height: 1em;
  }
}

.guide-content h2 {
  margin-bottom: 20px;
}

.guide-content .list-menu ol li a {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 5px;
}

.guide-content .py-card .body {
  padding: 10px  20px;
}

.guide-content .content-body p {
  margin: 0px;
}

.guide-content .content-body dl dt {
  margin-top: 20px;
}

.guide-content .content-body dl dd {
  padding-left: 0px;
  margin-left: 10px;
}

.py-postsmanager {
  position: relative;
}

.py-postsmanager .btn-manager {
  position: absolute;
  top: -20px;
  right: 5px;
  font-size: 1.2em;
  color: #f00;
}

.intranet-layout {
  display: flex;
  min-height: 500px;
}

.intranet-layout .sidebar {
  width: 230px;
  border-right: 1px solid var(--py-gray-500);
}

.intranet-layout .sidebar .header {
  height: 100px;
  border-bottom: 1px solid var(--py-border-color);
}

.intranet-layout .sidebar ul.nav li {
  border-bottom: 1px solid var(--py-border-color);
}

.intranet-layout .sidebar ul.nav li a {
  padding: 7px 15px;
  display: block;
}

.intranet-layout .content-body {
  flex: 1;
  border: 0px solid blue;
  padding: 20px;
}

.py-ui .document-section {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.py-ui .document-section.center {
  justify-content: center;
}

.py-ui .document-section .img-box {
  margin-top: 30px;
  margin-bottom: 30px;
}

.py-ui .document-section .img-box img {
  max-width: 100%;
}

.py-ui .document-section .section-box {
  border: 1px solid var(--py-gray-400);
  padding: 20px 20px;
  position: relative;
  margin: 0 auto;
}

.py-ui .document-section .section-box.no-border {
  border: 0px;
}

.py-ui .document-section .section-box > .header {
  position: absolute;
  padding: 5px 20px;
  border: 0px solid red;
}

.py-ui .document-section .section-box > .header.top-round {
  position: absolute;
  color: #fff;
  border-radius: 25px;
}

.py-ui .document-section .section-box > .header.top-round.center {
  top: 0px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.py-ui .document-section .section-box > .body {
  padding-top: 10px;
}

.py-ui .document-section .section-box > .body .big-text {
  font-size: 2rem;
}

.py-ui .document-section .section-box > .body .desc p {
  margin: 2px 0px;
}

.py-ui .document-section .box-content {
  border: 1px solid var(--py-gray-300);
  display: block;
  height: 100%;
}

.py-ui .document-section .box-content.round-20 {
  border-radius: 20px;
  overflow: hidden;
}

.py-ui .document-section .box-content > .header {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--py-gray-300);
  line-height: 1.6;
  background-color: var(--py-gray-600);
  color: #fff;
  font-size: 0.9em;
}

.py-ui .document-section .box-content > .body {
  padding: 10px;
  line-height: 1.6;
  position: relative;
}

.py-ui .document-section .box-content > .body .ribbon {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5px 10px;
  border-radius: 0 25px 25px 0;
}

.section-menu {
  list-style: none;
  display: flex;
  padding: 0px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.section-menu li {
  flex: 0.5;
  display: block;
}

.section-menu li .card {
  display: block;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  width: 100%;
  position: relative;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  background-color: #fff;
}

.section-menu li .card .header {
  position: absolute;
  top: -20px;
  padding: 5px 10px;
  left: 50%;
  width: 150px;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #fff;
  border-radius: 25px;
  z-index: 3;
}

.section-menu li .card .master-color {
  background-color: var(--master-color);
}

.section-menu li .card .second-color {
  background-color: var(--second-color);
}

.section-menu li .card .warning-color {
  background-color: var(--warning-color);
}

.section-menu li .card .main-color {
  background-color: var(--main-color);
}

.section-menu li .card .primary-color {
  background-color: var(--primary-color);
}

.section-menu li .card .error-color {
  background-color: var(--error-color);
}

.section-menu li .card .body {
  background-color: #fff;
  color: var(--py-gray-600);
  padding: 30px 10px 10px 10px;
  text-align: right;
}

.section-menu li .card .body p {
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 15px;
  min-height: 80px;
  line-height: 1.5;
}

.section-menu li .card .body .icon {
  text-align: center;
  padding: 20px;
}

.section-menu li .card .body .icon i {
  font-size: 2rem;
}

.section-menu li .card .body > a.more {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.75rem;
  border: 1px solid var(--py-gray-500);
  color: var(--py-gray-500);
  border-radius: 6px;
}

#greeting .py-tabnav {
  display: flex;
}

#greeting .py-tabnav li {
  flex: 1;
}

#greeting .py-tabnav li button {
  width: 100%;
  font-size: 1.2em;
}

#greeting h4 {
  line-height: 1.8em;
}

#greeting #t03 .subpage-top img {
  width: 60%;
}

#greeting #t04 p.tit {
  line-height: 1.5em;
}

@media screen and (max-width: 780px) {
  #greeting #t03 .subpage-top img {
    width: 100%;
  }
}