@charset "utf-8";

/* Online Shopping System
-----------------------------------------------------*/
.sec-online-shopping {
  margin-top: 90px;
}

.sec-online-shopping .pos-ttl {
  text-align: left;
}

.sec-online-shopping .pos-ttl:after {
  left: 3.3%;
}

.sec-online-shopping .ancr-links {
  position: sticky;
  top: 107px;
  z-index: 99;
  width: 73%;
  margin: 40px auto 0;
  box-shadow: 0 5px 8px rgba(45, 187, 84, 0.15);
  background-color: #FFFFFF;
  border-radius: 24px;
  display: flex;
}

.sec-online-shopping .ancr-links li {
  width: 25%;
  text-align: center;
}

.sec-online-shopping .ancr-links li a {
  width: 100%;
  line-height: 1.5;
  padding: 8px;
  color: #2DBB54;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 600;
  border-radius: 24px;
}

.sec-online-shopping .ancr-links li a:hover,
.sec-online-shopping .ancr-links li a.active {
  background-color: #F3FCF7;
}

.sec-online-shopping .system {
  display: flex;
  gap: 10px;
  margin-bottom: 84px;
  padding: 64px 0px 42px;
  border-bottom: 1px solid #2dbb54;
}

.sec-online-shopping .system-left {
  width: 49%;
}

.sec-online-shopping .system-list {
  padding-top: 26px;
}

.sec-online-shopping .system-right {
  width: 50%;
  margin-top: 36px;
}

.sec-online-shopping .online-function {
  padding-bottom: 52px;
  border-bottom: 1px solid #2DBB54;
}

.sec-online-shopping .system-circle {
  position: relative;
  width: 100%;
  margin-top: 80px;
  text-align: center;
  max-width: 1060px;
}

.sec-online-shopping .system-circle .fun-img {
  width: 45%;
  margin: 0 auto;
  max-width: 471px;
}

.sec-online-shopping .system-circle a {
  position: absolute;
  width: 26.6%;
  padding: 10px 20px;
  box-shadow: 0 0 10px rgba(45, 187, 84, 0.2);
  border-radius: 15px;
}

.sec-online-shopping .system-circle a p {
  line-height: 1.2;
  padding: 9px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  text-align: left;
}

.sec-online-shopping .system-circle a p.text-padding {
  padding: 18px 0;
}

.sec-online-shopping .system-circle a.cmn-card {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}


.sec-online-shopping .system-circle a.dashboard,
.sec-online-shopping .system-circle a.staff,
.sec-online-shopping .system-circle a.customer,
.sec-online-shopping .system-circle a.product,
.sec-online-shopping .system-circle a.stock {
  left: 0;
}

.sec-online-shopping .system-circle a.delivery,
.sec-online-shopping .system-circle a.payment,
.sec-online-shopping .system-circle a.sales,
.sec-online-shopping .system-circle a.damage,
.sec-online-shopping .system-circle a.social {
  right: 0;
}

.sec-online-shopping .system-circle a.dashboard,
.sec-online-shopping .system-circle a.delivery {
  top: -6.7%;
}

.sec-online-shopping .system-circle a.staff,
.sec-online-shopping .system-circle a.payment {
  top: 17.6%;
}

.sec-online-shopping .system-circle a.customer,
.sec-online-shopping .system-circle a.sales {
  top: 42%;
}

.sec-online-shopping .system-circle a.product,
.sec-online-shopping .system-circle a.damage {
  top: 66.7%;
}

.sec-online-shopping .system-circle a.stock,
.sec-online-shopping .system-circle a.social {
  top: 90.7%;
}

.sec-online-shopping .shopping-content {
  display: flex;
  margin: 96px 0 0;
}

.sec-online-shopping .shopping-content .content-blk {
  width: 42.5%;
}

.sec-online-shopping .shopping-content .left-blk {
  margin-right: 10.2%;
}

.sec-online-shopping .shopping-content li {
  position: relative;
  height: 255px;
  margin-bottom: 64px;
  padding: 30px 20px 20px;
  box-shadow: 0 9px 14px rgba(0, 0, 0, 0.09);
  color: #000000;
  border-radius: 15px;
  transition: background-color 0.5s linear;
}

.sec-online-shopping .shopping-content li:hover {
  color: #FFFFFF;
  cursor: pointer;
}

.sec-online-shopping .shopping-content li#dashboard:hover {
  background-color: #8CD4E8;
}

.sec-online-shopping .shopping-content li#customer:hover {
  background-color: #EF6A60;
}

.sec-online-shopping .shopping-content li#stock:hover {
  background-color: #88BB2A;
}

.sec-online-shopping .shopping-content li#payment:hover {
  background-color: #257A32;
}

