body { background: #000; } .mainLogo { width:167px; height: 114px; position: absolute; left:0; top: 15px; background:url(../image/logo.png) no-repeat center/contain; z-index: 1; cursor: pointer; } #header { position: relative; } #header .gnbLeft { position: fixed; top: 55%; left: 35px; transform: translateY(-50%); z-index: 1; } #header .gnbLeft .gnb { display: flex ;height: 553px;flex-direction: column;gap: 45px; } #header .gnbLeft .gnb::after { content: ""; position: absolute; right: -24px; top: 7px; background: url(../image/line.png)no-repeat; width:100%; height: 100%; } #header .gnbLeft .gnb a { display: block; width: 100%; height: 100%; font-size: 0; line-height: 0; } #header .gnbLeft .gnb li { display: block; width: 150px; height: 20px; z-index: 1; } #header .gnbLeft .gnb li .main { background: url(../image/main.png) no-repeat 22px 0; } #header .gnbLeft .gnb li .reserv { background: url(../image/reserv.png) no-repeat 22px 0; } #header .gnbLeft .gnb li .event { background: url(../image/event.png) no-repeat 22px 0; } #header .gnbLeft .gnb li .character { background: url(../image/class.png) no-repeat 22px 0; } #header .gnbLeft .gnb li .worldView { background: url(../image/worldView.png) no-repeat 22px 0; } /* #header .gnbLeft .gnb li .system { background: url(../image/system.png) no-repeat 22px 0; } #header .gnbLeft .gnb li .content { background: url(../image/content.png) no-repeat 22px 0; } */ #header .gnbLeft .gnb li .introduce { background: url(../image/intro.png) no-repeat 22px 0; } #header .gnbLeft .gnb li .media { background: url(../image/media.png) no-repeat 22px 0; } #header .gnbLeft .gnb li.active .main { position: absolute; right: 0; top: -20px; background: url(../image/1/main.png) no-repeat;} #header .gnbLeft .gnb li.active .reserv { position: absolute; right: 0; top: 45px; background: url(../image/2/reserv.png) no-repeat;} #header .gnbLeft .gnb li.active .event { position: absolute; right: 0; top: 110px; background: url(../image/3/event.png) no-repeat;} #header .gnbLeft .gnb li.active .character { position: absolute; right: 0; top: 175px; background: url(../image/4/char.png) no-repeat;} #header .gnbLeft .gnb li.active .worldView { position: absolute; right: 0; top: 240px; background: url(../image/5/worldView.png) no-repeat;} /* #header .gnbLeft .gnb li.active .system { position: absolute; right: 0; top: 240px; background: url(../image/5-1/system.png) no-repeat;} #header .gnbLeft .gnb li.active .content { position: absolute; right: 0; top: 305px; background: url(../image/5-2/content.png) no-repeat;} */ #header .gnbLeft .gnb li.active .introduce { position: absolute; right: 0; top: 305px; background: url(../image/6/intro.png) no-repeat;} #header .gnbLeft .gnb li.active .media { position: absolute; right: 0; top: 370px; background: url(../image/7/media.png) no-repeat;} .float-banner { position: fixed; top: 50%; right: 100px; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; z-index: 10; } .section { position: relative; height: 100vh; } .sec01 { background: url(../image/1/bg.png) no-repeat; background-size: cover; } .sec01 .center { height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap:45px; } .sec01 .center .logo, .sec01 .center .playBtn, .sec01 .center .install , .sec01 .center .reservation { opacity: 0; } .sec01 .end { height: 100%; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; gap:45px; } .sec01 .end .install { opacity: 0; } .sec01 .center img { cursor: pointer; } .sec01 .center .playBtn img:hover { background:url(../image/1/playBtnOver.png); } .sec01 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec01 .goTo>div { cursor: pointer; } .sec01 .end .install{display: flex; flex-direction: row; gap: 10px; margin-bottom: 115px;} .sec01 .center .reservation{display: flex; flex-direction: row; gap: 10px;} .sec01 .scrollDown { position: absolute; left:50%; bottom: 3%; transform: translateX(-50%); animation: scroll 3s ease-out infinite; animation-delay: 1s; opacity: 0; } .sec01.fp-completely .logo { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; width: 520px; height: 483px; } .sec01.fp-completely .logo img { width: 100%; height: 100%; object-fit: contain; } .sec01.fp-completely .playBtn { -webkit-animation: motion-fade-in-right 0.4s ease-out both; animation: motion-fade-in-right 0.4s ease-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .sec01.fp-completely .install { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec01.fp-completely .reservation { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec01.fp-completely .scrollDown { -webkit-animation: scroll 3s ease-out infinite,motion-fade-in 2s both; animation: scroll 3s ease-out infinite, motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 1s; animation-delay: 1s; } .sec01.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec02 { position: relative; background: url(../image/2/bg.png) no-repeat; background-size: cover; } .sec02 .center { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } .sec02 .title { display: flex; align-items: center; flex-direction: column; opacity: 0; } .sec02 .title .emblem { position: absolute; top:250px; width:280px; height: 210px; background: url(../image/2/emblem.png)no-repeat center; } .sec02 .title .rebornReserv { width:778px; height: 230px; background: url(../image/2/reservTit.png)no-repeat center; } .sec02 .title .invite { width:530px; height: 40px; margin:23px 0 12px 0; background: url(../image/2/line.png)no-repeat; text-align: center; } .sec02 .title .invite p { font-size: 19px; font-weight: 600; line-height: 38px; color: #621900; } .sec02 .title .date p { font-size: 16px; color: #621900; line-height: 23px; font-weight: 500; margin:15px 0 0 0; } .sec02 .title .date p span { font-weight: 900; color: #621900; } .sec02 .box { position: relative; display: flex; justify-content: space-between; width:958px; height: 507px; margin:35px 0 35px 0; background: url(../image/2/box.png)no-repeat; opacity: 0; } .sec02 .box .bird { position: absolute; left:-225px; top:-225px; width:352px; height: 342px; background: url(../image/2/bird.png)no-repeat; } .sec02 .box .left .package { display: flex; align-items: center; flex-direction: column; margin: 75px 0 0 40px; } .sec02 .box .left .package .rune { position: relative; } .sec02 .box .left .package .rune .effect { position: absolute; left: -120px; top: -54px; width:798px; height: 329px; /*background: url(../image/2/effect.png)no-repeat; */} /* .sec02 .box .left .package .rune .fireEffect1 { position: absolute; left:0; top:0; width:310px; height: 279px; background: url(image/2/effect1.png)no-repeat; } .sec02 .box .left .package .rune .fireEffect2 { position: absolute; left:0; top:0; width:346px; height: 278px; background: url(image/2/effect2.png)no-repeat; } .sec02 .box .left .package .rune .fireEffect3 { position: absolute; left:0; top:0; width:346px; height: 278px; background: url(image/2/effect3.png)no-repeat; } */ .sec02 .box .right { display: flex; flex-direction: column; padding: 85px 75px 0 423px; z-index: 1; } .sec02 .box .right .inputArea { position: relative; display: flex; flex-direction: column; gap: 12px; } .sec02 .box .right .inputArea input{ width:180px; height: 52px; padding:0 25px; font-size: 12px; font-weight: 500; } .sec02 .box .right .inputArea select { width:467px; height: 52px; padding:0 5px; font-size: 12px; font-weight: 500; } .sec02 .box .right .inputArea input:disabled { background:#9b9090; } .sec02 .box .right .inputArea input:disabled::placeholder { color:#311a1a; } .sec02 .box .right .inputArea .apply { display: flex; align-items: center; justify-content: flex-start; gap: 8px; } .sec02 .box .right .inputArea .apply .select-box { background:#ffffff; width:105px; padding:0 5px 0 0; } .sec02 .box .right .inputArea .apply select { width: 100px; text-align: center; font-size: 15px; padding:0; margin:0; font-weight: 500;color: #b6b6b6;border:none;} .sec02 .box .right .inputArea .apply input#phoneNumberMid {width:200px;text-align: center; font-size: 15px; font-weight: 500;} .sec02 .box .right .inputArea .apply input::placeholder { color: #b6b6b6; } .sec02 .box .right .inputArea .apply button { width: 158px; height: 52px; background: url(../image/2/receive.png)no-repeat } .sec02 .box .right .inputArea .count { position: absolute; right: 35px; top: calc(75%); transform: translateY(-50%); } .sec02 .box .right .checkArea { display: flex; flex-direction: column; gap:10px; margin:23px 0 35px 0; } .sec02 .box .right .checkArea label { font-size: 13px; color:#fff; font-weight: 100; line-height: 18px; } .sec02 .box .right .checkArea .checkWrap { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } .sec02 .box .right .checkArea .checkWrap input[type="checkbox"] { width: 18px; height: 18px; appearance: none; cursor: pointer; } .sec02 .box .right .checkArea .checkWrap input[type=checkbox]::before { content: ""; display: block; width: inherit; height: inherit; border: 1px solid #fff; color: transparent; } .sec02 .box .right .checkArea .checkWrap input[type=checkbox]:checked::before { background: url(../image/2/checked.png) no-repeat center } .sec02 .box .right .checkArea .up18, .sec02 .box .right .checkArea .private, .sec02 .box .right .checkArea .event { display: flex; justify-content: space-between; } .sec02 .box .right .checkArea .more { height: 20px; display: flex; align-items: center; justify-content: center; } .sec02 .box .right .checkArea .more a { display: inline-block; width: 64px; height: 100%; font-size: 12px; font-weight: 100; text-align: center; color:#fff; background: #131313; } .sec02 .box .right .btnArea { display: flex; gap: 6px; flex-direction: column; align-items: center;} .sec02 .box .right .btnArea .apply { width: 382px; height: 63px; background: url(../image/2/applyBtn.png) no-repeat;} .sec02 .box .right .btnArea > div{ display:flex; flex-direction:row; gap: 12px;} .sec02 .box .right .btnArea > div .google { width: 226px; height: 77px; background: url(../image/2/google.png) no-repeat center/contain; display: block;} .sec02 .box .right .btnArea > div .mycard { width: 226px; height: 77px; background: url(../image/2/myCard.png) no-repeat center/contain; display: block;} .sec02 .box .right .btnArea > div .apple { width: 226px; height: 77px; background: url(../image/2/apple.png) no-repeat center/contain; display: block;} .sec02 .box .caution { position: absolute; left:50%; bottom: 50px; transform: translateX(-50%); width:99px; height: 21px; background: url(../image/2/caution.png)no-repeat; cursor: pointer; z-index: 1; } .sec02.fp-completely .title { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec02.fp-completely .box { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec02 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec02 .goTo>div { cursor: pointer; } .sec02.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec03 { background: url(../image/3/bg.png)no-repeat; background-size: cover; } .sec03 .center { display: flex; 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: 50px; opacity: 0; } .sec03 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; margin: 35px 0 11px 0; background: url(../image/3/emblem.png)no-repeat; } .sec03 .center .titleWrap .title { width:480px; height: 100px; background: url(../image/3/title.png)no-repeat center; } .sec03 .center .titleWrap .line { width:379px; height: 12px; margin:8px 0 11px 0; background: url(../image/3/line.png)no-repeat; } .sec03 .center .titleWrap p { color:#fff; font-weight: 100; } .sec03 .center > img { opacity: 0; } .sec03 .center .box { display: flex; align-items: center; justify-content: center; gap: 30px; width:702px; height: 77px; margin-bottom: 25px; background: url(../image/3/box.png)no-repeat; opacity: 0; } .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; opacity: 0; } .sec03 .center .itemList ul {position: relative; display: flex; gap: 0; left: 0;} .sec03 .center .itemList ul li.ht1 { width: 166px; height: 334px; background: url(../image/3/1ht.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht1.on { width: 166px; height: 334px; background: url(../image/3/1htF.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht3 { width: 166px; height: 334px; background: url(../image/3/3ht.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht3.on { width: 166px; height: 334px; background: url(../image/3/3htF.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht5 { width: 166px; height: 334px; background: url(../image/3/5ht.png)no-repeat 0 center;} .sec03 .center .itemList ul li.ht5.on { width: 166px; height: 334px; background: url(../image/3/5htF.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht7 { width: 166px; height: 334px; background: url(../image/3/7ht.png)no-repeat 0 0 ;} .sec03 .center .itemList ul li.ht7.on { width: 166px; height: 334px; background: url(../image/3/7htF.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht9 { width: 170px; height: 334px; background: url(../image/3/9ht.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht9.on { width: 170px; height: 334px; background: url(../image/3/9htF.png)no-repeat 0 0;} .sec03 .center .itemList ul li.ht10 { width: 147px; height: 334px; background: url(../image/3/10ht.png)no-repeat 0 0 ;} .sec03 .center .itemList ul li.ht10.on { width: 147px; height: 334px; background: url(../image/3/10htF.png)no-repeat 0 0;} .sec03 .center .gauge { position: absolute; bottom: -35px; left: -43px; width:1068px; height: 81px; background: url(../image/3/percent-off.png)no-repeat; } .sec03 .center .gauge .gauge-on { content:""; display: block; position: absolute; top:0; left:0; width:100%; height:100%; background: url(../image/3/percent-on.png) no-repeat 0 0; } .sec03 .center .gauge.reward10 .gauge-on {width:116px;} .sec03 .center .gauge.reward30 .gauge-on {width:282px;} .sec03 .center .gauge.reward50 .gauge-on {width:449px;} .sec03 .center .gauge.reward70 .gauge-on {width:615px;} .sec03 .center .gauge.reward90 .gauge-on {width:781px;} .sec03 .center .gauge.reward100 .gauge-on {width:951px;} /* .sec03 .center .gauge.total_50 { background: url(../image/3/total_50.png)no-repeat; } .sec03 .center .gauge.total_70 { background: url(../image/3/total_70.png)no-repeat; } .sec03 .center .gauge.total_100 { background: url(../image/3/total_100.png)no-repeat; } .sec03 .center .gauge.total_full { background: url(../image/3/total_full.png)no-repeat; } */ .sec03 .center .gauge .number { position: absolute; display: flex; gap: 122px; left: 104px; top: 65px;} .sec03 .center .gauge .number span { font-size: 20px; color:#bc9261; } .sec03 .center .reservation { width:277px; height: 63px; margin-top: 95px; background: url(../image/3/btn.png)no-repeat; cursor: pointer; opacity: 0; } .sec03 .center .caution { width:99px; height: 15px; margin-top: 35px; background: url(../image/3/cause.png)no-repeat; cursor: pointer; opacity: 0; } .sec03 .center .cautionS03 { width:99px; height: 18px; margin-top: 35px; background: url(../image/3/cause.png)no-repeat; cursor: pointer; opacity: 0; } .sec03.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec03.fp-completely .box { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec03.fp-completely .itemList { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec03.fp-completely .reservation { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec03.fp-completely .caution { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec03.fp-completely .cautionS03 { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec03.fp-completely .center > img { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec03 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec03 .goTo>div { cursor: pointer; } .sec03.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec04 { position: relative; background: url(../image/4/back.png) no-repeat; background-size: cover; transition: all 0.4s ease-in-out; } .sec04.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform;} .sec04 .character .titleWrap { position: absolute; left: 42.5%; top: 14.5%; transform: translate(-50%, -50%); display: flex; justify-content: center; flex-direction: column; align-items: center; opacity: 0;} .sec04 .character .titleWrap .emblem { position: absolute; width: 280px; height: 210px; background: url(../image/4/emblem.png)no-repeat; } .sec04 .character .titleWrap .title { width: 159px; height: 57px; background: url(../image/4/class.png)no-repeat center; } .sec04 .character .titleWrap .line { width: 379px; height: 12px; margin: 8px 0 11px 0; background: url(../image/4/characterLine.png)no-repeat; } .sec04 .character .titleWrap p { color: #fff; font-weight: 100; } .sec04 .character .characterList .sorceress { position: absolute; left: 26%; transform: translateX(-50%); width: 200px; height: 587px; } .sec04 .character .characterList .archer { position: absolute; left: 36%; transform: translateX(-50%); width: 200px; height: 655px; } .sec04 .character .characterList .paladin { position: absolute; left: 50%; transform: translateX(-50%); width: 200px; height: 519px; margin: -10px -22px;} .sec04 .character .characterList .warrior { position: absolute; left: 63%; transform: translateX(-50%); width: 200px; height: 543px; } .sec04 .character .characterList .warlock { position: absolute; right: 15%; transform: translateX(-50%); width: 200px; height: 321px; } .sec04 .character .characterList .plusBtn { position: absolute; width: 63px; height: 63px; background: url(../image/4/charPlusBtn.png)no-repeat; cursor: pointer; z-index: 1; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec04 .character .characterList .plusBtn.on{width: 154px; transition: all 0.6s ease-in-out; } .sec04 .character .characterList .sorceress .plusBtn { left: 35px; top: 13%; } .sec04 .character .characterList .sorceress .plusBtn:hover , .sec04 .character .characterList .sorceress .plusBtn.on { width: 172px; background: url(../image/4/sorceressBtn.png) no-repeat; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform;} .sec04 .character .characterList .archer .plusBtn { left: 40px; top: 0; } .sec04 .character .characterList .archer .plusBtn:hover , .sec04 .character .characterList .archer .plusBtn.on { width: 172px; background: url(../image/4/archerBtn.png) no-repeat; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform;} .sec04 .character .characterList .paladin .plusBtn:hover , .sec04 .character .characterList .paladin .plusBtn.on{ width: 172px; background: url(../image/4/paladinBtn.png) no-repeat; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec04 .character .characterList .warrior .plusBtn { left: 15px; top: 50px; } .sec04 .character .characterList .warrior .plusBtn:hover , .sec04 .character .characterList .warrior .plusBtn.on { width: 164px; background: url(../image/4/warriorBtn.png) no-repeat; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform;} .sec04 .character .characterList .warlock .plusBtn { left: 72px; top: 5px; } .sec04 .character .characterList .warlock .plusBtn:hover , .sec04 .character .characterList .warlock .plusBtn.on { width: 165px; background: url(../image/4/warlockBtn.png) no-repeat; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform;} .sec04 .characterMore .sorceressCon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100vh; width: 100%; background: url(../image/4/sorceressMore.png)no-repeat center; background-size: cover; display: none; } .sec04 .characterMore .goBack { position: absolute; left: -52px; bottom: 0; width: 121px; height: 43px; background: url(../image/4/goBackBtn.png)no-repeat; cursor: pointer; } /* .sec04 .characterMore .info.sorInfo .goBack { left: -20px; } */ /* .sec04 .characterMore .info.arcInfo .goBack { left: -114px; } */ /* .sec04 .characterMore .info.palInfo .goBack { left: -106px; } */ /* .sec04 .characterMore .info.warrInfo .goBack { left: -69px; } */ /* .sec04 .characterMore .info.warlInfo .goBack { left: -89px; } */ .sec04 .characterMore .sorceressCon .sorvideo { border: 1px solid #2859cb; } .sec04 .characterMore .archerCon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100vh; width: 100%; background: url(../image/4/archerMore.png)no-repeat center; background-size: cover; display: none; } .sec04 .characterMore .archerCon .arcvideo { border: 1px solid #19946b; } .sec04 .characterMore .paladinCon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100vh; width: 100%; background: url(../image/4/palMore.png)no-repeat center; background-size: cover; display: none; } .sec04 .characterMore .paladinCon .palvideo { border: 1px solid #d1b478; } .sec04 .characterMore .warriorCon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100vh; width: 100%; background: url(../image/4/warrMore.png)no-repeat center; background-size: cover; display: none; } .sec04 .characterMore .warriorCon .warrvideo { border: 1px solid #a71b1c; } .sec04 .characterMore .warlockCon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 100vh; width: 100%; background: url(../image/4/warlMore.png)no-repeat center; background-size: cover; display: none; } .sec04 .characterMore .warlockCon .warlvideo { border: 1px solid #7348cb; } .sec04 .characterMore .info { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; } .sec04 .characterMore .info.palInfo img.tit { top: 4px; position: relative; } .sec04 .characterMore .info.arcInfo img.tit { top: -4px; position: relative; } .sec04 .characterMore > div .info {width: 700px !important; left: 254px;} .sec04 .characterMore .info ul { display: flex; padding-top: 11px; gap: 6px; } .sec04 .characterMore .info ul li { width: 73px; height: 84px; cursor: pointer; } .sec04 .characterMore .info ul li.sor { background: url(../image/4/nameList1.png)no-repeat; } .sec04 .characterMore .info ul li.sor:hover, .sec04 .characterMore .info ul li.sor.active { background: url(../image/4/sorSelect.png)no-repeat; } .sec04 .characterMore .info ul li.arc { background: url(../image/4/nameList2.png)no-repeat; } .sec04 .characterMore .info ul li.arc:hover, .sec04 .characterMore .info ul li.arc.active { background: url(../image/4/arcSelect.png)no-repeat; } .sec04 .characterMore .info ul li.pal { background: url(../image/4/nameList3.png)no-repeat; } .sec04 .characterMore .info ul li.pal:hover, .sec04 .characterMore .info ul li.pal.active { background: url(../image/4/palSelect.png)no-repeat; } .sec04 .characterMore .info ul li.warr { background: url(../image/4/nameList4.png)no-repeat; } .sec04 .characterMore .info ul li.warr:hover, .sec04 .characterMore .info ul li.warr.active { background: url(../image/4/warrSelect.png)no-repeat; } .sec04 .characterMore .info ul li.warl { background: url(../image/4/nameList5.png)no-repeat; } .sec04 .characterMore .info ul li.warl:hover, .sec04 .characterMore .info ul li.warl.active { background: url(../image/4/warlSelect.png)no-repeat; } .sec04 .characterMore .info p { font-size: 22px; color: #fff; margin: 15px 0 10px 0; } .sec04 .characterMore .info .ability { display: flex; flex-direction: column; justify-content: center; align-items: center; } .sec04 .characterMore .info .ability .tit { height: 111px; } .sec04 .characterMore .info .ability .line { margin: 33px 0 36px 0; } .sec04 .characterMore .info .ability .videoWrap { position: relative; width: 482px; height: 267px; margin-bottom: 29px; } .sec04 .characterMore .info .ability .videoWrap.sorvideo { background: url('../image/4/sorThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .characterMore .info .ability .videoWrap.arcvideo { background: url('../image/4/arcThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .characterMore .info .ability .videoWrap.palvideo { background: url('../image/4/palThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .characterMore .info .ability .videoWrap.warrvideo{ background: url('../image/4/warrThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .characterMore .info .ability .videoWrap.warlvideo{ background: url('../image/4/warlThumbnail.PNG') no-repeat center center; background-size: cover; } .sec04 .characterMore .info .ability .videoWrap .playBtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 109px; height: 106px; background: url(../image/4/playBtn.png) no-repeat; cursor: pointer } .sec04 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec04 .goTo>div { cursor: pointer; } .sec04.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec05 { position: relative; background: url(../image/5/bg.png) no-repeat; background-size: cover; } .sec05 .center { display: flex; justify-content: center; align-items: center; flex-direction: column; } .sec05 .center .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 50px; opacity: 0; } .sec05 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; background: url(../image/5/emblem.png)no-repeat; } .sec05 .center .titleWrap .title { width:159px; height: 57px; background: url(../image/5/title.png)no-repeat; } .sec05 .center .titleWrap .line { width:379px; height: 12px; margin:8px 0 11px 0; background: url(../image/5/line.png)no-repeat; } .sec05 .center .titleWrap p { text-align: center; color:#621900; font-weight: 500; font-size: 18px;} .sec05 .center .videoWrap { position: relative; width:1085px; height: 546px; background: url(../image/5/box.png)no-repeat; opacity: 0; } .sec05 .center .videoWrap .thum { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width:885px; height: 510px; background: url(../image/7/라덴\ 공작성.jpg) no-repeat; background-size: cover; } .sec05 .center .videoWrap .playBtn { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width:135px; height: 131px; background: url(../image/5/playBtn.png)no-repeat; cursor: pointer; } .sec05.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec05.fp-completely .videoWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec05 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec05 .goTo>div { cursor: pointer; } .sec05.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec05-1 { position: relative; background: url(../image/5-1/bg.png) no-repeat; background-size: cover; } .sec05-1 .center { display: flex; justify-content: center; align-items: center; flex-direction: column; } .sec05-1 .center .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 35px; opacity: 0; } .sec05-1 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; background: url(../image/5-1/emblem.png)no-repeat; } .sec05-1 .center .titleWrap .title { width: 273px; height: 58px; background: url(../image/5-1/title.png)no-repeat; } .sec05-1 .center .titleWrap .line { width:379px; height: 12px; margin:8px 0 11px 0; background: url(../image/5-1/line.png)no-repeat; } .sec05-1 .center .titleWrap p { text-align: center; color:#fff; font-weight: 100; } .sec05-1 .center .centerFrame {width: 665px; height: 370px; overflow: hidden; border: 1px solid #676767; box-sizing: border-box; left: 1px; position: relative; opacity: 0;} .sec05-1 .center .centerFrame .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; margin: 0 auto; display: block; } .sec05-1 .center div.tab_box_wrap { width: 664px; margin: 0 auto; } .sec05-1 .center div.tab_box_wrap.text_copy { width: 358px; height: 134px; margin:0 auto 20px ; opacity: 0;} .sec05-1 .center ul.tab_btn { width: 666px; height: 87px; display: flex; flex-direction: row; margin-bottom: 47px; background:url(../image/5-1/slide_btn_bg.png) no-repeat; opacity: 0;} .sec05-1 .center ul.tab_btn li{width: 25%; position: relative;} .sec05-1 .center ul.tab_btn li.btn2 { left: 2px; margin-left: 1.3px;} .sec05-1 .center ul.tab_btn li.btn3 { left: 2px;} .sec05-1 .center ul.tab_btn li a{width:100%; height: 86px; display:block;} .sec05-1 .center ul.tab_btn li.btn1 a{background: url(../image/5-1/slide_btn_1.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn2 a{background: url(../image/5-1/slide_btn_2.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn3 a{background: url(../image/5-1/slide_btn_3.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn4 a{background: url(../image/5-1/slide_btn_4.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn1 a.on{background: url(../image/5-1/slide_btn_1_on.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn2 a.on{background: url(../image/5-1/slide_btn_2_on.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn3 a.on{background: url(../image/5-1/slide_btn_3_on.png) no-repeat;} .sec05-1 .center ul.tab_btn li.btn4 a.on{background: url(../image/5-1/slide_btn_4_on.png) no-repeat;} .sec05-1 .center .navigationWrap{ position: relative; top: -170px; width: 838px; opacity: 0; left: -80px; } .sec05-1 .center .swiper-button-next { top:50% !important; } .sec05-1 .center .swiper-button-prev { top:50% !important; } .sec05-1 .center .go_lounge{display: block; margin: 0 auto; text-align: center; opacity: 0;} .sec05-1 .center .noti_txt {display: block; margin: 0 auto 20px; text-align: center; opacity: 0;} .sec05-1.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec05-1.fp-completely .center .slideLine { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec05-1.fp-completely .centerFrame { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec05-1.fp-completely .center ul.tab_btn { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec05-1.fp-completely .navigationWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec05-1.fp-completely .go_lounge { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec05-1.fp-completely .center .tab_box_wrap.text_copy {-webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec05-1.fp-completely .center .noti_txt {-webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec05-1 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec05-1 .goTo>div { cursor: pointer; } .sec05-1.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } /* */ .sec05-2 { position: relative; background: url(../image/5-2/bg.png) no-repeat; background-size: cover; } .sec05-2 .center { display: flex; justify-content: center; align-items: center; flex-direction: column; } .sec05-2 .center .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 35px; opacity: 0; } .sec05-2 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; background: url(../image/5-2/emblem.png)no-repeat; } .sec05-2 .center .titleWrap .title { width: 273px; height: 58px; background: url(../image/5-2/title.png)no-repeat; } .sec05-2 .center .titleWrap .line { width:379px; height: 12px; margin:8px 0 11px 0; background: url(../image/5-2/line.png)no-repeat; } .sec05-2 .center .titleWrap p { text-align: center; color:#fff; font-weight: 100; } .sec05-2 .center .centerFrame {width: 665px; height: 370px; overflow: hidden; border: 1px solid #676767; box-sizing: border-box; left: 1px; position: relative; opacity: 0;} .sec05-2 .center .centerFrame .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; margin: 0 auto; display: block; } .sec05-2 .center div.tab_box_wrap { width: 664px; margin: 0 auto; } .sec05-2 .center div.tab_box_wrap.text_copy { width: 358px; height: 134px; margin:0 auto 20px ; opacity: 0;} .sec05-2 .center ul.tab_btn { width: 666px; height: 87px; display: flex; flex-direction: row; margin-bottom: 47px; background:url(../image/5-2/slide_btn_bg.png) no-repeat; opacity: 0;} .sec05-2 .center ul.tab_btn li{width: 25%; position: relative;} .sec05-2 .center ul.tab_btn li.btn2 { left: 2px; margin-left: 1.3px;} .sec05-2 .center ul.tab_btn li.btn3 { left: 2px;} .sec05-2 .center ul.tab_btn li a{width:100%; height: 86px; display:block;} .sec05-2 .center ul.tab_btn li.btn1 a{background: url(../image/5-2/slide_btn_1.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn2 a{background: url(../image/5-2/slide_btn_2.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn3 a{background: url(../image/5-2/slide_btn_3.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn4 a{background: url(../image/5-2/slide_btn_4.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn1 a.on{background: url(../image/5-2/slide_btn_1_on.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn2 a.on{background: url(../image/5-2/slide_btn_2_on.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn3 a.on{background: url(../image/5-2/slide_btn_3_on.png) no-repeat;} .sec05-2 .center ul.tab_btn li.btn4 a.on{background: url(../image/5-2/slide_btn_4_on.png) no-repeat;} .sec05-2 .center .navigationWrap{ position: relative; top: -170px; width: 838px; opacity: 0; left: -80px; } .sec05-2 .center .swiper-button-next { top:50% !important; } .sec05-2 .center .swiper-button-prev { top:50% !important; } .sec05-2 .center .go_lounge{display: block; margin: 0 auto; text-align: center; opacity: 0;} .sec05-2 .center .noti_txt {display: block; margin: 0 auto 20px; text-align: center; opacity: 0;} .sec05-2.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec05-2.fp-completely .center .slideLine { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec05-2.fp-completely .centerFrame { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec05-2.fp-completely .center ul.tab_btn { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec05-2.fp-completely .navigationWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec05-2.fp-completely .go_lounge { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec05-2.fp-completely .center .tab_box_wrap.text_copy {-webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec05-2.fp-completely .center .noti_txt {-webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform;} .sec05-2 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec05-2 .goTo>div { cursor: pointer; } .sec05-2.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec06 { position: relative; background: url(../image/6/bg.png) no-repeat; background-size: cover; } .sec06 .center { position: relative; display: flex; padding-bottom: 140px; justify-content: center; align-items: center; flex-direction: column; } .sec06 .center .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 20px; opacity: 0; } .sec06 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; background: url(../image/6/emblem.png)no-repeat; } .sec06 .center .titleWrap .title { width:318px; height: 105px; background: url(../image/6/title.png)no-repeat center center; } .sec06 .center .titleWrap .line { width:379px; height: 12px; margin:8px 0 11px 0; background: url(../image/6/line.png)no-repeat; } .sec06 .center .titleWrap p { text-align: center; color:#fff; font-weight: 100; font-size: 18px;} /* .sec06 .center .slideWrap { position: absolute; width: 826px; left: 50%; top:56%; transform: translate(-50%,-50%); overflow: hidden; z-index: 3; opacity: 0; } */ .sec06 .center .frameWrap { position: relative; left:0; top: 0; width:1050px; height: 480px; z-index: 2; pointer-events: none; opacity: 0; } .sec06 .center .frameWrap .leftFrame { position: absolute; left: 0; top:40px; width:610px; height: 375px; } .sec06 .center .frameWrap .leftFrame .swiper-container .swiper-wrapper .swiper-slide { width: 100% !important; height: 100% !important; } .sec06 .center .frameWrap .centerFrame { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width:826px; height: 462px; 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 .center .frameWrap .rightFrame { position: absolute; right:0; top:40px; width:610px; height: 375px; } .sec06 .center .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: 608px; height: 325px; margin-top: 23px; margin-left: 18px; } .sec06 .swiper-container.rightSwiper { position: relative; z-index: 3; rotate: 5deg; overflow: hidden; width: 595px; height: 325px; margin-top: 23px; } .sec06 .swiper-slide { width:826px !important; height: 457px !important; } .sec06 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .sec06 .swiper-pagination { bottom: 85px !important; opacity: 0; } .sec06 .swiper-pagination-bullet { width: 23px !important; height: 23px !important; background-size: cover; background: url(../image/6/btn.png)no-repeat !important; opacity: 1 !important; } .sec06 .swiper-pagination-bullet-active { background: url(../image/6/selectBtn.png)no-repeat !important; } .sec06 .center .swiper-button-next { top:57% !important; right: 19% !important; transform: translate(-50%,-50%); } .sec06 .center .swiper-button-prev { top:57% !important; left: 20% !important; transform: translate(-50%,-50%); } .sec06 .navigationWrap { opacity: 0; z-index: 10; } .sec06 .swiper-button-disabled { opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important; } .sec06.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec06.fp-completely .slideWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec06.fp-completely .frameWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec06.fp-completely .swiper-pagination { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec06.fp-completely .navigationWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec06 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec06 .goTo>div { cursor: pointer; } .sec06.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec07 { background: url(../image/7/bg.png) no-repeat; background-size: cover; } .sec07 .center { display: flex; flex-direction: column; justify-content: center; align-items: center; } .sec07 .center .titleWrap { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 35px; opacity: 0; } .sec07 .center .titleWrap .emblem { position: absolute; width: 280px; height: 210px; background: url(../image/7/emblem.png)no-repeat; } .sec07 .center .titleWrap .title { width:220px; height: 54px; background: url(../image/7/title.png)no-repeat; } .sec07 .center .titleWrap .line { width:379px; height: 12px; margin:8px 0 11px 0; background: url(../image/7/line.png)no-repeat; } .sec07 .center .titleWrap p { text-align: center; color:#fff; font-weight: 100; } .sec07 .center .slideWrap { width: 860px; height: 470px; margin-bottom: 11px; overflow: hidden; opacity: 0; } .sec07 .center .thumbsWrap { position: relative; opacity: 0; } .sec07 .center .slideLine { height: 18px; margin: 17px 0 25px; opacity: 0; } .sec07 .center .gallery-top { height: 474px; } .sec07 .center .gallery-top .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .sec07 .center .frame { position: absolute; width:876px; height: 486px; margin-top:-65px; pointer-events: none; opacity: 0; z-index: 2;} .sec07 .center .swiper-slide img { width:205px; height: 115px; object-fit: cover; cursor: pointer; } .sec07 .center .gallery-thumbs { width:860px; overflow: hidden; } .sec07 .center .thumbs { border:1px solid #7c7c7c; } .sec07 .center .thumbs.selected { border:2px solid #ca995a; overflow: hidden; } .sec07 .center .thumbs img { vertical-align: middle; } .sec07 .center .swiper-button-next { top:50% !important; right: -9% !important; } .sec07 .center .swiper-button-prev { top:50% !important; left: -9% !important; } .sec07.fp-completely .titleWrap { -webkit-animation: motion-fade-in-down 0.4s ease-in-out both; animation: motion-fade-in-down 0.4s ease-in-out both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; will-change: transform; } .sec07.fp-completely .center .slideLine { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; will-change: transform; } .sec07.fp-completely .frame { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec07.fp-completely .slideWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec07.fp-completely .thumbsWrap { -webkit-animation: motion-fade-in 0.4s ease-in-out both; animation: motion-fade-in 0.4s ease-in-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; will-change: transform; } .sec07 .gallery-top .swiper-slide { width:860px !important; height: 486px; } .sec07 .goTo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding-right: 14px; display: flex; flex-direction: column; gap: 25px; opacity: 0; } .sec07 .goTo>div { cursor: pointer; } .sec07.fp-completely .goTo { -webkit-animation: motion-fade-in 0.4s ease-out both; animation: motion-fade-in 0.4s ease-out both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sec08 { height: 270px!important; background: #0d0d0d; } .sec08 .fp-tableCell { height: 270px!important; display: flex; justify-content: center; align-items: center; } .sec08 .fp-tableCell .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .sec08 .fp-tableCell .inner .img-wrap { width: 76px; height: 73px; } .sec08 .fp-tableCell .inner img { width: 100%; height: 100%; object-fit: contain; } .sec08 .fp-tableCell .inner .copy { text-align:center; font-size: 12px; color: #a1a1a1; font-weight: 100; } .sec08 .footer .inner .limits { display: flex; justify-content: center; } .sec08 .footer .inner .limits { display: flex; margin:0 0 0 190px; } .sec08 .footer .inner .limits p { width:99px; } .sec08 .footer .inner .limits > div { width:450px; padding:0 0 0 38px; } .sec08 .footer .inner .limits > div ul { padding:15px 0 0 0; } .sec08 .footer .inner .limits > div ul li{ position: relative; text-align: left; font-size: 12px; color:#696969; line-height: 20px; padding:0 0 3px 15px; } .sec08 .footer .inner .limits > div ul li::before { content:''; display: block; width:3px; height:3px; background:#696969; position: absolute; top:50%; left:0; margin-top:-2px; border-radius:50%; } /*비디오팝업*/ .dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.9; z-index: 2; display: none; } .popup { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 3; display: none; } .introVideoPop .videoWrap { position: relative; width: 1085px; height: 546px; background:url(../image/1/videoBox.png)no-repeat; padding: 13px; } .introVideoPop .videoWrap .xbtn { position: absolute; right: 15px; top: 0; cursor: pointer; } .introVideoPop .videoWrap .video { position: absolute; left: 94px; top: 12px; } /* .videoPop .videoWrap { position: relative; width: 1085px; height: 546px; background:url(../image/1/toBePop.png)no-repeat center; padding: 13px; } */ .videoPop .videoWrap { position: relative; width: 1085px; height: 546px; background:url(../image/1/videoBox.png)no-repeat; padding: 13px; } .videoPop .videoWrap .xbtn { position: absolute; right: 15px; top: 0; cursor: pointer; } .videoPop .videoWrap .video { position: absolute; left: 94px; top: 12px; } /*개인정보 수집 이용 동의*/ .privatePop .privateWrap { position: relative; width: 637px; height: 515px; background:url(../image/2/privatePop.png)no-repeat center/contain; } .privatePop .privateWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*이벤트 등 프로모션 알림*/ .eventPop .eventWrap { position: relative; width: 637px; height: 405px; background:url(../image/2/eventPop.png)no-repeat center/contain; } .eventPop .eventWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*이벤트참여 주의사항*/ .cautionPop .cautionWrap { position: relative; width: 637px; height: 375px; background:url(../image/2/cautionPop2.png)no-repeat center/contain; } .cautionPop .cautionWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } .cautionSec03 .cautionWrap { position: relative; width: 637px; height: 375px; background:url(../image/3/evpc.png)no-repeat center/contain; } .cautionSec03 .cautionWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*추후 공개*/ .toBePop .toBeWrap { position: relative; width: 607px; height: 255px; background:url(../image/1/toBePop.png)no-repeat; } .toBePop .toBeWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*인증실패*/ .failPop .failWrap { position: relative; width: 607px; height: 255px; background:url(../image/2/failPop.png)no-repeat; } .failPop .failWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*인증성공*/ .successPop .successWrap { position: relative; width: 607px; height: 255px; background:url(../image/2/successPop.png)no-repeat; } .successPop .successWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*구글사전등록팝업*/ .reservePop .reserveWrap { position: relative; width: 607px; height: 255px; background:url(../image/2/reservePop.png)no-repeat; } .reservePop .reserveWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*애플사전등록팝업*/ .reserveApplePop .reserveWrap { position: relative; width: 607px; height: 255px; background:url(../image/2/reservePop2.png)no-repeat; } .reserveApplePop .reserveWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*메세지팝업*/ .alertPop .alertWrap { position: relative; width: 607px; height: 255px; background:url(../image/bg-pop-alert.png)no-repeat; } .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 50px; } .alertPop .alertWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; width: 35px; height: 35px; } /* 사전예약 완료 팝업*/ .reserveFinishPop .reserveWrap { position: relative; width: 607px; height: 255px; background:url(../image/finishPop.png)no-repeat; } .reserveFinishPop .reserveWrap a { display: block; position: absolute; top:136px; left:50%; width:130px; height:34px; } .reserveFinishPop .reserveWrap .btn-go-googleplay{ margin-left:-133px; } .reserveFinishPop .reserveWrap .btn-go-mycard{ margin-left:-133px; } .reserveFinishPop .reserveWrap .btn-go-appstore{ margin-left:2px; } .reserveFinishPop .reserveWrap .xbtn { position: absolute; right: -50px; top: 0; cursor: pointer; } /*animation*/ @-webkit-keyframes motion-fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -60px, 0); transform: translate3d(0, -60px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes motion-fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -60px, 0); transform: translate3d(0, -60px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes motion-fade-in-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes motion-fade-in-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-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%); } } @-webkit-keyframes motion-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes motion-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes motion-fade-in-left { 0% { opacity: 0; -webkit-transform: translate3d(-7%, 0, 0); transform: translate3d(-7%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes motion-fade-in-left { 0% { opacity: 0; -webkit-transform: translate3d(-7%, 0, 0); transform: translate3d(-7%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes motion-fade-in-right { 0% { opacity: 0; -webkit-transform: translate3d(7%, 0, 0); transform: translate3d(7%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes motion-fade-in-right { 0% { opacity: 0; -webkit-transform: translate3d(7%, 0, 0); transform: translate3d(7%, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } }