.tab-header {
padding: 22px 0;
align-items: center;
}
.tab-list li {
margin-right: 12px;
}
.tab-list li a {
font-size: 14px;
font-weight: 500;
color: var(--primary-color);
padding: 8px 13px;
} .tab-list li a.active {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.search-btn {
width: 31%;
position: relative;
}
.search-btn input[type="search"] {
padding: 17px 14px;
width: 100%;
border-radius: 8px;
border: 2px solid var(--sch-bd-color);
outline: none;
}
.search-btn input[type="search"]::placeholder {
color: var(--txt-place-color);
font-size: 14px;
font-weight: 500;
font-family: 'Helvetica', sans-serif;
}
.search-ico {
width: 24px;
height: 24px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.product-page h2 {
text-align: center;
}
.product-page .product {
background-color: var(--bg-color);
}
.product-page .product .product-list {
padding: 38px 0 30px;
flex-wrap: wrap;
justify-content: unset;
}
.product-page .product .product-list li img {
height: 153px;
object-fit: cover;
}
.product-page .product .product-list li {
margin-bottom: 68px;
margin-right: 15px;
}
.product-page .product .product-list li:nth-child(4n+0){
margin-right: 0;
}
.lightbox {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-content {
position: absolute;
width: 70%;
margin: 0 auto;
background-color: var(--secondary-color);
padding: 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
align-items: center;
}
.lightbox-image {
width: 48%;
height: 375px;
object-fit: cover;
}
.lightbox-content .txt-blk {
width: 48%;
}
.lightbox-content .txt-blk p {
font-size: 24px;
font-weight: 400;
padding-top: 20px;
}
.close {
color: #000;
font-size: 2em;
position: absolute;
top: 20px;
right: 30px;
cursor: pointer;
} @media only screen and (min-width:768px) and (max-width:1280px) {
.tab-header {
padding: 1.719vw 0;
}
.tab-list li {
padding: 0.625vw 1.016vw;
margin-right: -1.062vw;
}
.tab-list li a {
font-size: 1.094vw;
}
.search-btn input[type="search"] {
padding: 1.328vw 1.094vw;
border-radius: 0.625vw;
border: 0.156vw solid var(--sch-bd-color);
}
.search-btn input[type="search"]::placeholder {
font-size: 1.094vw;
}
.search-ico {
width: 1.875vw;
height: 1.875vw;
right: 0.625vw;
}
.product-page .product .product-list {
padding: 2.969vw 0 2.344vw;
}
.product-page .product .product-list li img {
height: 11.953vw;
}
.product-page .product .product-list li {
margin-bottom: 5.313vw;
margin-right: 1.13vw;
}
.lightbox-content {
padding: 2.344vw;
}
.lightbox-image {
height: 24.297vw;
}
.lightbox-content .txt-blk p {
font-size: 1.875vw;
padding-top: 1.563vw;
}
.close {
top: 1.563vw;
right: 2.344vw;
}
} @media all and (max-width:767.9px) {
.tab-header {
padding: 5.867vw 0;
}
.tab-list li {
padding: 2.133vw 3.467vw;
margin-right: 3.2vw;
}
.tab-list li a {
font-size: 3.2vw;
}
.tab-header {
display: block;
}
.tab-list.d-flex {
white-space: nowrap;
overflow: scroll;
flex-wrap: nowrap;
}
.search-btn {
width: 100%;
margin-top: 5.333vw;
}
.search-btn input[type="search"] {
padding: 2.667vw 1.867vw;
width: 100%;
border-radius: 2.133vw;
border: 0.533vw solid var(--sch-bd-color);
}
.search-btn input[type="search"]::placeholder {
font-size: 3.2vw;
}
.search-ico {
width: 6.4vw;
height: 6.4vw;
right: 2.133vw;
}
.search-ico img {
width: 6.4vw;
height: 6.4vw;
}
.product-page .product .product-list {
padding: 5.333vw 0 5.333vw;
justify-content: space-between;
}
.product-page .product .product-list li img {
height: 26.667vw;
}
.product-page .product .product-list li {
margin-bottom: 7.467vw;
margin-right: 0;
}
.lightbox-content {
width: 90%;
flex-wrap: wrap;
overflow-y: auto;
}
.lightbox-image {
width: 100%;
height: 53.333vw;
}
.lightbox-content .txt-blk {
width: 100%;
margin-top: 5.333vw;
}
.lightbox-content .txt-blk p {
font-size: 4.267vw;
padding-top: 5.333vw;
}
.close {
font-size: 2em;
top: 0vw;
right: 2.667vw;
}
}