@charset "UTF-8";
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    border: 0;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding: 0
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

ul,li {
    list-style-type: none
}

a {
    text-decoration: none;
    color: #595757
}

@media screen and (min-width: 600px) {
    .icon {
        transform:scale(1.3)
    }
}

@media screen and (min-width: 700px) {
    .icon {
        transform:scale(1.5)
    }
}

a,button,input,p {
    -webkit-tap-highlight-color: rgba(255,0,0,0)
}

a {
    text-decoration: none
}

input{-webkit-tap-highlight-color:transparent;background:none;color: #333;border:0; font-size: 0.24rem}
input:focus {outline:none;border:0;}

.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
.clearfix{*zoom:1;}
html,body{
    height: 100%;
   
}
html {
    font-size: 100px;
    color: #595757;
    background: #F7F7F7;
    position: relative;
}

body {
    max-width: 780px;
    margin: 0 auto;
    color: #595757;
    font-size: .24rem;
    width: 100%;
    overflow: hidden;
    position: relative;
}
/*icon 如果添加icon，请不要改变宽度，往下添加*/
.icon{display:inline-block; background-image:url(../images/icon.png); background-size:2.54rem auto;   }
.icon_next{width:0.16rem; height:0.22rem; background-position:  0 0; }
.icon_add{width:0.21rem; height:0.21rem; background-position:  -2.33rem -0.01rem; }
.icon_choice_t{width:0.33rem; height:0.32rem; background-position:  -0.69rem 0; }
.icon_choice_f{width:0.33rem; height:0.32rem; background-position:  -1.48rem 0; }
.icon_sm{ position: absolute; display: block; right: 0; top: 50%; width: 0.3rem; height: 0.3rem; margin-top: -0.15rem; }
/*选择就诊卡*/
.choice{font-size: 0.24rem; }
.choice_li ul{}
.choice_li ul li{padding-left: 0.24rem; width: 6.2rem;  height: 0.76rem; margin-bottom: 0.16rem; background: #fff; position: relative;}
.choice_li ul li a{ display: block;width: 6.2rem;  height: 0.76rem;}
.choice_li ul li h6{ line-height: 0.36rem; padding-top: 0.08rem;  }
.choice_li ul li p{ font-size: 0.24rem; }
.choice_li ul li i{ position: absolute; right:0.24rem; top:0.27rem;}
.choice .other{ width: 100%;  height: 0.76rem; margin-bottom: 0.5rem; background: #fff; position: relative;}
.choice .other a{ display: block; padding-left: 0.60rem;  width: 5.84rem;}
.choice .other p{line-height: 0.76rem; color: #9E9F9F;}
.choice .other b{ position: absolute; right: 0.24rem; top: 0;color: #9E9F9F; width:3rem; text-align: right; height: 0.76rem; line-height: 0.76rem; }
.choice .other i{ position: absolute; left: 0.24rem; top: 0.28rem; }
.prompt{ margin-top: 0.5rem; color: #9E9F9F; padding-left: 0.24rem; }
.prompt p{ line-height: 0.38rem; }
.prompt h4{ padding-bottom: 0.08rem; }

/*添加就诊卡*/
.add_li ul{ padding-left: 0.24rem; padding-right: 0.24rem; background: #fff; }
.add_li ul li{ height: 0.76rem; line-height: 0.78rem; position: relative; border-bottom: 1px solid #C7C6CB }
.add_li ul li:last-child{ border: 0; }
.add_li ul li h6,.remove_li ul li span{ width: 2.8rem; text-align: left; }
.add_li ul li input,.add_li ul li b,.remove_li ul li b{ display: block; color: rgb(49, 56, 56); position: absolute; text-align: right; /*border-left: 1px solid #cecece;*/ right: 0; /*text-align: left;*/ top: 0.16rem;  height: 0.44rem; line-height: 0.44rem; width:4.6rem; overflow: hidden; }
.add_li ul li #ic_card_id{ width:4rem; right: 0.4rem; }
.remove_li ul li b{ text-align: right; }
.add_li ul li p{ position: absolute; right: 0; text-align: right;width:4.6rem; top: 0; }
.add_li ul li.sexlist p span{ display: inline-block;  padding-right: 0.34rem; padding-left: 0.57rem; position:relative; }
.add_li ul li.sexlist p span:last-child{ padding-right: 0.2; }
.add_li ul li.sexlist p i{ position: absolute; left: 0; top:0.24rem; width:0.33rem; height:0.32rem; background-position:  -1.48rem 0;}
.add_li ul li.sexlist p span.on i{width:0.33rem; height:0.32rem; background-position:  -0.69rem 0; }

.add_li ul li.typelist p span{ display: inline-block;  padding-right: 0.24rem; padding-left: 0.57rem; position:relative; }
.add_li ul li.typelist p span:last-child{ padding-right: 0; }
.add_li ul li.typelist p i{ position: absolute; left: 0; top:0.24rem; width:0.33rem; height:0.32rem; background-position:  -1.48rem 0;}
.add_li ul li.typelist p span.on i{width:0.33rem; height:0.32rem; background-position:  -0.69rem 0; }

.add_li ul li.codelist input{ width: 2.6rem;  right: 2.12rem } 
.add_li ul li.codelist p{ position: absolute; top: 0.08rem; text-align: center; line-height: 0.6rem; width: 2rem; height: 0.6rem; color: #fff;background: #00B1B5; }
.add_li .submit{ width: 5.92rem; height: 0.6rem; text-align: center; line-height: 0.6rem;color: #fff;background: #00B1B5; margin: 0.5rem auto; }
.add_li ul li.address h6{
    width:.8rem;
}

.add_li ul li.address input{
    width:4.2rem;
    right: .6rem;
    text-align: left;
    /* color:#333 */

}
.add_li ul li.address p{
    width:.5rem;;
}

.popup{ display: none; position: absolute; z-index:2;left: 0; right: 0;top: 0;bottom: 0;background: rgba(0,0,0,0.5); }
.popup .popup_content{ width: 5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; background: #fff; position: absolute;left: 50%; top: 50%;transform: translate(-50%, -50%); }
.popup .popup_content h6{ line-height: 0.4rem; padding-bottom: 0.16rem;  text-align: center; font-size: 0.36rem; color: #00B1B5;}
.popup .popup_content p{ padding-top: 0.1rem; font-size: 0.26rem; line-height: 0.32rem; text-align: center; }
.popup .popup_content ul{ display: none; padding-top: 0.12rem; padding-bottom: 0.12rem; overflow: hidden; padding-right: 0.14rem; padding-left: 0.14rem;}
.popup .popup_content li{ font-size: 0.2rem;  height: 0.6rem;line-height: 0.6rem; border-bottom: 1px solid #C7C6CB; }
.popup .popup_content li span{ display: inline-block; text-align: center;  }
.popup .popup_content li span:nth-child(1){ width: 0.9rem; }
.popup .popup_content li span:nth-child(2){ width: 1.38rem; }
.popup .popup_content li span:nth-child(3){ width: 1.6rem; }
.popup .popup_content li b{ color: #fff; text-align: center; background: #00B1B5; display:inline-block;  width: 0.8rem; height: 0.4rem; line-height: 0.4rem; margin-top: 0.1rem; }
.popup .popup_content a{ text-align: center; margin: 0.16rem auto 0 auto; display: block; width: 2rem;height: 0.6rem; line-height: 0.6rem; font-size: 0.26rem; color: #fff; background: #00B1B5;}
#choice .popup_content{ height: 0.6rem; padding-top: 1rem; padding-bottom: 1rem; }
#choice .popup_content b{ position: absolute; width: 0.4rem; height: 0.4rem; top: 0.12rem; right: 0.12rem; }
#choice .popup_content b img{width: 100%;} 
#choice .popup_content a:nth-child(1){ float: left; margin:0;margin-left: 0.24rem;  }
#choice .popup_content a:nth-child(2){ float: right; margin:0;margin-right: 0.24rem;  }

#layer{position:absolute;z-index:999; display: none; text-align: center; background: rgba(0,0,0,0.5);  border-radius: 0.1rem; line-height: 0.32rem; color: #fff;padding:0.12rem 0.24rem; left: 50%; top: 50%;transform: translate(-50%, -50%);}
.must{ color: #9E9F9F; padding-left: 0.24rem; padding-right: 0.24rem; padding-top: 0.24rem;  line-height: 0.32rem; }
/*就诊卡列表*/
.card{ padding-top: 0.16rem; position: relative; }
.cardlist{ width: 6.4rem; height: 3.5rem; overflow: hidden;  }
#wrapper{width: 5rem; margin-left: 0.95rem;}
#wrapper::-webkit-scrollbar {display:none}
.cardlist .cardbox { width:30rem; height: 3rem;}
.cardlist .cardbox dl{ width:4.5rem; float: left; overflow: hidden; margin-right: 0.5rem;}
.cardlist .cardbox dl dt{ width: 4.5rem; height: 2.87rem; }
.cardlist .cardbox dl dt img{ width: 100%; }
.cardlist .cardbox dl dd{ display: none; width: 4.5rem; margin-top: 0.16rem; height: 1.06rem; background: #fff; position: relative; }
.cardlist .cardbox dl dd img{ width: 100%; }
.cardlist .cardbox dl dd p{ position: absolute; left: 0;bottom: 0.06rem; width: 100%; text-align: center;  }
.pagination{overflow: hidden; height: 0.5rem; width: 6.4rem; line-height: 0.5rem; text-align: center; }
.pagination span{ width:0.1rem; height: 0.1rem; border-radius: 0.1rem; background:#9E9F9F; display: inline-block; margin:0 0.04rem; }
.pagination span.on{ background: #595757; }
.card_content{ width:6.4rem; height: 5.8rem;  position: relative;}
.card_content .cartit_list{ width: 6.4rem; height: 5.8rem; position: relative;}
.card_content .cartit_show{  display: none; width: 6.4rem;height: 5.8rem;  position: absolute; top: 0  }
.card_content .card_on{ display: block; }
.card_content .card_con{ width: 6.4rem; height: 1rem; overflow: hidden; background: #fff; }
.card_content .cartit_show dl{ width: 3.2rem; overflow: hidden; height: 1rem; position: relative; float: left;}
.card_content .cartit_show dl:before{content: ""; position: absolute; height: 0.6rem; width: 0.01rem; background:#ccc; top: 0.2rem; left: 3.18rem; }
.card_content .cartit_show dl dt{ width: 0.8rem; height:0.8rem; float: left; margin-left: 0.24rem; margin-top: 0.1rem; }
.card_content .cartit_show dl dt img{ width: 100%; }
.card_content .cartit_show dl dd{ width: 2.3rem; float: right; line-height: 0.36rem; padding-top: 0.14rem; }
.card_content .cartit_show .recharge{ width: 2.56rem; float: left; }
.card_content .cartit_show .recharge a{ display: block; position: relative; padding-right: 0.66rem; height: 0.72rem; padding-top: 0.14rem; padding-bottom: 0.14rem; text-align: right; text-align: right; } 
.card_content .cartit_show .recharge p{ line-height:0.36rem; } 
.card_content .cartit_show .recharge p span{ display: block; }
.card_content .cartit_show .recharge i{ position: absolute; right: 0.25rem; top: 0.38rem; }
.card_content .cartit_show .add_cars{ padding-top: 0.5rem; width: 5rem; margin: 0 auto; margin-top: -0.4rem; font-size: 0.2rem; line-height: 0.32rem;  }
.card_content .cartit_show .add_cars p{ text-align: center; line-height: 0.42rem; font-size: 0.26rem;}

/*
.card .cancel{width: 5.92rem; height: 0.6rem; text-align: center; line-height: 0.6rem;color: #fff;background: #00B1B5; margin: 0rem auto; margin-top:-0.2rem;margin-bottom:.28rem;}
*/

/**/
.card .cancel {
    width: 6rem; 
    height: 0.8rem;
    margin: 0rem auto; 
    line-height: 0.8rem;
    text-align: center; 
}
.card .cancel div{
    width: 2.6rem; 
    height: 0.6rem;
    text-align: center; 
    line-height: 0.6rem;
    color: #fff;
    background: #00B1B5; 
    margin: 0rem auto; 
    margin-left:.2rem;
    margin-top:-0.16rem;
    margin-bottom:.28rem;
    float: left;
}

/**/

.codes{ width: 3.6rem;   margin: 0 auto; margin-top: 0.4rem; }
.codes img{ width: 100%; }
/*充值页面*/
.pay{ font-size: 0.26rem;  }
.pay .infromation{ position: relative;  padding-top: 0.26rem;}
.pay .infromation p{background: #fff; height: 0.66rem; border-bottom: 0.08rem solid #F7F7F7;  padding: 0 0.26rem; line-height: 0.68rem;font-size: 0.26rem; overflow: hidden; }
.pay .infromation p b{ float: left; width: 1.6rem; }
.pay .infromation p span{ float: right; width: 4rem; }
.charges h6{ font-size: .24rem; padding-left: .26rem; margin: .24rem 0; color: rgb(40, 40, 56); }
.charges .pay_number{ display: flex; flex-wrap: wrap; justify-content:space-between; padding-left: 0.26rem; padding-right: 0.26rem }
.charges .pay_number p{ width: 1.64rem; margin-bottom: 0.24rem;  height:0.8rem; text-align: center; line-height: 0.82rem;border: 1px solid #DBDCDC; color: #595757; background: #F7F7F7; background: #fff; border-radius: 0.1rem;  }
.charges .pay_number p.active{   border: 1px solid #00B1B5; color: #00B1B5; }
.charges .charge_other{ display: none; width: 100%;float: left; height: .6rem;box-sizing: border-box; padding: 0 .26rem;}
.charges .charge_other input{width: 100%; box-sizing: border-box; background: #fff;height: .64rem; padding: 0; line-height: .66rem; text-align: center; color: #9E9F9F; font-size: .26rem; border-radius: 0.1rem; border: 0.02rem solid #DBDCDC; display: block; -webkit-appearance: none;}
.sub_pay{ margin: 1.2rem 0.26rem 0rem 0.26rem;  height: .6rem; line-height: .62rem; text-align: center; background: #00B1B5; color: #fff; font-size: .25rem;}
.popup_other{ position: fixed; display: none; z-index: 4; background: rgba(0,0,0,0.5); left: 0; right: 0; top: 0; bottom: 0 }
.popup_other .popup_box{ position: absolute; left: 50%; top: 50%; text-align: center; transform: translate(-50%,-50%); background: #fff; padding: 0.26rem 0.4rem; }
.popup_other .popup_box h6{ line-height: 0.52rem;  font-size: 0.3rem; color: #00B1B5; margin-bottom: 0.1rem;}
.popup_other .popup_box p{ line-height: 0.36rem; font-size: 0.24rem; width: 3rem; }
.popup_other .popup_box a{ display: block; background: #00B1B5; color: #fff; margin:0.26rem auto 0.1rem auto; height: 0.57rem; line-height: 0.58rem; width: 2rem;   }
/*日历选择器*/
*:focus { outline: none; }
.fl{float: left;}
.fr{float: right;}
.getDateBg{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: fixed; left: 0; top: 0; z-index: 100; transition: opacity 0.4s; opacity: 0; }
.getDateBox{ width: 100%; position: fixed; left: 0; background-color: #fff; box-shadow: -5px 0 5px rgba(0,0,0,0.3); z-index: 101; transition: bottom 0.4s; bottom: -270px; }
.slideIn{ display: block !important; }
.slideIn .getDateBox{ animation: slideIn 0.4s; -webkit-animation: slideIn 0.4s; bottom: 0; }
.slideOut .getDateBox{ animation: slideOut 0.4s; -webkit-animation: slideOut 0.4s; bottom: -400px; }
.slideIn .getDateBg{ opacity: 1; }
.slideOut .getDateBg{ opacity: 0; }
.getDateBox .choiceDateTitle{ height: 0.62rem; background-color: #f2f2f2; }
.getDateBox .choiceDateTitle button{ height: 100%; padding: 0 0.32rem; color: #00B1B5; font-size: 0.26rem; background: none; border: 0; -webkit-tap-highlight-color: rgba(0,0,0,0.2) }
.getDateBox .dateContent{width: 100%;margin: 0.62rem 0;height: 120px;overflow: hidden;position: relative; }
.getDateBox .dateContent:before{content: "";width: 100%;height: 40px;background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));position: absolute;left: 0;top: 0;z-index: 10;pointer-events: none; }
.getDateBox .dateContent:after{content: "";width: 100%;height: 40px;background: -webkit-linear-gradient(bottom, rgba(255,255,255,1), rgba(255,255,255,0));position: absolute;left: 0;bottom: 0;z-index: 10;pointer-events: none; }
.getDateBox .dateContent .checkeDate{width: 100%;height: 40px;position: absolute;left: 0;top: 40px; }
.getDateBox .dateContent .checkeDate:before,
.getDateBox .dateContent .checkeDate:after{content: "";width: 100%;height: 1px;background-color: #ccc;position: absolute;left: 0;top: 0;transform: scaleY(0.5);-webkit-transform: scaleY(0.5); }
.getDateBox .dateContent .checkeDate:after{top: auto;bottom: 0; }
#yearwrapper,#monthwrapper,#daywrapper{width: 33.3%;height: 100%;position: absolute;top: 0; }
#yearwrapper{left: 0; }
#daywrapper{right: 0; }
#monthwrapper{left: 33.3%; }
#yearwrapper ul{margin-left: 40%; }
#daywrapper ul{margin-right: 40%; }
#yearwrapper ul li,
#monthwrapper ul li,
#daywrapper ul li{height: 40px;line-height: 40px;font-size: 0.24rem;text-align: center;list-style: none; }

@keyframes slideIn{
    0%{bottom: -270px;}
    100%{bottom: 0;} 
}
@-webkit-keyframes slideIn{
    0%{bottom: -270px;}
    100%{bottom: 0;} 
}

@keyframes slideOut{
    0%{bottom: 0;}
    100%{bottom: -270px;} 
}
@-webkit-keyframes slideOut{
    0%{bottom: 0;}
    100%{bottom: -270px;} 
}

/*动画*/

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

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

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        -ms-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: .6s;
    animation-duration: 0.6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        -ms-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: .6s;
    animation-duration: 0.6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}