@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;}




/*pandaGame */
.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; left: 0; top: 0; pointer-events: none;}
.coverImg span{ display: inline-block; position: absolute; left: 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;}
.panda .intro{ height: 100%; background: url("../images/pandaGame/pandaGame_intro_bg.jpg") no-repeat center/contain;}
.panda .intro .homeBtn{display: inline-block; position: absolute; left: 28px; top: 30px; background-color: #2f5618; border-radius: 20px; cursor: pointer;}
.panda .intro .tit{display: inline-block; text-align: center; margin: 179px 0 0 140px;}
.panda .intro .tit h2{font-family: 'SBAggroB'; font-size: 130px; line-height: 130px; color: #fff; opacity: 1; transform: translateY(10px);}
.panda .intro .coverImg.cs span:nth-of-type(1){left: 248px; top: 166px;}
.panda .intro .coverImg.cs span:nth-of-type(2){left: 186px; top: 316px; transform: scale(0); opacity: 0;}
.panda .intro .coverImg.cs span:nth-of-type(3){left: 464px; top: 144px; transform: scale(0); opacity: 0;}
.panda .intro .btnArea{font-size: 0; opacity: 0; transform: translateY(-10px); margin-top: 44px;}
.panda .intro .btnArea .dfbtn{ display: inline-block; line-height: 84px; border-radius: 40px; background: rgba(255, 109, 33, 0.8); color: #fff; font-family: 'SBAggroB'; font-size: 30px; letter-spacing: -0.05em; width: 194px; height: 80px; margin: 0 10px; cursor: pointer;}
.panda .intro.start .tit .imgbox{transform: translateY(0); opacity: 1; transition: .5s .4s;}
.panda .intro.start .coverImg.cs span:nth-of-type(2){ transform: scale(1); opacity: 1; transition: .4s;} 
.panda .intro.start .coverImg.cs span:nth-of-type(3){ transform: scale(1); opacity: 1; transition: .4s .2s;} 
.panda .intro.start .btnArea{transform: translateY(0); opacity: 1; transition: .5s .6s;}
.panda .intro .popG.method{padding: 104px 110px 0; backdrop-filter: blur(12px);}
.panda .intro .popG.method .rdbox{width: 1060px; height: 520px; background: #fff;border-radius: 60px; padding: 96px 0px 0 80px;}
.panda .intro .popG.method .mtit{font-family: 'SBAggroB'; font-size: 48px; line-height: 54px; letter-spacing: -0.05em; line-height: 54px; color: #496927;}
.panda .intro .popG.method .mtit em{ display: inline-block; font-size: 24px; vertical-align: top; margin-top: 8px;}
.panda .intro .popG.method .mtlist{margin-top: 21px;}
.panda .intro .popG.method .mtlist li{font-family: 'PretendardB'; position: relative; padding-left: 36px;}
.panda .intro .popG.method .mtlist li + li{margin-top: 12px;}
.panda .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;}
.panda .intro .popG.method .mtlist li span{ display: inline-block; color: #000; font-size: 24px; vertical-align: top; line-height: 38px;}
.panda .intro .popG.method .mtlist li .smtxt{font-family: 'PretendardM'; font-size: 20px; margin-top: -6px;}
.panda .intro .popG.method .coverImg{left: auto; right: 0;}


.panda .gameCon{background: url("../images/pandaGame/pandaGame_gameCon_bg.png") no-repeat center;}

.panda .gameCon .gameUI{width: 100%; xheight: 100%; position: absolute; z-index: 3; left: 0; top: 28px;}
.panda .gameCon .gameUI .rightUI{position: absolute; right: 0; top: 0;}
.panda .gameCon .gameUI .rightUI .tbox{margin-right: 42px; width: 90px;}
.panda .gameCon .gameUI .tbox{ display: inline-block; height: 24px; position: relative;}
.panda .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;}
.panda .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;}
.panda .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;}
.panda .gameCon .gameUI  tbox strong{font-weight: normal;}

.panda .gameCon .gameUI .timer{left: 52px; width: 220px;}
.panda .gameCon .gameUI .timer span{margin-left: 12px; width: 208px; padding-left: 0;}
.panda .gameCon .gameUI .timer.on span{animation: timerAni 600s 1 linear forwards;}
.panda .gameCon .gameUI .timer.pause span{animation-play-state: paused;}
.panda .gameCon .gameUI .timer span{background-color: #f49525; transform: skew(-14deg); border-radius: 5px;}
.panda .gameCon .gameUI .exit{user-select: none; cursor: pointer;}
.panda .gameCon .board{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.panda .gameCon .board li.end{display: none;}
.panda .gameCon .board .cursor{position: absolute; left: 0; top: -100px; user-select: none; pointer-events: none; z-index: 1;}
.panda .gameCon .board .cursor:before{content: ''; width: 100%; height: 100%; background: rgba(14, 17, 2, 0.41); border-radius: 100%; position: absolute; left: 0; top: 36px; filter: blur(20px);}
.panda .gameCon .board .cursor > span{display: inline-block; position: relative;}
.panda .gameCon .board .cursor em{display: inline-block; position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 1; opacity: 0;}
.panda .gameCon .board .cursor em span{display: inline-block;}

.panda .gameCon .board .target{width: 312px; height: 230px; position: absolute; left: 0px; top: -300px;}

.panda .gameCon .board .target strong{display: inline-block; width: 100%; height: 100%; }
.panda .gameCon .board .target[data-con="0"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target1.png") no-repeat center;}
.panda .gameCon .board .target[data-con="1"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target2.png") no-repeat center;}
.panda .gameCon .board .target[data-con="2"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target3.png") no-repeat center;}
.panda .gameCon .board .target[data-con="3"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target4.png") no-repeat center;}
.panda .gameCon .board .target[data-con="4"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target5.png") no-repeat center;}
.panda .gameCon .board .target[data-con="5"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target6.png") no-repeat center;}
.panda .gameCon .board .target[data-con="6"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target7.png") no-repeat center;}
.panda .gameCon .board .target[data-con="7"] strong{background: url("../images/pandaGame/pandaGame_gameCon_target8.png") no-repeat center;}

.panda .gameCon .board .cursor .target{left: 50%; transform: translateX(-50%); top: -90px; opacity: 0;}
.panda .gameCon .board .cursor.on .target{opacity: 1;}
.panda .gameCon .board .cursor.on > em{opacity: 1;}
.panda .gameCon .board .target.on{animation: targetAni 15s 1 linear;}
.panda .gameCon .board .target > span{ min-width: 139px; display: flex; justify-content: center; align-items: center; min-height: 58px; border-radius: 29px; background-color: rgba(0, 212, 159, 0.7); position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); text-align: center; padding: 14px 18px; white-space: nowrap; z-index: 1;}
.panda .gameCon .board .target.selO > span{padding-top: 14px;}
.panda .gameCon .board .target.selO > span em{display: inline-block; width: 30px; height: 30px; border: 8px solid #fff; border-radius: 100%;}
.panda .gameCon .board .target.selX > span{padding-top: 14px;}
.panda .gameCon .board .target.selX > span em{ position: relative; display: inline-block; width: 30px; height: 30px; transform: rotateZ(45deg);}
.panda .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%);}
.panda .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%);}
.panda .gameCon .board .target.selNum span em{font-family: 'PretendardB'; font-size: 24px; line-height: 30px;}
.panda .gameCon .board .target > em{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; pointer-events: none; z-index: 2;}
.panda .gameCon .board .target > em span{position: absolute; left: 0; top: -8px; opacity: 0;}
.panda .gameCon .board .target > em span:first-child{position: relative;}
.panda .gameCon .board .target > em span.on{opacity: 1;}
.panda .gameCon .board .target.none{display: none;}
.panda .gameCon .board .target.lock{pointer-events: none;}
.panda .gameCon .board li.pause .target{animation-play-state: paused;}


.panda .gameCon .quest{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; white-space: nowrap; z-index: 2; width: 882px; height: 146px; background: url("../images/pandaGame/pandaGame_gameCon_quest_bg.png") no-repeat center; padding: 24px 16px 0;}
.panda .gameCon .quest .charArea{display: inline-block; vertical-align: top; position: absolute; left: 27px; top: 26px; z-index: 2;}
.panda .gameCon .quest .charArea em{ display: inline-block; width: 54px; height: 30px; line-height: 34px; border-radius: 15px; text-align: center; font-family: 'SBAggroM'; font-size: 16px; background-color: rgba(68, 27, 5, 0.8);}
.panda .gameCon .quest .rdbox{ position: relative; display: inline-block; width: 100%; height: 100%; vertical-align: top;}
.panda .gameCon .quest .rdbox ul{width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-family: 'PretendardB'; font-size: 30px; color: #682f11; padding: 0 20px; text-align: center; overflow: hidden;}
.panda .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;}
.panda .gameCon .quest .rdbox ul li.on{top: 0px; opacity: 1;}
.panda .gameCon .quest .rdbox ul li.end{top: -40px; opacity: 0;}
.panda .gameCon .quest .rdbox .page{font-family: 'PretendardB'; font-size: 18px; color: #682f11; letter-spacing: -0.05em; position: absolute; right: 20px; top: 10px;}
.panda .gameCon .quest .rdbox ul li .bkcase{display: inline-block; margin-top: -2px; vertical-align: top;}
.panda .gameCon .quest .rdbox ul li .blank{display: inline-block; width: 60px;}
.panda .gameCon .quest .rdbox ul li .mit{position: relative;}
.panda .gameCon .quest .rdbox ul li .mit:after{content: ''; width: 100%; height: 2px; background-color: #000; position: absolute; left: 0; bottom: 0;}

.panda .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;}
.panda .gameCon .popB.on{z-index: 3; opacity: 1;}


.panda .gameCon .popB{text-align: center; padding-top: 188px;}
.panda .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;}
.panda .gameCon .popB .imgBox .starNum{font-size: 22px;}
.panda .gameCon .popB .imgBox p{font-size: 32px; margin-top: 17px; color: #000;}
.panda .gameCon .popB .imgBox p span{color: #ffb400;}
.panda .gameCon .popB.failPop .imgBox{background: #fff url("../images/pandaGame/pandaGame_gameCon_failPop_img1.png") no-repeat center;}
.panda .gameCon .popB .btnArea{font-size: 0; display: inline-block; margin-top: 19px; width: 142px;}
.panda .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;}

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

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