/* Minification failed. Returning unminified contents.
(421,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(449,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(461,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(499,14): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(516,14): run-time error CSS1039: Token not allowed after unary operator: '-pri06'
(519,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(681,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(709,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(761,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(764,14): run-time error CSS1039: Token not allowed after unary operator: '-pri06'
(887,26): run-time error CSS1039: Token not allowed after unary operator: '-pri01'
(1055,15): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(1083,14): run-time error CSS1039: Token not allowed after unary operator: '-pri06'
(1086,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(1245,14): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(1262,14): run-time error CSS1039: Token not allowed after unary operator: '-pri06'
(1265,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(1493,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(1521,14): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(1571,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(1574,14): run-time error CSS1039: Token not allowed after unary operator: '-pri06'
(1645,14): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(1663,14): run-time error CSS1039: Token not allowed after unary operator: '-pri06'
(1666,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(1789,14): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(1794,14): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(1874,14): run-time error CSS1039: Token not allowed after unary operator: '-pri02'
(1924,14): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(1930,14): run-time error CSS1039: Token not allowed after unary operator: '-pri07'
(2060,26): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(2084,25): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(2190,76): run-time error CSS1039: Token not allowed after unary operator: '-gradient01'
(2192,1): run-time error CSS1019: Unexpected token, found '@import'
(2192,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css?family=Lato&display=swap')'
(2193,1): run-time error CSS1019: Unexpected token, found '@import'
(2193,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&subset=chinese-traditional')'
(2194,1): run-time error CSS1019: Unexpected token, found '@import'
(2194,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&subset=chinese-traditional')'
(2195,1): run-time error CSS1019: Unexpected token, found '@import'
(2195,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp')'
(2200,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2201,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2202,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2203,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2204,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2205,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2206,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2207,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2209,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2210,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2211,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2213,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2214,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2215,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2216,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2217,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2218,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2219,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2220,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2221,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2222,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2224,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2442,47): run-time error CSS1039: Token not allowed after unary operator: '-pri01'
(2443,39): run-time error CSS1039: Token not allowed after unary operator: '-pri05'
(2444,36): run-time error CSS1039: Token not allowed after unary operator: '-pri07'
(2467,38): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(2467,59): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(2468,70): run-time error CSS1039: Token not allowed after unary operator: '-pri04'
(2471,41): run-time error CSS1039: Token not allowed after unary operator: '-pri07'
(2471,62): run-time error CSS1039: Token not allowed after unary operator: '-pri07'
(2472,76): run-time error CSS1039: Token not allowed after unary operator: '-pri07'
(2546,29): run-time error CSS1038: Expected hex color, found '#FFFF'
 */
@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

@font-face {
  font-family: 'CNBold';
  src: url('../fonts/NotoSansCJKtc-Black.otf');
  unicode-range: U+4E00-9FA5, U+9FA6-9FCB, U+31A0-31BA; /* 中文 */
}
@font-face {
  font-family: 'NB-Bold';
  src: url('../fonts/Akagi Pro W00 Fat.ttf');
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; /* 標題粗英文 */
}
@font-face {
  font-family: 'YanoneRegular';
  src: url('../fonts/YanoneKaffeesatz-Regular.ttf');
  unicode-range: U+4E00-9FA5, U+9FA6-9FCB, U+31A0-31BA; /* 中文 */
}

