/* Server integration: scoped to .access-control #access-main. */

.access-control #access-main {

  --red: #e60012;
  --red-dark: #c41c14;
  --navy: #191919;
  --navy2: #1b2030;
  --ink: #191919;
  --gray: #6b6f76;
  --line: #cbcbcc;
  --line-light: #e1e1e1;
  --bg-soft: #f6f6f8;
  --pink: #fbeaf0;
  --title-h2: 40px;
  --white: #fff;

   font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
   font-size: 16px;
   color: var(--ink);
   line-height: 1.5;
}
.access-control #access-main, .access-control #access-main * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   word-break: keep-all;
}
.access-control #access-main * { font-family: inherit !important; }
.access-control #access-main h1, .access-control #access-main h2, .access-control #access-main h3, .access-control #access-main h4, .access-control #access-main p {
   color: inherit;
   line-height: inherit;
}
.access-control #access-main a { color: inherit; text-decoration: none; }
.access-control #access-main img { display: block; max-width: 100%; }
.access-control #access-main ul { list-style: none; }
.access-control #access-main button { font-family: inherit; line-height: inherit; }

/* Shared content styles, isolated from the server header and CTA. */
.access-control #access-main .wrap {
   max-width: 1420px;
   margin: 0 auto;
}

.access-control #access-main .accent {
   color: var(--red);
   font-weight: 800;
}

.access-control #access-main section {
   padding: 80px 20px;
}

.access-control #access-main .sec-title {
   font-size: var(--title-h2);
   font-weight: 600;
   line-height: 1.4;
}

.access-control #access-main .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 15px 26px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 24px;
   border: none;
   cursor: pointer;
}

.access-control #access-main .btn-red {
   background: var(--red);
   color: var(--white);
   font-family: inherit;
}

.access-control #access-main .btn-phone {
   background: var(--bg-soft);
   color: var(--red);
   font-family: inherit;
}

.access-control #access-main .btn-yellow {
   background: #f4d43a;
   color: #1a1a1f;
}

.access-control #access-main .reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .7s ease, transform .7s ease;
}

.access-control #access-main .reveal.in-view {
   opacity: 1;
   transform: translateY(0);
}

.access-control #access-main .reveal-group .reveal:nth-child(1) {
   transition-delay: .05s;
}

.access-control #access-main .reveal-group .reveal:nth-child(2) {
   transition-delay: .15s;
}

.access-control #access-main .reveal-group .reveal:nth-child(3) {
   transition-delay: .25s;
}

.access-control #access-main .reveal-group .reveal:nth-child(4) {
   transition-delay: .35s;
}

.access-control #access-main .reveal-group .reveal:nth-child(5) {
   transition-delay: .45s;
}

@media (prefers-reduced-motion: reduce) {
   .access-control #access-main .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }

}

.access-control #access-main .tag {
   font-size: 14px;
   padding: 8px 12px;
   border-radius: 50px;
   border: 1px solid var(--line);
   color: #3b3c42;
   font-weight: 400;
   cursor: pointer;
   transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.access-control #access-main .tag:hover {
   background: var(--red);
   color: var(--white);
   border-color: var(--red);
   font-weight: 700;
   transform: translateY(-2px);
}

.access-control #access-main .check-item {
   background: var(--white);
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 14px 22px;
   font-size: 16px;
   font-weight: 600;
   text-align: left;
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}

.access-control #access-main .check-item:hover {
   transform: translateY(-2px);
}

.access-control #access-main .check-item.on {
   border-color: var(--red);
   color: var(--red-dark);
}

.access-control #access-main .check-item .box {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   border-radius: 3px;
   border: 2px solid #9ea1ac;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   color: #2a2b31;
   font-weight: 900;
   background: var(--white);
   transition: background .8s ease, border-color .8s ease, color .8s ease;
}

.access-control #access-main .check-item.on .box {
   background: var(--red);
   border-color: var(--red);
   color: var(--white);
}

.access-control #access-main .solved-flex {
   display: flex;
   align-items: end;
   gap: 20px;
   justify-content: space-between;
}

.access-control #access-main .solved-text {
   align-self: start;
}

.access-control #access-main .solved-text h2 {
   margin-bottom: 40px;
}

.access-control #access-main .solved-list li {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 24px;
   font-weight: 600;
   padding: 16px 20px;
   border-radius: 8px;
   margin-bottom: 12px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.access-control #access-main .solved-list .ic {
   color: var(--red);
   font-size: 18px;
}

.access-control #access-main .solved-img {
   position: relative;
}

