@charset "utf-8";
/* CSS Document */
/* ======================home */
/*top*/
.topbg {background: url(../img/home/home_topbg.jpg); background-repeat: no-repeat;background-size: cover;background-position: center top; width: 100%;}
.chara {background-image: url(../img/home/chara.png);background-position: center -65px;background-repeat: no-repeat; min-height: 1415px;text-align: center;z-index: 900;position: relative; width: 100%; }
.logo {margin: 0 auto; position:relative;}
.trsp {width: 100%;}
.trsp img {height: 200px;}
.trspb {display: none;}
.box {width: 100%; text-align: left; padding-left: 80%;}
.box img {width: 15%;}
.callout {width: 100%;}
.callout img {width: 25%; height: auto;}
@media only screen and (max-width: 1680px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:1175px;}
	.logo {top: -65px;}
	.logo img {width: 36%; height: auto;}
	.trsp img {height: 100px;}
}
@media only screen and (max-width: 1580px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:1050px;}
	.trsp img {height: 70px;}
}
@media only screen and (max-width: 1580px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:1050px;}
	.trsp img {height: 70px;}
}
@media only screen and (max-width: 1420px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:950px;}
	.trsp img {height: 70px;}
}
@media only screen and (max-width: 1280px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:850px;}
	.logo {top: -95px;}
	.trsp img {height: 20px;}
}
@media only screen and (max-width: 1120px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:750px;}
	.logo img {width: 32%; height: auto;}
	.trsp img {height: 20px;}
}
@media only screen and (max-width: 960px) { 
	.chara {background-size: 65%; background-position: center -65px; min-height:650px;}
	.logo img {width: 27%; height: auto;}
	.trsp img {height: 0px;}
	.box img {width: 20%;}
}
@media only screen and (max-width: 860px) { 
	.topbg {background-size: 100%;}
	.chara {background-size: 65%; background-position: center -30px; min-height:650px;}
	.trsp {display: none;}
	.box {width: 48%; float: right; text-align: center; padding-left: 0;}
	.box img {width: 42%; height: auto;}
	.callout {width: 42%; float: right; text-align: center;}
	.callout img {width: 50%; height: auto;}
	.trspa img {height: 125px;}
	.trspb {display: block;}
	.trspb img {height: 80px; width: 20px;}
}
@media only screen and (max-width: 680px) { 
	.chara {background-size: 65%; background-position: center -20px; min-height:750px;}
	.box img {width: 75%; height: auto;}
	.callout img {width: 75%; height: auto;}
	.trspb img {height: 60px; width: 20px;}
}
@media only screen and (max-width: 640px) { 
	.chara {background-size: 75%; background-position: center -20px; min-height:700px;}
}
@media only screen and (max-width: 480px) { 
	.chara {background-size: 75%; background-position: center -20px; min-height:550px;}
	.trspa img {height: 145px;}
	.logo {top: -30px;}
}
@media only screen and (max-width: 478px) { 
	.chara {background-size: 75%; background-position: center -20px; min-height:500px;}
	.box img {width: 55%; height: auto;}
}
@media only screen and (max-width: 420px) {
	.logo {top: -30px;}
	.trspa img {height: 155px; width: 20px;}
}
@media only screen and (max-width: 375px) { 
	.chara {background-size: 75%; background-position: center 20px; min-height:450px;}
	.logo img {width: 35%; height: auto;}
	.trspa img {height: 145px; width: 20px;}
}
@media only screen and (max-width: 360px) { 
	.box img {width: 55%; height: auto;}
}


