/* Server integration: scoped to .security-page #security-main. */

.security-page #security-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;
}

.security-page #security-main,
.security-page #security-main * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   word-break: keep-all;
}

.security-page #security-main * {
   font-family: inherit !important;
}

.security-page #security-main h1,
.security-page #security-main h2,
.security-page #security-main h3,
.security-page #security-main h4,
.security-page #security-main p {
   color: inherit;
   line-height: 1.5;
}

.security-page #security-main a {
   color: inherit;
   text-decoration: none;
}

.security-page #security-main img {
   display: block;
   max-width: 100%;
}

.security-page #security-main ul {
   list-style: none;
}

.security-page #security-main button {
   font-family: inherit;
   line-height: inherit;
}

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

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

.security-page #security-main section {
   padding: 80px 20px;
}

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

.security-page #security-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;
}

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

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

.security-page #security-main .btn-yellow {
   background: #f4d43a;
   color: #1a1a1f;
}

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

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

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

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

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

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

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

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

}

.security-page #security-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;
}

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

.security-page #security-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;
}

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

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

.security-page #security-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;
}

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

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

.security-page #security-main .solved-text {
   align-self: start;
}

.security-page #security-main .solved-text h2 {
   margin-bottom: 40px;
}

.security-page #security-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);
}

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

.security-page #security-main .solved-img {
   position: relative;
}

.security-page #security-main .solved-img img {
   border-radius: 8px;
}

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

   .security-page #security-main .sec-title {
      font-size: 32px;
   }

   .security-page #security-main .btn {
      font-size: 16px;
   }

   .security-page #security-main .solved-text {
      width: 100%;
      max-width: 100%;
   }

   .security-page #security-main .solved-img img {
      margin: 0 auto;
   }

}

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

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

   .security-page #security-main section {
      padding: 50px 0;
   }

   .security-page #security-main .sec-title {
      font-size: 22px;
   }

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

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

   .security-page #security-main .solved-flex {
      flex-direction: column;
      gap: 28px;
   }

   .security-page #security-main .solved-text {
      width: 100%;
   }

   .security-page #security-main .solved-text h2 {
      margin-bottom: 24px;
   }

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

}

/* Page styles. */
.security-page #security-main {
   --sg-muted: #777;
}

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

.security-page #security-main .sg-skip:focus {
   top: 12px;
}

.security-page #security-main button {
   cursor: pointer;
}

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

.security-page #security-main [hidden] {
   display: none !important;
}

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

.security-page #security-main .sg-hero-photo {
   position: absolute;
   inset: 0;
   background: url('/images/front/v2026/unmannedsecurity/UnmannedSecurity-hero-bg.jpg') 100% center / cover no-repeat;
}

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

.security-page #security-main .sg-hero-inner {
   width: 100%;
   position: relative;
   z-index: 1;
}

.security-page #security-main .sg-badge {
   display: inline-block;
   border-radius: 40px;
   padding: 9px 24px;
   background: var(--red);
   font-size: 24px;
   font-weight: 500;
   margin-bottom: 30px;
}

.security-page #security-main .sg-hero h1 {
   font-size: 58px;
   line-height: 1.4;
   font-weight: 600;
   letter-spacing: -2px;
}

.security-page #security-main .sg-hero p {
   margin-top: 30px;
   font-size: 21px;
   line-height: 1.5;
   color: #d3d3d3;
}

.security-page #security-main .sg-intro {
   padding-bottom: 40px;
}

.security-page #security-main .sg-info {
   padding: 52px 64px;
   border-radius: 12px;
   box-shadow: 0 0 32px #20284a12;
}

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

.security-page #security-main .sg-info h2 {
   font-size: 40px;
   color: var(--red);
   margin-bottom: 12px;
   font-weight: 600;
}

.security-page #security-main .sg-info p {
   color: var(--sg-muted);
   font-size: 20px;
   line-height: 1.8;
}

