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

body.dicePopup.layoutFull .pageFrame .pageFrameBody .mainContentBox .cl_page { height: 831px; border-radius: 12px; outline: 10px solid rgba(158, 131, 71, 0.20); overflow: hidden; }
body.dicePopup.layoutFull .pageFrame .pageFrameBody .mainContentBox .cl_page::before { border-radius: 12px; display: none; }

.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 .diceStartBtn .startIconHover { display: none; }
.diceGame .diceStartBtn:hover .startIcon { display: none; }
.diceGame .diceStartBtn:hover .startIconHover { display: inline-block; }



.diceGame .minusIcon { background-image: url("../images/diceGame/minusIcon.png"); width: 68px; height: 68px; }
.diceGame .plusIcon { background-image: url("../images/diceGame/plusIcon.png"); width: 68px; height: 68px; }
.diceGame .minusIcon:hover { background-image: url("../images/diceGame/minusIcon_hover.png"); }
.diceGame .plusIcon:hover { background-image: url("../images/diceGame/plusIcon_hover.png"); }
.diceGame .minusIcon.dis { background-image: url("../images/diceGame/minusIcon_dis.png"); }
.diceGame .plusIcon.dis { background-image: url("../images/diceGame/plusIcon_dis.png"); }
.diceGame .minusIcon.dis:hover { background-image: url("../images/diceGame/minusIcon_dis.png"); }
.diceGame .plusIcon.dis:hover { 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; height: 100%; }
.diceGameWrap .diceBg { display: inline-block; position: relative; background: url("../images/diceGame/diceBg_2.png")no-repeat; width: 1483px; height: 884px; }
.diceGameWrap .diceBg2 { display: inline-block; position: relative; background: url("../images/diceGame/diceBg_3.png")no-repeat; width: 1483px; 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: 421px; right: 10px; width: 305px; height: 340px; 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: 32px; left: 14px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(2){ top: 32px; left: 110px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(3){ top: 32px; left: 206px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(4){ top: 134px; left: 14px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(5){ top: 134px; left: 110px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(6){ top: 134px; left: 206px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(7){ top: 236px; left: 14px;}
.diceGameWrap .malListArea .cl_malList:nth-of-type(8){ top: 236px; left: 110px;}

/* 말판 게임판 초기 위치 */
.diceGameWrap .diceBg .cl_malList.malList1{ top: 240px; left: 100px;}
.diceGameWrap .diceBg .cl_malList.malList2{ top: 240px; left: 190px;}
.diceGameWrap .diceBg .cl_malList.malList3{ top: 240px; left: 280px;}
.diceGameWrap .diceBg .cl_malList.malList4{ top: 330px; left: 100px;}
.diceGameWrap .diceBg .cl_malList.malList5{ top: 330px; left: 190px;}
.diceGameWrap .diceBg .cl_malList.malList6{ top: 330px; left: 280px;}
.diceGameWrap .diceBg .cl_malList.malList7{ top: 420px; left: 100px;}
.diceGameWrap .diceBg .cl_malList.malList8{ top: 420px; left: 190px;}

/*.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:46px; top:26px; z-index:10; cursor:pointer;}
.diceGame .volumeWrap .btnVolume {width:71px; height:71px; background-image:url("../images/diceGame/speakerVolBtn.png");}
.diceGame .volumeWrap .btnVolume:hover {background-image:url("../images/diceGame/speakerVolBtn_hover.png");}

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



/* 주사위  */
.diceGameWrap .diceArea { position: absolute; top: 78px; right: 10px; background: url("../images/diceGame/diceAreaBg.png")no-repeat; width: 305px; height: 288px; background-size: 100% 100%;}
.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: 60px;
    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 .inputWrap .imgBox { position: relative; width: 860px; height: 456px; margin: 0 auto; margin-top: 90px; }
.dicePopWrap .inputWrap .checkAnswerWrap {position: absolute; top: 60px; left: 55px;  font-family: "HallymGoB"; font-size: 54px; color: #000; line-height: 150%; }
.dicePopWrap .hideTxt { border-bottom: 3px solid #000; display: inline-block; padding: 0 30px; color: #0048FF; position: relative; height: 80px; }
.dicePopWrap .hideTxt.active::before { display: none; }
.dicePopWrap .hideTxt::before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #BCE8F0 url("../images/diceCheckBtn.png") center center no-repeat; cursor: pointer; }
.dicePopWrap .hideTxt:hover::before { background: #BCE8F0 url("../images/diceCheckBtn_hover.png") center center no-repeat; cursor: pointer; }

.dicePopWrap .speakArea { display: flex; align-items: center; justify-content: center; }
.dicePopWrap .speakArea .imgArea { width: 800px; height: 456px; margin-top: 100px; position: relative; }



    /* 주사위 팝업 부분*/
.dicePopWrap .cl_btnSpeaker { position: absolute; top: -30px; right: -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: 12px; border: 5px solid #98D4CA; background-color: #F3FFFA;  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: 50%; left: 254px; transform: translateY(-50%) translate3d(0, 0, 0); }
.dicePopWrap .diceWordBox .textArea .textBox { display: flex; }
.dicePopWrap .diceWordBox .textArea .textBox { margin-bottom: 16px;}
.dicePopWrap .diceWordBox .textArea .textBox:last-child { margin-bottom: 0;}
.dicePopWrap .diceWordBox .textArea .textBox .img { margin-right:30px; }
.dicePopWrap .diceWordBox .textArea .textBox .text { font-size: 64px; color: #000; font-family: "PretendardB"; margin-top: 5px; cursor: pointer;}
.dicePopWrap .diceWordBox .textArea .textBox .text:hover,
.dicePopWrap .diceWordBox .textArea .textBox .text.on { color: #0048FF;;}

/*.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: 1483px;height: 100%;z-index: 21; border-radius: 12px 0 0 12px; }
.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; background-size: 100% 100%; }


.finishPopup .title { position: absolute; top: 225px; 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: 753px; 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: 265px; height: 72px; }
.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: 72px; }
.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;  }

/*TC별 음원 재생*/
.diceWordBox.talkContent .speech.play .text { color: #0048FF; }