@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap');
html,body {
	overflow-x: hidden;
}
body#landingPage {
	color: #000;
	background: #000;
	font-size: 18px;
}
.bigBg {
	padding: 350px 0 500px;
	background: url(../img/bg-island.jpg) no-repeat center top / cover;
}
.bgBlue {
	background: #e6f7ff;
}
#landingPage img	{
	max-width: 100%;
}
#landingPage .wrap {
	max-width: 1920px;
	margin: 0 auto;
}
/*========================== HEADER ==========================*/
#landingPage header {
	position: relative;
	height: 1096px;
	z-index: 1;
	padding-top: 60px;
	background: url(../img/bg-header.jpg) no-repeat center top / cover;
}
#landingPage header:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 91px;
	top: 100%;
	left: 0;
	bottom: 0;
	background: url(../img/bg-header-bottom.png) no-repeat center center / cover;
}
#landingPage header .navbar {
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	width: 910px;
	height: 84px;
	background: url(../img/bg-menu.png) center top;
}
#landingPage header .navbar .playNow {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
#landingPage header .navbar li a {
	font-weight: 500;
	color: #fff;
	font-size: 18px;
	margin-right: 15px;
	padding-top: 0;
}
#landingPage header .logo {
	text-align: center;
	padding-top: 80px;
}
#landingPage header .intro {
	text-align: center;
	padding-top: 170px;
	width: 400px;
	height: 412px;
	margin: -150px auto 0;
	background: url(../img/paper.png) no-repeat center center / cover;
}
#landingPage header .intro .text {
	color: #612500;
	padding: 0 70px;
	margin-bottom: 20px;
}
#landingPage header .intro .btnGroup a {
	display: inline-block;
	margin: 0 5px;
}
/*========================== VIDEO INTRO ==========================*/ 
#videoIntro {
	padding: 250px 0;
	text-align: center;
	background: url(../img/bg-video-intro.jpg) no-repeat center center / cover;
}
#videoIntro .sectionContent {
	display: inline-block;
	width: 936px;
	height: 543px;
	position: relative;
	padding: 20px;
	background: url(../img/bg-video-frame.jpg ) no-repeat center center / cover;
}
#videoIntro .videoFrame {
	width: 100%;
	height: 100%;
	position: relative;
}
#videoIntro .videoFrame img {
	position: absolute;
}
#videoIntro .videoFrame .decoTop {
	left: 50%;
	transform: translateX(-50%);
	top: -57px;
}
#videoIntro .videoFrame .decoCenterLeft {
	left: -25px;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
}
#videoIntro .videoFrame .decoCenterRight {
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
}
#videoIntro .videoFrame .decoBottom {
	bottom: -25px;
}
#videoIntro .videoFrame .decoBottomLeft {
	left: -20px;
	transform: scaleX(-1);
}
#videoIntro .videoFrame .decoBottomRight {
	right: -20px;
}
#videoIntro iframe {
	display: block;
	width: 100%;
	height: 100%;
}
/*========================== ABOUT ==========================*/
#about {
	position: relative;
    padding: 620px 0 138px;
    height: 1248px;
	background: url(../img/bg-about.jpg) no-repeat center center / cover;
}
#about:after,
#about:before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
}
#about:before {
	top: 100%;	
	height: 170px;
	background: url(../img/bg-about-bottom.png) no-repeat center center / cover;
}
#about:after {
	top: -130px;
    height: 270px;
	background: url(../img/bg-about-top.png) no-repeat center center / cover;	
}
#about .sectionContent {
	width: 704px;
	height: 490px;
	position: relative;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	padding: 200px 100px 0;
	background: url(../img/about-frame.png) no-repeat center center / cover;
}
#about .sectionContent img {
	position: absolute;
}
#about .sectionContent .aboutFlag {
	left: -230px;
    bottom: -100px;
}
#about .sectionContent .aboutCoin {
	right: -50px;
	bottom: -80px;
}
/*========================== NFT ITEMS ==========================*/
#nftItem .owl-carousel .character {
	padding: 0 20px;
	text-align: center;
}
#nftItem .owl-carousel .owl-nav button.owl-prev, 
#nftItem .owl-carousel .owl-nav button.owl-next {
	width: 70px;
	height: 76px;
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
#nftItem .owl-carousel .owl-nav button.owl-prev {
	left: -80px;
	background: url(../img/button-back.png) no-repeat center center / cover;
}
#nftItem .owl-carousel .owl-nav button.owl-next {
	right: -80px;
	background: url(../img/button-next.png) no-repeat center center / cover;
}
#nftItem .owl-nav span {
	display: none;
}
#nftItem .sectionContent {
	text-align: center;
	margin-top: 100px;
	font-weight: 500;
}
#nftItem .sectionContent a {
	display: inline-block;
	margin-top: 20px;
}
#nftItem .sectionContent a img {
	height: 90px;
}
/*========================== HOW TO PLAY ==========================*/
#howToPlay {
	margin-top: 580px;
	padding: 80px 0 200px;
	background: url(../img/bg-how-to-play.png) no-repeat center bottom / contain;
}
#howToPlay .sectionContent {
	position: relative;
	width: 840px;
	height: 1120px;
	margin: 0 auto;
	background: url(../img/how-to-play-board.png) no-repeat center center / cover;
}
#howToPlay .sectionContent ul {
	padding: 430px 130px 0;
	margin-bottom: 40px;
}
#howToPlay .sectionContent ul li {
	color: #fff;
	position: relative;
	font-weight: 500;
	padding-left: 110px;
	min-height: 100px;
	margin-bottom: 20px;
}
#howToPlay .sectionContent ul li img {
	position: absolute;
	left: 0;
	top: 0;
}
#howToPlay .sectionContent .htpSword,
#howToPlay .sectionContent .htpTreasure {
	position: absolute;
}
#howToPlay .sectionContent .htpSword {
	left: -80px;
	bottom: 10px;
}
#howToPlay .sectionContent .htpTreasure {
	bottom: -120px;
	right: -450px;
}
#howToPlay .btnMoreInfo {
	height: 90px;
}
/*========================== TOKENOMICS ==========================*/
#tokenomics {
	margin-top: 50px;
	color: #fff;
	font-size: 16px;
}
#tokenomics .sectionContent {
	position: relative;
	padding: 130px 160px 0 400px;
	width: 100%;
	height: 555px;
	background: url(../img/bg-tokenomic.png) no-repeat center center / cover;
}
#tokenomics .sectionContent .iconCoin {
	position: absolute;
	left: -50px;
	top: -50px;
}
#tokenomics .sectionContent .tokenOverview {
	margin-bottom: 20px;
}
#tokenomics .sectionContent .tokenOverview .text {
	font-size: 14px;
	margin-bottom: 5px;
}
#tokenomics .sectionContent .tokenOverview .name {
	color: #FFD591;
	font-weight: 500;
	font-size: 18px;
}
#tokenomics ul li {
	position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
}
#tokenomics ul li:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
#tokenomics ul li.c1:before {
	background: #b9e5fd;
}
#tokenomics ul li.c2:before {
	background: #fefdfd;
}
#tokenomics ul li.c3:before {
	background: #fee5b8;
}
#tokenomics ul li.c4:before {
	background: #febe68;
}
#tokenomics ul li.c5:before {
	background: #fea83f;
}
#tokenomics ul li.c6:before {
	background: #f98a16;
}
#tokenomics ul li.c7:before {
	background: #d3380d;
}
#tokenomics ul li.c8:before {
	background: #597df5;
}
#tokenomics ul li.c9:before {
	background: #f9541b;
}
#tokenomics ul li.c10:before {
	background: #69befd;
}
#tokenomics .contractAddress {
	background: #873715;
	padding: 10px;
	border-radius: 15px;
}
#tokenomics .checkBscBtn {
	height: 90px;
}
/*========================== ROADMAP ==========================*/
#roadmap {
	position: relative;
	background: url(../img/bg-roadmap.jpg) no-repeat center top / cover;
	z-index: 1;
	height: 1230px;
}
#roadmap:before,
#roadmap:after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
}
#roadmap:before {
	height: 185px;
	top: -185px;
	background: url(../img/bg-roadmap-top.png) no-repeat center center / cover;
}
#roadmap:after {
	height: 188px;
	top: 100%;
	background: url(../img/bg-roadmap-bottom.png) no-repeat center center / cover;
}
#roadmap .phaseName {
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 30px;
	font-size: 30px;
}
#roadmap .iconRoadmap {
	width: 500px;
	margin: -370px 0 250px;
	position: relative;
}
#roadmap ul li {
	position: relative;
	padding-left: 36px;
	margin: 25px 0;
}
#roadmap ul li:before {
	content: "";
	display: block;
	border-style: solid;
	border-width: 0 2px 2px 0;
	width: 7px;
	height: 15px;
	transform: rotate(45deg);
	position: absolute;
	left: 10px;
	top: 3px;
	border-color: #fff1d9;
	z-index: 1;
}
#roadmap ul li:after {
	content: "";
	position: absolute;
	left: -2px;
	top: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #8c8c8c;
}
#roadmap ul li.active:after {
	background: #ad4e00;
}
/*========================== PARTNERSHIP ==========================*/
#partnership {
	position: relative;
	padding: 200px 0 150px;
}
#partnership .leaf-1 {
	position: absolute;
	right: 0;
	top: 0;
}
#partnership .iconPartners {
	position: relative;
	z-index: 1;
}
#partnership .listPartners {
	margin-top: 70px;
	text-align: center;
}
#partnership .listPartners a {
	display: inline-block;
	padding: 15px;
}
/*========================== ADVISORS ==========================*/
#advisors {
	margin-bottom: 150px;
}
#advisors .item {
	margin-top: 70px;
}
/*========================== OUR CREWS ==========================*/
#ourCrews {
	position: relative;
}
#ourCrews .leaf-2 {
	position: absolute;
	left: 0;
	top: 0;
}
#ourCrews .sectionContent {
	position: relative;
}
#ourCrews .sectionContent .inner {
	padding: 20px 150px 0;
	background: url(../img/bg-our-crews.png) repeat-y center top / contain;
}
#ourCrews .sectionContent .inner img {
	margin-bottom: 20px;
	display: block;
	width: 100%;
}
/*========================== AS SEEN ON ==========================*/
#asSeenOn {
	text-align: center;
	margin-top: 120px;
}
#asSeenOn .icon {
	margin-bottom: 30px;
	width: 350px;
}
#asSeenOn a {
	display: block;
	margin: 20px;
}
/*========================== COMINGSOON MODAL ==========================*/
#comingsoonModal .modal-content {
	background: none;
	position: relative;
	text-align: center;
	border: none;
}
#comingsoonModal .modal-body .text {
	font-size: 55px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	line-height: 1;
	color: #ffbe76;
	text-transform: uppercase;
	text-shadow: 4px 2px 0px #6c300c;
}
#comingsoonModal .modal-body .btnCloseModal {
	width: 31px;
	height: 32px;
	border: none;
    position: absolute;
    top: 16px;
    right: 48px;
	background: url(../img/icon-close.png) no-repeat center center / cover;
}
/*========================== WHITELIST MODAL ==========================*/
#buyPackageModal .modal-content {
	background: none;
	border: none;
	text-align: center;
}
#buyPackageModal .buyPackage {
	display: inline-block;
	margin-top: 30px;
}
/*========================== FOOTER ==========================*/
footer {
	text-align: center;
	padding-top: 315px;
	/*margin-top: -150px;*/
	background: #e6f7ff url(../img/bg-footer.jpg) no-repeat center bottom / cover;
}
footer .social {
	width: 830px;
	height: 285px;
	margin: 0 auto;
	padding: 100px 70px 20px 70px;
	background: url(../img/bg-our-social.png) no-repeat center bottom / contain;
}
footer .social .text {
	color: #fff;
	font-weight: 500;
	font-size: 25px;
	margin-bottom: 20px;
}
footer .social a {
	display: inline-block;
	margin: 0 10px;
}
/*========================== RESPONSIVE ==========================*/
@media (max-width: 1440px) {
	#nftItem .owl-carousel .character {
		padding: 30px;
	}
	#nftItem .owl-carousel .owl-nav button.owl-prev {
		left: -50px;
	}
	#nftItem .owl-carousel .owl-nav button.owl-next {
		right: -50px;
	}
	#howToPlay {
		padding-top: 0;
		background-size: cover; 
	}
	#partnership .leaf-1 {
		width: 350px;
	}
}
@media (max-width: 1367px) {
	#about:after {
		top: -105px;
		height: 215px;
	}
	#tokenomics .sectionContent {
		height: 475px;
		padding: 100px 100px 0 350px;
	}
	#tokenomics .sectionContent .iconCoin {
		width: 350px;
	}
	#tokenomics .checkBscBtn {
		height: 70px;
	}
}
@media (max-width: 1024px) {
	.bigBg {
		padding-top: 250px;
	}
	#landingPage header {
		height: 800px;
	}
	#landingPage header .logo {
		padding-top: 50px;
	}
	#landingPage header .logo img {
		width: 380px;
	}
	#partnership .iconPartners {
		margin-top: 50px;
		width: 500px;
	}
	#about .sectionContent .aboutFlag {
		left: -140px;
	}
	#nftItem .owl-carousel .owl-nav button.owl-prev, 
	#nftItem .owl-carousel .owl-nav button.owl-next {
		top: auto;
		bottom: -130px;
	}
	#nftItem .owl-carousel .owl-nav button.owl-prev {
		left: calc(50% - 80px);
	}
	#nftItem .owl-carousel .owl-nav button.owl-next {
		right: calc(50% - 80px);
	}
	#nftItem .sectionContent {
		margin-top: 150px;
	}
	#howToPlay {
		margin-top: 400px;
	}
	#tokenomics .sectionContent {
		background-size: 100% 480px;
		padding: 100px 100px 0 300px;
	}
	#tokenomics .sectionContent .iconCoin {
		width: 300px;
		left: -30px;
		top: -50px;
	}
	#roadmap {
		height: 950px;
	}
	#roadmap:after {
		height: 146px;
	}
	#roadmap:before {
	    height: 143px;
	    top: -143px;
	}
	#roadmap .iconRoadmap {
		margin-bottom: 170px;
	}
	#ourCrews .leaf-2 {
		width: 290px;
	}
	footer {
		padding-top: 110px;
	}
	footer .social {
		height: 220px;
		padding-top: 70px;
	}
	footer .social a img {
		width: 50px;
	}
}
@media (max-width: 768px) {
	body#landingPage {
		font-size: 15px;
	}
	.bigBg {
		padding: 160px 0 420px;
	}
	#landingPage .navbar-light .navbar-toggler {
		border: none;
		padding: 0;
		width: 70px;
	}
	#landingPage .navbar-collapse.collapse,
	#landingPage .navbar-collapse.collapsing {
		position: absolute;
		top: 100%;
		width: 240px !important;
		z-index: 2;
		height: 300px !important;
		background: url(../img/bg-menu-mobile.png) no-repeat left top / contain;
	}
	#landingPage .navbar-collapse ul li {
		margin-bottom: 9px;
	}
	#landingPage .navbar-collapse ul li a {
		display: block;
		text-align: center;
		line-height: 23px;
		padding: 0;
		height: 35px;
		line-height: 35px;
	}
	#landingPage header {
		height: 650px;
		padding-top: 0;
	}
	#landingPage header .logo img {
	    width: 320px;
	    position: relative;
	    z-index: 1;
	}
	#landingPage header .intro {
		position: relative;
	}
	#landingPage header .intro .text {
		padding: 0 60px;
	}
	#landingPage header .logo {
		padding-top: 0;
	}
	#landingPage header .navbar {
		width: auto;
		background: none;
		padding: 0;
	}
	#videoIntro {
		padding: 200px 0;
	}
	#videoIntro .sectionContent {
		width: 100%;
		height: 400px;
		padding: 16px;
	}
	#videoIntro .videoFrame .decoTop {
		top: -60px;
	}
	#about {
		height: 1100px;
		padding-top: 530px;
	}
	#about .sectionContent {
		padding-top: 220px;
	}
	#about .sectionContent .aboutFlag {
		width: 240px;
		left: -30px;
		bottom: -70px;
	}
	#about .sectionContent .aboutCoin {
		width: 150px;
		right: 0px;
		bottom: -70px;
	}
	#howToPlay {
		padding-bottom: 0;
	}
	#howToPlay .sectionContent {
		width: 100%;
		background-size: contain;
	}
	#howToPlay .sectionContent ul {
		padding: 450px 70px 0;
		margin-bottom: 30px;
	}
	#howToPlay .sectionContent ul li {
		margin-bottom: 10px;
	}
	#howToPlay .sectionContent .htpSword {
		width: 220px;
		left: -40px;
		bottom: 100px;
	}
	#howToPlay .sectionContent .htpTreasure {
		width: 500px;
		bottom: 0;
		right: -260px;
	}
	#tokenomics .sectionContent .iconCoin {
		display: none;
	}
	#tokenomics .sectionContent {
		padding: 130px 70px 0 70px;
		background-size: 100% 360px;
	}
	#tokenomics .sectionContent .tokenOverview {
		margin-bottom: 10px;
	}
	#tokenomics .sectionContent .tokenOverview .text,
	#tokenomics ul li {
		margin-bottom: 0;
	}
	#roadmap {
		height: 680px;
	}
	#roadmap:after {
		height: 104px;
	}
	#roadmap:before {
		height: 100px;
		top: -100px;
	}
	#roadmap ul li {
		margin: 20px 0;
	}
	#roadmap .iconRoadmap {
		width: 400px;
		margin-bottom: 90px;
	}
	#partnership {
		padding-bottom: 100px;
	}
	#partnership .listPartners a {
		padding: 5px;
	}
	#ourCrews .sectionContent .inner {
		padding: 20px 100px 0;
	}
	#asSeenOn .icon {
		width: 280px;
	}
	#asSeenOn a {
		margin: 15px;
	}
	footer .social {
		width: 100%;
		height: 170px;
		padding-top: 50px;
	}
}
@media (max-width: 576px) {
	body#landingPage {
		font-size: 12px;
	}
	.bigBg {
		padding: 50px 0 300px;
	}
	#landingPage .navbar-light .navbar-toggler {
		width: 50px;
		margin-top: 10px;
	}
	#landingPage header {
		height: 580px;
	}
	#landingPage header:before {
		height: 50px;
	}
	#landingPage header .navbar {
		height: auto;
	}
	#landingPage header .navbar .playNow {
		display: none;
	}
	#landingPage header .intro {
		width: 100%;
		background-size: contain;
	}
	#videoIntro {
		padding: 100px 0;
	}
	#videoIntro .videoFrame img {
		display: none;
	}
	#videoIntro .sectionContent {
		height: 205px;
		padding: 7px;
		background-size: cover;
	}
	#about {
		height: 630px;
		padding-top: 270px;
	}
	#about:after {
		top: -85px;
		height: 150px;
	}
	#about:before {
		height: 40px;
	}
	#about .sectionContent {
		width: 100%;
		background: url(../img/about-text.png) no-repeat center top;
		padding: 100px 10px 10px 10px;
		height: auto;
	}
	#about .sectionContent img {
		display: none;
	}
	#nftItem .owl-carousel .character img {
		width: 250px;
	}
	#nftItem .owl-carousel .owl-nav button.owl-prev, 
	#nftItem .owl-carousel .owl-nav button.owl-next {
		width: 50px;
		height: 56px;
		bottom: -90px;
	}
	#nftItem .owl-carousel .owl-nav button.owl-prev {
		left: calc(50% - 60px);
	}
	#nftItem .owl-carousel .owl-nav button.owl-next {
		right: calc(50% - 60px);	
	}
	#nftItem .sectionContent {
		margin-top: 90px;
	}
	#nftItem .sectionContent a {
		margin-top: 0;
	}
	#nftItem .sectionContent a img {
		height: 70px;
	}
	#howToPlay {
		background: none;
		margin-top: 120px;
	}	
	#howToPlay .sectionContent {
		height: auto;
	}
	#howToPlay .sectionContent .htpSword, 
	#howToPlay .sectionContent .htpTreasure {
		display: none;	
	}
	#howToPlay .sectionContent ul {
		padding: 230px 25px 0 25px;
	}
	#howToPlay .sectionContent ul li {
		padding-left: 30px;
		min-height: initial;
	}
	#howToPlay .sectionContent ul li img {
		width: 25px;
	}
	#howToPlay .btnMoreInfo {
		height: 70px;
		position: relative;
		top: 20px;
	}
	/* sample */
	#tokenomics {
		font-size: 13px;
	}
	#tokenomics .sectionContent {
		height: auto;
		background: #752a189c;
		border-radius: 10px;
		padding: 15px;
	}
	#tokenomics .sectionContent .iconCoin {
		display: block;
		position: static;
		width: 150px;
		margin: 0 auto 20px;
	}
	#tokenomics .sectionContent .tokenOverview .text {
		display: inline-block;
		width: 100px;
	}
	#tokenomics .sectionContent .tokenOverview .name {
		display: inline-block;
		font-size: 15px;
	}
	#tokenomics .sectionContent ul {
		margin: 0;
	}
	#tokenomics .contractAddress {
		margin: 15px 0;
		word-break: break-all;
	}
	#tokenomics .checkBscBtn {
		display: block;
		margin: 0 auto;
	}
	/* /sample */
	#roadmap {
		height: auto;
	}
	#roadmap:before {
		height: 65px;
		top: -65px;
	}
	#roadmap:after {
		height: 70px;
	}
	#roadmap .iconRoadmap {
		width: 260px;
		margin: -230px 0 50px;
	}
	#roadmap .phaseName {
		margin-bottom: 0;
		font-size: 20px;
	}
	#roadmap ul li {
		margin: 15px 0;
		padding-left: 30px;
	}
	#roadmap ul li:after {
		width: 25px;
		height: 25px;
	}
	#roadmap ul li:before {
		width: 6px;
		height: 12px;
		left: 8px;
		top: 3px;
	}
	#partnership {
		padding: 90px 0 50px;
	}
	#partnership .leaf-1 {
		width: 150px;
	}
	#partnership .iconPartners {
		width: 300px;
	}
	#partnership .listPartners {
		margin: 40px 0 20px;
	}
	#partnership .listPartners a {
		margin-bottom: 10px;
	}
	#advisors {
		margin-bottom: 60px;
	}
	#advisors .iconAdvisor {
		width: 240px;
	}
	#advisors .item {
		margin-top: 30px;
	}
	#advisors .item img {
		width: 250px;
	}
	#ourCrews .leaf-2 {
		width: 190px;
	}
	#ourCrews .sectionContent .inner {
	    padding: 10px 45px 0;
	}
	#asSeenOn {
		margin-top: 50px;
	}
	#asSeenOn .icon {
		width: 200px;
		margin-bottom: 10px;
	}
	footer{
		padding-top: 50px;
	}
	footer .social {
		padding: 80px 0 0;
	}
	footer .social .text {
		font-size: 20px;
		margin-bottom: 15px;
	}
	footer .social a {
		margin: 0 5px;
	}
	footer .social a img {
		width: 30px;
	}
}