.security-page #security-main .sg-info-top .sg-icon {
   width: 210px;
   height: 160px;
}

.security-page #security-main .sg-info-bottom {
   border-top: 1px solid #eee;
   padding-top: 26px;
}

.security-page #security-main .sg-info h3 {
   font-size: 24px;
   margin-bottom: 10px;
   font-weight: 600;
}

.security-page #security-main .sg-pain {
   padding-bottom: 0;
}

.security-page #security-main .sg-tabs {
   margin-top: 58px;
}

.security-page #security-main .sg-tab-list {
   display: flex;
   gap: 10px;
   margin-bottom: 0;
   width: 100%;
   max-width: none;
}

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

.security-page #security-main .sg-tab-list button[aria-selected="true"] {
   color: #fff;
   background: var(--red);
   box-shadow: 0 8px 24px #e6001214;
}

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

.security-page #security-main .sg-pain-photo {
   aspect-ratio: 860 / 289;
   background: url('/images/front/v2026/unmannedsecurity/pain1.jpg') center / cover no-repeat;
}

.security-page #security-main #pain-panel-1 .sg-pain-photo {
   background-image: url('/images/front/v2026/unmannedsecurity/pain2.jpg');
}

.security-page #security-main #pain-panel-2 .sg-pain-photo {
   background-image: url('/images/front/v2026/unmannedsecurity/pain3.jpg');
}

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

.security-page #security-main .sg-pain-caption h3 {
   font-size: 32px;
   margin-bottom: 14px;
}

.security-page #security-main .sg-pain-caption p {
   font-size: 20px;
}

.security-page #security-main .sg-methods {
   padding-top: 80px;
   padding-bottom: 60px;
}

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

.security-page #security-main .sg-card {
   position: relative;
   padding: 38px 30px;
   min-height: 250px;
}

.security-page #security-main .sg-card h3 {
   font-size: 23px;
   font-weight: 600;
   margin-bottom: 10px;
}

.security-page #security-main .sg-card p {
   color: var(--sg-muted);
   font-size: 16px;
   line-height: 1.7;
}

.security-page #security-main .sg-icon {
   width: 65px;
   height: 65px;
   color: var(--red);
}

.security-page #security-main .sg-card .sg-icon {
   display: block;
}

.security-page #security-main .sg-method-grid .sg-card {
   display: flex;
   flex-direction: column;
   border-top: 1px solid #eee;
   border-right: 1px solid #eee;
}

.security-page #security-main .sg-method-grid .sg-card:nth-child(3n) {
   border-right: 0;
}

@media (min-width: 768px) {

   .security-page #security-main .sg-method-grid .sg-card:nth-child(2)::after,
   .security-page #security-main .sg-method-grid .sg-card:nth-child(3)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: #eee;
      pointer-events: none;
   }

}

.security-page #security-main .sg-method-grid .sg-card .sg-icon {
   align-self: flex-end;
}

.security-page #security-main .sg-management {
   position: relative;
   overflow: hidden;
   background: #080a0b;
   color: #fff;
   padding-top: 80px;
   padding-bottom: 80px;
}

.security-page #security-main .sg-management-photo {
   position: absolute;
   inset: 0;
   background: url('/images/front/v2026/unmannedsecurity/feauture-dark-background.jpg') center / cover no-repeat;
}

.security-page #security-main .sg-management::after {
   position: absolute;
   content: "";
   inset: 0;
   background: linear-gradient(90deg, #080a0b 8%, rgba(8, 10, 11, 0.66) 48%, transparent);
}

.security-page #security-main .sg-management .wrap {
   position: relative;
   z-index: 1;
}

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

.security-page #security-main .sg-management .sg-desc {
   color: #c5c5c5;
}

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

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

.security-page #security-main .sg-management-grid .sg-card:first-child {
   border: 0;
}

.security-page #security-main .sg-management-grid .sg-icon {
   order: -1;
   margin: 0 0 22px;
   color: #e8898e;
   width: 55px;
   height: 55px;
}

