@charset "utf-8";
/*.top {min-height:600px; background: url(../img/common/allBg.png) center -100px; }*/
.top {min-height:600px; background: url(../img/top/keyV.png) center -100px; }
.main-v {background: url(../img/top/main-v.png) no-repeat; background-position:  66% 40px; min-height: 800px; width:100%; margin:0 auto; }
.topcontent {margin: 6% auto 0 auto; width: 70%; }
.topcontent .logo {width:48%; text-align: center;}
.topcontent .logo img {width: 472px; height: auto;}

.topcontent .redGlow {	width: 100%;	height: 180px;	font-size: 32px; font-weight: 700;}
.topcontent .redGlow svg {    width: 50%; height: 100%;}
.topcontent .redGlow text {text-anchor: middle;}
.topcontent .redGlowSm {display: none;}

.topcontent .coming {width: 48%; text-align: center; margin-top: 25px;}
.topcontent .release {width: 48%; text-align: center; margin-top: 25px;}
.topcontent .button {
	width: 380px; 
	height: 50px; 
	background: url(../img/top/btn_bg.png) no-repeat; 
	font-size: 24px; 
	padding-top: 14px; 
	color: #fff; 
	text-align: center;
	margin:10% auto 0 auto;
	display: block;
}
.topcontent .tenth {margin-bottom: 10%; margin-top: -175px; margin-left: 255px;}
.topcontent .sptenth {display: none;}
.topcontent a, .topcontent a:hover, .topcontent a:visited {text-decoration: none;}
.story {background: url(../img/top/bg-story.png) no-repeat center top;     background-size: cover;    padding-bottom: 81px;}
.story .storyinner {width: 62%; margin:0 auto;}

.heading {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  width: 75%;
  padding-top: 25px;
  margin-top: 25px;
  font-size: 38px;
  font-weight: 600;
  color: #14304f;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.heading h1 {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  padding:0 8px;
}

.heading::before,
.heading::after {
  content: "";
	display: flex;
  flex: 1 1 auto;
  height: 1px;
  background-color: #14304f;
}
.heading h1 span {
  font-size: 125%;
}

.story .stleft {width: 48%; float: left;text-align: left;}
.story .stleft img {margin-top: 25px;}
.story .stleft img:hover {	opacity: .6;}
.story .stright {width: 48%; float: left;text-align: left;}

.story .sth1 { font-size: 1.7vw; font-weight: bolder; width: 100%; height: 100px; }
.story .sth1 svg {	width: 100%; height: 100%;}

.story .sth2 {margin-top: 15px; font-size: 1.25vw; font-weight: 600; }

