@charset "utf-8";
html, body { height: 100%; font-size:16px; } 
body { background-color: #000000; margin:
0;  overflow: hidden; padding: 0;margin: 0; font-family:'Raleway',Arial,Helvetica,sans-serif;} 

img { border:0; max-width:100%;vertical-align: middle;}
div, ul, ol, li, dl, dt, dd, a, img, form, p, h1, h2, h3, h4, h5, h6, span { margin:0; padding:0; border:0px; }
input,select{ outline: none; }
ul,li{list-style: none;}
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,600');
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
a:link,a:visited{ color:#00bbb9; text-decoration:none;}
a:hover{ color:#00736f; }
/*去除手机端按钮默认样式*/
input{ -webkit-appearance: none; outline: none; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 10   00px white inset; }
/*去除 select 背景*/
select::-ms-expand { display: none; }
select { border: none; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; }
.cl{clear: both;}
.disnone{display:none; }


body{ height: 100%;box-sizing: border-box;background-color: #111;  position: relative;background:url(../images/star_bg.jpg) repeat left top;}
canvas {position: absolute;top: 0; left: 0;  z-index: -1;} /*star style*/
a{ color: #ffffff; } 
#info{ position: absolute; top:10px;width: 100%; color: #ffffff; padding:0px; font-family:Raleway, arial; font-size: 42px; font-weight: 100; text-align: center; }
#info img{text-align: center;max-width: 240px;display: block;margin:0 auto 20px;}
#menu{ position: absolute; bottom: 20px; width: 100%; text-align: center; }
.reg_title{ font-family:Raleway, arial; font-size: 24px;line-height: 1; font-weight: 100; text-align: center;color: #fff;padding:0 0 20px; }
.reg_title_big{font-size:44px;line-height: 1.3;}
.element{ width: 140px; height: 180px; box-shadow: 0px 0px 20px rgba(255,108,153,0.5); cursor: default; } 
.element:hover{/* box-shadow: 0px 0px 20px rgba(255,108,153,0.75);*/} 
.element .number { position: absolute; top: 10px; right: 10px; font-size:
20px; color: #fff; z-index: 20;} 
.element .symbol {cursor: pointer; position: absolute;
top: 0px;height: auto; width: 100%; font-size: 70px; text-align: center; color: rgba(255,255,255,0.75);font-weight: bold;/* -webkit-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));-moz-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -o-filter:drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -ms-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));*/ -webkit-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));-moz-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -o-filter:drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -ms-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));transition:all 0.4s;
} 
.element .symbol:hover{transform: scale(1.2);}
.element .details{ position: absolute; top: 125px; width: 100%; font-size:
18px; text-align: center; color: rgba(255,255,255,1); }
button{ color:rgba(255,108,153,0.75); background: transparent; outline: 1px solid rgba(255,108,153,0.75);border: 0px; padding: 5px 10px; cursor: pointer; } 
button:hover { background-color:rgba(255,108,153,0.5); } 
button:active { color: #000000; background-color:rgba(255,108,153,0.75); }

.element_high .number_high { position: absolute; top: 10px; right: 10px; font-size:
20px; color: #fff; z-index: 20;} 
.element_high .symbol_high {cursor: pointer; position: absolute;
top: 0px;height: auto; width: 100%; font-size: 70px; text-align: center; color: rgba(255,255,255,0.75);font-weight: bold;/* -webkit-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));-moz-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -o-filter:drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -ms-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));*/ -webkit-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));-moz-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -o-filter:drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); -ms-filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95)); filter: drop-shadow(0px 0px 20px rgba(255,108,153,0.95));transition:all 0.4s;
} 
.element_high .symbol_high:hover{transform: scale(1.2);}
.element_high .details_high{ position: absolute; top: 125px; width: 100%; font-size:
18px; text-align: center; color: rgba(255,255,255,1); }





.gallery_mask{position: absolute;left: 0;right: 0;top:0;width: 100%;height: 100%; background-color: #000; opacity: 0.65;
filter: alpha(opacity=65);z-index: 10;}

