:root{
	--title:#78451B;
}
a{
	color:#F8771B;
}
@keyframes upAndDown {
	0%{
		transform: translateY(0px);
	}
	100%{
		transform: translateY(3px);
	}
}
body{
	background: #FAEDA4;
	position: relative;
	margin: 0 auto;
	font-size: 14px !important;
}
section{
	margin: 12px;

}

.coin-box{
	position: relative;
	height: 100%;
	width: 100%;

}
.dragon{
	position: absolute;
    bottom: 19%;
    left: 17%;
	width: 25%;
	height: auto;
}


.coin--2{
	width: 29px;
	height: 25px;
	margin-top: 21px;
	margin-left: -24px;
}

.coin--3{
	margin-top: 21px;
	margin-left: 2px;
}

.coin--4{
	
	margin-top: 39px;
	margin-left: 2px;
}
.coin--5{

	margin-top: 53px;
	margin-left: -15px;
}

.coin--6{
	
	margin-top: 66px;
	margin-left: -2px;
}

.coin--7{
    margin-top: 70px;
    margin-left: -18px;
}

.coin--8{
    width: 29px;
    height: 30px;
    margin-top: 83px;
    margin-left: -18px;
}
/*.titleBoxBg{
	position: absolute;
	min-width: 218px;
	width: fit-content;
	height: 24px;
	background-color: #fff;
	clip-path:polygon(6% 0%, 90% 0%, 86% 100%, 1% 100%);
	display: block;
	margin: auto;
	z-index: 0;
	padding-right:15px;

}*/
.titleBox{
	position: relative;
	display: flex;
	justify-content: center;


}
.bar{
	position: relative;
	width: 18.5px;
	height: 31.76px;
	float: left;
	margin-top:-5px;
	margin-right: 5px;

}

.bar2{
	position: relative;
	width: 18.5px;
	height: 31.76px;
	float: right;
	margin-top:-5px;
	margin-left: 5px;


}