/*end top*/
/*beautiful */
.beautiful {background: url(../img/home/home_beautifulbg.jpg);background-repeat: no-repeat;background-size: auto 100%;background-position: center top;width: 100%;}
.beautiful .animated-slow{opacity:0}
.beautiful .fighter {width: 100%;text-align: left;}
.beautiful .fighter .table-cell#fighter-image img{width:100%;height:auto}
.beautiful .title {text-align: center;}
.beautiful .title img{width:90%;height:auto;z-index:5;position:relative}
.beautiful .text {text-align: left; width: 90%; font-size: 24px; line-height: 28px; margin: 2% auto;z-index:5;position:relative;text-shadow:0 0 5px #000,0 0 5px #000, 0 0 5px #000}
.beautiful .shadow {-webkit-filter: drop-shadow(0px 0px 8px rgba(14, 14, 14, 1.0)); filter: drop-shadow rgba(14, 14, 14, 1.0);}
#ani-elf{width:178px;;height:auto;background:transparent url(../img/home/anime_elf.png) 0 0 no-repeat;background-size:auto 100%;display:block;position:absolute;right:5%;top:20%;z-index:1}
#ani-elf img{width:100%;height:auto;display:block}
@media only screen and (max-width: 1680px) { 
	.beautiful .fighter { background-position: 10% bottom; height:100%; }
}
@media only screen and (max-width: 1366px) { 
	.beautiful .fighter { background-position: 10% bottom; background-size: 40%;}
	.beautiful .title {}
	.beautiful .title img {width: 85%; height: auto;}
}
@media only screen and (max-width: 1024px) { 
	.beautiful { height: auto; }
	.beautiful .fighter { background-position: 10% bottom; background-size: 40%;}
	.beautiful .title {}
	.beautiful .title img {width: 85%; height: auto;}
	.beautiful .text {font-size: 18px; line-height: 24px; }
	#ani-elf{right:2%}
}
@media only screen and (max-width: 768px) { 
	.beautiful { height:460px; }
	.beautiful .fighter { background: url(../img/home/tsp.png); background-repeat: repeat;}
	.beautiful .fighter .table{display:block}
	.beautiful .fighter .table-cell{display:block}
	.beautiful .fighter .table-cell#fighter-image{display:none}
	.beautiful .title {padding-top: 50px; width: 100%; margin: 0 auto; text-align: center;}
	.beautiful .text {width: 85%; margin: 25px auto; text-align: center;}
}
@media only screen and (max-width: 360px) { 
	.beautiful {background-size: cover; height:400px; }
	.beautiful .text {font-size: 16px; line-height: 18px; }


}
/* end beautiful */
/*compare */
.compare {background: url(../img/home/home_compare.jpg);background-repeat: no-repeat;background-size: 100%;background-position: center center;width: 100%;height:100%; height:800px; text-align: left;position:relative }
.compare .animated-slow{opacity:0}
.compare .wizard {width: 100%; background: url(../img/home/wizard.png);background-repeat: no-repeat; background-position: 95% top; height:100%; height:800px; text-align: left;position:relative}
.compare .title {padding-top: 100px; padding-left: 125px;z-index:5 }
.compare .text {text-align: left; font-size: 24px; line-height: 28px; padding-left: 135px; width: 600px;z-index:5;text-shadow:0 0 5px #000,0 0 5PX #000, 0 0 5px #000}
.compare .screens {text-align: left; float: left; margin-right: -60px;z-index:5}
.fixone {padding-left: 125px; padding-top: 40px;}
.fixtwo {padding-top: 225px;}
.fixthree {padding-top: 50px;}
#ani-amazon{width:164px;;height:auto;background:transparent url(../img/home/anime_amazon.png) 0 0 no-repeat;background-size:auto 100%;display:block;position:absolute;left:725px;top:10%;z-index:0}
#ani-amazon img{width:100%;height:auto;display:block}
@media only screen and (max-width: 1680px) { 
	.compare .screens {margin-right: -150px;}
	.compare .screens img {width: 80%; height: auto;}
}
@media only screen and (max-width: 1444px) { 
	.compare .wizard { background-position: 100% bottom; background-size: 40%;}
	.compare .screens {margin-right: -200px;}
	.compare .screens img {width: 70%; height: auto;}
    #ani-amazon{left:700px}
}
@media only screen and (max-width: 1280px) { 
	.compare {background-size: auto 100%;background-position: center center;height: 600px; }
	.compare .wizard { background-size: 35%; background-position:100% top; height:600px;}
	.compare .title {padding-top: 50px; padding-left: 125px; }
	.compare .title img {width: 50%; height: auto; }
	.compare .screens {margin-right: -200px;}
	.compare .screens img {width: 60%; height: auto;}
	.fixone {padding-left: 125px; padding-top: 30px;}
	.fixtwo {padding-top: 125px;}
	.fixthree {padding-top: 10px;}
    #ani-amazon{top:50%;left:75%;}
}
@media only screen and (max-width: 1024px) { 
    .compare .wizard{background-size:45%}
    .compare .title {padding-top: 50px; padding-left: 50px; }
	.compare .title img {width: 50%; height: auto; }
	.compare .text {font-size: 18px; line-height: 24px; padding-left: 65px;}
	.compare .screens {margin-right: -225px;}
	.compare .screens img {width: 55%; height: auto;}
	.fixone {padding-left: 50px; padding-top: 50px;}
	.fixtwo {padding-top: 150px;}
	.fixthree {padding-top: 55px;}
}
@media only screen and (max-width: 768px) { 
	.compare { height:auto; }
	.compare .text {font-size: 18px; line-height: 24px; }
	.compare .wizard { background: url(../img/home/tsp.png); background-repeat: repeat;}
	.fixone {padding-left: 50px; padding-top: 20px;}
	.fixtwo {padding-top: 110px;}
	.fixthree {padding-top: 25px;}
}
@media only screen and (max-width: 640px) { 
	.compare { height:auto; }
	.compare .title {padding-top: 50px; padding-left: 0px; width: 90%; margin: 0 auto;}
	.compare .text {text-align: left; padding-left: 0px; width: 90%; margin: 0 auto;}
	.compare .screens {margin-right: -300px;}
	.compare .screens img {width: 40%; height: auto;}
	.fixone {padding-left: 85px; padding-top: 20px;}
	.fixtwo {padding-top: 110px;}
	.fixthree {padding-top: 25px;}
}
@media only screen and (max-width: 480px) {
	.compare {background-size: cover;background-position: center center; height:500px; text-align: center; }
	.compare { height:640px; }
	.compare .screens {width: 100%; margin: 0px; text-align: center;}
	.fixone {padding-left:0px; padding-top: 10px;}
	.fixtwo {padding-top: 10px;}
	.fixthree {padding-top: 10px;}
	.compare .wizard {height: 500px;}
	.compare .title {padding-top: 20px; padding-left: 0px; text-align: center; width: 90%; margin: 0 auto;}
	.compare .title img {width: 100%; height: auto;}
	.compare .text {font-size: 18px; line-height: 24px; padding-left: 0px; text-align: center; width: 90%; margin: 20px auto;}
    #ani-amazon{left:65%}
}
/* end compare */
/*platforms */
.plat {background: url(../img/home/home_all.jpg);background-repeat: no-repeat;background-size:auto 100%;background-position: center top;width: 100%;padding:10% 0 }
.plat .table{width:90%;height:100%}
.plat .animated-slow{opacity:0}
.plat .title {text-align: center;z-index:99;width:95%;margin:0 auto}
.plat .title img{width:100%;height:auto}
.plat .text {text-align: left; width: 95%; font-size: 24px; line-height: 28px;margin:0 auto;text-shadoe:0 0 5px #000, 0 0 5px #000, 0 0 5px #000}
.plat .shadow {-webkit-filter: drop-shadow(0px 0px 8px rgba(14, 14, 14, 1.0));
     filter: drop-shadow rgba(14, 14, 14, 1.0);}
.plat .platscreen {text-align: center;}
#ani-sorceress{width:162px;;height:auto;background:transparent url(../img/home/anime_sorceress.png) 0 0 no-repeat;background-size:auto 100%;display:block;position:absolute;left:50%;top:15%;z-index:9}
#ani-sorceress img{width:100%;height:auto;display:block}
#ani-dwarf{width:211px;;height:auto;background:transparent url(../img/home/anime_dwarf.png) 0 0 no-repeat;background-size:auto 100%;display:block;position:absolute;left:83%;top:66%;z-index:9}
#ani-dwarf img{width:100%;height:auto;display:block}
@media only screen and (max-width: 1680px) { 
	.plat .title img {width: 100%; height: auto;}
	.plat .platscreen img {width: 90%; height: auto;}
}
@media only screen and (max-width: 1366px){
    #ani-sorceress{left:47%}
    #ani-dwarf{top:63%}
}
@media only screen and (max-width: 1024px) { 
	.plat .title {}
	.plat .title img {width: 100%; height: auto;}
	.plat .text {font-size: 18px; line-height: 24px;width:95%}
}
@media only screen and (max-width: 768px) {
	.plat {background-size: cover ; }
    .plat .table{display:block}
    .plat .table-cell{display:block}
	.plat .platscreen {text-align: center;}
	.plat .text {font-size: 18px; line-height: 24px;}
    #ani-sorceress{top:57%;left:auto;right:80%}
    #ani-dwarf{top:63%;left:auto;right:-1%}
}
@media only screen and (max-width: 480px) {
	.plat {background-size: cover;width: 100%;}
.six.columns                    { width: 100%;            }
 .plat .title {text-align: center; padding-top: 0px;  padding-left: 0px; margin-top: 20px; }
	.plat .title img {width: 90%; height: auto;}
	.plat .text {font-size: 18px; line-height: 24px; padding-left: 0px; text-align: center; width: 90%; margin: 20px auto;}
	.plat .platscreen {text-align: center; padding-top: 10px; margin-top: 0px; width: 90%; }
    #ani-sorceress{top:57%;right:-5%}
    #ani-dwarf{display:none}
}
/* end platforms */
.gdiv {width: 100%;}
.gdiv img {width: 100%;height: auto;position: relative;z-index: 1000;top: -43px;}
@media only screen and (max-width: 1680px) { 
	.gdiv img {top: -38px;}
}
@media only screen and (max-width: 1366px) { 
	.gdiv img {top: -30px;}
}
@media only screen and (max-width: 1024px) { 
	.gdiv img {top: -23px;}
}
@media only screen and (max-width: 768px) { 
	.gdiv img {top: -18px;}
}
@media only screen and (max-width: 640px) { 
	.gdiv img {top: -15px;}
}
@media only screen and (max-width: 480px) { 
	.gdiv img {top: -10px;}
}
@media only screen and (max-width: 326px) { 
	.gdiv img {top: -10%;}
}
/* purchase */
.purchase {background-color: #152b38; padding-bottom: 80px;}
.purchase .title {width: 90%; margin: 0 auto;}
.purchase .title img {width: 100%;max-width:1170px}
.purchase .shadow {-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .9));
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .9));}
.pre-content {width: 75%; margin: 30px auto 20px auto;}
.pre-content .purchase-link {display: inline-block;	width: 190px;height: 68px;background:url(../img/home/retail_bg.png) left top no-repeat;font-size: 24px;color: #FFF;position: relative;padding-top: 20px;}
.purchase-link a, .purchase-link a:visited {color:#fff; text-decoration:none; }
.purchase-link a:hover {text-decoration: underline;}
@media only screen and (max-width: 1680px) { 
	.purchase {}
}
@media only screen and (max-width: 1366px) { 
	.purchase {}
}
@media only screen and (max-width: 1280px) { 
	.purchase {}
	.purchase .title img {width: 75%; height: auto;}
}
@media only screen and (max-width: 1024px) { 
	.purchase {}
	.purchase .title img {width: 75%; height: auto;}
}
@media only screen and (max-width: 768px) { 
	.purchase {margin-top: 0px;}
	.purchase .title img {width: 75%; height: auto;}
}
/* end purchase*/
img{
   -ms-user-select: none;      /* IE 10+ */
   -moz-user-select: none;     /* Firefox all */
   -webkit-user-select: none;  /* Chrome all / Safari all */
   user-select: none;          /* Likely future */      
}
/* ==================== end home */