.gallery{position: fixed;top:14%;display: block; z-index: 301;width: 750px;height: 578px;left: 50%;margin-left: -378px;border-radius: 8px;animation: bounceInCenter 0.4s both;text-align: center;}
.ad-images{ width: 100%;
    text-align: center;
    position: absolute;
    overflow: hidden;
    padding: 0;
    border: none;
    top: 0;
    left: 0;
    z-index: 9;
    height: 500px;
    line-height: 498px;
    background-color: transparent;}
.ad-images img{     margin: 0;padding: 0;max-height: 500px;border-radius: 8px; box-shadow: 0 0 50px rgba(0,0,0,0.1);}
.ad-loader img{     z-index: 8;top: 50%;left: 50%; margin-left: -20px; margin-top: -20px;  position: absolute; width: 40px; height: 40px; }

.ad-image { margin: 0; padding: 0;max-height: 500px;box-shadow: 0 0 50px rgba(0,0,0,0.1);}

#popup_lady .ad-lady{width:100%;margin:0 auto;display: block; position: absolute;bottom:20px;left: 0;right: 0;color: #fff;font-weight: normal;font-size: 18px;text-align: center;line-height: 1.3em;text-shadow: 0px 1px 3px rgba(0,0,0,0.85); }

 .modal-close,.reg_close,.m_reg_close {
    display: block;
    position: absolute;
    right: 30px;
    top: 30px;
    padding: 0;
    text-align: center;
    text-decoration: none !important;
    color: #fff !important;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    z-index: 301;
    display: block;
    font-weight: 200;
    font-family: Raleway, code light , arial;
    font-size: 60px;
    line-height:60px;
    transition: 0.8s ease-in-out;
}



