body{
 margin: 0;
 padding: 0;
 }

 .wrapper{
 position: absolute;
 width: 320px;
 height: 480px;
 top: 0;
 left: 0;
 overflow: hidden;
 cursor: pointer;
 opacity: 0;
 box-sizing: border-box;
 perspective: 500px;
 perspective-origin: 50% 50%;


 }

 @font-face {
 font-family: 'rawDg';
 src: url('assets/Rawer.woff') format('woff');
 }

 .bg, .bg_bw, .play_btn, .bg_w, .bg_r, .bg_o, .bg_g, .m_w, .m_g, .m_o, .m_r, .pico, .sico, .pinst, .sinst, .bg_out, .cp_1, .cta_btn{
 position: absolute;
 width: 320px;
 height: 480px;
 top: 0;
 left: 0;
 pointer-events: none;
 }

 .mask{
 position: absolute;
 width: 600px;
 height: 480px;
 top: 400px;
 left: -600px;

 mask-image: url('https://dsp-media.eskimi.com/upload/rm/upload/1646818370/Maggi_Colorise_320x480_Prod/assets/mask.png');
 -webkit-mask-image: url('https://dsp-media.eskimi.com/upload/rm/upload/1646818370/Maggi_Colorise_320x480_Prod/assets/mask.png');
 }

 .bg_w, .bg_r, .bg_o, .bg_g{
 top: -400px;
 left: 600px;
 }

 .pt_w, .pt_g, .pt_o, .pt_r{
 position: absolute;
 width: 28px;
 height: 28px;
 left: 276px;
 }

 .pt_w{
 top: 365px;
 }

 .pt_g{
 top: 320px;
 }

 .pt_o{
 top: 275px;
 }

 .pt_r{
 top: 230px;
 }

 .brush{
 position: absolute;
 width: 53px;
 height: 112px;
 top: 250px;
 left: 210px;
 }

 .tip_w, .tip_g, .tip_o, .tip_r{
 position: absolute;
 width: 13px;
 height: 20px;
 left: 41px;
 top: 0;
 }

 .ptclick{
 position: absolute;
 width: 224px;
 height: 294px;
 top: 82px;
 left: 47px;

 }


/*=============================================================================*/