/*
    ********************************* 컨텐트영역 타이틀 *********************************
*/
.cl_mainContentTitle { position: absolute; top: 55px; left: 65px; display: inline-flex; align-items: center; gap: 15px; box-sizing: border-box; z-index:100;}
.cl_mainContentTitle .mainTitle { position: relative; width: 235px; height: 65px; background-image: url("../images/mainContentTitle_1.png"); background-repeat: no-repeat; background-size: cover; }
.cl_mainContentTitle.type2 .mainTitle { width: 260px; background-image: url("../images/mainContentTitle_2.png"); }
.cl_mainContentTitle.type3 .mainTitle { width: 260px; background-image: url("../images/mainContentTitle_3.png"); }



.cl_mainContentTitle .subTitle {
    font-size: 34px;
    color: #292929;
    font-family: "GodoB";
    text-shadow: 1px 0px 0px #f4f6f9, 0px 1px 0px #f4f6f9, -1px 0px 0px #f4f6f9, 0px -1px 0px #f4f6f9, 1px 1px 0px #f4f6f9, -1px 1px 0px #f4f6f9, -1px -1px 0px #f4f6f9, 1px -1px 0px #f4f6f9,
    2px 0px 0px #f4f6f9, 0px 2px 0px #f4f6f9, -2px 0px 0px #f4f6f9, 0px -2px 0px #f4f6f9, 2px 2px 0px #f4f6f9, -2px 2px 0px #f4f6f9, -2px -2px 0px #f4f6f9, 2px -2px 0px #f4f6f9;
}