.security-page #security-main .sg-management-grid p {
   color: #c5c5c5;
}

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

.security-page #security-main .sg-integration-grid .sg-card {
   box-shadow: 0 0 32px #26254710;
   border-radius: 12px;
}

.security-page #security-main .sg-cases {
   background: #272727;
   color: #fff;
}

.security-page #security-main .sg-case-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 46px 0 24px;
}

.security-page #security-main .sg-case-tabs button {
   background: transparent;
   color: #ddd;
   border: 0;
   padding: 10px 16px;
   font-size: 20px;
}

.security-page #security-main .sg-case-tabs button[aria-selected="true"] {
   background: var(--red);
   color: #fff;
}

.security-page #security-main .sg-case-gallery {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
}

.security-page #security-main .sg-case-photo {
   aspect-ratio: 450 / 340;
   background-image: url('/images/front/v2026/unmannedsecurity/reference.jpg');
   background-size: 426.667% 2312.647%;
   background-repeat: no-repeat;
}

.security-page #security-main .sg-case-one {
   background-position: 17.007% 61.77%;
}

.security-page #security-main .sg-case-two {
   background-position: 49.66% 61.77%;
}

.security-page #security-main .sg-case-three {
   background-position: 82.31% 61.77%;
}

.security-page #security-main .sg-case-guide {
   min-height: 320px;
   padding: 48px;
   display: flex;
   align-items: center;
   gap: 40px;
   background: #333;
}

.security-page #security-main .sg-case-guide h3 {
   font-size: 30px;
   margin-bottom: 16px;
}

.security-page #security-main .sg-case-guide p {
   font-size: 20px;
   color: #ddd;
}

.security-page #security-main .sg-case-guide a {
   display: inline-block;
   margin-top: 30px;
   border-bottom: 1px solid #ff5260;
   padding-bottom: 6px;
}

.security-page #security-main .sg-faq {
   background: #f8f9fc;
}

.security-page #security-main .sg-faq .sec-title {
   text-align: center;
}

.security-page #security-main .sg-faq-list {
   max-width: 1180px;
   margin: 60px auto 0;
}

.security-page #security-main .sg-faq details {
   margin-top: 12px;
   border: 2px solid transparent;
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
}

.security-page #security-main .sg-faq details[open] {
   border-color: var(--red);
   box-shadow: 0 0 28px #2625470d;
}

.security-page #security-main .sg-faq summary {
   cursor: pointer;
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 23px 30px;
   gap: 24px;
   font-size: 21px;
   font-weight: 500;
}

.security-page #security-main .sg-faq summary::-webkit-details-marker {
   display: none;
}

.security-page #security-main .sg-faq summary span::before {
   content: "+";
   color: var(--red);
   font-size: 28px;
   font-weight: 400;
}

.security-page #security-main .sg-faq details[open] summary span::before {
   content: "×";
}

.security-page #security-main .sg-faq-answer {
   padding: 25px 30px 32px;
   color: var(--sg-muted);
   font-size: 18px;
   border-top: 1px solid #f0f0f0;
   line-height: 1.8;
}