@font-face {
  font-family: 'IP-EN';
  src: url('../fonts/NotoSansCJKtc-Regular.otf');
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; /* 所有價格與英文 */
}
@font-face {
  font-family: 'IP-EN-Bold';
  src: url('../fonts/NotoSansCJKtc-Bold.otf');
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; /* 所有價格與英文 */
}
.glyphicon {
  position: relative;
  top: 1px;
  margin: .2rem .5rem 0 .8rem ;	
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon:empty {
  width: .8rem;
}

body {
    margin: 0;
	min-width: 100%;
	padding: 0;
	width: 100%;
	font-family: "YanoneRegular", "Roboto";
	letter-spacing:1px;
	font-size: .9rem;
	overflow-x: hidden;
	height: auto;
	background-color: #22124f;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
	background-image: url("./images/Buy_BG.png");
	background-position: 50%;
	background-repeat: repeat-y;
	background-repeat: no-repeat;
	background-attachment: fixed;
    background-size: cover;
}

a:link {color:#FFF;  text-decoration:  none;  } 
a:visited {color:#FFF;  text-decoration:  none; } 
a:hover{color:#FFF; text-decoration: underline;}
a:active {color:#FFF;  text-decoration:  none; }


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.ALL_DIV{
	display: flex;
    flex-direction: column;
	margin: 1rem auto;
	width: 100%;
}


/***天***/


.PC_head {
	position: fixed; 
	width: 100%;
	margin: 0 auto;
	transition: 1s; 
	z-index: 9; 
	top: 0; 
	background-color: rgba(0, 0, 0, 0.4);
}



.PC_head ul {
    margin:0 auto;
	padding: 0;
    list-style-type: none;
	width: 1330px;
}

.PC_head li {
	float: left;
	display: block;
	position: relative;
    font-family:"NB-Bold", "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	font-size: 24px;
	margin-top: 30px;
	font-weight: 700;
	cursor: pointer;
	padding-right: 90px;
	color: #85e5ff;
}
	.PC_head li.LOGO {
		width: 260px;
	}
.PC_head .down {
	position: absolute;
	width: 170px;
	margin-top: 10px;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 10px
}
.PC_head .down span{
	width: 100%;
	font-size: 20px;
	font-weight: 600;
	line-height: 40px;
	color: #FFF;
}
.PC_head .down span a {
	color: #FFFFFF;	
	}

.PC_head li.line {
	padding-right: 35px;
}

.PC_head li:last-child{
	padding-right:0;
	padding-left: 10px;
}
.PC_head a {
	color: #85e5ff;
}
/***地****/

.Footer {
	font-family: "IP-EN";
	padding: 2rem 0 1rem;
    color: #fff;
	align-content:flex-end;
	bottom: 0; 
	width: 100%;
	text-align: center;
	clear: both;
	margin-top: auto;
}

.Footer .copyright {
	line-height: 1.4rem;
	font-size: 1rem;
	text-align: center;
	width: 100%;

}


@media (max-width:850px) {
	
	.Footer {
		bottom: 0;
}
     .Footer_mobi {
		bottom: 0;
		position: absolute;
}
     
}
@media (max-width:330px) {
	.Footer .info{
    font-size: 1.2rem;
}

.Footer .copyright {
	line-height: 1rem;
	text-align: left;
	margin-top: 1rem;
	margin-left: 1rem;
}	
	
}

/***大BN***/

.TOP_BN {
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.TOP_BN img {
	width: 100%;
}

.Car__{
	width: 100%;
	height: 416px;
	margin-top: 500px;
	margin-bottom: -100px;
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto auto;
}

.Sea_BN {
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.Sea_BN img {
	width: 100%;
}

.Search__{
	width: 100%;
	height: 416px;
	margin-bottom: -100px;
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto auto;
	margin-top: 100px;
}

.RoadmapTOP_BN{
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    width: 100%;
	height: 4008px;
}

.Roadmap_INFO {
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto auto;

    flex-direction: column;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
	height: 4008px;
	margin: auto;

}

@media (max-width:1000px) {
.Roadmap_INFO {
background-size: 100%;
background-position: top;
}

}

.BIG_ConnectWallet {
	position: relative;
	width: 400px;
	height: 100vh;
	margin: auto;
	text-align: center;
}
.BIG_ConnectWallet img {
	
}
@media (max-width:728px) {
.BIG_ConnectWallet {
	width: 220px;
	height: 40vh;
	margin-bottom: 30%;
	margin-top: 80%;
}
.BIG_ConnectWallet img {
	width: 220px;
}
}

/*****購買****/

.BuyTB {
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: relative;
    width: 100%;
	padding-top: 100px;

}
.Buy__ {
	width: 974px;
	margin-left: auto;
	margin-right: auto;
}
.BuyTB .info_link{
	width: 20%;
	height: 20px;
	margin-top: 510px;
	display: block;
	cursor: pointer;
	float: left;
}
.BuyTB .B_all {
	position: relative;
    background-image: url("./images/mint_TOP_BG_02.png");
	background-position: 50%;
	background-repeat: repeat-y;	
	clear: both;
	min-height: 500px;
}
.BuyTB .CARD_ {
	width: 49%;
	padding-top: 90px;
	padding-left: 78px;
	float: left;
}
.BuyTB .CARD_2 {
	width: 35%;
	padding-top: 40px;
	margin:  0 auto;
}
.BuyTB .CA_INFO {
	color: #FFFFFF;
	width: 49%;
	height: 500px;
	float: left;
}
.BuyTB .CA_INFO .tl{
	color: #F9F804;
}
@media (max-width:974px) {
	.Buy__ {
	width: 95%;
}
	.Buy__ .BGimg {
	width: 100%;
}
	.BuyTB .CARD_ {
	width: 95%;
}
	.BuyTB .CARD_2 {
	width: 50%;
}
.BuyTB .CA_INFO {
	color: #FFFFFF;
	width: 85%;
	float: none;
	margin: auto;
	padding-top: 20px;
}
	.BuyTB .B_all {
	background-size:contain;
}
}
@media (max-width:650px) {
	.BuyTB .B_all {
	min-height: 400px;
}
.BuyTB .CARD_2 {
	width: 75%;
	padding: 30px 0;
}
	
	.Transparent img {
	width: 80%;
}
	
}

.BuyTB .quantity {
	position: relative;
	width: 222px;
	line-height: 60px;
	height: 60px;
	font-size: 60px;
	text-align: center;
	color: var(--pri04);
	font-family: "IP-EN-Bold";
	margin-left: 64px;
}
.BuyTB .quantity .plus{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	right: 0;
	top: 8px;
}
.BuyTB .quantity .less{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	left: 0;
	top: 8px;
}

.BuyTB .last {
	position: relative;
	width: 222px;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	color: var(--pri04);
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin-left: 64px;
}

.BuyTB .last2 {
	position: relative;
	width: 222px;
	line-height: 30px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	color: var(--pri04);
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin: 20px auto;
}
.BuyTB .bt_mint {
	position: relative;
	width: 222px;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	
	margin-left: 64px;
}

.Transparent50 {
	opacity:0.5;
}
.Transparent img {
	width: 100%;
}
.BuyTB .bt_conn {
	position: relative;
	width: 260px;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	margin-left: 45px;
}
.BuyTB .showCARD {
	position: relative;
	margin: 0 auto;
	padding: 47px 0 0;
	width: 992px;
}
.BuyTB .showCARD h4 {
	font-family: "NB-Bold","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	color: var(--pri02);
	text-align: center;
	font-weight: 700;
}
.BuyTB .showCARD ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
}
.BuyTB .showCARD li {
	font-size: 16px;
	line-height: 26px;
	margin: 40px 0 60px;
	clear: both;
}
.BuyTB .showCARD li:nth-child(2n) {
	color: var(--pri06);
}
.BuyTB .showCARD li:nth-child(2n-1) {
	color: var(--pri05);
}
.BuyTB .showCARD .pic,.BuyTB .showCARD .picbl {
	width: 50%;
	display: block;
	float: left;
	background-position: top;
    background-repeat: no-repeat;
	padding: 20px 40px;
	text-align: center;
}
.BuyTB .showCARD .pic img {
	width: 100%;
}

.BuyTB .showCARD .cardNAME {
	width: 100%;
	text-align: center;
	line-height: 30px;
	height: 100px;
	padding-top: 50px;
	font-family: "IP-EN";
	font-size: 20px;
}
.BuyTB .showCARD .cardB {
    font-family: "NB-Bold","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	font-size: 22px;
	margin-right: 10px;
	font-weight: 600;
}
.BuyTB .showCARD .txt {
	margin-left: 5%;
	padding-top: 20px;
	padding-bottom: 20px;
	float: left;
	width: 45%;
}
.BuyTB .showCARD .txtbl {
	padding-top: 15%;
}

.BuyTB .input_txt{
	border: 0px solid #000000;
	width: 20%;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 600;
	outline: none;
	letter-spacing: .04rem;
	-webkit-appearance: none;
	padding:0;
	float: left;
	text-align: center;
	border-radius:0;
}
.mobi_BuyTB .mobiCARD {
	display: none;
}

@media (max-width:1000px) {
	
	.BuyTB {
		background-image: url(./images/MB_Buy_BG.png);
		height: 100vh;
		background-position: top;
	}
	.BuyTB .showCARD {
	padding: 47px 0 0;
	width: 100%;
		
}
.BuyTB .showCARD .pic {
	width: 100%;
	padding: 4% 5%;
    background-size: 100%;
}
.BuyTB .showCARD .pic img{
	width: 98%;
	padding: 1%;
}
   .BuyTB .showCARD .txt {
	width: 90%;
	padding: 5% 5% 15%;
}
}
@media (max-width:480px) {

	.BuyTB .showCARD .picbl {
	width: 100%;
	padding: 20px 10px;
}
	.BuyTB .showCARD .picbl img{
	width: 100%;
}
	.BuyTB .showCARD .cardB  {
		width: 100%;
		display: block;
		font-weight: 600;
	}
}

@media (max-width:980px) {

	body {
	background-image: url("./images/MB_Buy_BG.png");
	background-position: top;
	background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
	}
.mobi_BuyTB {
	display: block;
	background-image: unset;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    position: absolute;
    width: 100%;
	height: 100vh;
	padding-bottom: 100%;
}
.mobi_Buy__ {
	position: relative;
	display: block;
	width: 90%;
    background-image: none;
	background-position: top;
    background-repeat: no-repeat;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	height: 100vh;
}
	
	
.mobi_BuyTB .info_link{
	width: 20%;
	height: 20px;
	margin-top: 510px;
	display: block;
	cursor: pointer;
	float: none;
}
.mobi_BuyTB .CARD_ {
	width: 50%;
	height: auto;
	padding-top: 10%;
	padding-left: 10%;
	float: none;
	position: relative;
	margin:0 auto;
}
	.mobi_BuyTB .CARD_ img {
		width: 100%;
	}
.mobi_BuyTB .quantity {
	position: relative;
	width: 100%;
	line-height: 60px;
	height: 60px;
	font-size: 60px;
	text-align: center;
	color: var(--pri04);
	font-family: "IP-EN-Bold";
	margin-left: 0;
}
.mobi_BuyTB .quantity .plus{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	right: 0;
	top: 8px;
}
.mobi_BuyTB .quantity .less{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	left: 0;
	top: 8px;
}

.mobi_BuyTB .last {
	position: relative;
	width: 100%;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	color: var(--pri04);
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin-left: 0;
}
.mobi_BuyTB .bt_mint {
	position: relative;
	width: 50%;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	margin-left: 25%;
}
	.mobi_BuyTB .bt_mint img {
		width: 100%;
	}
.mobi_BuyTB .bt_conn {
	position: relative;
	width: 50%;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	margin-left: 25%;
}
	.mobi_BuyTB .bt_conn img {
		width: 100%;
	}
.mobi_BuyTB .mobiCARD {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0 ;
	width: 100%;
}
	
.mobi_BuyTB .mobiCARD img {
		width: 100%;
	}

.mobi_BuyTB .mobiCARD_no {
	width: 200px;
	height: 60px;
	line-height: 60px;
	font-size: 22px;
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin-left: 10%;
	margin-top: 0;
	z-index: 0;
	position: relative;
}
.mobi_BuyTB .txt_color1{
	color: var(--pri05);
}
.mobi_BuyTB .txt_color2{
	color: var(--pri06);
}
.mobi_BuyTB .input_txt{
	border: 0px solid #000000;
	width: 20%;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 600;
	outline: none;
	letter-spacing: .04rem;
	-webkit-appearance: none;
	padding:0;
	float: left;
	text-align: center;
	border-radius:0;
}

	
}
@media (max-width:600px) {
.mobi_BuyTB .CARD_ {
	width: 80%;
}
}
@media (max-width:780px) {
	.mobi_Buy__ {
	height: 58vh;
}
}



 .blindCARD {
	position: relative;
	margin: 0 auto;
	padding: 47px 0 0;
	width: 992px;
	 height: auto;
	 clear: both;
}
.blindCARD .img {
	float: left;
}
.blindCARD_info {
	width: 40%;
	 float: left;
	 text-align: left;
	font-size: 20px;
	line-height: 30px;
	height: 440px;
	padding-top: 13%;
	padding-left: 5%;
}


@media (max-width:850px) {
	
	 .blindCARD {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 90%;
	 height: auto;
}
.blindCARD .img {
	float: none;
}
	.blindCARD .img img{
	width: 100%;
}
.blindCARD_info {
	width: 100%;
	float: none;
	text-align: center;
	font-size: 18px;
	height: 60px;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 25%;
}
	
}
	


.mobi_head,.mobi_TOP_BN,.hamburger_listOPEN,.mobi_RoadmapTOP_BN,.mobi_Roadmap_INFO{
	display: none;
}



@media (max-width:1320px) {
	
   .PC_head {
	display: none;
}
	
	
   .mobi_head{
	position: fixed; 
	width: 100%;
	transition: 1s; 
	z-index: 9999; 
	top: 0; 
	left: 0; 
	padding: 1rem 1rem 0;
	color: #ffffff;
	display: block;
     background-color: rgba(0, 0, 0, 0.4);

}

  .mobi_head .LOGO {
   float: left;
   width: 16%;
}
   .mobi_head .LOGO img {
	width: 100%;
	margin: .5rem 0;
}
	.mobi_connect_{
		display: block;
		border-radius:10px;
		background-color: var(--pri01);
		color: #00135F;
		font-family: "NB-Bold", "Helvetica";
		padding: 2px 10px;
		float: right;
		font-weight: 600;
		letter-spacing:0;
		font-size: 1.1rem;
		margin-top: .5rem;
	}
		.mobi_connect_ a {
			color: #00135F;
		}
	.hamburger {
		width: 3%;
		 float: left;
		margin-top: 0;
		z-index: 2;  
	}
	.hamburger img {
	   width: 100%;
	   margin: 10px ;
	}
	
	.hamburger_list {
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100%;
	padding-bottom: 200px;
	z-index: 999;	
	}
    
	.hamburger_listOPEN{
		font-family:"NB-Bold","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
		font-size: 24px;
	    margin-top: 30px;
		line-height: 40px;
	    font-weight: 700;
		color: #85e5ff;
		display: block;
		position: absolute;
		width: 90%;
		margin-top: 15%;
		margin-left: 10%;
		border-left: 1px solid #85e5ff;
		padding-left: 25px;
		z-index: 99;
	}
		.hamburger_listOPEN ul {
       margin:0;
	   padding: 0;
       list-style-type: none;
}

	.hamburger_listOPEN li {
	 display: block;
}
	.hamburger_listOPEN li a {
	color: #85e5ff;	
	}
	.hamburger_listOPEN .down {
	width: 180px;
    margin-bottom: 10px;
	padding: 10px
}
   .hamburger_listOPEN .down span{
	width: 100%;
	font-size: 20px;
	font-weight: 600;
	line-height: 40px;
	color: #FFF;
}
	.hamburger_listOPEN .down span a {
	color: #FFFFFF;	
	}
	
	.hamburger_listOPEN .line {
		margin-top: 30px;
	}
	
}


@media (max-width:920px) {
.RoadmapTOP_BN{
    display: none;
}
.mobi_RoadmapTOP_BN{
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    width: 100%;

}
.mobi_Roadmap_INFO {
	display: block;
    min-height: 100vh;
    width: 100%;
	margin: auto;
}
	.mobi_Roadmap_INFO img {
		width: 100%;
	}
}

@media (max-width:768px) {
	.TOP_BN{
	display: none;
	}
	
		
.mobi_TOP_BN{	
	display: block;
	background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
    position: absolute;
    width: 100%;
    height: 100vh;
    padding-bottom: 100%;
	margin-bottom: -100%;
}
 .mobi_head .LOGO {
   width: 30%;
}
	.mobi_connect_{
		font-size: 1rem;
		margin-top: 0rem;
	}
.hamburger {
		width: 6%;
	}
	
	
	.Footer .copyright {
	line-height: 1rem;
	font-size: 12px;
}
	.hamburger_listOPEN{
		margin-top: 25%;
	}
}



/*******FAQ******/

.FAQforNFT {
	width: 60%;
	margin: 40px auto;
	font-size: 18px;
	line-height: 28px;
}
	.FAQforNFT h4 {
		color: var(--pri02);
		margin: 140px 0 40px 0;
		line-height: 45px;
	}
.FAQforNFT ul {
	list-style-type: disc;
}

.FAQforNFT li {
	padding: 10px 0;
}
.FAQforNFT li .img1 {
	width: 100%;
	padding: 20px 0;
}
.FAQforNFT li .img1 img {
	width: 100%;
	display: block;
}

.FAQforNFT li .img2 {
	width: 100%;
	padding: 20px;
}
.FAQforNFT li .img2 img {
	display: block;
}
.FAQforNFT li:nth-child(2n) {
	color: var(--pri06);
}
.FAQforNFT li:nth-child(2n-1) {
	color: var(--pri05);
}

@media (max-width:400px) {
.FAQforNFT {
	width: 80%;
}
.FAQforNFT li .img2 {
	width: 100%;
	margin: 20px 0;
}
.FAQforNFT li .img2 img {
	width: 90%;
}
}



/*****賦能啟用******/


.OP_card_ {
	flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.OP_card_TIT {
	width: 974px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 140px;
}

.OP_card_ .ConnectWallet {
	position: relative;
	width: 400px;
	margin: auto;
	text-align: center;
	padding-top: 40px;
}
.OP_card_  .ConnectWallet img {
	
}

.btn_search {
    position: relative;
    width: 600px;
    margin: 20px auto;
    text-align: center;
}
.btn_search img {
	width: auto;
}

.btn_search input {
	width: 100%;
	text-align: center;
	padding: 30px;
	color: #FFFFFF;
	font-size: 26px;
	font-weight: 600;
}
.btn_search input[type=text] {
	margin: 0 auto 20px;
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
}
.btn_search ::placeholder {
   color: #FFFFFF;
   padding: 40px;
   font-weight: 600;
   font-size: 26px;
}

.OP_card_ .info_link{
	width: 20%;
	height: 20px;
	margin-top: 510px;
	display: block;
	cursor: pointer;
	float: left;
}
/*
.OP_card_ .CARD_ {
	width: 49%;
	height: 590px;
	padding-top: 110px;
	padding-left: 78px;
	float: left;
}

.OP_card_ .quantity {
	position: relative;
	width: 222px;
	line-height: 60px;
	height: 60px;
	font-size: 60px;
	text-align: center;
	color: var(--pri04);
	font-family: "IP-EN-Bold";
	margin-left: 64px;
}
.OP_card_ .quantity .plus{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	right: 0;
	top: 8px;
}
.OP_card_ .quantity .less{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	left: 0;
	top: 8px;
}

.OP_card_ .last {
	position: relative;
	width: 222px;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	color: var(--pri04);
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin-left: 64px;
}
.OP_card_ .bt_mint {
	position: relative;
	width: 222px;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	margin-left: 64px;
}
*/


.OP_card_ .bt_conn {
	padding: 10px;
}
.OP_card_ .showCARD {
	position: relative;
	margin: 0 auto;
	padding: 47px 0 0;
	width: 992px;
}


.OP_card_ .showCARD h4 {
	font-family:"NB-Bold","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	color: var(--pri02);
	text-align: center;
	font-weight: 700;
}
.OP_card_ .showCARD ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
}
.OP_card_ .showCARD li {
	font-size: 16px;
	line-height: 26px;
	margin: 40px 0 60px;
	clear: both;
}
.OP_card_ .showCARD li:nth-child(2n) {
	color: var(--pri06);
}
.OP_card_ .showCARD li:nth-child(2n-1) {
	color: var(--pri05);
}

.OP_card_ .NEW_bnt {
	width: 70%;
	margin: 0 auto;
	text-align: left;
}

.OP_card_ .showCARD .pic,.OP_card_ .showCARD .picbl {
	width: 50%;
	display: block;
	float: left;
	background-position: top;
    background-repeat: no-repeat;
	padding: 20px 40px;
	text-align: center;
}
.OP_card_ .showCARD .pic .img {
	width: 100%;
}

.OP_card_ .showCARD .pic .kiin {
	margin:50px  auto 30px;
}

.OP_card_ .showCARD .cardNAME {
	width: 100%;
	line-height: 30px;
	height: 30px;
	font-family: "IP-EN";
	font-size: 20px;
}
.OP_card_ .showCARD .cardB {
    font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	font-size: 22px;
	margin-right: 10px;
	font-weight: 600;
}
.OP_card_ .showCARD .txt {
	margin-left: 5%;
	padding-bottom: 40px;
	float: left;
	width: 45%;
}
.OP_card_ .showCARD .txtbl {
	padding-top: 15%;
}

.OP_card_ .input_txt{
	border: 0px solid #000000;
	width: 20%;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 600;
	outline: none;
	letter-spacing: .04rem;
	-webkit-appearance: none;
	padding:0;
	float: left;
	text-align: center;
	border-radius:0;
}
.mobi_OP_card_ .mobiCARD {
	display: none;
}

.Search_TIT {
	width: 665px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-top: 140px;
	z-index: 2;
}

@media (max-width:1000px) {
	
	.OP_card_ {
      
	}
	.OP_card_ .showCARD {
	padding: 47px 0 0;
	width: 100%;
		
}
	.OP_card_ .showCARD .pic {
	width: 100%;
	padding: 4% 5%;
    background-size: 100%;
}
	.OP_card_ .showCARD .pic .img {
	width: 98%;
	margin: 0 1%;	
}

	
   .OP_card_ .showCARD .txt {
	width: 90%;
	padding: 5% 5% 15%;
}
}
@media (max-width:480px) {
	.OP_card_ .showCARD .pic {
	background-size: 100%;
	padding: 20px 10px;
}
	.OP_card_ .showCARD .pic .img {
	width: 90%;
}
	
	.OP_card_ .showCARD .picbl {
	width: 100%;
	padding: 20px 10px;
}
	.OP_card_ .showCARD .picbl img{
	width: 100%;
}
	.OP_card_ .showCARD .cardB  {
		width: 100%;
		display: block;
		font-weight: 600;
	}
}
     
.mobiSearch__ {
		display: none;
	}

@media (max-width:980px) {

	
    .OP_card_TIT {
	   width: 90%;
     }
	.OP_card_TIT img {
		width: 100%;
	}
	
	
	

	
	
	
	
 
	.Search_TIT  {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
	.Search_TIT img {
		width: 100%;
	}
	
	.btn_search {
    position: relative;
    width:80%;
    margin: 20px auto;
    }

   .btn_search img {
	width: 70%;
	margin: 0 auto;   
    }
	
	.btn_search input {
	font-size: 18px;
    }
	
	.btn_search ::placeholder {
    font-size: 18px;
	padding: 40px 20px;	
    }
	.Search__ {
		display: none;
	}
	.mobiSearch__{
	z-index: 1;	
	display: block;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 90%;
    overflow: hidden;
	height: 100vh;
    position: absolute;
    width: 100%;

}
.mobi_OP_card_ {
    display: block;
	background-image: unset;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    width: 100%;
	height: 100vh;
	padding-bottom: 100%;
	padding-top: 40px;
}

.mobi_OP_card_ .info_link{
	width: 20%;
	height: 20px;
	margin-top: 510px;
	display: block;
	cursor: pointer;
	float: none;
}
.mobi_OP_card_ .CARD_ {
	width: 90%;
	height: auto;
	padding-top: 10%;
	padding-left: 10%;
	float: none;
	position: relative;
}
	.mobi_OP_card_ .CARD_ img {
		width: 100%;
	}
.mobi_OP_card_ .quantity {
	position: relative;
	width: 100%;
	line-height: 60px;
	height: 60px;
	font-size: 60px;
	text-align: center;
	color: var(--pri04);
	font-family: "IP-EN-Bold";
	margin-left: 0;
}
.mobi_OP_card_ .quantity .plus{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	right: 0;
	top: 8px;
}
.mobi_OP_card_ .quantity .less{
	width: 42px;
	height: 42px;
	display: block;
	position: absolute;
	left: 0;
	top: 8px;
}

.mobi_OP_card_ .last {
	position: relative;
	width: 100%;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	color: var(--pri04);
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin-left: 0;
}
.mobi_OP_card_ .bt_mint {
	position: relative;
	width: 50%;
	line-height: 60px;
	height: 60px;
	font-size: 18px;
	text-align: center;
	margin-left: 25%;
}
	.mobi_OP_card_ .bt_mint img {
		width: 100%;
	}
.mobi_OP_card_ .bt_conn {
	position: relative;
	line-height: 60px;
	text-align: center;
	margin-left: 15%;
	width: 50%;
}
	.mobi_OP_card_ .bt_conn img {
		width: 100%;
	}
.mobi_OP_card_ .mobiCARD {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 0 ;
	width: 100%;
}
	
.mobi_OP_card_ .mobiCARD img {
		width: 100%;
	}

.mobi_OP_card_ .mobiCARD_no {
	width: 200px;
	height: 60px;
	line-height: 60px;
	font-size: 22px;
	font-family: "YanoneRegular", "Roboto","IP-EN";
	margin-left: 10%;
	margin-top: 0;
	z-index: 0;
	position: relative;
}
.mobi_OP_card_ .txt_color1{
	color: var(--pri05);
}
.mobi_OP_card_ .txt_color2{
	color: var(--pri06);
}
.mobi_OP_card_ .input_txt{
	border: 0px solid #000000;
	width: 20%;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 600;
	outline: none;
	letter-spacing: .04rem;
	-webkit-appearance: none;
	padding:0;
	float: left;
	text-align: center;
	border-radius:0;
}
}




	
	
	/******交換建設卡*******/
	
	
.Change_card_ {
	flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%;
	display: flex;
}

.Change_card_TIT {
	width: 974px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 140px;
}
.Change_card_ .Notice {
	color: #FFFFFF;
	margin: 0 20px;
}
.Change_card_ .ConnectWallet {
	position: relative;
	width: 400px;
	margin: auto;
	text-align: center;
	padding-top: 40px;
}


.Change_card_ .bt_conn {
	width: 60%;
	margin: 20px auto 0;
}
.Change_card_ .bt_conn img {
	width: 100%;
}
.Change_card_ .showCARD {
	position: relative;
	margin: 0 auto;
	padding: 147px 0 0;
	width: 100%;
}


.Change_card_ .showCARD h4 {
	font-family: "NB-Bold","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	color: var(--pri02);
	text-align: center;
	font-weight: 700;
}
.Change_card_ .showCARD ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	width: 100%;
}
.Change_card_ .showCARD li {
	font-size: 16px;
	line-height: 26px;
	margin: 40px .5%;
	float: left;
	width: 24%;
}
.Change_card_ .showCARD li:nth-child(2n) {
	color: var(--pri06);
}
.Change_card_ .showCARD li:nth-child(2n-1) {
	color: var(--pri05);
}

.Change_card_ .NEW_bnt {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.Change_card_ .showCARD .pic,.Change_card_ .showCARD .picbl {
	width: 100%;
	display: block;
	float: left;
	background-position: top;
    background-repeat: no-repeat;
	background-size:contain;
	padding: 20px 25px;
	text-align: center;
}
.Change_card_ .showCARD .pic .img {
	width: 100%;
	display: block;
}

.Change_card_ .showCARD .kiin {
	width: 100%;
	margin:30px 0 0;
	font-size: 18px;
	text-align: center;
	font-weight: 600;
}

.Change_card_ .showCARD .cardNAME {
	width: 100%;
	line-height: 30px;
	font-family: "IP-EN";
	font-size: 16px;
	margin-top: 40px;
	text-align: center;
}
.Change_card_ .showCARD .cardB {
    font-family: "NB-Bold","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.Change_card_ .showCARD .txt {
	width: 100%;
}
.Change_card_ .showCARD .txtbl {
	padding-top: 15%;
}

.Change_card_ .input_txt{
	border: 0px solid #000000;
	width: 20%;
	height: 3rem;
	font-size: 2.2rem;
	font-weight: 600;
	outline: none;
	letter-spacing: .04rem;
	-webkit-appearance: none;
	padding:0;
	float: left;
	text-align: center;
	border-radius:0;
}	
	
	
	
@media (max-width:1000px) {
	
	.Change_card_ .showCARD {
	padding: 100px 0 0;
	width: 100%;
		
}
	.Change_card_ .showCARD .pic {
	width: 100%;
	padding: 4% 5%;
    background-size: 100%;
}

}


@media (max-width:980px) {
	
 .Change_card_ .showCARD li {
	  width: 49%;
      margin: 20px .5%;
}
.Change_card_ .showCARD .kiin {
	margin:30px 0 40px;
}	
}

@media (max-width:480px) {
	
	 .Change_card_ .showCARD li {
	  width: 80%;
      margin: 20px 10%;
}
	.Change_card_ .bt_conn {
	width: 70%;
}
}
     
	

/*********升級********/

.UPselect {
	width: 30%;
	margin: 20px auto;
	color: #FFFFFF;
	text-align: center;
}
.UPselect .tip {
	font-size: 22px;
	line-height: 50px;
	height: 50px;
	font-weight: 600;
	margin-top: 20px;
	color: var(--pri02);
}
.UPselect .point {
	font-size: 30px;
	line-height: 50px;
	color: var(--pri02);
	font-weight: 600;
	margin-top: 20px;
}
.UPselect select {
	width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 26px;
    font-weight: 600;
	background-image: url("./images/selectBG.png");
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain;
}
.UPselect option {
	background-color: #000000;
}

.confirmUP {
	width: 100%;
	text-align: center;
	padding: 40px 30px;
}
.confirmUP img {
	margin: 0 5px;
}

@media (max-width:1050px) {
.UPselect {
	width: 60%;
}
}
@media (max-width:480px) {
	.UPselect {
	width: 80%;
}
	.confirmUP {
	padding: 40px 10px;
}
	.confirmUP img {
	width: 80%;
    margin: 0 auto;
}
}


/*********獎勵池********/


.BOnus {
	width: 100%;
	margin: 20px auto;
	color: #FFFFFF;
	text-align: center;
}
.BOnus .tip {
	font-size: 22px;
	line-height: 50px;
	height: 50px;
	font-weight: 600;
	margin-top: 20px;
}
.BOnus .tip2 {
	font-size: 18px;
	line-height: 30px;
	height: 50px;
	font-weight: 500;
	margin-top: 20px;
}
.BOnus .tip3 {
	font-size: 16px;
	line-height: 20px;
	height: 30px;
	margin-top: 20px;
	color: #B9B9B9;
}
.BOnus .point {
	font-size: 36px;
	line-height: 50px;
	color: var(--pri02);
	font-weight: 600;
	margin-top: 20px;
}

.BOnus input,.BOnus input[type=text]{
	background-color: #FFFFFF;
	width: 400px;
}

 .BOnusbt_conn {
	width: 45%;
	margin: 20px auto 0;
}
.BOnusbt_conn img {
	width: 100%;
}
 .BOnusbt_conn2 {
	width: 46%;
	margin: 20px 1% 0;
    float: left;
}
.BOnusbt_conn2 img {
	width: 100%;
}

.BOnus_type {
	width: 100%;
	padding: 20px 10%;
	min-height: inherit;
	position: relative;
	background-color: rgba(0, 0, 0, 0.4);
	display: block;
	margin-bottom: 30px;
}

.BOnus_type::after {
	content: "";
	display: block;
	clear: both;
}
.BOnus_type .Star {
	display: block;
	float: left;
	width: 25%;
	text-align: center;
	padding-bottom: 20px;
}
.BOnus_type .tip {
	font-size: 18px;
	color: var(--pri05);
	line-height: 36px;
	font-weight: 500;
}
.BOnus_type .tip2 {
	font-size: 16px;
	color: var(--pri07);
	line-height: 30px;
}

.BOnus_type .Star img {
	width: 50%;
	margin: 5%;
}



.BOnus .tableTITLE {
	border-bottom: 1px solid #85e5ff;
	width: 40%;
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	margin: auto;
	height: 26px;
	line-height: 26px;
}
.BOnus table {
	width: 40%;
	margin: auto;
}
.BOnus .TITtr{
	color: #210a4f;
	font-weight: 600;
}
.BOnus .INFOtr{
	background-color: #210a4f;
}
.BOnus td {
	width: 33%;
	line-height: 26px;
	text-align: center;
	padding: 6px;
	border-bottom: 1px solid #85e5ff;
	border-right: 1px solid #85e5ff;
}
.BOnus td:nth-child(0n+1){
	border-left: 1px solid #85e5ff;
}







@media (max-width:980px) {
	.BOnus_type .Star {
	width: 50%;
}
	.BOnus input,.BOnus input[type=text]{
	width: 60%;
}
}
@media (max-width:700px) {
	.BOnus .tableTITLE {
	width: 70%;
}
.BOnus table {
	width: 70%;
}
}
@media (max-width:480px) {
 .BOnus {
	width: 80%;
}
	.BOnus_type {
	padding: 10px;
}
		.BOnus .tableTITLE {
	width: 90%;
}
.BOnus table {
	width: 90%;
}
}
@media (max-width:400px) {
	.BOnus_type .Star {
	width: 100%;
}
}



/*!
 * Bootoast CSS
 * @author odahcam
 * @version 1.0.0
 **/

.bootoast {
    opacity: 0;
    filter: alpha(opacity=0)
}

.bootoast>.glyphicon {
    display: inline-block;
    float: left;
    font-size: 20px;
    margin-right: 5px;
}

.bootoast>.bootoast-alert-container {
    display: block;
    max-width: 100%;
    overflow: auto;
}

.bootoast>.bootoast-alert-container>.bootoast-alert-content {
    display: table;
    width: 100%;
    height: 100%;
	overflow: hidden;
	line-height: 18px;
	padding-left: 20px;
}

.bootoast-container {
    position: fixed;
    left: 20px;
    right: 0;
    top: initial;
    bottom: initial;
    width: 300px;
    max-width: 95%;
    z-index: 2060;
	background-color:  var(--pri05);
	border-radius:5px;
	padding: 10px;
	
}

.bootoast-container.right {
    left: initial;
	top: 100px;
}

.bootoast-container.center {
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%)
}

.bootoast-container .close {
	border-radius:10px;
	padding: 1px 6px 2px 6px;
	color: #000;
	background-color: var(--pri04);
	width: 20px;
	height: 20px;
	display: block;
	cursor: pointer;
	position: absolute;
	left: -10px;
	top:-6px;
	font-weight: 600;
}

.bootoast-container h6 {
	color: #1C345F;
	font-weight: 600;
	font-size: 20px;
	line-height: 18px;
	height: 20px;
}
@charset "utf-8";
/* 基本定義 */
*{-webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased; margin:0; padding:0; }
pre{white-space: pre-wrap;}
img{border:0; -ms-interpolation-mode: bicubic;}
a, a:link, a:visited, a:active, a:hover, area {text-decoration: none; cursor:pointer; }
table { width:auto; border-collapse: collapse; border-spacing: 0; }
.clear{ clear:both;}
:focus {outline: 0;}

/* htmleditor recover 
.htmlEditor 為頁面用html編輯器顯示的區塊
.cke_editable 為html編輯器的div class
*/
.htmlEditor .cke_inner,
.htmlEditor .cke_wysiwyg_frame, 
.htmlEditor .cke_wysiwyg_div{ background-color:transparent;}
		
.htmlEditor ul, .htmlEditor ol, 
.cke_editable ul, .cke_editable ol{ padding-left:30px;}
.htmlEditor img{ max-width:100%;}

/* 環境錯誤提示 */
.messagebox.alert{
	width:100%;padding:8px 0;background-color:#c00;color:#FFF;font-size:14px;
	font-family:Arial, Helvetica, "微軟正黑體", "新細明體", 'Microsoft JhengHei', 'LiHei Pro', sans-serif;
	display:none;text-align:left;
	position:absolute;*position:relative;top:0;z-index:999999;
	-moz-box-shadow:2px 2px 2px rgba(0,0,0,.4);-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);box-shadow:2px 2px 2px rgba(0,0,0,.4);
}
.messagebox.alert .closemessagebox{float:right;margin-right:20px;display:block;cursor:pointer;}
.messagebox.alert .closemessagebox::after{ content:"關閉繼續瀏覽"; display:inline-block; margin-left:5px;}
.messagebox.alert .sorry{margin-left:20px;}
.messagebox.alert .note{margin-top:5px; padding:3px;}
@media screen and (max-width: 640px) {
	.messagebox.alert{font-size:24px;}
	.messagebox.alert .closemessagebox::after{ content:"關閉";}
}
/* 行動裝置非預設瀏覽器提示*/
.mbk{ width:100%; height:100%; background:rgba(0,0,0,.8)  no-repeat center; position:fixed; top:0; left:0; z-index:99999;}

/* 參考樣板， 瀏覽器分類(css hack) */
/* 順序為FF IE8(後面加\9) IE7(前面加*) IE6(前面加_) 專用，順序不能改變 */
.hack {
	background:orange;
	background:red \9;
	*background:green;
	_background:blue; 
}                 
@media all and (min-width:0px){
/* Opera、Safari 、Chrome專用 */
    .hack {background:orange;}
}
/* 反白顏色(FF需另外定義'::-moz-selection') */
::selection {background:rgba(0,0,0,.4); color:#FFF;}
::-moz-selection {background:rgba(0,0,0,.4); color:#FFF;}

/* 單行文字超出範圍出現... */
.sampleOverflow{white-space: nowrap; overflow: hidden; text-overflow : ellipsis;}

/* scrollbar隱藏 */
.sampleHiddenScroll{height: 300px; overflow: -moz-scrollbars-none; overflow-y: auto; overflow-x:none;}
.sampleHiddenScroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; }


/* 中文字體sample,英文字在前 
/*@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css); webfont Noto Sans 思源黑體 */
.samplechinesetext{font-family: Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", "新細明體", 'Microsoft JhengHei',  sans-serif;}

/* 預設輸入文字，placeholder需要個別設定樣式否則無效 */
::placeholder{ color: #333; }
::-webkit-input-placeholder { color: #333;}
:-moz-placeholder { color: #333;}
:-ms-input-placeholder { color: #333;}

/* 圓角 */
.sampleroundborder{
	border-radius: 5px;
	/*依序為：左上角、右上角、右下角、左下角*/
	border-radius: 15px 0px 15px 0px;
}
/* 陰影 box-shadow: x y blur spread color inset */
.sampleshadow{ box-shadow: 2px 2px 2px rgba(0,0,0,.4); }

/* 背景透明模糊 */
.sampleBGopacity { background-color: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}

/* 文字遮罩 */
.sampleTextMask{ font-size: 36px; font-weight: 900; background-image: var(--gradient01); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone;}
/* 漸層 http://www.colorzilla.com/gradient-editor/ */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&subset=chinese-traditional');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&subset=chinese-traditional');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp'); /* Google Material icons */


/* 設定CSS變數 */
:root{    
    --pri01:#85e5ff;
    --pri02:#fff665;
    --pri03:#FFCEC7; /* 255,206,199   */
    --pri04:#FFFFFF;
    --pri05:#feffe0; /*淺黃*/
    --pri06:#d8f6fe; /*淺藍*/
    --pri07:#d4d4d4; /*灰*/
    --pri08:#A81B04; /*紅*/
    
    --gold:#D6AE3C; /* 金 */
    --silver:#9CA3AA; /* 銀 */
    --copper:#AC6C28; /* 銅 */
    
    --gradient01: linear-gradient(-90deg, #abedff 0%, #b8ebea 30%, #ffb06b 80%, #ff9a69 100%); /* 首頁大標題 漸層 */
    --gradient02: linear-gradient(-180deg, #96e3f9 44%, #bae3c0 66%, #f8dfc3 100%); /* connect wallet按鈕漸層 */
    --gradient03: linear-gradient(90deg, #a6b6c4 0%, #dfb1a5 33%, #e8c9cb 66%, #d6e1df 100%); /* footer line */
    --gradient04: linear-gradient(-45deg, #fbccca 0%, #fae8dc 100%); /* index block */
    --gradient_top:linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); /* top 黑到透明漸層 */
    --gradient_btm:linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); /* bottom 黑到透明漸層 */
    --gradient_tabtm:linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 30%); /* tab bottom 黑到透明漸層 */
    --gradient_btm_white:linear-gradient(0deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); /* bottom 白到透明漸層 */
    --gradient_tab:linear-gradient(-90deg, rgba(255,206,199, 0.7) 0%, rgba(255,206,199, 0) 100%); /* bottom 白到透明漸層 */
    --gradient_card: linear-gradient(-45deg, #9CA3AA 0%, #d0d6dc 50%); /* 銀卡 */
    
    --frame:20px 0 20px 0;
    --frameS:14px 0 14px 0;
    
}

/* Google Material icons */
.form .tablebox ul.selected::before,
.resultlist .live li.s1 a::before,
a.bUI::after,
.live .liveList .item li::after,
.index .block.live .item li::after,
a.btn::after,
nav a::after,
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before,
.UI::before,
.micons {
/*    font-family: 'Material Icons';*/
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
/*    line-height: 1;*/
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    /*  transition:font-size .5s;*/
    vertical-align: middle;
/*    margin-right: 5px;*/
}

/* https://fonts.google.com/icons?selected=Material+Icons */
.UI.add::before {content: 'add';}
.UI.addvalue::before {content: 'savings';}
.UI.addshop::before {content: 'add_shopping_cart';}
.UI.addbox::before {content: 'addbox'; }
.UI.app::before {content: 'stay_current_portrait';}
.UI.alerts::before {content: 'notifications_active';}
.UI.alert.off::before {content: 'volume_off';}
.UI.allon::before {content: 'keyboard_arrow_down';}
.UI.alloff::before {content: 'keyboard_arrow_up';}
.UI.amber::before {content: 'warning_amber';}
.UI.award::before {content: 'emoji_events';}
/* workspace_premium */
.UI.back::before {content: 'keyboard_arrow_left';}
.UI.block::before {content: 'view_module';}
.UI.builder::before {content: 'query_builder';}
.UI.cam::before {content: 'videocam';}
.UI.camera::before {content: 'photo_camera';}
.UI.category::before {content: 'web_asset';}
.UI.clear::before {content: 'clear';}
.UI.confirm::before {content: 'done';}
.UI.connect::before {content: 'settings_input_antenna';}
.UI.chat::before {content: 'chat_bubble_outline';}
.UI.check::before {content: 'check_box_outline_blank';}
.UI.check.on::before {content: 'check_box';}
.UI.close::before {content: 'close';}
.UI.detail::before {content: 'library_books';}
.UI.delete::before {content: 'delete';}
.UI.deep::before {content: 'vertical_align_bottom';}
.UI.down::before {content: 'keyboard_arrow_down';}
.UI.edit::before {content: 'edit';}
.UI.earthqk::before {content: 'graphic_eq';}
.UI.eco::before {content: 'eco';}
.UI.event::before {content: 'calendar_today';}
.UI.eye::before {content: 'visibility';}
.UI.eye.off::before {content: 'visibility_off';}
.UI.exchange::before {content: 'local_mall';}
.UI.export::before {content: 'ios_share';}
.UI.face::before {content: 'face';}
.UI.first::before {content: 'first_page';}
.UI.fence::before {content: 'fence';}
.UI.flare::before {content: 'flare';}
/*.UI.focus::before {content: 'gps_not_fixed';}*/
.UI.favi::before {content: 'bookmark';}
.UI.fullscreen::before {content: 'fullscreen';}
.UI.fullscreen.off::before {content: 'fullscreen_exit';}
.UI.gift::before {content: 'redeem';}
.UI.height::before {content: 'unfold_more';}
.UI.home::before {content: 'home';}
.UI.info::before {content: 'info';}
.UI.label::before {content: 'label';}
.UI.link::before {content: 'link';}
.UI.live::before {content: 'videocam';}
.UI.like::before {content: 'favorite_border';}
.UI.like.ed::before {content: 'favorite';}
.UI.tracker::before {content: 'favorite';}
.UI.locate::before {content: 'place';}
.UI.logout::before {content: 'exit_to_app';}
.UI.layer::before {content: 'layers';}
.UI.last::before {content: 'last_page';}
.UI.menu::before {content: 'menu';}
.UI.menu.off::before {content: 'close';}
.UI.min::before {content: 'remove';}
.UI.mini::before {content: 'south_east';}
.UI.money::before {content: 'monetization_on';}
.UI.mode::before {content: 'brightness_4';}
.UI.move::before {content: 'open_with';}
.UI.model::before {content: 'dashboard';}
.UI.member::before {content: 'account_circle';}
.UI.messagelist::before {content: 'speaker_notes';}
.UI.name::before {content: 'verified_user';}
.UI.next::before {content: 'keyboard_arrow_right';}
.UI.news::before {content: 'assistant';}
.UI.nsreport::before {content: 'assignment';}
.UI.normalscreen::before {content: 'fullscreen_exit';}
.UI.notify::before {content: 'chat_bubble';}
.UI.online::before {content: 'link';}
.UI.order::before {content: 'plagiarism';}
.UI.offline::before {content: 'link_off';}
/* .UI.paid::before {content: 'paid';} */
.UI.paid::before {content: 'local_mall';}
.UI.pen::before {content: 'brush';}
.UI.play::before {content: 'play_arrow';}
.UI.prev::before {content: 'keyboard_arrow_left';}
.UI.pause::before {content: 'pause';}
.UI.passwd::before {content: 'auto_fix_high';}
.UI.point::before {content: 'paid';}
.UI.quake::before {content: 'wifi_tethering';}
.UI.quote::before {content: 'format_quote';}
.UI.reload::before {content: 'replay';}
.UI.reset::before {content: 'restore';}
.UI.ruler::before {content: 'square_foot';}
.UI.record::before {content: 'assignment';}
.UI.report::before {content: 'feedback';}
.UI.share::before {content: 'share';}
.UI.shop::before {content: 'local_mall';}
.UI.search::before {content: 'search';}
.UI.save::before {content: 'save';}
.UI.send::before {content: 'send';}
.UI.setting::before {content: 'settings';}
.UI.sitemap::before {content: 'account_tree';}
.UI.stars::before {content: 'stars';}
.UI.tagpulldown::before {content: 'keyboard_arrow_up';}
.UI.tagpulldown.close::before {content: 'keyboard_arrow_down';}
.UI.template::before {content: 'web';}
.UI.temperature::before {content: 'network_check';}
.UI.time::before {content: 'access_time';}
.UI.view::before {content: 'visibility';}
.UI.water::before {content: 'opacity';}
.UI.waring::before {content: 'error_outline';}
.UI.wave::before {content: 'waves';}
.UI.webapp::before {content: 'important_devices';}
.UI.width::before {content: 'unfold_more'; transform: rotate(90deg);}
.UI.warning::before {content: 'report_problem';}
.UI.zoom::before {content: 'fit_screen';}





/* init CSS 
*, *::before, *::after{ box-sizing: border-box;}
a, *::before, *::after{ display: inline-block;}*/

html, body{ width:100%; height: -webkit-fill-available; /*height:100%; 有需要再打開 */}
body{font-family: Lato, Arial, Helvetica, 'LiHei Pro', 'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; font-weight: 300; min-height: 100vh;}
ul, li, dl, dd, dt{ margin: 0; padding: 0; list-style: none;}

header{}
footer{}

.bodybox{overflow:hidden; min-height:100vh; position: relative;}
.mainContent {min-height:100%;}

.svg-icon{width: 30px; height: 30px; background: url(./images/ui/icon.svg) no-repeat -30px -30px; background-size: 1000%;}

/* mobile menu */
a.mobilemenu,
a.mobilemenu > span{ display:none;}

a.mobilemenu{ width:44px; height:44px; border-radius: 50px; padding:0; position:absolute; top:14px; right:10px;}
/*a.mobilemenu:hover{ background-color:rgba(145, 145, 145, 0.8);}*/

a.mobilemenu b, 
a.mobilemenu b::before, 
a.mobilemenu b::after{ content:""; display:block; width:22px; border-bottom:solid 2px #FFF; position:absolute; left:50%; margin-left:-11px; top:50%; margin-top:-1px; transition: all .5s;}
a.mobilemenu b::before{ margin-top:-7px;}
a.mobilemenu b::after{ margin-top:7px;}

body.MobileMenuOn a.mobilemenu b{width:0px; margin-left:0;}
body.MobileMenuOn a.mobilemenu b::before{
	margin-top:0;
	transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);}
body.MobileMenuOn a.mobilemenu b::after{
	margin-top:0; 
	transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);}

/* 共用style */
h1,h2,h3,h4,h5,h6{font-weight:normal; font-family: Lato, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; transition:font-size .5s;}
h1{font-size:64px;}
h2{font-size:56px;}
h3{font-size:48px;}
h4{font-size:40px;}
h5{font-size:32px;}
h6{font-size:24px;}

/* a.btn設定 */
a.btn{padding:8px 20px; background-color:var(--pri01); font-size: 18px; letter-spacing: 2px; color:#FFF; transition:.5s; border-radius: 50px;}
a.btn.disable{ background-color: var(--pri05); color: #FFF; pointer-events: none;}
a.btn:hover{ background-color:var(--pri07);}

a.btn.small{ font-size: 14px; padding: 5px 8px;}
a.btn.small::before,
a.btn.small::after{ font-size: 20px; vertical-align: bottom;}
a.btn.Large{ font-size: 26px; padding: 10px 45px; letter-spacing: 5px;}
a.btn.Large::before,
a.btn.Large::after{ font-size: 30px; vertical-align: bottom; margin-right: 5px;}

.btnbox{ display: inline-block; width: 100%; text-align: center;}

.btngroup{ display: inline-block; font-size: 0;}
.btngroup a.btn{ border-radius: 0; border-right: 1px solid #FFF; padding: 10px 25px; margin: 0; font-size: 18px;}
.btngroup a.btn:first-child{ border-top-left-radius: 50px; border-bottom-left-radius: 50px; padding-left: 40px; }
.btngroup a.btn:last-child{ border-top-right-radius: 50px; border-bottom-right-radius: 50px; border-right: none; padding-right: 40px;}
.btngroup.Large a.btn{ font-size: 26px; letter-spacing: 5px; padding: 14px 40px; }
.btngroup.Large a.btn:first-child{padding-left: 50px;}
.btngroup.Large a.btn:last-child{padding-right: 50px;}

a.indexbtn{padding: 10px 20px; color: #FFF; border: 2px solid #FFF; border-radius: 50px; position: relative; transition: .3s; font-size: 18px; letter-spacing: 2px;}
a.indexbtn::after{content: ''; width: 20px; height: 7px; border-top: 2px solid #FFF; display: inline-block; margin: 0 0 0 10px; transition: .5s;}
a.indexbtn::before{content: ''; width: 10px; height: 10px; border-top: 2px solid #FFF; display: inline-block; position: absolute; top: 16px; right: 22px; transform: rotate(45deg); transition: .5s;}
a.indexbtn:hover::after{width: 50px;}
a.indexbtn:hover{ border-color: var(--pri04); color: var(--pri04);}
a.indexbtn:hover::after, a.indexbtn:hover::before{border-color: var(--pri04);}
a.indexbtn.bk{ border-color: #333; color: #333;}
a.indexbtn.bk::after, a.indexbtn.bk::before{border-color: #333;}
a.indexbtn.bk:hover{ border-color: var(--pri07); color: var(--pri07);}
a.indexbtn.bk:hover::after, a.indexbtn.bk:hover::before{border-color: var(--pri07);}

/* tablebox */
div.tablebox{ display: table;}
div.tablebox > ul{ display: table-row;}
div.tablebox > ul > li{ display:table-cell;}

/* html編輯器 style */
.htmleditor img{ max-width: 100%;}
.htmleditor h1 img{ width: 100%;}
.htmleditor h1{ font-size: 29px;}
.htmleditor h2{ font-size: 24px;}
.htmleditor h3{ font-size: 22px;}
.htmleditor h4{ font-size: 20px;}
.htmleditor h5{ font-size: 18px;}
.htmleditor h6{ font-size: 14px;}
.htmleditor strong{ font-weight: 700;}
.htmleditor pre{}
.htmleditor address{}
.htmleditor blockquote{}
.htmleditor ol li{margin-left: 1em; list-style: decimal;}
.htmleditor ul li{margin-left: 1em; list-style: disc;}



/* 表單樣式 IE,Edge 部分無效 */
textarea{resize: none;}
input,
button,
textarea,
select,
input[type=checkbox]+Label,
input[type=radio]+Label{ font-size:18px; font-family: Lato, Arial, Helvetica, 'Noto Sans TC', 'LiHei Pro', "微軟正黑體", "新細明體", 'Microsoft JhengHei',  sans-serif; font-weight: 300;display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; outline:0 none;}

input[type=range],
input[type=text],
input[type=password],
input[type=file],
input[type=number],
input[type=url],
input[type=email],
input[type=tel],
input[list],
input[type=button],
input[type=submit],
button,
textarea,
select,
output{ border: none; border:3px solid #FFFFFF; color: #FFFFFF; background-color: transparent; padding:6px 10px; vertical-align:middle; border-radius: 20px;margin: 5px;}

input[type=range]{ overflow: hidden; background: none;}
/*input[type=range]::-webkit-slider-runnable-track{ background-color: #eee;}*/
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative; width:10px; height:10px; background-color:#333; border-radius:50%; transition:.2s;
}
input[type=range]::-webkit-slider-thumb::before,
input[type=range]::-webkit-slider-thumb::after{ content:""; display: block; position: absolute; top: 3px; width: 2000px; height: 4px;  pointer-events: none; transition:.2s;}
input[type=range]::-webkit-slider-thumb::before{ left: -1997px; background-color: #f22;}
input[type=range]::-webkit-slider-thumb::after { left: 10px; background-color: #edc;}

input[type=button],
input[type=submit],
input[type=checkbox]+Label,
input[type=radio]+Label,
button {cursor:pointer;vertical-align:middle;}

input:focus,
button:focus,
select:focus { border-color:#FFFF; outline:0 none;}

input:disabled, button:disabled {opacity:0.5; cursor: default;}

input[type=number] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

input[type=checkbox], input[type=radio]{display: none;}
input[type=checkbox]:focus, input[type=radio]:focus{border:none; box-shadow:none;}

input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before{font-size:25px; transition: font-size .5s;}

input[type=checkbox]+Label::before{content:"check_box_outline_blank";}
input[type=checkbox]:checked+Label::before{content:"check_box";}
input[type=radio]+Label::before{content:"radio_button_unchecked";}
input[type=radio]:checked+Label::before{content:"radio_button_checked";}

input.alone[type=radio],
input.alone[type=checkbox] {display: inline-block; width: auto !important; cursor: pointer;}
input.alone[type=checkbox]::before {content: "check_box_outline_blank";}
input.alone[type=checkbox]:checked::before {content: "check_box";}
input.alone[type=radio]::before{content:"radio_button_unchecked";}
input.alone[type=radio]:checked::before{content:"radio_button_checked";}

select {
    background-image: url(./images/ui/icon_form_select_arrow.svg);
    background-size: auto 100%;
    background-position: 100% center;
    background-repeat: no-repeat;
	padding-right:35px;
	padding-left:15px;
	background-image:none \9;
	padding:6px 10px 6px 10px \9;
}
select::-ms-expand {display:none;}
select option[disabled], select option:disabled {color:#999;}