.story .storytext {font-size: 20px; line-height: 28px;}
.specs {background: url(../img/top/trsp_wht.png); border-top: solid 1px #D3D3D3; padding-bottom: 40px;}
.specs .details {margin: 0 auto 0 auto; width: 62%; }


.specs .specstxt {margin-top: 30px;font-size: 26px; line-height: 34px; }
.imgShadow { box-shadow: 3px 3px 15px #000}

@media only screen and (max-width: 1675px) { 
	.main-v {background: url(../img/top/main-v.png) no-repeat; background-position:  70% 40px; min-height: 800px; width:100%; margin:0 auto; }
}
@media only screen and (max-width: 1600px) { 
	.main-v {background-position: 80% 40px; width:100%; margin:0 auto; }
}
@media only screen and (max-width: 1524px) { 
/*	.topcontent .redGlow {	width: 106%; }*/
	.story .sth1 { font-size: 1.65vw;}
}
@media only screen and (max-width: 1495px) {
	.story .sth2 {font-size: 1.25vw; }
}
@media only screen and (max-width: 1492px) { 
	.main-v {background-position: 90% 40px; width:100%; margin:0 auto; }
	.story .storywrap {padding-left: 10px;}
	.topcontent .redGlow {font-size: 30px; }
}
@media only screen and (max-width: 1366px) { 
	.main-v {background-position:  right 40px; }
	.topcontent {width: 100%; }
	.topcontent .tenth {margin-left: 15%; margin-bottom: 10%;}
	.story .storyinner {width: 100%;}
	.story .stleft {width: 48%; float: left;text-align: center;}
	.story .sth1 { font-size: 2vw;}
	.story .sth2 {font-size: 1.7vw; }
}
@media only screen and (max-width: 1200px) { 
	.main-v {background-size: 65%;}
}

@media only screen and (max-width: 1024px) { 
	.topcontent {width: 100%; }
	.topcontent .tenth {margin-bottom: 0;}
	.story .sth1 { font-size: 2.5vw;}
	.story .sth2 {font-size: 1.9vw; }
}

@media only screen and (max-width: 960px) { 
	.topcontent .redGlow {		width: 100%;		height: 180px;		font-size: 27px; font-weight: 700;}
}

@media only screen and (max-width: 920px) { 
	.main-v {background-size: 100%; background-position:  center 150px;}
	.topcontent .logo {width:100%; text-align: center; margin-top: -30px;}
	.topcontent .coming {width: 100%; text-align: center; margin-top: 25px; }
	.topcontent .release {width: 100%; text-align: center; margin-top: 25px; }
	.topcontent .sptenth {display: block; margin-left: 3%;}
	.topcontent .tenth {display: none;}
	.topcontent .button { margin:5% auto 0 auto;}
	.story .stleft {width: 100%; }
	.story .stright {width: 100%;}
	.story .stright .storywrap {width: 90%; margin: 0 auto;}
	.specs .details {margin: 0 auto 0 auto; width: 100%; }
	.topcontent .redGlowSm {	display: inline-block;	margin-top: 60%;	width: 100%;	height: 180px;	font-size: 32px; font-weight: 700;}
	.topcontent .redGlowSm svg {    width: 100%; height: 100%;}
	.topcontent .redGlowSm text {text-anchor: middle;}
	.topcontent .redGlow {display: none;}
	.story .sth1 { font-size: 4vw; }
	.story .sth2 {font-size: 3.5vw; }
}

@media only screen and (max-width: 660px) { 
	.story .storytext {font-size: 16px; line-height: 24px; padding-left: 0px; width: 90%; margin: 0 auto;}
	.heading {font-size: 34px;}

}

@media only screen and (max-width: 500px) { 
	.topcontent .redGlowSm {font-size: 28px; }
	.story .sth1 { font-size: 4vw; }
	.story .sth2 {font-size: 3.5vw; }
	
}
@media only screen and (max-width: 488px) { 
	.topcontent .logo img {width: 75%; height: auto;}
	
}
@media only screen and (max-width: 480px) { 
.topcontent .logo {margin-top: 0px;}
.topcontent .logo img {width: 75%; height: auto;}
.topcontent .sptenth img {width: 85px; height: auto;}
.topcontent .redGlow {text-align: center; margin-top: 70%; font-size: 24px; line-height: 30px;}
.story .sth1 img {width: 70%; height: auto;}
.specs .specstxt {margin-top: 30px;font-size: 20px; line-height: 28px; }
}
@media only screen and (max-width: 466px) { 
	.story .sth2 {padding-left: 0px; margin-bottom: 20px;}
	.story .stleft img {width: 95%; height: auto; }
	.topcontent .coming img {padding-left: 0px; width: 90%; height: auto;}
	.topcontent .release img {padding-left: 0px; width: 90%; height: auto;}
	.topcontent .button {width: 90%; height: 30px; background: url(../img/top/btn_bg.png) no-repeat; background-size: 100% 100%; font-size: 16px; padding-top: 12px; text-align: center; }
	.topcontent .redGlowSm {	font-size: 26px; }	
}

@media only screen and (max-width: 414px) { 
.main-v {background-size: 125%; width: 100%;}
.story .storytext {padding-left: 15px; width: 90%;}
}
@media only screen and (max-width: 400px) { 
.topcontent .redGlowSm {
	margin-top: 70%;
	font-size: 22px;}
}
@media only screen and (max-width: 390px) { 

.topcontent .redGlowSm {
	margin-top: 70%;
	font-size: 18px;}
.story .storytext {padding-left: 0px; width: 90%;}
	.heading {font-size: 23px;}
	.story .sth1 { font-size: 4.5vw; }
	.story .sth2 {font-size: 3.75vw; }

}
@media only screen and (max-width: 325px) {
	
	.story .sth1 { font-size: 4.5vw; }
	.story .sth2 {font-size: 4vw; }
	
}