.access-control #access-main .solved-img img {
   border-radius: 8px;
}

@media (max-width: 1240px) {
   .access-control #access-main section {
      padding: 70px 20px;
   }

   .access-control #access-main .sec-title {
      font-size: 32px;
   }

   .access-control #access-main .btn {
      font-size: 16px;
   }

   .access-control #access-main .solved-text {
      width: 100%;
      max-width: 100%;
   }

   .access-control #access-main .solved-img img {
      margin: 0 auto;
   }

}

@media (max-width: 767px) {
   .access-control #access-main .wrap {
      padding: 0 18px;
   }

   .access-control #access-main .btn {
      padding: 14px 20px;
      font-size: 14px;
      width: 100%;
   }

   .access-control #access-main section {
      padding: 50px 0;
   }

   .access-control #access-main .sec-title {
      font-size: 22px;
   }

   .access-control #access-main .tag {
      font-size: 11.5px;
      padding: 7px 10px;
   }

   .access-control #access-main .check-item {
      font-size: 13.5px;
      padding: 14px 16px;
   }

   .access-control #access-main .solved-flex {
      flex-direction: column;
      gap: 28px;
   }

   .access-control #access-main .solved-text {
      width: 100%;
   }

   .access-control #access-main .solved-text h2 {
      margin-bottom: 24px;
   }

   .access-control #access-main .solved-list li {
      font-size: 14.5px;
      padding: 13px 16px;
   }

}

/* Page styles. */
.access-control #access-main {
   --ac-muted: #333;
   --ac-muted2: #454545;
}

.access-control #access-main .ac-skip {
   position: fixed;
   top: -80px;
   left: 20px;
   z-index: 100;
   background: #fff;
   color: #111;
   padding: 12px 20px;
}

.access-control #access-main .ac-skip:focus {
   top: 12px;
}

.access-control #access-main button {
   cursor: pointer;
}

.access-control #access-main :focus-visible {
   outline: 3px solid #e60012;
   outline-offset: 5px;
}

.access-control #access-main [hidden] {
   display: none !important;
}

.access-control #access-main .ac-hero {
   min-height: 800px;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   background: #101416;
   color: #fff;
}

.access-control #access-main .ac-hero-photo {
   position: absolute;
   inset: 0;
   background: url('/images/front/v2026/accesscontrol/accessControl-hero-bg.jpg') center / cover no-repeat;
}

.access-control #access-main .ac-hero::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, #101416 8%, rgba(16, 20, 22, .88) 36%, transparent 76%);
}

.access-control #access-main .ac-hero-inner {
   width: 100%;
   position: relative;
   z-index: 1;
}

.access-control #access-main .ac-badge {
   display: inline-block;
   border-radius: 40px;
   padding: 9px 24px;
   background: var(--red);
   font-size: 24px;
   font-weight: 400;
   margin-bottom: 24px;
}

.access-control #access-main .ac-hero h1 {
   font-size: 58px;
   line-height: 1.4;
   font-weight: 600;
   letter-spacing: -2.2%;
}

.access-control #access-main .ac-hero p {
   margin-top: 30px;
   font-size: 20px;
   line-height: 1.5;
   color: #fff;
}

.access-control #access-main .ac-intro {
   padding-bottom: 40px;
}

.access-control #access-main .ac-info {
   padding: 48px 64px 40px;
   border-radius: 12px;
   box-shadow: 0 0 32px #20284a12;
}

.access-control #access-main .ac-info-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   padding-bottom: 38px;
}

.access-control #access-main .ac-info h2 {
   font-size: 40px;
   color: var(--red);
   margin-bottom: 12px;
   font-weight: 600;
   line-height: 1.5;
}

.access-control #access-main .ac-info p {
   color: var(--ac-muted);
   font-size: 20px;
   line-height: 1.5;
   font-weight: 500;
}

.access-control #access-main .ac-info p.small {
   color: var(--ac-muted2);
   font-size: 16px;
   line-height: 1.5;
   font-weight: 400;
}

.access-control #access-main .ac-info-top .ac-icon {
   width: 210px;
   height: 160px;
   color: var(--red);
   flex-shrink: 0;
}

.access-control #access-main .ac-info-bottom {
   border-top: 1px solid #e1e1e1;
   padding-top: 26px;
}

.access-control #access-main .ac-info h3 {
   font-size: 24px;
   margin-bottom: 10px;
   font-weight: 600;
}

.access-control #access-main .ac-pain {
   padding-bottom: 0;
}

.access-control #access-main .ac-tabs {
   margin-top: 58px;
}

