@charset "utf-8";
/* CSS Document */

.hh{
	margin-left: auto;
	margin-right: auto;
	width: 650px;
	margin-top: 85px;
}
.hh .block-white{
	/* padding:15px; */
	/* -webkit-border-radius: 15px; */
	-moz-border-radius: 15px;
	/* border-radius: 15px; */
	/* background-color:#fff; */
	/* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
}
.hh .block-white .logo-top{
	text-align:center;
	padding-bottom: 0px;
	margin-bottom:20px;
	/* background:url(../images/test/line.png) bottom center no-repeat; */
}
.hh .block-white .logo-top img{
	
-webkit-border-radius: 15px;
	
-moz-border-radius: 15px;
	
border-radius: 15px;
	
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	
width: 100%;
}
.hh .block-white .block-mid{
	font: 18px/24px 'Kanit', Arial, sans-serif;
}

.hh .countdown{
	margin:0;
	padding:0;
}
.hh .countdown .count-top{
	margin:0;
	padding:0;
	margin-top:20px;
	font: 18px/24px 'Kanit', Arial, sans-serif;
	padding-bottom:15px;
	margin-bottom:15px;
	background:url(../images/test/line.png) bottom center no-repeat;
	text-align:center;
}
.hh .countdown .count-mid{
	
}
.hh .countdown .count-mid .red-block{
	padding:3px 0px;
	width:39px;
	background-color:#760F20;
	color:#fff;
	font: 16px/20px 'Kanit', Arial, sans-serif;	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	text-align:center;
}
.hh .countdown .count-mid .red-block span{
	font: 10px/20px 'Kanit', Arial, sans-serif;	
	color:#fff;
}
.hh .countdown .count-bottom{
	margin-top:5px;
	font: 16px/20px 'Kanit', Arial, sans-serif;	
	text-align:center;
}

.hh .step{
	margin:0;
	padding:0;
	margin-top:20px;
}
.hh .step .step-block{
	margin:0;
	padding:0;
}

.hh .step .step-block .top{
	margin:0;
	padding:0;
}
.hh .step .step-block .top .icon{
	margin:0;
	padding:0;
	width: 32px;
}
.hh .step .step-block .top .icon img{
	max-width: 100%;
	height:auto;
}
.hh .step .step-block .top .blue-tab{
	width: 685px;
	margin:0;
	padding: 1px 22px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	color:#fff;
	font: 16px/32px 'Kanit', Arial, sans-serif;
	background:#030F58;
}
.hh .step .step-block .mid{
	margin:0;
	padding:0;
	margin:15px 0px;
}

.hh .step .step-block .mid .step-1{
	margin:0;
	padding: 0px 32px;
	font: 16px/24px 'Kanit', Arial, sans-serif;
	text-align:center;
	color:#333333;
}
.hh .step .step-block .mid .step-1 a{
	color:#030F58;
	text-decoration:underline;
}
.hh .step .step-block .mid .step-1 a:hover{
	color:#0D24B2;
}
.hh .step .step-block .mid .step-1 .red-text{
	color:#760F20;
	margin-top:10px;
	text-align:left;
	margin-left: 34px;
}


.hh .step .step-block .mid .step-2{
	margin:0;
}
.hh .step .step-block .mid .step-2 .detail{
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#333333;
	padding: 0px 79px;	
}
.hh .step .step-block .mid .step-2 .person{
	
}
.hh .step .person-block{
	width: 146px;
	height:auto;
	margin-top:20px;
}
.hh .step .person-block .wheel{
	width:146px;
	height: 147px;
	background:url(../images/test/gear.png) top center no-repeat;
	position:relative;
	z-index: 1;
}
.hh .step .person-block .wheel .number{
	width:36px;
	height: 36px;
	background:#EED389;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	font: 12px/19px 'Kanit', Arial, sans-serif;
	text-align:center;
	color:#333333;
	position:absolute;
	bottom:0;
	right: 10px;
}
.hh .step .person-block .wheel .number span{
	font: 18px/10px 'Kanit', Arial, sans-serif;
	text-align:center;
	color:#333333;
}
.hh .step .person-block .wheel .pic{
	width:99px;
	height:auto;
	margin: 0 auto;
	padding-top: 23px;
}
.hh .step .person-block .wheel .pic img{
	max-width:100%;
	height:auto;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	border:5px solid #030F58;	
}
.hh .step .person-block .red-block{
	padding-top: 73px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 15px;
	margin-top: -62px;
	height: auto;
	position:relative;
	background:#760F20;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.hh .step .person-block .red-block .name{
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#EED389;
}
.hh .step .person-block .red-block .name span{
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#fff;
}	
.hh .step .person-block .red-block .neer{
	margin-top: 20px;
	font: 11px/20px 'Kanit', Arial, sans-serif;
	color:#EED389;
}
.hh .step .person-block .red-block .neer span{
	font: 10px/20px 'Kanit', Arial, sans-serif;
	color:#fff;
}
.hh .step .person-block .red-block .more{
	margin-top: 20px;
	font: 14px/24px 'Kanit', Arial, sans-serif;
}
.hh .step .person-block .red-block .more a{
	color:#fff;
	text-decoration:underline;
}
.hh .step .person-block .red-block .more a:hover{
	color:#fff;
}


