@charset "utf-8";

/* Base */
.mp-section {--theme-1: #fff; --theme-2: var(--primary); --radius: 100px; padding-block: 184px 217px; border-radius: var(--radius) var(--radius) 0 0; background: var(--theme-1); margin-bottom: -100px; font-size: 17px; overflow: hidden;}
.mp-section-head {margin-bottom: 70px;}
.mp-section-title {--bullet-color: var(--theme-2); --bullet-size: .3em; position: relative; font-family: var(--font-secondary); font-size: 60px; font-weight: 700; text-transform: uppercase;}
.mp-section-title::before {position: absolute; top: 0; right: 100%; content: ''; width: var(--bullet-size); height: var(--bullet-size); border-radius: 50%; background: var(--bullet-color); margin-right: 0.1em;}
.mp-section-title.has-logo {display: flex; align-items: flex-end; margin-bottom: 40px; gap: 25px;}
.mp-section-title.has-logo::before {display: none;}
.mp-section-title.has-logo .logo {height: 80px; margin-left: -96px;}
.mp-section-title.has-logo .txt {font-size: 25px; line-height: 1;}
.mp-section-body {}
.mp-article {}
.mp-article:not(:last-child) {margin-bottom: 100px;}
.mp-article-head {}
.mp-article-title {font-size: 25px; font-family: var(--font-secondary); font-weight: 700; line-height: 1.76; color: var(--theme-2); margin-bottom: 0.8em;}
.mp-article-body {}
.mp-article.split {display: grid; grid-template-columns: 254px calc(100% - 282px); gap: 28px;}
.mp-article.split .mp-article-head {}
.mp-article.split .mp-article-body {padding-top: 10px;}

.sticky-section {position: relative; margin-bottom: 0; box-shadow: 0 -100px 100px rgb(0,0,0,.15); box-shadow: none;}
.sticky-section::after {position: absolute; top: 100%; left: 0; width: 100%; height: 500px; content: ''; background: var(--theme-1); pointer-events: none;}
.sticky-section::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgb(0,0,0,.65); z-index: 100; border-radius: var(--radius) var(--radius) 0 0; opacity: 0; transition: opacity .3s; pointer-events: none;}
.sticky-section-active::before {opacity: 1; transition: opacity 1s;}
.sticky-section.not-action::before {display: none;}
.sticky-section-hide {opacity: 0;}

.pc-display {}
.m-display {display: none;}