@media(max-width:1100px) {
   .security-page #security-main .sg-hero h1 {
      font-size: 44px;
   }

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

   .security-page #security-main .sg-management-grid .sg-card {
      padding: 0 22px;
   }

   .security-page #security-main .sg-management-grid .sg-card:first-child {
      padding-left: 22px;
   }

   .security-page #security-main .sg-card {
      padding: 28px 22px;
   }

   .security-page #security-main .sg-case-tabs button {
      font-size: 17px;
   }

}

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

   .security-page #security-main .sg-hero {
      min-height: 560px;
      margin-top: 64px;
   }

   .security-page #security-main .sg-hero-photo {
      left: 5%;
      opacity: .65;
   }

   .security-page #security-main .sg-hero::after {
      background: linear-gradient(90deg, #101416e8, #10141655);
   }

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

   .security-page #security-main .sg-hero p {
      font-size: 15px;
   }

   .security-page #security-main .sg-badge {
      font-size: 17px;
      margin-bottom: 24px;
      padding: 8px 18px;
   }

   .security-page #security-main .sg-info {
      padding: 28px 22px;
   }

   .security-page #security-main .sg-info h2 {
      font-size: 27px;
   }

   .security-page #security-main .sg-info p {
      font-size: 14px;
   }

   .security-page #security-main .sg-info p br {
      display: none;
   }

   .security-page #security-main .sg-info-top {
      gap: 15px;
      padding-bottom: 25px;
   }

   .security-page #security-main .sg-info-top .sg-icon {
      width: 64px;
      height: 64px;
   }

   .security-page #security-main .sg-info h3 {
      font-size: 18px;
   }

   .security-page #security-main .sg-tabs {
      margin-top: 30px;
   }

   .security-page #security-main .sg-tab-list {
      gap: 5px;
   }

   .security-page #security-main .sg-tab-list button {
      font-size: 14px;
      padding: 15px 5px;
      border-radius: 9px;
   }

   .security-page #security-main .sg-pain-caption {
      padding: 16px;
   }

   .security-page #security-main .sg-pain-caption h3 {
      font-size: 19px;
      margin-bottom: 5px;
   }

   .security-page #security-main .sg-pain-caption p {
      font-size: 12px;
   }

   .security-page #security-main .sg-methods {
      padding-top: 50px;
   }

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

   .security-page #security-main .sg-method-grid .sg-card:nth-child(3n) {
      border-right: 1px solid #eee;
   }

   .security-page #security-main .sg-method-grid .sg-card:nth-child(2n) {
      border-right: 0;
   }

   .security-page #security-main .sg-card {
      min-height: 180px;
      padding: 23px 16px;
   }

   .security-page #security-main .sg-card h3 {
      font-size: 18px;
   }

   .security-page #security-main .sg-card p {
      font-size: 13px;
   }

   .security-page #security-main .sg-card .sg-icon {
      width: 45px;
      height: 45px;
      margin-top: 25px;
   }

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

   .security-page #security-main .sg-management-grid .sg-card {
      padding: 0 14px;
   }

   .security-page #security-main .sg-management-grid .sg-card:first-child {
      padding-left: 14px;
   }

   .security-page #security-main .sg-management-grid .sg-card:nth-child(odd) {
      border-left: 0;
   }

   .security-page #security-main .sg-management-grid .sg-icon {
      margin-top: 0;
   }

   .security-page #security-main .sg-management-photo {
      inset: 0 0 0 15%;
   }

   .security-page #security-main .sg-desc {
      font-size: 14px;
   }

   .security-page #security-main .sg-integration-grid {
      gap: 14px;
   }

   .security-page #security-main .sg-case-tabs {
      gap: 3px;
      margin-top: 28px;
   }

   .security-page #security-main .sg-case-tabs button {
      font-size: 14px;
      padding: 9px 10px;
   }

   .security-page #security-main .sg-case-gallery {
      grid-template-columns: repeat(3, 80%);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 14px;
      padding-bottom: 12px;
   }

   .security-page #security-main .sg-case-photo {
      scroll-snap-align: start;
   }

   .security-page #security-main .sg-case-guide {
      padding: 28px 20px;
      gap: 20px;
      min-height: 260px;
   }

   .security-page #security-main .sg-case-guide .sg-icon {
      flex-shrink: 0;
   }

   .security-page #security-main .sg-case-guide h3 {
      font-size: 22px;
   }

   .security-page #security-main .sg-case-guide p,
   .security-page #security-main .sg-case-guide a {
      font-size: 14px;
   }

   .security-page #security-main .sg-faq .sec-title {
      font-size: 23px;
   }

   .security-page #security-main .sg-faq-list {
      margin-top: 30px;
   }

   .security-page #security-main .sg-faq summary {
      font-size: 15px;
      padding: 18px;
   }

   .security-page #security-main .sg-faq-answer {
      font-size: 14px;
      padding: 18px;
   }

}

