/*ͨ����ʽ*/



.line5 {

    height: 5px !important;

}



.line10 {

    height: 10px !important;

}
.line20 {
    height: 20px !important;
}
/*�ָ���*/
.divide-line {
    width: 100%;
    height: 10px;
}





/*������ʽ*/





/*Ĭ����ʽ*/



.module-title {

    height: 40px;

    line-height: 40px;

    padding-left: 15px;

    font-weight: bold;

    position: relative;


}



.module-title::before {

    height: 16px;

    width: 3px;

    display: block;

    content: "";

    position: absolute;

    top: 12px;

    left: 7px;

    background: #f00;

}



.module-title .more {

    float: right;

    margin-right: 15px;

    height: 40px;

    line-height: 40px;

    color: #666;

    font-size: 15px;

}





/*��ʽ2*/



.module-title-1 {

    height: 40px;

    line-height: 40px;

    color: #666;

    font-size: 16px;

    text-align: center;

    font-weight: inherit;

    position: relative;

    border-bottom: 1px solid #ebebeb;

}



.module-title-1 span {

    display: inline-block;

    z-index: 1;

    position: relative;

    background-color: #fff;

    padding: 0 8px;

    height: 39px;

}



.module-title-1::before {

    height: 2px;

    width: 80%;

    display: block;

    content: "";

    position: absolute;

    bottom: 18px;

    left: 0;

    right: 0;

    margin: 0 auto;

    background: #d8505c;

}



.module-title-1 .more {

    display: none;

}





/*��ʽ3*/



.module-title-2 {

    height: 40px;

    line-height: 40px;

    color: #666;

    font-size: 16px;

    text-align: center;

    font-weight: inherit;

    position: relative;

    border-bottom: 1px solid #ebebeb;

}



.module-title-2 span {

    display: inline-block;

    z-index: 1;

    position: relative;

    background-color: #fff;

    padding: 0 8px;

    height: 39px;

}



.module-title-2::before {

    height: 3px;

    width: 40%;

    display: block;

    content: "";

    position: absolute;

    bottom: 18px;

    left: 0;

    right: 0;

    margin: 0 auto;

    background: #d8505c;

}



.module-title-2 .more {

    display: none;

}





/*��ʽ4*/



.module-title-3 {

    height: 40px;

    line-height: 40px;

    color: #666;

    font-size: 16px;

    padding-left: 15px;

    font-weight: inherit;

    position: relative;

    border-bottom: 1px solid #ebebeb;

}



.module-title-3::before {

    height: 100%;

    width: 4px;

    display: block;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background: #d8505c;

}



.module-title-3 .more {

    float: right;

    margin-right: 15px;

    height: 40px;

    line-height: 40px;

    color: #666;

    font-size: 15px;

}





/*���ظ���*/



.list-more {

    display: block;

    border-top: 1px solid #dcdcdc;

    padding: 10px 0;

}



.list-more a {

    display: block;

    margin: 0 auto;

    width: 40%;

    height: 36px;

    line-height: 36px;

    text-align: center;

    color: #666;

    border: 1px solid #dcdcdc;

}



.wrapper {

    padding-bottom:calc(65px + env(safe-area-inset-bottom));

}





/*ͨ����ʽ*/





/*ͷ��ģ��*/



.header {

    margin: 0 auto;

    height: 40px;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    background: transparent;

}



.header .header_box {

    position: relative;

    background: rgba(201, 21, 35, 1);

}



.header a.icon-left {

    position: absolute;

    top: 0;

    left: 0;

    height: 40px;

    width: 50px;

    font-size: 26px;

    text-align: center;

    line-height: 40px;

    color: #fff;

}



.header a.icon-right {

    position: absolute;

    top: 0;

    right: 0;

    height: 40px;

    width: 50px;

    font-size: 18px;

    text-align: center;

    line-height: 40px;

    color: #fff;

}



.header .title {

    width: 100%;

    height: 40px;

    padding-left: 60px;

    padding-right: 60px;

    text-align: center;

    font-size: 16px;

    line-height: 40px;

    color: #fff;

}





/*ͷ��ģ��*/





/*bannerģ��*/



