/*.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;
}

.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;
    /*width: 100%;*/
    /*height: 100%;*/
}

.selectArea{
    position: absolute;
    top: 145px;
    left: 768px;
    padding: 25px;
    /*background-color: #fff;*/
    /*border-radius: 10px;*/
    /*border: 1px solid #CCBEA6;*/
    box-sizing: border-box;
    width: 209px;
    height: 497px;
    /*opacity: 1;*/
}
/*.selectArea.hide{*/
/*    opacity: 0;*/
/*}*/
.selectArea .gridWrapper{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
}
.selectArea .grid{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.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: 59px;
    height: 59px;
}
.selectArea .gridWrapper .grid .gridCell div.on{
    outline: 5px solid #5387FF;
}

.imgWrap{
    position: absolute;
    top: 128px;
    right: 202px;
    width: 427px;
    height: 526px;
    /*border: solid 2px;*/
    /*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: 74px;
}

.color1{background-color: #000;}
.color2{background-color: #104866;}
.color3{background-color: #26678D;}
.color4{background-color: #28789B;}
.color5{background-color: #474B54;}
.color6{background-color: #F58020;}
.color7{background-color: #BA4126;}
.color8{background-color: #CFA32B;}
.color9{background-color: #FDC80C;color: #000 !important;}
.color10{background-color: #FFEFAF;color: #000 !important;}
.color11{background-color: #6A3414;}
.color12{background-color: #018044;}