@charset "utf-8";


/* 공통 */
.cont-sub { margin-bottom: 15rem; } 

/* 1-1. CEO 인사말 */
.cont-ceo { display: flex; align-items: center; } 
.cont-ceo__img { border-radius: 100px 10px 10px 10px; overflow: hidden; width: 50rem; height: 60rem; } 
.cont-ceo__img img { width: 100%; height: 100%; object-fit: cover; } 
.cont-ceo__desc { padding-right: 15%; width: calc(100% - 50rem); } 
.cont-ceo__tit p { font-size: 3.2rem; color: #222; font-weight: 500; } 
.cont-ceo__tit p span { vertical-align: baseline; } 
.cont-ceo__tit p .txt-line { color: #2e5ea3; font-size: 4.4rem; font-weight: 700; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 55%, #eaeff6 0%); padding: 0 5px; } 
.cont-ceo__tit p .txt-bold { font-size: 3.2rem; font-weight: 700; } 
.cont-ceo__vertical--line { position: relative; margin: 5rem 0; width: 100%; height: 1px; display: block; background-color: #e5e5e5; } 
.cont-ceo__vertical--line::before { content: ''; position: absolute; right: 0; top: 0; background-color: #2e5ea3; width: 8rem; height: 1px; } 
.cont-ceo__txt p { color: #333; font-size: 18px; font-weight: 400; letter-spacing: -0.01em; } 
.cont-ceo__txt p span { color: #222; font-weight: 700; } 
.cont-ceo__txt p+p { margin-top: 3.5rem; } 
.cont-ceo .txt-ceo { font-size: 20px; color: #222; font-weight: 600; margin-top: 5rem; } 

@media (max-width: 1440px){
 .cont-ceo__txt p br { display: none; } 
 }
@media (max-width: 1280px){
 .cont-ceo__desc { padding-right: 10%; } 
 .cont-ceo__txt p+p { margin-top: 2.5rem; } 
 .cont-ceo .txt-ceo { margin-top: 3.5rem; } 
 .cont-ceo__vertical--line { margin: 4rem 0; } 
 }
@media (max-width: 1024px){
 .cont-ceo { flex-direction: column-reverse; } 
 .cont-ceo__desc { padding: 0; width: 100%; } 
 .cont-ceo__img { border-radius: 50%; width: 35rem; height: 35rem; } 
 .cont-ceo__tit { text-align: center; margin-top: 5rem; } 
 .cont-ceo__txt { text-align: center; } 
 .cont-ceo__vertical--line::before { display: none; } 
 }
@media (max-width: 768px){
 .cont-ceo__tit p .txt-line { font-size: 3.6rem; } 
 .cont-ceo__tit p .txt-bold { font-size: 3rem; } 
 .cont-ceo__tit p { font-size: 2.8rem; } 
 .cont-ceo__txt p { font-size: 16px; } 
 .cont-ceo .txt-ceo { font-size: 18px; } 
 }



/* 1-2. 연혁 */
.cont-history { padding-bottom: 35rem; background: url('../images/sub/history_bg.png') no-repeat bottom / cover; } 
.cont-history__page { margin: 0 var(--inner-padding); } 
.cont-history__year { display: flex; width: 100%; align-items: baseline; } 
.cont-history__year p { width: 34rem; font-size: 12rem; color: #768ec0; font-weight: 700; line-height: 1; } 
.cont-history__year span { position: relative; width: calc(100% - 34rem); height: 1px; display: block; background-color: #ccc; } 
.cont-history__year span::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; border-radius: 50%; width: 19px; height: 19px; border: 6px solid #4265a7; background-color: #fff; } 
.cont-history__page ul { margin: 7rem 0; } 
.cont-history__page:last-child ul { margin-bottom: 0; } 
.cont-history__page ul li { display: flex; } 
.cont-history__page ul li+li { margin-top: 2.5rem; } 
.cont-history__date { width: 18rem; flex: none; } 
.cont-history__date p { font-size: 20px; color: #222; font-weight: 600; line-height: 1.3; white-space: nowrap; } 
.cont-history__txt p { font-size: 18px; color: #666; font-weight: 500; line-height: 1.3; } 
.cont-history__txt p+p { margin-top: 0.5rem; } 
.cont-history__page:nth-child(2n-1) .cont-history__year { flex-direction: row-reverse; } 
.cont-history__page:nth-child(2n-1) .cont-history__year span::before { right: initial; left: 0; } 
.cont-history__page:nth-child(2n-1) { text-align: right; } 
.cont-history__page:nth-child(2n-1) ul li { flex-direction: row-reverse; padding-right: 24%; } 
.cont-history__page:nth-child(2n) ul li { padding-left: 24%; } 


@media (max-width: 1440px){
 .cont-history__year p { width: 30rem; font-size: 10rem; } 
 .cont-history__year span { width: calc(100% - 30rem); } 
 .cont-history__date p, .cont-history__txt p { font-size: 16px; } 
 }
@media (max-width: 1280px){
 .cont-history__page:nth-child(2n-1) ul li { padding-right: 10%; } 
 .cont-history__page:nth-child(2n) ul li { padding-left: 10%; } 
 }
@media (max-width: 1024px){
 .cont-history { padding-bottom: 25rem; } 
 .cont-history__page:nth-child(2n-1) ul li { padding-right: 15%; } 
 .cont-history__page:nth-child(2n) ul li { padding-left: 15%; } 
 }
@media (max-width: 960px){
 .cont-history__year p { width: 24rem; font-size: 8rem; } 
 .cont-history__year span { width: calc(100% - 24rem); } 
 .cont-history__page:nth-child(2n-1) ul li { padding-right: 0; } 
 .cont-history__page:nth-child(2n) ul li { padding-left: 0; } 
 .cont-history__date { width: 15rem; } 
 }
@media (max-width: 768px){
 .cont-history { padding-bottom: 25%; } 
 .cont-history__page:nth-child(2n-1) ul li { padding-right: 3%; } 
 .cont-history__page:nth-child(2n) ul li { padding-left: 3%; } 
 .cont-history__year p { font-size: 6.5rem; width: 19rem; } 
 .cont-history__year span { width: calc(100% - 19rem); } 
 .cont-history__date { width: 18rem; } 
 .cont-history__date p, .cont-history__txt p { font-size: 17px; } 
 .cont-history__date p { margin-bottom: 0.3rem; } 
 }
@media (max-width: 576px){
 .cont-history__date { width: initial; } 
 .cont-history__page:nth-child(2n-1) ul li { padding-right: 0; flex-direction: column; text-align: right; } 
 .cont-history__page:nth-child(2n) ul li { padding-left: 0; flex-direction: column; } 
 }



/* 1-4. 오시는 길 */
.cont-map { margin-bottom: 40rem; } 
.cont-map__frame { height: 50rem; width: 100%; position: relative; } 
.cont-map__frame iframe { width: 100%; height: 100%; } 
.cont-map__wrap { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -10rem); background-color: #2e5ea3; padding: 6.5rem 8rem; width: calc(100% - 2*var(--inner-padding)); } 
.cont-map__wrap::before { content: ''; position: absolute; right: 8rem; top: 50%; transform: translateY(-50%); background: url('../images/sub/map_bg.png') no-repeat center / contain; width: 20rem; height: 22rem; } 
.cont-map__desc { width: calc(100% - 25rem); } 
.cont-map__desc p { line-height: 1.2; } 
.cont-map__name { margin-bottom: 3rem; } 
.cont-map__name p { font-size: 28px; color: #fff; font-weight: 700; } 
.cont-map__ul { display: flex; flex-wrap: wrap; } 
.cont-map__ul li { display: flex; } 
.cont-map__category { padding-right: 15px; position: relative; padding-left: 26px; } 
.cont-map__category p { font-size: 18px; color: #fff; font-weight: 700; font-family: 'Montserrat'; } 
.cont-map__txt p { opacity: 0.7; color: #fff; font-weight: 500; font-size: 18px; } 
.cont-map__txt p+p { margin-top: 0.5rem; } 
.cont-map__li--a { width: 100%; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgb(255, 255, 255, 0.15); } 
.cont-map__li--p, .cont-map__li--f, .cont-map__li--e { width: 33.3%; } 
.cont-map__category::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 16px; background: url('../images/sub/map_ico01.png') no-repeat center / contain; } 
.cont-map__li--p .cont-map__category::before { width: 12px; height: 18px; background: url('../images/sub/map_ico02.png') no-repeat center / contain; } 
.cont-map__li--f .cont-map__category::before { width: 16px; height: 15px; background: url('../images/sub/map_ico03.png') no-repeat center / contain; } 
.cont-map__li--e .cont-map__category::before { width: 16px; height: 14px; background: url('../images/sub/map_ico04.png') no-repeat center / contain; } 

@media (max-width: 1440px){
 .cont-map__wrap { padding: 4.5rem 6rem; } 
 }
@media (max-width: 1280px){
 .cont-map__wrap { padding: 6.5rem 6rem; } 
 .cont-map__wrap::before { opacity: 0.5; right: 6rem; } 
 .cont-map__desc { width: calc(100% - 250px); } 
 }
@media (max-width: 1024px){
 .cont-map__desc { width: 100%; } 
 .cont-map__wrap::before { display: none; } 
 .cont-map__name p { font-size: 24px; } 
 .cont-map__txt p { font-size: 16px; } 
 }
@media (max-width: 768px){
 .cont-map__wrap { padding: 4.5rem 4rem; } 
 .cont-map__li--p, .cont-map__li--f, .cont-map__li--e { width: 50%; } 
 .cont-map__li--e { margin-top: 2rem; } 
 }
@media (max-width: 576px){
 .cont-map__name p { font-size: 22px; } 
 .cont-map__li--a { flex-direction: column; } 
 .cont-map__li--a .cont-map__category { margin-bottom: 0.5rem; } 
 .cont-map__li--p, .cont-map__li--f, .cont-map__li--e { width: 100%; margin-top: 2rem; } 
 .cont-map__li--p { margin-top: 0; } 
 .cont-map__txt p, .cont-map__category p { font-size: 17px; line-height: 1.3; } 
 .cont-map { margin-bottom: 54rem; } 
 }
@media (max-width: 480px){
 .cont-map { margin-bottom: 74rem; } 
 }



/* 2-1-1. B3 BLE 비컨기반 */
.prod-ble__tit { z-index: -2; position: relative; overflow: hidden; background: linear-gradient(to right, #0f0d3e, #103d7e); display: flex; align-items: center; padding: 10rem 32rem 10rem 8rem; } 
.prod-ble__tit::before { z-index: -1; content: ''; position: absolute; top: 65%; right: 38%; transform: translate(50%, -50%); width: 1587px; height: 771px; background: url('../images/sub/ble_bg.png') no-repeat center / cover; } 
.prod-ble__front p { font-size: 32px; color: #fff; font-weight: 700; line-height: 1; } 
.prod-ble__desc { margin-left: 6rem; } 
.prod-ble__desc p { font-size: 18px; color: #fff; font-weight: 500; line-height: 1.2; } 
.prod-ble__desc p+p { margin-top: 10px; } 
.prod-ble__spec { margin: 12rem 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 7rem; align-items: center; } 
.prod-ble__blueprint { padding: 8rem; border: 1px solid #2e5ea3; background-color: #f3f6f9; display: flex; justify-content: center; align-items: center; } 
.prod-ble__spec li { display: flex; align-items: center; border-bottom: 1px solid #ccc; padding: 1.6rem 0; } 
.prod-ble__spec li:first-child { padding-top: 0; } 
.prod-ble__spec-tit { margin-right: calc(5rem + 16px); width: 74px; height: 32px; background-color: #2e5ea3; position: relative; display: flex; justify-content: center; align-items: center; } 
.prod-ble__spec-tit::before { content: ''; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 16px solid #2e5ea3; } 
.prod-ble__spec-tit p { font-size: 17px; line-height: 1; color: #fff; font-weight: 600; text-align: center; } 
.prod-ble__spec-value { width: calc(100% - 74px - 16px - 5rem); } 
.prod-ble__spec-value p { font-size: 20px; color: #222; font-weight: 500; } 
.prod-ble__usage { display: grid; grid-template-columns: repeat(2,1fr); gap: 4rem; margin-bottom: 20rem; } 
.prod-ble__usage-img { height: 26rem; background: url('../images/sub/ble_bg01.png') no-repeat center / cover; } 
.prod-ble__usage-item+.prod-ble__usage-item .prod-ble__usage-img { height: 26rem; background: url('../images/sub/ble_bg02.png') no-repeat center / cover; } 
.prod-ble__usage-desc { background-color: #f3f6f9; padding: 5.5rem 4.5rem; } 
.prod-ble__usage-desc p { font-size: 24px; color: #222; font-weight: 700; } 
.prod-ble__usage-desc ul { margin-top: 2.5rem; } 
.prod-ble__usage-desc ul li { font-size: 18px; color: #666; font-weight: 500; list-style: none; position: relative; padding-left: 10px; } 
.prod-ble__usage-desc ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; background-color: #2e5ea3; transform: translateY(-50%); } 
.prod-ble__usage-desc ul li+li { margin-top: 1.5rem; } 
.prod-new { display: flex; align-items: center; margin-bottom: 10rem; } 
.prod-new .img-area { display: flex; justify-content: center; align-items: center; width: 65%; min-height: 42rem; background: #f4f8f7}
.prod-new .desc-area { width: 100%; padding-left: 12rem; } 
.prod-new .desc-area h4 { color: var(--color-main); font-size: 5.3rem; font-weight: 700; } 
.prod-new .desc-area p { font-size: 2rem; color: #222; font-weight: 500; padding: 3rem 0; margin-top: 3rem; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } 
.prod-new .desc-area ul { margin-top: 3rem; } 
.prod-new .desc-area ul li { font-size: 2rem; font-weight: 700; color: var(--color-main); margin-top: 1.5rem; position: relative; padding-left: 1.8rem; } 
.prod-new .desc-area ul li:before { position: absolute; content: ""; left: 0; top: 7px; background: url(../images/sub/020101_triangle.png) no-repeat; width: 10px; height: 10px; } 
.prod-ble .prod-new:nth-child(3),
.prod-kiot .prod-new:last-child { flex-direction: row-reverse; } 
.prod-ble .prod-new:nth-child(3) .desc-area,
.prod-kiot .prod-new:last-child .desc-area { padding-left: 0; padding-right: 12rem; } 
.prod-b3f { background: #f3f6f9; display: flex; justify-content: center; align-items: center; min-height: 59rem; padding: 0 2rem; position: relative; } 
.prod-b3f .img { position: relative; z-index: 2; } 
.prod-b3f:before { content: ''; z-index: 1; position: absolute; left: 0; bottom: 0; width: 20rem; height: 54.5rem; background: url(../images/sub/kiot_bg-left.png) no-repeat center / cover; } 
.prod-b3f:after { content: ''; z-index: 1; position: absolute; right: 0; top: 0; width: 39rem; height: 25rem; background: url(../images/sub/kiot_bg-right.png) no-repeat center / cover; } 

@media (max-width: 1280px){
 .prod-ble__tit { flex-direction: column; align-items: initial; padding: 8rem 25rem 8rem 5rem; } 
 .prod-ble__desc { margin-left: 0; margin-top: 2rem; } 
 .prod-ble__tit::before { top: 68%; right: 400px; transform: translate(initial, -50%); width: 1050px; height: 650px; } 
 .prod-ble__desc p { font-size: 16px; opacity: 0.9; } 
 .prod-ble__front p { font-size: 28px; } 
 .prod-ble__spec-value p { font-size: 18px; } 
 .prod-ble__spec { gap: 5rem; margin: 10rem 0; } 
 .prod-ble__blueprint { padding: 6rem; } 
 .prod-new .desc-area { padding-left: 6rem; } 
 .prod-new .desc-area ul li:before { top: 5px; } 
 }
@media (max-width: 1024px){
 .prod-ble__tit::before { top: 70%; } 
 .prod-ble__spec-tit { margin-right: calc(3rem + 16px); width: 74px; } 
 .prod-ble__spec { align-items: stretch; gap: 5rem; } 
 .prod-ble__blueprint { padding: 8%; } 
 }
@media (max-width: 960px){
 .prod-ble__tit { padding: 6rem 30rem 6rem 6rem; } 
 .prod-ble__tit::before { top: 67%; } 
 .prod-ble__front p { font-size: 26px; } 
 .prod-ble__spec, .prod-ble__usage { display: block; } 
 .prod-ble__spec ul { margin-top: 4rem; } 
 .prod-ble__spec-tit { margin-right: calc(4rem + 16px); } 
 .prod-ble__spec { margin: 8rem 0; } 
 .prod-ble__usage-desc { padding: 4.5rem; } 
 .prod-ble__usage-desc p { font-size: 22px; } 
 .prod-ble__usage-item+.prod-ble__usage-item { margin-top: 5rem; } 
 .prod-ble__usage-desc ul { margin-top: 1.5rem; } 
 .prod-ble__usage-desc ul li+li { margin-top: 1rem; } 
 .prod-ble__usage-desc ul li { padding-left: 15px; } 
 }
@media (max-width: 768px){
 .prod-ble__desc p { font-size: 17px; } 
 .prod-ble__front p { font-size: 24px; } 
 .prod-ble__tit::before { width: 800px; height: 450px; right: 280px; top: 76%; } 
 .prod-ble__tit { padding: 3.5rem 20rem 3.5rem 3.5rem; } 
 .prod-ble__spec-tit p, .prod-ble__spec-value p { font-size: 16px; } 
 .prod-ble__usage-desc p { font-size: 20px; } 
 .prod-new { flex-direction: column; } 
 .prod-new .img-area { width: 100%; } 
 .prod-new .desc-area { padding-left: 0; margin-top: 3rem; } 
 .prod-ble .prod-new:nth-child(3) .desc-area, .prod-kiot .prod-new:last-child .desc-area { padding-right: 6rem; } 
 .prod-ble .prod-new:nth-child(3), .prod-kiot .prod-new:last-child { flex-direction: column; } 
 .prod-new .desc-area ul li:before { top: 4px; } 
 }
@media (max-width: 576px){
 .prod-ble__tit { padding: 5rem; text-align: center; } 
 .prod-ble__tit::before { display: none; } 
 .prod-ble__desc p,.prod-ble__usage-desc ul li { font-size: 16px; } 
 .prod-ble__usage-desc p { font-size: 18px; } 
 .prod-ble__usage-desc ul li::before { top: 9px; } 
 }
@media (max-width: 480px){
 .prod-ble__blueprint { padding: 10%; } 
 .prod-ble__tit { padding: 4rem; } 
 .prod-ble__spec-tit { margin-right: calc(2.5rem + 16px); width: 60px; } 
 .prod-ble__spec-value p,
 .prod-ble__spec-tit p { font-size: 15px; } 
 .prod-ble__usage-desc { padding: 2.5rem; } 
 .prod-ble__usage-desc p { font-size: 16px; } 
 .prod-ble__usage-desc ul li { font-size: 14px; } 
 .prod-new .desc-area ul li:before { top: 2px; } 
 }



/* 2-2-2. KIoT 디바이스 - KIoT Master */
.prod-tab__area { margin-bottom: 10rem; } 
.prod-tab__pc { display: grid; grid-template-columns: repeat(3,1fr); max-width: 60rem; margin: auto; } 
.prod-tab__pc li { border: 1px solid #2e5ea3; text-align: center; } 
.prod-tab__pc li+li { border-left: none; } 
.prod-tab__pc li.active { background-color: #2e5ea3; } 
.prod-tab__pc li a { font-size: 18px; color: #666; line-height: 1; font-weight: 500; padding: 1.5rem; } 
.prod-tab__pc li:hover a { color: #2e5ea3; } 
.prod-tab__pc li.active a { color: #fff; font-weight: 600; } 
.prod-tab__mo { display: none; } 
.prod-master { position: relative; z-index: 2; background-color: #f3f6f9; padding: 10rem var(--inner-padding) 12rem; } 
.prod-master::before { content: ''; z-index: 3; position: absolute; left: 0; bottom: 0; width: 50rem; height: 84.5rem; background: url('../images/sub/kiot_bg-left.png') no-repeat center / cover; } 
.prod-master::after { content: ''; z-index: 3; position: absolute; right: 0; top: 0; width: 59rem; height: 45rem; background: url('../images/sub/kiot_bg-right.png') no-repeat center / cover; } 
.prod-master__container { z-index: 4; position: relative; } 
.prod-master__tit { text-align: center; } 
.prod-master__tit h5 { font-size: 7.2rem; font-weight: 800; color: #2e5ea3; } 
.prod-master__area { display: flex; flex-direction: column-reverse; align-items: center; } 
.prod-master__wrap { position: relative; width: 60%; margin: auto; list-style: none; height: 25rem; } 
.prod-master__wrap .slide { position: absolute; left: 50%; width: 30%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); z-index: 1; } 
.prod-master__wrap .slide.item-1 { z-index: 2; transform: translateX(-50%) scale(1.1); } 
.prod-master__wrap .slide.item-2 { z-index: 1; left: 60%; transform: translateX(-50%) scale(0.6) translate3d(240%, 80%, 0); } 
.prod-master__wrap .slide.item-3 { z-index: 0; left: 40%; transform: translateX(-50%) scale(0.6) translate3d(-240%, 80%, 0); } 
.prod-master__buttons { display: flex; align-items: center; margin: 5rem 0 7rem; } 
.prod-master__buttons button { position: relative; font-size: 0; width: 32px; height: 32px; } 
.prod-master__buttons button::before { content: ''; width: 12px; height: 22px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url('../images/sub/master_prev.png') no-repeat center / contain; } 
.prod-master__buttons .prod-master__next::before { background: url('../images/sub/master_next.png') no-repeat center / contain; } 
.prod-master__buttons .prod-master__prev:hover::before { background: url('../images/sub/master_prev_.png') no-repeat center / contain; } 
.prod-master__buttons .prod-master__next:hover::before { background: url('../images/sub/master_next_.png') no-repeat center / contain; } 
.prod-master__prev { margin-right: 15px; cursor: pointer; } 
.prod-master__next { margin-left: 15px; cursor: pointer; } 
.prod-master__pagination ul { display: flex; align-items: center; } 
.prod-master__pagination li { position: relative; cursor: pointer; background-color: #8a8c8d; width: 10px; height: 10px; display: block; border-radius: 50%; } 
.prod-master__pagination li:hover::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border: 1.5px solid #8a8c8d; border-radius: 50%; } 
.prod-master__pagination li+li { margin-left: 25px; } 
.prod-master__pagination li.active { background-color: #2e5ea3; } 
.prod-master__pagination li.active::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border: 1.5px solid #2e5ea3; border-radius: 50%; } 
.prod-master__desc { text-align: center; margin-top: 16rem; } 
.prod-master__desc p { font-size: 20px; color: #666; font-weight: 500; } 


/* 2-2-1. KIoT 디바이스 - KIoT Tag */
.prod-tag__desc { text-align: center; margin-top: 16rem; } 
.prod-tag__desc p.p__tit { font-size: 4rem; font-weight: 700; color: #222; line-height: 1.3; } 
.prod-tag__desc p.p__tit span { color: #2e5ea3; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 55%, #c2d0e3 0%); padding: 0 5px; } 
.prod-tag__desc p.p__small { margin-top: 4rem; font-size: 20px; color: #666; font-weight: 500; } 
.prod-tag__inner-imgbox { text-align: center; padding: 10rem; display: inline-block; margin-top: 7rem; background-color: #fff; border-radius: 15px; box-shadow: 0 0 51px rgba(0, 0, 0, 0.1); } 
.prod-kiot__area { margin-top: 15rem; } 
.prod-kiot__item+.prod-kiot__item { margin-top: 10rem; } 
.prod-kiot__tit { text-align: center; } 
.prod-kiot__tit p { font-size: 4rem; color: #222; font-weight: 700; } 
.prod-kiot__table { margin-top: 3.5rem; } 
.prod-kiot__table table { text-align: center; } 
.prod-kiot__table table tr th { border: 1px solid #ddd; padding: 1.8rem 2rem; background-color: #2e5ea3; font-size: 18px; color: #fff; font-weight: 700; line-height: 1; } 
.prod-kiot__table table tr td { border: 1px solid #ddd; padding: 1.8rem 2rem; background-color: #f3f6f9; font-size: 17px; color: #272728; font: 600; line-height: 1; } 
.prod-kiot__table table tr td.td-last { text-align: left; line-height: 1.7; padding: 3.5rem 4rem; } 
.prod-kiot__table table tbody tr td:last-child { border-right: none; background-color: initial; } 
.prod-kiot__table table tbody tr:first-child td { border-left: none; background-color: #f3f6f9; } 
.prod-kiot__table table tr th:nth-child(1) { width: 15%; } 
.prod-kiot__table table tr th:nth-child(2) { width: 25%; } 
.prod-kiot__table table tr th:nth-child(3) { width: 60%; } 
.prod-k1 { display: flex; justify-content: space-between; margin-bottom: 20rem; column-gap: 4rem; } 
.prod-k1 li { width: 33.3%; background-color: #f3f6f9; display: flex; justify-content: center; align-items: center; padding: 20px; min-height: 40rem; } 



@media (max-width: 1440px){
 .prod-master::before, .prod-master::after { opacity: 0.5; } 
 .prod-master__desc, .prod-tag__desc { padding: 0 5%; } 
 }
@media (max-width: 1280px){
 .prod-master__wrap .slide.item-1 { transform: translateX(-50%) scale(1); } 
 .prod-master__wrap .slide.item-2 { transform: translateX(-50%) scale(0.5) translate3d(300%, 80%, 0); } 
 .prod-master__wrap .slide.item-3 { transform: translateX(-50%) scale(0.5) translate3d(-300%, 80%, 0); } 
 .prod-tab__pc { max-width: 70rem; } 
 .prod-kiot__tit, .prod-tag__desc p.p__tit { font-size: 3.5rem; } 
 .prod-tag__desc p.p__small { font-size: 18px; } 
 .prod-kiot__table table tr th, .prod-kiot__table table tr td { font-size: 16px; } 
 .prod-master__desc p br { display: none; } 
 }
@media (max-width: 1024px){
 .prod-master__desc p { font-size: 18px; } 
 .prod-master__wrap { width: 100%; } 
 .prod-master__wrap .slide.item-1 { transform: translateX(-50%) scale(1); } 
 .prod-master__wrap .slide.item-2 { transform: translateX(-50%) scale(0.5) translate3d(180%, 65%, 0); } 
 .prod-master__wrap .slide.item-3 { transform: translateX(-50%) scale(0.5) translate3d(-180%, 65%, 0); } 
 .prod-master__desc, .prod-tag__desc { padding: 0 2.5%; margin-top: 12rem; } 
 .prod-kiot__area { margin-top: 10rem; } 
 .prod-master__tit h5 { font-size: 5rem; } 
 .prod-k1 li { min-height: 30rem; } 
}
@media (max-width: 960px){
 .prod-tag__desc p.p__tit br, .prod-tag__desc p.p__small br { display: none; } 
 .prod-kiot__table table tr th, .prod-kiot__table table tr td { line-height: 1.3; } 
 .prod-kiot__table table tr td.td-last br { display: none; } 
 }
@media (max-width: 768px){
 .prod-tab__pc li a, .prod-tag__desc p.p__small { font-size: 16px; } 
 .prod-kiot__tit, .prod-tag__desc p.p__tit { font-size: 24px; } 
 .prod-tag__inner-imgbox { padding: 6rem; } 
 .prod-kiot__table { overflow-x: auto; width: 100%; } 
 .prod-kiot__table table { width: 728px; } 
 .prod-master__desc .p__small br { display: none; } 
 .prod-master__tit h5 { font-size: 4rem; } 
 .prod-k1 li { min-height: 25rem; } 
 }
@media (max-width: 576px){
 .prod-master { padding: 6rem var(--inner-padding) 8rem; } 
 .prod-master__buttons { margin: 3rem 0; } 
 .prod-master__wrap .slide.item-1 { transform: translateX(-50%) scale(1.2); } 
 .prod-master__wrap .slide.item-2 { transform: translateX(-50%) scale(0.5) translate3d(180%, 65%, 0); } 
 .prod-master__wrap .slide.item-3 { transform: translateX(-50%) scale(0.5) translate3d(-180%, 65%, 0); } 
 .prod-master__wrap .slide.item-1 { transform: translateX(-50%) scale(1); } 
 .prod-master__desc p { font-size: 16px; } 
 .prod-tab__area { margin-bottom: 5rem; } 
 .prod-tab__pc { display: none; } 
 .prod-tab__mo { display: block; background-color: #2e5ea3; } 
 .prod-tab__mo select { width: 100%; color: #fff; font-weight: 500; font-size: 17px; padding: 1.5rem 2rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('../images/sub/mo-arrow.png') no-repeat right 15px center; background-size: 12px 7px; } 
 .prod-tab__mo select option { color: #666; } 
 .prod-tag__inner-imgbox { padding: 4rem; } 
 .prod-kiot__tit, .prod-tag__desc p.p__tit { font-size: 22px; } 
 .prod-k1 { flex-direction: column; row-gap: 2rem; } 
 .prod-k1 li { width: 100%; min-height: 30rem; } 
 }
@media (max-width: 480px){
 .prod-master__wrap { height: 18rem; } 
 .prod-master__tit h5 { font-size: 5rem; } 
 .prod-master__area { flex-direction: column; margin-top: 8rem; } 
 .prod-master__buttons { margin: 7rem 0 5rem; } 
 .prod-master__wrap .slide.item-1 { transform: translateX(-50%) scale(1.3); } 
 .prod-master__wrap .slide.item-2 { transform: translateX(-50%) scale(0.5) translate3d(200%, 0, 0); opacity: 0; } 
 .prod-master__wrap .slide.item-3 { transform: translateX(-50%) scale(0.5) translate3d(-200%, 0, 0); opacity: 0; } 
 .prod-master__desc, .prod-tag__desc { padding: 0; margin-top: 2rem; } 
 .prod-tag__inner-imgbox { padding: 3rem; } 
 .prod-kiot__tit, .prod-tag__desc p.p__tit { font-size: 20px; } 
 .prod-master__tit h5 { font-size: 28px; } 
 }
@media (max-width: 350px){
 .prod-master__wrap .slide.item-1 { transform: translateX(-50%) scale(1.5); } 
 .prod-master__buttons { margin: 5rem 0; } 
 .prod-master__area { margin-top: 5rem; } 
 .prod-kiot__table table tr th:nth-child(1) { width: 13%; } 
 .prod-kiot__table table tr td { padding: 1.5rem; } 
 }




/* ===================================================== */
/* 콘텐츠 공통 */

@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1280px) { } 
@media (max-width: 1024px) { } 
@media (max-width: 768px) { } 
@media (max-width: 576px) { } 
@media (max-width: 480px) { } 
/* 콘텐츠 공통 */
/* ===================================================== */


/* ===================================================== */
/* 0103 */
.con-organiz { margin-bottom: 25rem; text-align: center; } 
.con-organiz .con-desc { font-size: 28px; font-weight: 500; color: #222; } 
.con-organiz .con-desc span { font-weight: 700; } 
.con-organiz .con-desc .color01 { color: var(--color-main); } 

.organiz-list { margin-top: 6rem; } 
.organiz-top { padding-bottom: 11.5rem; position: relative; } 
.organiz-top::before { display: block; content: ''; width: 1px; height: 11.5rem; background: #ccc; position: absolute; bottom: 0; left: 50%; } 
.organiz-top::after { display: block; content: ''; width: 18px; height: 18px; border-radius: 50%; background: #222; border: 4px solid #fff; position: absolute; left: 50%; transform: translate(-50%, -70%); } 
.organiz-top .organiz-item { display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 210px; height: 210px; border-radius: 50%; border: 7px solid var(--color-main); } 
.organiz-top .tit { font-size: 28px; font-weight: 700; color: var(--color-main); } 
.organiz-bottom { display: flex; justify-content: center; gap: 4rem; padding-top: 2.5rem; position: relative; } 
.organiz-bottom::before { display: block; content: ''; width: calc(75% + 30px); height: 1px; background: #ccc; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } 
.organiz-bottom .organiz-item { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; padding: 6rem 1.5rem; background: #f3f6f9; position: relative; } 
.organiz-bottom .organiz-item::after { display: block; content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--color-main); position: absolute; top: -2.5rem; left: 50%; transform: translate(-50%, -50%); } 
.organiz-bottom .ico img { margin: 0 auto; } 
.organiz-bottom .tit { margin-top: 3.5rem; font-size: 20px; font-weight: 700; color: #222; } 

@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1440px){
 .organiz-bottom { gap: 2rem; } 
 .organiz-bottom::before { width: calc(75% + 15px); } 
 .organiz-bottom .tit { font-size: 18px; } 
 }
@media (max-width: 1280px){
 .con-organiz { margin-bottom: 20rem; } 
 .con-organiz .con-desc,
 .organiz-top .tit { font-size: 22px; } 
 .organiz-top .organiz-item { width: 180px; height: 180px; } 
 .organiz-bottom .organiz-item { padding: 3rem 1.5rem; justify-content: center; } 
 }
@media (max-width: 1024px){
 .con-organiz .con-desc br { display: none; } 
 .organiz-bottom .ico img { max-width: 50%; } 
 .organiz-bottom .tit { margin-top: 2rem; font-size: 16px; } 
 }
@media (max-width: 768px){
 .con-organiz { margin-bottom: 15rem; } 
 .con-organiz .con-desc,
 .organiz-top .tit { font-size: 18px; } 
 .organiz-top .organiz-item { width: 150px; height: 150px; } 
 .organiz-bottom { gap: 1rem; } 
 .organiz-bottom .ico img { max-height: 50px; } 
 .organiz-bottom { flex-direction: column; flex: 1; } 
 .organiz-bottom .organiz-item+.organiz-item::after,
 .organiz-bottom::before { display: none; } 
 }
@media (max-width: 576px){
 .organiz-top .organiz-item { width: 100px; height: 100px; border-width: 4px; } 
 }
@media (max-width: 480px){
 .con-organiz .con-desc { font-size: 16px; } 
 }
/* 0103 */
/* ===================================================== */


/* ===================================================== */
/* 0301 */
.con-system-overview { margin-bottom: 17rem; } 
.system-overview-top { display: flex; justify-content: space-between; padding: 9rem var(--inner-padding) 7rem; background: url(../images/sub/system-overview_bg01.png) no-repeat center / cover; position: relative; } 
.system-overview-top .img { display: flex; } 
.system-overview-top .txt { display: flex; justify-content: center; align-items: center; padding: 1.5rem; background: #fff; font-family: var(--font-montserrat); font-size: 15px; font-weight: 800; color: var(--color-main); text-transform: uppercase; letter-spacing: 1em; writing-mode: vertical-rl } 
.system-overview-top .txt p { transform: translateY(1em); } 
.system-overview-top .con-header { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1; margin-left: 8rem; color: #fff; } 
.system-overview-top .con-tit { display: inline-block; padding-bottom: 4rem; padding-right: 8rem; font-size: 3rem; font-weight: 700; position: relative; } 
.system-overview-top .con-tit span { font-weight: 300; } 
.system-overview-top .con-tit em { font-size: 17rem; font-weight: 700; position: absolute; bottom: 1rem; right: 0; } 
.system-overview-top .con-desc { width: 100%; padding-top: 4rem; font-size: 20px; font-weight: 700; border-top: 1px solid rgba(255, 255, 255, 0.1); } 

.con-system-overview .con-box { margin-top: 6rem; padding-top: 12rem; position: relative; } 
.con-system-overview .con-box::after { display: block; content: ''; width: 1px; height: 8rem; background: #c9ced6; position: absolute; top: 0; left: 50%; } 
.con-system-overview .con-box .tit { font-size: 4.5rem; font-weight: 700; color: #222; letter-spacing: -0.025em; text-align: center; } 
.con-system-overview .con-box.nth-1 .list { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 3rem; padding: 8.5rem var(--inner-padding); background: url(../images/sub/system-overview_bg02.png) no-repeat center / cover; } 
.con-system-overview .con-box.nth-1 .list .item { max-width: 33.3333%; } 
.con-system-overview .con-box.nth-1 .dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; } 
.con-system-overview .con-box.nth-1 p { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.025em; text-align: center; } 

.con-system-overview .con-box.nth-2 .list { display: flex; justify-content: center; margin-top: 5rem; } 
.con-system-overview .con-box.nth-2 .item { display: flex; justify-content: center; align-items: center; width: 30%; mix-blend-mode: multiply; position: relative; } 
.con-system-overview .con-box.nth-2 .item.nth-1 { transform: translateX(110px); } 
.con-system-overview .con-box.nth-2 .item.nth-3 { transform: translateX(-110px); } 
.con-system-overview .con-box.nth-2 .item img { width: 100%; } 
.con-system-overview .con-box.nth-2 p { width: 100%; padding-top: 7rem; font-size: 22px; font-weight: 700; text-align: center; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); } 
.con-system-overview .con-box.nth-2 .item.nth-1 p { background: url(../images/sub/system-overview_ico01.png) no-repeat center top; color: #7499d1; transform: translate(-45%, -50%); } 
.con-system-overview .con-box.nth-2 .item.nth-2 p { background: url(../images/sub/system-overview_ico02.png) no-repeat center top; color: #4b6da9; } 
.con-system-overview .con-box.nth-2 .item.nth-3 p { background: url(../images/sub/system-overview_ico03.png) no-repeat center top; color: #244a77; transform: translate(-55%, -50%); } 
.con-system-overview .con-box.nth-3 .nth-3-diagram { display: flex; justify-content: center; } 
.con-system-overview .con-box.nth-3 .nth-3-diagram img:last-child { display: none; } 
.con-system-overview .con-box.nth-3 .nth-3-desc { color: #222; font-size: 2.4rem; font-weight: 600; text-align: center; margin: 10rem 0; } 
.con-system-overview .con-box.nth-3 .nth-3-list { display: flex; flex-wrap: wrap; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li { width: 33.3%; background-color: #f4f8f7; padding: 4rem 4rem 8rem 4rem; border-top: 2px solid var(--color-main); } 
.con-system-overview .con-box.nth-3 .nth-3-list > li h2 { font-size: 2.4rem; font-weight: 700; color: #222; padding-bottom: 2rem; border-bottom: 1px solid #ddd; position: relative; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li h2:after { position: absolute; width: 32px; height: 32px; content: ""; background: url(../images/sub/030101_ico01.png) no-repeat; right: 0; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(2) h2:after { background: url(../images/sub/030101_ico02.png) no-repeat; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(3) h2:after { background: url(../images/sub/030101_ico03.png) no-repeat; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(4) h2:after { background: url(../images/sub/030101_ico04.png) no-repeat; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(5) h2:after { background: url(../images/sub/030101_ico05.png) no-repeat; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li > ul { margin-top: 2rem; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li > ul > li:first-child { margin-top: 0; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li > ul > li { margin-top: 1.5rem; color: #666; font-size: 1.7rem; position: relative; padding-left: 1rem; } 
.con-system-overview .con-box.nth-3 .nth-3-list > li > ul > li:before { position: absolute; content: ""; width: 5px; height: 5px; background-color: #666; left: 0; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; } 
.con-system-overview .con-box.nth-4 { background-color: #f3f6f9; padding-bottom: 18rem; margin-top: 20rem; position: relative; z-index: 2; } 
.con-system-overview .con-box.nth-4 .inner { position: relative; z-index: 4; } 
.con-system-overview .con-box.nth-4:before { content: ''; z-index: 3; position: absolute; left: 0; bottom: 0; width: 50rem; height: 84.5rem; background: url(../images/sub/kiot_bg-left.png) no-repeat center / cover; } 
.con-system-overview .con-box.nth-4:after { content: ''; z-index: 3; position: absolute; left: auto; right: 0; top: 0; width: 59rem; height: 45rem; background: url(../images/sub/kiot_bg-right.png) no-repeat center / cover; } 
.con-system-overview .con-box.nth-4 .inner { display: flex; flex-direction: column; align-items: center; } 
.con-system-overview .con-box.nth-4 h3 { font-size: 4rem; color: #222; text-align: center; } 
.con-system-overview .con-box.nth-4 h3 b { color: var(--color-main); font-weight: 700; } 
.con-system-overview .con-box.nth-4 .img-area { margin-top: 8rem; background-color: #fff; display: flex; justify-content: center; padding: 6rem; box-shadow: 0 0 20px 1px rgb(34, 34, 34, .1); } 
.con-system-overview .con-box.nth-4 .desc-area { display: flex; margin: 4rem 0; column-gap: 40px; width: 100%; } 
.con-system-overview .con-box.nth-4 .desc-area li { background-color: #fff; box-shadow: 0 0 20px 1px rgb(34, 34, 34, .1); padding: 4rem; font-size: 1.8rem; color: #222; width: 50%; line-height: 1.7; } 
.con-system-overview .con-box.nth-4 .link-area { background: url(../images/sub/030101_link-bg.png) no-repeat 50% 50%; background-size: contain; display: flex; flex-direction: column; align-items: center; row-gap: 2rem; padding: 3rem 5rem; width: 536px; min-height: 141px; } 
.con-system-overview .con-box.nth-4 .link-area a span { color: #fff; font-size: 1.8rem; font-weight: 600; position: relative; padding-right: 3rem; vertical-align: baseline; } 
.con-system-overview .con-box.nth-4 .link-area a span:after { position: absolute; content: ""; width: 20px; height: 20px; background: url(../images/sub/030101_ico-link.png) no-repeat; right: 0; top: 51%; transform: translateY(-50%); } 
.con-system-overview .con-box.nth-4:last-child { background-color: #fff; margin-top: 6rem; } 
.con-system-overview .con-box.nth-4:last-child .img-area { background-color: #f3f6f9; } 
.con-system-overview .con-box.nth-4:last-child .desc-area li { background-color: #f3f6f9; border: 1px solid var(--color-main); } 
.con-system-overview .con-box.nth-4:last-child:after,
.con-system-overview .con-box.nth-4:last-child:before
 {
 display: none; } 

@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1440px){
 .system-overview-top .img { max-width: 45%; } 
 .system-overview-top .txt { letter-spacing: 0.8em; } 
 .system-overview-top .txt p { transform: translateY(0.8em); } 

 .con-system-overview .con-box.nth-2 .item.nth-1 { transform: translateX(88px); } 
 .con-system-overview .con-box.nth-2 .item.nth-3 { transform: translateX(-88px); } 
 .con-system-overview .con-box.nth-2 p { font-size: 18px; } 
 }
@media (max-width: 1280px){
 .system-overview-top .img { max-width: 36%; } 
 .system-overview-top img { height: auto; } 
 .system-overview-top .txt { letter-spacing: 0.5em; } 
 .system-overview-top .txt p { transform: translateY(0.5em); } 
 .system-overview-top .con-tit { padding-bottom: 3rem; } 
 .system-overview-top .con-tit em { font-size: 14rem; bottom: 0; } 
 .system-overview-top .con-desc { padding-top: 3rem; } 
 .system-overview-top .con-desc br { display: none; } 
 .con-system-overview .con-box .tit { font-size: 3.5rem; } 
 .con-system-overview .con-box.nth-1 .list .item { max-width: 100%; } 
 .con-system-overview .con-box.nth-1 p { font-size: 18px; } 
 .con-system-overview .con-box.nth-2 .item { width: 40%; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li { width: 50%; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li > ul > li:before { top: 9px; } 
 }
@media (max-width: 1024px){
 .system-overview-top { flex-direction: column; padding: 6rem var(--inner-padding); } 
 .system-overview-top .img { width: 40%; } 
 .system-overview-top .txt { letter-spacing: 0.2em; } 
 .system-overview-top .txt p { font-size: 12px; } 
 .system-overview-top .con-header { margin-left: 0; margin-top: 4rem; } 
 .system-overview-top .con-tit { margin-left: 0; padding-right: 10rem; width: 100%; } 
 .system-overview-top .con-tit br { display: none; } 
 .con-system-overview .con-box.nth-1 .list { flex-direction: column; padding: 5.5rem var(--inner-padding); } 
 .con-system-overview .con-box.nth-1 p { text-align: center; padding: 2rem 0; } 
 .con-system-overview .con-box.nth-2 .list { flex-direction: column; width: 100%; transform: translate(0, -6rem); margin-top: 0; } 
 .con-system-overview .con-box.nth-2 .item { width: 425px; height: auto; margin: 0 auto; } 
 .con-system-overview .con-box.nth-2 .item.nth-1 { transform: translateY(135px); } 
 .con-system-overview .con-box.nth-2 .item.nth-3 { transform: translateY(-135px); } 
 .con-system-overview .con-box.nth-2 .item img { width: 100%; margin: 0 auto; transform: rotate(90deg); } 
 .con-system-overview .con-box.nth-2 .item.nth-2 img { width: 95%; } 
 .con-system-overview .con-box.nth-2 p { font-size: 18px; padding-top: 8rem; } 
 .con-system-overview .con-box.nth-2 .item.nth-1 p,
 .con-system-overview .con-box.nth-2 .item.nth-3 p { transform: translate(-50%, -50%); } 
 .con-system-overview .con-box.nth-3 { margin-top: 0; padding-top: 0; } 
 .con-system-overview .con-box.nth-3::after { top: -120px; } 
 }
@media (max-width: 768px){
 .con-system-overview { margin-bottom: 0; } 
 .system-overview-top .img { width: 100%; max-width: 100%; } 
 .system-overview-top img { width: calc(100% - 42px); } 
 .system-overview-top .con-header { margin-top: 5rem; } 
 .system-overview-top .con-tit { margin-left: 0; } 
 .con-system-overview .con-box.nth-1 p { font-size: 20px; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li > ul > li:before { width: 4px; height: 4px; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li h2:after { background-size: contain; width: 24px; height: 24px; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(2) h2:after { background-size: contain; width: 24px; height: 24px; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(3) h2:after { background-size: contain; width: 24px; height: 24px; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(4) h2:after { background-size: contain; width: 24px; height: 24px; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li:nth-child(5) h2:after { background-size: contain; width: 24px; height: 24px; } 
 .con-system-overview .con-box.nth-3 { margin-top: 0; padding-top: 0; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li { width: 100%; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li:last-child { display: none; } 
 }
@media (max-width: 576px){
 .system-overview-top .con-tit { font-size: 22px; padding-right: 5rem; } 
 .system-overview-top .con-tit em { font-size: 11rem; } 
 .system-overview-top .con-desc { font-size: 18px; } 
 .con-system-overview .con-box.nth-4 .img-area { padding: 3rem; } 
 .con-system-overview .con-box.nth-4 .desc-area { flex-direction: column; row-gap: 4rem; } 
 .con-system-overview .con-box.nth-4 .desc-area li,.con-system-overview .con-box.nth-4 .link-area { width: 100%; } 
 .con-system-overview .con-box.nth-4 .link-area a span:after { background-size: contain; width: 18px; height: 18px; } 
 }
@media (max-width: 480px){
 .system-overview-top .con-tit { font-size: 18px; } 
 .system-overview-top .con-desc { font-weight: 500; } 

 .con-system-overview .con-box.nth-1 p { font-size: 18px; font-weight: 500; } 

 .con-system-overview .con-box.nth-2 .item { width: 280px; height: 280px; } 
 .con-system-overview .con-box.nth-2 .item.nth-1 { transform: translateY(70px); } 
 .con-system-overview .con-box.nth-2 .item.nth-3 { transform: translateY(-70px); } 
 .con-system-overview .con-box.nth-2 p { padding-top: 9rem; top: 50%; } 
 .con-system-overview .con-box.nth-2 .item img { opacity: 0.5; } 
 .con-system-overview .con-box.nth-3 .nth-3-list > li { width: 100%; } 
 .con-system-overview .con-box.nth-4 .link-area { flex-direction: column; padding: 4rem; } 
 .con-system-overview .con-box.nth-4 .link-area a span:after { width: 16px; height: 16px; } 
 .con-system-overview .con-box.nth-3::after { top: -80px; } 
 .con-system-overview .con-box.nth-3 .nth-3-diagram img:first-child { display: none; } 
 .con-system-overview .con-box.nth-3 .nth-3-diagram img:last-child { display: block; max-width: 70%; } 
 }
/* 0301 */
/* ===================================================== */


/* ===================================================== */
/* 0302 */
.con-feature { margin-bottom: 17rem; } 
.con-feature .con-header { display: flex; align-items: center; padding: 7rem var(--inner-padding); background: url(../images/sub/feature_bg01.png) no-repeat center / cover; color: #fff; } 
.con-feature .con-tit { padding-right: 5rem; font-size: 4.5rem; font-weight: 700; white-space: nowrap; position: relative; } 
.con-feature .con-tit::after { display: block; content: ''; width: 1px; height: 150%; background: rgba(255, 255, 255, 0.15); position: absolute; top: 1.5rem; right: 0; } 
.con-feature .con-desc { padding-left: 5rem; font-size: 22px; font-weight: 600; letter-spacing: 0; } 

.feature-list { margin-top: 14rem; position: relative; } 
.feature-list img { margin: 0 auto; width: 90%; } 
.feature-list .center { font-size: 26px; font-weight: 800; color: var(--color-main); text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.feature-list .item { display: flex; position: absolute; } 
.feature-list .item .tit { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 13rem; min-width: 13rem; font-size: 18px; font-weight: 700; color: #fff; text-align: center; } 
.feature-list .item .tit span { display: inline-block; margin-bottom: 10px; } 
.feature-list .item .txt-list p { font-size: 18px; font-weight: 600; padding-left: 15px; position: relative; } 
.feature-list .item .txt-list p::after { display: block; content: ''; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 0; top: 15px; transform: translateY(-50%); } 

.feature-list .item.nth-1 { flex-direction: column-reverse; bottom: calc(50% + 18rem); left: 50%; transform: translateX(-50%); } 
.feature-list .item.nth-1 .tit { margin-top: 6rem; min-width: 20rem; } 
.feature-list .item.nth-1 .tit span { width: 50px; height: 39px; background: url(../images/sub/feature_ico01.png) no-repeat center top; } 
.feature-list .item.nth-1 .txt-list { transform: translateX(4rem); } 
.feature-list .item.nth-1 .txt-list p { color: #7693ba; } 
.feature-list .item.nth-1 .txt-list p::after { background: #7693ba; } 

.feature-list .item.nth-2 { flex-direction: row-reverse; align-items: flex-end; top: 50%; right: calc(50% + 18rem); transform: translateY(-50%); } 
.feature-list .item.nth-2 .tit { margin-left: 6rem; } 
.feature-list .item.nth-2 .tit span { width: 47px; height: 39px; background: url(../images/sub/feature_ico02.png) no-repeat center top; } 
.feature-list .item.nth-2 .txt-list p { padding-left: 0; padding-right: 15px; color: #1f2d58; text-align: right; } 
.feature-list .item.nth-2 .txt-list p::after { background: #1f2d58; left: auto; right: 0; } 

.feature-list .item.nth-3 { top: 50%; left: calc(50% + 18rem); transform: translateY(-50%); } 
.feature-list .item.nth-3 .tit { margin-right: 6rem; } 
.feature-list .item.nth-3 .tit span { width: 36px; height: 39px; background: url(../images/sub/feature_ico03.png) no-repeat center top; } 
.feature-list .item.nth-3 .txt-list p { color: #5979b4; } 
.feature-list .item.nth-3 .txt-list p::after { background: #5979b4; } 

.feature-list .item.nth-4 { flex-direction: column; top: calc(50% + 18rem); left: 50%; transform: translateX(-50%); } 
.feature-list .item.nth-4 .tit { margin-bottom: 6rem; min-width: 20rem; } 
.feature-list .item.nth-4 .tit span { width: 43px; height: 36px; background: url(../images/sub/feature_ico04.png) no-repeat center top; } 
.feature-list .item.nth-4 .txt-list { transform: translateX(4rem); } 
.feature-list .item.nth-4 .txt-list p { color: #355096; } 
.feature-list .item.nth-4 .txt-list p::after { background: #355096; } 

@media (hover: hover) and (pointer: fine) { } 
@media (max-width: 1440px){
 .feature-list img { width: 100%; } 
 }
@media (max-width: 1280px){
 .con-feature { margin-bottom: 8rem; } 
 .con-feature .con-tit { padding-right: 5rem; font-size: 4rem; } 
 .con-feature .con-desc { padding-left: 5rem; font-size: 18px; } 

 .feature-list .center { font-size: 20px; } 
 .feature-list img { width: 985px; margin: 0 auto; } 
 .feature-list .item.nth-1 { bottom: calc(50% + 14rem); } 
 .feature-list .item.nth-1 .tit { margin-top: 2rem; } 

 .feature-list .item.nth-2 { right: calc(50% + 14rem); } 
 .feature-list .item.nth-2 .tit { margin-left: 3rem; } 

 .feature-list .item.nth-3 { left: calc(50% + 14rem); } 
 .feature-list .item.nth-3 .tit { margin-right: 3rem; } 

 .feature-list .item.nth-4 { top: calc(50% + 14rem); } 
 .feature-list .item.nth-4 .tit { margin-bottom: 3rem; } 

 .feature-list .item .txt-list p { font-size: 16px; } 
 }
@media (max-width: 1024px){
 .con-feature .con-header { padding: 4rem var(--inner-padding); flex-direction: column; align-items: flex-start; } 
 .con-feature .con-tit { white-space: normal; } 
 .con-feature .con-tit br,
 .con-feature .con-tit::after { display: none; } 
 .con-feature .con-desc { padding-left: 0; margin-top: 1.5rem; } 

 .feature-list { display: flex; flex-direction: column; margin-top: 10rem; } 
 .feature-list .item { margin-top: 5rem; flex-wrap: wrap; } 
 .feature-list .item .tit { width: 100%; min-height: 1px; flex: none; color: var(--color-main); justify-content: flex-start; } 
 .feature-list .item .tit br { display: none; } 
 .feature-list .item .tit span { display: none; } 
 .feature-list .item .txt-list { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1rem; width: 100%; } 
 .feature-list .item .txt-list p { margin-right: 3rem; padding-left: 10px; } 
 .feature-list .item .txt-list p::after { width: 4px; height: 4px; top: 12px; } 
 .feature-list img,
 .feature-list .center br { display: none; } 
 .feature-list .center { order: 1; position: static; top: auto; left: auto; transform: translate(0, 0); } 
 .feature-list .item.nth-1 { flex-direction: row; align-items: flex-start; order: 2; width: 100%; position: static; left: auto; right: auto; top: auto; bottom: auto; transform: translate(0, 0); } 
 .feature-list .item.nth-2 { flex-direction: row; align-items: flex-start; order: 5; width: 100%; position: static; left: auto; right: auto; top: auto; bottom: auto; transform: translate(0, 0); } 
 .feature-list .item.nth-3 { flex-direction: row; align-items: flex-start; order: 3; width: 100%; position: static; left: auto; right: auto; top: auto; bottom: auto; transform: translate(0, 0); } 
 .feature-list .item.nth-4 { flex-direction: row; align-items: flex-start; order: 4; width: 100%; position: static; left: auto; right: auto; top: auto; bottom: auto; transform: translate(0, 0); } 
 .feature-list .item.nth-1 .tit,
 .feature-list .item.nth-2 .tit,
 .feature-list .item.nth-3 .tit,
 .feature-list .item.nth-4 .tit { margin: 0 5rem 0 0; min-width: 1px; } 
 .feature-list .item.nth-1 .txt-list,
 .feature-list .item.nth-4 .txt-list { transform: translateX(0); } 
 .feature-list .item.nth-2 .txt-list p { padding-left: 15px; padding-right: 0; text-align: left; } 
 .feature-list .item.nth-2 .txt-list p::after { left: 0; right: auto; } 
}
@media (max-width: 768px){
 .con-feature .con-header { flex-direction: column; align-items: flex-start; } 
 .con-feature .con-tit { width: 100%; } 
 .con-feature .con-tit br,
 .con-feature .con-tit::after { display: none; } 
 .con-feature .con-desc { padding-left: 0; margin-top: 2rem; } 
 }
@media (max-width: 576px){
 .con-feature .con-tit { font-size: 24px; } 
 .con-feature .con-desc { font-size: 16px; font-weight: 500; } 
 .feature-list .item.nth-1 .tit, .feature-list .item.nth-2 .tit, .feature-list .item.nth-3 .tit, .feature-list .item.nth-4 .tit { margin-right: 0; align-items: flex-start; } 
 .feature-list .item .txt-list p { width: 100%; margin-right: 0; } 
 }
@media (max-width: 480px){
 .con-feature .con-header { text-align: center; } 
 .con-feature .con-tit { padding-right: 0; } 
 .feature-list .item.nth-1,
 .feature-list .item.nth-2,
 .feature-list .item.nth-3,
 .feature-list .item.nth-4 { flex-direction: column; align-items: center; } 
 .feature-list .item.nth-1 .tit, .feature-list .item.nth-2 .tit, .feature-list .item.nth-3 .tit, .feature-list .item.nth-4 .tit { margin-right: 0; } 
 .feature-list .item .txt-list { margin-top: 2rem; flex-direction: column; align-items: center; } 
 .feature-list .item .txt-list p { margin-right: 0; } 
 }
/* 0302 */
/* ===================================================== */

/* ===================================================== */
/* 0303 */

.con-img { display: flex; justify-content: center; background-color: #f3f6f9; margin-top: 12rem; margin-bottom: 12rem; padding: 6rem; } 
.con-img img:nth-child(2)
,.con-img img:last-child { display: none; } 
.prod-box { margin-bottom: 12rem; } 
.device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; } 
.device-box { display: grid; grid-template-columns: 1fr 1fr; background-color: #fff; } 
.device-box .img-half { border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; padding: 1rem; min-height: 30rem; border-right: none; } 
.device-box .img-half:nth-child(2) { border-right: 1px solid #ccc; } 
.device-box img { max-width: 100%; height: auto; } 
.device-box .label { grid-column: 1 / span 2; background-color: #0056a6; color: #fff; text-align: center; padding: 2rem 0; font-size: 2.2rem; font-weight: bold; } 
.prod-box .device-box:last-child .img-half { background: url(../images/sub/030301_img08.png) no-repeat 50% 50%; padding: 0; border: unset; } 
.prod-box .device-box:last-child .img-half:nth-child(2) { border-right: 1px solid #ccc; border-top: 1px solid #ccc; border-left: none; } 
.prod-box .device-box:last-child .img-half:nth-child(2) { background: url(../images/sub/030301_img09.png) no-repeat 50% 50%;; } 
@media (max-width: 768px){
 .device-grid { grid-template-columns: 1fr; } 
 }

.process-box { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } 

.process-box .card { display: flex; flex-direction: column; position: relative; } 
.process-box .card:before { position: absolute; content: ''; width: 13px; height: 20px; right: -18px; top: 50%; background: url(../images/sub/arrow.png); transform: translateY(-50%); z-index: 2; } 
.process-box .card:after { position: absolute; content: ''; width: 50px; height: 50px; background: var(--color-main); right: -35px; top: 50%; transform: translateY(-50%); z-index: 1; border-radius: 50%; } 
.process-box .card:nth-child(4):after,
.process-box .card:nth-child(4):before { display: none; } 
.process-box .card img { width: 100%; display: block; } 
.process-box .card:nth-child(3) img { border: 1px solid #ccc; } 
.process-box .label { background: #0056a6; color: #fff; text-align: center; padding: 2.2rem; font-weight: 700; font-size: 1.8rem; min-height: 9rem; display: flex; justify-content: center; align-items: center; } 
.process-box .card .desc { background-color: #f4f8f7; padding: 2rem; text-align: center; min-height: 14rem; display: flex; justify-content: center; align-items: center; color: #222; font-weight: 500; font-size: 1.6rem; display: none; } 
.process-box .card .desc p b { color: var(--color-main); font-weight: 700; } 
.process-box .info { background: #f4f8f7; border: 1px solid #ccc; padding: 2.2rem 1.6rem; text-align: center; font-size: 1.8rem; color: #222; font-weight: 600; min-height: 17rem; display: flex; justify-content: center; align-items: center; } 
.process-box .info b { color: var(--color-main); font-weight: 700; } 
.process-box .info-1 { grid-column: 1 / 2; } 
.process-box .info-2 { grid-column: 2 / 4; font-size: 3.2rem; } 
.process-box .info-3 { grid-column: 4 / 5; } 
.process-box .info-3 span { color: #666; font-weight: 300; } 

.table-area { margin-top: 12rem; } 
.table-area h3 { font-size: 3.6rem; color: #222; font-weight: 700; margin-bottom: 5rem; } 
.table-area .table-01 table { width: 100%; border-collapse: collapse; font-size: 2rem; } 
.table-area .table-01 th,
.table-area .table-01 td { border: 1px solid #ccc; padding: 4rem 2rem; text-align: center; } 
.table-area .table-01 thead { background-color: #666666; color: #fff; } 
.table-area .table-01 tbody tr td { color: #222; font-weight: 600; } 
.table-area .table-01 tbody tr td:first-child { background-color: #dadada; } 
.table-area .table-01 tbody tr td:nth-child(4),
.table-area .table-01 tbody tr td:nth-child(6),
.table-area .table-01 tbody tr td:nth-child(8)
 {
 background-color: #e0e9f4; } 
.table-area > div { width: 100%; overflow-x: auto; } 
.table-area .table-02 { margin-top: 12rem; } 
.table-area .table-02 table { width: 100%; border-collapse: collapse; font-size: 1.8rem; } 
.table-area .table-02 th,
.table-area .table-02 td { border: 1px solid #ccc; padding: 2.2rem 2rem; text-align: center; } 
.table-area .table-02 thead { background-color: #666666; color: #fff; } 
.table-area .table-02 tbody tr td { color: #222; font-weight: 600; } 
@media (max-width:1024px){
 .process-box .card:after { width: 40px; height: 40px; right: -30px; } 
 .process-box .card:before { width: 10px; height: 17px; background-size: contain; background-repeat: no-repeat; right: -16px; } 
 }
@media (max-width:880px){
 .process-box .label { font-size: 1.6rem; padding: 1.8rem; } 
 }
@media (max-width:768px){
 .con-img { padding: 3rem; } 
 .process { overflow-x: auto; } 
 .process-box { grid-template-columns: repeat(4, minmax(260px, 1fr)); min-width: 1040px; } 
.process-box .card { min-width: 260px; } 
.table-area .table-01 table,
.table-area .table-02 table { width: 768px; } 
 }
@media (max-width:680px){
 .process-box { grid-template-columns: repeat(2, 1fr); } 
 .con-img img:nth-child(2) { display: block; } 
.con-img img:first-child
 {
 display: none; } 
 }
@media (max-width:480px){
 .device-box { display: flex; flex-direction: column; } 
 .device-box .img-half { border-right: 1px solid #ccc; border-bottom: none; } 
 .prod-box .device-box:last-child .img-half:nth-child(2) { border-left: 1px solid #ccc; } 
 .con-img img:last-child { display: block; } 
.con-img img:first-child
 {
 display: none; } 
 }