.banner {

    margin: 0 auto;

    width: 100%;

}



.banner .swiper-container {

    width: 100%;

    height: 180px;

}



.banner .swiper-slide {

    background-position: center !important;

    background-size: cover !important;

}



.banner .swiper-pagination-bullet-active {

    background: rgba(255, 255, 255, .8);

}





/*bannerģ��*/





/*��������ģ��*/



.nav {

    background: #fff;

}



.nav ul {

    padding: 5px 10px;

}



.nav ul li {

    width: 25%;

    height: 80px;

    text-align: center;

    float: left;

}



.nav ul li a {

    display: block;

    margin: 0 auto;

    width: 80%;

    height: 80%;

    margin-top: 10%;

}



.nav ul li img {
    width: 50px;
    height: 50px;
    margin-bottom: 3px;
    margin: 0 auto;
}



.nav ul li p {
   

}





/*��������ģ��*/





/*������ģ��*/



.announcement {

    margin: 0 auto;

    width: 100%;

    background: #fff;

}



.announcement .info {

    position: relative;

}



.announcement .info .icon-left {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 40px;

    width: 40px;

    line-height: 40px;

    text-align: center;

    color: #d8505c;

}



.announcement .info .content {

    height: 40px;

    line-height: 40px;

    padding-left: 40px;

    overflow: hidden;

}



.announcement .info .content ul li {

    display: block;

    width: 100%;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

}





/*������ģ��*/





/*�Ż�ȯģ��*/



.coupon {

    background-color: #fff;

}



.coupon ul {

    ;

    padding: 10px 0;

}



.coupon ul li {

    display: block;

    width: 100%;

    margin-bottom: 10px;

    z-index: 1000;

    overflow: hidden;

}



.coupon ul li:last-child {

    margin-bottom: 0;

}



.coupon .stamp {

    margin: 0 auto;

    width: 90%;

    height: 100px;

    position: relative;

    z-index: 1000;

}



.coupon .stamp:before,

.coupon .stamp:after {

    content: "";

    position: absolute;

    top: -20px;

    display: block;

    width: 10px;

    height: 100%;

    margin-top: 20px;

    background-size: 20px 10px;

}



.coupon .stamp:before {

    left: -10px;

    background-color: #fff;

    background-position: 100% 35%;

}



