@charset "utf-8";

/* CSS Document */
html { font-size: 16px; }
body, input, select, textarea { font-family: Open Sans, Helvetica,Arial,  sans-serif; font-size: 12px; font-size: 0.75rem; vertical-align: middle; padding: 0; margin: 0; }
.holded { color: #aaa; }
img { border: 0; max-width: 100%; }
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; }
.form-con .img-code .code{z-index: 99;}
a:link, a:visited { color: #fff; text-decoration: none;}
a:hover { }
/*去除手机端按钮默认样式*/
input { -webkit-appearance: none; outline: none; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

/*去除 select 背景*/
select::-ms-expand { display: none; }
select { border: none; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; }
button{ -webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.holded{font-size: 16px; font-size: 1rem;}
/* 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; }

/* End hide from IE Mac */

/* end of clearfix */

/* layout */
/*#main_1,#main_2,#main_3{ position: absolute;top:0;left: 0;right: 0;margin:0 auto;}

#main_1{z-index: 66;}
#main_2{ z-index: 55;}
#main_3{z-index: 44;}*/

.dnim{display: none!important;}
.red{ color: #ff2755!important;}
.bg_img{ position: fixed;left: 0;top: 0; background:url(../images/ladies_bg.jpg) repeat center top;width:100%;height: 100%;z-index: -20;}
.bg_mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);z-index: -10; }


.mask { position: fixed; top: 0%; left: 0%; background: #000000; opacity: 0.8; filter: alpha(opacity=80); width: 100%; height: 100%; z-index: 60;}
.header{ width: 100%;display: block;height: 80px;margin: 0 auto;z-index: 50;}
.header-wrap{width: 90%;margin: 0 auto;display: block;}
.logo{float: left;padding-top: 20px;}
.login{ float: right;line-height: 80px;}
.login{color: #fff; font-size: 14px; font-size: 0.875rem;}
.login a{ color:#ff4f75;font-size: 16px;line-height: 80px;text-decoration: none;font-weight: 600;text-decoration: underline;}
.login a:hover{ color:#ff4f75; text-decoration: underline; }
.sel-wrap{ position: relative; width: 840px; height: auto;box-sizing:border-box; padding:0;margin:120px auto 0;text-align: center;background-color: #fff; border-radius: 6px; }
.sel-title{ display:block; box-sizing:border-box;  margin:0 auto ;width:100%;height: 60px; height: 3.75rem; background-color: #fff; font-size: 32px; font-size: 2rem; font-weight: 700; color: #fff; line-height: 60px;line-height: 3.75rem; text-align: center;   text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.35);
  border-top-left-radius:6px; border-top-right-radius: 6px;background-color: #df3151;
  background-image: -moz-linear-gradient( 90deg, rgb(238,77,111) 0%, rgb(236,38,71) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(238,77,111) 0%, rgb(236,38,71) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(238,77,111) 0%, rgb(236,38,71) 100%);
 }
.lady-banner{ overflow: hidden; padding:10px 8px 8px;}
.lady-banner ul li{width: 25%;float: left;display: block; cursor: pointer;position: relative; overflow: hidden;font-size: 0;}
.lady-banner ul li:hover img{  box-shadow: inset 0px 2px 10px 0px rgba(9, 9, 9, 0.5);transform: scale(1.2);
-ms-transform: scale(1.2);  /* IE 9 */
-webkit-transform: scale(1.2);  /* Safari  Chrome */
-o-transform: scale(1.2); /* Opera */
-moz-transform: scale(1.2); /* Firefox */
transition: all 8s ;webkit-transition:  all 8s ;
-o-transition:  all 8s ;
}
.sel-wrap .banner-btn:hover img{ box-shadow: none; transform:none; -webkit-transform:none;-o-transform:none; -moz-transform:none;}

.banner-btn  img{ padding-right: 6px;height: 20px;}
.lady-banner .banner-btn{position: absolute; margin:0 auto; bottom:8%;left: 50%;margin-left: -60px; width: 120px;height: 36px;height: 2.25rem; display: block;background-color: #57aaff;border-radius: 6px;color:#fff;font-size: 24px;font-size: 1.25rem; font-weight: 600;text-align: center;line-height: 69px; line-height: 2.25rem;  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);cursor: pointer;webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;z-index: 20;}
.lady-banner .banner-btn:hover{ background-color: #f5455a;}
.banner-overlay{background-color: #f990df;position: absolute;top:0;bottom:0;width: 100%;height: 100%;display: block; z-index: 10;opacity: 0;
filter: alpha(opacity=0); transition: all 1s ease-in-out;webkit-transition: all 1s ease-in-out;}

/* reg style */
.lady-banner ul li:hover .banner-overlay{opacity: 0.1;
filter: alpha(opacity=10);}
.reg-box{ width: 100%;margin:60px auto 0;  text-align: center;}
.register-area{width: 500px; height: auto;margin:0 auto; max-width: 500px;}
.reg-container h1{ font-size: 36px;font-size: 2.25rem; font-weight: 600; text-align: center; color: #fff;margin-bottom: 30px;line-height: 1.3;}
.reg-container h1 span{ font-size: 32px;font-size: 2.125rem;}
.reg-container h1 strong{ font-size: 40px;font-size: 2.5rem;font-style: italic;color: #ff2755;font-weight:700;}
.terms_privacy{margin-top: 20px; color: #ddd; font-size: 14px; font-size: 0.875rem; line-height: 1.4;}
.terms_privacy a{ color: #ff4f75; text-decoration: underline;}
.mlogin{ color: #fff; font-size: 14px; font-size: 0.875rem; margin-top: 10px; display: none;}
.mlogin a{ color:#ff4f75;font-size: 16px;line-height: 1.4;text-decoration: none;font-weight: 600;text-decoration: underline; }

    /* main_pop */
.main_pop{position: absolute;top: 0;left: 0;bottom: 0;right:0;width: 580px;height: 320px;margin:0 auto; margin-top: 12%;display: block;z-index: 99;background-color: #fff;border-radius: 8px;padding-bottom: 0px;*margin-left: -360px;*left:50%;opacity: 1;
filter: alpha(opacity=0);}
.mask-pop{position: fixed; top: 0%; left: 0%; background: #000000; opacity: 0.80; filter: alpha(opacity=80); width: 100%; height: 100%; z-index: 88; }
.pop_title{width: 100%;height: 68px;display: block;border-top-left-radius: 8px; border-top-right-radius: 8px;background-color: #df3151;
  background-image: -moz-linear-gradient( 90deg, rgb(238,77,111) 0%, rgb(236,38,71) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(238,77,111) 0%, rgb(236,38,71) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(238,77,111) 0%, rgb(236,38,71) 100%);
}
.pop_title h1{ color: #fff;font-size: 36px; font-size: 2.25rem;line-height: 64px;font-weight: bold;  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.35);text-align: center;margin:0 auto; width: 100%;
  -moz-transform: matrix( 1,0,0,1.0009592314404,0,0);
  -webkit-transform: matrix( 1,0,0,1.0009592314404,0,0);
  -ms-transform: matrix( 1,0,0,1.0009592314404,0,0);}
.pop_content{display: block; margin:40px 20px;}
.pop_content p{font-size: 22px; font-size: 1.25rem;color:#111; line-height: 1.3;font-weight: normal;font-family: arial;text-align: center;}
.pop_content p span{font-size: 30px; font-size: 1.875rem;font-style: italic;font-weight: bold;}
.pop_button{ width: 100%;margin: 0 auto;margin-top:1.875rem;}
.pop_button input,.button{  border-radius: 6px; background-color: rgb(67, 170, 242);box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);  width: 280px; height: 70px;height: 4.375rem; font-size: 42px;font-size: 2.625rem; font-weight: bold;text-align: center;line-height:70px;line-height: 4.375rem; margin:0 auto;display: block;color:#fff;border:0;cursor: pointer;transition: all 0.3s; cursor: pointer;}
.pop_button input:hover,.button:hover{ background-color:rgb(67, 170, 242); transition:all 0.6s; transform:scale(1.08);-moz-transform:scale(1.08); -webkit-transform:scale(1.08);-ms-transform:scale(1.08);   }
.btn_s{ display: inline-block; font-size: 26px; height: 52px;line-height:52px;width: 220px; border-radius: 6px;}
a.grey{ background-color: #ddd;}
.question{ margin:30px auto 60px;max-width: 560px;}
.ques-tip{ font-size: 18px;line-height: 1.3em; font-weight: 400; margin:0 auto 10px; text-align: left;
    color: #888;}
.ques-title{ font-size: 24px;font-weight: 600;line-height: 1.3em;text-align: left;}
.ques_btn{ margin:40px auto 0;}
.ques_btn a{margin: 0 8px;}
#main_1 .sel-wrap,#main_2 .sel-wrap,#main_3 .sel-wrap{ max-width: 660px; }
.button:hover{ background-color: #f5455a;}


.reg-title{ border:1px #000 solid;width: 520px;height: 70px;border-radius: 8px;background-color: #fff;color:#000;font-size: 40px; font-size: 2.5rem;font-weight:800;margin:0 auto;margin-bottom:20px;line-height: 70px;text-align: center;margin-top:-35px;position: relative;}

.footer{ position: fixed; bottom:0; left: 0;right: 0; width: 100%;height: 40px;text-align: center;margin:0 auto; }
.footer .copyright{font-size: 0.875rem;line-height: 40px;margin:0 auto;color: #ddd;font-weight: normal; }


/* End layout */
/* TabbedPanels */

/* TabbedPanels */
.TabbedPanels { margin:10px 0 0; padding:0; }
.TabbedPanelsTabGroup {margin:0 0 22px; margin:0 0 -1.375rem; padding:0;height: 44px; height:2.75rem; text-align:center; }
.TabbedPanelsTab { font-family:Verdana, Geneva, sans-serif; display:inline-block;width: 44px; width:;height: 44px; height:2.75rem;line-height: 44px; line-height:2.75rem; text-align:center; -moz-user-select:none; -khtml-user-select:none; cursor:default; margin-right:10px; border-radius:50%;font-size: 24px; font-size:1.5rem; color:#95c1d6; background:#deeef5; border:1px solid #ddd; }
.TabbedPanelsTabSelected { background:#57aaff; color:#fff; border-color:#57aaff; }
.TabbedContent{ padding:60px; color:#333; font-size:16px;font-size: 2.7525rem;   background-color:#fff; background-color:rgba(255,255,255,0.95); box-shadow:0 4px 25px rgba(0,0,0,0.15); border-radius: 8px;text-align: left;}
/* form */

/* form */
#regForm { width:100%; margin:0 auto; }
.form-item { margin:10px 0; }
.form-label { font-size:16px; font-size:1rem; float:left; width:22%; padding-top:10px; }
.form-con { float:left; width:78%; }
.input_test, .input-group { width:100%; height:48px; height:3rem; font-size: 16px;font-size: 1rem; line-height:2.75rem; line-height:3rem; box-sizing:border-box; background-color:#fff; border:1px solid #aaa; border-radius:4px; text-indent: 4px;vertical-align: top; }
.input-group .input_test { font-size:14px; font-size:1rem; height:48px; height:2.75rem; }
.select-wrapper { width:100%; position:relative; overflow:hidden; z-index:0; height:48px; height:3rem; box-sizing:border-box; background-color:#fff; border:1px solid #aaa; border-radius:4px; }
.select-wrapper:after { display:block; content:""; position:absolute; width:8px; height:5px; right:4px; top:48%; background:url(../images/down_arrow.png) no-repeat right center; }
.select-wrapper select { font-size:16px; font-size:1rem; float:left; width:109%; margin-top:3px; text-indent:4px; height:30px; height:2.5rem;/* 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:56px; height:2.75rem; }
.input-group .select-wrapper select { width:130%; }
.input_desc { font-size:14px; font-size: 0.875rem; line-height:0;padding-bottom: 10px; text-align:right; color:#888; }
.button_box { padding-top:24px; }
.submit-button { display:block; width:100%; text-decoration:none; height:56px; line-height:56px; font-size:32px; height:3.5rem; line-height:3.125rem; font-size:2rem;font-weight: 600; cursor:pointer; background-color:#ff4f75 !important; border:none; color:#fff; border-radius:6px; transition:all 0.3s; -webkit-transition:all 0.3s; margin-top:0 !important;  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.25);}
.submit-button:hover { background-color:#43aaf2 !important; color:#fff; }
.holded { color:#aaa; }
.input_holder { position:relative; }
.input_holder .holder { position:absolute; font-size:16px; font-size: 1rem; padding-left:5px; line-height:3;line-height: 3rem; color:#999; }
.gender_select { padding-top:6px; }
.gender_box { margin-right:20px; display:inline-block; cursor:pointer; }
.gender_box .icon{ height:18px; width:18px; display:inline-block; border-radius:50%; }
#male .icon { border:2px #43aaf2 solid; }
#male.active .icon { background:#43aaf2; }
#female .icon { border:2px #ff4f75 solid; }
#female.active .icon { background:#ff4f75; }
.gender_box span {display:inline-block; vertical-align:top; line-height:22px; padding-left:8px; }


/* intsva */
.intsva { position: absolute; z-index: 98; line-height: 1em; height: auto; font-size: 11px; /*font-size:0.7rem;*/ margin-top: -29px; padding: 4px 6px; padding: 0.25rem 6px; color: #fff; background-color: #f25c5c; border: 1px solid #f25c5c; 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: #f25c5c; left: 0; /* 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: #f25c5c;/* use for arrow border */ }
.error-tips { line-height: 2em; color: #CE4844; }
.error-tips.block { margin: 6px 0 10px; padding: 5px 10px; margin: 0.375rem 0 0.625rem; padding: 0.375rem 0.625rem; border: 1px solid #f3c6cc; background: #ffedef; border-radius: 0.2rem; }
.error-tips.block h1 { font-size: 14px; margin-bottom: 0.2em; }
.error-tips.block p { line-height: 1.2em; margin-bottom: 0.4em; }

/*for ie*/
.ie9 .select-wrapper select { margin-top: 10px; height: 1.5rem; width: 98%; }
.ie8 .select-wrapper select { margin-top: 10px; height: 20px; width: 98%; border: none; background: url(../images/icon_arrow.png) no-repeat 100% center; }

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

@media only screen  and (max-width:1400px){


}

@media only screen  and (max-width:1024px){

}


@media only screen  and (max-width:800px){
    .main_pop{ width: 75%;    height: 350px;}
    .sel-wrap{width: 90%;}
}



@media only screen  and (max-width:736px){
  .bg_img{background:url(../images/mbg.jpg) repeat center top;    background-size: contain;}
    .lady-banner ul li{width: 50%;}
    .sel-wrap{ margin: 30px auto 0; width: 80%;}
    .lady-banner .banner-btn{     margin-left: -80px;
    width: 160px;}
    .footer{ position: relative;bottom: auto;left: auto;right:auto; margin-top: 40px;}
    .register-area{ width:90%; }
    .reg-box{ margin-top:30px;}
    .pop_button input{ width: 90%;}
    .mhide{display: none;}
    .question{width: 90%;}
    .ques-tip{ font-size: 15px;}
    .ques-title{ font-size: 22px;}


}

@media only screen  and (max-width:550px){
        html { font-size: 14px; }
      .login{display: none;}
      .logo{float: none;text-align: center; }
      .pop_content{ margin: 30px 20px;}
        .main_pop{height: 320px;width: 90%;}  
      .mlogin{ display:block;}
      .question{ margin:30px auto;}
      .ques_btn a{ display: block;margin:16px auto;}
      .ques_btn{     margin: 30px auto 0;}
}
@media only screen  and (max-width:480px){
      .sel-wrap{ margin: 0px auto 0; width: 90%;    }
          .lady-banner .banner-btn{     margin-left: -70px; width: 140px;}
          .lady-banner{ padding: 15px 10px 10px;}
          .TabbedContent{ padding: 40px 20px;}
          .register-area{ width: 94%;}
          .logo img{width: 75%;}
          .reg-box{ margin-top: 0;}
          .reg-container h1{ width: 80%; margin: 0 auto 20px;}
          .reg-container h1{font-size: 24px;}
    }
@media only screen  and (max-width:380px){
  .form-label{font-size: 14px; font-size: 1rem;}
  .reg-box{margin-top: 0;}
  .pop_content p span{ font-size: 1.5rem;}
  .main_pop{height: 300px;}

}

@media only screen  and (max-width:345px){
        html { font-size: 14px; }
        .main_pop{height: 290px;}
        .header{ height: auto;}
        .lady-banner .banner-btn{margin-left: -50px; width: 100px; border-radius: 4px;}
        .banner-btn img{ padding-top:3px; height: 18px;}
        .logo img{ width: 80%;}
        .logo{ padding: 20px 0;}
        .form-label{width: 25%;}
        .form-con{ width: 75%;} 
        .TabbedContent{ padding: 40px 12px;}
        .pop_content p{font-size: 16px; font-size: 1.125rem;}
        .reg-container h1 strong{ font-size: 26px;}
        .ques-tip{ font-size: 14px;}
        .question{ margin:20px auto;}
        .ques_btn{ margin:25px auto 0;}
        .ques-title{font-size: 18px; }
 
}

@media (max-width:812px) and (orientation: landscape) {
   .footer{ position: relative;bottom: auto;left: auto;right:auto; margin-top: 40px;}
      .ques_btn a{ display: block;margin:10px auto;}
      .main_pop{margin-top: 6%;height: 310px;}
      .pop_content{ margin:30px 20px;}
      .pop_content p{font-size: 16px;}
      .sel-wrap{ margin: 10px auto 0;}
      .ques_btn{margin:20px auto 0;}

}

@media (min-width:600px) and  (max-width: 813px) and (orientation:landscape){

.popup-container{    width: 94% !important;
    left: 3%!important;
    margin-left: 0 !important;
    margin-top: 0!important;
    top: 3%!important;
    height: 90%!important;
    max-height: none!important;}
}
.dnone{display: none;}
.fofixed{ position: fixed;bottom: 0;right: 0;left: 0;text-align: center;}
/*
==============================================
slideDown
==============================================
*/



.fadeInDown {
  animation-name: fadeInDown;
    animation-duration: 0.6s;
   animation-fill-mode: both;
   display: block;
}

@keyframes fadeInDown {
  0% {
    display: block;
    opacity: 0;
    transform: translate3d(0, -25%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes fadeInDown {
   0% {
    display: block;
    opacity: 0;
    transform: translate3d(0, -25%, 0);
  }


  to {
    opacity: 1;
    transform: none;
  }
}




/*
==============================================
floating
==============================================
*/

.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}