@charset "UTF-8";
body.layout3.diceGame .pageFrame .mainContentBox {height: 884px;}
body.layout3.diceGame .pageFrame .pageFrameHead .cl_directive { top: 174px; right: 82px;}

.diceGame .cl_popupWrap .title { line-height: 78px; margin-bottom: 40px;}
.diceGame .cl_popupWrap .popup .pop { padding-bottom: 40px;}
.diceGame .cl_popupWrap .popup .textArea { line-height: 0; margin-bottom: 0;}

.diceGame .selectPerson { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; box-sizing: border-box; border-radius: 30px; background-color: #F4F3F3; margin-bottom: 40px;}
.diceGame .selectPerson .text { font-size: 120px; color: #000; font-family: "PretendardB"; line-height: 156px;}
.diceGame .selectPerson .minusIcon,
.diceGame .selectPerson .plusIcon,
.diceGame .diceStartBtn { cursor: pointer;}

.diceGame .minusIcon { background-image: url("../images/diceGame/minusIcon.png"); width: 78px; height: 78px; }
.diceGame .plusIcon { background-image: url("../images/diceGame/plusIcon.png"); width: 78px; height: 78px; }
.diceGame .minusIcon.dis { background-image: url("../images/diceGame/minusIcon_dis.png"); }
.diceGame .plusIcon.dis { background-image: url("../images/diceGame/plusIcon_dis.png"); }

.diceGame .closeBtn { background: url("../images/btnClose.png")no-repeat; width: 76px; height: 76px; cursor: pointer; position: absolute; right: -40px; top: -40px; z-index: 1; }
.diceGame .closeBtn:hover { background: url("../images/btnClose_hover.png")no-repeat; }

.diceGameWrap { position: relative;}
.diceGameWrap .diceBg { display: inline-block; position: relative; background: url("../images/diceGame/diceBg_2.png")no-repeat; width: 1469px; height: 884px; }
.diceGameWrap .diceBg2 { display: inline-block; position: relative; background: url("../images/diceGame/diceBg_3.png")no-repeat; width: 1469px; height: 884px; border-radius: 30px 0 0 30px; }
.diceGameWrap .diceBg .cl_malList { margin-left: -45px; margin-top: -45px;}
/*.diceGameWrap .diceBg .cl_malList[data-loca='0']{ margin-left: 0; margin-top: 0;}*/

.diceGameWrap .malListArea { position: absolute; top: 490px; right: 15px; width: 305px; height: 360px; border-radius: 20px; background-color: #F2F0D5}
.diceGameWrap .malListArea:before { content: '모둠'; position: absolute; top: -24px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; height: 48px; ; padding: 0 40px; box-sizing: border-box; border-radius: 60px; background-color: #77CADB; color: #fff; font-size: 28px; font-family: "NanumGoB"; }
.cl_malList { position: absolute; width: 90px; height: 90px; background-repeat: no-repeat; background-position: center center;}
/*25년 3월 10일 커졌다 작아졌다 하는 효과 삭제해달라고함*/
/*.diceGameWrap .malListArea .cl_malList.on { animation: scale 1.5s infinite}*/
@keyframes scale {
    100%{ transform: scale(1); }
    50%{ transform: scale(0.9); }
    100%{ transform: scale(1); }
}

/*호버효과 삭제해달라고 함*/
 .cl_malList.malList1 { background-image: url("../images/diceGame/mal1.png")}
 /*.cl_malList.malList1:hover { background-image: url("../images/diceGame/mal1_h.png")}*/
 .cl_malList.malList1.on { background-image: url("../images/diceGame/mal1_on.png")}

 .cl_malList.malList2 { background-image: url("../images/diceGame/mal2.png")}
 /*.cl_malList.malList2:hover { background-image: url("../images/diceGame/mal2_h.png")}*/
 .cl_malList.malList2.on { background-image: url("../images/diceGame/mal2_on.png")}

 .cl_malList.malList3 { background-image: url("../images/diceGame/mal3.png")}
 /*.cl_malList.malList3:hover { background-image: url("../images/diceGame/mal3_h.png")}*/
 .cl_malList.malList3.on { background-image: url("../images/diceGame/mal3_on.png")}

 .cl_malList.malList4 { background-image: url("../images/diceGame/mal4.png")}
 /*.cl_malList.malList4:hover { background-image: url("../images/diceGame/mal4_h.png")}*/
 .cl_malList.malList4.on { background-image: url("../images/diceGame/mal4_on.png")}

 .cl_malList.malList5 { background-image: url("../images/diceGame/mal5.png")}
 /*.cl_malList.malList5:hover { background-image: url("../images/diceGame/mal5_h.png")}*/
 .cl_malList.malList5.on { background-image: url("../images/diceGame/mal5_on.png")}

 .cl_malList.malList6 { background-image: url("../images/diceGame/mal6.png")}
 /*.cl_malList.malList6:hover { background-image: url("../images/diceGame/mal6_h.png")}*/
 .cl_malList.malList6.on { background-image: url("../images/diceGame/mal6_on.png")}

 .cl_malList.malList7 { background-image: url("../images/diceGame/mal7.png")}
 /*.cl_malList.malList7:hover { background-image: url("../images/diceGame/mal7_h.png")}*/
 .cl_malList.malList7.on { background-image: url("../images/diceGame/mal7_on.png")}

.cl_malList.malList8 { background-image: url("../images/diceGame/mal8.png")}
/*.cl_malList.malList8:hover { background-image: url("../images/diceGame/mal8_h.png")}*/
.cl_malList.malList8.on { background-image: url("../images/diceGame/mal8_on.png")}

/* 말판 list 위치 */
.diceGameWrap .malListArea .cl_malList:nth-of-type(1){ top: 42px; left: 14px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(2){ top: 42px; left: 110px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(3){ top: 42px; left: 206px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(4){ top: 144px; left: 14px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(5){ top: 144px; left: 110px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(6){ top: 144px; left: 206px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(7){ top: 246px; left: 14px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(8){ top: 246px; left: 110px;}

/* 말판 게임판 초기 위치 */
.diceGameWrap .diceBg .cl_malList.malList1{ top: 255px; left: 58px;}
.diceGameWrap .diceBg .cl_malList.malList2{ top: 255px; left: 155px;}
.diceGameWrap .diceBg .cl_malList.malList3{ top: 340px; left: 58px;}
.diceGameWrap .diceBg .cl_malList.malList4{ top: 340px; left: 155px;}
.diceGameWrap .diceBg .cl_malList.malList5{ top: 255px; left: 58px;}
.diceGameWrap .diceBg .cl_malList.malList6{ top: 255px; left: 155px;}
.diceGameWrap .diceBg .cl_malList.malList7{ top: 340px; left: 58px;}
.diceGameWrap .diceBg .cl_malList.malList8{ top: 340px; left: 155px;}

.diceGameWrap .diceBg .cl_malList.malList1{ top: 200px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList2{ top: 285px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList3{ top: 370px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList4{ top: 455px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList5{ top: 540px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList6{ top: 625px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList7{ top: 710px; left: 50px;}
.diceGameWrap .diceBg .cl_malList.malList8{ top: 795px; left: 50px;}

/*.diceGameWrap .diceBg .cl_malList:nth-of-type(1).move1 { animation: move1-1 1s ease forwards}
.diceGameWrap .diceBg .cl_malList:nth-of-type(2).move1 { animation: move1-2 1s ease forwards}
.diceGameWrap .diceBg .cl_malList:nth-of-type(3).move1 { animation: move1-3 1s ease forwards}
.diceGameWrap .diceBg .cl_malList:nth-of-type(4).move1 { animation: move1-4 1s ease forwards}



@keyframes move1-1 {
    0%{ top: 231px; left: 13px;}
    50%{ top: 305px; left: 40px;}
    100%{ top: 400px; left: 70px;}

}
@keyframes move1-2 {
    0%{ top: 231px; left: 13px;}
    50%{ top: 305px; left: 40px;}
    100%{ top: 400px; left: 70px;}

}
@keyframes move1-3 {
    0%{ top: 231px; left: 13px;}
    50%{ top: 305px; left: 40px;}
    100%{ top: 400px; left: 70px;}

}
@keyframes move1-4 {
    0%{ top: 231px; left: 13px;}
    50%{ top: 305px; left: 40px;}
    100%{ top: 400px; left: 70px;}

}*/


/*
    *** 볼륨조절바
*/
.diceGame .volumeWrap {position:absolute; right:38px; top:42px; z-index:10; cursor:pointer;}
.diceGame .volumeWrap .btnVolume {width:91px; height:91px; background-image:url("../images/speakerVolBtn.png");}
.diceGame .volumeWrap .btnVolume:hover {background-image:url("../images/speakerVolBtn.png");}

.diceGame .volumeWrap .cl_volumeController {/*display:flex;*/ left:50%; right:auto; transform:translateX(-50%);}



/* 주사위  */
.diceGameWrap .diceArea { position: absolute; top: 90px; right: 15px; background: url("../images/diceGame/diceAreaBg.png")no-repeat; width: 305px; height: 345px;}
.diceGameWrap .diceArea .diceIcon{
    width: 157px;
    height: 157px;
    transform-style: preserve-3d;
    /*transform: rotateX(0deg) rotateY(0deg);*/
    /*25년 3월 10일 주사위 모양 3차원으로 해달라고 수정*/
    transform: rotateX(-38deg) rotateY(-38deg);
    transition: transform 1s;
    position: absolute;
    top: 94px;
    left: 74px;
    cursor: pointer;
}

.diceGameWrap .diceArea .diceIcon.pointerNon { pointer-events: none;}
.side {
    position: absolute;
    width: 157px;
    height: 157px;
    background: #fff;
    border: 3px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
}

.front {
    transform: translateZ(80px);
}

.back {
    transform: rotateY(180deg) translateZ(80px);
}

/*대리님 앞에 class 추가했어요!*/
.diceGame .left {
    transform: rotateY(-90deg) translateZ(80px);
}

.diceGame .right {
    transform: rotateY(90deg) translateZ(80px);
}

.diceGame .top {
    transform: rotateX(90deg) translateZ(80px);
}

.diceGame .bottom {
    transform: rotateX(-90deg) translateZ(80px);
}

.side:nth-child(1)>span {
    top: 50%;
    left: 50%;
}

.side:nth-child(2)>span:nth-child(1) {
    top: 33%;
    left: 33%;
}

.side:nth-child(2)>span:nth-child(2) {
    top: 66%;
    left: 66%;
}

.side:nth-child(3)>span:nth-child(1) {
    top: 20%;
    left: 20%;
}

.side:nth-child(3)>span:nth-child(2) {
    top: 50%;
    left: 50%;
}

.side:nth-child(3)>span:nth-child(3) {
    top: 80%;
    left: 80%;
}

.side:nth-child(4)>span:nth-child(1) {
    top: 25%;
    left: 25%;
}

.side:nth-child(4)>span:nth-child(2) {
    top: 25%;
    left: 75%;
}

.side:nth-child(4)>span:nth-child(3) {
    top: 75%;
    left: 25%;
}

.side:nth-child(4)>span:nth-child(4) {
    top: 75%;
    left: 75%;
}

.side:nth-child(5)>span:nth-child(1) {
    top: 25%;
    left: 25%;
}

.side:nth-child(5)>span:nth-child(2) {
    top: 25%;
    left: 75%;
}

.side:nth-child(5)>span:nth-child(3) {
    top: 75%;
    left: 25%;
}

.side:nth-child(5)>span:nth-child(4) {
    top: 75%;
    left: 75%;
}

.side:nth-child(5)>span:nth-child(5) {
    top: 50%;
    left: 50%;
}

.side:nth-child(6)>span:nth-child(1) {
    top: 25%;
    left: 25%;
}

.side:nth-child(6)>span:nth-child(2) {
    top: 25%;
    left: 75%;
}

.side:nth-child(6)>span:nth-child(3) {
    top: 75%;
    left: 25%;
}

.side:nth-child(6)>span:nth-child(4) {
    top: 75%;
    left: 75%;
}

.side:nth-child(6)>span:nth-child(5) {
    top: 50%;
    left: 25%;
}

.side:nth-child(6)>span:nth-child(6) {
    top: 50%;
    left: 75%;
}


/* .dice .side span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
} */

.diceIcon .side span {
    position: absolute;
    width: 19px;
    height: 19px;
    background: #000;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.front span {
    left: 45%;
    top: 45%;
}

.back span:nth-child(1) {
    left: 20%;
    top: 20%;
}

.back span:nth-child(2) {
    right: 20%;
    bottom: 20%;
}



    /* 주사위 팝업 부분*/
.dicePopWrap .cl_btnSpeaker { position: absolute; top: -30px; left: -30px; margin: 0; }
.dicePopWrap .cl_bulletTitle { margin-bottom: 70px; }

.dicePopWrap .dictionaryArea { position: relative; overflow: hidden;}

.dicePopWrap .diceWordBox { position: absolute; bottom: -270px; left: 0;transition: all 0.5s ease; width: 100%; height: 270px; border-radius: 30px; border: 5px solid #5C65F0; background-color: #EEEDF7;  box-sizing: border-box;}
.dicePopWrap .diceWordBox.on { bottom: 0; transition: all 0.5s ease}
.dicePopWrap .diceWordBox .cl_btnGameScript { bottom: auto; top: -73px;}

.dicePopWrap .diceWordBox .textArea { position: absolute; top: 30px; left: 304px; }
.dicePopWrap .diceWordBox .textArea .textBox { display: flex; }
.dicePopWrap .diceWordBox .textArea .textBox:first-child { margin-bottom: 16px;}
.dicePopWrap .diceWordBox .textArea .textBox .img { margin-right:36px; }
.dicePopWrap .diceWordBox .textArea .textBox .text { font-size: 64px; color: #000; font-family: "PretendardB"; margin-top: 5px; cursor: pointer;}
.dicePopWrap .diceWordBox .textArea .textBox .text.on { color: #4F0BED;}

.dicePopWrap .speakArea { display: flex; align-items: center; justify-content: center; }
.dicePopWrap .speakArea .imgArea { position: relative; display: flex; align-items: center; justify-content: center; width: 945px; height: 524px; border-radius: 30px; border: 10px solid #EAE8E8; box-sizing: border-box; }
.dicePopWrap .speakArea .selectItem { cursor: pointer;}
.dicePopWrap .speakArea .selectItem:hover,
.dicePopWrap .speakArea .selectItem.on {transform: scale(1.1);}
/*
.dicePopWrap .speakArea .selectItem .default { display: block;}
.dicePopWrap .speakArea .selectItem .hover{ display: none;}
.dicePopWrap .speakArea .selectItem:hover .default { display: none;}
.dicePopWrap .speakArea .selectItem:hover .hover { display: block;}
.dicePopWrap .speakArea .selectItem.on .default { display: none;}
.dicePopWrap .speakArea .selectItem.on .hover { display: block;}
*/


.diceNumberPopup { position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.8);width: 1469px;height: 100%;z-index: 21; border-radius: 30px 0 0 30px; }
.diceNumberPopup .popup { position: relative;}
.diceNumberPopup .popup .textArea { position: absolute; top: 117px; left: 66px;}
.diceNumberPopup .popup .textArea .title { font-size: 64px; color: #D18759; font-family: "Jalnan"; font-weight: bold;}
.diceNumberPopup .popup .textArea .title .num { font-size: 150px; color: #C84FA3; }
.diceNumberPopup .popup .textArea .text { text-align: center;font-size: 52px; color:#583528; font-family: "PretendardB";}
.diceNumberPopup .popup .textArea .text .txt { color: #C84FA3; font-family: "PretendardEB"; }


.finishPopup { display:none ;position: fixed;top: 0; left: 0; background: url("../images/diceGame/finishBg.png")no-repeat; width: 100%; height:100%; z-index: 99999 }


.finishPopup .title { position: absolute; top: 282px; left: 882px; font-size: 60px; font-family: "Jalnan"; color: #4C4C4C;
    text-shadow: 1px 0px 0px #fff, 0px 1px 0px #fff, -1px 0px 0px #fff, 0px -1px 0px #fff, 1px 1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff,
    2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff, 2px 2px 0px #fff, -2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff,
    3px 0px 0px #fff, 0px 3px 0px #fff, -3px 0px 0px #fff, 0px -3px 0px #fff, 3px 3px 0px #fff, -3px 3px 0px #fff, -3px -3px 0px #fff, 3px -3px 0px #fff;

}

.finishPopup .btnArea { position: absolute; top: 896px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 36px;}
.finishPopup .btnArea .btn:before{content: '';position: absolute; top: -104px; left: 50%; transform: translateX(-50%); text-align: center; line-height: 78px; font-size: 36px; color: #515151;font-family: "GodoB"; pointer-events: none}
.finishPopup .btnArea .resetBtn {position: relative; cursor: pointer; background-image: url("../images/diceGame/resetBtn.png"); background-repeat: no-repeat; width: 274px; height: 80px; }
.finishPopup .btnArea .resetBtn:hover { background-image: url("../images/diceGame/resetBtn_hover.png"); }
.finishPopup .btnArea .resetBtn:hover:before{content:'처음부터';  ;background: url("../images/diceGame/balloonIcon1.png")no-repeat; width: 192px; height: 88px;  }
.finishPopup .btnArea .continueBtn {position: relative;  cursor: pointer; background-image: url("../images/diceGame/continueBtn.png"); width: 274px; height: 80px; }
.finishPopup .btnArea .continueBtn:hover { background-image: url("../images/diceGame/continueBtn_hover.png"); }
.finishPopup .btnArea .continueBtn:hover:before{content:'남은 모둠끼리';  ;background: url("../images/diceGame/balloonIcon2.png")no-repeat; width: 262px; height: 88px;  }