.coupon .stamp:after {

    right: -10px;

    background-position: 100% 15%;

    background-image: linear-gradient(-45deg, #fff 25%, transparent 25%, transparent),

    linear-gradient(-135deg, #fff 25%, transparent 25%, transparent),

    linear-gradient(-45deg, transparent 75%, #fff 75%),

    linear-gradient(-135deg, transparent 75%, #fff 75%);

}



.coupon .stamp i {

    position: absolute;

    left: 20%;

    top: 45px;

    height: 190px;

    width: 390px;

    background-color: rgba(255, 255, 255, .15);

    transform: rotate(-30deg);

}



.coupon .stamp .par {

    float: left;

    width: 30%;

    height: 100%;

    border-right: 2px dashed rgba(255, 255, 255, .3);

    text-align: center;

    display: flex;

    display: -webkit-flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.coupon .stamp .par p {

    color: #fff;

    font-size: 12px;

    line-height: 20px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.coupon .stamp .par span {

    font-size: 30px;

    color: #fff;

    margin-right: 5px;

    line-height: 30px;

}



.coupon .stamp .par .sign {

    font-size: 16px;

    vertical-align: middle;

}



.coupon .stamp .par sub {

    position: relative;

    top: -5px;

    color: white;

}



.coupon .stamp .copy {

    display: flex;

    display: -webkit-flex;

    align-items: center;

    justify-content: center;

    color: rgb(255, 255, 255);

    text-align: left;

    padding: 10px 10px 0 10px;

    height: 100%;

    float: left;

    width: 70%;

}



.coupon .stamp .copy>div {

    width: 100%;

}



.coupon .stamp .copy p {

    font-size: 12px;

    margin-top: 5px;

    line-height: 20px;

    margin: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}



.coupon .stamp .copy .btn{

    float: right;

    padding: 0px 4px;

    border: 1px solid white;

    border-radius: 20px;

    font-size: 10px;

}



.coupon .stamp .copy .line{

    margin-top: 4px;

    width: 100%;

    height: 1px;

    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);

    background-size: 8px 1px;

    background-repeat: repeat-x;

}



.coupon .stamp .copy .info{

    text-align: left;

    padding-top: 2px;

    position: relative;

    z-index: 500;

}



.coupon .stamp .copy .info img{

    position: absolute;

    top: 5px;

    right: 5px;

    width: 13px;

    height: 13px;

}



.coupon .stamp .copy p.name {

    font-size: 15px;

}



.coupon .stamp .copy p span {

    font-size: 12px;

    line-height: 16px;

}



.coupon .stamp-yellow,

.coupon .stamp-yellow .par,

.coupon .stamp-yellow:after {

    background-color: #F39B00;

}



.coupon .stamp-yellow:before {

    background-image: linear-gradient(-45deg, #F39B00 25%, transparent 25%, transparent),

    linear-gradient(-135deg, #F39B00 25%, transparent 25%, transparent),

    linear-gradient(-45deg, transparent 75%, #F39B00 75%),

    linear-gradient(-135deg, transparent 75%, #F39B00 75%);

}



.coupon .stamp-red,

.coupon .stamp-red .par,

.coupon .stamp-red:after {

    background-color: #D24161;

}



.coupon .stamp-red:before {

    background-image: linear-gradient(-45deg, #D24161 25%, transparent 25%, transparent),

    linear-gradient(-135deg, #D24161 25%, transparent 25%, transparent),

    linear-gradient(-45deg, transparent 75%, #D24161 75%),

    linear-gradient(-135deg, transparent 75%, #D24161 75%);

}



.coupon .stamp-green,

.coupon .stamp-green .par,

.coupon .stamp-green:after {

    background-color: #7EAB1E;

}



.coupon .stamp-green:before {

    background-image: linear-gradient(-45deg, #7EAB1E 25%, transparent 25%, transparent),

    linear-gradient(-135deg, #7EAB1E 25%, transparent 25%, transparent),

    linear-gradient(-45deg, transparent 75%, #7EAB1E 75%),

    linear-gradient(-135deg, transparent 75%, #7EAB1E 75%);

}



.coupon .stamp-blue,

.coupon .stamp-blue .par,

.coupon .stamp-blue:after {

    background-color: #50ADD3;

}



.coupon .stamp-blue:before {

    background-image: linear-gradient(-45deg, #50ADD3 25%, transparent 25%, transparent),

    linear-gradient(-135deg, #50ADD3 25%, transparent 25%, transparent),

    linear-gradient(-45deg, transparent 75%, #50ADD3 75%),

    linear-gradient(-135deg, transparent 75%, #50ADD3 75%);

}



.coupon .show-info {

    display: none;

    width: 93%;

    padding: 10px;

    border: 1px solid #f5f5f5;

    box-shadow: inset 0px 15px 10px -15px #ccc;

    margin: 0 auto;

}





/*�Ż�ȯģ��*/





/*��Ʒչʾģ��*/



.products {

    margin: 0 auto;

    background: #fff;

}



.products ul li {

    width: 50%;

    text-align: center;

    float: left;

    margin-bottom: 10px;

}



.products .list li:nth-child(2n) {

    padding-left: 7.5px;

    padding-right: 15px;

}



.products .list li:nth-child(2n+1) {

    padding-right: 7.5px;

    padding-left: 15px;

}



.products ul li .img_box {

    width: 100%;

    text-align: center;

    margin-top: 10px;

    position: relative;

}



.products .list li:nth-child(2n) .img_box::before {

    content: " ";

    position: absolute;

    top: 0;

    left: -7.5px;

    width: 1px;

    height: 100%;

    background-color: #dcdcdc;

}



.products ul li:last-child .img_box {

    border-right: 0;

}



.products ul li .img_box img {

    width: 150px;

    height: 100px;

}



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

    .products ul li .img_box img {

        width: 135px;

        height: 90px;

    }

}



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

    .products ul li .img_box img {

        width: 120px;

        height: 80px;

    }

}



.products ul li .name {

    text-align: center;

    font-size: 15px;

    padding: 10px 0 5px 0;

    color: #666;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.products ul li .bottom {

    padding: 0 20px;

    height: 30px;

}



.products ul li .bottom .price {

    /*float: left;*/

    color: #d8505c;

    font-size: 16px;

    line-height: 30px;

}



.products ul li .bottom .num {

    float: right;

    color: #666;

    font-size: 14px;

    line-height: 30px;

}



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

    .products ul li .bottom .price {

        font-size: 13px;

    }

    .products ul li .bottom .num {

        font-size: 13px;

    }

}





/*��Ʒչʾģ��*/





/*�����б�ģ��*/



.news {

    margin: 0 auto;

    background: #fff;

}



.news ul li {

    width: 100%;

    height: 120px;

}



.news ul li:last-child {

    border-bottom: 0;

}



.news ul li .left {
    width: 34%;
    height: 100%;
    float: left;
    padding: 15px;

}



.news ul li .left .img {
    display: block;
    height: 100%;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}



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

    .news ul li .left .img {

        width: 100px;

        height: 67px;

    }

}



.news ul li .right {
    width:66%;
    height: 100%;
    float: right;
    padding: 19px 15px 15px 0px;
    position: relative;

}



.news ul li .right p.title {

    width: 100%;

    margin-bottom: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.news ul li .right p.content {

    width: 100%;

    line-height: 14px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}



.news ul li .right p.bottom {

    margin-top: 10px;

    padding-right: 3px;

    height: 20px;

    line-height: 20px;

}



.news ul li .right p.bottom .category {

    float: left;

}



.news ul li .right p.bottom .time {

    float: right;

}
/*�����б�ģ��*/

/**********************2023-03-21-悠游卡************************/
/*悠游卡列表*/
body{background-color: #efefef;}
.a-i-c{
	display: flex;
	align-items: center;/*垂直居中*/
}
.a-i-f{
	display: flex;
	align-items:flex-end;/*下对齐*/
}
.j-c-f-s{
	display: flex;
	justify-content:flex-start;/*左对齐*/
}
.j-c-f-e{
	display: flex;
	justify-content:flex-end;/*右对齐*/
}
.j-c-c{
	display: flex;
	justify-content:center;/*水平居中*/
}
.j-c-s-b{
	display: flex;
	justify-content: space-between;/*两端对齐，项目之间的间隔都相等。*/
}
.hyEasycard input[type=button], .hyEasycard input[type=submit], .hyEasycard input[type=file], .hyEasycard button {
    cursor: pointer;
    -webkit-appearance: none;
}
.hyEasycard input::-webkit-input-placeholder {
    color:#333;
}
.hyEasycard input:-moz-placeholder,   
.hyEasycard textarea:-moz-placeholder {   
    color: #333;
}   
.hyEasycard input:-ms-input-placeholder,   
.hyEasycard textarea:-ms-input-placeholder {   
    color: #333;
}   
.hyEasycard input::-webkit-input-placeholder,   
.hyEasycard textarea::-webkit-input-placeholder {   
    color: #333;
}
/*去掉屎黄背景颜色*/
.hyEasycard input:-webkit-autofill {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
.hyEasycard{
    overflow: hidden;
}
.hyEasycard .hyEasycard_list{
    background-color: #ffffff;
}
.hyEasycard .content{
    padding: 15px;
    overflow: hidden;
    border-bottom: 0.02rem solid #f2f2f2;
}
.hyEasycard .hyEasycard_list .hyLeft{
    width: 35.42%;
    float: left;
    padding-top:22%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4px;
}
.hyEasycard .hyEasycard_list .hyLeft img{
    position: absolute;
    top: 0;
    left: 0%;
    height:100%;
    width: 100%;
    object-fit: cover;
}
.hyEasycard .hyEasycard_list .hyRight{
    width: 64.58%;
    float: left;
    padding-left: 13px;
}
.hyEasycard .hyEasycard_list .hyRight p{
    color: #808080;
    margin-top: 5px;
}
.hyEasycard .label_box{
    margin-top: 5px;
    padding-top:5px;
}
.hyEasycard .label_box i{
    background-color: rgba(255, 37, 1, 0.09);
    color: rgba(255, 37, 1, 0.44);
    border-radius: 2px;
    border: 0.08rem solid #ffa899;
    font-style: normal;
    margin: 5px 0 0 0px;
    padding: 1px 5px;
}
.hyEasycard .money{
    margin-top:5px;
}
.hyEasycard .money span{
    color: #F06521;
}
/*悠游卡列表End*/
/*悠游卡详情页*/
.hyEasycard_banner{
    position: relative;
}
.hyEasycard_banner::before {
    height: 9px;
    width: 100%;
    border-radius: 12px 12px 0px 0px;
    background-color: #ffffff;
    display: block;
    content: "";
    position: absolute;
    bottom:-1px;
    left: 0px;
    right:0px;
    z-index: 9;
}
.hyEasycard_banner .swiper-slide{
    padding-top: 42.757%;
}
.hyEasycard_banner .swiper-slide img{
    position: absolute;
    top: 0;
    left: 0%;
    height:100%;
    width: 100%;
    object-fit: cover;
}
.hyEasycard .hyEasycard_details .hyDetails_top{
    background-color: #ffffff;
}
.hyEasycard .hyEasycard_details .hyDetails_top .content{
    padding:0 15px;
}
.hyEasycard .hyEasycard_details .hyDetails_top .label_box{
    margin-top: 0px;
    padding-top:7px;
}
.hyEasycard .hyEasycard_details .hyDetails_top h1{
    font-size: 29px;
    margin-top:15px;
}
.hyEasycard .hyEasycard_details .hyDetails_top p{
    color: #808080;
    margin-top: 5px;
}
.hyEasycard .hyEasycard_details .hyDetails_top p:last-child{
	/*最后元素*/
    padding-bottom: 15px;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom {
    margin: 7px auto 0 auto;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #pageInfo{
    min-height: 150px;
    background: #ffffff;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #pageInfo .padding_15{
    padding: 15px;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #navInfo {
    margin: 0 auto;
    background-color: white;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #navInfo li {
    width: 33.3333%; 
    text-align: center;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #navInfo li:last-child {
    border-right: none;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #navInfo ul li a{
    color: #666;
    display:block;
    padding: 15px 0;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #navInfo .active-nav a {
    color:#f00;
    position: relative;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom #navInfo .active-nav a:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 8px;
    width: 15px;
    height: 3px;
    border-radius: 3px;
    background-color: #f00;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList {
    padding: 0px 15px;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList li{
    padding: 15px 0;
    overflow: hidden;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList .hyLeft {
    width: 28%;
    padding-top:28%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    float: left;
    border-radius: 4px;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList .hyLeft img{
    position: absolute;
    top: 0;
    left: 0%;
    height:100%;
    width: 100%;
    object-fit: cover;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList .hyRight {
    float: left;
    width: 72%;
    padding-left: 3%;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList .hyRight .label_box {
    margin-top: 5px;
    padding-top:0px;
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList .hyRight .content03{
    margin-top: 10px;
    display: flex;
	justify-content: space-between;/*两端对齐，项目之间的间隔都相等。*/
}
.hyEasycard .hyEasycard_details .hyDetails_bottom .hyList .hyRight .content04{
    margin-top: 5px;
}
/*悠游卡详情页end*/
/*悠游卡填写信息*/
.hyEasycard .hyInformation{
    overflow: hidden;
}
.hyEasycard .hyInformation .hyFlow_chart{
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 10px;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps{
	margin-top: 23px;
    margin-bottom:27px;
	display: flex;
	justify-content:center;/*水平居中*/
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center{
	display: inline-block;
    position: relative;
    flex-shrink: 1;
    flex-basis: 50%;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_main {
    position: relative;
    white-space: normal;
    text-align: left;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_title {
	font-size: .9rem;/*14px*/
	color: #d9d9d9;
    cursor: pointer;
	text-align: center;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .is_finish {
    color: #333;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_head{
	display: flex;
	justify-content:center;/*水平居中*/
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_head .step_line {
    position: absolute;
    height:5px;
    top: 20px;
    left: 0;
    right: 0;
    border-color: inherit;
    background-color: #dde5f2;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_head .step_icon_inner {
    position: relative;
    z-index: 1;
    width: 42px;
    height:42px;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_head .step_icon_inner img{
    width: 100%;
    display: block;
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_head .step_line_active{
    background-color: #f2f2f2;
    width: 50%;
    left: unset;
	right:unset;
    -webkit-transform: translateX(51%);
    -ms-transform: translateX(51%);
    transform: translateX(51%);
}
.hyEasycard .hyInformation .hyFlow_chart .processSteps .center .step_head .step_line_active_right{
	background-color: #f2f2f2;
    width: 50%;
    right: unset;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
.hyEasycard .hyInformation .Registration_Form{
    margin-top: 10px;
}
.hyEasycard .hyInformation .Registration_Form ul li {
    background-color: #fff;
    overflow: hidden;
}
.hyEasycard .hyInformation .Registration_Form ul li .p-0-15{
    padding: 0 15px;
}   
.hyEasycard .hyInformation .Registration_Form .input_content {
    position: relative;
    overflow: hidden;
    padding: 12px 0px;
}
.hyEasycard .hyInformation .Registration_Form .flForm {
    position: relative;
    width: 27%;
    float: left;
    text-align: left;
    font-size: .9rem;
    color: #999999;
}
.hyEasycard .hyInformation .Registration_Form .frForm {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%,-50%);
    z-index: 2;
    float: left;
    width: 70%;
}
.hyEasycard .hyInformation .Registration_Form .frForm .Form_input{
	width:100%;
	float: left;
	text-align: left;
	list-style: none;
	outline: none;
	font-size: .9rem;/*14px*/
	color: #333333;
	border: 0;
	background: #fff;
}
.hyEasycard .hyInformation .hyNotes{
	background: #fff;
    padding-top: 20px;
    padding-bottom:15px;
}
.hyEasycard .hyInformation .hyNotes .Notes_content{
	padding:0 15px;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .hydl{
    color: #f00;
    margin: 0 .4rem;
    cursor: pointer;
    font-weight: 500;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .main_checkbox{
    width: 18px;
    height:18px;
    background: #ffffff;
    border-radius: 50%;
    position: relative;
    border: 1px solid #b9b9b9;
    margin-right: 2%;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .main_checkbox label{
    width: 18px;
    height:18px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .main_checkbox input{
    margin: 0;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .main_checkbox label:after{
    content: "";
    width: 10px;
    height:5px;
    position: absolute;
    top: 2px;
    left:2px;
    border:2px solid #e40001;
    border-top: none;
    border-right: none;
    background: transparent;
    opacity: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .main_checkbox input[type=checkbox]{
    visibility: hidden;
}
.hyEasycard .hyInformation .hyNotes .agreement_hydl_Text .main_checkbox input[type=checkbox]:checked + label:after{
    opacity: 1;
}
.hyEasycard .hyInformation .hyNotes .Card_handling_reminder{
    margin-top: 18px;
    text-align: justify;
}

/*悠游卡填写信息end*/
/*底部*/
.hyEasycard_footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 62px;
    z-index:9999;
    padding: 7px 15px 7px 15px;
    background: #f9f9f9;
    border-top: 1px solid #e4e4e4;
}
.hyEasycard_footer .border_box{
    border: 0.08rem solid #ff0c17;
    overflow: hidden;
    border-radius: 38px;
}
.hyEasycard_footer .hyfl{
    float: left;
}
.hyEasycard_footer .money{
    width: 36%;
    height: 38px;
    line-height: 38px;
    text-align: center;
}
.hyEasycard_footer .money span{
    color: #F06521;
}
.hyEasycard_footer .hyfr{
    float: right;
}
.hyEasycard_footer .btn-box{
    display: block;
    width: 64%;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: white;
    background-image: linear-gradient(to right,#ff0102,#ff3162);
    background-color: #ff0c17;
    border-radius: 30px;
    border: none;
}
/*底部end*/

/**********************2023-03-21-悠游卡end********************/