.talk_btn{ position: absolute;bottom: 0;left: 0;right: 0; transition: 0.3s all;}
.talk_btn a{ margin:20px auto 0; border-radius: 4px; background-color: #21a3d4;
 background-image: -moz-linear-gradient( 90deg, rgb(5,93,138) 0%, rgb(48,204,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(5,93,138) 0%, rgb(48,204,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(5,93,138) 0%, rgb(48,204,255) 100%);   width: 220px;height: 46px; font-size: 22px;color:#fff;font-weight: 400; line-height: 46px; text-align: center;text-decoration: none;display: block;  box-shadow: 0px 0px 15px 4px rgba(26, 197, 255, 0.75); transition: 0.3s all;}
.talk_btn a:hover{/*background-color: #07608d;   background-image: -moz-linear-gradient( 90deg, rgb(48,204,255) 0%, rgb(5,93,138) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(48,204,255) 0%, rgb(5,93,138) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(48,204,255) 0%, rgb(5,93,138) 100%);transition: 0.3s all; */ 
transform: scale(1.1); box-shadow: 0px 0px 20px 4px rgba(26, 197, 255, 0.75);}
.footer{color: #ccc;position: absolute;bottom:5px;left: 0;right: 0;text-align: center;font-size: 12px;line-height: 1;font-weight: 300;}


.register_wrapper{
    position: absolute;bottom: 0;left: 0;right: 0;display: block;padding:20px 0 30px;
    z-index: 202;
    transition:all 0.8s ease-out ;
}
.reg_bg{    background: rgba(255,255,255,0.15);}
.reg_mask{position: absolute;left: 0;right: 0;top:0;width: 100%;height: 100%; background-color: #000; opacity: 0.85;
filter: alpha(opacity=85);z-index: 201;transition: 0.8s all ease-out;}

.reg_form{ margin-bottom: 23%!important; }

/*.vertical_btn-box{padding-top: 20px!important;margin-left:0!important;    width: 100%;}
.vertical_btn-box .submit-button{height:48px;width: 100%;line-height:46px;height:3rem; line-height:2.8rem;}
.vertical_form-item{ margin:20px 0!important;    min-width: 100%!important;}
.vertical_terms{text-align: center; padding-top: 20px!important;}*/

.vertical .button_box{padding-top: 20px!important;margin-left:0!important;    width: 100%;}
.vertical .button_box .submit-button{height:48px;width: 100%;line-height:46px;height:3rem; line-height:2.8rem;}
.vertical .form-item{ margin:20px 0!important;    min-width: 100%!important;}
.vertical .terms_privacy{text-align: center; padding-top: 20px!important;}
.vertical .regForm{ margin-bottom: 23%!important;max-width: 360px;}
.vertical .reg_title{ font-size:44px;line-height: 1.3; }
/*#regForm{max-width: 360px;}*/

.close_animate{
    transition: 0.6s ease-out;
}
.close_animate:hover {
transform: rotate(180deg);
-ms-transform: rotate(180deg);       /* IE 9 */
-webkit-transform: rotate(180deg);   /* Safari and Chrome */
-o-transform: rotate(180deg);        /* Opera */
-moz-transform: rotate(180deg);      /* Firefox */
background: none;
}
.m_wrapper{display: none;}
.signin{position: absolute;right: 30px;top:20px;display: block;font-size: 14px;line-height: 1.2;color:#ddd;font-size: 12px; text-align:right; }
.signin a:link{color:#ea629d;display: block;font-size: 14px;}
.signin a:hover{color: #b81e50;}

/* TabbedPanels */
.TabbedPanels { margin:0; padding:0; }
.TabbedPanelsTabGroup { margin:0 0 -16px; padding:0; height:32px; text-align:left; position: relative;}
.TabbedPanelsTab { font-family:"Times New Roman"; display:inline-block; width:32px; height:32px; line-height:30px; text-align:center; -moz-user-select:none; -khtml-user-select:none; cursor:default; margin-right:15px; border-radius:40px; font-size:18px;color:#fff; border:1px solid #fff; box-sizing:border-box;}
.TabbedPanelsTabSelected { background:#fff; color:#111;  }
.TabbedContent{ padding:0; color:#333; font-size:18px;background-position:center top; background-repeat:no-repeat;  background-position: center top;
    background-repeat: no-repeat;
}


/*facebook*/
.fb_box { margin-bottom:20px; padding:0; text-align:center; font-size:12px; color:#666; }
#login .fb_box { margin-bottom:0; }
.btn_fb{ width:225px; margin:0 auto 6px; text-indent:24px; background:#536daf url(../images/btn_fb_b01.jpg) no-repeat left; border-radius:4px; color:#fff; }
.btn_fb a { font-size:14px; display:block; height:35px; line-height:34px; text-decoration:none; text-align:center; color:#fff; }
.fb_or { font-size:12px; margin:14px 0; text-align:center; background:url(../images/fb_or.png) no-repeat center center; }

/* form */

#regForm select{ color: #000; }

#regForm { width:920px; margin:0 auto; display: block; position: relative;z-index: 203; transition:all 0.8s ease-out;}
.reg_area{width: auto;margin:0;}
.form-item {min-width: 300px;float: left; margin:0 15px;}
.form-label { font-size:16px; font-size:1rem;color: #fff; float:left; width:27%; padding-top:10px; }
.form-con { float:left; width:73%; }
.input_test, .input-group { width:100%; height:42px;  line-height:36px; line-height:2.25rem; box-sizing:border-box; background-color:#fff; border-radius:2px;   border:0;  text-indent: 4px;font-size: 14px;font-size: 0.875rem;}
.input-group .input_test { font-size:14px; font-size:0.875rem; height:40px; height:2.375rem; }
.select-wrapper { width:100%; position:relative; overflow:hidden; z-index:0; height:42px; height:2.5rem; box-sizing:border-box; background-color:#fff; border:1px solid #999; border-radius:4px; }
.select-wrapper:after { display:block; content:""; position:absolute; width:9px; height:5px; right:10px; top:45%; background:url(../images/down_arrow.png) no-repeat right center;color: #111; }
.select-wrapper select { font-size:14px; font-size:0.875rem; float:left; width:109%; margin-top:3px; text-indent:4px; height:36px; /* inputbox height */ padding:3px; border:none; }
.input-group .input_test, .input-group .select-wrapper { float:left; border:none; }
.input-group .select-wrapper { width:33%; height:40px;}
.input-group .select-wrapper select { width:130%; }
  #p1 .input-group{max-width: 240px;}

.input_desc { font-size:12px; line-height:1.8em; text-align:right; color:#ddd; }
.button_box {float: left;margin-left: 30px;padding-top:0; }
.submit-button { width: 220px;height:44px; line-height:42px; font-size:24px; height:2.625rem; line-height:2.5rem; display:block; text-decoration:none;  font-family:'Raleway',Arial,Helvetica,sans-serif; font-size:24px;  font-size:1.5rem; cursor:pointer; border:none; color:#fff; border-radius:2px; transition:all 0.3s; -webkit-transition:all 0.3s; margin-top:0 !important;font-weight: 400; transition:all 0.5s;
  background-color: #cd3866;
  background-image: -moz-linear-gradient( 90deg, rgb(167,0,51) 0%, rgb(255,111,173) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(167,0,51) 0%, rgb(255,111,173) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(167,0,51) 0%, rgb(255,111,173) 100%);
  box-shadow: 0px 0px 15px 4px rgba(255, 105, 163, 0.75);


/*background-color: #00b4b1;
  background-image: -moz-linear-gradient( 90deg, rgb(0,111,107) 0%, rgb(0,255,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(0,111,107) 0%, rgb(0,255,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(0,111,107) 0%, rgb(0,255,255) 100%);box-shadow: 0px 0px 15px 4px rgba(0, 255, 255, 0.75);*/}
.submit-button:hover {    transition: all 0.3s;  -webkit-transition: all 0.3s;
    transform: scale(1.06);
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -ms-transform: scale(1.06);
     box-shadow: 0px 0px 20px 4px rgba(255, 105, 163, 0.75);
  /*box-shadow: 0px 0px 20px 4px rgba(0, 255, 255, 0.75);*/}
  #login .submit-button{ color: #fff!important; box-shadow: unset;}
  #login .button_box{margin:0 auto;}
  #login .form-item{float: none;}
  #login label{font-size: 12px;}
.terms_privacy { display:none; margin: 0 auto; color:#e0e0e0; font-size:13px;text-align:right; padding-top:20px; line-height:1em;  }

.button {
  border-radius: 4px;
  position: absolute;
  left: 1253px;
  top: 902px;
  width: 200px;
  height: 46px;
  z-index: 21;
}


/* for ie8 */
.ie.ie8 select { height:22px !important; }

/* 如果没有定义这个，有可能在加载时一瞬间显示弹层 */
.popup-container { display:none; }

/* intsva */
.intsva {/* font-family:arial,Helvetica,sans-serif;*/ position:absolute; z-index:309; line-height:1em; font-size:11px; /*font-size:0.7rem;*/ margin-top:-29px; padding:4px 6px; padding:0.25rem 6px; color:#fff; background-color:#e95265; border:1px solid #e95265; border-radius:0.2rem; box-shadow:0 2px 3px rgba(0,0,0,0.3); text-shadow:0 0 1px rgba(0,0,0,0.2);/*white-space: nowrap;*/ }
.intsva .arrow { display:block; content:""; position:absolute; margin-left:10px; bottom:-6px; width:0px; height:0px; border-color:transparent; border-style:solid; border-width:6px 6px 0 6px; border-top-color:#e95265;/* use for arrow bgColor */ }
.intsva .arrow:after { display:block; content:""; position:absolute; margin-top:-5px; margin-left:-6px; width:0px; height:0px; z-index:-1; border-color:transparent; border-style:solid; border-width:6px 6px 0 6px; border-top-color:#e95265;/* use for arrow border */ }
#pointmsg_birthday_y { margin-left:-70px; }
#pointmsg_birthday_y .arrow { margin-left:70px; }
    right: 0%;
    bottom: 0%;
    width: 100%;
    height: 100%;
    background-color: #161616
}





/* response */
@media only screen and (max-width:1500px) {
.vertical .regForm{margin-bottom: 30%!important;}
    }
@media only screen and (max-width:1300px) {
.vertical .regForm{margin-bottom: 35%!important;}
    }
@media only screen and (max-width:1024px) {
.vertical .regForm{margin-bottom: 50%!important;}
    }
@media only screen and (max-width:920px) {
.form-item{     min-width: 35%;    margin: 0 10px; }
.button_box{     margin-left: 10px;}
.submit-button{    width: 160px;}
#regForm{width:100%!important;}
html{font-size: 15px;}
}

@media  (min-width:765px) and (max-width:812px) {
.form-item{min-width: 280px;margin:0 5px;}
.submit-button{width: 140px;margin-left:5px;}
  #p1 .input-group{max-width:unset;}
}
@media only screen and (max-width:765px) {
  #p1 .input-group{max-width:unset;}
#info{font-size:36px;}
.signin {position: absolute;right: unset;top:unset;left:20px;bottom:50px;line-height: 1.2; text-align:left;}

/*.m_wrapper{display: block;}*/
.intsva{transition: all 0.4s;}
.register_wrapper{    bottom: 0;top:20%; }
.vertical .form-item{     margin: 10px 0!important; min-width: 280px;  }
.vertical .reg_title{     font-size: 40px;line-height: 1.2; }
.vertical .terms_privacy{max-width: 300px;line-height: 1.2;}
.gallery{left: unset;margin:0 auto;width: 100%;}
.ad-images{position: relative;height: auto;line-height: 1;padding:0 10px;box-sizing: border-box;}
.talk_btn{position: relative;margin-top:30px;}
.ad-loader{display: none;}
.reg_mask{opacity: 0.85;
filter: alpha(opacity=85);}

/* mobile style */
.m-txt{cursor: pointer; position: fixed; bottom:40px; right: 30px;z-index: 102;border-radius: 50%;
   width: 100px;height: 100px;display: block; text-align: center;
   font-size: 20px;color: #fff;line-height: 100px;vertical-align: middle;font-weight: 400;transition: all 0.6s ease-in-out;}

.m-btn-round{cursor: pointer; position: fixed; bottom:40px; right: 30px;z-index: 101;border-radius: 50%;
   width: 100px;height: 100px;display: block; text-align: center; background-color: #ff376b;transition: all 0.6s ease-in-out;
     background-image: -moz-radial-gradient( 50% 50%, circle closest-side, rgb(255,99,140) 0%, rgb(239,41,92) 100%);
  background-image: -webkit-radial-gradient( 50% 50%, circle closest-side, rgb(255,99,140) 0%, rgb(239,41,92) 100%);
  background-image: -ms-radial-gradient( 50% 50%, circle closest-side, rgb(255,99,140) 0%, rgb(239,41,92) 100%);
   -webkit-filter: drop-shadow(0px 0px 10px rgba(255,108,153,0.95));
    -moz-filter: drop-shadow(0px 0px 10px rgba(255,55,115,0.95));
    -o-filter: drop-shadow(0px 0px 10px rgba(255,55,115,0.95));
    -ms-filter: drop-shadow(0px 0px 10px rgba(255,55,115,0.95));
    filter: drop-shadow(0px 0px 10px rgba(255,55,115,0.95));
 }
 .m-txt:hover .m-btn-round{transform: scale(1.1);}
.register_wrapper {display: none;}

.active-round{ transition: all 0.6s ease-in-out; transform: scale(15); background: rgba(0,0,0,0.85);    background-image: none;
    filter: none;}

}
@media only screen and (max-width:414px) {
.register_wrapper{top:14%;}
html{font-size: 14px;}
.ad-images img{ max-height: 460px; }
}



@media only screen and (max-width:340px) {
  .vertical .reg_title{font-size: 30px;}
.register_wrapper{top:12%;}
html{font-size: 14px;}
#info{font-size: 20px;}
.m-txt,.m-btn-round{width: 80px;height: 80px;line-height: 80px;}
}

@media only screen and (max-height:700px) {
.ad-images img{ max-height: 400px; }
    }
@media only screen and (max-height:570px) {
.ad-images img{ max-height: 320px; }
    }

@media only screen and (max-height:500px) {
.ad-images img{ max-height: 200px; }
.modal-close, .reg_close, .m_reg_close{top:15px;right: 15px;}
    }

@media only screen and (max-height:350px) {
.ad-images img{ max-height: 160px; }
.modal-close, .reg_close, .m_reg_close{top:15px;right: 15px;}
.reg_title{padding: 0 0 10px;}
    }

@media (min-width:320px) and (max-width:812px) and (orientation: landscape) {
  /*横屏 css*/
  .register_wrapper{width: 80%; max-width:400px;margin:0 auto; top:2%; }
  .ad-loader{display: none;}
  .ad-images{line-height: 1;height: auto;}
  .gallery{height: 260px;}
  #popup_lady .ad-lady{font-size:14px;}
  .vertical .reg_title{font-size: 24px;}


}