@charset "utf-8";
@font-face { font-family: 'PretendardBk'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('./fonts/Pretendard-Black.woff2') format('woff2'), url('./fonts/Pretendard-Black.woff') format('woff');}
@font-face { font-family: 'PretendardEB'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('./fonts/Pretendard-ExtraBold.woff2') format('woff2'), url('./fonts/Pretendard-ExtraBold.woff') format('woff');}
@font-face { font-family: 'PretendardB'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('./fonts/Pretendard-Bold.woff2') format('woff2'), url('./fonts/Pretendard-Bold.woff') format('woff');}
@font-face { font-family: 'PretendardSB'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('./fonts/Pretendard-SemiBold.woff2') format('woff2'), url('./fonts/Pretendard-SemiBold.woff') format('woff');}
@font-face { font-family: 'PretendardM'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('./fonts/Pretendard-Medium.woff2') format('woff2'), url('./fonts/Pretendard-Medium.woff') format('woff');}
@font-face { font-family: 'PretendardR'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('./fonts/Pretendard-Regular.woff2') format('woff2'), url('./fonts/Pretendard-Regular.woff') format('woff');}
@font-face { font-family: 'PretendardL'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('./fonts/Pretendard-Light.woff2') format('woff2'), url('./fonts/Pretendard-Light.woff') format('woff');}
@font-face { font-family: 'PretendardEL'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('./fonts/Pretendard-ExtraLight.woff2') format('woff2'), url('./fonts/Pretendard-ExtraLight.woff') format('woff');}
@font-face { font-family: 'PretendardT'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('./fonts/Pretendard-Thin.woff2') format('woff2'), url('./fonts/Pretendard-Thin.woff') format('woff');}
@font-face { font-family: 'PretendardJP'; font-weight: 400; font-display: swap; src: local('Pretendard JP Regular'), url('./fonts/PretendardJP-Regular.woff2') format('woff2'), url('./fonts/PretendardJP-Regular.woff') format('woff');}

@font-face {font-family: 'NotoR';src: url("./fonts/NotoSans-Regular.woff") format('woff');font-display: swap;}
@font-face {font-family: 'SinbiR';src: url("./fonts/SSShinb7Regular.woff") format('woff');font-display: swap;}
@font-face {font-family: 'Goryeong';src: url("./fonts/GoryeongStrawberry.woff2") format('woff2');font-display: swap;}
@font-face {font-family: 'SBAggroB';src: url("./fonts/SBAggroB.woff") format('woff');font-display: swap;}
@font-face {font-family: 'SBAggroM';src: url("./fonts/SBAggroM.woff") format('woff');font-display: swap;}
@font-face {font-family: 'SBAggroL';src: url("./fonts/SBAggroL.woff") format('woff');font-display: swap;}
@font-face {font-family: 'GmarketM';src: url("./fonts/GmarketSansMedium.woff") format('woff');font-display: swap;}


