@charset "utf-8";

/* ======================================================================
   ref7 hillcasino main.css (Hero + Category) - User v5
   - ref7/hillcasino/css/main.css 기반
   - v5 기존 구조와 충돌 방지를 위해 필요한 부분은 기존 스코프 유지
   ====================================================================== */

/* hero section */
.hero {position: relative; margin: -45px 0 0; padding: 45px 0 0; width: 100%; height: 410px; overflow: hidden;}
.hero::before {content: ''; position: absolute; left: 0; top: 10px; width: 100%; height: 110%; background: linear-gradient(180deg, rgba(195, 224, 228, 1.0), rgba(195, 224, 228, 1.0), rgba(195, 224, 228, 0)); box-shadow: 0 -2px 5px rgba(51, 119, 113, 0.5); border-radius: 120px 120px 0 0;}
.hero::after {content: ''; position: absolute; left: 0; z-index: -1; bottom: -11%; width: 100%; height: 12%; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0));}

.hero-inner {position: relative; margin: 0 auto; padding: 0 15px; width: 1430px; height: 100%;}

/* banner-title */
.hero .banner-title {position: absolute; left: 0; top: 25px; z-index: 8; margin: 0 auto; padding: 0 0 10px; width: 100%; text-align: center; font-family: 'GmarketSans';}
.hero .banner-title::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 50%; max-width: 100px; height: 2px; background: linear-gradient(to right, #81d8d0, #02c9b7); border-radius: 2px;}

/* mobile-support */
.hero .mobile-support {position: absolute; left: 0; bottom: 15px; z-index: 8; width: 100%; display: flex; justify-content: center; align-items: center;}
.hero .mobile-support > .icon-panel {margin: 0 7px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); background: linear-gradient(#ff826e, #d54a34); border-radius: 8px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);}
.hero .mobile-support > span {font-weight: 600;}

/* circle-bg */
.hero .circle-bg {position: absolute; left: 0; right: 0; top: 48.75%; transform: translateY(-50%); margin: 0 auto; width: 41.96%; min-width: 600px; height: 164.39%;}
.hero .circle-bg > .circle {position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); border-radius: 50%; box-shadow: 0 0 10px rgba(51, 119, 113, 0.1);}
.hero .circle-bg > .c-01 {animation: hillHeroC01 1.5s ease infinite;}
@keyframes hillHeroC01 {
    0% {background: rgba(255, 255, 255, 0.1);}
    20% {background: rgba(255, 255, 255, 0.1);}
    35% {background: rgba(255, 255, 255, 0.5);}
    50% {background: rgba(255, 255, 255, 0.1);}
    100% {background: rgba(255, 255, 255, 0.1);}
}
.hero .circle-bg > .c-02 {width: 66.67%; height: 66.67%; animation: hillHeroC02 1.5s ease infinite;}
@keyframes hillHeroC02 {
    0% {background: rgba(255, 255, 255, 0.1);}
    10% {background: rgba(255, 255, 255, 0.1);}
    25% {background: rgba(255, 255, 255, 0.5);}
    40% {background: rgba(255, 255, 255, 0.1);}
    100% {background: rgba(255, 255, 255, 0.1);}
}
.hero .circle-bg .c-03 {width: 33.34%; height: 33.34%; animation: hillHeroC03 1.5s ease infinite;}
@keyframes hillHeroC03 {
    0% {background: rgba(255, 255, 255, 0.1);}
    15% {background: rgba(255, 255, 255, 0.5);}
    30% {background: rgba(255, 255, 255, 0.1);}
    100% {background: rgba(255, 255, 255, 0.1);}
}

/* hero-banner */
.hero .hero-banner,
.hero .banner-background {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.hero .hero-banner > img {position: relative; width: 100%;}

/* banner-mask */
.hero .banner-mask {position: absolute; left: 50%; bottom: -20%; transform: translateX(-50%); z-index: 5; width: 600%; height: 50%;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5%, rgba(0, 0, 0, 1.0) 10% 95%, rgba(0, 0, 0, 0) 100%);
}

/* hero 반응형 (ref7 기준) */
@media (max-width: 1460px) {
    .hero-inner {width: 100%;}
    .hero {height: 350px;}
    .hero .circle-bg {min-width: initial;}
}

@media (max-width: 1200px) {
    .hero {height: 300px;}
    .hero .banner-title {top: 10px;}
    .hero .banner-title > span {font-size: 12px;}
}

@media (max-width: 1024px) {
    .hero {margin: 118px 0 0 0; padding: 0; height: 250px;}
    .hero::before {top: 0; border-radius: 0; box-shadow: none;}
    .hero .circle-bg {width: 45.96%;}
}

@media (max-width: 767px) {
    .hero {height: 180px;}
    .hero .circle-bg {width: 90%;}
    .hero .mobile-support {display: none;}
    .hero .banner-title::after {max-width: 60px;}
    .hero .banner-title > span {font-size: 11px; letter-spacing: -1px;}
}

@media (max-width: 567px) {
    .hero {height: 150px;}
}

/* ======================================================================
   category (v5 hook 유지 위해 `.category-section.category` 스코프)
   ====================================================================== */

.category-section.category {position: relative; margin: 0 auto; padding: 0; width: 100%;}
.category-section.category .category-inner {position: relative; z-index: 8; margin: -20px auto 0 auto; padding: 0 15px 30px 15px; width: 1430px;}

.category-section.category ul.cate-list {position: relative; margin: 0 auto; padding: 0; width: 100%; display: flex; gap: 10px; justify-content: center; align-items: center;}
.category-section.category ul.cate-list > li {position: relative; perspective: 900px; width: calc(100% / 3); height: 128px; display: flex; justify-content: center; align-items: center; transition: 0.3s; cursor: pointer;}
.category-section.category ul.cate-list > li:nth-child(2) {height: 84px; margin: 0 auto;}

.category-section.category ul.cate-list > li > .cate-bg {position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background: linear-gradient(180deg, #b5faf4, #81d8d0); border: solid 1px #84d3cc; border-radius: 25px; box-shadow: 0 7px 0 rgba(0, 161, 146, 0.3); transition: 0.3s; overflow: hidden;}
.category-section.category ul.cate-list > li:first-child > .cate-bg,
.category-section.category ul.cate-list > li:last-child > .cate-bg {width: 165%;}
.category-section.category ul.cate-list > li:nth-child(2) > .cate-bg {border-radius: 15px; box-shadow: 0 4px 0 rgba(0, 161, 146, 0.3);}

.category-section.category ul.cate-list > li:first-child > .cate-bg {transform-style: preserve-3d; transform-origin: center left; transform: rotateY(40deg);}
.category-section.category ul.cate-list > li:last-child > .cate-bg {left: auto; right: 0; transform: rotateY(-40deg); transform-origin: center right;}

/* 스포츠 미노출(2개) 케이스 */
.category-section.category.no-sports ul.cate-list > li {width: calc(50% - 5px); height: 128px;}
.category-section.category.no-sports ul.cate-list > li:nth-child(2) {height: 128px; margin: 0;}

.category-section.category.no-sports ul.cate-list > li:first-child > .cate-bg,
.category-section.category.no-sports ul.cate-list > li:last-child > .cate-bg {width: 100%;}

.category-section.category.no-sports ul.cate-list > li:first-child > .cate-bg {transform: rotateY(20deg); transform-origin: center left;}
.category-section.category.no-sports ul.cate-list > li:last-child > .cate-bg {transform: rotateY(-20deg); transform-origin: center right;}

/* 2개 케이스에서는 화살표가 더 오른쪽으로 붙어야 자연스러움 */
.category-section.category.no-sports ul.cate-list > li > i {right: 134px;}

@media (max-width: 1460px) {
    .category-section.category.no-sports .category-inner {width: 100%;}
}

.category-section.category ul.cate-list > li > .cate-bg::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #43e6d6, #21a397); opacity: 0;}
.category-section.category ul.cate-list > li.active > .cate-bg {border: 1px #1a9b8f solid; box-shadow: 0 7px 0 rgba(0, 161, 146, 0.5);}
.category-section.category ul.cate-list > li:nth-child(2).active > .cate-bg {box-shadow: 0 4px 0 rgba(0, 161, 146, 0.5);}
.category-section.category ul.cate-list > li.active > .cate-bg::before {opacity: 1;}

.category-section.category ul.cate-list > li > img {margin-right: 20px; max-height: 70px;}
.category-section.category .cate-txt {min-width: 200px; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;}
.category-section.category .cate-kr {font-size: 30px; font-weight: 500; color: #000;}
.category-section.category .cate-en {font-weight: 300; letter-spacing: 1px; color: #000;}
.category-section.category ul.cate-list > li > i {display: none; position: absolute; right: 30px; font-size: 40px; color: #81fff4; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); transform: translateY(-10%); transition: 0.3s;}
.category-section.category ul.cate-list > li.active > i {display: inline-block;}
.category-section.category ul.cate-list > li.active .cate-kr {color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);}
.category-section.category ul.cate-list > li.active .cate-en {color: #b0fff8;}

@media (hover: hover) and (pointer: fine) {
    .category-section.category ul.cate-list > li:hover > .cate-bg {border: 1px #1a9b8f solid; box-shadow: 0 7px 0 rgba(0, 161, 146, 0.5);}
    .category-section.category ul.cate-list > li:nth-child(2):hover > .cate-bg {box-shadow: 0 4px 0 rgba(0, 161, 146, 0.5);}
    .category-section.category ul.cate-list > li:hover > .cate-bg::before {opacity: 1;}
    .category-section.category ul.cate-list > li:hover > i {display: inline-block;}
    .category-section.category ul.cate-list > li:hover .cate-kr {color: #ffffff;}
    .category-section.category ul.cate-list > li:hover .cate-en {color: #b0fff8;}
}

@media (max-width: 1460px) {
    .category-section.category .category-inner {width: 100%;}
}

@media (max-width: 1300px) {
    .category-section.category ul.cate-list > li {height: 120px;}
    .category-section.category ul.cate-list > li:first-child > .cate-bg,
    .category-section.category ul.cate-list > li:last-child > .cate-bg {width: 158%;}

    .category-section.category.no-sports ul.cate-list > li {height: 120px;}
    .category-section.category.no-sports ul.cate-list > li:nth-child(2) {height: 120px;}
}

@media (max-width: 1200px) {
    .category-section.category ul.cate-list > li {height: 112px; justify-content: center;}
    .category-section.category ul.cate-list > li:first-child > .cate-bg,
    .category-section.category ul.cate-list > li:last-child > .cate-bg {width: 155%;}
    .category-section.category ul.cate-list > li > img {margin-right: 15px; max-height: 54px;}
    .category-section.category ul.cate-list > li > i {right: 20px; font-size: 30px;}
    .category-section.category .cate-txt {margin-right: 20px; min-width: auto;}
    .category-section.category .cate-kr {font-size: 22px;}

    .category-section.category.no-sports ul.cate-list > li {height: 112px; justify-content: center;}
    .category-section.category.no-sports ul.cate-list > li:nth-child(2) {height: 112px;}
}

@media (max-width: 1024px) {
    .category-section.category ul.cate-list > li {height: 80px; justify-content: center;}
    .category-section.category ul.cate-list > li:nth-child(2) {height: 60px;}
    .category-section.category ul.cate-list > li:first-child > .cate-bg,
    .category-section.category ul.cate-list > li:last-child > .cate-bg {width: 150%;}
    .category-section.category ul.cate-list > li > img {margin-right: 10px; max-height: 40px;}
    .category-section.category ul.cate-list > li > i {font-size: 25px;}
    .category-section.category .cate-kr {font-size: 18px;}

    /* Bootstrap(p) margin 영향 제거 (모바일 카테고리 텍스트 정렬) */
    .category-section.category .cate-txt > p {margin: 0;}

    .category-section.category.no-sports ul.cate-list > li > i {right: 15px;}
    .category-section.category.no-sports ul.cate-list > li {height: 80px; justify-content: center;}
    .category-section.category.no-sports ul.cate-list > li:nth-child(2) {height: 80px;}
}

@media (max-width: 767px) {
    .category-section.category ul.cate-list > li > img {margin-right: 10px;}
    .category-section.category ul.cate-list > li > i {right: 10px;}
    .category-section.category.no-sports ul.cate-list > li > i {right: 10px;}
}

@media (max-width: 639px) {
    .category-section.category .category-inner {padding: 0 5px;}
    .category-section.category ul.cate-list {gap: 5px;}
    .category-section.category ul.cate-list > li,
    .category-section.category ul.cate-list > li:nth-child(2) {padding: 0 5px; height: 50px;}
    .category-section.category ul.cate-list > li:first-child > .cate-bg,
    .category-section.category ul.cate-list > li:last-child > .cate-bg {width: 100%; transform: rotateY(0deg); box-shadow: 0 4px 0 rgba(0, 161, 146, 0.3); border-radius: 15px;}
    .category-section.category ul.cate-list > li > img {margin-right: 3px; height: 26px;}
    .category-section.category ul.cate-list > li > i,
    .category-section.category ul.cate-list > li.active > i,
    .category-section.category .cate-en {display: none;}
    .category-section.category .cate-txt {margin-right: 0;}
    .category-section.category .cate-kr {font-size: 13px; letter-spacing: -1px;}

    /* Bootstrap(p) margin 영향 제거 (모바일 카테고리 텍스트 정렬) */
    .category-section.category .cate-txt > p {margin: 0;}

    .category-section.category.no-sports ul.cate-list > li,
    .category-section.category.no-sports ul.cate-list > li:nth-child(2) {height: 50px;}
    .category-section.category.no-sports ul.cate-list > li:first-child > .cate-bg,
    .category-section.category.no-sports ul.cate-list > li:last-child > .cate-bg {transform: rotateY(0deg);}
}