.hh .step .step-block .mid .step-3{
	margin:0;
}
.hh .step .step-block .mid .step-3 .detail{
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#333333;
	text-align:center;
}
.hh .step .step-block .mid .step-3 .formbox{	
	margin-top: 15px;
}
.hh .step .step-block .mid .step-3 .formbox input::placeholder{	
	font: 16px/24px 'Kanit', Arial, sans-serif;
	color:#292929;
}
.hh .step .step-block .mid .step-3 .ident{	
	margin-top: 15px;
}
.hh .step .step-block .mid .step-3 .ident .pic{	
	text-align:center;
}
.hh .step .step-block .mid .step-3 .ident .pic img{	
	max-width: 100%;
	height:auto;
}
.hh .step .step-block .mid .step-3 .ident .btn-ident{	
	margin-top:20px;
	text-align:center;
}
.hh .step .step-block .mid .step-3 .ident .btn-ident img{	
	max-width: 100%;
	height:auto;
}
.hh .step .step-block .mid .step-3 .confirm{	
	margin: 0px 26px;
    margin-top: 20px;
	font: 16px/24px 'Kanit', Arial, sans-serif;
}
.hh .step .step-block .mid .step-3 .confirm .form-check-label{
	    padding-left: 5px;	
}


.hh .btn-ok{
	margin:0;
	padding:0;
	margin-top:20px;
	text-align:center;
	margin-bottom:20px;
}
.hh .btn-ok .btn-primary{
	background:#030F58;
	border-color: #030F58;	
	font: 16px/24px 'Kanit', Arial, sans-serif;
	    color: #fff;
}
.hh .btn-ok .btn-secondary{
	background:#A5A6A8;
	border-color: #A5A6A8;	
	font: 16px/24px 'Kanit', Arial, sans-serif;
	    color: #fff;
}
.hh .bottom{
	margin:0;
	padding:0;
	text-align:center;
	padding-top: 5px;
}


@media (min-width: 320px) and (max-width: 991px) { 
.hh{
	width:100%;
}
.hh .block-white .block-mid{
	font: 16px/24px 'Kanit', Arial, sans-serif;
}
 }
 @media (min-width: 320px) and (max-width: 575px) { 
.hh .step .step-block .top .blue-tab{
	    width: 318px;
}
.hh .step .step-block .mid .step-1 .red-text{
	    margin-left: 15px;
	    font-size: 14px;
}
.hh .step .step-block .mid .step-1 .red-text span{
	display:block;
}
.hh .step .step-block .mid .step-2 .detail{
	    padding: 0px 67px;	
}
 }
 @media (min-width: 576px) and (max-width: 767px) {
	 	.hh .step .step-block .top .blue-tab{
	    width: 468px;
}
.hh .step .step-block .mid .step-1 .red-text{
	    margin-left: 33px;
}
.hh .step .step-block .mid .step-2 .detail{
	    padding: 0px 67px;	
}
	  }
@media (min-width: 768px) and (max-width: 991px) {
	.hh .step .step-block .top .blue-tab{
	    width: 647px;
}
.hh .step .step-block .mid .step-1 .red-text{
	    margin-left: 34px;
}

	 }