@charset "utf-8";

.con-title{font-size:34px;line-height:1.47;font-weight:500; margin-bottom:32px;}

/* 제품소개 */
.product-intro1{display:flex; gap:77px; padding:190px 24px; max-width:1195px; margin:0 auto;}
.product-intro1 .photo{width:520px; max-width:44%; flex-shrink: 0;}
.product-intro1 .intro{width:100%;}
.product-intro1 .product-intro1-title{color:var(--black-13); font-weight:600; margin-bottom:52px;}
.product-intro1 .product-intro1-title .sup{font-size:22px;line-height:1.9;}
.product-intro1 .product-intro1-title .strong{font-size:34px;line-height:1.47;}
.product-intro1 .product-intro1-items{font-weight:500;}
.product-intro1 .product-intro1-items dt{color:var(--primary-40);font-size:22px;line-height:1.36; margin-bottom:18px;}
.product-intro1 .product-intro1-items dd{color:var(--black-8);font-size:18px;line-height:1.55;}
.product-intro1 .product-intro1-items dd + dt{margin-top:49px;}

.product-intro2{background:url(/assets/img/contents/intro_bg.jpg) center / cover no-repeat; padding:135px 16px 149px; border-radius:40px 40px 0 0;}
.product-intro2-inner{max-width:1195px; margin:0 auto; text-align:center;}
.product-intro2-title{color:#fff; margin-bottom:60px;}
.product-intro2-title h3{font-size:50px;line-height:46px; font-weight:700;}
.product-intro2-title p{font-size:20px;height:14px; font-weight:500;margin-top:26px;}

.product-intro2-items{display:flex; gap:25px;}
.product-intro2-items li{width:calc(25% - (25px * 3)/4); background-color:#fff; border-radius:20px; box-sizing:border-box; padding:43px 28px 55px 28px;transition:all 0.3s;}
.product-intro2-items li:before{display:block;content:'';width:60px;height:60px; margin:0 auto 20px auto; background-position:center; background-size:cover; background-repeat:no-repeat;}
.product-intro2-items li em{display:block;font-size:24px;line-height:1.25; color:var(--primary-40);font-weight:600; margin-bottom:20px;}
.product-intro2-items li p{font-size:18px;line-height:1.55; color:var(--black-8);font-weight:500;}
.product-intro2-items .item1:before{background-image:url(/assets/img/contents/ic_intro1.svg);}
.product-intro2-items .item2:before{background-image:url(/assets/img/contents/ic_intro2.svg);}
.product-intro2-items .item3:before{background-image:url(/assets/img/contents/ic_intro3.svg);}
.product-intro2-items .item4:before{background-image:url(/assets/img/contents/ic_intro4.svg);}

.product-intro2-items li:hover{background-color:var(--primary-40);}
.product-intro2-items li:hover em,
.product-intro2-items li:hover p{color:#fff;}
.product-intro2-items .item1:hover:before{background-image:url(/assets/img/contents/ic_intro1_on.svg);}
.product-intro2-items .item2:hover:before{background-image:url(/assets/img/contents/ic_intro2_on.svg);}
.product-intro2-items .item3:hover:before{background-image:url(/assets/img/contents/ic_intro3_on.svg);}
.product-intro2-items .item4:hover:before{background-image:url(/assets/img/contents/ic_intro4_on.svg);}

/* 매커니즘 */
.con-tab-nav{margin-bottom:4rem;}
.con-tab-nav ul{display:flex;}
.con-tab-nav button{display:flex; align-items: center; justify-content: center; height:68px; color:var(--black-6);text-align:center; width:100%;font-size:22px;font-weight:600;}
.con-tab-nav button .num{display:none;}
.con-tab-nav button .txt{display:block;}
.con-tab-nav li{border-bottom:2px solid var(--black-4); width:calc(100% / 3);}
.con-tab-nav .active{border-bottom-color:var(--black-13);}
.con-tab-nav .active button{color:var(--black-13);}

.mechanism-photo{margin-bottom:6.8rem;}
.tab-sec-title{margin-bottom:3.2rem;}
.tab-sec-title .title{font-size:28px;line-height:1; font-weight:700; color:var(--black-13);}
.tab-sec-title .title-sub{font-size:18px;line-height:1.55; font-weight:500; color:var(--black-13); margin-top:14px;}

.mechanism-step{display:flex; flex-wrap:wrap;gap:50px;}
.mechanism-step li{width:100%; border-radius:17px; border:1px solid var(--black-6); padding:32px 60px 32px 50px; position:relative;}
.mechanism-step li .num{position:absolute;right:48px;top:32px;font-weight:600;font-size:22px;color:var(--black-8);}
.mechanism-step li strong{color:var(--primary-40);font-size:22px;line-height:1.36;font-weight:600;margin-bottom:4px;display:block;}
.mechanism-step li p{color:var(--black-8);font-size:18px;line-height:1.55;font-weight:500;}
.mechanism-step li + li:before{display:block;content:'';width:30px;height:30px; background:url(/assets/img/contents/arr_down.svg) center no-repeat; position:absolute;left:50%;top:-40px; transform:translateX(-50%);}
.mechanism-step li.active{background-color:var(--primary-40);}
.mechanism-step li.active .num,
.mechanism-step li.active strong,
.mechanism-step li.active p{color:var(--black-1);}

/* 제품사양 */
.product-list{display:flex; flex-wrap:wrap; gap:30px;}
.product-item{width:100%; border:1px solid var(--black-6);border-radius:19px; padding:42px 36px; display:flex; gap:72px;}
.product-item .photo{width:520px;aspect-ratio: 520/335; flex-shrink: 0; position:relative; border-radius:12px;overflow:hidden;}
.product-item .photo img{min-height:100%;min-width:100%; object-fit: cover;}
.product-item .info-top{border-bottom:1px solid var(--black-5); padding:22px 0 26px; color:var(--black-13); margin-bottom:22px;}
.product-item .product-name{font-size:28px;line-height:1; font-weight:700;}
.product-item .sub-txt{font-size:18px;line-height:1.55; font-weight:500; margin-top:10px;}
.product-item .spec-items{display:flex; flex-wrap:wrap;gap:10px;}
.product-item .spec-items li{position:relative; font-size:18px;line-height:1.55;font-weight:500; padding-left:11px; display:flex; align-items: flex-start; gap:27px; width:100%;}
.product-item .spec-items li:before{display:block;content:'';width:4px;height:4px;border-radius:50%;background-color:var(--black-13); position:absolute;left:0;top:12px;}
.product-item .spec-items .label{width:60px; color:var(--black-13); flex-shrink: 0;}
.product-item .spec-items .data{width:100%; color:var(--black-8);}
.product-item .spec-items .data .txt-sm{font-size:12px;font-weight:400;}

/* 설치사례 */
.case-list{display:flex; flex-wrap:wrap; gap:3.5rem;}
.case-list .item-row{width:calc(50% - 1.75rem);}
.case-list a{display:block; border-radius:2rem; overflow:hidden; display:flex;border:1px solid var(--black-6);}
.case-list .photo{width:245px;height:300px; flex-shrink: 0; position:relative;overflow:hidden;}
.case-list .photo img{min-height:100%;min-width:100%; object-fit: cover; transition:all 0.3s;}
.case-list .info{width:calc(100% - 245px); padding:48px 38px 38px 44px; box-sizing:border-box;border-left:none; border-radius:0 2rem 2rem 0;}
.case-list .info .badge-category{margin-bottom:13px;}
.case-list .info .title{font-size:24px;line-height:1.25;color:var(--black-13);margin-bottom:13px;font-weight:600; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.case-list .info .summary{font-size:18px;line-height:1.55;color:var(--black-8);margin-bottom:13px;height:86px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.case-list .info .date{font-size:1.2rem;line-height:2; color:var(--black-8);letter-spacing:0;}
.case-list .no-data-msg{width:100%; text-align:center; padding:12rem 0; border-top:1px solid var(--black-13); border-bottom:1px solid var(--black-5);}

.case-list a:hover .photo img{transform: scale(1.15);}

/* A매거진 */
.card-list .item-row{border-bottom:1px solid var(--black-5); padding:4rem 0; display:flex; gap:5.6rem;}
.card-list .item-row:first-child{padding-top:0;}
.card-list .photo{width:30rem; height:22rem; flex-shrink: 0; overflow:hidden; border-radius:1.2rem;}
.card-list .photo a{display:block;height:100%;}
.card-list .photo img{min-height:100%;min-width:100%; object-fit: cover; transition: all 0.3s;}
.card-list .info{width:calc(100% - 300px - 56px); padding:20px 0 0 0;}
.card-list .info .title{font-size:2.4rem;line-height:1.25; color:var(--black-13); font-weight:500;margin-bottom:2.4rem;}
.card-list .info .title a{display:block; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.card-list .info .summary{font-size:1.8rem;line-height:1.55; color:var(--black-8); margin-bottom:1.6rem; height:8.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.card-list .info .date{font-size:1.2rem;line-height:2; color:var(--black-8);letter-spacing:0;}
.card-list .no-data-msg{width:100%; text-align:center; padding:12rem 0; border-top:1px solid var(--black-13); border-bottom:1px solid var(--black-5);}

.card-list .photo:hover img{transform: scale(1.15);}
.card-list .info .title a:hover{color:var(--primary-40);}

/* 보도자료 */
.board-list-top{display:flex; align-items: flex-end; justify-content: space-between; margin-bottom:1.6rem;}

.data-count{color:var(--black-8);}
.data-count em{color:var(--black-13);font-weight:700;}

.data-search-form{height:5rem; width:30rem; background-color:var(--black-3); border-radius:2.5rem; overflow:hidden; display:flex; padding:13px 16px; box-sizing:border-box;}
.data-search-form .input-text{width:100%;height:2.4rem;border:none;background:none;outline:none;padding-left:1rem;}
.data-search-form .input-text::placeholder{color:var(--black-8) !important;}
.data-search-form .btn-submit{width:2.4rem;height:2.4rem;flex-shrink: 0; background:url(/assets/img/common/btn_search.svg) center no-repeat;text-indent:-9999rem; overflow:hidden;}

.board-list{border-top:1px solid var(--black-13);}
.board-list .item-row{border-bottom:1px solid var(--black-5);}
.board-list .item-row a{display:flex; align-items: center; gap:1.2rem; padding:2.4rem 0;}
.board-list .item-row .number{width:6.4rem; text-align:center; color:var(--black-7); letter-spacing:-0.08rem; flex-shrink: 0;}
.board-list .item-row .title{width:100%; letter-spacing:-0.08rem;}
.board-list .item-row .date{width:10.4rem;font-size:1.2rem; color:var(--black-8);flex-shrink: 0;letter-spacing:0;}
.board-list .no-data-msg{width:100%; text-align:center; padding:12rem 0; border-bottom:1px solid var(--black-5);}

.pagination{text-align:center; display:flex; align-items:center; justify-content:center; margin:5rem 0; gap:2px;}
.pagination a,
.pagination span{display:inline-flex; align-items:center; justify-content:center; height:3rem;box-sizing:border-box;line-height:1; font-size:1.6rem;}
.pagination .page-nav{width:3rem;height:3rem;overflow:hidden;text-indent:-9999rem;}
.pagination .page-nav.prev{background:url(/assets/img/common/page_prev.svg) center no-repeat;}
.pagination .page-nav.next{background:url(/assets/img/common/page_next.svg) center no-repeat;}
.pagination .page-links{display:flex; align-items:center; justify-content:center;}
.pagination .page-links a,
.pagination .page-links span{ min-width:3rem; margin:0 0.4rem;}
.pagination .page-links .active{background-color:var(--primary-40); color:#fff; font-weight:600;border-radius:6px;}

/* html.mobile .pagination{flex-wrap:wrap;}
html.mobile .pagination .page-links{width:100%; margin-top:2rem;} */

/* 상세 */
.data-view{position:relative;  border-bottom:1px solid var(--black-13); }
.data-view-top{text-align:center;padding: 0 0 5rem 0; border-bottom:1px solid var(--black-13); }
.data-view-top .title{font-size:3.4rem;line-height:1.47; font-weight:600; display:block; margin-bottom:2.2rem;}
.data-view-top .date{font-size:1.8rem;line-height:1.55; color:var(--black-7);}
.data-view-contents{min-height:30rem; padding:7rem 4.4rem; border-bottom:0.1rem solid var(--black-5); box-sizing:border-box; line-height:1.75;}
.data-view-contents img{max-width:100%; height:auto !important;}

.data-attachfile{display:flex; align-items:center; border-top:1px solid var(--black-5); padding:22px; gap:28px;}
.data-attachfile .label{width:108px; border-right:1px solid var(--black-13); text-align:center; line-height:1.2; font-weight:500; flex-shrink:0;}
.data-attachfile .attachfile-list{display:flex; gap:8px 24px; flex-wrap:wrap; font-size:16px; letter-spacing:0;}
.data-attachfile .attachfile-list a{color:var(--black-8); text-decoration:underline;text-underline-offset:3px;}

/* 제품도입문의 */
.agree-wrap .agree-contents{height:194px;border:1px solid var(--black-6); padding:24px 32px; overflow-y:auto; font-size:16px;line-height:1.75;color:var(--black-8);}
.agree-wrap .agree-check{margin-top:16px;}
.agree-wrap .agree-check label{display:flex; gap:8px; align-items: center;color:var(--black-11);}
.agree-wrap .agree-check label input{width:3.6rem;height:3.6rem;}

.inquery-form{border-top:1px solid var(--black-13); padding:20px 0 0 0; display:flex; flex-direction: column;gap:20px; margin-top:3.2rem;}
.inquery-form .form-row{display:flex; gap:8px; align-items: center;}
.inquery-form .form-row .item-label{width:128px; flex-shrink: 0; display:flex; align-items: center;gap:4px; line-height:4rem;}
.inquery-form .form-row input[type="text"]{border:none; width:100%;}
.inquery-form .form-row.flex-wrap{flex-wrap:wrap;}
.inquery-form .form-row.flex-wrap .item-label{margin-bottom:12px;}
.inquery-form .form-row textarea{width:100%;height:19.4rem;}

.required-mark{color:var(--red);}