* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #000; font-family: Arial, sans-serif; overflow-x: hidden; }
button { font: inherit; }
.cc-clone { background: #000; color: #fff; position: relative; }

.cc-orient-layer { background: #000; display: none; inset: 0; position: fixed; touch-action: none; z-index: 10000; }
.cc-orient-content { left: 0; position: absolute; text-align: center; top: 45%; transform: translateY(-50%); width: 100%; }
.cc-orient-icon { animation: orient-rotation 1.5s ease-in-out infinite; border: 4px solid #f5f5f5; border-radius: 10px; box-sizing: border-box; display: inline-block; height: 109px; transform: rotate(90deg); width: 67px; }
.cc-orient-content p { color: #fff; font-size: 15px; line-height: 1.5; margin: 20px auto 0; padding: 0 24px; }
@keyframes orient-rotation {
  10%, 100% { transform: rotate(90deg); }
  50%, 60% { transform: rotate(0deg); }
  90% { transform: rotate(90deg); }
}

@media (max-width: 991px) and (min-aspect-ratio: 12/7) {
  .cc-orient-layer { display: block; }
}

.cc-header {
  align-items: center;
  background: #ffa800 url('../img/coc/cn_new/images/pc/header/header_bg.webp') no-repeat center bottom 6px / 2500px 84px;
  display: flex;
  height: 84px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}
.cc-logo { display: block; height: 78px; margin-left: max(26px, calc((100vw - 1920px) / 2 + 42px)); width: 190px; }
.cc-logo img { height: 100%; object-fit: contain; width: 100%; }
.cc-nav { align-items: center; display: flex; gap: 60px; height: 84px; margin-left: 64px; margin-right: auto; }
.cc-nav a { align-items: center; display: flex; height: 84px; justify-content: center; position: relative; transition: transform .2s ease; }
.cc-nav a img { display: block; height: 31px; object-fit: contain; opacity: 0; width: auto; }
.cc-nav a:not(.active) img:first-child { opacity: 1; }
.cc-nav a img:nth-child(2) { height: 42px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.cc-nav a.active img:nth-child(2) { opacity: 1; }
.cc-nav a:not(.active):hover { transform: scale(1.1); }
.cc-nav a.active:hover { transform: none; }

.cc-social, .cc-social-open { position: fixed; right: 0; top: 50%; z-index: 90; }
.cc-social { background: url('../img/coc/en_new/en/images/pc/consult/consult_bg.webp') no-repeat center / contain; height: 531px; transform: translateY(-50%); transition: transform .3s ease; width: 111px; }
.cc-social.is-hidden { transform: translate(100%, -50%); }
.cc-social-link { background-position: center; background-repeat: no-repeat; background-size: 40px 40px; display: block; height: 60px; position: absolute; right: 0; width: 60px; }
.cc-social-link.facebook { background-image: url('../img/coc/en_new/en/images/pc/consult/facebook.webp'); top: 40px; }
.cc-social-link.facebook:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/facebook_active.webp'); }
.cc-social-link.twitter { background-image: url('../img/coc/en_new/en/images/pc/consult/twitter.png'); top: 104px; }
.cc-social-link.twitter:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/twitter_active.png'); }
.cc-social-link.instagram { background-image: url('../img/coc/en_new/en/images/pc/consult/ins.webp'); top: 170px; }
.cc-social-link.instagram:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/ins_active.webp'); }
.cc-social-link.youtube { background-image: url('../img/coc/en_new/en/images/pc/consult/youtube.webp'); top: 232px; }
.cc-social-link.youtube:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/youtube_active.webp'); }
.cc-social-link.reddit { background-image: url('../img/coc/en_new/en/images/pc/consult/reddit.webp'); top: 296px; }
.cc-social-link.reddit:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/reddit_active.webp'); }
.cc-social-link.discord { background-image: url('../img/coc/en_new/en/images/pc/consult/discord.webp'); background-size: 40px 46px; top: 364px; }
.cc-social-link.discord:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/discord_active.webp'); }
.cc-social-link.tiktok { background-image: url('../img/coc/en_new/en/images/pc/consult/tiktok.webp'); top: 428px; }
.cc-social-link.tiktok:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/tiktok_active.webp'); }
.cc-social-close { background: url('../img/coc/en_new/en/images/pc/consult/arrow.webp') no-repeat 20px center / 20px 23px; border: 0; cursor: pointer; height: 100px; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; }
.cc-social-close:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/arrow_active.webp'); }
.cc-social-open { background: url('../img/coc/en_new/en/images/pc/consult/consult_close.webp') no-repeat center / contain; border: 0; cursor: pointer; height: 144px; opacity: 0; pointer-events: none; transform: translate(100%, -50%); transition: transform .3s ease, opacity .2s ease; width: 66px; }
.cc-social-open:hover { background-image: url('../img/coc/en_new/en/images/pc/consult/consult_close_active.webp'); }
.cc-social-open.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%); }

.cc-page-mask { color: #5bd3ee; contain: strict; height: 0; left: 50%; pointer-events: none; position: fixed; top: 50%; transform: translate3d(-50%, -50%, 0); width: 0; will-change: width, height, opacity; z-index: 999; }
.cc-page-mask[hidden] { display: none; }
.cc-page-mask svg { display: block; height: 100%; width: 100%; }

.cc-screen { height: 1080px; overflow: hidden; position: relative; }
.cc-home { background: #bfe9e7; }
.cc-home-video { height: 1080px; left: 50%; object-fit: cover; position: absolute; top: 0; transform: translateX(-50%); width: max(100%, 2500px); }
.cc-slogan { aspect-ratio: 628 / 261; background: url('../img/coc/en_new/en/images/pc/home/slogan.gif') no-repeat center / 100% auto; bottom: 140px; left: 50%; position: absolute; transform: translateX(-50%); width: 912px; z-index: 2; }
.cc-download { aspect-ratio: 363 / 152; bottom: 38px; left: 50%; position: absolute; transform: translateX(-50%); width: 363px; z-index: 3; }
.cc-download-art { display: block; height: 100%; width: 100%; }
.cc-download a { border-radius: 8px; display: block; height: 36%; left: 5%; position: absolute; transition: background-color .2s, transform .2s; width: 52%; }
.cc-download a:hover { background: rgb(255 255 255 / 12%); transform: scale(1.02); }
.cc-download-google { top: 10%; }
.cc-download-ios { bottom: 10%; }

.cc-roles { background: url('../img/coc/cn_new/images/pc/home/roles/section_roles_bg.webp') no-repeat center / cover; }
.cc-role-section-title { display: none; }
.cc-role-info { left: calc(50% - 884px); position: absolute; top: 99px; width: 520px; }
.cc-role-name { height: 181px; max-width: 100%; object-fit: contain; object-position: left center; }
.cc-role-desc { color: #6b3f00; font-size: 24px; font-weight: 500; line-height: 36px; margin-left: 72px; margin-top: 6px; width: 446px; }
.cc-role-sub { align-items: center; display: flex; gap: 56px; position: absolute; right: calc(50% - 832px); top: 151px; }
.cc-role-sub button { background: none; border: 0; cursor: pointer; height: 121px; transition: .25s; width: 118px; }
.cc-role-sub button[hidden] { display: none; }
.cc-role-sub button.active { transform: scale(1.29); }
.cc-role-sub img { height: 100%; object-fit: contain; width: 100%; }
.cc-role-center { background: url('../img/coc/cn_new/images/pc/home/roles/role_center_bg.webp') no-repeat center / contain; height: 625px; left: calc(50% - 274px); pointer-events: none; position: absolute; top: 252px; width: 609px; z-index: 11; }
.cc-role-center img { max-height: 100%; max-width: 100%; object-fit: contain; position: absolute; }
.cc-role-center.from-left { animation: role-from-left .2s ease-out; }
.cc-role-center.from-right { animation: role-from-right .2s ease-out; }
@keyframes role-from-left { from { margin-left: -300px; } }
@keyframes role-from-right { from { margin-left: 300px; } }
.cc-role-list { height: 226px; left: calc(50% - 840px); position: absolute; top: 591px; width: 1689px; z-index: 10; }
.cc-role-list button { background: none; border: 0; cursor: pointer; height: 226px; position: absolute; top: 0; transition: .3s; width: 264px; }
.cc-role-list button:active { transform: scale(.9); }
.cc-role-list button:nth-child(1) { left: 0; }
.cc-role-list button:nth-child(2) { left: 241px; }
.cc-role-list button:nth-child(3) { left: 1185px; }
.cc-role-list button:nth-child(4) { left: 1425px; }
.cc-role-list img { height: 100%; object-fit: contain; width: 100%; }
.cc-role-mobile-nav { display: none; }

.cc-game { background: url('../img/coc/cn_new/images/pc/game/game_bg.webp') no-repeat center / cover; }
.cc-game-carousel { height: 820px; left: 50%; position: absolute; top: 168px; transform: translateX(-50%); width: min(1600px, 100%); }
.cc-game-track { cursor: grab; height: 707px; left: 50%; position: absolute; touch-action: pan-y; transform: translateX(-50%); user-select: none; width: 1317px; }
.cc-game-track.dragging { cursor: grabbing; }
.cc-game-track.dragging article { transition: none; }
.cc-game-track article { background: url('../img/coc/cn_new/images/pc/game/game_ground_border.webp') no-repeat center / cover; height: 707px; left: 50%; opacity: 0; padding: 33px 14px 7px; pointer-events: none; position: absolute; top: 0; transform: translateX(-50%) scale(.8); transition: .35s; width: 392px; }
.cc-game-track article img { border-radius: 37px; height: 660px; object-fit: cover; width: 364px; }
.cc-game-track article.active { opacity: 1; transform: translateX(calc(-50% + var(--drag-x, 0px))) scale(1); z-index: 3; }
.cc-game-track article.prev { opacity: 1; transform: translateX(calc(-50% - 430px + var(--drag-x, 0px))) translateY(9px) rotate(-5deg) scale(.85); z-index: 2; }
.cc-game-track article.next { opacity: 1; transform: translateX(calc(-50% + 430px + var(--drag-x, 0px))) translateY(9px) rotate(5deg) scale(.85); z-index: 2; }
.cc-game-track article.prev::after, .cc-game-track article.next::after { background: rgb(0 0 0 / 30%); border-radius: 38px; content: ''; inset: 40px 16px 14px; position: absolute; }
.cc-game-arrow { border: 0; cursor: pointer; height: 86px; position: absolute; top: 310px; width: 81px; z-index: 9; }
.cc-game-arrow.prev { background: url('../img/coc/cn_new/images/pc/game/left.webp') no-repeat center / contain; left: 25px; }
.cc-game-arrow.next { background: url('../img/coc/cn_new/images/pc/game/right.webp') no-repeat center / contain; right: 25px; }
.cc-game-arrow:active { transform: scale(.85); }
.cc-dots { bottom: 20px; display: flex; gap: 28px; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); }
.cc-dots button { background: #fff; border: 0; border-radius: 50%; cursor: pointer; height: 16px; width: 16px; }
.cc-dots button.active { background: url('../img/coc/cn_new/images/pc/game/active.webp') no-repeat center / contain; border-radius: 0; height: 31px; margin-top: -8px; width: 30px; }

.footer { align-items: center; background: #000; display: flex; flex-direction: column; flex-wrap: wrap; gap: 1.0417vw; justify-content: center; padding: 1.0417vw 0; }
.footer .logo { width: 10.4167vw; }
.footer .footer-logos { align-items: center; display: flex; gap: 24px; justify-content: center; width: auto; }
.footer .footer-gamota-logo { width: 200px; }
.footer .footer-lilith-logo { flex: 0 0 auto; height: 49px; width: 52px; }
.footer .logo img, .footer .icon18 img { max-width: 100%; }
.footer .copyright { color: #fff; font-size: .6771vw; line-height: 1.5; max-width: 52.0833vw; text-align: center; }
.footer .copyright a { color: #fff; text-decoration: none; }
.footer .icon18 { width: 5.2083vw; }

/* Desktop one-page mode: the three 1920x1080 artboards share one viewport. */
@media (min-width: 992px) {
  html.cc-desktop-onepage,
  html.cc-desktop-onepage body { height: 100%; overflow: hidden; }
  .cc-desktop-onepage body { overscroll-behavior: none; }
  .cc-desktop-onepage .cc-clone,
  .cc-desktop-onepage .cc-clone main { height: 100vh; overflow: hidden; }
  .cc-desktop-onepage .cc-clone main { transform: translateY(0); transition: transform .4s ease; }
  .cc-desktop-onepage.cc-footer-visible .cc-clone main { transform: translateY(calc(-1 * var(--cc-footer-offset, 0px))); }
  .cc-desktop-onepage .cc-screen {
    height: 1080px;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--cc-page-scale, 1));
    transform-origin: center;
    visibility: hidden;
    width: 2500px;
  }
  .cc-desktop-onepage .cc-screen.is-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 2;
  }
  .cc-desktop-onepage .cc-header {
    background-position: center bottom var(--cc-header-bg-bottom, 6px);
    background-size: var(--cc-header-bg-width, 2500px) var(--cc-header-height, 84px);
    height: var(--cc-header-height, 84px);
  }
  .cc-desktop-onepage .cc-logo {
    height: var(--cc-logo-height, 78px);
    margin-left: max(var(--cc-logo-margin-min, 26px), calc(50vw - var(--cc-design-half, 960px) + var(--cc-logo-offset, 42px)));
    width: var(--cc-logo-width, 190px);
  }
  .cc-desktop-onepage .cc-nav {
    gap: var(--cc-nav-gap, 60px);
    height: var(--cc-header-height, 84px);
    margin-left: var(--cc-nav-margin, 64px);
  }
  .cc-desktop-onepage .cc-nav a { height: var(--cc-header-height, 84px); }
  .cc-desktop-onepage .cc-nav a img { height: var(--cc-nav-image-height, 31px); }
  .cc-desktop-onepage .cc-nav a img:nth-child(2) { height: var(--cc-nav-active-height, 42px); }
  .cc-desktop-onepage .cc-social {
    transform: translateY(-50%) scale(var(--cc-page-scale, 1));
    transform-origin: right center;
  }
  .cc-desktop-onepage .cc-social.is-hidden { transform: translate(100%, -50%) scale(var(--cc-page-scale, 1)); }
  .cc-desktop-onepage .cc-social-open {
    transform: translate(100%, -50%) scale(var(--cc-page-scale, 1));
    transform-origin: right center;
  }
  .cc-desktop-onepage .cc-social-open.is-visible { transform: translateY(-50%) scale(var(--cc-page-scale, 1)); }
  .cc-desktop-onepage .footer {
    bottom: 0;
    left: 0;
    position: fixed;
    transform: translateY(100%);
    transition: transform .4s ease;
    width: 100%;
    z-index: 120;
  }
  .cc-desktop-onepage.cc-footer-visible .footer { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cc-screen, .footer { transition-duration: .01ms !important; }
  .cc-orient-icon { animation: none; transform: rotate(0deg); }
}

@media (max-width: 991px) {
  .cc-social, .cc-social-open { display: none; }
  .cc-header { background: #ffa800 url('../img/coc/cn_new/images/mobile/home/header/m_header_bg.webp') no-repeat center bottom / auto 100%; height: 68px; }
  .cc-logo { background: url('../img/coc/en_new/en/images/mobile/home/header/m_header_logo.webp') no-repeat left center / contain; height: 64px; margin-left: 10px; width: 132px; }
  .cc-logo img { display: none; }
  .cc-nav { gap: 0; height: 68px; margin-left: auto; }
  .cc-nav a { height: 68px; margin: 0 4px; width: 66px; }
  .cc-nav a img { height: auto; max-height: 28px; max-width: 100%; }
  .cc-nav a img:nth-child(2) { height: auto; max-height: 34px; max-width: 78px; }
  .cc-screen { height: 177.8667vw; min-height: 667px; }
  .cc-home { background: url('../img/coc/cn_new/images/mobile/cover.webp') no-repeat center / cover; }
  .cc-home-video { display: none; }
  .cc-slogan { bottom: 24vw; width: 93vw; }
  .cc-download { bottom: 4vw; width: 82vw; }

  .cc-roles { background: url('../img/coc/cn_new/images/mobile/home/section2.webp') no-repeat center / cover; }
  .cc-role-section-title { display: block; height: 21.47vw; left: 50%; position: absolute; top: 15.47vw; transform: translateX(-50%); width: 57.47vw; z-index: 5; }
  .cc-role-section-title img { left: 50%; position: absolute; transform: translateX(-50%); }
  .cc-role-title-top { mix-blend-mode: multiply; top: 0; width: 12.6vw; }
  .cc-role-title-text { top: 6.4vw; width: 50.67vw; z-index: 2; }
  .cc-role-title-bg { mix-blend-mode: multiply; top: 12.73vw; width: 57.47vw; }
  .cc-role-center { height: 60.53vw; left: 11.2vw; top: 43.73vw; width: 58.93vw; }
  .cc-role-center img { height: 40vw !important; left: 50% !important; max-width: 125% !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; }
  .cc-role-sub { flex-direction: column; gap: 4.13vw; right: 11.47vw; top: 47vw; }
  .cc-role-sub button { height: 14.53vw; width: 14.13vw; }
  .cc-role-info { left: 7vw; top: 109vw; width: 86vw; }
  .cc-role-name { display: block; height: 16.4vw; margin: 0 auto; max-width: 100%; object-position: center; }
  .cc-role-desc { display: block; font-size: 3.2vw; line-height: 4.8vw; margin: 3vw auto 0; width: 86.13vw; }
  .cc-role-list { display: none; }
  .cc-role-mobile-nav { align-items: center; bottom: 20.47vw; display: flex; justify-content: space-between; left: 14vw; position: absolute; right: 14vw; }
  .cc-role-arrow { border: 0; height: 11.47vw; width: 11.47vw; }
  .cc-role-arrow.prev { background: url('../img/coc/cn_new/images/mobile/home/role/left.webp') no-repeat center / contain; }
  .cc-role-arrow.next { background: url('../img/coc/cn_new/images/mobile/home/role/right.webp') no-repeat center / contain; }
  .cc-role-dots { align-items: center; display: flex; justify-content: space-around; width: 44.2vw; }
  .cc-role-dots i { background: #fff; border-radius: 50%; display: block; height: 3.07vw; width: 3.07vw; }
  .cc-role-dots i.active { background: url('../img/coc/cn_new/images/mobile/home/game/active.webp') no-repeat center / contain; border-radius: 0; height: 6.13vw; width: 5.87vw; }

  .cc-game { background: url('../img/coc/cn_new/images/mobile/home/section3.webp') no-repeat center / cover; }
  .cc-game-carousel { height: 150vw; top: 20vw; width: 100%; }
  .cc-game-track { height: 130vw; width: 100%; }
  .cc-game-track article { height: 120vw; padding: 5.5vw 2vw 1vw; width: 66.5vw; }
  .cc-game-track article img { border-radius: 6vw; height: 112vw; width: 62.5vw; }
  .cc-game-track article.prev { transform: translateX(calc(-50% - 49vw + var(--drag-x, 0px))) translateY(4vw) rotate(-5deg) scale(.85); }
  .cc-game-track article.next { transform: translateX(calc(-50% + 49vw + var(--drag-x, 0px))) translateY(4vw) rotate(5deg) scale(.85); }
  .cc-game-track article.prev::after, .cc-game-track article.next::after { border-radius: 6vw; inset: 7vw 2.5vw 2vw; }
  .cc-game-arrow { height: 13vw; top: 56vw; width: 12vw; }
  .cc-game-arrow.prev { left: 2vw; }
  .cc-game-arrow.next { right: 2vw; }
  .cc-dots { bottom: 0; gap: 5vw; }
  .cc-dots button { height: 2.6vw; width: 2.6vw; }
  .cc-dots button.active { height: 5vw; margin-top: -1.2vw; width: 5vw; }
  .footer { gap: 2.6667vw; padding: 4vw 0; }
  .footer .logo { width: 29.3333vw; }
  .footer .footer-logos { gap: 4vw; width: auto; }
  .footer .footer-gamota-logo { width: 29.3333vw; }
  .footer .footer-lilith-logo { height: auto; width: 10vw; }
  .footer .copyright { font-size: 3vw; max-width: 93.3333vw; }
  .footer .icon18 { width: 16.3333vw; }
}