/*=========================================================================================================
* common
=========================================================================================================*/
*, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; -webkit-tap-highlight-color:transparent;}
*:focus { outline: none; }
html, body {margin: 0; padding: 0; width: 100%; height: 100%; font-size: 100%; -webkit-text-size-adjust: none;}
body { color: #fff; font-family: 'PretendardR',"맑은 고딕", "Malgun Gothic", Arial, sans-serif; font-weight: 100%;}
ul, li, ol {list-style: none; }
fieldset{border: none;}
caption, legend{visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-weight: normal;}
a { text-decoration: none; outline:none; select-dummy: expression(this.hideFocus=true);  }
a:link, a:active, a:visited { color: #fff; text-decoration: none; }
img { border: 0; vertical-align:top;}
table{border-collapse: collapse;}
em,address{font-style: normal;}
#skipnavi, .hidden{ width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
a{ text-decoration:none; outline: none;  -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; select-dummy: expression(this.hideFocus=true);  }
a:visited,a:hover,a:active,a:focus{ background: none; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; }
input, select, textarea {font-family: 'GmarketB'}

.wrap{overflow: hidden; height: 100%;}
.wrap .container{ width: 1280px; height: 720px; position: relative;}




/* snailGame */
.popG{position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: .3s; z-index: -1; opacity: 0; overflow: hidden;}
.popG.on{z-index: 1; opacity: 1;}
.popG .closebtn{ display: inline-block; width: 48px; height: 48px; border-radius: 100%; background-color: rgba(0,0,0,0.6); position: absolute; right: 26px; top: 26px; transform: rotateZ(45deg); cursor: pointer;}
.popG .closebtn:after{content: ''; width: 12px; height: 2px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.popG .closebtn:before{content: ''; width: 2px; height: 12px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

.coverImg{ display: inline-block; position: absolute; right: 0; top: 0; pointer-events: none;}
.coverImg span{ display: inline-block; position: absolute; right: 0; top: 0;}

.bgmBtn {display: inline-block; bottom: 40px; left: 40px; width: 54px; height: 54px; border-radius: 100%; background-color: rgba(0,0,0,0.24); background-repeat: no-repeat; background-position: center; position: absolute; cursor: pointer;}
.bgmBtn.stop {background-image: url(../images/common/bgm_btn_ico_off.png);}
.bgmBtn.play {background-image: url(../images/common/bgm_btn_ico_on.png);}

.stImg{position: absolute; left: 0; top: 0; background-color: #fff;}
.snail .intro{ height: 100%; background: url("../images/snailGame/snailGame_intro_bg.png") no-repeat center/contain;}
.snail .intro .homeBtn{display: inline-block; position: absolute; left: 28px; top: 30px; background-color: #2f5618; border-radius: 20px; cursor: pointer;}
.snail .intro .tit{display: inline-block; text-align: center; margin: 143px 0 0 124px;}
.snail .intro .tit .imgbox{display: inline-block; transform: translateY(-10px); opacity: 0;}
.snail .intro .coverImg.cs span:nth-of-type(1){top: -30px; opacity: 0;}
.snail .intro .coverImg.cs span:nth-of-type(2){top: -20px; left: auto; right: 0; opacity: 0;}
.snail .intro .btnArea{font-size: 0; opacity: 0; transform: translateY(-10px);}
.snail .intro .btnArea .dfbtn{ display: inline-block; line-height: 84px; border-radius: 40px; background: rgba(255, 109, 33, 0.9); color: #fff; font-family: 'SBAggroB'; font-size: 30px; letter-spacing: -0.05em; width: 194px; height: 80px; margin: 0 10px; cursor: pointer;}
.snail .intro.start .tit .imgbox{transform: translateY(0); opacity: 1; transition: .5s .4s;}
.snail .intro.start .coverImg.cs span:nth-of-type(1){top: 0px; opacity: 1; transition: .5s;}
.snail .intro.start .coverImg.cs span:nth-of-type(2){top: 0; opacity: 1; transition: .5s .4s;}
.snail .intro.start .btnArea{transform: translateY(0); opacity: 1; transition: .5s .4s;}
.snail .intro .popG.method{padding: 104px 110px 0; backdrop-filter: blur(12px);}
.snail .intro .popG.method .rdbox{width: 1060px; height: 520px; background: #fff;border-radius: 60px; padding: 96px 0px 0 80px;}
.snail .intro .popG.method .mtit{font-family: 'SBAggroB'; font-size: 48px; line-height: 54px; letter-spacing: -0.05em; line-height: 54px; color: #496927;}
.snail .intro .popG.method .mtit em{ display: inline-block; font-size: 24px; vertical-align: top; margin-top: 8px;}
.snail .intro .popG.method .mtlist{margin-top: 21px;}
.snail .intro .popG.method .mtlist li{font-family: 'PretendardB'; position: relative; padding-left: 36px;}
.snail .intro .popG.method .mtlist li + li{margin-top: 12px;}
.snail .intro .popG.method .mtlist li em{display: inline-block; width: 28px; height: 28px; border-radius: 100%; background-color: #000; font-size: 16px; text-align: center; line-height: 28px; position: absolute; left: 0; top: 5px;}
.snail .intro .popG.method .mtlist li span{ display: inline-block; color: #000; font-size: 24px; vertical-align: top; line-height: 38px;}
.snail .intro .popG.method .mtlist li .smtxt{font-family: 'PretendardM'; font-size: 20px; margin-top: -6px;}

.snail .gameCon{background: url("../images/snailGame/snailGame_gameCon_bg.png") no-repeat center;}

.snail .gameCon .gameUI{width: 100%; xheight: 100%; position: absolute; z-index: 3; left: 0; top: 28px;}
.snail .gameCon .gameUI .rightUI{position: absolute; right: 0; top: 0px;}
.snail .gameCon .gameUI .rightUI .tbox{margin-right: 42px; width: 90px;}
.snail .gameCon .gameUI .tbox{ display: inline-block; height: 24px; position: relative;}
.snail .gameCon .gameUI .tbox:before{ content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 7px 7px 14px rgba(46, 33, 33, 0.08); background-color: rgba(255, 255, 255, 0.26); transform: skew(-14deg); border-radius: 5px;}
.snail .gameCon .gameUI .tbox em{display: inline-block; width: 40px; height: 40px; position: absolute; top: 50%; transform: translate(-50%,-50%); left: 0; box-shadow: 7px 7px 14px rgba(46, 33, 33, 0.08); border-radius: 100%; z-index: 1;}
.snail .gameCon .gameUI .tbox span{display: inline-block; position: relative; width: 100%; height: 100%; color: #fff; font-family: 'SBAggroB'; font-size: 18px; text-align: center; line-height: 28px; padding-left: 12px;}
.snail .gameCon .gameUI .tbox strong{font-weight: normal;}
.snail .gameCon .gameUI .timer{left: 52px; width: 220px;}
.snail .gameCon .gameUI .timer span{margin-left: 12px; width: 208px; padding-left: 0;}
.snail .gameCon .gameUI .timer.on span{animation: timerAni 600s 1 linear forwards;}
.snail .gameCon .gameUI .timer.pause span{animation-play-state: paused;}
.snail .gameCon .gameUI .timer span{background-color: #f47825; transform: skew(-14deg); border-radius: 5px;}
.snail .gameCon .gameUI .exit{user-select: none; cursor: pointer;}

.snail .gameCon .board{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.snail .gameCon .board li.end{display: none;}
.snail .gameCon .board .cursor{position: absolute; left: 0; top: -100px; user-select: none; pointer-events: none; z-index: 1;}
.snail .gameCon .board .cursor:before{content: ''; width: 100%; height: 58px; background: url("../images/snailGame/snailGame_gameCon_cursor_sha.png") no-repeat center;  position: absolute; left: 0px; top: 124px;}
.snail .gameCon .board .cursor > span{display: inline-block; position: relative;}
.snail .gameCon .board .cursor em{display: inline-block; position: absolute; left: 0; bottom: 0; z-index: 1; opacity: 0;}
.snail .gameCon .board .cursor em span{display: inline-block;}
.snail .gameCon .board .cursor em span:nth-of-type(2){position: absolute; left: 30px; top: 30px;}

.snail .gameCon .board ul .target{width: 264px; height: 118px; background-repeat: no-repeat; background-position: center; background-size: auto; position: absolute; left: -300px; top: 100px; background-image: url("../images/snailGame/sanilGame_gameCon_target_bt.png");}
.snail .gameCon .board ul .target:after{content: ''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: auto; position: absolute; left: 0; top: 0;}
.snail .gameCon .board ul .target[data-con="0"]:after{background-image: url("../images/snailGame/sanilGame_gameCon_target1.png");}
.snail .gameCon .board ul .target[data-con="0"] > span{background-color: rgba(31,135,232,0.9);}
.snail .gameCon .board ul .target[data-con="1"]:after{background-image: url("../images/snailGame/sanilGame_gameCon_target2.png");}
.snail .gameCon .board ul .target[data-con="1"] > span{background-color: rgba(42,171,75,0.9);}
.snail .gameCon .board ul .target[data-con="2"]:after{background-image: url("../images/snailGame/sanilGame_gameCon_target3.png");}
.snail .gameCon .board ul .target[data-con="2"] > span{background-color: rgba(250,159,0,0.9);}
.snail .gameCon .board ul .target[data-con="3"]:after{background-image: url("../images/snailGame/sanilGame_gameCon_target4.png");}
.snail .gameCon .board ul .target[data-con="3"] > span{background-color: rgba(105,61,159,0.9);}
.snail .gameCon .board ul .target[data-con="4"]:after{background-image: url("../images/snailGame/sanilGame_gameCon_target5.png");}
.snail .gameCon .board ul .target[data-con="4"] > span{background-color: rgba(221,74,23,0.9);}

.snail .gameCon .board .cursor .target{left: 50%; transform: translateX(-50%); top: -90px; opacity: 0;}
.snail .gameCon .board .cursor.on .target{opacity: 1;}
.snail .gameCon .board .cursor.on > em{opacity: 1;}
.snail .gameCon .board .target.on{animation: targetAni 15s 1 linear;}
.snail .gameCon .board .target > span{ min-width: 160px; display: inline-block; height: 50px; border-radius: 25px; position: absolute; right: 65px; top: 23px; text-align: center; padding: 0 54px 0 18px; white-space: nowrap;}

.snail .gameCon .board .target.selO > span{padding-top: 10px;}
.snail .gameCon .board .target.selO > span em{display: inline-block; width: 30px; height: 30px; border: 8px solid #fff; border-radius: 100%;}
.snail .gameCon .board .target.selX > span{padding-top: 10px;}
.snail .gameCon .board .target.selX > span em{ position: relative; display: inline-block; width: 30px; height: 30px; transform: rotateZ(45deg);}
.snail .gameCon .board .target.selX > span em:before{content: ''; width: 30px; height: 8px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.snail .gameCon .board .target.selX > span em:after{content: ''; width: 8px; height: 30px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.snail .gameCon .board .target.selNum span em{font-family: 'PretendardB'; font-size: 24px; line-height: 50px;}
.snail .gameCon .board .target > em{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; pointer-events: none; z-index: 2;}
.snail .gameCon .board .target > em span{position: absolute; left: 0; top: 0; opacity: 0;}
.snail .gameCon .board .target > em span:first-child{position: relative;}
.snail .gameCon .board .target > em span.on{opacity: 1;}
.snail .gameCon .board .target.none{display: none;}
.snail .gameCon .board .target.lock{pointer-events: none;}
.snail .gameCon .board li.pause .target{animation-play-state: paused;}


.snail .gameCon .quest{position: absolute; left: 0; bottom: 0px; white-space: nowrap; z-index: 2; width: 100%; height: 140px; background-color: rgba(255,255,255,0.12);}
.snail .gameCon .quest .charArea{display: inline-block; position: absolute; left: 0; bottom: 0;}
.snail .gameCon .quest .charArea span{display: inline-block;}
.snail .gameCon .quest .charArea em{ display: inline-block; width: 54px; height: 30px; line-height: 32px; border-radius: 15px; text-align: center; font-family: 'SBAggroM'; font-size: 16px; background-color: #000; position: absolute; right: 17px; top: 16px;}
.snail .gameCon .quest .rdbox{ position: relative; display: inline-block; height: 100%; border-radius: 18px; vertical-align: top; width: 100%; transition: height .5s;}
.snail .gameCon .quest .rdbox.long{height: 160px;}
.snail .gameCon .quest .rdbox ul{width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-family: 'PretendardB'; font-size: 30px; color: #000; padding: 0 20px; text-align: center; overflow: hidden;}
.snail .gameCon .quest .rdbox ul li{position: absolute; left: 0; top: 40px; opacity: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: top .5s, opacity .3s; color: #d5f3c4;}
.snail .gameCon .quest .rdbox ul li.on{top: 0px; opacity: 1;}
.snail .gameCon .quest .rdbox ul li.end{top: -40px; opacity: 0;}
.snail .gameCon .quest .rdbox .page{font-family: 'PretendardB'; font-size: 18px; color: #fff; letter-spacing: -0.05em; position: absolute; right: 30px; top: 16px;}
.snail .gameCon .quest .rdbox ul li .bkcase{display: inline-block; margin-top: -2px; vertical-align: top;}
.snail .gameCon .quest .rdbox ul li .blank{display: inline-block; width: 60px;}
.snail .gameCon .quest .rdbox ul li .mit{position: relative;}
.snail .gameCon .quest .rdbox ul li .mit:after{content: ''; width: 100%; height: 2px; background-color: #000; position: absolute; left: 0; bottom: 0;}

.snail .gameCon .popB{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: -1; opacity: 0; transition: opacity .3s;}
.snail .gameCon .popB.on{z-index: 3; opacity: 1;}


.snail .gameCon .popB{text-align: center; padding-top: 188px;}
.snail .gameCon .popB .imgBox{ display: inline-block; width: 552px; height: 344px; border-radius: 40px; text-align: center; font-family: 'PretendardB'; padding-top: 66px; padding-left: 230px; letter-spacing: -0.05em;}
.snail .gameCon .popB .imgBox .starNum{font-size: 22px;}
.snail .gameCon .popB .imgBox p{font-size: 32px; margin-top: 17px; color: #000;}
.snail .gameCon .popB .imgBox p span{color: #ffb400;}
.snail .gameCon .popB.failPop .imgBox{background: #fff url("../images/snailGame/snailGame_gameCon_failPop_img1.png") no-repeat center;}
.snail .gameCon .popB .btnArea{font-size: 0; display: inline-block; margin-top: 19px; width: 142px;}
.snail .gameCon .dfbtn{ font-family: 'PretendardB'; display: inline-block; width: 142px; border-radius: 28px; background-color: #000; font-size: 22px; text-align: center; line-height: 56px; margin: 3px 0px; cursor: pointer;}

.snail .gameCon .popB.sucPop .imgBox{padding-top: 96px; position: relative;}
.snail .gameCon .popB.sucPop .imgBox p{margin-top: 16px;}
.snail .gameCon .popB.sucPop .btnArea{margin-top: 20px;}
.snail .gameCon .popB.sucPop .imgBox{background: #fff url("../images/snailGame/snailGame_gameCon_sucPop_img1.png") no-repeat center;}
.snail .gameCon .popB.exitPop{padding-top: 296px;}
.snail .gameCon .popB.exitPop .textBox{font-family: 'PretendardB'; font-size: 32px; letter-spacing: -0.05em;}
.snail .gameCon .popB.exitPop .exitBtnArea{margin-top: 22px; font-size: 0;}
.snail .gameCon .popB.exitPop .exitBtnArea .dfbtn{margin: 0 5px;}

@keyframes timerAni{0%{width: 208px;}100%{width: 0;}}
@keyframes targetAni{0%{left: -300px;}100%{left: 100%;}}