/*.introPage .mainTitle { width: 735px; height: 100px; }
.introPage .mainTitle img { width: 100%; }*/
.activityPage { width: 100%; height: 100%; background-image: url("../images/activityBg.png"); }

/*
* ** canvas 그리는 영역
*/
.canvasWrap { position: relative; }
.canvasWrap .cl_mainActTitle { height: 77px; }

.actArea { position: relative; width: 1140px; height: 540px; border-radius: 30px; border: 1px solid #C7C7C7; margin: 0 auto; }
.canvasArea { background-color: #000; border: 1px solid #666; }
/*캔버스영역*/
.canvasWrap canvas { cursor: pointer; }

.canvasArea .toolBar { position: absolute; top: 50%; left: 21px; transform: translateY(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
    border-radius: 10px; border: 1px solid #DCDCDC; background-color: #F7F6F6; padding: 10px 6px; box-sizing: border-box; z-index: 1; }
/*툴바 툴들*/
.canvasArea .toolBar .object { width: 40px; height: 40px; background-size: 40px 40px; box-sizing: border-box; background-position: center center; cursor: pointer; }
.canvasArea .toolBar .pencil { background-image: url("../images/toolicon_pencil.png"); }
.canvasArea .toolBar .straightPen { background-image: url("../images/toolicon_line.png"); }
.canvasArea .toolBar .circle { background-image: url("../images/toolicon_circle.png"); }
.canvasArea .toolBar .rectangle { background-image: url("../images/toolicon_rectangle.png"); }
.canvasArea .toolBar .eraser { background-image: url("../images/toolicon_eraser.png"); }
.canvasArea .toolBar .object:hover { border: 2px solid #5387FF; border-radius: 5px; background-color: #fff; }
.canvasArea .toolBar .object.on { border: 2px solid #5387FF; border-radius: 5px; background-color: #fff; }
/*사이즈 조절 바*/
.canvasArea .toolBar .sizeController { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 14px 0; box-sizing: border-box; }
.canvasArea .toolBar .sizeController .size { background-color: #C9C9C9; border-radius: 50%; cursor: pointer; }
.canvasArea .toolBar .sizeController .xSmall { width: 6px; height: 6px; }
.canvasArea .toolBar .sizeController .small { width: 8px; height: 8px; }
.canvasArea .toolBar .sizeController .medium { width: 12px; height: 12px; }
.canvasArea .toolBar .sizeController .large { width: 16px; height: 16px; }
.canvasArea .toolBar .sizeController .xLarge { width: 20px; height: 20px; }
.canvasArea .toolBar .sizeController .size:hover { background-color: #171717; }
.canvasArea .toolBar .sizeController .size.on { background-color: #171717; }
/*칼라픽커*/
.canvasArea .toolBar .jscolor { display: inline-block; width: 31px; height: 31px; border-radius: 5px; cursor: pointer;
    border: 1px solid #B9B9B9; background-color: initial; font-size: 0; }
.canvasArea .toolBar .jscolor:hover { border-color: #5387FF; }


/*
* ** canvas 그리는 영역
*/
.activityPage.directive { position: relative; }
.activityPage.directive .directiveWrap { background-color: #000; }
.activityPage.directive .directiveWrap .gradientBg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; height: 500px;
    background-image: url("../images/gradient_bg.png"); background-size: 500px 500px; }
.activityPage.directive .imgWrap .top { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 2; }
.activityPage.directive .imgWrap .bottom { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%) rotate(180deg); z-index: 2; }
.activityPage.directive .imgWrap .left { position: absolute; top: 50%; left: 352px; transform: translateY(-50%) rotate(-90deg); z-index: 2; }
.activityPage.directive .imgWrap .right { position: absolute; top: 50%; right: 352px; transform: translateY(-50%) rotate(90deg); z-index: 2; }


/*
* ** 홀로그램 입체 영역
*/
.activityPage.hologram { display: none; background-image: none; background-color: #000; padding: 0; }
.activityPage.hologram .guide { width: 1280px; height: 720px; }
.activityPage.hologram .cl_guide img { width: 100%; }
.activityPage.hologram .cl_guide .close { width: 50px; height: 50px; }
.activityPage.hologram .cl_guide .close img { width: 100%; }

.activityPage .hologramWrap { height: 100%; }
.hologramWrap .cl_mainActTitle { height: 102px }
.hologramWrap .holoArea { position: relative; width: 100%; height: 100%; }
.hologramWrap .holoArea:before { width: 35px; height: 35px; content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background-image: url("../images/centerIcon.png"); background-size: 35px 35px; }


/*이미지 영역*/
.hologramWrap .holoArea .imgWrap { width: 100%; height: 100%; }
.hologramWrap .holoArea .imgWrap img { position: absolute; }
/*.hologramWrap .holoArea .imgWrap img.top { top: 0; left: 50%; transform: translateX(-50%); }*/
.hologramWrap .holoArea .imgWrap img.bottom { transform: rotate(180deg); }
.hologramWrap .holoArea .imgWrap img.left { transform: rotate(-90deg); }
.hologramWrap .holoArea .imgWrap img.right { transform: rotate(90deg); }

/*확대축소 바*/
.gapController { display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 70px; height: 327px;
    border-radius: 100px; background-color: #ECECEC; padding: 11px 9px; box-sizing: border-box; }
.gapController .btnWider { width: 52px; height: 52px; background-image: url("../images/btnWider.png"); background-size: 52px 52px; background-repeat: no-repeat; background-position: center center; }
.gapController .btnCloser { width: 52px; height: 52px; background-image: url("../images/btnCloser.png"); background-size: 52px 52px; background-repeat: no-repeat; background-position: center center; }

.gapController .lineBar { position: relative; width: 4px; height: 169px; background-color: #5F5F5F; }
.gapController .lineBar .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 23px; height: 23px;
    background-color: #fff; border: 3px solid #5f5f5f; border-radius: 50%; box-sizing: border-box; cursor: pointer; }

.hologram .cl_btnReset { bottom: 40px; right: 30px; }