.copy_area { position: absolute; top: 50%; left: 60px; transform: translateY(-50%); z-index: 100; color: #fff; max-width: 1200px; overflow: visible; }
.copy_area h2 { font-size: 55px; font-weight: 700; margin-bottom: 10px; line-height: 1.2; word-break: keep-all; }
.copy_area h3 { font-size: 25px; font-weight: 500; line-height: 1.4; opacity: 0.9; }
.swiper-container { width: 100%; height: 100vh; }
.slide-layout { display: flex; width: 100%; height: 100%; position: relative; overflow: visible; }
.mobile-section-swiper { display: flex; width: 100%; height: 100%; }
.mobile-section-swiper .swiper-wrapper { display: flex; width: 100%; height: 100%; }
.mobile-section-swiper .swiper-slide { width: auto !important; height: 100%; flex-shrink: 0; }
.left-section { width: 40vw; height: 100%; position: relative; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.3); background-blend-mode: multiply; overflow: visible; display: block; }
.center-section { width: 30vw; height: 100%; position: relative; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.3); background-blend-mode: multiply; display: block; }
.right-section { width: 30vw; height: 100%; position: relative; background-size: cover; background-position: center; background-color: rgba(0,0,0,0.3); background-blend-mode: multiply; display: block; }
.custom-navigation { position: absolute; bottom: 20px; left: 40px; display: flex; gap: 5px; z-index: 100; }
.nav-button { width: 34px; height: 34px; background-color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); font-size: 16px; }
.nav-button:hover { background-color: #f0f0f0; }
.separator-left { position: absolute; top: 0; right: 0; z-index: 10; }
.separator-right { position: absolute; top: 0; right: 0; z-index: 10; }
@media (max-width: 992px) {
.center-section { width: 35vw; }
.right-section { width: 15vw; }
.copy_area { left: 30px; }
.copy_area h2 { font-size: 28px; }
.copy_area h3 { font-size: 16px; }
}
@media (max-width: 768px) {
.mobile-section-swiper { width: 100%; height: 100%; position: relative; }
.mobile-section-swiper .swiper-wrapper { display: flex !important; width: 100%; height: 100%; }
.mobile-section-swiper .swiper-slide { width: 100% !important; height: 100% !important; flex-shrink: 0; }
.left-section { width: 100% !important; height: 100% !important; display: block !important; position: absolute; top: 0; left: 0; }
.center-section { width: 100% !important; height: 100% !important; display: block !important; position: absolute; top: 0; left: 0; }
.right-section { width: 100% !important; height: 100% !important; display: block !important; position: absolute; top: 0; left: 0; }
.slide-layout { display: block !important; height: 100%; position: relative; }
.separator-left { width: 100%; height: 1px; right: auto; top: auto; bottom: 0; left: 0; }
.separator-right { width: 100%; height: 1px; right: auto; top: auto; bottom: 0; left: 0; }
.custom-navigation { left: 50%; transform: translateX(-50%); bottom: 30px; display: none}
.copy_area { left: 20px; right: 20px; max-width: calc(100% - 40px); }
.copy_area h2 { font-size: 24px; }
.copy_area h3 { font-size: 14px; }
.mobile-section-pagination { position: absolute !important; bottom: 80px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 101 !important; }
.mobile-section-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(255, 255, 255, 0.5); opacity: 1; margin: 0 4px !important; }
.mobile-section-pagination .swiper-pagination-bullet-active { background: #fff; width: 24px; border-radius: 4px; }
}
@media (max-width: 480px) {
.nav-button { width: 30px; height: 30px; font-size: 14px; }
.copy_area h2 { font-size: 20px; }
.copy_area h3 { font-size: 12px; }
.mobile-section-pagination { bottom: 70px !important; }
}
.product-container { display: flex; flex-wrap: wrap; gap: 880px; padding: 100px 50px; }
.main-content { flex: 1; min-width: 300px; }
.sidebar-nav { list-style: none; padding-top: 20px; }
.sidebar-nav li { padding: 15px 0; border-bottom: 1px solid #eee; }
.sidebar-nav a { text-decoration: none; color: #666; font-size: 18px; display: block; cursor: pointer; }
.sidebar-nav a.active { color: #000; font-weight: bold; }
.product-description { margin-bottom: 40px; }
.product-description h2 { font-size: 20px; color: #555; font-weight: normal; margin-bottom: 20px; line-height: 1.65; }
.back-link { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; text-decoration: none; color: #666; font-size: 14px; }
.back-link::before { content: "โ"; font-size: 16px; }
.description-text { font-size: 16px; line-height: 1.7; margin-bottom: 40px; }
.ideal-for { margin-bottom: 60px; }
.section-heading { font-size: 16px; color: #666; margin-bottom: 20px; }
.activities { display: flex; gap: 40px; }
.activity { display: flex; align-items: center; gap: 10px; }
.activity-icon { width: 20px; height: 20px; border-radius: 50%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.tabs-container { border-top: 1px solid #eee; margin-top: 40px; padding-top: 20px; }
.tab-buttons { display: flex; gap: 15px; margin-bottom: 20px; }
.tab-button { padding-bottom: 8px; border-bottom: 2px solid transparent; cursor: pointer; font-size: 14px; }
.tab-button.active { border-bottom-color: #000; font-weight: bold; }
.slide-panel { position: fixed; top: 0; right: -40%; width: 40%; height: 100%; background-color: #fff; box-shadow: -3px 0 10px rgba(0,0,0,0.1); z-index: 1000; transition: right 0.3s ease; overflow-y: auto; padding: 20px; display: none; }
.slide-panel.active { right: 0; display: block; }
.close-panel { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: #333; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.close-panel:hover { transform: scale(1.1); }
.close-panel::before { content: ''; position: absolute; width: 20px; height: 2px; background-color: #333; transform: rotate(45deg); }
.close-panel::after { content: ''; position: absolute; width: 20px; height: 2px; background-color: #333; transform: rotate(-45deg); }
.panel-content { margin-top: 50px; }
.panel-title { font-size: 32px; font-weight: bold; margin-bottom: 20px; display: inline-block; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.overlay.active { opacity: 1; visibility: visible; }
.features-list { list-style: none; margin-top: 20px; }
.features-list li { margin-bottom: 15px; padding-left: 20px; position: relative; font-size: 16px; }
.features-list li::before { content: "โข"; color: #f07000; position: absolute; left: 0; font-size: 20px; line-height: 1; }
.main { overflow: hidden; position: relative; padding: 0 100px 100px 150px; }
.main .container { display: flex; position: relative; padding: 150px 20px; max-width: 1600px }
.main .sidebar { width: 70%; background-color: #fff; position: relative; z-index: 10; transition: transform 0.3s ease; }
.main .sidebar-header { display: flex; align-items: center; margin-bottom: 30px; color: #666; font-size: 14px; }
.main .sidebar-header::before { content: "โ"; margin-right: 10px; }
.main .menu-list { list-style: none; }
.main .menu-item { font-size: 50px; font-weight: 300; color: #333; margin-bottom: 20px; cursor: pointer; transition: all 0.3s ease; position: relative; padding-left: 20px; }
.main .menu-item::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background-color: #333; transition: width 0.3s ease; }
.main .menu-item:hover { color: #000; transform: translateX(10px); }
.main .menu-item:hover::before { width: 10px; }
.main .menu-item.active { color: #000; font-weight: 400; }
.main .menu-item.active::before { width: 10px; }
.main .image-section { width: 30%; position: relative; overflow: hidden; background-color: #000; border-radius: 20px; }
.main .image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.main .image-container.active { opacity: 1; }
.main .image-container img { width: 100%; height: 100%; object-fit: cover; }
.main .menu-toggle { display: none; }
@media (max-width: 768px) {
.main { padding: 0; height: auto; }
.main .container { flex-direction: column; padding: 20px; }
.main .sidebar { width: 100%; height: auto; padding: 20px 0; overflow-y: visible; overflow-x: auto; background-color: #ffffff; order: 1; }
.main .sidebar-header { display: none; }
.main .image-section { width: 100%; height: 500px; flex: none; order: 2; margin-top: 20px; }
.product-container { flex-direction: column; gap: 20px; }
.sidebar { flex: 0 0 auto; width: 100%; }
.sidebar-nav { display: flex; flex-wrap: wrap; gap: 15px; }
.sidebar-nav li { margin-bottom: 0; border-bottom: none; }
.activities { flex-direction: column; gap: 15px; }
.slide-panel { width: 80%; right: -80%; }
}
@media (max-width: 480px) {
.main .menu-list { gap: 20px; padding: 0 15px; }
.main .menu-item { font-size: 28px; }
}
.hero { position: relative; width: 100%; height: 882px; background-position: center}
.hero .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero .background-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%); z-index: 2; }
.hero .content { position: relative; z-index: 3; height: 100%; display: flex; align-items: flex-end; padding: 0 80px 120px 80px; }
.hero .main-title { line-height: 1.65; color: #fff; font-size: 80px; font-weight: 300; line-height: 1; white-space: nowrap; margin-bottom: 40px; text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2px; }
.hero .cta-button { position: absolute; bottom: 60px; right: 60px; background-color: #ffffff; color: #000000; padding: 16px 32px; text-decoration: none; font-size: 16px; font-weight: 500; border-radius: 30px; transition: all 0.3s ease; z-index: 3; }
.hero .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
@media (max-width: 1200px) {
.hero .content { padding: 0 60px 100px 60px; }
.hero .main-title { font-size: 60px; white-space: normal; }
}
@media (max-width: 768px) {
.hero { height: 700px; }
.hero .content { padding: 0 40px 80px 40px; }
.hero .main-title { font-size: 48px; white-space: normal; }
.hero .cta-button { bottom: 40px; right: 40px; padding: 14px 28px; font-size: 14px; }
}
@media (max-width: 480px) {
.hero { height: 600px; }
.hero .content { padding: 0 20px 60px 20px; }
.hero .main-title { font-size: 36px; white-space: normal; }
.hero .cta-button { bottom: 30px; right: 20px; left: 20px; text-align: center; }
}
.product-tabs-wrapper { position: relative; }
.product-tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 30px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; scroll-behavior: smooth; font-size: 15px; }
.product-tabs::-webkit-scrollbar { display: none; }
.product-tab { padding: 15px 20px; cursor: pointer; position: relative; color: #666; transition: color 0.3s ease; flex-shrink: 0; white-space: nowrap; min-width: max-content; }
.product-tab.active { font-weight: bold; color: #000; }
.product-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: #000; }
.product-tab:hover { color: #000; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.brand-section { margin: 30px 0; }
.hero-image { width: 100%; height: 400px; background-position: center; background-size: cover; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; }
.hero-content { text-align: center; color: white; z-index: 2; }
.hero-content h2 { font-size: 32px; font-weight: 700; margin-bottom: 12px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero-content p { font-size: 16px; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.related-products { padding: 20px 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.section-title { font-size: 20px; font-weight: 600; color: #000; }
.nav-arrows { display: flex; gap: 8px; }
.nav-arrow { width: 40px; height: 40px; border: 2px solid #ddd; border-radius: 50%; background: white; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; transition: all 0.3s; user-select: none; }
.nav-arrow:hover:not(.disabled) { background: #f0f0f0; border-color: #333; color: #000; transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.nav-arrow.disabled { opacity: 0.3; cursor: not-allowed; }
.products-slider { position: relative; overflow: hidden; width: 100%; user-select: none; }
.products-container { display: flex; transition: transform 0.3s ease; gap: 16px; user-select: none; cursor: grab; }
.products-container.dragging { transition: none; cursor: grabbing; user-select: none; }
.products-container.dragging .product-card { pointer-events: none; user-select: none; }
.product-card { position: relative; min-width: 292px; border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; user-select: none; }
.product-card:hover { transform: translateY(-5px); }
.products-container.dragging .product-card:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.product-image { width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); background-size: cover; background-position: center; position: relative; overflow: hidden; user-select: none; }
.product-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: all 0.3s ease; z-index: 1; }
.product-image::after { content: '๐'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); font-size: 30px; color: white; opacity: 0; transition: all 0.3s ease; z-index: 2; }
.product-card:hover .product-image::before { opacity: 1; }
.product-card:hover .product-image::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.product-info { padding: 16px; flex-grow: 1; border: 1px solid #ddd; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.product-name { font-size: 16px; font-weight: 600; color: #000; margin-bottom: 4px; }
.product-price { font-size: 16px; font-weight: 700; color: #000; margin-bottom: 4px; }
.product-colors { font-size: 14px; color: #666; }
.product-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 10000; display: none; opacity: 0; transition: all 0.3s ease; align-items: center; justify-content: center; padding: 80px; }
.product-modal.active { display: flex; opacity: 1; align-items: center; justify-content: center; }
.modal-content { border-radius: 12px; max-width: calc(100% - 100px); max-height: calc(100% - 50px); width: 800px; position: relative; overflow: hidden; transform: scale(0.7); transition: transform 0.3s ease; }
.product-modal.active .modal-content { transform: scale(1); }
.product-modal .modal-close { position: absolute; top: 180px; right: 0px; cursor: pointer; z-index: 10001; color: #fff !important; width: 45px; height: 45px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; font-size: 22px !important; font-weight: bold !important; text-align: center !important; background-color: transparent; border: 0}
.product-modal .modal-body { width: 100%; height: 600px; }
.product-modal .modal-image { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: 600; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
@media (max-width: 768px) {
.product-modal { padding: 60px 30px; }
.product-modal .modal-content { max-width: calc(100% - 60px); max-height: calc(100% - 120px); }
.product-modal .modal-close { top: -40px; right: -40px; width: 40px; height: 40px; font-size: 20px !important; }
.product-modal .modal-body { height: 70vh; }
.slide-panel { width: 100%; right: -100%; }
/* .product-card { min-width: 150px; }*/
.products-container { gap: 15px; }
.hero-image { height: 300px; }
.hero-content h2 { font-size: 24px; }
.panel-content { padding: 20px 15px; }
.panel-title { font-size: 24px; }
}
@media (max-width: 480px) {
.product-modal { padding: 50px 20px; }
.product-modal .modal-content { max-width: calc(100% - 40px); max-height: calc(100% - 100px); }
.product-modal .modal-close { top: -35px; right: -35px; width: 35px; height: 35px; font-size: 18px !important; }
.product-modal .modal-body { height: 60vh; }
/*.product-card { min-width: 120px; }*/
.nav-arrows { gap: 5px; }
.nav-arrow { width: 30px; height: 30px; font-size: 14px; }
}
.barnygirl .product-image-1 { background-image: url('../img/product-barnygirl01.jpg'); }
.barnygirl .product-image-2 { background-image: url('../img/product-barnygirl02.jpg'); }
.barnygirl .product-image-3 { background-image: url('../img/product-barnygirl03.jpg'); }
.barnygirl .product-image-4 { background-image: url('../img/product-barnygirl04.jpg'); }
.sky .product-image-1 { background-image: url('../img/product-sky01.jpg'); }
.sky .product-image-2 { background-image: url('../img/product-sky02.jpg'); }
.sky .product-image-3 { background-image: url('../img/product-sky03.jpg'); }
.sky .product-image-4 { background-image: url('../img/product-sky04.jpg'); }
.cheerleader .product-image-1 { background-image: url('../img/product-cheerleader01.jpg'); }
.cheerleader .product-image-2 { background-image: url('../img/product-cheerleader02.jpg'); }
.cheerleader .product-image-3 { background-image: url('../img/product-cheerleader03.jpg'); }
.cheerleader .product-image-4 { background-image: url('../img/product-cheerleader04.jpg'); }
.raina .product-image-1 { background-image: url('../img/product-raina01.jpg');}
.raina .product-image-2 { background-image: url('../img/product-raina02.jpg');}
.raina .product-image-3 { background-image: url('../img/product-raina03.jpg');}
.raina .product-image-4 { background-image: url('../img/product-raina04.jpg');}
.toona .product-image-1 { background-image: url('../img/product-toona01.jpg'); }
.toona .product-image-2 { background-image: url('../img/product-toona02.jpg'); }
.toona .product-image-3 { background-image: url('../img/product-toona03.jpg'); }
.toona .product-image-4 { background-image: url('../img/product-toona04.jpg'); }
.lace-up .product-image-1 { background-image: url('../img/product-Lace-up01.jpg'); }
.lace-up .product-image-2 { background-image: url('../img/product-Lace-up02.jpg'); }
.lace-up .product-image-3 { background-image: url('../img/product-Lace-up03.jpg'); }
.lace-up .product-image-4 { background-image: url('../img/product-Lace-up04.jpg'); }
.simple .product-image-1 { background-image: url('../img/product-simple01.jpg'); }
.simple .product-image-2 { background-image: url('../img/product-simple02.jpg'); }
.simple .product-image-3 { background-image: url('../img/product-simple03.jpg'); }
.simple .product-image-4 { background-image: url('../img/product-simple04.jpg'); }
.tokyo .product-image-1 { background-image: url('../img/product-tokyo01.jpg'); }
.tokyo .product-image-2 { background-image: url('../img/product-tokyo02.jpg'); }
.tokyo .product-image-3 { background-image: url('../img/product-tokyo03.jpg'); }
.tokyo .product-image-4 { background-image: url('../img/product-tokyo04.jpg'); }
.jute .product-image-1 { background-image: url('../img/product-jute01.jpg'); }
.jute .product-image-2 { background-image: url('../img/product-jute02.jpg'); }
.jute .product-image-3 { background-image: url('../img/product-jute03.jpg'); }
.jute .product-image-4 { background-image: url('../img/product-jute04.jpg'); }
.gdr .product-image-1 { background-image: url('../img/product-gdr01.jpg'); }
.gdr .product-image-2 { background-image: url('../img/product-gdr02.jpg'); }
.gdr .product-image-3 { background-image: url('../img/product-gdr03.jpg'); }
.gdr .product-image-4 { background-image: url('../img/product-gdr04.jpg'); }
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
/* ๋ชจ๋ฐ์ผ ํฐ์น ์ต์ ํ ์คํ์ผ */
/* ํฐ์น ๋๋ฐ์ด์ค์์ hover ํจ๊ณผ ์ ๊ฑฐ */
.touch-device .product-card:hover { transform: none; }
.touch-device .product-card:hover .product-image::before,
.touch-device .product-card:hover .product-image::after { opacity: 0; transform: translate(-50%, -50%) scale(0); }
/* ํฐ์น ๋๋ฐ์ด์ค์์ ๋ฒํผ hover ํจ๊ณผ ์ต์ ํ */
.touch-device .nav-arrow:hover:not(.disabled) { transform: none; box-shadow: none; }
.products-container.dragging { touch-action: none; }
/* ๋๋๊ทธ ์ค์ผ ๋ ์ ํ ๋ฐฉ์ง ๊ฐํ */
.products-container.dragging,
.products-container.dragging * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* ํฐ์น ์์ญ ์ต์ ํ */
.product-card { -webkit-tap-highlight-color: transparent; touch-action: pan-y; } /* ์ธ๋ก ์คํฌ๋กค๋ง ํ์ฉ, ๊ฐ๋ก ๋๋๊ทธ๋ ์ฌ๋ผ์ด๋๊ฐ ์ฒ๋ฆฌ */
.products-container { touch-action: pan-y; } /* ์ธ๋ก ์คํฌ๋กค ํ์ฉ */
/* ์ฌ๋ผ์ด๋ ์์ญ ํฐ์น ์ต์ ํ */
.products-slider { overflow: hidden; -webkit-overflow-scrolling: touch; } /* iOS์์ ๋ถ๋๋ฌ์ด ์คํฌ๋กค */