.security-page #security-main .sg-process-list {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 44px;
   margin-top: 60px;
}

.security-page #security-main .sg-process-list li {
   position: relative;
   padding: 34px 30px;
   border-radius: 16px;
   box-shadow: 0 0 35px #20284a10;
}

.security-page #security-main .sg-step-number {
   display: block;
   color: var(--red);
   font-size: 40px;
   font-weight: 800;
   margin-bottom: 48px;
}

.security-page #security-main .sg-process-list h3 {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 14px;
}

.security-page #security-main .sg-process-list p {
   font-size: 17px;
   color: #777;
   line-height: 1.6;
}

.security-page #security-main .sg-process-list li:not(:last-child)::after {
   content: "";
   position: absolute;
   right: -33px;
   top: 48%;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-left: 20px solid var(--red);
}

.security-page #security-main .sg-management {
   min-height: 800px;
}

.security-page #security-main .sg-management-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 55px 0;
}

.security-page #security-main .sg-management-grid .sg-card:nth-child(4n+1) {
   border-left: 0;
}

.security-page #security-main .sg-management-grid .sg-icon {
   color: #fca3aa;
}

.security-page #security-main .sg-cases {
   padding-bottom: 130px;
}

.security-page #security-main .sg-case-photo {
   aspect-ratio: 347 / 256;
   background-image: url('/images/front/v2026/unmannedsecurity/reference.jpg');
   background-size: 417.291% 2343.75%;
}

.security-page #security-main .sg-case-photo-0 {
   background-position: 17.075% 49.878%;
}

.security-page #security-main .sg-case-photo-1 {
   background-position: 50% 49.878%;
}

.security-page #security-main .sg-case-photo-2 {
   background-position: 82.879% 49.878%;
}

.security-page #security-main .sg-case-detail {
   display: flex;
   align-items: center;
   gap: 50px;
   min-height: 350px;
}

.security-page #security-main .sg-case-detail .sg-case-photo {
   width: calc((100% - 40px) / 3);
   flex-shrink: 0;
}

.security-page #security-main .sg-case-detail>.sg-icon {
   flex-shrink: 0;
   width: 90px;
   height: 90px;
}

.security-page #security-main .sg-method-grid .sg-icon {
   justify-self: end;
   margin-top: auto;
}

.security-page #security-main .sg-case-detail h3 {
   font-size: 30px;
   margin-bottom: 20px;
}

.security-page #security-main .sg-case-detail p {
   font-size: 20px;
   color: #ddd;
}

.security-page #security-main .sg-case-detail a {
   display: inline-block;
   margin-top: 28px;
   padding-bottom: 5px;
   border-bottom: 1px solid var(--red);
}

.security-page #security-main .sg-solved {
   color: #fff;
   background: #272727;
}

.security-page #security-main .sg-solved .solved-list li {
   color: #333;
   background: #fff;
}

@media(max-width:1100px) {
   .security-page #security-main .sg-process-list {
      gap: 26px;
   }

   .security-page #security-main .sg-process-list li {
      padding: 28px 18px;
   }

   .security-page #security-main .sg-process-list li:not(:last-child)::after {
      right: -21px;
      border-left-width: 14px;
      border-top-width: 9px;
      border-bottom-width: 9px;
   }

   .security-page #security-main .sg-process-list h3 {
      font-size: 20px;
   }

   .security-page #security-main .sg-process-list p {
      font-size: 14px;
   }

   .security-page #security-main .sg-management-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .security-page #security-main .sg-management-grid .sg-card:nth-child(4n+1) {
      border-left: 1px solid #ffffff45;
   }

   .security-page #security-main .sg-management-grid .sg-card:nth-child(3n+1) {
      border-left: 0;
   }

}

