.main #container {width: 100%; height: 100vh; padding-bottom: 6em;}

/* main visual */
.main-visual {width: 100%; height: 100vh; background-color: #000; overflow: clip;}
.main-visual .slider-wrap {animation: zoomOut 3s ease-out forwards;}
.main-visual .slider-wrap .slide-item {height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover;}

.main-text {width: 100%; padding: 0 20px; color: white; text-align: center; position: absolute; top: 28%; left: 50%; transform: translateX(-50%); z-index: 1;}
.main-text h2 {font-weight: 800; font-size: 2.71em; /*font-size: 3em;*/ text-shadow: 0 0 8px #000;}
.main-text p {font-weight: 500; font-size: 1.25em; /*font-size: 1.5em;*/ margin-top: 16px; text-shadow: 0 0 8px #000;}

.main-visual .slider-control .slider-dots {position: absolute; bottom: 4.17em; left: 50%; transform: translateX(-50%)}
.main-visual .slider-control .slider-dots .slick-dots {display: flex; align-items: center; gap: 0 9px;}
.main-visual .slider-control .slider-dots .slick-dots li button {width: 20px; height: 20px; border-radius: 50px; border: 2px solid white; font-size: 0;}
.main-visual .slider-control .slider-dots .slick-dots .slick-active button {background-color: white;}

/* product list */
.prd-qlink {width: 100%; /*max-width: 1366px;*/ max-width: 1200px; padding: 0 20px; margin: 2.92em 0; position: absolute; top: 62%; left: 50%; transform: translate(-50%, -62%)}
.prd-qlink ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: .83em;}
.prd-qlink ul li a {display: block; width: 100%; height: 100%; padding: .42em; border-radius: 20px; box-shadow: 0 0 8px #000; overflow: hidden; position: relative; transition: all .3s ease; background-color: white;}
.prd-qlink ul li .prd-pic {width: 100%; height: 7.5em; display: flex; justify-content: center; align-items: center;}
.prd-qlink ul li .prd-pic img {max-height: 100%;}
.prd-qlink ul li .prd-name {width: 100%; height: 3.33em; padding: 0 2.4em; text-align: center; position: relative;}
.prd-qlink ul li .prd-name h3 {flex: 1; font-weight: 800; font-size: 1.13em; color: #0085b0;}
.prd-qlink ul li .prd-name .more {position: absolute; top: 0; right: .83em;}
.prd-qlink ul li a:hover {transform: translateY(-10px);}

@media screen and (max-width: 1366px) {
    .prd-qlink {max-width: 1279px; padding: 0 64px;}
	.prd-qlink ul li .prd-name {padding: 0 3em;}
}
@media screen and (max-width: 1280px) {
    .main #container {height: auto; padding-bottom: 0;}
    .main-visual {height: 480px; position: relative;}
    .main-visual .slider-wrap .slide-item {height: 480px;}
    .main-text {top: 35%;}
    
    .main-visual .slider-control .slider-dots {bottom: 6.4em;}
    .main-visual .slider-control .slider-dots .slick-dots li button {width: 16px; height: 16px;}

    /* product list */
    .prd-qlink {position: static; transform: none; max-width: 100%; padding: 0 10vw 3.2em; margin: 0; background-color: #2f8dae;}
    .prd-qlink ul {max-width: 1280px; margin: -3.2em auto 0; grid-template-columns: repeat(2, 1fr);}
    .prd-qlink ul li .prd-name {height: auto; padding-bottom: 16px;}
    .prd-qlink ul li .prd-name h3 {font-size: 23px;}
}
@media screen and (max-width: 960px) {
    .main-text h2 {font-size: 2.44em;}
    .main-text p {font-size: 1.13em;}

    .prd-qlink {padding: 0 16px 3.2em;}
    .prd-qlink ul li {min-height: 150px; max-height: 200px;}
    .prd-qlink ul li a {display: flex; align-items: center;}
    .prd-qlink ul li .prd-pic {flex-shrink: 0; width: 150px;}
    .prd-qlink ul li .prd-name {text-align: left; padding: 0 10px; position: static;}
    .prd-qlink ul li .prd-name .more {top: unset; bottom: 20px; right: 20px;}
}
@media screen and (max-width: 767px) {
    .prd-qlink ul {grid-template-columns: 1fr;}
}
@media screen and (max-width: 320px) {
    .prd-qlink ul li a {flex-direction: column;}
    .prd-qlink ul li .prd-name {padding: 10px 0 40px; text-align: center;}
}