#act {position: relative; width: 100%; height: 100%; overflow: hidden;}
#act .cameraPicture {position: relative; display: flex;flex-direction: column;align-items: center;width: 100%; height: 100%; background: url("../images/cameraBg.png") no-repeat; z-index: 2;}
#act .cameraPicture .titleWrap {position: relative; font-family: "NPSfontB";font-size: 46px;line-height: 50px; letter-spacing: -2.3px; margin-top: 117px;}
#act .cameraPicture .cameraTitle {position: relative;color: #222;z-index: 2;}
#act .cameraPicture .cameraTitleSha {position: absolute;left: 0;top: 0;-webkit-text-stroke: 4px rgba(255,255,255,0.8);z-index: 1;}
#act .cameraPicture .cameraIcon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    width: 286px;
    height: 286px;
    background: url("../images/camera.png") no-repeat;
    background-position: center;
    z-index: 999;
}
#act .cameraPicture .cameraIcon:active {background: url("../images/camera_on.png") no-repeat; background-position: center;}
#act .cameraPicture .cameraIcon.on {background: url("../images/camera_on.png") no-repeat; background-position: center;}
#act .cameraPicture .cameraLine {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: pointer;}
#act .cameraPicture input {display: none;}

#act .photoArea {position: relative; display: flex; height: 100%; display: none;}
#act .photoArea .photo {width: 100%; height: 100%; background: tan; object-fit: cover;}
#act .photoArea .photoBtn {position: absolute; right: 0; top: 0; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 270px; height: 100%; background: #212121;}
#act .photoArea .photoBtn .cameraChange {cursor: pointer;}
#act .photoArea .photoBtn .photoPushed {width: 124px; height: 124px; border-radius: 50%; background: #ebeced; border: 16px solid #fff; box-sizing: border-box; cursor: pointer;}
#act .photoArea .photoBtn .cancel {font-family: "PretendardB"; font-size: 40px; cursor: pointer; color: #fff; transform: rotate(-90deg);}

#act .photoSet {position: relative; display: flex; height: 100%; display: none;}
#act .photoSet .photo {width: 100%; height: 100%; background: tan; object-fit: cover;}
#act .photoSet .photoBtn {position: absolute; right: 0; top: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 150px; align-items: center; width: 270px; height: 100%; background: #212121;}
#act .photoSet .photoBtn > div {position: relative; left: 10px; display: flex; cursor: pointer; }
#act .photoSet .photoBtn > div span {font-family: "PretendardB"; font-size: 30px; color: #fff; transform: rotate(-90deg); line-height: 1;}

#act .printArea {display: flex; flex-direction: column; width: 100%; height: 100%; background: url("../images/printBg.png") no-repeat; background-size: cover; background-position: center;}
#act .printArea .string {position: absolute; left: 0; top: 1px; z-index: 1;}
#act .printArea .printWrap {display: flex; justify-content: space-between; margin-top: 90px; padding: 0 30px; gap: 16px;}
#act .printArea .printWrap > div {max-width: 602px; max-height: 530px; background: #f7f7f7; box-shadow: 7px 7px 9px 1px rgba(0, 0, 0, 0.3); padding: 30px 30px 133px; box-sizing: border-box;}
#act .printArea .printWrap.row > div {width: 602px;}
#act .printArea .printWrap.col {justify-content: space-around;}
#act .printArea .printWrap.col > div {width: 368px;}
#act .printArea .printWrap .printedPhoto {position:relative; width: 100%; height: 100%;}
#act .printArea .printWrap .printedPhoto img {width: 100%; height: 100%; max-width: 602px; max-height: 530px; object-fit: contain; filter: grayscale(100%); vertical-align: top;}
#act .printArea .printWrap .printedPhoto #pic2 {filter: grayscale(0);}
#act .printArea .printWrap .printedPhoto #canvasImg {position:absolute; top:0; left:0; filter:none;}
#act .printArea .reBtn {position: absolute; right: 30px; bottom: 30px;}

