/*font*/
@font-face {
  font-family: 'Gotham';
  src: url('../font/Gotham-Bold.eot?#iefix') format('embedded-opentype'),  url('../font/Gotham-Bold.otf')  format('opentype'),
         url('../font/Gotham-Bold.woff') format('woff'), url('../font/Gotham-Bold.ttf')  format('truetype'), url('../font/Gotham-Bold.svg#Gotham-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham';
  src: url('../font/Gotham-Book.eot?#iefix') format('embedded-opentype'),  url('../font/Gotham-Book.otf')  format('opentype'),
         url('../font/Gotham-Book.woff') format('woff'), url('../font/Gotham-Book.ttf')  format('truetype'), url('../font/Gotham-Book.svg#Gotham-Book') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*base style*/
    body {margin:0; padding:0; font-size:12px; font-family:Gotham, Arial, Helvetica, sans-serif; color:#fff; background:#eee;overflow: hidden;}
    img {border:none;}
.hidden{display: none;}
.wrap{position:relative;background:url(../images/bg.jpg) no-repeat 0 0;width:300px;height:692px;border: 0!important;}
.wrap ul{margin: -10px 0 0 33px;padding: 0;text-align: center;float: left;}
.wrap ul li{float: left;width: 100px;height: 100px; -webkit-box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.5);box-shadow: 0px 5px 9px 0px rgba(0,0,0,0.5);border-radius: 100%;margin:0 30px 20px 0;list-style: none;}
.wrap ul li a{display: block;position: relative;color: #fff;text-align: center;}
.wrap ul li a img{display: block;width: 100px;height: 100px;border-radius: 100%;}
.wrap ul li a div{display: table;position: absolute;top: 0;left: 0;width: 100px;height: 100px;background-color: rgba(0,0,0,0.6);opacity: 0;border-radius: 100%;}
.wrap ul li a p{display: table-cell;vertical-align: middle;width: 100px;border-radius: 100%;margin:0;padding: 0 5px;}
.wrap ul li a p span{color: #00ccff;display: block;padding-top: 5px;}
.wrap ul li a:hover div{opacity: 1;}
.wrap .confirm{color: #c1c1c1;width: 260px;margin:0 auto;padding: 80px 0 7px 0;text-align: center;font-size: 23px;text-transform: uppercase;border-bottom: #5e626b solid 1px;}
.wrap .confirm span{display: block;font-size: 45px;height: 58px;overflow: hidden;}
.wrap .form{width: 280px;margin:0 auto;background-color: rgba(0,0,0,0.45);border-radius:5px;text-align: center;padding:20px 0 0 0;margin-bottom: 20px;min-height: 289px;}
.wrap .form h3{font-size: 23px;margin-top:0;}
.wrap .form h3.thanks{padding-top: 70px;}
.wrap .form input{height: 50px;line-height: 50px;border:0 none;border-radius:25px;width: 240px;text-align: center;font-size: 20px;color: #28568a;margin-bottom: 20px;}
.wrap .form input:focus{outline: 0 none;}
.wrap .btn{display: block;margin:0 auto;width: 190px;height: 50px;line-height: 50px;color: #1f7bd1;font-weight: bold;background-color: #e4e4e4;border-radius:25px;font-size: 18px;text-decoration: none;text-align: center;-webkit-box-shadow: 0px 3px 0px 0px rgba(178,169,169,1);-moz-box-shadow: 0px 3px 0px 0px rgba(178,169,169,1);box-shadow: 0px 3px 0px 0px rgba(178,169,169,1);}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #28568a;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #28568a;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #28568a;
}
:-moz-placeholder { /* Firefox 18- */
  color: #28568a;
}
@media screen and (max-height: 600px){
  .wrap{height: 600px;}
  .wrap ul{margin-left: 50px;}
  .wrap ul li{width:85px;height: 85px;margin: 0 25px 15px 0;}
  .wrap ul li a img{width: 85px;height: 85px;}
  .wrap ul li a div{width: 85px;height: 85px;}
  .wrap .confirm{padding-top: 30px;}
  .wrap .form h3.thanks{padding-top: 15px;}
}