@media(max-width:767px) {
   .security-page #security-main .sg-info-photo {
      width: 85px;
   }

   .security-page #security-main .sg-process-list {
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 32px;
   }

   .security-page #security-main .sg-process-list li {
      display: grid;
      grid-template-columns: 65px 1fr;
      gap: 8px 16px;
      padding: 24px;
   }

   .security-page #security-main .sg-step-number {
      grid-row: span 2;
      margin: 0;
      font-size: 32px;
      align-self: center;
   }

   .security-page #security-main .sg-process-list h3 {
      margin: 0;
   }

   .security-page #security-main .sg-process-list li:not(:last-child)::after {
      top: auto;
      bottom: -19px;
      right: calc(50% - 8px);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 0;
      border-top: 12px solid var(--red);
   }

   .security-page #security-main .sg-management-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 0;
   }

   .security-page #security-main .sg-management-grid .sg-card:nth-child(n) {
      border-left: 1px solid #ffffff45;
   }

   .security-page #security-main .sg-management-grid .sg-card:nth-child(odd) {
      border-left: 0;
   }

   .security-page #security-main .sg-cases {
      padding-bottom: 60px;
   }

   .security-page #security-main .sg-case-detail {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      min-height: 300px;
   }

   .security-page #security-main .sg-case-detail .sg-case-photo {
      width: min(100%, 450px);
   }

   .security-page #security-main .sg-case-detail h3 {
      font-size: 22px;
      margin-bottom: 12px;
   }

   .security-page #security-main .sg-case-detail p,
   .security-page #security-main .sg-case-detail a {
      font-size: 15px;
   }

   .security-page #security-main .sg-pain-caption h3 {
      font-size: 18px;
   }

   .security-page #security-main .sg-pain-caption p {
      font-size: 12px;
   }

}

.security-page #security-main .sg-install-cases {
   background: #272727;
   color: #fff;
   overflow: hidden;
}

.security-page #security-main .sg-install-case-tabs {
   display: flex;
   flex-wrap: wrap;
   gap: 0;
   margin: 46px 0 20px;
}

.security-page #security-main .sg-install-case-tabs button {
   background: transparent;
   color: #ddd;
   border: 0;
   padding: 6px 16px;
   font-size: 20px;
}

.security-page #security-main .sg-install-case-tabs button[aria-pressed="true"] {
   background: var(--red);
   color: #fff;
}

.security-page #security-main .sg-install-cases .sg-install-case-gallery {
   overflow: visible;
   clip-path: inset(0 -100vw 0 0);
}

.security-page #security-main .sg-install-case-slide {
   height: auto;
}

.security-page #security-main .sg-install-case-image {
   position: relative;
}

.security-page #security-main .sg-install-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;
}

.security-page #security-main .sg-install-case-slide.is-selected .sg-install-case-image::after {
   opacity: 1;
}

.security-page #security-main .sg-install-case-photo {
   display: block;
   width: 100%;
   aspect-ratio: 460 / 340;
   object-fit: cover;
}

.security-page #security-main .sg-install-case-caption {}

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

.security-page #security-main .sg-install-case-tabs button:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
}

.security-page #security-main .sg-install-case-gallery:not(.swiper-initialized) .swiper-wrapper {
   overflow-x: auto;
   gap: 20px;
}

.security-page #security-main .sg-install-case-gallery:not(.swiper-initialized) .sg-install-case-slide {
   position: relative;
   flex: 0 0 80%;
   max-width: 460px;
}

@media (max-width: 1100px) {
   .security-page #security-main .sg-install-case-tabs button {
      font-size: 17px;
   }

}

@media (max-width: 767px) {
   .security-page #security-main .sg-install-case-tabs {
      gap: 3px;
      margin-top: 28px;
   }

   .security-page #security-main .sg-install-case-tabs button {
      font-size: 14px;
      padding: 9px 10px;
   }

   .security-page #security-main .sg-install-case-caption h3 {
      font-size: 18px;
   }

}