@font-face { font-family: 'LOTTERIACHAB'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIACHAB.woff2') format('woff2'); font-weight: normal; font-style: normal;} body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; } a { text-decoration: none; display: block; color: #fff; } li { list-style: none; } img { vertical-align: top; } * { box-sizing: border-box; } body { font-family: "Roboto", "Arial", sans-serif; background-color: black; height: 7000px; } #wrap, .maincontain, .title, .btn-wrap, .pagination-group-slide .swiper-pagination, #modal .modal-bg, ul, ul2, ul3 { display: flex; justify-content: center; align-items: center; } #wrap { position: relative; width: 100%; min-width: 1900px; background-position: center; background-repeat: no-repeat; flex-direction: column; } header { position: fixed; right: 50px; top: 60px; z-index: 10; } #top_button { position: fixed; bottom: 60px; right: 100px; z-index: 10; opacity: 0; cursor: pointer; } .logo { position: absolute; left: 70px; top: 75px; margin-top: 10px; z-index: 5; } #hide { position: absolute; z-index: 20; opacity: 1; transition: opacity 3s ease; } .mobile { display: none; position: absolute; left: 0; top: 0; z-index: 5; width: 100%; } .special { margin-left: -6px; display: flex; justify-content: center;} .play { padding-top: 12px; } .home { padding-top: 12px; margin-right: 20px; } .oneday { clear: both; margin-top: 60px; text-align: right; } .left { float: left; } .right { float: right; } .maincontain { width: 100%; margin-top: 601px; } .title { z-index: 8; margin-left: -18px; max-height: 1900px; position: absolute; flex-direction: row; } .item { margin-top: 522px; z-index: 7; text-align: center; } button:focus, button:active { outline: none; } .modal { position: absolute; border-radius: 3px; opacity: 0; width: 40px; height: 40px;} .modal2 { position: absolute; border-radius: 3px; opacity: 0; width: 65px; height: 65px;} .tip { width: 27px; height: 29px; margin-top: 3403px; margin-left: -651px; position: absolute; left: calc(50%-100px); top: 30%; z-index: 15; background-image: url(../img/det.webp); pointer-events: all; } #modal_id:hover { width: 399px; height: 569px; opacity: 1; box-shadow: 0 50px 80px rgba(255, 255, 255, 0.15), 0 15px 100px rgba(255, 255, 255, 0.15), 0 5px 100px rgba(255, 254, 254, 0.1); transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px); transition: 0.3s ease; background-image: url(../img/tip.webp); } a { text-decoration: none; color: #666; } .btn-wrap { position: absolute; z-index: 10; margin-top: 3322px; cursor: pointer; } .btn-wrap > a { line-height: 23px; cursor: pointer; } #modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); z-index: 15; } #modal .modal-bg { background: rgba(0,0,0,0.7); height: 100%; } #modal .modal-bg .modal-cont { position: relative; max-width: 1185px; display: inline-block; } #modal .modal-bg .modal-cont h2 { font-size: 30px; } #modal .modal-bg .modal-cont p { font-size: 18px; } #modal .modal-bg .modal-cont .close { position: absolute; top: 0; right: 0; margin: 49px -1px; padding: 9px; border-radius: 50%; } #modal .modal-bg .modal-cont .close svg { width: 24px; fill: #fff; vertical-align: top; cursor: pointer; } #modal.two { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards; } #modal.two .modal-bg .modal-cont { margin-top: -67px; transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.85, 0.44, 1) forwards; } #modal.two.out { transform: scale(1); animation: unfoldOut 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards; } #modal.two.out .modal-bg .modal-cont { transform: scale(0); animation: zoomOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards; } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } @keyframes unfoldOut { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(0.005) scaleX(0); } } @keyframes zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } .swiper { width: 1500px; max-width: 100%; } .pagination-group-slide .swiper-pagination { flex-wrap: wrap; position: static; margin: 50px auto; } .pagination-group-slide .swiper-pagination-bullet { position: relative; width: 146px; height: 60px; border-radius: 0; background: center center no-repeat; opacity: 1; outline: none; } .pagination-group-slide .swiper-pagination-bullet-active::after { content: ''; display: block; position: absolute; top: -5px; left: 0; right: 0; width: 100%; height: 70px; margin: 0 auto; background: url(../img/m_on.webp) center center no-repeat; background-size: contain; } .pagination-group-slide .swiper-pagination-bullet:nth-child(1) { background-image: url(../img/m1_off.webp); } .pagination-group-slide .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(1) { background-image: url(../img/m1_on.webp); } .pagination-group-slide .swiper-pagination-bullet:nth-child(2) { background-image: url(../img/m2_off.webp); } .pagination-group-slide .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(2) { background-image: url(../img/m2_on.webp); } .nav-group-slide2 .swiper-button-prev, .nav-group-slide2 .swiper-button-next { width: 24px; height: 39px; background: center center no-repeat; background-size: contain; } .nav-group-slide2 .swiper-button-prev { left: 10px; right: auto; background-image: url(../img/lbtn.webp); } .nav-group-slide2 .swiper-button-next { left: auto; right: 10px; background-image: url(../img/rbtn.webp); } .nav-group-slide2 .swiper-button-prev::after, .nav-group-slide2 .swiper-button-next::after { display: none; } .section2 .swiper-slide img { display: block; width: 100%; margin: 0 auto; } .pagination-group2-slide { display: block; } .button { --offset: 10px; --border-size: 1.8px; display: block; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ffc107; color: #ffc107; text-transform: uppercase; outline: none; cursor: pointer; font-weight: bold; border: 0; letter-spacing: 0.25em; border-radius: 0; padding: 0.5em 4em; box-shadow: inset 0 0 0 var(--border-size) currentcolor; transition: background 0.3s ease; } a2 { letter-spacing: 0.25em; font-weight: 600; color: rgb(0, 0, 0); } .button:hover { background: #ffffff; color: white; } .button__horizontal, .button__vertical { position: absolute; top: var(--horizontal-offset, 0); right: var(--vertical-offset, 0); bottom: var(--horizontal-offset, 0); left: var(--vertical-offset, 0); transition: transform 0.5s ease; will-change: transform; } .button__horizontal::before, .button__vertical::before { content: ""; position: absolute; border: inherit; } .button__horizontal { --vertical-offset: calc(var(--offset) * -1); border-top: var(--border-size) solid currentcolor; border-bottom: var(--border-size) solid currentcolor; } .button__horizontal::before { top: calc(var(--vertical-offset) - var(--border-size)); bottom: calc(var(--vertical-offset) - var(--border-size)); left: calc(var(--vertical-offset) * -1); right: calc(var(--vertical-offset) * -1); } .button:hover .button__horizontal { transform: scaleX(0); } .button__vertical { --horizontal-offset: calc(var(--offset) * -1); border-left: var(--border-size) solid currentcolor; border-right: var(--border-size) solid currentcolor; } .button__vertical::before { top: calc(var(--horizontal-offset) * -1); bottom: calc(var(--horizontal-offset) * -1); left: calc(var(--horizontal-offset) - var(--border-size)); right: calc(var(--horizontal-offset) - var(--border-size)); } .button:hover .button__vertical { transform: scaleY(0); } .PC { width: 100%; display: flex; justify-content: center; } p { color: #ffffff; font-weight: 700; font-size: 12px; height: 80px; display: flex; justify-content: center; align-items: center;} [id^=ul]{ position: absolute; display: flex; justify-content: center; } ul {margin-top: 217px;} #ul2 {margin-top: 422px;} #ul3 {margin-top: 632px;} #ul4 {margin-top: 836px;} #ul5 {margin-top: 1453px;} #ul6 {margin-top: 1619px;} #ul6-1 {margin-top: 1785px;} #ul6-2 {margin-top: 1951px;} #ul7 {margin-top: 2499px;} #ul8 {margin-top: 2665px;} #ul9-1 {margin-top: 3133px;} #ul9 {margin-top: 3299px;} #ul10 {margin-top: 3465px;} #ul11 {margin-top: 3631px;} #ul12 {margin-top: 4276px;} #ul13 {margin-top: 4442px;} #ul14 {margin-top: 4869px;} #ul15 {margin-top: 5035px;} #ul16 {margin-top: 5201px;} li {float: right; width: 145px; margin-top: -14px;} [class^=item]:not(.item,.item76, .item77, .item78, .item79, .item80, .item81, .item82, .item83, .item84, .item85, .item86, .item87, .item88, .item89, .item90, .item91, .item92, .item93, .item93, .item96, .item97, .item98, .item99, .item100, .item101, .item102, .item103, .item104, .item105, .item106, .item107, .item108, .item109, .item110) { object-fit: none; width: 74px; height: 74px;} .item76, .item77, .item78, .item79, .item80, .item81, .item82, .item83, .item84, .item85, .item86, .item87, .item88, .item89, .item90, .item91, .item92, .item93, .item96, .item97, .item98, .item99, .item100, .item101, .item102, .item103, .item104, .item105, .item106, .item107, .item108, .item109, .item110 { object-fit: none; width: 68px;height: 68px; margin-left: 0px;} .item1 { object-position: -226px -151px; } .item2 { object-position: -151px -1px; } .item3 { object-position: -226px -1px; } .item4 { object-position: -301px -1px; } .item5 { object-position: -1px -1px; } .item6 { object-position: -76px -1px; } .item7 { object-position: -76px -1px; } .item8 { object-position: -151px -376px; } .item9 { object-position: -301px -301px; } .item10 { object-position: -1px -376px; } .item11 { object-position: -76px -376px; } .item12 { object-position: -376px -301px; } .item13 { object-position: -601px -301px; } .item14 { object-position: -451px -301px; } .item15 { object-position: -826px -301px; } .item16 { object-position: -451px -301px; } .item17 { object-position: -526px -301px; } .item18 { object-position: -676px -301px; } .item19 { object-position: -751px -301px; } .item20 { object-position: -751px -226px; } .item21 { object-position: -826px -226px; } .item22 { object-position: -601px -226px; } .item23 { object-position: -676px -226px; } .item24 { object-position: -151px -301px; } .item25 {object-position: -451px -1px;} .item26 {object-position: -226px -376px;} .item27 {object-position: -301px -376px;} .item28 {object-position: -376px -376px;} .item29 {object-position: -376px -1px;} .item30 {object-position: -526px -376px;} .item31 {object-position: -601px -376px;} .item32 {object-position: -676px -451px;} .item33 {object-position: -151px -226px;} .item34 {object-position: -76px -301px;} .item35 { object-position: -1px -76px;} .item36 { object-position: -76px -76px;} .item37 { object-position: -151px -76px;} .item38 { object-position: -226px -76px;} .item39 { object-position: -301px -76px;} .item40 { object-position: -376px -76px;} .item41 { object-position: -451px -76px;} .item42 { object-position: -526px -76px;} .item43 { object-position: -601px -76px;} .item44 { object-position: -676px -76px;} .item45 { object-position: -151px -151px;} .item46 { object-position: -826px -1px;} .item47 { object-position: -751px -76px;} .item48 { object-position: -826px -76px;} .item49 { object-position: -1px -151px;} .item50 { object-position: -76px -151px;} .item51 { object-position: -601px -1px;} .item52 { object-position: -751px -1px;} .item53 { object-position: -76px -451px;} .item54 { object-position: -676px -1px;} .item55 { object-position: -526px -1px;} .item56 { object-position: -826px -151px;} .item57 { object-position: -301px -151px;} .item58 { object-position: -376px -151px;} .item59 { object-position: -451px -151px;} .item60 { object-position: -601px -151px;} .item61 { object-position: -676px -151px;} .item62 { object-position: -151px -451px;} .item63 { object-position: -751px -151px;} .item64 { object-position: -451px -376px;} .item65 { object-position: -676px -376px;} .item66 { object-position: -826px -376px;} .item67 { object-position: -751px -376px;} .item68 { object-position: -76px -226px;} .item69 { object-position: -1px -151px;} .item70 { object-position: -1px -301px;} .item71 { object-position: -226px -301px;} .item72 { object-position: -676px -226px;} .item73 { object-position: -751px -226px;} .item74 { object-position: -826px -226px;} .item75 { object-position: -751px -451px;} .item76 { object-position: -229px -451px;} .item77 { object-position: -303px -452px;} .item78 { object-position: -378px -452px;} .item79 { object-position: -455px -454px;} .item80 { object-position: -529px -451px;} .item81 { object-position: -601px -451px;} .item82 { object-position: -826px -451px;} .item83 { object-position: -1px -526px;} .item84 { object-position: -76px -526px;} .item85 { object-position: -151px -526px;} .item86 { object-position: -226px -526px;} .item87 { object-position: -303px -526px;} .item88 { object-position: -377px -526px;} .item89 { object-position: -453px -526px;} .item90 { object-position: -526px -526px;} .item91 { object-position: -605px -526px;} .item92 { object-position: -826px -451px;} .item93 { object-position: -679px -526px;} .item94 { object-position: -826px -526px;} .item95 { object-position: -376px -226px;} .item96 {object-position: -1px -601px;} .item97 {object-position: -76px -601px;} .item98 {object-position: -751px -526px;} .item99 {object-position: -151px -601px;} .item100 {object-position: -228px -603px;} .item101 {object-position: -301px -601px;} .item102 {object-position: -376px -601px;} .item103 {object-position: -451px -601px;} .item104 {object-position: -526px -601px;} .item105 {object-position: -601px -601px;} .item106 {object-position: -679px -603px;} .item107 {object-position: -754px -603px;} .item108 {object-position: -828px -603px;} .item109 {object-position: -5px -679px;} .item110 {object-position: -78px -679px;} @media screen and (max-width: 700px) { body, html { height: 100%; position: relative; width: 100%; } .home { float: right; margin-top: 20px; margin-right: 0; } .mobile img { width: 100%; } .mobile { display: block; text-align: center; width: 100%; justify-content: center; } header { right: 10px; top: -10px; } #hide, #wrap, .play, .flipbook-viewport { display: none; } .PC {display: none;} } .nav-group-slide .swiper-button-prev { left: -120px; width: 65px; height: 104px; margin-top: -5px; background: url(../img/lbtn.webp) no-repeat; } .nav-group-slide .swiper-button-prev::after, .nav-group-slide .swiper-button-next::after { display: none; } .nav-group-slide .swiper-button-next { right: -120px; width: 65px; height: 104px; margin-top: -5px; background: url(../img/rbtn.webp) no-repeat; } .section2 .swiper-slide img { display: block; width: 100%; margin: 0 auto; } .ringbox {z-index:20; display: flex; justify-content: center;} #Belith_sc1_id:hover, #Belith_sc1_nohair_id:hover, #Belith_sc2_nohair_id:hover, #Belith_sc3_id:hover, #Belith_sc3_nohair_id:hover, #Dolores_sc1_id:hover, #Dolores_sc1_nohair_id:hover, #Dolores_sc1_hat_id:hover, #Dolores_sc2_nohair_id:hover, #Bridgette_sc1_id:hover, #Bridgette_sc1_nohair_id:hover, #Bridgette_sc2_nohair_id:hover, #Rosie_sc1_nohair_id:hover, #Rosie_sc1_id:hover, #Rosie_sc2_nohair_id:hover, #Meriel_sc1_id:hover, #Meriel_sc1_nohair_id:hover, #Meriel_sc2_nohair_id:hover, #Baselrane_sc1_id:hover, #Baselrane_sc1_nohair_id:hover, #Baselrane_sc2_nohair_id:hover, #Deluca_sc1_id:hover, #Deluca_sc1_nohair_id:hover, #CodeV_sc1_id:hover, #CodeV_sc1_nohair_id:hover, #Kei_sc1_id:hover, #Kei_sc1_nohair_id:hover, #Kei_sc1_hat_id:hover, #Giltine_sc1_id:hover, #Giltine_sc1_nohair_id:hover, #Laval_sc1_id:hover, #Laval_sc1_nohair_id:hover{ margin-top: 2px; width: 449px; height: 601px; opacity: 1; transition: 0.3s ease; transform: perspective(100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1) translate3d(0px, 0px, 0px); } #Belith_sc1_id:hover {background-image: url(../img/Belith_sc1_hair.webp); z-index: 1;} #Belith_sc1_nohair_id:hover {background-image: url(../img/Belith_sc1_no_hair.webp); z-index: 2;} #Belith_sc2_nohair_id:hover {background-image: url(../img/Belith_sc2_no_hair.webp); z-index: 3;} #Belith_sc3_id:hover {background-image: url(../img/Belith_sc3_hair.webp); z-index: 4;} #Belith_sc3_nohair_id:hover {background-image: url(../img/Belith_sc3_no_hair.webp); z-index: 5;} #Dolores_sc1_id:hover {background-image: url(../img/dolores_sc1_hair.webp); z-index: 6;} #Dolores_sc1_nohair_id:hover {background-image: url(../img/dolores_sc1_no_hair.webp); z-index: 7;} #Dolores_sc1_hat_id:hover {background-image: url(../img/dolores_sc1_hat.webp); z-index: 8;} #Dolores_sc2_nohair_id:hover {background-image: url(../img/dolores_sc2_no_hair.webp); z-index: 9;} #Bridgette_sc1_id:hover {background-image: url(../img/Bridgette_sc1_hair.webp); z-index: 10;} #Bridgette_sc1_nohair_id:hover {background-image: url(../img/Bridgette_sc1_no_hair.webp); z-index: 11;} #Bridgette_sc2_nohair_id:hover {background-image: url(../img/Bridgette_sc2_no_hair.webp); z-index: 12;} #Rosie_sc1_id:hover {background-image: url(../img/Rosie_sc1_hair.webp); z-index: 13;} #Rosie_sc1_nohair_id:hover {background-image: url(../img/Rosie_sc1_no_hair.webp); z-index: 14;} #Rosie_sc2_nohair_id:hover {background-image: url(../img/Rosie_sc2_no_hair.webp); z-index: 15;} #Meriel_sc1_id:hover {background-image: url(../img/Meriel_sc1_hair.webp); z-index: 16;} #Meriel_sc1_nohair_id:hover {background-image: url(../img/Meriel_sc1_no_hair.webp); z-index: 17;} #Meriel_sc2_nohair_id:hover {background-image: url(../img/Meriel_sc2_no_hair.webp); z-index: 18;} #Baselrane_sc1_id:hover {background-image: url(../img/Baselrane_sc1_hair.webp); z-index: 19;} #Baselrane_sc1_nohair_id:hover {background-image: url(../img/Baselrane_sc1_no_hair.webp); z-index: 20;} #Baselrane_sc2_nohair_id:hover {background-image: url(../img/Baselrane_sc2_no_hair.webp); z-index: 21;} #Deluca_sc1_id:hover {background-image: url(../img/Deluca_sc1_hair.webp); z-index: 22;} #Deluca_sc1_nohair_id:hover {background-image: url(../img/Deluca_sc1_no_hair.webp); z-index: 23;} #CodeV_sc1_id:hover {background-image: url(../img/CodeV_sc1_hair.webp); z-index: 24;} #CodeV_sc1_nohair_id:hover {background-image: url(../img/CodeV_sc1_no_hair.webp); z-index: 25;} #Kei_sc1_id:hover {background-image: url(../img/Kei_sc1_hair.webp); z-index: 26;} #Kei_sc1_nohair_id:hover {background-image: url(../img/Kei_sc1_no_hair.webp); z-index: 27;} #Kei_sc1_hat_id:hover {background-image: url(../img/Kei_sc1_hat.webp); z-index: 28;} #Giltine_sc1_id:hover {background-image: url(../img/Giltine_sc1_hair.webp); z-index: 29;} #Giltine_sc1_nohair_id:hover {background-image: url(../img/Giltine_sc1_no_hair.webp); z-index: 30;} #Laval_sc1_id:hover {background-image: url(../img/Laval_sc1_hair.webp); z-index: 31;} #Laval_sc1_nohair_id:hover {background-image: url(../img/Laval_sc1_no_hair.webp); z-index: 32;} @property --angle { syntax: '<angle>'; initial-value: 90deg; inherits: true; } @property --gradX { syntax: '<percentage>'; initial-value: 50%; inherits: true; } @property --gradY { syntax: '<percentage>'; initial-value: 0%; inherits: true; } .wrapper { min-width: min(40rem, 100%); } :root { --angle: 0deg; --gradX: 50%; --gradY: 50%; --c1: rgba(255, 200, 100, 0.5); --c2: rgba(168, 239, 255, 0.1); --d: 2s; } .box3 { border: 0.3rem solid; margin-top: -3px; width: 76px; height: 76px; border-image: conic-gradient(from var(--angle), rgba(255, 248, 168, 0.1), #83cdff 0.1turn, #057a97 0.15turn, var(--c2) 0.25turn) 10; cursor: pointer; animation: borderRotate var(--d) ease-in-out infinite forwards; } @keyframes borderRotate { 0% { --angle: 0deg; } 100% { --angle: 360deg; } }