.access-control #access-main .ac-tab-list {
   display: flex;
   width: 100%;
   gap: 10px;
}

.access-control #access-main .ac-tab-list button {
   width: calc(25% - 15px);
   border: 0;
   background: #fff;
   color: #666;
   border-radius: 18px 18px 0 0;
   padding: 23px 12px;
   font-size: 22px;
   font-weight: 600;
   border: 2px solid var(--red);
   border-bottom: 0;
}

.access-control #access-main .ac-tab-list button[aria-selected="true"] {
   color: #fff;
   background: var(--red);
   box-shadow: 0 8px 24px #e6001214;
   border-bottom: 2;
}

.access-control #access-main .ac-pain-panel {
   position: relative;
   border: 2px solid var(--red);
   border-radius: 0 16px 16px 16px;
   overflow: hidden;
}

.access-control #access-main .ac-pain-photo {
   aspect-ratio: 1420 / 340;
   background: url('/images/front/v2026/accesscontrol/accessControl-pain1.jpg') center / cover no-repeat;
}

.access-control #access-main #pain-panel-1 .ac-pain-photo {
   background-image: url('/images/front/v2026/accesscontrol/accessControl-pain2.jpg');
}

.access-control #access-main #pain-panel-2 .ac-pain-photo {
   background-image: url('/images/front/v2026/accesscontrol/accessControl-pain3.jpg');
}

.access-control #access-main .ac-pain-caption {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 36px;
   color: #fff;
   background: linear-gradient(90deg, #111e, #1113);
}

.access-control #access-main .ac-pain-caption h3 {
   font-size: 32px;
   margin-bottom: 14px;
}

.access-control #access-main .ac-pain-caption p {
   font-size: 20px;
}

.access-control #access-main .ac-methods {
   padding-top: 80px;
   padding-bottom: 60px;
}

.access-control #access-main .ac-method-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin-top: 58px;
}

.access-control #access-main .ac-card {
   position: relative;
   padding: 38px 30px;
   min-height: 250px;
}

.access-control #access-main .ac-card h3 {
   font-size: 23px;
   font-weight: 600;
   margin-bottom: 10px;
}

.access-control #access-main .ac-card p {
   color: var(--ac-muted2);
   font-size: 16px;
   line-height: 1.5;
   font-weight: 300;
}

.access-control #access-main .ac-icon {
   width: 65px;
   height: 65px;
   color: var(--red);
}

.access-control #access-main .ac-card .ac-icon {
   display: block;
   margin: 38px 0 0 auto;
}

.access-control #access-main .ac-method-grid .ac-card {
   border-top: 1px solid #e1e1e1;
   border-right: 1px solid #e1e1e1;
}

.access-control #access-main .ac-method-grid .ac-card:nth-child(3n) {
   border-right: 0;
}

.access-control #access-main .ac-method-grid .ac-card:nth-child(3)::after {
   content: "";
   position: absolute;
   right: 0;
   bottom: -1px;
   left: 0;
   height: 1px;
   background: #e1e1e1;
   pointer-events: none;
}

.access-control #access-main .ac-management {
   position: relative;
   overflow: hidden;
   background: #080a0b;
   color: #fff;
   padding-top: 80px;
   padding-bottom: 80px;
}

.access-control #access-main .ac-management-photo {
   position: absolute;
   inset: 0;
   background: url('/images/front/v2026/accesscontrol/feauture-dark-background.jpg') center / cover no-repeat;
}

.access-control #access-main .ac-management::after {
   position: absolute;
   content: "";
   inset: 0;
   background: linear-gradient(90deg, #080a0b 8%, #080a0ba8 48%, transparent);
}

.access-control #access-main .ac-management .wrap {
   position: relative;
   z-index: 1;
}

.access-control #access-main .ac-desc {
   color: var(--ac-muted);
   font-size: 18px;
   line-height: 1.7;
   margin-top: 24px;
}

.access-control #access-main .ac-management .ac-desc {
   color: #c5c5c5;
}

.access-control #access-main .ac-management-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   margin-top: 55px;
}

.access-control #access-main .ac-management-grid .ac-card {
   display: flex;
   flex-direction: column;
   border-left: 1px solid #ffffff45;
   min-height: 0;
   padding: 0 30px;
}

.access-control #access-main .ac-management-grid .ac-card:first-child {
   border: 0;
   padding-left: 0;
}

.access-control #access-main .ac-management-grid .ac-icon {
   order: -1;
   margin: 0 0 22px;
   color: #e8898e;
   width: 55px;
   height: 55px;
}

