@charset "UTF-8";
@font-face{font-family:'UglyQua'; src:url(../font/UglyQua.ttf) format('truetype');}
/*RESET*/
*{padding:0; margin:0;}
ol,ul{list-style:none;}
a{text-decoration:none;}
em,b,i{font-style:normal;}
h2{font-family:'UglyQua'; color:#fff; text-shadow:1px 1px 2px black;}

/*Body Wrap*/
.wrap{width:90%; margin:0 auto;}
body{min-width:900px; max-width:1920px;}

/*Top contents*/
.top{width:100%; min-height: 900px; position:relative; background:url(../img/b1.jpg) no-repeat; background-size:100% cover; background-position-x: center; background-position-y: 70%}
.top .title{position:absolute; margin-top:100px; text-align:center; color:#fff; text-shadow:2px 2px 5px black;}
.top .title h1{font-size:60px;}
.top .title p{font-weight:bold;}
.top .toggle{margin-top:130px; float:right; cursor:pointer;}
.top .toggle span img{width: 45px;filter:drop-shadow(3px 3px 0 rgba(48,118,200,.8));}
.top>img{width:90%; height:auto; position:relative;}

/*Side nav*/
.sidenav{height:100%; width:0; position:fixed; z-index:999; top:0; right:0; background-color:white; overflow-x:hidden; padding-top:60px; transition:0.5s;}
.sidenav a, .sidenav p{padding:10px 8px 8px 80px; text-decoration:none; font-size:25px; display:block; transition:0.3s; font-family:'UglyQua'; color:#1a456f;}
.sidenav p{margin-top:60px; margin-bottom:-10px;}
.sidenav .hr{max-width:75%; height:auto; float:right; margin:15px 30px 10px 15px;}
.sidenav a:hover, .offcanvas a:focus{color:#F3EFB0;}
.sidenav .closebtn{position:absolute; top:-30px; right:25px; font-size:70px; margin-left:50px;}
@media screen and (max-height: 450px) {
    .sidenav{padding-top:15px;}
    .sidenav a{font-size:18px;}
}

/*AboutRiME*/
.aboutrime{width:100%; height:900px; background:url(../img/b2.png)bottom no-repeat; background-size:100%;}
.aboutrime .wrap h2{display:inline-block; font-size:30px; top:256px;}
.aboutrime .wrap h1{display:inline-block; font-size:50px; font-family:'UglyQua'; color:#fff; text-shadow:1px 1px 2px black; padding-top:100px;}
.aboutrime .wrap .acco-wrap .acco{width:214px; height:430px; float:left; margin-left:6%; position:relative; text-align:center;}
.aboutrime .wrap .acco-wrap .acco:first-child{margin-left:0;}
.aboutrime .wrap .acco-wrap .acco .acco1{background:url(../img/acco1.png) no-repeat; background-size:100%}
.aboutrime .wrap .acco-wrap .acco .acco2{background:url(../img/acco2.png) no-repeat; background-size:100%}
.aboutrime .wrap .acco-wrap .acco .acco3{background:url(../img/acco3.png) no-repeat; background-size:100%}
.aboutrime .wrap .acco-wrap .acco .acco4{background:url(../img/acco4.png) no-repeat; background-size:100%}
.aboutrime .wrap .acco-wrap .acco .accob{width:100%; height:100%; position:relative; border:none; outline:none; z-index:10;}
.aboutrime .wrap .acco-wrap .acco .accob h2{width:100%; display:block; position:absolute; top:254px; text-shadow:none; color:#092d4d; font-weight:100;}
.aboutrime .wrap .acco-wrap .acco .acco-txt{width:97%; height:220px; position:relative; background:url(../img/accob.png)bottom no-repeat; background-size:100%; background-size: cover;top:-174px; margin:0 auto;}
.aboutrime .wrap .acco-wrap .acco .acco-txt2 p{margin-bottom:15px;}
.aboutrime .wrap .acco-wrap .acco .acco-txt3 p{margin-bottom:25px;}
.aboutrime .wrap .acco-wrap .acco .acco-txt4 p{margin-bottom:12px;}
.aboutrime .wrap .acco-wrap .acco .acco-txt p{position:absolute; width:90%; color:white; font-family:"UglyQua"; font-size:16px; bottom:15px; right: 10px;}



/*Slider*/
.demo{width:100%;}
.demo ul{list-style:none outside none; padding-left:0; margin-bottom:0;}
.demo li{position:relative; display:block; float:left; margin-right:6px; cursor:pointer;}
.demo li h3{position:absolute; color:white; font-family:'UglyQua'; font-size:30px; bottom:120px; padding-left:80px; width:1000px; text-shadow:2px 2px 0 black; font-weight:100;}
.demo li h3 p{font-size:50px; display:inline-block;}
.demo .slide-img{display:block; height:auto; max-width:100%;}
.demo .logo-img{width:150px; height:auto; position:absolute; top:40px; right:40px;}


/*Screenshot*/
.gallery_box>.container{width:90%; height:420px; margin:0 auto; padding:20px;}
.gallery_box .text_box{margin:30px; text-align:center; font-family:'UglyQua'; font-size:20px; line-height:1.2; color:white; text-shadow:2px 2px 0 rgba(48,118,200,.8);}
.gallery_box .text_box img{width:300px; margin:0 auto;}
.screenshot_box{margin-left:154px;}
#box-container{margin:0; padding:0}
.box{list-style-type:none; float:left; margin-bottom:1rem; margin-left:1%; margin-right:1%; width:20%; transition:all 0.2s;}
.box:hover{opacity:0.7;}
.box:nth-child(4n+1){clear:both; margin-left:0}
.box:nth-child(4n+0){margin-right:0;}
.box a{display:block; width:100%; height:auto;}
.box a img{-webkit-back-visibility:hidden; display:block; width:100%; height:auto; vertical-align:bottom;}



/*Prize*/
.prize_box .container{width:90%; max-width:1024px; height:500px; margin:0 auto; padding:20px 20px;}
.prize_box .text_box{margin-bottom:30px; text-align:center; font-family:'UglyQua'; font-size:20px; color:white; text-shadow:2px 2px 0 rgba(48,118,200,.8);}
.prize_box .text_box p{display:inline; position:relative; top:-8px; font-size:33px;}
.prize_box .text_box img{width:500px; height:20px;}
.prize_box .image_box{height:400px;}
.image_box .line_1{height:167px; margin-bottom:20px;}
.image_box .line_1 .content{height:100%; position:relative; margin-left:80px; width:auto;}
.image_box .line_2 .content{margin:10px 10px 10px 195px;}
.award{position:relative; width:220px; height:167px; display:inline-block; background-size:contain; background-repeat:no-repeat;}
.award p{position:absolute; margin:0 auto; width:100%; top:-15px; left:-10px; color:white; font-size:30px; text-align:center; font-family:'UglyQua'; text-shadow:2px 2px 0 rgba(48,118,200,.8);}
.award img{position:absolute; width:200px; filter:drop-shadow(2px 2px 0 rgba(48,118,200,.8));}



/*Buy now*/
.buy_box .container{width:90%; max-width:1024px; height:200px; margin:0 auto; padding:20px 20px;}
.buy_box .text_box{text-align:center; font-family:'UglyQua'; font-size:20px; color:white; text-shadow:2px 2px 0 rgba(48,118,200,.8);}
.buy_box .text_box img{width:400px;}
.buy_box .store_box{bottom:-20px; position:relative;}
.buy_box .store_box a{transition:all 0.2s;}
.buy_box .store_box a:hover{opacity:0.4;}
.buy_box .store_box a:nth-child(1) img{width:100px; height:auto; margin-left:40px;}
.buy_box .store_box a:nth-child(2) img{width:300px; height:auto;}
.buy_box .store_box a:nth-child(3) img{width:240px; height:auto; top:-30px; position:relative;}
.buy_box .store_box a:nth-child(4) img{width:230px; height:auto; top:-10px; position:relative; margin-left:40px;}



/*Screenshot & Prize & Buy now background*/
.background-merge{background:url(../img/background-merge.png); background-size:100% 100%; /*background:url(../img/bird.png)center no-repeat, url(../img/cloud.png)center center no-repeat/auto 80%, url(../img/sky.jpg)-0% 80% no-repeat;*/}



/*footer*/
.footer{width:100%; height:50px; background:black;}
.footer .footer-wrap{width:100%;text-align: center;}
.footer .footer-wrap img{width:auto; height:30px; padding:10px;}
.footer .footer-wrap p{color:#fff; font-size:15px; display:inline-block; position:absolute; line-height:50px; right: 10px;}