@charset "utf-8";
/* CSS Document */

body {
	margin:0 auto;
	padding:0;
	font-family: 'Verdana', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#container { width:300px; height:250px;	overflow:hidden; top:0px; position:absolute; background-color:#fff; display:none; }

/* Global */
.adSize { position:absolute; top:0px; width:300px; height:250px; }
.defPos { position:absolute; top:0px; left:0px; }
.btn { cursor: pointer; }
.hideElm { display:none; }
.buttonConfig { background-color:#fff; cursor: pointer; opacity:0; }
.anchorCenter { -webkit-transform-origin: center center; transform-origin: center center; }

/*SHINE*/
.dot{ position:absolute; left: -20px; top: -20px; width:40px; height:40px; background: url(shine.png) no-repeat; background-size: 100%; }

/* BORDER */
#border { box-sizing: border-box; border: 1px solid #ABABAB; opacity: 0.5; }

/*-- BG --*/
#bg { background: url(bg.jpg) no-repeat; background-size: 100%; }
#bgBlack { background: url(bgBlack.png) no-repeat; background-size: 100%; }

/*-- LOCK UP --*/
#girl { background: url(girl.png) no-repeat; background-size: 100%; }
#resolve { background: url(resolve.png) no-repeat; background-size: 100%; }

/*-- FRAME 1 --*/
#h1 { background: url(h1.png) no-repeat; background-size: 100%; }
#h2 { background: url(h2.png) no-repeat; background-size: 100%; }
#h3 { background: url(h3.png) no-repeat; background-size: 100%; }
#h4 { background: url(h4.png) no-repeat; background-size: 100%; }
#round { background: url(round.png) no-repeat; background-size: 100%; }
#square { background: url(square.png) no-repeat; background-size: 100%; }
#trillion { background: url(trillion.png) no-repeat; background-size: 100%; }

/*-- FRAME 2 --*/
#t1 { background: url(t1.png) no-repeat; background-size: 100%; }
#t2 { background: url(t2.png) no-repeat; background-size: 100%; }
#t3 { background: url(t3.png) no-repeat; background-size: 100%; }
#t4 { background: url(t4.png) no-repeat; background-size: 100%; }
#round { background: url(round.png) no-repeat; background-size: 100%; }
#square { background: url(square.png) no-repeat; background-size: 100%; }
#trillion { background: url(trillion.png) no-repeat; background-size: 100%; }

/*-- RESOLVE --*/
#resolve_t1 { background: url(resolve_t1.png) no-repeat; background-size: 100%; }
#resolve_t2 {background: url(resolve_t2.png) no-repeat;background-size: 100%;top: -97px;}
#resolve_t3 { background: url(resolve_t3.png) no-repeat; background-size: 100%; }
#resolve_t4 { background: url(resolve_t4.png) no-repeat; background-size: 100%; }
#line {position: absolute;width: 145px;height: 1px;background-color: #fff;top: 96px;left: 78px;}
#mask1 {position: absolute;width: 300px;height: 96px;top: 0px;left: 0px;overflow: hidden;}
#mask2 {position: absolute;width: 300px;height: 200px;top: 97px;left: 0px;overflow: hidden;}

#round2 { background: url(round.png) no-repeat; background-size: 100%; }

.part{
  position: absolute;
	width: 220px; height: 220px; background-size: 100%;
}

#frame_3{
    position: absolute;
    top: 0px; left: 0px;
    width: 300px;
    height: 250px;
    overflow: hidden;
/*    background: gray;*/
}

#proximity{
  position: absolute;
  border: 1px solid red;
  opacity: 0;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
#proximity2{
  position: absolute;
  border: 1px solid yellow;
  opacity: 0;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
#proximity3{
  position: absolute;
  border: 1px solid white;
  opacity: 0;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}

#cta1_out { background: url(cta1_out.png) no-repeat; }
#cta1_over { background: url(cta1_over.png) no-repeat; opacity: 0; }
#cta1_line { background: url(cta1_line.png) no-repeat; }
#cta1_box {position:absolute;top: 192px;left: 78px;width: 145px;height: 36px;background-color:#fff;}