.access-control #access-main .ac-management-grid p {
   color: #fff;
}

.access-control #access-main .ac-integration-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px;
   margin-top: 50px;
}

.access-control #access-main .ac-integration-grid .ac-card {
   box-shadow: 0 0 32px #26254710;
   border-radius: 12px;
}

.access-control #access-main .ac-cases {
   background: #272727;
   color: #fff;
   overflow: hidden;
}

.access-control #access-main .ac-case-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   margin: 46px 0 20px;
}

.access-control #access-main .ac-case-tabs button {
   background: transparent;
   color: #ddd;
   border: 0;
   padding: 6px 16px;
   font-size: 20px;
}

.access-control #access-main .ac-case-tabs button[aria-pressed="true"] {
   background: var(--red);
   color: #fff;
}

.access-control #access-main .ac-case-gallery {
   overflow: visible;
   clip-path: inset(0 -100vw 0 0);
}

.access-control #access-main .ac-case-slide {
   height: auto;
}

.access-control #access-main .ac-case-image {
   position: relative;
}

.access-control #access-main .ac-case-image::after {
   content: "";
   position: absolute;
   inset: 0;
   box-shadow: inset 0 0 0 2px var(--red);
   opacity: 0;
   transition: opacity .25s ease;
   pointer-events: none;
}

.access-control #access-main .ac-case-slide.is-selected .ac-case-image::after {
   opacity: 1;
}

.access-control #access-main .ac-case-photo {
   display: block;
   width: 100%;
   aspect-ratio: 460 / 340;
   object-fit: cover;
}

.access-control #access-main .ac-case-caption {

}

.access-control #access-main .ac-case-caption h3 {
   position: absolute;
   left: 16px;
   bottom: 10px;
   margin-bottom: 10px;
   padding: 4px 8px;
   background: #fff;
   font-size: 16px;
   color: #333;
}

.access-control #access-main .ac-case-tabs button:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
}

.access-control #access-main .ac-case-gallery:not(.swiper-initialized) .swiper-wrapper {
   overflow-x: auto;
   gap: 20px;
}

.access-control #access-main .ac-case-gallery:not(.swiper-initialized) .ac-case-slide {
   position: relative;
   flex: 0 0 80%;
   max-width: 460px;
}

.access-control #access-main img.ac-icon {
   object-fit: contain;
}

.access-control #access-main .ac-faq {
   background: #f8f9fc;
}

.access-control #access-main .ac-faq .sec-title {
   text-align: center;
}

.access-control #access-main .ac-faq-list {
   max-width: 1180px;
   margin: 60px auto 0;
}

.access-control #access-main .ac-faq details {
   margin-top: 12px;
   border: 2px solid transparent;
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   transition: border-color .3s ease, box-shadow .3s ease;
}

.access-control #access-main .ac-faq details:hover {
   border-color: var(--red);
}

.access-control #access-main .ac-faq details[open] {
   border-color: var(--red);
   box-shadow: 0 0 48px 0 rgba(0, 45, 125, 0.1);
}

.access-control #access-main .ac-faq summary {
   cursor: pointer;
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 36px;
   gap: 24px;
   font-size: 24px;
   font-weight: 600;
}

.access-control #access-main .ac-faq summary::-webkit-details-marker {
   display: none;
}

.access-control #access-main .ac-faq summary span::before {
   display: inline-block;
   content: "+";
   color: var(--red);
   font-size: 28px;
   font-weight: 400;
   transition: transform .3s ease;
}

.access-control #access-main .ac-faq details[open] summary span::before {
   transform: rotate(45deg);
}

.access-control #access-main .ac-faq summary[aria-expanded="false"] span::before {
   transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
   .access-control #access-main .ac-faq details,
   .access-control #access-main .ac-faq summary span::before {
      transition: none;
   }

}

.access-control #access-main .ac-faq-answer {
   padding: 20px 36px;
   color: var(--ac-muted2);
   font-size: 20px;
   border-top: 1px solid #f0f0f0;
   line-height: 1.8;
}

@media(max-width:1100px) {
   .access-control #access-main .ac-hero h1 {
      font-size: 44px;
   }

   .access-control #access-main .ac-management-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px 0;
   }

   .access-control #access-main .ac-management-grid .ac-card {
      padding: 0 22px;
   }

   .access-control #access-main .ac-management-grid .ac-card:first-child {
      padding-left: 22px;
   }

   .access-control #access-main .ac-card {
      padding: 28px 22px;
   }

   .access-control #access-main .ac-case-tabs button {
      font-size: 17px;
   }

}