#act .decoArea {position: relative; display: flex; height: 100%; background: #333; padding: 30px 0 30px 30px; box-sizing: border-box; z-index: 2;}
#act .decoArea .photo {position:relative; display:flex; justify-content: center; align-items: center; height: 100%; width: 880px; margin-right: 20px; background: gray; }
#act .decoArea .photo img {display:block; /*width: 880px; height: 660px;*/ filter: grayscale(100%); }
#act .decoArea .photo canvas {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#act .decoArea .palette {width: 349px;height: 585px;background: url("../images/palette.png") no-repeat; text-align: center; padding: 35px 25px 0;box-sizing: border-box;}
#act .decoArea .palette > div {position: relative; left: -15px; margin-bottom: 20px;}
#act .decoArea .palette > div:last-child {margin-bottom: 0px;}
#act .decoArea .palette .title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "NPSfontB";
    font-size: 20px;
    color: #fff;
    width: 84px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 20px;
    background: #565656;
    margin-bottom: 15px;
}
#act .decoArea .palette .colorWrap {display: flex; justify-content: space-evenly;}
#act .decoArea .palette .colorWrap .color {
    width: 50px;
    height: 50px;
    border: 6px solid #ededee;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: inset -5px -5px 5px rgba(0, 0, 0, .2);
    isolation: isolate;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-border-radius: 50%;
    transform: translateZ(0);
    will-change: transform;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

#act .decoArea .palette .colorWrap .color.on {border: 6px solid #777;}
#act .decoArea .palette .colorWrap .blk {background: #232323;}
#act .decoArea .palette .colorWrap .red {background: #ff0000;}
#act .decoArea .palette .colorWrap .org {background: #ff6600;}
#act .decoArea .palette .colorWrap .yel {background: #ffdf04;}
#act .decoArea .palette .colorWrap .green {background: #07a542;}
#act .decoArea .palette .colorWrap .sky {background: #00aeef;}
#act .decoArea .palette .colorWrap .blue {background: #3b3ff1;}
#act .decoArea .palette .colorWrap .pur {background: #8532b8;}
#act .decoArea .palette .colorWrap .pink {background: #fe29e7;}
#act .decoArea .palette .colorWrap .beige {background: #c69c6d;}
#act .decoArea .palette .colorWrap .brown {background: #603913;}
#act .decoArea .palette .colorWrap .white {background: #fff;}

#act .decoArea .palette .weightWrap {display: flex; justify-content: space-evenly;}
#act .decoArea .palette .weight {display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; border: 1px solid #d9d9d9; background: #fff; outline: 6px solid transparent;}
#act .decoArea .palette .weight.on {outline: 6px solid #777;}
#act .decoArea .palette .weight span {display: inline-block; width: 30px; background: #232323; transform: rotate(320deg);}
#act .decoArea .palette .weight1 span {height: 2px;}
#act .decoArea .palette .weight2 span {height: 4px;}
#act .decoArea .palette .weight3 span {height: 7px;}
#act .decoArea .palette .weight4 span {height: 10px;}

#act .decoArea .palette .opacityWrap {display: flex; justify-content: space-evenly;}
#act .decoArea .palette .opacity {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-family: "NPSfontB";
    font-size: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #d9d9d9;
    background: #fff;
    letter-spacing: -1.5px;
    outline: 6px solid transparent;
}
#act .decoArea .palette .opacity.on {outline: 6px solid #777;}
#act .decoArea .palette .opacity1 {color: #cecece;}
#act .decoArea .palette .opacity2 {color: #a9a9a9;}
#act .decoArea .palette .opacity3 {color: #7e7e7e;}
#act .decoArea .palette .opacity4 {color: #232323;}

#act .decoArea .bottomBtn {display: flex;}
#act .decoArea .bottomBtn .undo {width: 72px; height: 72px; background: url("../images/undo_off.png") no-repeat; cursor: pointer; margin-right: 10px; pointer-events: none;}
#act .decoArea .bottomBtn .undo.on {background: url("../images/undo.png") no-repeat; pointer-events: auto;}
#act .decoArea .bottomBtn .undo:active {background: url("../images/undo_push.png") no-repeat;}
#act .decoArea .bottomBtn .redo {width: 72px; height: 72px; background: url("../images/redo_off.png") no-repeat; cursor: pointer; margin-right: 10px; pointer-events: none;}
#act .decoArea .bottomBtn .redo.on {background: url("../images/redo.png") no-repeat; pointer-events: auto;}
#act .decoArea .bottomBtn .redo:active {background: url("../images/redo_push.png") no-repeat;}