/* list */
.prd-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: .83em;}
.prd-list li a {display: block; width: 100%; height: 100%; border-radius: .83em; border: 1px solid #a5acae; overflow: hidden; position: relative; transition: all .3s ease; background-color: white;}
.prd-list li .prd-pic {width: 100%; height: auto; display: flex; justify-content: center; align-items: center;}
.prd-list li .prd-pic img {height: 100%; max-height: 100%;}
.prd-list li .prd-name {width: 100%; height: auto; padding: 2.08em 2.5em; background-color: rgba(3, 109, 146, .86); backdrop-filter: blur(5px); color: white; position: absolute; bottom: 0; left: 0; transition: all .3s ease;}
.prd-list li .prd-name h3 {font-weight: 800; font-size: 1.5em;}
.prd-list li .prd-name p {padding-top: 10px; font-weight: 500; font-size: 1.08em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.prd-list li .prd-name .more {position: absolute; top: 2.33em; right: 1.67em;}
.prd-list li .prd-name .more img {width: 2em;}

.prd-list li a:hover {transform: translateY(-10px)}
.prd-list li a:hover .prd-name {background-color: #036d92;}
.prd-list li a:hover .prd-name h3 {text-decoration: underline;}

@media screen and (max-width: 1280px) {
    .prd-list li .prd-name {padding: 1.6em;}
    .prd-list li .prd-name .more {top: 1.8em; right: 1.25em;}
}
@media screen and (max-width: 1024px) {
    .prd-list {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 568px) {
    .prd-list {grid-template-columns: 1fr;}
    .prd-list li .prd-pic img {height: 320px;}
}

/* detail */
.prod-detail-wrap {/*max-width: 1640px;*/ max-width: 1460px; padding: 5em 20px; margin: 0 auto;}
/* Navigation Header */
.prod-nav {display: flex; justify-content: space-between; align-items: center; padding: 1.25em .83em; border-bottom: 2px solid #c9cbcf;}
.prod-nav .nav-link {display: flex; align-items: center; gap: 10px; color: #434343; text-decoration: none; --arr-width: .96em; --arr-height: 1.83em; --arr-img: url("../image/icon/chevron.png");}
.prod-nav .nav-link:hover {color: #1893bc;}
.prod-nav .nav-link.prev::before {content: ''; width: var(--arr-width); height: var(--arr-height); background: var(--arr-img) center / cover no-repeat;}
.prod-nav .nav-link.next::after {content: ''; width: var(--arr-width); height: var(--arr-height); background: var(--arr-img) center / cover no-repeat; transform: rotate(-180deg)}
.prod-nav .prod-tit {font-size: 2.5em; font-weight: 700; color: #004b63;}

.prod-detail {padding: 2.58em .83em 4.58em; border-bottom: 2px dotted #9caeb5;}

/* Product Section */
.prod-sec {display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.17em; /*align-items: center;*/ position: relative;}
.prod-sec .prod-info .prod-name {font-size: 2.33em; font-weight: 700; color: #006b8e; margin-bottom: .71em;}
.prod-sec .prod-info .prod-desc {line-height: 1.6; color: #2a2a2a;}
.prod-sec .prod-img {text-align: center;}
.prod-sec .prod-img img {max-width: 100%; height: auto;}

/* Specifications Section */
.prod-spec h2 {font-size: 1.58em; font-weight: 800; color: #2a2a2a; margin-bottom: .79em;}
.prod-spec .spec-grid {display: flex; justify-content: space-between; background: #f1f9fc; padding: 2.5em 5em; border-radius: 10px;}
.prod-spec .spec-label {font-size: 1.08em; color: #007da6; font-weight: 600; margin-bottom: .77em;}
.prod-spec .spec-value {font-size: 1.42em; font-weight: 600; color: #004c65; }
.prod-spec p {line-height: 1.6; color: #2a2a2a; margin: 2.33em 0; }
.prod-spec .spec-img {width: 100%; height: auto;}

@media (max-width: 1280px) {
    .prod-sec {padding: 2em 0;}
    .prod-sec .prod-info .prod-name {font-size: 2em;}
    .prod-spec .spec-grid {padding: 2.5em;}
    .prod-spec .spec-value {font-size: 1.25em;}
}
@media (max-width: 960px) {
    .prod-sec { grid-template-columns: 1fr; gap: 40px; }
    /*.prod-sec .prod-info {order: 2;}*/
    .prod-sec .prod-img img {width: 500px;}
}
@media (max-width: 768px) {
    .prod-nav, .prod-detail {padding-left: 0; padding-right: 0;}
    .prod-nav .mblind {display: none;}
    .prod-nav .prod-tit {font-size: 1.8em;}
    .prod-sec .prod-info .prod-name {font-size: 1.58em;}
	.prod-spec .spec-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 2em; padding: 2em;}
}
@media (max-width: 640px) {
    .prod-spec .spec-grid {grid-template-columns: 1fr;}
}