@media(max-width:767px) {
   .access-control #access-main .sec-title {
      font-size: 27px;
   }

   .access-control #access-main .ac-hero {
      min-height: 560px;
      margin-top: 64px;
   }

   .access-control #access-main .ac-hero-photo {
      left: 0;
      background-position: 70% center;
      opacity: .65;
   }

   .access-control #access-main .ac-hero::after {
      background: linear-gradient(90deg, #101416e8, #10141655);
   }

   .access-control #access-main .ac-hero h1 {
      font-size: clamp(26px, 6vw, 40px);
      letter-spacing: -1px;
   }

   .access-control #access-main .ac-hero p {
      font-size: 15px;
   }

   .access-control #access-main .ac-badge {
      font-size: 17px;
      margin-bottom: 24px;
      padding: 8px 18px;
   }

   .access-control #access-main .ac-info {
      padding: 28px 22px;
   }

   .access-control #access-main .ac-info h2 {
      font-size: 27px;
   }

   .access-control #access-main .ac-info p {
      font-size: 14px;
   }

   .access-control #access-main .ac-info p br {
      display: none;
   }

   .access-control #access-main .ac-info-top {
      gap: 15px;
      padding-bottom: 25px;
   }

   .access-control #access-main .ac-info-top .ac-icon {
      width: 64px;
      height: 64px;
   }

   .access-control #access-main .ac-info h3 {
      font-size: 18px;
   }

   .access-control #access-main .ac-tabs {
      margin-top: 30px;
   }

   .access-control #access-main .ac-tab-list {
      gap: 5px;
   }

   .access-control #access-main .ac-tab-list button {
      font-size: 14px;
      padding: 15px 5px;
      border-radius: 9px;
   }

   .access-control #access-main .ac-pain-caption {
      padding: 16px;
   }

   .access-control #access-main .ac-pain-caption h3 {
      font-size: 19px;
      margin-bottom: 5px;
   }

   .access-control #access-main .ac-pain-caption p {
      font-size: 12px;
   }

   .access-control #access-main .ac-methods {
      padding-top: 50px;
   }

   .access-control #access-main .ac-method-grid,
   .access-control #access-main .ac-integration-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 30px;
   }

   .access-control #access-main .ac-method-grid .ac-card:nth-child(3n) {
      border-right: 1px solid #e1e1e1;
   }

   .access-control #access-main .ac-method-grid .ac-card:nth-child(3)::after {
      display: none;
   }

   .access-control #access-main .ac-method-grid .ac-card:nth-child(2n) {
      border-right: 0;
   }

   .access-control #access-main .ac-card {
      min-height: 180px;
      padding: 23px 16px;
   }

   .access-control #access-main .ac-card h3 {
      font-size: 18px;
   }

   .access-control #access-main .ac-card p {
      font-size: 13px;
   }

   .access-control #access-main .ac-card .ac-icon {
      width: 45px;
      height: 45px;
      margin-top: 25px;
   }

   .access-control #access-main .ac-management-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px 0;
      margin-top: 35px;
   }

   .access-control #access-main .ac-management-grid .ac-card {
      padding: 0 14px;
   }

   .access-control #access-main .ac-management-grid .ac-card:first-child {
      padding-left: 14px;
   }

   .access-control #access-main .ac-management-grid .ac-card:nth-child(odd) {
      border-left: 0;
   }

   .access-control #access-main .ac-management-grid .ac-icon {
      margin-top: 0;
   }

   .access-control #access-main .ac-management-photo {
      left: 0;
   }

   .access-control #access-main .ac-desc {
      font-size: 14px;
   }

   .access-control #access-main .ac-integration-grid {
      gap: 14px;
   }

   .access-control #access-main .ac-case-tabs {
      gap: 3px;
      margin-top: 28px;
   }

   .access-control #access-main .ac-case-tabs button {
      font-size: 14px;
      padding: 9px 10px;
   }

   .access-control #access-main .ac-case-caption h3 {
      font-size: 18px;
   }

   .access-control #access-main .ac-case-caption p,
   .access-control #access-main .ac-case-caption a {
      font-size: 14px;
   }

   .access-control #access-main .ac-faq .sec-title {
      font-size: 23px;
   }

   .access-control #access-main .ac-faq-list {
      margin-top: 30px;
   }

   .access-control #access-main .ac-faq summary {
      font-size: 15px;
      padding: 18px;
   }

   .access-control #access-main .ac-faq-answer {
      font-size: 14px;
      padding: 18px;
   }

}