/*.introPage .mainTitle { width: 525px; height: 77px; }
.introPage .mainTitle img { width: 100%; }*/
.activityPage {position: relative; width: 100%; height: 100%; opacity:0; background: url("../images/activityBg.png")}

.activityPage .cl_mainActTitle {display:none;}
.activityPage .cl_mainActTitle.on {display:block;}


.zoomActivity .zoomArea {position:absolute; overflow: hidden;}

.zoomActivity .zoomArea .zoomWrap {position: absolute; transform-origin: top left;}
.zoomActivity .zoomArea .zoomWrap > img {width:100%;}

.zoomArea .colorArea{
    position: absolute;
}
.zoomArea .colorArea .gridWrapper{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.37%;
    height: 100%;
}

.zoomArea .colorArea .gridWrapper .grid{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.37%;
    width: 100%;
    height: 100%;
}

.zoomArea .colorArea .gridWrapper .grid .gridCell{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    /*border: 1px solid #000;*/
}

.zoomArea .colorArea .gridWrapper .grid .gridCell .colorCell{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: relative;
}
.zoomArea .colorArea .gridWrapper .grid .gridCell .colorCell.on{
    opacity: 1;
}

.zoomArea .colorArea .gridWrapper .grid .gridCell .xIcon{
    position: absolute;
    width: 80%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.zoomArea .colorArea .gridWrapper .grid .gridCell .xIcon img{
    width: 100%;
    height: 100%;
}

.zoomActivity .zoomArea .xIcon img {
    display: block;
    position: static;
    transform-origin: unset;
}

.zoomArea .colorBox{
    position: absolute;
    box-sizing: border-box;
}

.selectArea{
    position: absolute;
    top: 129px;
    left: 763px;
    padding: 25px;
    /*background-color: #fff;*/
    /*border-radius: 10px;*/
    /*border: 1px solid #CCBEA6;*/
    box-sizing: border-box;
    width: 281px;
    height: 497px;
    /*opacity: 1;*/
}
/*.selectArea.hide{*/
/*    opacity: 0;*/
/*}*/
.selectArea .gridWrapper{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 100%;
}
.selectArea .grid{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.selectArea .gridCell{box-sizing: border-box;border: 0 solid transparent; width: 50%; height: 100%; background-color: #000}
.selectArea .gridWrapper .grid .gridCell div{
    box-sizing: border-box;
    /*align-content: center;*/
    font-family: "GodoB";
    font-size: 20px;
    color: #fff;
    text-align: center;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.selectArea .gridWrapper .grid .gridCell div.on{
    outline: 5px solid #5387FF;
}

.imgWrap{
    position: absolute;
    top: 114px;
    right: 250px;
    width: 323px;
    height: 545px;
    /*border: 2px solid;*/
    /*border-color: #222;*/
    opacity: 1;
}
.imgWrap.hide{
    opacity: 0;
}
.imgWrap img{
    width: 100%;
    height: 100%;
}
.cl_btnReset.hide{
    opacity: 0;
    display: none;
}
.cl_btnReset{
    opacity: 1;
    display: block;
}
.cl_btnReset.useIcon {
    right: 30px;
    bottom: 51px;
}

.color1{background-color: #000000;}
.color2{background-color: #2E2F4E;}
.color3{background-color: #334037;}
.color4{background-color: #41452F;}
.color5{background-color: #676867;}
.color6{background-color: #E495B5;}
.color7{background-color: #FAB799;}
.color8{background-color: #BFAA4E;}
.color9{background-color: #FDC80C;}
.color10{background-color: #83C295;}
.color11{background-color: #CE2027;}
.color12{background-color: #712A43;}
.color13{background-color: #6D7E69;}
.color14{background-color: #7E9279;}
.color15{background-color: #8EA188;}
.color16{background-color: #A4B4A0;}
.color17{background-color: #FFFFFF; color: #000 !important; border: 1px solid #bdbdbd}
.zoomArea .colorArea .gridWrapper .grid .gridCell .colorCell.color17{
    border: none;
}
.color18{background-color: #53170A;}