@charset "UTF-8";

/* ==========================================================================
   base
   ========================================================================== */
body {
  color: inherit;
  background: inherit;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

a{
	text-decoration: none;
}
a:hover{
	opacity: .75;
}

img {
	opacity: inherit;
}

/* ==========================================================================
   block - page
   ========================================================================== */
#page {
	padding-top: 80px;
	padding-bottom: 118px;
}

@media only screen and (max-width: 768px) {
  #page {
    padding-top: 60px;
    padding-bottom: 94px;
  }
}

/* ==========================================================================
   block - content
   ========================================================================== */
#content #banner {
	display: none;
}

/* ==========================================================================
   block - footer
   ========================================================================== */
#footer .pagetop {
	bottom: 118px;
}
@media only screen and (max-width: 768px) {
  #footer .pagetop {
	bottom: 94px;
}
}

/* ==========================================================================
   block - blackshark2-banner-wrap
   ========================================================================== */
.blackshark2-banner-wrap {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 21%;
}
.blackshark2-banner-wrap .inner {
	max-width: 340px;
	width: 25%;
	margin: 0 auto;
}

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

@media only screen and (max-width: 768px) {
	.blackshark2-banner-wrap {
		bottom: 24%;
	}
	.blackshark2-banner-wrap .inner {
		width: 50%;
	}
}

/* ==========================================================================
   block - floating
   ========================================================================== */
.floating{
   position: fixed;
   width: 100%;
   left: 0;
   padding: 20px 0;
   background-color: #000;
   bottom: -150px;
   transition: all .3s ease-out;
   z-index: 10002;
}

.is-scrolled .floating,
.floating.show{
	bottom: 0;
}

.floating .inner{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.floating .floating__img {
	float: left;
	width: 13.4%;
	max-width: 134.5px;
}

.floating .floating__txt {
	float: left;
	margin-left: 2em;
}
.floating .floating__txt p {
	display: inline-block;
	font-size: 81.3%;
	font-weight: 600;
	color: #ccc;
	margin-top: 0.25em;
}
.floating .floating__btn {
	margin: 0 auto;
	text-align: center;
}

.floating a.btn{
	display: inline-block;
	width: 230px;
	padding:15px 0;
	background: #44d23c;
	color: #000;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	border-radius: 5px;
/* 	margin-top: 17px; */
}

/*
.floating .btn:first-child{
	margin-right: 10px;
}
*/
/*
.floating a.btn.btn_shop{
	background: #FFF;
	color: #000;
}
*/

@media only screen and (max-width: 768px) {
	.floating {
		padding: 10px 0;
	}
	.floating .inner {
	    width: 94%;
	    text-align: center;
	}	
	.floating .floating__img {
		display: inline-block;
		float: none;
		width: 52px;
	}
	.floating .floating__txt {
		display: inline-block;
		float: none;
		margin-left: 0;
	}
	.floating .floating__txt p {
		font-size: 9px;
		text-align: left;
	}	
	.floating .floating__btn {
		clear: both;
	    float: none;
	    text-align: center;
	}
	
	.floating a.btn {
	    display: inline-block;
	    width: 140px;
	    padding: 10px 0;
	    font-size: 10px;
	    text-align: center;
	    border-radius: 3px;
	    margin-top: 10px;
	}
}

/* ==========================================================================
   for Black Shark 2 content
   ========================================================================== */ 
.imodal.z-dialog {
	z-index: 10003 !important;
} 
   
.feature-section.hero-specs {
	padding-top:1.1rem;
	padding-bottom:1.1rem;
	background-image:linear-gradient(-180deg,#141416,#000 51%,#14141b);
}

@media screen and (max-width:600px) {
	.feature-section.hero-specs {
		padding-top:.3rem;
		padding-bottom:.3rem;
	}
}

.feature-section.hero-specs .section-title {
	font-size:.4rem;
}

.feature-section.hero-specs .info-wrap {
	-ms-flex:1;
	flex:1;
	text-align:center;
}

.feature-section.hero-specs .info-wrap .headline {
	font-size:.26rem;
	line-height:.32rem;
	background:#6736fe;
	background:-webkit-gradient(left top,right top,color-stop(0,#6736fe),color-stop(100%,#00fffc));
	background:linear-gradient(90deg,#6736fe,#00fffc);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF6736FE",endColorstr="ie-hex-str($end-color)",GradientType=1);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

@media screen and (max-width:600px) {
	.feature-section.hero-specs .info-wrap {
		text-align:left;
		width:100%;
		max-width:3.16rem;
		margin-bottom:.3rem;
	}
	
	.feature-section.hero-specs .info-wrap .headline {
		font-size:.22rem;
		line-height:.26rem;
	}
	
	.feature-section.hero-specs .info-wrap.last-child {
		margin-bottom:0;
	}
}

.feature-section.hero-specs .headline-wrap {
	height:.64rem;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-align:center;
	align-items:center;
}

@media screen and (min-width:601px) {
	.feature-section.hero-specs .headline-wrap {
		-ms-flex-pack:center;
		justify-content:center;
	}
}

@media screen and (max-width:600px) {
	.feature-section.hero-specs .headline-wrap {
		height:auto;
	}
}

.feature-section.hero-specs .boundary-line {
	-ms-flex:none;
	flex:none;
	width:1px;
	background-color:#fff;
	opacity:.1;
	height:.8rem;
}

@media screen and (max-width:600px) {
	.feature-section.hero-specs .boundary-line {
		display:none;
	}
}

.feature-section.hero-specs .section-subtitle {
	margin-bottom:.58rem;
	margin-top:0;
}

.feature-section.hero-specs .button-wrap {
	margin-top:.7rem;
}