/* 
* @Author: wangguirong
* @Date:   2019-03-18 13:29:56
* @Last Modified by:   anchen
* @Last Modified time: 2019-03-28 15:54:30
*/
/*frame*/
.workarea,.baseboxer{height:5.5rem;background:#27232e;padding:.5rem 1.33rem;}
.area_t,.account,.pre_tax,.subjoin,.base{height:2rem;line-height:2rem;background:url(../images/icon_area.png) no-repeat 0 .3rem; background-size:1.06rem 1.43rem;padding: 0 1.8rem 0 1.5rem;  margin: 0 0 .6rem 0; }
.area_select{background:#2e2936;height:2.66rem;line-height:2.5rem;width:14rem;margin-left: 1.5rem;padding:0  1.33rem; font-size:.93rem;   }
.area_select>img{width:.8rem; height:.4rem;top: 1rem;}
.area_select>#nowValue,.area_select>#nowValue01{outline: none;border:none;width:13.4rem;height: 2rem;line-height: 2rem;padding: 0 1.2rem 0 0;background: transparent url(../images/icon_down.png) no-repeat 12.8rem center;background-size:.8rem .4rem;color: #fff;}
.pre_tax{background:url(../images/icon_icome.png) no-repeat 0 .4rem; background-size:1.16rem 1.26rem;}
.subjoin{background:url(../images/icon_money01.png) no-repeat 0 .4rem; background-size:1.3rem;}
.base{background:url(../images/icon_money_1.png) no-repeat 0 .4rem; background-size:1.1rem 1.06rem;}
.account{background:url(../images/icon_account.png) no-repeat 0 .55rem; background-size:1.3rem 0.96rem;}
.pre_tax>.input,
.subjoin>.input,
.basebox div>div>.input{color:#f6a01c;font-size: 0.73rem;}
.subjoin a.quickly{margin-left:.5rem;}
.base>.down,.base>.up{width:3.2rem;height:1.5rem;background:url(../images/icon_down_1.png) no-repeat 2.3rem .9rem;background-size:.8rem .4rem;}
.base>.up{background:url(../images/icon_up_1.png) no-repeat 2.3rem 0.9rem;background-size:.8rem .4rem;}
/*basebox*/
.baseboxer{height:auto;}
.basebox{width:89%; height:9rem;padding:1.63rem 0 0 1.65rem;}
.basebox div{width:100%;height:2.73rem;margin-bottom: 1rem;}
.basebox div lable{width:3.4rem;    line-height: 2.6rem;}
.basebox div i{width:1.66rem;height:2.2rem;background:url(../images/icon_ask_1.png) no-repeat center .3rem;background-size: 1.66rem;margin-left:.4rem;}
.basebox div >div{width:8rem;height:2.6rem;    line-height: 2.6rem;background:#2e2936;padding:0 1.33rem;}
/*input*/
.area_select .input,.basebox div>div>.input{outline:none;width:7.5rem;height:2rem;background:#2e2936;border:none;color:#fff;margin: .2rem 0 0 .2rem;}
/*pop*/
.pop,.pop_box,.pop_box01 {position: fixed; left: 0; top: 0; z-index: 99;width: 100%; height: 100%; background:rgba(0,0,0,.8); }
.pop_box .pop_content { width: 77%; color:#fff; padding:1rem; line-height:1.5rem; font-size: .86rem; margin: 5rem auto 0; background: rgba(46,41,54,1); }
.pop_box .pop_content p { margin: 0 0 0.2rem 0;/*height: 3rem;*/ }
.pop_box01 .pop_content{ width: 80%; height: 7rem; background:#2e2936; padding: 1.5rem 0rem 0; font-size:1rem; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.pop_box01 .pop_content p{ margin: 0 1.5rem 1.5rem 1.5rem;}
.pop_box01 .pop_content .cont_btn {  margin: 0 auto; border-top:1px solid #524d5a; }
.pop_box01 .pop_content .cont_btn>span{float:left;height:2.7rem;line-height:2.5rem;width:49.5%;color:#fff;text-align: center;font-size:.93rem;background:#2e2936;border-radius:0 0 0 10px;}
.pop_box01 .pop_content .cont_btn>span:first-child{border-right:1px solid #524d5a;}
.pop_box01 .pop_content .cont_btn>span.select{color:#f6a01c;background:#27232e;border-radius:0 0px 0px 10px;}
.pop_box01 .pop_content .cont_btn>span:last-child.select{color:#f6a01c;background:#27232e;border-radius:0 0px 10px 0px;width:50%;}
/*note*/
.note{color:#b8aec3;padding:.93rem 0 1.8rem; clear:both;}
.pr{padding-right: 1rem;}
.mb{margin-bottom: 0;}
/*accountbox*/
.accountbox { width: 100%; background: #d0d4d7; height:13rem; width: 100%; background: #d0d4d7; position:fixed; left: 0; bottom: 0; z-index: 5; }
.accountbox > header { overflow: hidden; width: 100%; height: 45px; line-height: 45px; text-align: center; background: #F0F1F2; -webkit-box-shadow: 0 0 8px #333; -moz-box-shadow: 0 0 8px #333; box-shadow: 0 0 8px #333; }
.accountbox > header > h1 { display: inline-block; font-size: 15px; font-weight: normal;color:#2a2b2c; }
.accountbox > header > button { font-size: 15px; height: 45px; padding: 0 10px; border: none; outline: none; color: #007AFF; background: #F0F1F2; }
.accountbox button.nav_left { float: left; }
.accountbox button.nav_right { float: right; }
.accountbox ul{margin-top: 3rem;}
.accountbox ul li{display:block;height:2rem; line-height:2rem; text-align:center;color:#a9acaf;}
.accountbox ul li.sel{border:1px solid #aaa;border-right:0;border-left:0;color:#2a2b2c;}
.fadeInUp { -webkit-animation: fadeInUp .5s ease  0s both; animation: fadeInUp .5s ease  0s both; }

@keyframes fadeInUp {
    0% {
        opacity: 0; 
        -webkit-transform: translate3d(0, 200%, 0); 
        -ms-transform: translate3d(0, 200%, 0); 
        transform: translate3d(0, 200%, 0) ;
    }
    100% { 
        opacity: 1; 
        -webkit-transform: none; 
        -ms-transform: none; 
        transform: none;
    }
}
@media screen and (max-width:340px) and (min-width:320px){
   .workarea {height: 4.5rem;padding: .5rem 0 .8rem .5rem;}
   .subjoin a.quickly {margin-left: .3rem;}
   .subjoin{padding:0 1rem 0 1.5rem;}
   .basebox div > div { width:5.5rem;}
   .area_select {width: 13.5rem;}
   .area_select > #nowValue, .area_select > #nowValue01 {width: 10rem; background: transparent url(../images/icon_down.png) no-repeat 10rem center; background-size: .8rem .4rem; }
   .area_select .input, .basebox div > div > .input {width:55%; }
   .pre_tax,.subjoin,.account,.area_t{margin: 0 0 .2rem 0;}
   .note { padding: .2rem 0 1.8rem;}
}
@media screen and (max-width:360px) and (min-width:341px){
    .subjoin a.quickly {margin-left: .3rem;}
    .subjoin{padding:0 1rem 0 1.5rem;}
    .basebox div > div {width:7.5rem;}
    .area_select { width: 13rem;}
    .area_select > #nowValue, .area_select > #nowValue01 { width: 12rem; background: transparent url(../images/icon_down.png) no-repeat 12rem center; background-size: .8rem .4rem; }
    .area_select .input{ width:9rem; }
    .basebox div > div > .input { width:4rem;}
}
@media only screen and (min-width:375px) and (max-width:410px) {
    .area_select { width: 14rem;}
    .area_select .input { width:11rem; }
    .area_select .input{ width:9.5rem; }
    .basebox div > div > .input { width:4.5rem; }
}
@media only screen and (min-width:414px) {
    .area_select {  width: 16rem;}
    .basebox div > div { width:10rem; }
    .area_select > #nowValue, .area_select > #nowValue01 {width:14rem; background: transparent url(../images/icon_down.png) no-repeat 14.4rem center; background-size:.8rem .4rem; }

}