/*.titleBox::before{
	content:url(../img/new/line-R.svg);
	position: absolute;
	width: 20px;
	height: 40px;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: -10px;
	z-index: 5;
}

.titleBox::after{
	content:url(../img/new/line-L.svg);
	position: absolute;
	width: 20px;
	height: 40px;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: -10px;
	right: 10px;
	z-index: 9;
}*/
.blocksBox{
	display: inline-flex;
	width: 100%;

}
.blocks{
	
	width: 90%;
	display: block;
	margin: auto;
}
.blockTitle{
position: relative;
color:#fff;
background-image: url(../img/titleBlock.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: fit-content;
padding:11px 33px;
font-size: 14px;
font-weight: 700;
display: block;
margin: auto;
}
.blueModal{
background-image: url(../img/BG.svg);
background-repeat: no-repeat;
background-size: cover;
display: block;
margin: auto;
border-radius: 8px;
padding:28.5px 12px 14px;
margin-top: -21px;
}
.bold{
	font-weight: 700;
}
.bold900{
	font-weight: 900;
}
.lightBlueModal{
background: #FFFFFF99;
border-radius: 4px;
height: 100%;
width: 100%;	
padding:8px 12px;
}
.line{
	height: 1px;
	opacity: 0.5;
	width: 239px;
	background: #B89C00;
	margin: 48px auto;
}
.hand{
	position: absolute;
	height: 30px;
	width: 30px;
	right: 28px;
	bottom: 0;
}
.dllast{
	margin-right: 0rem !important;
}
dl{
	display:flex;
	flex-wrap: wrap;
    align-items: center;
	flex-direction: column;
	vertical-align: top;
	margin: 0 8px;
	color: #8C7938;
	text-align: center;

}
dt{
	display:flex;
	flex-wrap: wrap;
    align-items: center;
}
dd{
width: 100%;
color: #8C7938;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 183.333% */
letter-spacing: -0.36px;
text-align: center;
}
.dlBox{
position: relative;
width: 100%;
display: flex;
align-items: first baseline;


}
.dlBox > li > dt.dtEn:nth-child(1){
padding:0;
background-attachment: red;
width: 50%;

}
.dlBox > li.dtEn:nth-child(2){
width: 70%;
}
.dlBox > li.dtEn:nth-child(3){
	width: 50%;
	}
	.dlBox > li {
		padding:0;
		background-attachment: red;
		width: 50%;
		
		}
	
.arrowBox{
	position: relative;
	
}
.arrowBox::before{
	content: "";
	position: absolute;
	background-image: url(../img/group-arrow.svg);
	height: 15px;
	min-height: 11px;
	max-width: 390px;
	width: 50%;
	/*background-color: red;*/
	z-index: -1;
	margin: 20px auto;
	background-size: cover;
    left: 0;
    right: 0;
}

.modal{
border-radius: 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 4px 10px 0px rgba(144, 131, 54, 0.34);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding:16px 8px 70px 8px;
}
.modal-absoulte{
	margin-top: -25px;
	z-index: 0;
}
.center{
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.relative{
	position: relative;
	z-index: 1;
}

.title{
position: absolute;
color: var(--title);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: -0.405px;
}
img.icon{
display: block;
margin: auto;
}
.icon{
position: relative;
width: 26px;
height: 26px;
margin-right: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow{
width: 30px;
height: 30px;
display: block;
margin: auto;
padding:5px;
animation:upAndDown 1s infinite ease-in-out alternate;
}
.circle{

border-radius: 50%;
background-color: #fff;
flex-shrink: 0;
fill: #fff;
filter: drop-shadow(0px 2.286712646484375px 8.003494262695312px rgba(144, 131, 54, 0.34));
height: 50px;
width: 50px;
display: flex;
}
.btn{
position: relative;
min-width: 231px;
min-width: fit-content;
width: 60%;
min-height: 46px;
height: fit-content;
flex-shrink: 0;
flex-shrink: 0;
border-radius: 23px;
background: linear-gradient(0deg, #046E58 0%, #4FB092 88%);
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 36px auto;
padding: 0 10px 0 21px;
text-align: center;
}
.btn-icon{
width: 36px;
height: 29px;
margin-left: 4px;
}
.iconBg{
position: relative;
}
.iconBg::after{
content:"";
position: absolute;
height: 100px;
width: 100px;
}
.text{
	padding-right:7px; 
	padding-top: 11px;
	padding-bottom: 10px;
  
}

ul{
	width: 100%;
	font-size: 14px;
}
li.listBox{
	border-radius: 30px 8px 8px 30px;
	background: #FFF;
	box-shadow: 0px 2px 7px 0px rgba(144, 131, 54, 0.34);
	min-height: 53px;
	height: fit-content;
	width: 100%;
	padding:5px 22px 5px 4px
}

li.list {
	position: relative;
    list-style: none;
    border-radius: 100px 9px 9px 100px;
    background: #FFF;
    box-shadow: 0px 2px 7px 0px rgba(58, 87, 196, 0.27);
    list-style-position: outside;
    counter-increment: num;
    font-size: 14px;
    padding: 20px;
    margin-top: 8px;
}
li.list::before {
	content: counter(num) ". ";
    position: absolute;
    border-radius: 50%;
    width: 49px;
    height: 49px;
    background: #FFF;
    fill: rgba(255, 255, 255, 0.45);
    filter: drop-shadow(0px 2px 7px rgba(92, 157, 216, 0.17));
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translate(0,-50%);
}
.carouselTitleBox{
position: relative;
border-radius: 19px;
border: 1px solid var(--1, #046E58);
background: #FFF;
box-shadow: -2px -2px 7px 0px #C3D9D3 inset;
width: fit-content;
min-width: 126px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
left:50%;
transform: translate(-50%,0);
z-index: 999;
padding:0 40px;
}
.carouselBox{
position: relative;
border-radius: 8px;
background: rgba(255, 255, 255, 0.70);
box-shadow: 0px 4px 10px 0px rgba(144, 131, 54, 0.34);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: -2px -2px 7px 0px #C3D9D3 inset;
border: 1px solid  #046E58;
margin-top: -20px;
/*z-index: -1;*/
border-radius: 22px;

}
.tnc{
font-size: 12px;
color: #868686;
padding:0 16px;
}
.table table{
	border-spacing: 8px;
	padding: 4px;
	text-align: center;
	width: 100%;
}
.table th{
	background: #FFE68D;
	color: #CC7802;
	padding:8px;
	font-size: 14px;
	text-align: center;
	font-weight: 600;
	}
.table td{
	padding :8px
}
.table  tr:nth-child(odd){
	background: #FFFCF2;
}
.table  tr:nth-child(even){
	background: #F9F9F9;
}
.tag{
	margin-right: 4px;
}
.tagA{
padding:6px 12px;
color:#fff;
border-radius: 18px;
background-color:#0153A7 ;
font-size: 10px;
font-weight: 900;
}
.tagB{
	padding:6px 12px;
	color:#fff;
	border-radius: 18px;
	background-color:#FFB445 ;
	font-size: 10px;
	font-weight: 900;
}

.flex{
	display: flex;
}
.relative{
position: relative;
}
.flexWrap{
display: flex;
flex-wrap: wrap;
}
.bitMap{
    content: url(../img/Bitmap.png);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    left: 100%;
    top: 0;
    transform: translate(-100%, 38%);
    width: auto;
    height: 71%;
    opacity: 0.5;
	z-index: 0;
}
.flexCenter{
	display: flex;
	align-items: center;

}
.flexACenter{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* margin-top */
.mtn25{
	margin-top: -32px;
	}
.mt7{
	margin-top: 7px;
}
.mt8{
	margin-top: 8px;
}

.mt12{margin-top: 12px;}
.mt24{
	margin-top: 24px;
}
.mt36{
	margin-top: 36px;
}
.mt47{
	margin-top: 47px;
}
.ml5{
	margin-left: 5px;
}
.ml4{
	margin-left: 4px;
}

/* padding */
.pb_28px{
	padding-bottom: 28px;
}
/* font */
.blue{
color:#003871;
}
.font10{
    font-size: 10px;
    vertical-align: super;
    margin-top: 13px;
    margin-right: 2px;
}
.font14{

	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; 
	letter-spacing: -0.36px;
	}
.font14Brown{
color: #8C7938;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; 
letter-spacing: -0.36px;
}
.font14Black{
	color: #000;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px; 
	letter-spacing: -0.36px;
	}
.font14Grey{
color: #565656;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.315px;
}
.font16Green{
color: #34987D;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.36px;
}
.font18{
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.405px;
}
.font18Black{
	color: #000;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: -0.405px;
	}

.font22{
	color: #333;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.495px;
}
.font70{
font-size: 70px;
color:rgba(1, 83, 167, 1);
position: relative;
z-index: 5;
}
.price{
	color:rgba(1, 83, 167, 1)

}
	.red{
		color:#C8152E;
	}
	.pt24{
		padding-top: 24px;
	}



	/* code */

	.share-icon{
		height: 10px;
		width: 10px;
		margin-left: 5px;
	}
	#code{
		font-family: SFPro-Bold;
		font-size: 25px;
		color: #333333;
		letter-spacing: 0;
		font-weight: 700;
		box-sizing: border-box;
		padding: 0px 6px;
		overflow-wrap: anywhere;
		text-align: center;
	}
	.code_title{
	  color: #000;
	  font-family: PingFangSC-Medium;
	font-size: 18px;
	color: #333333;
	letter-spacing: 0;
	font-weight: 600;
	margin-bottom: 15px;
	
	}
	.code_word {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		box-shadow: inset 1px 1px 5px 0 rgba(0,0,0,0.50);
		border-radius: 18px;
		padding: 20px 0 ;
		flex-direction: column;
		position: relative;
		margin-top: 10px;
		box-sizing: border-box;
	  
	}
	.code_word>div:last-child {
		/*border: 1px solid #D14054;
		border-radius: 8px;
		padding: 5px 12px;
		font-size: 14px;
		color: #D14054;
		letter-spacing: -0.15px;
		text-align: center;
		line-height: 18px;
		font-weight: 500;*/
		background-image: url(../img/Icon-Copy@2x.png);
		background-repeat: no-repeat;
		background-size: contain;
		height: 24px;
		width: 22px;
		position: absolute;
		right: 23px;
		margin-top: 1px;
	}
	
	

	@media only screen  and (max-width: 320px)  {
		html{font-size:41.4px !important;}
body{
	font-size: 12px;
} 
.font18{
	font-size: 12px;
}
.font14Grey{
	font-size: 12px;
}
.font18Black{
	font-size: 14px;
}
.font14Brown {
	font-size: 12px;
}
.circle {
	width: 40px;
	height: 40px;
}
.modal  {
	padding:16px 5px 70px 5px;
}
.blockTitle{
font-size: 13px;
}

   }

 
   @media only screen and (min-width: 1081px) and (max-width:1920px) {
    html{font-size:41.4px !important;}
	.blockTitle{
		width: fit-content;
		padding:8px 38.4px;
	
		}
		.blueModal{
		border-radius: 12.824px;
		padding: 38.412px 19.2px 22.4px;
		margin-top: -24px;
		}
		.font10{
			font-size: 16px;
			font-weight: 700;
			vertical-align: super;
			margin-top: 20px;
		}
		.font14Web{
		
			font-weight: 700;
		}
		.mt8{
		margin-top: 12.8px;
		}
		.tagA,.tagB{
			padding: 9.6px 19.2px;
			color: #fff;
			border-radius: 18px;
			font-size: 16px;
		}
	
		
		.font52{
			font-size: 104px;
		}
		.mt4{
			margin-top: 4px;
		}
  }
  
  
  @media only screen and (min-width: 820px) and (max-width: 1180px)  {
       html{font-size:41.4px !important;}
   	.blockTitle{
		width: fit-content;
		padding:8px 38.4px;
	
		}
		.blueModal{
		border-radius: 12.824px;
		padding: 38.412px 19.2px 22.4px;
		margin-top: -24px;
		}
		.font10{
			font-size: 16px;
			font-weight: 700;
			vertical-align: super;
			margin-top: 20px
		}
		.font14Web{
		
			font-weight: 700;
		}
		.mt8{
		margin-top: 12.8px;
		}
		.tagA,.tagB{
			padding: 9.6px 19.2px;
			color: #fff;
			border-radius: 18px;
			font-size: 16px;
		}
	
		
		.font52{
			font-size: 104px;
		}
		.mt4{
			margin-top: 4px;
		}
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px)  {
       html{font-size:41.4px !important;}
	.blockTitle{
		width: fit-content;
		padding:8px 38.4px;
	
		}
		.blueModal{
		border-radius: 12.824px;
		padding: 38.412px 19.2px 22.4px;
		margin-top: -24px;
		}
		.font10{
			font-size: 16px;
			font-weight: 700;
			vertical-align: super;
			margin-top: 20px
		}
		.font14{
		
			font-weight: 700;
		}
		.mt8{
		margin-top: 12.8px;
		}
		.tagA,.tagB{
			padding: 9.6px 19.2px;
			color: #fff;
			border-radius: 18px;
			font-size: 16px;
		}
	
		
		.font52{
			font-size: 104px;
		}
		.mt4{
			margin-top: 4px;
		}
  }
  @media only screen and (min-width: 540px) and (max-width: 720px)  {
       html{font-size:41.4px !important;}
	.blockTitle{
		width: fit-content;
		padding:8px 38.4px;
	
		}
		.blueModal{
		border-radius: 12.824px;
		padding: 38.412px 19.2px 22.4px;
		margin-top: -24px;
		}
		.font10{
			font-size: 16px;
			font-weight: 700;
			vertical-align: super;
			margin-top: 20px
		}
		.font14{
		
			font-weight: 700;
		}
		.mt8{
		margin-top: 12.8px;
		}
		.tagA,.tagB{
			padding: 9.6px 19.2px;
			color: #fff;
			border-radius: 18px;
			font-size: 16px;
		}
	
		
		.font52{
			font-size: 104px;
		}
		.mt4{
			margin-top: 4px;
		}
  }