@media (hover: hover) {
  .tab-nav button:hover {--theme: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .mp-section {--radius: 30px; padding-block: 130px 150px; font-size: 16px;}
  .mp-section-head {margin-bottom: 50px;}
  .mp-section-title {font-size: 52px;}
  .mp-section-title.has-logo {margin-bottom: 20px;}
  .mp-section-title.has-logo .logo {height: 50px; margin-left: -62px;}
  .mp-section-title.has-logo .txt {font-size: 22px;}

  .mp-article:not(:last-child) {margin-bottom: 80px;}
  .mp-article-title {line-height: 1.5; margin-bottom: 0.3em; font-size: 22px;}
  .mp-article.split {display: block;}
  .mp-article.split .mp-article-body {padding-top: 0;}
}
@media screen and (max-width: 767px) {
  .mp-section {--radius: 10px; padding-block: 60px 120px; font-size: 15px;}
  .mp-section-head {margin-bottom: 40px;}
  .mp-section-title {font-size: 32px; display: inline-block;}
  .mp-section-title::before {right: auto; left: -5px; margin-right: 0; margin-bottom: 3px; top: auto; bottom: 100%;}
  .mp-section-title.has-logo {display: block;}
  .mp-section-title.has-logo .logo {height: 30px; margin-left: 0px;}
  .mp-section-title.has-logo .txt {font-size: 18px; margin-left: 35px; display: block; margin-top: 0.5em;}

  .mp-article:not(:last-child) {margin-bottom: 70px;}
  .mp-article-title {font-size: 20px;}

  .sticky-section::before {display: none;}

  .pc-display {display: none;}
  .m-display {display: block;}
}
@media screen and (max-width: 499px) {}


/* Main visual */
.main-visual {position: relative; overflow: hidden; width: 100%; height: 100vh; display: flex; flex-direction: column;}
.main-visual-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.main-visual-bg::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgb(0,0,0,.5); mix-blend-mode: overlay;}
.main-visual-bg video,
.main-visual-bg img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block;}
.main-visual-content {height: 100%; display: flex; justify-content: flex-end; align-items: center; color: #fff;}
.main-visual-content .content {width: 50%; padding-left: 160px; line-height: 1.3;}
.main-visual-content .content .logo {width: 513px; height: auto; margin-left: -120px;}
.main-visual-content .content .desc {font-size: 36px; font-weight: 500; display: block; margin-top: 1em;}
.main-visual-banner {background: rgb(0,0,0,.85); padding: 43px 0; color: var(--gray);}
.main-visual-banner .container {display: flex; align-items: center; justify-content: space-between;}
.main-visual-banner .description {font-size: 17px;}
.main-visual-banner .btn-inquiry {display: flex; align-items: center; gap: 23px; height: 69px; border-radius: 69px; background: #000; padding-inline: 30px 20px; transition: background .4s var(--cubic-pop1);}
.main-visual-banner .btn-inquiry .slogan {flex-shrink: 0; transition: color .4s var(--cubic-pop1);}
.main-visual-banner .btn-inquiry .box {height: 42px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 42px; border: 1px solid var(--gray-dark); padding-inline: 23px; transition: background .4s var(--cubic-pop1), border .4s var(--cubic-pop1), color .4s var(--cubic-pop1);}
@media (hover: hover) {
  .main-visual-banner .btn-inquiry:hover {background: var(--primary); color: #fff;}
  .main-visual-banner .btn-inquiry:hover .box {background: var(--dark-navy); border-color: var(--dark-navy);}
}
@media screen and (max-width: 1399px) {
  .main-visual {min-height: 720px;}
  .main-visual-content .content {width: 70%;}
  .main-visual-content .content .logo {width: 320px; margin-left: -84px;}
  .main-visual-content .content .desc {font-size: 30px;}
  .main-visual-banner {padding-block: 25px; font-size: 15px;}
  .main-visual-banner .container {flex-direction: column; align-items: center; text-align: center; gap: 15px;}
  .main-visual-banner .description {font-size: 16px;}
  .main-visual-banner .btn-inquiry {background: var(--primary); color: #fff;}
  .main-visual-banner .btn-inquiry .box {background: var(--dark-navy); border-color: var(--dark-navy);}
}
@media screen and (max-width: 767px) {
  .main-visual-content .content {width: 100%; padding: 0; text-align: center;}
  .main-visual-content .content .logo {margin-inline: auto; width: 240px; transform: translate(-23px);}
  .main-visual-content .content .desc {font-size: 24px;}
  .main-visual-banner {font-size: 14px;}
  .main-visual-banner .description {font-size: 15px;}
  .main-visual-banner .btn-inquiry .slogan {line-height: 1.3;}
}
@media screen and (max-width: 499px) {}


/* Brands */
#mp-brand {--theme-1: var(--primary); --theme-2: var(--secondary); color: #fff; border-radius: 0;}
#mp-brand .slogan {position: relative;}
#mp-brand .slogan .fill {position: absolute; top: 0; left: 0; width: 0%; overflow: hidden; transition: width 0s 0s var(--cubic-pop1);}
#mp-brand .slogan .fill img {max-width: none;}
#mp-brand .slogan .empty {}
#mp-brand.active .slogan .fill {width: 100%; transition: width 1s 0.8s var(--cubic-pop1);}
#mp-brand .mp-article-body .intro .cont {display: flex; flex-direction: column; align-items: flex-start;}
#mp-brand .mp-article-body .intro .cont .info {display: flex; font-size: 15px; gap: 1em; padding: .3em 2.5em .3em 1.5em; border-radius: 36px; border: 1px solid var(--sky-blue); color: var(--sky-blue);}
#mp-brand .emoticon-infomation {position: relative; background: #0044CB; border-radius: 18px; padding: 30px 25px; margin-top: 35px; color: var(--sky-blue); width: 100%;}
#mp-brand .emoticon-infomation .visual {position: absolute; bottom: 100%; right: 0;}
#mp-brand .emoticon-infomation .body {}
#mp-brand .emoticon-infomation .body .emt-select-lang {display: flex; align-items: center; gap: 20px; font-size: 19px;}
#mp-brand .emoticon-infomation .body .emt-select-lang .tit {font-weight: 700; color: #fff;}
#mp-brand .emoticon-infomation .body .emt-select-lang i {width: 7px; height: 7px; border-radius: 50%; background: #fff;}
#mp-brand .emoticon-infomation .body .emt-select-lang .btns {font-weight: 400; display: flex; gap: 40px; position: relative; bottom: 0;}
#mp-brand .emoticon-infomation .body .emt-select-lang .btns button {all: unset; position: relative; cursor: pointer;}
#mp-brand .emoticon-infomation .body .emt-select-lang .btns button.swiper-pagination-bullet-active {color: #fff; font-weight: 700;}
#mp-brand .emoticon-infomation .body .emt-select-lang .btns button:not(:last-child)::after {position: absolute; top: 50%; left: calc(100% + 20px); width: 1px; height: .7em; background: var(--sky-blue); content: ''; display: block; transform: translate(50%, -50%);}
#mp-brand .emoticon-infomation .body .wrapper {padding-left: 112px; padding-top: 25px;}
#mp-brand .emoticon-infomation .body .emt-thumb-carousal .thumbs {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; pointer-events: none;}
#mp-brand .emoticon-infomation .body .emt-thumb-carousal .thumbs img {background: #fff; border-radius: 10px; object-fit: cover; box-shadow: 5px 5px 10px rgb(0,0,0,.15);}
#mp-brand .emoticon-infomation .body .cases {margin-top: 25px;}
#mp-brand .emoticon-infomation .body .cases > li {font-size: 15px; display: flex; gap: 1.5em;}
#mp-brand .emoticon-infomation .body .cases > li .key {font-weight: 700; flex-shrink: 0;}
#mp-brand .emoticon-infomation .body .cases > li .value > li {display: flex; gap: .3em;}
#mp-brand .emoticon-infomation .body .cases > li .value > li .num {flex-shrink: 0;}
#mp-brand .emoticon-infomation .foot {margin-top: 35px; padding-top: 29px; border-top: 1px solid rgb(255,255,255,.27); display: flex; justify-content: space-between;}
#mp-brand .emoticon-infomation .foot .notice {display: flex; gap: 12px; align-items: flex-start;}
#mp-brand .emoticon-infomation .foot .notice img {}
#mp-brand .emoticon-infomation .foot .notice span {font-size: 13px; line-height: 1.5; }
#mp-brand .emoticon-infomation .foot nav {display: flex; justify-content: flex-end; gap: 13px;}
@media (hover: hover) {
  #mp-brand .emoticon-infomation .body .emt-select-lang .btns button:hover {color: #fff;}
}
@media screen and (max-width: 1399px) {
  #mp-brand .slogan img {height: 130px;}
  #mp-brand .mp-article-body .intro .cont {width: 70%;}
  #mp-brand .mp-article-body .intro .cont .info {line-height: 1.3; flex-direction: column; gap: 5px; border-radius: 10px; padding: 15px 30px 15px 15px;}
  #mp-brand .emoticon-infomation .body .emt-select-lang {font-size: 17px;}
  #mp-brand .emoticon-infomation .body .wrapper {padding-left: 0;}
  #mp-brand .emoticon-infomation .foot {gap: 20px;}
  #mp-brand .emoticon-infomation .foot .notice img {width: 70px;}
  #mp-brand .emoticon-infomation .foot nav {flex-shrink: 0;}
}
@media screen and (max-width: 767px) {
  #mp-brand .slogan img {height: auto; width: calc(100vw - 40px); max-width: none;}
  #mp-brand .mp-article-body .intro .cont {width: 100%;}
  #mp-brand .emoticon-infomation {padding: 30px 15px;}
  #mp-brand .emoticon-infomation .visual {display: none;}
  #mp-brand .emoticon-infomation .body .emt-select-lang {font-size: 16px; display: block;}
  #mp-brand .emoticon-infomation .body .emt-select-lang .tit {margin-bottom: 0.5em; display: block;}
  #mp-brand .emoticon-infomation .body .emt-select-lang .btns {gap: 5px; font-size: 14px; line-height: 1; display: grid; grid-template-columns: repeat(3, 1fr);}
  #mp-brand .emoticon-infomation .body .emt-select-lang .btns button {background: #fff; border-radius: 100px; padding: 5px 10px; color: var(--primary)!important; text-align: center;}
  #mp-brand .emoticon-infomation .body .emt-select-lang .btns button.swiper-pagination-bullet-active {background: var(--sky-blue);}
  #mp-brand .emoticon-infomation .body .emt-select-lang .btns button:not(:last-child)::after {display: none;}
  #mp-brand .emoticon-infomation .body .emt-thumb-carousal .thumbs {grid-template-columns: repeat(2, 1fr);}
  #mp-brand .emoticon-infomation .body .cases > li {flex-direction: column; gap: .1em; margin-bottom: 15px;}
  #mp-brand .emoticon-infomation .foot {flex-direction: column;}
  #mp-brand .emoticon-infomation .foot .notice {order: 2;}
  #mp-brand .emoticon-infomation .foot .notice img {width: 50px;}
  #mp-brand .emoticon-infomation .foot nav {order: 1; flex-direction: column;}
}
@media screen and (max-width: 499px) {}


/* Service */
#mp-service .mp-article {display: flex; gap: 60px;}
#mp-service .mp-article-head {}
#mp-service .mp-article-body {max-width: 678px; margin-top: -180px; margin-left: auto;}
#mp-service .diagram {position: relative; margin-left: auto;}
#mp-service .diagram .core {opacity: 0; transition: all .7s 0s var(--cubic-pop1); transform: scale(0.7);}
#mp-service.active .diagram .core {opacity: 1; transform: scale(1); transition: all .7s .5s var(--cubic-pop1);}
#mp-service .diagram .item {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all .7s 0s var(--cubic-pop1);}
#mp-service.active .diagram .item {transition: all .7s .8s var(--cubic-pop1); opacity: 1;}
#mp-service .diagram .item-1 {transform: translate(-50%, -110%);}
#mp-service .diagram .item-2 {transform: translate(-100%, -5%);}
#mp-service .diagram .item-3 {transform: translate(0%, -5%);}
#mp-service.active .diagram .item-1 {transform: translate(-50%, -134%);}
#mp-service.active .diagram .item-2 {transform: translate(-116%, 5%);}
#mp-service.active .diagram .item-3 {transform: translate(16%, 5%);}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  #mp-service .mp-article {gap: 30px;}
  #mp-service .mp-article-head {}
  #mp-service .mp-article-body {width: 55%; flex-shrink: 0;}
  #mp-service .diagram {margin: 50px 0;}
}
@media screen and (max-width: 767px) {
  #mp-service .mp-article {flex-direction: column; gap: 15px;}
  #mp-service .mp-article-body {width: 100%; margin-top: 0;}
  #mp-service .diagram {max-width: 400px; margin-inline: auto;}
}
@media screen and (max-width: 499px) {}


/* What we do */
#mp-wwd {--theme-1: var(--dark); --theme-2: var(--secondary); color: #fff;}
#mp-wwd .icons {display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; text-align: center;}
#mp-wwd .icons > li {padding: 17px 12px 23px 12px; background: #303030; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;}
#mp-wwd .icons > li .txt {font-size: 16px; line-height: 1.375; color: var(--gray);}
#mp-wwd .total-flatform-diagram {margin-top: -50px;}
#mp-wwd .diagram {position: relative;}
#mp-wwd .diagram .core {opacity: 0; transition: all .7s 0s var(--cubic-pop1); transform: scale(0.7);}
#mp-wwd .mp-article.active .diagram .core {opacity: 1; transform: scale(1); transition: all .7s .5s var(--cubic-pop1);}
#mp-wwd .diagram .item {position: absolute; top: 0; left: 0;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  #mp-wwd .icons > li .txt {font-size: 14px;}
  .mp-article.split .mp-article-body {}
  #mp-wwd .total-flatform-diagram {margin-top: 30px;}
  #mp-wwd .diagram {margin-top: 30px;}
}
@media screen and (max-width: 767px) {
  #mp-wwd .icons {display: flex; flex-wrap: wrap; gap: 5px;}
  #mp-wwd .icons > li {flex: 1 1 400px; flex-direction: row; padding: 15px 15px; text-align: left; gap: 20px;}
  #mp-wwd .icons > li .icon {width: 50px;}
}
@media screen and (max-width: 499px) {}


/* Safers: map */
#mp-safers-map {}
#mp-safers-map .tab-wrapper {background: #F8F8F8;}
#mp-safers-map .process-carousal {padding-inline: 30px; position: relative;}
#mp-safers-map .process-carousal.mobile {display: none;}
#mp-safers-map .process-carousal .controls {position: absolute; top: 134px; left: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; width: 100%; transform: translate(0, -50%); pointer-events: none;}
#mp-safers-map .process-carousal .controls button {display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; box-shadow: 4px 8px 12px rgb(0,0,0,.15); pointer-events: initial;}
#mp-safers-map .process-carousal .controls button.swiper-button-disabled {opacity: 0; pointer-events: none;}
#mp-safers-map .process-carousal .controls button.prev svg {transform: rotate(180deg);}
#mp-safers-map .process-carousal .pagination {display: flex; justify-content: center; padding-top: 40px;}
#mp-safers-map .process-carousal .pagination button {all: unset; cursor: pointer; font-size: 19px; color: var(--gray-dark); display: flex; align-items: center;}
#mp-safers-map .process-carousal .pagination button .arw {width: 0; height: 0; border-left: 14px solid var(--gray-dark); border-block: 8px solid transparent; display: block; flex-shrink: 0; margin-inline: 18px;}
#mp-safers-map .process-carousal .pagination button.swiper-pagination-bullet-active {color: var(--primary); font-weight: 700;}
#mp-safers-map .process-carousal .cards {display: grid; gap: 20px;}
#mp-safers-map .process-carousal .cards.col--2 {grid-template-columns: repeat(2, 1fr);}
#mp-safers-map .process-carousal .cards.col--3 {grid-template-columns: repeat(3, 1fr);}
#mp-safers-map .process-carousal .card .thumb {border-radius: 12px; width: 100%; height: 268px; object-fit: cover;}
#mp-safers-map .process-carousal .card .cont {margin-top: 20px; display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-dark);}
#mp-safers-map .process-carousal .card .cont .tit {display: flex; align-items: center; font-size: 23px; gap: 5px; font-weight: 700;}
#mp-safers-map .process-carousal .card .cont .tit .num {display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #000; border-radius: 50%; color: #fff; font-size: 12px; flex-shrink: 0;}
#mp-safers-map .process-carousal .card .cont .desc {padding-left: 15px; border-left: 1px solid var(--gray-dark); line-height: 1.4; font-size: 16px; color: var(--gray-dark);}
@media (hover: hover) {
  #mp-safers-map .process-carousal .controls button:hover {background: var(--primary);}
  #mp-safers-map .process-carousal .controls button:hover path {stroke: #fff;}
}
@media screen and (max-width: 1399px) {
  #mp-safers-map .process-carousal {padding-inline: 15px;}
  #mp-safers-map .process-carousal .controls button {width: 42px; height: 42px;}
  #mp-safers-map .process-carousal .controls button svg {width: 12px; height: auto;}
  #mp-safers-map .process-carousal .cards {gap: 10px;}
  #mp-safers-map .process-carousal .card .cont {margin-top: 14px; gap: 8px; border-bottom: 0; display: block;}
  #mp-safers-map .process-carousal .card .cont .tit {font-size: 16px; gap: 10px; flex-shrink: 0;}
  #mp-safers-map .process-carousal .card .cont .desc {padding-left: 32px; font-size: 14px; border-left: none; margin-top: -0.2em; display: block;}
  #mp-safers-map .process-carousal .pagination button {font-size: 14px;}
  #mp-safers-map .process-carousal .pagination button .arw {border-left-width: 8px; border-block-width: 5px; margin-inline: 10px;}
}
@media screen and (max-width: 767px) {
  #mp-safers-map .process-carousal {padding-inline: 10px;}
  #mp-safers-map .process-carousal.pc {display: none;}
  #mp-safers-map .process-carousal.mobile {display: block;}
  #mp-safers-map .process-carousal .cards {grid-template-columns: repeat(1, 1fr)!important;}
  #mp-safers-map .process-carousal .card .thumb {height: 230px;}
  #mp-safers-map .process-carousal .controls {top: 115px; width: calc(100% + 20px); margin-left: -10px;}
  #mp-safers-map .process-carousal .controls button {width: 32px; height: 32px; background: var(--primary);}
  #mp-safers-map .process-carousal .controls button svg {width: 6px; height: auto;}
  #mp-safers-map .process-carousal .controls button path {stroke: #fff;}
}
@media screen and (max-width: 499px) {}


/* Safers: one */
#mp-safers-one {--theme-1: #F8F8F8;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}


/* Safers: live */
#mp-safers-live .tab-wrapper {background: #F8F8F8;}
#mp-safers-live .live-ai {display: flex; justify-content: flex-end; position: relative; padding: 30px 0 44px 0;}
#mp-safers-live .live-ai .visual {position: absolute; bottom: 0; left: 0;}
#mp-safers-live .live-ai .icons {display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; grid-auto-flow: row-reverse; width: 713px; position: relative; z-index: 1;}
#mp-safers-live .live-ai .icons > li {text-align: center;}
#mp-safers-live .live-ai .icons > li .inner {background: var(--primary); color: #fff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 13px; box-shadow: 6px 6px 18px rgb(0,0,0,.15);}
#mp-safers-live .live-ai .icons > li .icon {margin-bottom: 5px;}
#mp-safers-live .live-ai .icons > li .txt {font-size: 15px; line-height: 1.4;}
#mp-safers-live .live-ai .icons > li .desc {font-size: 13px; margin-top: 10px; display: block; line-height: 1.3;}
#mp-safers-live .live-ai .icons > li:nth-child(6) {grid-column: 2 / 3;}
#mp-safers-live .cctv-frame {width: 737px; max-width: 100%; margin: 0 auto; position: relative;}
#mp-safers-live .cctv-frame video {position: absolute; top: 15%; left: 12%; width: 59%; height: 69%; object-fit: cover;}
#mp-safers-live .cctv-frame img {position: relative; z-index: 2;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  #mp-safers-live .live-ai {flex-direction: column; align-items: center; gap: 20px;}
  #mp-safers-live .live-ai .visual {position: static; width: 440px;}
  #mp-safers-live .live-ai .icons {width: 100%;}
  #mp-safers-live .live-ai .icons > li:nth-child(6) {grid-column: initial;}
  #mp-safers-live .live-ai .icons > li .icon {width: 90px;}
  #mp-safers-live .live-ai .icons > li .txt {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  #mp-safers-live .live-ai {padding-bottom: 20px;}
  #mp-safers-live .live-ai .icons {display: flex; flex-wrap: wrap;}
  #mp-safers-live .live-ai .icons > li {flex: 1 1 90px;}
  #mp-safers-live .live-ai .icons > li .inner {border-radius: 10px; padding: 10px 5px;}
  #mp-safers-live .live-ai .icons > li .icon {width: 50px;}
  #mp-safers-live .live-ai .icons > li .txt {font-size: 12px;}
  #mp-safers-live .live-ai .icons > li .desc {font-size: 12px;}
}
@media screen and (max-width: 499px) {}


/* Inquiry */
#mp-inq {--theme-1: var(--dark-navy); color: #fff;}
#mp-inq .mp-section-head {display: flex; align-items: flex-end; gap: 30px;}
#mp-inq .mp-section-head .desc {line-height: 1.4; margin-bottom: 0.6em;}

.inq-form {background: #fff; border-radius: 12px; padding: 34px 43px; color: var(--dark); display: grid; grid-template-columns: 240px 1fr;}
.inq-form-categories {padding-left: 25px; padding-right: 15px; padding-block: 29px 0; border-right: 1px solid #E3E3E3;}
.inq-form-categories .plx-inp-tit {margin-bottom: 35px;}
.inq-form-body {padding: 15px 15px 0 38px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 50px; align-content: flex-start;}
.inq-form-body .plx-inp-tit {width: 100px;}
.inq-form-body .plx-inp-box.full {grid-column: span 2;}
.inq-form-body .plx-inp-box.inp-cnt {margin-top: -13px;}
.inq-form-body .plx-inp-box.inp-cnt .textarea {height: 150px;}
.inq-form-foot {grid-column: span 2; display: flex; justify-content: space-between; align-items: center; padding-inline: 25px 15px; padding-top: 20px; border-top: 1px solid #e3e3e3; margin-top: 30px;}
.inq-form-foot .agreebox {gap: 25px;}
.inq-form-foot .button-submit {width: 130px;}

#mp-inq .brochure-link {display: flex; align-items: center; gap: 15px; padding-top: 32px;}
#mp-inq .brochure-link .round-button {--bg: #fff; color: var(--primary); --hover-bg: var(--primary); --hover-color: #fff; width: 198px;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .inq-form {display: block;}
  .inq-form-categories {padding: 0; margin-bottom: 30px;}
  .inq-form-categories .plx-inp-tit {margin-bottom: 15px;}
  .inq-form-categories .checkbox-group.vertical {flex-direction: row;}
  .inq-form-body {padding: 0; gap: 15px;}
  .inq-form-body .plx-inp-tit {width: 60px;}
  .inq-form-foot {padding-inline: 0;}
  .inq-form-foot .agreebox {flex-direction: column; gap: 8px;}
  #mp-inq {margin-bottom: -50px;}
  #mp-inq .brochure-link {flex-direction: column;}
}
@media screen and (max-width: 767px) {
  #mp-inq .mp-section-head {flex-direction: column; align-items: flex-start; gap: 6px;}
  #mp-inq .mp-section-head .desc {margin-bottom: 0;}
  .inq-form {padding: 25px 20px;}
  .inq-form-body {grid-template-columns: repeat(1, 1fr);}
  .inq-form-body .plx-inp-box.full {grid-column: span 1;}
  .inq-form-foot {flex-direction: column; gap: 25px;}
}
@media screen and (max-width: 499px) {}


/* Format */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}