.sec-online-shopping .shopping-content li#damage:hover {
  background-color: #E30059;
}

.sec-online-shopping .shopping-content li#staff:hover {
  background-color: #884996;
}

.sec-online-shopping .shopping-content li#product:hover {
  background-color: #DD001D;
}

.sec-online-shopping .shopping-content li#delivery:hover {
  background-color: #EEDF00;
}

.sec-online-shopping .shopping-content li#sales:hover {
  background-color: #254898;
}

.sec-online-shopping .shopping-content li#social:hover {
  background-color: #F67B22;
}

.sec-online-shopping .shopping-content .cnt-ttl {
  padding-bottom: 34px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.sec-online-shopping .shopping-content .cnt-img {
  position: absolute;
  top: 50%;
  right: -11%;
  transform: translateY(-50%);
}

.sec-online-shopping .shopping-content .cnt-list li {
  position: relative;
  height: auto;
  line-height: 1.8;
  margin-bottom: 2px;
  padding: 0 28px;
  box-shadow: none;
  color: #606060;
  font-size: 16px;
  border-radius: 0;
}

.sec-online-shopping .shopping-content .cnt-list li::before {
  position: absolute;
  top: 7px;
  left: 0;
  width: 18px;
  height: 14px;
  content: '';
}

.sec-online-shopping .shopping-content .cnt-list.dashboard li::before {
  background: url('../img/online-shopping/ico_dashboard.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.customer li::before {
  background: url('../img/online-shopping/ico_customer.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.stock li::before {
  background: url('../img/online-shopping/ico_stock.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.payment li::before {
  background: url('../img/online-shopping/ico_payment.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.damage li::before {
  background: url('../img/online-shopping/ico_damage.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.staff li::before {
  background: url('../img/online-shopping/ico_staff.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.product li::before {
  background: url('../img/online-shopping/ico_product.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.delivery li::before {
  background: url('../img/online-shopping/ico_delivery.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.sales li::before {
  background: url('../img/online-shopping/ico_sales.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content .cnt-list.social li::before {
  background: url('../img/online-shopping/ico_social.png') no-repeat center/contain;
}

.sec-online-shopping .shopping-content li:hover .cnt-list li {
  color: #FFFFFF;
}

.sec-online-shopping .shopping-content li:hover .cnt-list li::before {
  background: url('../img/online-shopping/ico_hover.png') no-repeat center/contain;
}

.sec-online-shopping .online-report {
  padding: 74px 0 50px;
  border-bottom: 1px solid #2DBB54;
}

.sec-online-shopping .online-report .system-ttl {
  line-height: 1.8;
  font-family: 'Poppins', sans-serif;
}

.sec-online-shopping .online-report .os-report-img {
  padding: 30px 0 38px;
  text-align: center;
}

.sec-online-shopping .online-report .report-list {
  padding: 8px 80px 8px 118px;
}

.sec-online-shopping .online-report .report-list li {
  position: relative;
  top: 0;
  line-height: 1.8;
  margin: 2px 0;
  padding: 17px 20px 17px 66px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s linear;
  border-radius: 7px;
}

.sec-online-shopping .online-report .report-list li:hover {
  top: -10px;
  box-shadow: 0 0 11px rgba(45, 187, 84, 0.25);
}

.sec-online-shopping .online-report .report-list li::before {
  position: absolute;
  top: 20px;
  left: 34px;
  width: 16px;
  height: 17px;
  background: url("../img/pos-detail/img_report_icon.png") no-repeat center/contain;
  content: '';
}

.sec-online-shopping .services-pos {
  margin-bottom: 0;
  padding: 72px 0 35px;
  border: 0;
  display: flex;
  flex-direction: column;
}

.sec-online-shopping .services-pos .system-ttl {
  line-height: 2;
  margin-bottom: 53px;
}

.sec-online-shopping .services-pos .services-txt-blk {
  display: flex;
  gap: 40px;
}

/* Ipad
-----------------------------------------------------------------*/
@media only screen and (min-width:769px) and (max-width:1024px) {

  /* Online Shopping System
-----------------------------------------------------*/
  .sec-online-shopping .ancr-links {
    top: 10.449vw;
    margin: 3.906vw auto 0;
    box-shadow: 0 0.488vw 0.781vw rgba(45, 187, 84, 0.15);
    border-radius: 2.344vw;
  }

  .sec-online-shopping .ancr-links li a {
    padding: 0.781vw;
    font-size: 1.758vw;
    border-radius: 2.344vw;
  }

  .sec-online-shopping .system {
    flex-direction: column;
    margin-bottom: 8.203vw;
    padding: 6.25vw 0vw 4.102vw;
  }

  .sec-online-shopping .system-left {
    width: 100%;
  }

  .sec-online-shopping .system-list {
    padding-top: 2.539vw;
  }

  .sec-online-shopping .system-right {
    width: 100%;
    margin: 3.516vw auto 0;
    text-align: center;
  }

  .sec-online-shopping .system-right img {
    width: 72.2%;
  }

  .sec-online-shopping .online-function {
    padding-bottom: 5.078vw;
    border-bottom: 0.098vw solid #2DBB54;
  }

  .sec-online-shopping .system-circle {
    margin-top: 7.813vw;
    max-width: 100%;
  }

  .sec-online-shopping .system-circle .fun-img {
    width: 45%;
    max-width: 45.996vw;
  }

  .sec-online-shopping .system-circle a {
    padding: 0.977vw 1.953vw;
    box-shadow: 0 0 0.977vw rgba(45, 187, 84, 0.2);
    border-radius: 1.465vw;
  }

  .sec-online-shopping .system-circle a img {
    max-width: 6.348vw;
  }

  .sec-online-shopping .system-circle a p {
    padding: 0.879vw 0;
    font-size: 1.5vw;
  }

  .sec-online-shopping .system-circle a p.text-padding {
    padding: 1.758vw 0;
  }

  .sec-online-shopping .shopping-content {
    margin: 12.375vw 0 9.375vw 0;
    display: block;
  }

  .sec-online-shopping .shopping-content .content-blk {
    width: 95%;
  }

  .sec-online-shopping .shopping-content .left-blk {
    margin-right: 0;
  }

  .sec-online-shopping .shopping-content li {
    height: 24.902vw;
    margin-bottom: 6.25vw;
    padding: 2.93vw 1.953vw 1.953vw;
    box-shadow: 0 0.879vw 1.367vw rgba(0, 0, 0, 0.09);
    border-radius: 1.465vw;
  }

  .sec-online-shopping .shopping-content .cnt-ttl {
    padding-bottom: 3.32vw;
    font-size: 2.083vw;
  }

  .sec-online-shopping .shopping-content .cnt-img {
    right: -5%;
    max-width: 9.18vw;
  }

  .sec-online-shopping .shopping-content .cnt-list li {
    margin-bottom: 0.195vw;
    padding: 0 5vw 0 3vw;
    font-size: 1.8vw;
  }

  .sec-online-shopping .shopping-content .cnt-list li::before {
    top: 0.684vw;
    width: 1.758vw;
    height: 1.367vw;
  }

  .sec-online-shopping .online-report {
    padding: 7.227vw 0 4.883vw;
    border-bottom: 0.098vw solid #2DBB54;
  }

  .sec-online-shopping .online-report .os-report-img {
    padding: 2.93vw 0 3.711vw;
  }

  .sec-online-shopping .online-report .os-report-img img {
    max-width: 69.141vw;
  }

  .sec-online-shopping .online-report .report-list {
    padding: 0.781vw 7.813vw;
  }

  .sec-online-shopping .online-report .report-list li {
    margin: 0.195vw 0;
    padding: 1.66vw 1.953vw 1.66vw 6.445vw;
    font-size: 1.758vw;
    border-radius: 0.684vw;
  }

  .sec-online-shopping .online-report .report-list li:hover {
    top: -0.977vw;
    box-shadow: 0 0 1.074vw rgba(45, 187, 84, 0.25);
  }

  .sec-online-shopping .online-report .report-list li::before {
    top: 1.953vw;
    left: 3.32vw;
    width: 1.563vw;
    height: 1.66vw;
  }

  .sec-online-shopping .services-pos {
    margin-bottom: 0;
    padding: 7.031vw 0 0 0;
  }

  .sec-online-shopping .services-pos .system-ttl {
    margin-bottom: 5.176vw;
  }

  .sec-online-shopping .services-pos .services-txt-blk {
    flex-direction: column;
    gap: 0;
  }
}

/* SP
-----------------------------------------------------------------*/
@media only screen and (max-width:768px) {

  /* Online Shopping System
-----------------------------------------------------*/

  .l-inner {
    padding: 0 3.077vw;
  }

  .sec-online-shopping {
    margin-top: 11.72vw;
  }

  .sec-online-shopping .ancr-links {
    top: 16.719vw;
    width: 95.5%;
    margin: 6.25vw auto 0;
    box-shadow: 0 0.781vw 1.25vw rgba(45, 187, 84, 0.15);
    border-radius: 3.75vw;
  }

  .sec-online-shopping .ancr-links li a {
    padding: 1.25vw;
    font-size: 3.5vw;
    border-radius: 3.75vw;
  }

  .sec-online-shopping .system {
    flex-direction: column;
    margin-bottom: 8.825vw;
    padding: 10vw 0 6.563vw;
  }

  .sec-online-shopping .system-left {
    width: 100%;
  }

  .sec-online-shopping .system-list {
    padding-top: 4.063vw;
  }

  .sec-online-shopping .system-right {
    width: 100%;
    margin-top: 5.625vw;
    text-align: center;
  }

  .sec-online-shopping .system-right img {
    width: 67%;
  }

  .sec-online-shopping .online-function {
    padding-bottom: 5.225vw;
    border-bottom: 0.156vw solid #2DBB54;
  }

  .sec-online-shopping .system-circle {
    margin-top: 7.5vw;
    max-width: 100%;
  }

  .sec-online-shopping .system-circle .fun-img {
    width: 36.7%;
    max-width: 45.996vw;
  }

  .sec-online-shopping .system-circle a {
    width: 27%;
    padding: 1.663vw 2.125vw 0.963vw 1.625vw;
    box-shadow: 0 0 1.563vw rgba(45, 187, 84, 0.2);
    border-radius: 1.563vw;
  }

  .sec-online-shopping .system-circle a img {
    max-width: 5vw;
  }

  .sec-online-shopping .system-circle a p {
    padding: 0;
    font-size: 2vw;
  }

  .sec-online-shopping .system-circle a p.text-padding {
    padding: 1vw 0;
  }

  .sec-online-shopping .system-circle a.dashboard,
  .sec-online-shopping .system-circle a.staff,
  .sec-online-shopping .system-circle a.customer,
  .sec-online-shopping .system-circle a.product,
  .sec-online-shopping .system-circle a.stock {
    left: 2.8%;
  }

  .sec-online-shopping .system-circle a.delivery,
  .sec-online-shopping .system-circle a.payment,
  .sec-online-shopping .system-circle a.sales,
  .sec-online-shopping .system-circle a.damage,
  .sec-online-shopping .system-circle a.social {
    right: 2.8%;
  }

  .sec-online-shopping .shopping-content {
    margin: 13vw 0 0;
    display: block;
  }

  .sec-online-shopping .shopping-content .content-blk {
    width: 88%;
    margin-left: 2vw;
  }

  .sec-online-shopping .shopping-content .left-blk {
    margin-right: 0;
  }

  .sec-online-shopping .shopping-content li {
    height: 40.313vw;
    margin-bottom: 5.6vw;
    padding: 4.688vw 3.125vw 3.125vw;
    box-shadow: 0 1.406vw 2.188vw rgba(0, 0, 0, 0.09);
    border-radius: 2.344vw;
  }

  .sec-online-shopping .shopping-content .cnt-ttl {
    padding-bottom: 5.313vw;
    font-size: 3.5vw;
  }

  .sec-online-shopping .shopping-content .cnt-img {
    right: -8.4%;
    max-width: 13.281vw;
  }

  .sec-online-shopping .shopping-content .cnt-list li {
    margin-bottom: 0.313vw;
    padding: 0 4.375vw;
    font-size: 3vw;
  }

  .sec-online-shopping .shopping-content .cnt-list li::before {
    top: 1.094vw;
    width: 2.813vw;
    height: 2.188vw;
  }

  .sec-online-shopping .online-report {
    padding: 6.763vw 0 7.813vw;
    border-bottom: 0.156vw solid #2DBB54;
  }

  .sec-online-shopping .online-report .system-ttl {
    line-height: 1.8;
  }

  .sec-online-shopping .online-report .os-report-img {
    padding: 10.688vw 0 7.938vw;
  }

  .sec-online-shopping .online-report .os-report-img img {
    max-width: 90.625vw;
  }

  .sec-online-shopping .online-report .report-list {
    padding: 3.05vw 2.2vw 2.45vw;
  }

  .sec-online-shopping .online-report .report-list li {
    margin: 0.813vw 0;
    padding: 3.156vw 3.125vw 3.156vw 10.313vw;
    font-size: 3.5vw;
    border-radius: 1.094vw;
  }

  .sec-online-shopping .online-report .report-list li:hover {
    top: -1.563vw;
    box-shadow: 0 0 1.719vw rgba(45, 187, 84, 0.25);
  }

  .sec-online-shopping .online-report .report-list li::before {
    top: 4.525vw;
    left: 5.313vw;
    width: 2.5vw;
    height: 2.656vw;
  }

  .sec-online-shopping .services-pos {
    margin-bottom: 0;
    padding: 6.35vw 0 5.469vw;
  }

  .sec-online-shopping .services-pos .system-ttl {
    line-height: 2;
    margin-bottom: 8.281vw;
  }

  .sec-online-shopping .services-pos .services-txt-blk {
    flex-direction: column;
    gap: 0;
  }
}