/*
    ********************************* 활동페이지 타이틀 *********************************
*/
.cl_mainActTitle { position: relative; font-size: 34px; color: #292929; font-family: "GodoB"; padding-left: 205px; padding-top: 24px; box-sizing: border-box; }
.cl_mainActTitle:before { position: absolute; top: 10px; left: 20px; content: ''; width: 170px; height: 65px;
    background-image: url("../images/actTitleBullet.png"); background-repeat: no-repeat; background-size: 170px 65px; }
.cl_mainActTitle .centuryGo { font-family: "CenturyGoB"; }


/*
    ********************************* 버튼들 *********************************
*/
.cl_button { position: absolute; right: 31px; display: flex; align-items: center; justify-items: center; width: 60px; height: 60px; background-size: 40px 40px;
    border: 2px solid #b4b4b4; background-repeat: no-repeat; background-position: center center; background-color: #fff; border-radius: 50px; box-sizing: border-box; cursor: pointer; z-index:100;}
.cl_button.on { border-color: #5387ff; }
.cl_button:hover { border-color: #5387ff; }
.cl_button:active { border-color: #5387ff; }

.btnAct { position: absolute; color: #fff; font-size: 20px; font-family: "GodoB"; border: 1px solid #7B7B7B; background-color: #959595; border-radius: 100px; cursor: pointer;box-sizing: border-box;  }
.btnAct.on { background-color: #5387FF; border-color: #1A50CD; }
.btnAct.on:hover { background-color: #3169EB; border-color: #1A50CD; }
/*활성화되어있는 버튼*/
.activeBtn { background-color: #5387FF !important; border-color: #1A50CD !important; pointer-events: auto!important; }
.activeBtn:hover { background-color: #3169EB !important; border-color: #1A50CD !important; }

.btnAct.btnLine { border-color: #fff !important; border-width: 3px !important; font-size: 26px; padding: 15px 40px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25), 0px 3px 0px 0px #033DC1;}
.btnAct.btnLine.useIcon { padding-top: 12px; padding-bottom: 12px;}
/*
    *** 되돌아가기 버튼
*/
.cl_btnGoBack { top: 60px; background-image: url("../images/btnGoBack.png"); }


/*
    *** 회전버튼
*/
.cl_btnRotate { top: 453px; background-image: url("../images/btnRotate.png"); }
.cl_btnRotate.type2 { top: 453px; background-image: url("../images/btnRotate_2.png"); }


/*
    *** 축소버튼
*/
.cl_btnMinus { top: 519px; background-image: url("../images/btnMinus.png"); }


/*
    *** 확대버튼
*/
.cl_btnPlus { top: 585px; background-image: url("../images/btnPlus.png"); }

/*
    *** 다음버튼
*/
.cl_btnNext { bottom: 21px; right: 33px; padding: 12px 32px; pointer-events: none; }
.cl_btnNext.on { pointer-events: auto; }
.cl_btnNext.useIcon { padding-right: 44px; padding-left: 24px; font-size: 24px; }
.cl_btnNext.useIcon:after { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 20px; height: 25px; content: ''; background-image: url("../images/nextBtn_icon.png"); background-repeat: no-repeat; background-size: 20px 25px; }
/*활성화되어있는 버튼*/
.cl_btnNext.activeBtn { background-color: #5387FF; border-color: #1A50CD; pointer-events: auto; }
.cl_btnNext.activeBtn:hover { background-color: #3169EB; border-color: #1A50CD; }


/*
    *** 이전버튼
*/
/*활성화되어있는 버튼*/
.cl_btnPrev { position: absolute; bottom: 53px; right: 51px; padding: 12px 32px; pointer-events: none; }
.cl_btnPrev.activeBtn { background-color: #5387FF; border-color: #1A50CD; pointer-events: auto; }
.cl_btnPrev.activeBtn:hover { background-color: #3169EB; border-color: #1A50CD; }
.cl_btnPrev.useIcon { padding-right: 44px; padding-left: 24px; font-size: 24px; }
.cl_btnPrev.useIcon:after { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 20px; height: 25px; content: ''; background-image: url("../images/nextBtn_icon.png"); background-repeat: no-repeat; background-size: 20px 25px; }


/*
* *** 다시 하기 버튼
*/
.cl_btnReset { bottom: 22px; right: 22px; padding: 12px 22px; }

/* 다시하기 버튼 텍스트*/
.cl_btnReset.text { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 24px; font-size: 24px; }

/*아이콘 있는 다시 하기 버튼*/
.cl_btnReset.useIcon { position: absolute; bottom: 64px; right: 50px; display: inline-flex; font-size: 24px; padding-right: 44px; padding-left: 24px; background-color: #959595; border: 1px solid #7B7B7B; pointer-events: none; }
.cl_btnReset.useIcon:after { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 20px; height: 25px; content: ''; background-image: url("../images/reBtn_icon.png"); background-repeat: no-repeat; background-size: 20px 25px; }
.cl_btnReset.useIcon.on { background-color: #5387FF; border-color: #1A50CD; pointer-events: auto; }
.cl_btnReset.useIcon.on:hover { background-color: #3169EB; border-color: #7b7b7b; }


/*
* *** 저장 버튼
*/
.cl_btnDown.useIcon { position: absolute; padding: 12px 44px 12px 24px; box-sizing: border-box; }
.cl_btnDown.useIcon:after { display: inline-flex; position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 20px; height: 25px; content: ''; background-image: url("../images/downBtn_icon.png"); background-repeat: no-repeat; background-size: 20px 25px; }


/*
* *** 완성 버튼
*/
.cl_btnComplete { position: absolute; bottom: 53px; right: 54px; padding: 12px 32px; }


/*
    *** 작품해설 버튼
*/
.cl_workCommentary {
    position:absolute;
    right:39px;
    bottom:53px;
    display:flex;
    justify-content: center;
    align-items: center;
    width:175px;
    height:51px;
    color:#ffffff;
    font-size:24px;
    font-family:GodoB;
    padding-left:40px;
    box-sizing: border-box;
    border-radius:80px;
    border: 1px solid #1A50CD;
    cursor:pointer;
    background-color: #5387FF;
}
.cl_workCommentary:before {content:""; position:absolute; top:3px; left:3px; width:43px; height:43px; background-image:url("../images/icon_headset.png"); background-size:100%;}
.cl_workCommentary:hover {
    border-color: #1A50CD;
    background-color: #3169EB;
}


/*@media (hover: hover) and (pointer: fine) {
    !*
    * ** 버튼들
    *!
    .cl_button:hover { border-color: #5387ff; }
}*/

/*
    ******************************** 가이드 화면 ***********************************
*/
.cl_guide { position: absolute; top: 0; left: 0; width: 1280px; height: 100%; z-index: 9; }
.cl_guide .close { position: absolute; top: 60px; right: 25px; width: 50px; cursor: pointer; }


/*
    ******************************** 마우스, 휠 조작 메세지 ***********************************
*/
.cl_controlMsgBar {
    display:none;
    position:absolute;
    top:50%;
    left:50%;
    z-index:100;
    transform:translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    height:60px;
    font-size: 28px;
    color: #ffffff;
    font-family: SCD5;
    line-height:1;
    white-space: nowrap;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.70);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    padding-left:115px;
    padding-right:40px;
    box-sizing: border-box;
    opacity:1;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.70);
}
.cl_controlMsgBar.on {display:inline-flex;}
.cl_controlMsgBar.msg1:before {content:"마우스 휠을 조작하여 크게 볼 수 있어요.";}
.cl_controlMsgBar.msg2:before {content:"마우스를 움직여 보세요.";}
.cl_controlMsgBar.msg3:before {content:"그림에서 숫자 ‘1’을 선택해 보세요.";}
.cl_controlMsgBar:after {content:""; position:absolute; bottom:6px; left:42px; width:61px; height:74px; background-image:url("../images/icon_startMsg.png");}

.cl_controlMsgBar.hide {transition: opacity 0.5s linear; opacity:0;}