/* html { width: 720px; max-width: 100%; } */ .no-scroll { overflow: hidden; } .dim { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.8; z-index: 4; display: none; } .header { position: fixed; max-width:720px; width:100%; transform: translateY(var(--scroll-position)); z-index: 3; } .header .hamburger { width:50px; height: 46px; position: absolute; left: 30px; top: 30px; background: url(../image/mo/1/hamburger.png)no-repeat; } .menu { position: fixed; left: 0; width:570px; height: 100%; display: flex; flex-direction: column; align-items: center; background: url(../image/mo/1/menu.png)no-repeat; background-size: cover; z-index: 4; display: none; } .menu .logo { width:264px; height: 253px; margin:64px 0 82px 0; background: url(../image/mo/1/menu_logo.png)no-repeat center/contain; } .menu .xbtn { position: absolute; right: -90px; top:30px; } .menu .gnb { position: relative; display: flex; flex-direction: column; gap: 60px; } .menu .gnb li { width:150px; height: 30px; } /* .menu .gnb li.class { height: 49px; } */ .menu .gnb li.class { height: 30px; } .menu .gnb li .main { background: url(../image/mo/1/main.png) no-repeat center; } .menu .gnb li.active .main { background: url(../image/mo/1/mainSelect.png) no-repeat center; } .menu .gnb li .reserv { background: url(../image/mo/1/reserv.png) no-repeat center; } .menu .gnb li.active .reserv { background: url(../image/mo/1/reservSelect.png) no-repeat center; } .menu .gnb li .event { background: url(../image/mo/1/event.png) no-repeat center; } .menu .gnb li.active .event { background: url(../image/mo/1/eventSelect.png) no-repeat center; } .menu .gnb li .character { background: url(../image/mo/1/char.png) no-repeat center; } .menu .gnb li.active .character { background: url(../image/mo/1/charSelect.png) no-repeat center;} .menu .gnb li .worldView { background: url(../image/mo/1/world.png) no-repeat center; } .menu .gnb li.active .worldView { background: url(../image/mo/1/worldSelect.png) no-repeat center;} .menu .gnb li .introduce { background: url(../image/mo/1/intro.png) no-repeat center; } .menu .gnb li .content { background: url(../image/mo/1/content.png) no-repeat center; } .menu .gnb li.active .content { background: url(../image/mo/1/contentSelect.png) no-repeat center;} .menu .gnb li .system { background: url(../image/mo/1/system.png) no-repeat center; } .menu .gnb li.active .system { background: url(../image/mo/1/systemSelect.png) no-repeat center;} .menu .gnb li.active .introduce { background: url(../image/mo/1/introSelect.png) no-repeat center;} .menu .gnb li .media { background: url(../image/mo/1/media.png) no-repeat center; } .menu .gnb li.active .media { background: url(../image/mo/1/mediaSelect.png) no-repeat center;} .menu .gnb a { display: block; width: 100%; height: 100%; font-size: 0; line-height: 0; } .section { position: relative; overflow: hidden; background-size: cover; } .sec01 { height: 1280px; background: url(../image/mo/1/bg.png) no-repeat center/cover; } .sec01 .center { display: flex; justify-items: center ; align-items: center; flex-direction: column; padding-top: 161px; } .sec01 .end { height:100% ; display: flex;justify-content: flex-end; align-items: center; flex-direction: column; } .sec01 .center .logo { width: 338px; height: 350px; } .sec01 .center .logo img { width: 100%; height: 100%; object-fit: contain; } .sec01 .center .playBtn { margin:60px 0 100px 0; } .sec01 .center .install{ display: flex; flex-direction: column; gap: 8px; align-items: center; margin-bottom: 245px;} .sec01 .end .install { display: flex; flex-direction: column; gap: 30px; align-items: center; margin-bottom: 245px;} .sec01 .goTo { position: absolute; bottom: -5px; overflow: hidden; } /* .sec01 .swiper-wrapper { width:720px !important; } */ .sec01 .swiper-wrapper { width:100vw !important; } .sec01 .swiper-wrapper .swiper-slide div img { width: 100%; } .sec01 .swiper-button-next, .sec01 .swiper-button-prev { width:28px;height:51px; top:135px !important; } .sec01 .swiper-button-next svg, .sec01 .swiper-button-prev svg {display: none;} .sec01 .swiper-button-next { right: 35px !important; z-index: 1; background:url(../image/mo/1/next.png) no-repeat 0 0;} .sec01 .swiper-button-prev { left: 35px !important; z-index: 1;background:url(../image/mo/1/prev.png) no-repeat 0 0; } .sec01 .scrollDown { position: absolute; left:50%; bottom: 165px; transform: translateX(-50%); animation: scroll 3s ease-out infinite; } .sec02 { position: relative; height: 1348px; padding: 0 15px; background: url(../image/mo/2/bg.png) no-repeat center/cover; } .sec02 .feather { position: absolute; right: 0px; bottom: 0; width:275px; height: 217px; background: url(../image/mo/2/feather.png)no-repeat; z-index: 1; } .sec02 .title { display: flex; height: 330px; padding:45px 0 0 0; justify-content: center; align-items: center; flex-direction: column; } .sec02 .title .emblem { position: absolute; top:70px; width:100%; height: 210px; background: url(../image/mo/2/emblem.png)no-repeat center 0;background-size:280px 210px } .sec02 .title .rebornReserv { width:505px; height: 85px; background: url(../image/mo/2/reservTit.png) no-repeat center; background-size: contain; } .sec02 .title .invite { width:609px; height: 49px; margin:25px 0 10px 0; background: url(../image/mo/2/line.png)no-repeat; text-align: center; } .sec02 .title .invite p { height: 49px; font-size: 23px; font-weight: 600; line-height: 49px; color: #621900; } .sec02 .title .date p { font-size: 18px; font-weight: 600; color: #621900; letter-spacing: -0.025em;} .sec02 .title .date p span { font-weight: 900; color: #621900; } .sec02 .center { display: flex; justify-content: center; align-items: center; flex-direction: column; } .sec02 .box { position: relative; display: flex; flex-direction: column; align-items: center; width:720px; height: 918px; background: url(../image/mo/2/box.png)no-repeat center center; } .sec02 .box .package { width:720px; height: 407px; } .sec02 .box .bird { position: absolute; left:-3px; top:-130px; width:207px; height: 201px; background: url(../image/mo/2/bird.png)no-repeat; } .sec02 .box .inputArea { position: relative; display: flex; flex-direction: column; gap: 18px; } .sec02 .box .inputArea input { width:512px; height: 57px; padding:0 10px; font-size: 18px; font-weight: 500; } .sec02 .box .inputArea select {height: 57px; font-size: 12px; font-weight: 500; } .sec02 .box .inputArea .apply button { width: 173px; height: 67px; background: url(../image/mo/2/recevie.png)no-repeat } .sec02 .box .inputArea input:disabled { background:#9b9090; } .sec02 .box .inputArea input::placeholder { font-size: 18px; letter-spacing: -0.5px; font-weight: 300; color: #b6b6b6; } .sec02 .box .inputArea input:disabled::placeholder { color:#311a1a; } .sec02 .box .inputArea .apply { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .sec02 .box .inputArea .apply input { width: 104px; text-align: center; } .sec02 .box .inputArea .apply input#phoneNumber {width:218px;} .sec02 .box .inputArea .apply .select-box { background:#ffffff; width:105px; padding:0 5px 0 0; } .sec02 .box .inputArea .apply select { width: 100px; text-align: center; font-size: 15px; padding:0; margin:0; font-weight: 500;color: #b6b6b6;border:none;} .sec02 .box .inputArea .count { position: absolute; right: 35px; top: calc(75%); transform: translateY(-50%); font-size: 18px; font-weight: 500; } .sec02 .box .checkArea { position: relative; display: flex; width: 512px; flex-direction: column; gap:30px; margin:30px 0 30px 0; } .sec02 .box .checkArea label { font-size: 18px; line-height: 18px; letter-spacing: -1px; font-weight: 100; color:#fff; } .sec02 .box .checkArea .checkWrap { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; } .sec02 .box .checkArea .checkWrap input[type="checkbox"] { width: 16px; height: 16px; appearance: none; cursor: pointer; } .sec02 .box .checkArea .checkWrap input[type="checkbox"]::before { content: ""; display: block; width: inherit; height: inherit; border: 1px solid #fff; color: transparent; } .sec02 .box .checkArea .checkWrap input[type=checkbox]:checked::before { background: url(../image/mo/2/checked.png) no-repeat center } .sec02 .box .checkArea .up18, .sec02 .box .checkArea .private, .sec02 .box .checkArea .event { position: relative; display: flex; justify-content: space-between; } .sec02 .box .checkArea .more { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 29px; display: flex; align-items: center; justify-content: center; } .sec02 .box .checkArea .more a { display: inline-block; width: 86px; height: 100%; line-height: 29px; font-size: 16px; text-align: center; font-weight: 100; color:#fff; background: #131313; } .sec02 .box .btnArea { position: relative; margin-top:40px; gap: 29px; z-index: 2; } .sec02 .box .btnArea > div { display: flex; flex-direction: row; justify-content: space-around;} .sec02 .box .btnArea .apply { width: 512px; height: 84px; background: url(../image/mo/2/applyBtn.png) no-repeat; } .sec02 .box .btnArea .google { width:248px; height: 84px; background: url(../image/mo/2/google.png)no-repeat; } .sec02 .box .btnArea .mycard { width:248px; height: 84px; background: url(../image/mo/2/mycard.png)no-repeat; } .sec02 .box .btnArea .apple {width:248px; height: 84px; background: url(../image/mo/2/apple.png)no-repeat; } .sec02 .box .caution { display: flex; justify-content: flex-start; margin:40px auto 0; width:520px; height: 30px; background: url(../image/mo/2/caution.png)no-repeat 0 0; } .sec03 { background:url(../image/mo/3/bg.png) no-repeat center/cover; padding-bottom: 80px; } .sec03 .center { display: flex; padding-top: 75px; justify-content: center; align-items: center; flex-direction: column; } .sec03 .center .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 45px; } .sec03 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; margin-top: 10px; background: url(../image/mo/3/emblem.png)no-repeat; } .sec03 .center .titleWrap .title { width:415px; height: 100px; margin-bottom: 30px; background: url(../image/mo/3/title.png)no-repeat center; } .sec03 .center .titleWrap p { font-size: 25px; letter-spacing: -1px; font-weight: 100; color:#fff; } .sec03 .center .box { display: flex; align-items: center; justify-content: center; gap: 10px; width:702px; height: 80px; padding-left: 25px; margin-bottom: 35px; background: url(../image/mo/3/box.png)no-repeat; } .sec03 .center .box span { font-size: 22px; color:#bc9261; } .sec03 .center .box span.theOneLord { font-family: 'TheOneLord'; font-size: 32px; color:#e7bc6a; } .sec03 .center .itemList { position: relative; } .sec03 .center .itemList ul { display: flex; justify-content: center; } .sec03 .center .itemList ul.firstList { position: relative; padding-bottom: 161px; z-index: 1; } .sec03 .center .itemList ul.secondList { position: relative; z-index: 1; } .sec03 .center .itemList ul li.ht1 { width:185px; height: 331px; margin-right:22px; background: url(../image/mo/3/1ht.png)no-repeat center center; } .sec03 .center .itemList ul li.ht1.on { width:185px; height: 331px; background: url(../image/mo/3/1htF.png)no-repeat center center; } .sec03 .center .itemList ul li.ht3 { width:185px; height: 331px; margin-right:26px; background: url(../image/mo/3/3ht.png)no-repeat center center; } .sec03 .center .itemList ul li.ht3.on { width:185px; height: 331px; background: url(../image/mo/3/3htF.png)no-repeat center center; } .sec03 .center .itemList ul li.ht5 { width:185px; height: 331px; background: url(../image/mo/3/5ht.png)no-repeat center center; } .sec03 .center .itemList ul li.ht5.on { width:185px; height: 331px; background: url(../image/mo/3/5htF.png)no-repeat center top; } .sec03 .center .itemList ul li.ht7 { width:186px; height: 331px; margin-right:22px; background: url(../image/mo/3/7ht.png)no-repeat center top; } .sec03 .center .itemList ul li.ht7.on { width:186px; height: 331px;background: url(../image/mo/3/7htF.png)no-repeat center top; } .sec03 .center .itemList ul li.ht9 { width:186px; height: 331px; margin-right:26px; background: url(../image/mo/3/9ht.png)no-repeat center top; } .sec03 .center .itemList ul li.ht9.on { width:186px; height: 331px;background: url(../image/mo/3/9htF.png)no-repeat center top; } .sec03 .center .itemList ul li.ht10 { width:186px; height: 331px; background: url(../image/mo/3/10ht.png)no-repeat center top; } .sec03 .center .itemList ul li.ht10.on { width:186px; height: 331px; background: url(../image/mo/3/10htF.png)no-repeat center top; } .sec03 .center .itemList .gauge1 { position: absolute; left:-57px; top:265px; width:720px; height: 135px; background: url(../image/mo/3/gauge1.png)no-repeat; } .sec03 .center .itemList .gauge1 div { position: absolute; left:0; top:0; width:100%; height: 135px; background: url(../image/mo/3/gauge1-on.png)no-repeat; } .sec03 .center .itemList .gauge1.reward0 div {width:70px;} .sec03 .center .itemList .gauge1.reward10 div {width:152px;} .sec03 .center .itemList .gauge1.reward30 div {width:361px;} .sec03 .center .itemList .gauge1.reward50 div {width:568px;} /* .sec03 .center .itemList .gauge1.total_50 { position: absolute; left: -20px; top: 239px; width:1335px; height: 160px; background: url(../image/mo/3/total_50.png)no-repeat; } */ /* .sec03 .center .itemList .gauge2 { position: absolute; left: -47px; top: 855px; width:1335px; height: 150px; background: url(../image/mo/3/gauge2.png)no-repeat; } */ .sec03 .center .itemList .gauge2 {position: absolute; left: -57px; top: 785px; width: 720px; height: 135px; background: url(../image/mo/3/gauge2.png) no-repeat;} .sec03 .center .itemList .gauge2 div { position: absolute; left:0; top:0; width:100%; height: 135px; background: url(../image/mo/3/gauge2-on.png)no-repeat; } .sec03 .center .itemList .gauge2.reward50 div {width:0px;} .sec03 .center .itemList .gauge2.reward70 div {width:152px;} .sec03 .center .itemList .gauge2.reward90 div {width:360px;} .sec03 .center .itemList .gauge2.reward100 div {width:571px;} /* .sec03 .center .itemList .gauge2.total_70 {position: absolute; left: -46px; top: 836px; width: 1265px; height: 340px; background: url(../image/mo/3/total_70.png) no-repeat;} .sec03 .center .itemList .gauge2.total_100 {position: absolute; left: -46px; top: 836px; width: 1265px; height: 340px; background: url(../image/mo/3/total_100.png) no-repeat;} .sec03 .center .itemList .gauge2.total_full {position: absolute; left: -46px; top: 836px; width: 1265px; height: 340px; background: url(../image/mo/3/total_full.png) no-repeat;} */ .sec03 .center .itemList .number { display: flex; gap: 160px; justify-content: center;} .sec03 .center .itemList .number1 { position: absolute; left: 70px; top: 410px; } .sec03 .center .itemList .number2 { position: relative; bottom: -80px; } .sec03 .center .itemList .number span { font-size: 25px; font-weight: bold; color:#bc9261; } .sec03 .center .reservation { width:272px; height: 70px; margin-top: 145px; background: url(../image/mo/3/btn.png)no-repeat; } .sec03 .center .caution { width:144px; height: 29px; margin-top: 50px; background: url(../image/mo/3/caution.png)no-repeat; } .sec03 .center .cautionS03 { width:144px; height: 30px; margin-top: 54px; background: url(../image/mo/3/caution.png)no-repeat; } .sec04 { height:1350px; } .sec04 ul { display: flex; gap: 9px; justify-content: center; padding-top: 100px; } .sec04 ul li { width:103px; height: 119px; } .sec04 ul li.sor { background: url(../image/mo/4/sor.png)no-repeat; } .sec04 ul li.sor.active { background: url(../image/mo/4/sorSelect.png)no-repeat; } .sec04 ul li.arc { background: url(../image/mo/4/arc.png)no-repeat; } .sec04 ul li.arc.active { background: url(../image/mo/4/arcSelect.png)no-repeat; } .sec04 ul li.pal { background: url(../image/mo/4/pal.png)no-repeat; } .sec04 ul li.pal.active { background: url(../image/mo/4/palSelect.png)no-repeat; } .sec04 ul li.warr { background: url(../image/mo/4/warr.png)no-repeat; } .sec04 ul li.warr.active { background: url(../image/mo/4/warrSelect.png)no-repeat; } .sec04 ul li.warl { background: url(../image/mo/4/warl.png)no-repeat; } .sec04 ul li.warl.active { background: url(../image/mo/4/warlSelect.png)no-repeat; } .sec04 .info { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .sec04 .info p { font-size: 25px; letter-spacing: -1px; color:#fff;font-weight:300;} .sec04 .info .charName { margin-bottom: 12px; } .sec04 .info .videoWrap { position: relative; width:548px; height: 306px; background: #000; } .sec04 .info .videoWrap.sorvideo { background: url('../image/mo/4/sorThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .info .videoWrap.arcvideo { background: url('../image/mo/4/arcThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .info .videoWrap.palvideo { background: url('../image/mo/4/palThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .info .videoWrap.warrvideo{ background: url('../image/mo/4/warrThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .info .videoWrap.warlvideo{ background: url('../image/mo/4/warlThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .info .videoWrap .playBtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width:161px; height: 157px; background: url(../image/mo/4/playBtn.png)no-repeat; } .sec04 .sorceress { height: 100%; background: url(../image/mo/4/sorBg.png)no-repeat; background-size: cover; } .sec04 .sorceress .info .charName { width: 510px; height: 111px; background: url(../image/mo/4/sorName.png)no-repeat center/contain; } .sec04 .sorceress .info .videoWrap { border:1px solid #2859cb; } .sec04 .archer { height: 100%; background: url(../image/mo/4/arcBg.png)no-repeat; background-size: cover; display: none; } .sec04 .archer .info .charName { width: 389px; height: 111px; background: url(../image/mo/4/arcName.png)no-repeat center/contain; } .sec04 .archer .info .videoWrap { border:1px solid #1eab7c; } .sec04 .paladin { height: 100%; background: url(../image/mo/4/palBg.png)no-repeat; background-size: cover; display: none; } .sec04 .paladin .info .charName { width: 410px; height: 111px; background: url(../image/mo/4/palName.png)no-repeat center/contain; } .sec04 .paladin .info .videoWrap { border:1px solid #d1b478; } .sec04 .warrior { height: 100%; background: url(../image/mo/4/warrBg.png)no-repeat; background-size: cover; display: none; } .sec04 .warrior .info .charName { width: 452px; height: 111px; background: url(../image/mo/4/warrName.png)no-repeat center/contain; } .sec04 .warrior .info .videoWrap { border:1px solid #a71b1c; } .sec04 .warlork { height: 100%; background: url(../image/mo/4/warlBg.png)no-repeat; background-size: cover; display: none; } .sec04 .warlork .info .charName { width: 420px; height: 111px; background: url(../image/mo/4/warlName.png)no-repeat center/contain; } .sec04 .warlork .info .videoWrap { border:1px solid #7348cb; } .sec05 { display: flex; align-items: center; flex-direction: column; height: 1280px; background: url(../image/mo/5/bg.png)no-repeat center/cover; } .sec05 .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 130px 0 100px 0; } .sec05 .titleWrap .emblem { position: absolute; left: 50%; top: 75px; transform: translateX(-50%); width: 280px; height: 210px; background: url(../image/mo/5/emblem.png)no-repeat; } .sec05 .titleWrap .title { width:132px; height: 49px; background: url(../image/mo/5/title.png)no-repeat; } .sec05 .titleWrap .line { width:470px; height: 12px; margin:9px 0 2px 0; background: url(../image/mo/5/line.png)no-repeat; } .sec05 .titleWrap p { font-size: 25px; text-align: center; color:#621900; font-weight: 400; letter-spacing: -0.025em; } .sec05 .videoWrap { position: relative; width:678px; height: 507px; background: url(../image/mo/5/frame.png)no-repeat; } .sec05 .videoWrap .playBtn { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width:142px; height: 137px; background: url(../image/mo/5/playBtn.png)no-repeat; } .sec05-1 { display: flex; align-items: center; flex-direction: column; height: 1280px; background: url(../image/mo/5-1/bg.png)no-repeat center/cover; } .sec05-1 .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 130px 0 100px 0; } .sec05-1 .titleWrap .emblem { position: absolute; left: 50%; top: 45px; transform: translateX(-50%); width: 685px; height: 350px; background: url(../image/mo/5-1/emblem.png) no-repeat center;} .sec05-1 .titleWrap .title { width: 318px; height: 147px; background: url(../image/mo/5-1/title.png)no-repeat; } .sec05-1 .titleWrap p { font-size: 25px; text-align: center; color: #fff; font-weight: 100; letter-spacing: -1px; } .sec05-1 .tab_box_wrap { width: 668px; height: 356px; margin-top: 110px; margin-bottom: 33px;} .sec05-1 ul.tab_btn { width: 668px; height: 87px; display: flex; flex-direction: row; margin-bottom: 47px; background:url(../image/5-1/slide_btn_bg.png) no-repeat; } .sec05-1 .tab_box_wrap.text_copy { width: 100%; height: auto; margin: 0 auto;} .sec05-1 .tab_box_wrap.text_copy img{ display:block; margin: 0 auto 20px;} .sec05-1 ul.tab_btn li{width: 25%; position: relative;} .sec05-1 ul.tab_btn li.btn2 { left: 1px;} .sec05-1 ul.tab_btn li.btn2 { margin-left: 1.3px;} .sec05-1 ul.tab_btn li a{width:100%; height: 86px; display:block;} .sec05-1 ul.tab_btn li.btn1 a{background: url(../image/mo/5-1/slide_btn_1.png) no-repeat;} .sec05-1 ul.tab_btn li.btn2 a{background: url(../image/mo/5-1/slide_btn_2.png) no-repeat;} .sec05-1 ul.tab_btn li.btn3 a{background: url(../image/mo/5-1/slide_btn_3.png) no-repeat;} .sec05-1 ul.tab_btn li.btn4 a{background: url(../image/mo/5-1/slide_btn_4.png) no-repeat;} .sec05-1 ul.tab_btn li.btn1 a.on{background: url(../image/mo/5-1/slide_btn_1_on.png) no-repeat;} .sec05-1 ul.tab_btn li.btn2 a.on{background: url(../image/mo/5-1/slide_btn_2_on.png) no-repeat;} .sec05-1 ul.tab_btn li.btn3 a.on{background: url(../image/mo/5-1/slide_btn_3_on.png) no-repeat;} .sec05-1 ul.tab_btn li.btn4 a.on{background: url(../image/mo/5-1/slide_btn_4_on.png) no-repeat;} .sec05-1 .centerFrame {width: 556px; height: 312px; margin: 0 auto 33px; overflow: hidden; border: 1px solid #676767; box-sizing: border-box; } .sec05-1 .centerFrame .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; margin: 0 auto; display: block; } .sec05-1 .navigationWrap{ position: relative; top: -50%; width: 100%; z-index:1 ;} .sec05-1 .swiper-button-next { top:50% !important; } .sec05-1 .swiper-button-prev { top:50% !important; } .sec05-1 .noti_txt {display: block; margin: 0 auto 10px;} .sec05-1 .go_lounge {display: block; margin: 0 auto; text-align: center;} /* */ .sec05-2 { display: flex; align-items: center; flex-direction: column; height: 1280px; background: url(../image/mo/5-2/bg.png)no-repeat center/cover; } .sec05-2 .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 130px 0 100px 0; } .sec05-2 .titleWrap .emblem { position: absolute; left: 50%; top: 45px; transform: translateX(-50%); width: 685px; height: 350px; background: url(../image/mo/5-2/emblem.png) no-repeat center;} .sec05-2 .titleWrap .title { width: 318px; height: 147px; background: url(../image/mo/5-2/title.png)no-repeat; } .sec05-2 .titleWrap p { font-size: 25px; text-align: center; color: #fff; font-weight: 100; letter-spacing: -1px; } .sec05-2 .tab_box_wrap { width: 668px; height: 356px; margin-top: 110px; margin-bottom: 33px;} .sec05-2 ul.tab_btn { width: 668px; height: 87px; display: flex; flex-direction: row; margin-bottom: 47px; background:url(../image/5-2/slide_btn_bg.png) no-repeat; } .sec05-2 .tab_box_wrap.text_copy { width: 100%; height: auto; margin: 0 auto;} .sec05-2 .tab_box_wrap.text_copy img{ display:block; margin: 0 auto 20px;} .sec05-2 ul.tab_btn li{width: 25%; position: relative;} .sec05-2 ul.tab_btn li.btn2 { left: 1px;} .sec05-2 ul.tab_btn li.btn2 { margin-left: 1.3px;} .sec05-2 ul.tab_btn li a{width:100%; height: 86px; display:block;} .sec05-2 ul.tab_btn li.btn1 a{background: url(../image/mo/5-2/slide_btn_1.png) no-repeat;} .sec05-2 ul.tab_btn li.btn2 a{background: url(../image/mo/5-2/slide_btn_2.png) no-repeat;} .sec05-2 ul.tab_btn li.btn3 a{background: url(../image/mo/5-2/slide_btn_3.png) no-repeat;} .sec05-2 ul.tab_btn li.btn4 a{background: url(../image/mo/5-2/slide_btn_4.png) no-repeat;} .sec05-2 ul.tab_btn li.btn1 a.on{background: url(../image/mo/5-2/slide_btn_1_on.png) no-repeat;} .sec05-2 ul.tab_btn li.btn2 a.on{background: url(../image/mo/5-2/slide_btn_2_on.png) no-repeat;} .sec05-2 ul.tab_btn li.btn3 a.on{background: url(../image/mo/5-2/slide_btn_3_on.png) no-repeat;} .sec05-2 ul.tab_btn li.btn4 a.on{background: url(../image/mo/5-2/slide_btn_4_on.png) no-repeat;} .sec05-2 .centerFrame {width: 556px; height: 312px; margin: 0 auto 33px; overflow: hidden; border: 1px solid #676767; box-sizing: border-box; } .sec05-2 .centerFrame .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; margin: 0 auto; display: block; } .sec05-2 .navigationWrap{ position: relative; top: -50%; width: 100%; z-index:1 ;} .sec05-2 .swiper-button-next { top:50% !important; } .sec05-2 .swiper-button-prev { top:50% !important; } .sec05-2 .noti_txt {display: block; margin: 0 auto 10px;} .sec05-2 .go_lounge {display: block; margin: 0 auto; text-align: center;} .sec06 { height: 1280px; background: url(../image/mo/6/bg.png)no-repeat center/cover; } .sec06 .titleWrap { position: absolute; width: 100%; left: 50%; top: 85px; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 35px; } .sec06 .titleWrap .emblem { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); width: 280px; height: 210px; background: url(../image/mo/6/emblem.png)no-repeat; } .sec06 .titleWrap .title { width:280px; height: 110px; margin-bottom: 5px; background: url(../image/mo/6/title.png)no-repeat center; } .sec06 .titleWrap p { font-size: 25px; text-align: center; color:#fff; font-weight: 100; letter-spacing: -0.025em; } .sec06 .frameWrap { position: relative; left: 50%; top: 47%; transform: translate(-50%, -50%); width:100%; height: 480px; z-index: 2; pointer-events: none; } .sec06 .frameWrap .leftFrame { position: absolute; left: 0; top:70px; width:432px; height: 296px; } .sec06 .frameWrap .leftFrame .swiper-container .swiper-wrapper .swiper-slide { width: 100% !important; height: 100% !important; } .sec06 .frameWrap .centerFrame { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width:657px; height: 368px; overflow: hidden; z-index: 4; } .sec06 .centerImg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; } .sec06 .leftImg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; } .sec06 .rightImg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; } .sec06 .frameWrap .rightFrame { position: absolute; right:0; top:70px; width:432px; height: 296px; } .sec06 .frameWrap .rightFrame .swiper-container .swiper-wrapper .swiper-slide { width: 100% !important; height: 100% !important; } .sec06 .swiper-container.leftSwiper { position: relative; z-index: 3; rotate: -5deg; overflow: hidden; width: 432px; height: 250px; margin-top: 20px; margin-left: -10px; } .sec06 .swiper-container.rightSwiper { position: relative; z-index: 3; rotate: 5deg; overflow: hidden; width: 432px; height: 250px; margin-top: 21px; margin-left: 13px; } .sec06 .swiper-slide { width:657px !important; height: 368px !important; } .sec06 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .sec06 .swiper-pagination { display: flex; justify-content: center; gap:25px; top: 78% !important; transform: translateY(-50%); z-index: 1; } .sec06 .swiper-pagination-bullet { width: 36px !important; height: 36px !important; background-size: cover; background: url(../image/mo/6/btn.png)no-repeat !important; opacity: 1 !important; } .sec06 .swiper-pagination-bullet-active { background: url(../image/mo/6/selectBtn.png)no-repeat !important; } .sec06 .swiper-button-next, .sec06 .swiper-button-prev { width:35px;height:64px;top:845px !important; } .sec06 .swiper-button-next svg, .sec06 .swiper-button-prev svg {display: none;} .sec06 .swiper-button-next { right: 30px !important; z-index: 1;background:url(../image/6/next.png) no-repeat 0 0; } .sec06 .swiper-button-prev { left: 30px !important; z-index: 1;;background:url(../image/6/prev.png) no-repeat 0 0;} .sec06 .swiper-button-next.swiper-button-disabled, .sec06 .swiper-button-prev.swiper-button-disabled { opacity: 1; pointer-events: auto; } .sec07 { height: 1280px; background: url(../image/mo/7/bg.png)no-repeat center/cover; } .sec07 .titleWrap { position: absolute; left: 50%; top: 85px; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 35px; } .sec07 .titleWrap .emblem { position: absolute; left: 51%; top: -20px; transform: translateX(-50%); width: 280px; height: 210px; background: url(../image/mo/7/emblem.png)no-repeat; } .sec07 .titleWrap .title { width:225px; height: 110px; margin-bottom: 5px; background: url(../image/mo/7/title.png)no-repeat center 0; } .sec07 .titleWrap p { font-size: 25px; text-align: center; color:#fff; font-weight: 100; } .sec07 .slideWrap { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width:673px; height: 372px; padding:10px; overflow: hidden; } .sec07 .slideLine { position: absolute; left: 50%; bottom: 34%; transform: translate(-50%, -50%); } .sec07 .gallery-top { height:360px; overflow: hidden; } .sec07 .gallery-top .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .sec07 .frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width:673px; height: 372px; background: url(../image/mo/7/frame.png)no-repeat; background-size: cover; background-position: center; z-index: 2; pointer-events: none; } .sec07 .swiper-slide img { width:167px; height: 93px; object-fit: cover; } .sec07 .gallery-thumbs { overflow: hidden; } .sec07 .thumbsWrap { width:530px; position: absolute; left: 50%; bottom: 26%; transform: translateX(-50%); } .sec07 .thumbs { border:1px solid #7c7c7c; } .sec07 .thumbs.selected { border:2px solid #ca995a; overflow: hidden; } .sec07 .thumbs img { vertical-align: middle; } .sec07 .swiper-button-next, .sec07 .swiper-button-prev { width:35px;height:64px;top:50% !important;margin-top:-32px; } .sec07 .swiper-button-next svg, .sec07 .swiper-button-prev svg {display: none;} .sec07 .swiper-button-next { right: -11% !important; background:url(../image/mo/7/next.png) no-repeat 0 0; } .sec07 .swiper-button-prev { left: -11% !important; background:url(../image/mo/7/prev.png) no-repeat 0 0; } .sec07 .swiper-button-next.swiper-button-disabled, .sec07 .swiper-button-prev.swiper-button-disabled { opacity: 1; pointer-events: auto; } .sec08 { height: 680px!important; background: #191919; } .sec08 .fp-tableCell { height: 680px!important; display: flex; justify-content: center; align-items: center; } .sec08 .footer.fp-tableCell { height: 680px !important; } .sec08 .footer .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap:35px; } .sec08 .footer .inner .img-wrap { width: 112px; height: 107px; } .sec08 .footer .inner img { width: 100%; height: 100%; object-fit: contain; } .sec08 .footer .inner .copy {text-align: center; font-size: 17px; color: #a1a1a1; font-weight: 100; } .sec08 .footer .inner .limits { display: flex; justify-content: center; } .sec08 .footer .inner .limits { display: flex; margin:15px 0 0 0; } .sec08 .footer .inner .limits p { width:135px; } .sec08 .footer .inner .limits > div { width:450px; padding:0 0 0 38px; } .sec08 .footer .inner .limits > div ul { padding:20px 0 0 0; } .sec08 .footer .inner .limits > div ul li{ position: relative; text-align: left; font-size: 17px; color:#696969; line-height: 30px; padding:0 0 5px 15px; } .sec08 .footer .inner .limits > div ul li::before { content:''; display: block; width:4px; height:4px; background:#696969; position: absolute; top:50%; left:0; margin-top:-2px; border-radius:50%; } /*비디오팝업*/ .popup { position: fixed; width: 100% ; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 4; display: none; } .introVideoPop .videoWrap { width:678px; height: 507px; background: url(../image/mo/1/videoWrap.png)no-repeat; margin: 0 auto;} .introVideoPop .videoWrap .xbtn { position: absolute; right: 0; top: 0; cursor: pointer; } .introVideoPop .videoWrap .video { width: 678px; height: 507px; padding: 11% 3%;} .videoPop { width:678px; height: 507px; background: url(../image/mo/1/videoWrap.png)no-repeat; } .videoPop .xbtn { position: absolute; right: 0; top: -20px; } .videoPop .videoWrap .video { position: absolute; left: 19px; top: 65px; } /*개인정보 수집 이용 동의*/ .privatePop .privateWrap { position: relative; width: 679px; height: 741px; background:url(../image/mo/2/privatePop.png)no-repeat center/contain; } .privatePop .privateWrap .xbtn { position: absolute; right: 0; top: -70px; } /*이벤트 등 프로모션 알림*/ .eventPop .eventWrap { position: relative; width: 679px; height: 581px; background:url(../image/mo/2/eventPop.png)no-repeat center/contain; } .eventPop .eventWrap .xbtn { position: absolute; right: 0; top: -70px; } /*이벤트참여 주의사항*/ .cautionPop .cautionWrap { position: relative; width: 679px; height: 501px; background:url(../image/mo/2/cautionPop.png)no-repeat; } .cautionPop .cautionWrap .xbtn { position: absolute; right: 0; top: -70px; } .cautionSec03 .cautionWrap { position: relative; width: 637px; height: 375px; background:url(../image/mo/3/evmo.png)no-repeat center/contain; } .cautionSec03 .cautionWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*추후 공개*/ .toBePop .toBeWrap { position: relative; width: 678px; height: 286px; margin: 0 auto; background:url(../image/mo/1/toBePop.png)no-repeat; } .toBePop .toBeWrap .xbtn { position: absolute; right: 0px; top: -70px; } /*인증실패*/ .failPop .failWrap { position: relative; width: 678px; height: 286px; background:url(../image/mo/2/failPop.png)no-repeat; } .failPop .failWrap .xbtn { position: absolute; right: 0; top: -70px; } /*인증성공*/ .successPop .successWrap { position: relative; width: 678px; height: 286px; background:url(../image/mo/2/successPop.png)no-repeat; } .successPop .successWrap .xbtn { position: absolute; right: 0; top: -70px; } /*구글 사전예약 팝업*/ .reservePop .reserveWrap { position: relative; width: 678px; height: 286px; margin: 0 auto; background:url(../image/mo/2/reservePop.png)no-repeat; } .reservePop .reserveWrap .xbtn { position: absolute; right: 0; top: -70px; } /*구글 사전예약 팝업*/ .reserveApplePop .reserveWrap { position: relative; width: 678px; height: 286px; margin: 0 auto; background:url(../image/mo/2/reservePop2.png)no-repeat; } .reserveApplePop .reserveWrap .xbtn { position: absolute; right: 0; top: -70px; } /*메세지팝업*/ .alertPop .alertWrap { position: relative; width: 678px; height: 286px; background:url(../image/bg-pop-alert.png)no-repeat; background-size:cover;} .alertPop .alertWrap div{position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 5; } .alertPop .alertWrap div p{ font-size: 20px; color:#afafaf; padding:0 20px; } .alertPop .alertWrap .xbtn { position: absolute; right: 0; top: -70px;; cursor: pointer; width: 51px; height: 53px; } /* 사전예약 완료 팝업*/ .reserveFinishPop .reserveWrap { position: relative; width: 678px; height: 286px; background:url(../image/mo/finishPop.png)no-repeat; } .reserveFinishPop .reserveWrap a { display: block; position: absolute; top:161px; left:50%; width:160px; height:40px; } .reserveFinishPop .reserveWrap .btn-go-googleplay{ margin-left:-163px; } .reserveFinishPop .reserveWrap .btn-go-mycard{ margin-left:-163px; } .reserveFinishPop .reserveWrap .btn-go-appstore{ margin-left:5px; } .reserveFinishPop .reserveWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } @-webkit-keyframes scroll { 0% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } 100% { transform: translate(-50%,0%); } } @keyframes scroll { 0% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } 100% { transform: translate(-50%,0%); } }