@charset "UTF-8";
/*
 *  File Name : /promotion/css/hoppity_quest.css
 *  Description : 프로모션 HOPPITY QUEST
 */

/* layerpopup - roulette-info */
.layerpopup-roulette-info .layer-contents .step-list {margin-top: 15px;}
.layerpopup-roulette-info .layer-contents .step-list > li {margin-right: 38px;}
.layerpopup-roulette-info .layer-contents .step-list > li:last-child {margin-right: 0;}
.layerpopup-roulette-info .layer-contents .step-list > li * {font-family: var(--ft-family_Poppins-500); }
.layerpopup-roulette-info .layer-contents .step-list > li .desc {margin-top: 5px; line-height: 1.6;}
.layerpopup-roulette-info .contents-area {margin-top: 10px;}

/* layerpopup - sns-channel-guide */
.layerpopup-sns-channel-guide .sns-btns-comm {display: inline-block;}
.layerpopup-sns-channel-guide .sns-btns-comm [class*=btn-item] {display: inline-block; width: 22px; height: 22px; margin: 0; vertical-align: middle;}
.layerpopup-sns-channel-guide .ico-share img {vertical-align: middle;}

/* contents - main visual */
.section-visual {position: relative; height: 780px;}
.section-visual video {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.section-visual-btns {z-index: 10; position: absolute; left: 50%; top: 544px; transform: translate(-50%);}
.section-visual-btns > * {width: 319px; height: 84px; margin: 0 4px; background-position: 0 0; background-size: 319px; background-repeat: no-repeat;}
.section-visual-btns .btn-play-now {background-image: url(../images/hoppity_quest/btn_play-now.png?v=2504090000);}
.section-visual-btns .btn-learn-more {background-image: url(../images/hoppity_quest/btn_learn-more.png);}
.section-visual-btns > *:hover {background-position-y: -84px;}

/* contents - event */
.section-event {z-index: 1; position: relative; height: 2077px; margin-top: -187px; background: url(../images/hoppity_quest/bg_event.png) center top no-repeat; background-size: cover;}
.section-event > .inner {display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding-top: 152px; box-sizing: border-box;}

/* contents - event: mission & roulette */
.roulette-mission-wrap {width: 1652px; height: 974px; background: url(../images/hoppity_quest/bg_roulette_frame.png) 0 0 no-repeat;}
.roulette-mission-wrap > .inner {display: flex; height: 100%; padding: 66px 95px 84px; box-sizing: border-box;}
.roulette-mission-wrap > .inner > [class*="-area"] {position: relative; box-sizing: border-box;}

/* contents - event: mission */
.roulette-mission-wrap .mission-area {width: 635px; margin-left: 80px; margin-top: 170px;}
.roulette-mission-wrap .mission-area::after {content: ""; display: inline-block; position: absolute; left: 12px; top: 10px; width: 611px; height: 546px; background: url(../images/hoppity_quest/bg_roulette_mission_hide.png?ver=2) 0 0 no-repeat;}
.roulette-mission-wrap .mission-area .mission-list [class^=list-item] {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; padding: 6px 8px 9px 75px; margin-bottom: 17px; box-sizing: border-box;}
.roulette-mission-wrap .mission-area .mission-list [class^=list-item]:last-child {margin-bottom: 0;}
.roulette-mission-wrap .mission-area .mission-list .mission-txt {display: inline-block; margin-top: 12px;}
.roulette-mission-wrap .mission-area .mission-list .al-right {display: flex; justify-content: space-between; align-items: center; width: 275px; margin-top: 3px;}
.roulette-mission-wrap .mission-area .mission-list .btn-mission {position: relative; width: 164px; height: 61px; background: url(../images/hoppity_quest/btn_mission.png?v=2503250000);}
.roulette-mission-wrap .mission-area .mission-list .btn-mission:not(.disabled):hover {background-position-y: -61px;}
.roulette-mission-wrap .mission-area .mission-list .btn-mission .txt-area {display: flex; justify-content: center; align-items: center; position: absolute; left: 8px; top: 5px; width: 148px; height: 42px;}
.roulette-mission-wrap .mission-area .mission-list .btn-mission .txt-area .txt {position: absolute; background: linear-gradient(to bottom, #FFF3B2 0%, #FFDD67 57%, #FF8227 100%); color: transparent; -webkit-background-clip: text !important; font-family: var(--ft-family_MPLUSRounded1c-900); font-size: 20px;}
.roulette-mission-wrap .mission-area .mission-list .btn-mission .txt-area .txt:nth-child(1) {text-shadow: 0px -1px 3.7px rgba(116, 42, 42, 0.09), 0px 0.5px 3.6px #BB4E4E, 0px 0.5px 1.5px #742A2A, 0px 1px 5px rgba(116, 42, 42, 0.25); -webkit-text-stroke-width: 5px; -webkit-text-stroke-color: #7B2D2D;}
.roulette-mission-wrap .mission-area .mission-list .btn-mission.disabled {background-position-y: -122px; cursor: default; pointer-events: none;}
.roulette-mission-wrap .mission-area .mission-list .btn-mission.disabled .txt-area .txt {background: linear-gradient(to bottom, #E7D1A9 0%, #E7CC94 57%, #E3B27E 100%);}
.roulette-mission-wrap .mission-area .mission-list .btn-mission.disabled .txt-area .txt:nth-child(1) {text-shadow: 0px -1px 3.7px rgba(101, 56, 56, 0.09), 0px 0.2px 0px #653838, 0px 0.5px 2.2px #A85B5B, 0px 0.5px 2.2px #8B4646, 0px 1.5px 1.5px #7D513E, 0px 1px 3px #7D513E; -webkit-text-stroke-color: #633636;}
.roulette-mission-wrap .mission-area .btm-infobox {display: none; position: absolute; top: 485px;}
.roulette-mission-wrap .mission-area .mission-noti {position: absolute; left: -1.5%; bottom: 2.7%;}
.roulette-mission-wrap .mission-area .gauge-wrap {margin-right: 20px;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-container {position: relative; width: 490px; height: 48px; padding: 7px 9px; box-sizing: border-box;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-container > .inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%); width: 460px; height: 23px;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-container .gauge-bar {overflow: hidden;  display: inline-block; width: 0%; height: 100%; background: linear-gradient(90deg, #FF8A00 0%, #FFB400 100%); border-radius: 10px; box-shadow: 0px -1px 0.8px 0px #C86000 inset, 0px -3.5px 1.2px 0px #DC6C04 inset, 0px -4px 2.2px 0px #F69500 inset, 0px 2.5px 1px 0px #FFE839 inset, 0px 3px 2.2px 0px #FFBA03 inset, 0px 4px 2.9px 0px rgba(231, 124, 1, 0.80) inset; transition: width 1s ease-in-out;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator {display: flex; margin-top: 10px;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator [class*=tick] {height: 30px; margin-right: 70px; background-position: 0 0 ; background-repeat: no-repeat;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator [class*=tick]:last-child {margin-right: 0;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator [class*=tick]:not(.tick-0).active {background-position-y: -30px;}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator .tick-0 {width: 32px; height: 36px; background-image: url(../images/hoppity_quest/gauge_indicator/tick_egg.png);}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator .tick-25 {width: 39px; background-image: url(../images/hoppity_quest/gauge_indicator/tick_25.png?ver=2);}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator .tick-50 {width: 41px; background-image: url(../images/hoppity_quest/gauge_indicator/tick_50.png);}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator .tick-75 {width: 40px; background-image: url(../images/hoppity_quest/gauge_indicator/tick_75.png);}
.roulette-mission-wrap .mission-area .gauge-wrap .gauge-indicator .tick-100 {width: 56px; background-image: url(../images/hoppity_quest/gauge_indicator/tick_100.png);}
.roulette-mission-wrap .mission-area .countbox-wrap {display: flex; justify-content: center; align-items: center; width: 126px; height: 80px; padding: 7px 8px; box-sizing: border-box;}
.roulette-mission-wrap .mission-area .countbox-wrap .icon {display: inline-block; margin-left: -10px;}
.roulette-mission-wrap .mission-area .countbox-wrap .icon img {animation: AniScaleRepeat 2.5s ease-in-out infinite;}
.roulette-mission-wrap .mission-area .countbox-wrap .txt-area {display: flex; align-items: center; position: relative; margin-left: -4px;}
.roulette-mission-wrap .mission-area .countbox-wrap .txt-area .txt {width: 100%; background: linear-gradient(to bottom, #FFBE15 0%, #FF621F 100%); color: transparent; -webkit-background-clip: text; font-family: var(--ft-family_MPLUSRounded1c-900); font-size: 24px;}
.roulette-mission-wrap .mission-area .countbox-wrap .txt-area .txt:nth-child(1) {position: absolute; left: .5px; top: -.5px}
.roulette-mission-wrap .mission-area .countbox-wrap .txt-area .txt:nth-child(2) {text-shadow: 0px 1.5px 0px #7E3416, 0px 4px 1px #290C07, 0px 3.5px 3px #290C07, 0px 6px 5px rgba(41, 12, 7, 0.70); -webkit-text-stroke-width: .5px; -webkit-text-stroke-color: #7B2D2D;}
.roulette-mission-wrap .mission-area .countbox-wrap .txt-area .num {display: inline-block;}	

/* contents - event: roulette */
.roulette-mission-wrap .roulette-area {width: calc(100% - 715px);}
.roulette-mission-wrap .roulette-area .utility-btns {display: flex; z-index: 10; position: absolute; left: 485px; top: 54px; width: 182px; height: 60px;}
.roulette-mission-wrap .roulette-area .utility-btns .utility-item {position: relative; width: 56px; height: 100%; padding: 12px 5px; margin-right: 7px; box-sizing: border-box;}
.roulette-mission-wrap .roulette-area .utility-btns .utility-item:last-child {margin-right: 0;}
.roulette-mission-wrap .roulette-area .utility-btns .utility-item > [class^=btn-] {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 43px; height: 43px; background: url(../images/hoppity_quest/icon_utility.png?v=2503250000) 0 0 no-repeat;}
.roulette-mission-wrap .roulette-area .utility-btns .utility-item:nth-child(2) > [class^=btn-] {background-position-y: -43px;}
.roulette-mission-wrap .roulette-area .utility-btns .utility-item:nth-child(3) > [class^=btn-] {background-position-y: -86px;}
.roulette-mission-wrap .roulette-area .utility-btns .utility-item > [class^=btn-]:hover {background-position-x: -43px;}
.roulette-mission-wrap .roulette-area .roulette-wheel {position: absolute; top: 68px; width: 699px; height: 718px; background: url(../images/hoppity_quest/bg_roulette_wheel.png?v=2503250000) 0 0 no-repeat;}
.roulette-mission-wrap .roulette-area .roulette-wheel::before {content: ""; display: inline-block; z-index: 1; position: relative; width: 100%; height: 100%; background: url(../images/hoppity_quest/roulette_wheel_line.png) center 40px no-repeat;}
.roulette-mission-wrap .roulette-area .roulette-wheel .panel {position: absolute; left: 73px; top: 75px; /* transform: translate(calc(-50% - 2px), calc(-50% - 9px)); */ transform-origin: center;}
.roulette-mission-wrap .roulette-area .roulette-wheel .roulette-indicator {z-index: 1; position: absolute; left: 198px; top: 0; }
.roulette-mission-wrap .roulette-area .roulette-wheel .btn-roulette-spin {z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 2px), calc(-50% - 6px)); width: 132px; height: 132px; background: url(../images/hoppity_quest/btn_roulette_spin.png) 0 0 no-repeat;}
.roulette-mission-wrap .roulette-area .roulette-wheel .btn-roulette-spin:hover {background-position-y: -132px;}
.roulette-mission-wrap .roulette-area .btn-view-prize {z-index: 1; position: absolute; left: 38%; bottom: 15px; width: 133px; height: 23px; background: url(../images/hoppity_quest/btn_view-prize.png) 0 0 no-repeat;}
.roulette-mission-wrap .roulette-area .btn-view-prize:hover {background-position-y: -23px;}

/* contents - event: rules */
.event-rules-wrap {height: calc(100% - 974px); margin-top: 55px;}
.event-rules-wrap * {font-family: var(--ft-family_NotoSans-400); line-height: 1;}
.event-rules-wrap .section-title {margin-bottom: 35px; color: #D4EED8; font-family: var(--ft-family_NotoSans-700); font-size: 50px; letter-spacing: -1px;}
.event-rules-wrap .event-rules dt {margin-bottom: 25px; color: #D4EED8; font-size: 29px; letter-spacing: -.6px; }
.event-rules-wrap .event-rules dd {color: #779A7D; font-size: 20px; letter-spacing: -.4px; line-height: 1.8;}
.event-rules-wrap .event-rules dd + dt,
.event-rules-wrap .event-noti {margin-top: 35px;}
.event-rules-wrap .event-noti {color: #57795C; font-size: 17px; letter-spacing: -.3px;}
.event-rules-wrap .layout-inner .img_character {z-index: -1; position: absolute; right: -160px; bottom: 0;}

/* login active */
.login-active .roulette-mission-wrap .mission-area::after {display: none;}
.login-active .roulette-mission-wrap .mission-area .btm-infobox {display: flex;}

@media all and (min-width: 1921px) { 
    .section-visual {height: 40.625vw;}
    .section-visual-btns {top: calc(28.333vw + calc(var(--header-height) + var(--navi-height)));}
    .section-visual-btns > * {width: 16.6146vw; height: 4.375vw; margin: 0 0.2083vw; background-size: 16.6146vw;}
    .section-visual-btns > *:hover {background-position-y: -4.375vw;}

    .section-event {height: calc(2077px + 7.9167vw); margin-top: -9.74vw;}
    .section-event > .inner {padding-top: 7.9167vw;}
}