@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	src: url("./fonts/NotoSans-Medium.ttf") format('truetype');
}



body {
	font-family: 'Noto Sans';
	color: #313131;
	background-color: #fff;
	text-align:center;
	font-size: 16px;
	padding-top: 5% ;
}

.title {font-weight: 500;}


.main {
	margin: 0 auto;
	max-width: 580px;
	padding: 0 20px;
}

.main .line_item {
	text-align:left;
	display: inline-block;
	width: 285px;
	margin: 10px 0;
}



.main .info { margin: 20px 0 30px 0;}
.main .info .item {color: #5C5C5C; font-size: 16px;}
.main .info .item span {color: #000;}


.logo {display: block;}
.logo img{ display: block; margin: 0 auto;}


input {
	font-size: 16px;
	background-color: #FBFBFB;
	border-radius: 5px;
	border: solid 1px #EBEBEB;
	padding: 16px 20px;
	width: 228px;
}

input.short {
	width: 83px;
}



.info {
	font-size: 12px;
	color: #AEAEAE;
}

.info a {color: #7c7c7c;}
.info a:hover {color: #ff1a1a;}

.separator {
	margin-left: 15px;
}

.button, .button_disable {
	display: inline-block;
	height: 64px;
	color: #fff;
	background: #D9141E;
	font-size: 18px;
	line-height: 63px;
	border-radius: 40px;
	text-decoration: none;
	text-align: center;
	padding: 0 25px;
}
.button:hover {
	background: #ec000c;
}


.button_disable {
	background: #d9d9d9;
}


.btn_div  {
	display: inline-block;
	height: 60px;
	min-width: 230px;
	color: #070707;
	background: #ffffff;
	font-size: 18px;
	line-height: 60px;
	border-radius: 40px;
	text-decoration: none;
	text-align: center;
	padding: 0 25px;
	border: solid 1px #000;
	cursor:pointer;
	margin-top: 30px;

}
.btn_div:hover {
	border: solid 1px #ec000c;
	box-shadow:  0px 0 7px 0px red;
	/*color: #ec000c;*/
}

.btn_div .btn_img_sbp, .btn_div .btn_img_card  {
	width: 75px;
	height: 38px;
	display: inline-block;
	vertical-align: middle;
	justify-content: flex-start;
	margin-right: 10px;
}

.btn_div .btn_img_card {
	width: 45px;
}

.child_help {
	margin: 5px 0 10px 0;
	font-size: 12px;
	color: #AEAEAE;
}



.mode {
	margin-top: 13% ;
	margin-bottom: 50px ;
	text-align: left;
}

.mode button{
	margin-top: 15px ;
	display: inline;
	width: 160px;
	font-size: 18px;
	font-weight: 700;
	border: none;
	border-radius: 5px;
	padding: 12px;
	text-align: center;
	margin-right: 20px;
}

.mode .activ {
	background-color:#272727;
	color: #fff;
}

.mode .unactiv {
	background-color:#fff;
	color: #151515;
	border: solid 1px #eeeeee;
	cursor: pointer;
}

.mode .unactiv:hover {
	background-color: #9d9d9d;
	color: #fff;
}



.contract_list {
	display: inline-block;
	text-align: left;
	margin:20px;
}


.contract_no_select {
	text-align: center;
	color: red;
	display: none;
}



.qr_container {
	width: fit-content;
	margin: 20px auto;
	max-width: 660px;
	padding: 0 20px;
}


.qr_container .qr_cod{
	text-align: center;
	padding-top: 30px;
	vertical-align: top;
	display: inline-block;
}

.qr_container .qr_cod svg{
	border: solid 1px #bbb;
	border-radius: 10px;
	padding: 10px;
}


.qr_container .qr_help{
	text-align: left;
	vertical-align:middle;
	padding-left: 20px;
	font-size:14px;
	display: inline-block;
	max-width: 410px;
}

.qr_container .qr_help li {
	margin-bottom: 30px;
}

.qr_container .qr_help ol {
	list-style-type: none;
	counter-reset: num;
	margin: 0 0 0 45px;
	padding: 15px 0 5px 0;
}
.qr_container .qr_help ol li {
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	line-height: 1.4;
}
.qr_container .qr_help ol li:before {
	content: counter(num);
	counter-increment: num;
	display: inline-block;
	position: absolute;
	left: -38px;
	top: -2px;
	width: 23px;
	height: 23px;
	color: #000;
	text-align: center;
	line-height: 22px;
	border-radius: 50%;
	border: 1px solid #ff2b2b;
}












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

	.mode{
		margin: auto;
		margin-top: 20px ;
		margin-bottom: 20px ;
		text-align: center;
	}

	.mode button {
		margin-right: 0;
	}


	body{
		width: 100%; height: 100vh; margin:0; pagging:0;
	}

	.main {
		max-width: 300px;
		margin: 0 auto;
		padding: 0 30px;
	}

	.main .btn{
		text-align:center;
		margin-right: 0;
	}

	.main .line_item{
		text-align: center;
	}


}