@charset "UTF-8";
/**
 * 
 * @authors Mina
 */

@media only screen and (max-width: 1600px) {
	
	#s4 {
		height: 76vw;
	}

	#s4 .menu li {
		max-width: 279px;
	    width: 17.44%;
	    height: auto;
	    padding-top: 72.75%;
	    margin: 0 -0.6%;
	}

	#s4 .chara_bg {
		top: 24.5vw;
	}

	#s4 .team_logo {
		margin-top: auto;
	    top: 10.3vw;
	}

	#s4 .chara_list {
		top: 24.5vw;
	}

	#s4 .chara_list li {
		max-width: 272px;
		min-width: 220px;
	    width: 18.14%;
	}

	#s4 .chara_list li .box {
		max-width: 699px;
	    width: 43.7%;
	    height: auto;
	    padding-top: 30.38%;
	}

	@keyframes box_ani {
		from{width: 0}
		  to{width: 43.7%;}
	}

	#s4 .chara_list .mid {
		max-width: 435px;
		width: 62.24%;
		height: auto;
		padding-top: 54.37%;
		margin-top: auto;
		top: 8%;
	}

	#s4 .mid .job {
		font-size: 3.9vw;
	}

	#s4 .mid .name {
		font-size: 3.45vw;
	}

	#s4 .mid .en {
		font-size: 0.8vw;
	}

	#s4 .mid .title {
		font-size: 2.5vw;
	}

	#s4 .mid .txt {
		line-height: 1.6vw;
	}

	#s4 .chara_list.team2 .mid .txt,
	#s4 .chara_list.team3 .chara1 .mid .txt,
	#s4 .chara_list.team3 .chara2 .mid .txt,
	#s4 .chara_list.team4 .chara3 .mid .txt,
	#s4 .chara_list.team1 .chara3 .mid .txt,
	#s4 .chara_list.team1 .chara4 .mid .txt,
	#s4 .chara_list.team1 .chara5 .mid .txt {
		font-size: 13px;
		top: 48.5%;
	}

	#s4 .chara_list.team4 .mid .after {
		font-size: 0.8vw;
	}

	/* #s4 .chara_list.team4 .mid .line1 .after {
		left: -14.5%;
		transform: scale(0.85);
	} */

	#s4 .mid .before {
	    font-size: 0.9vw;
	    position: absolute;
	    line-height: 1.8vw;
	}

	/* #s4 .chara_list.team4 .mid .before {
	    left: -4%
	} */

	#s4 .mid .after {
	    left: 42%;
		width: 58%;
		font-size: 0.9vw;
		position: absolute;
	    line-height: 1.8vw;
	}

	#s4 .mid ul li {
		position: absolute;
	}

	#s4 .mid ul li:nth-child(1) {
		top: 0;
	}

	#s4 .mid ul li:nth-child(2) {
		top: 36%;
	}

	#s4 .mid .line2 li:nth-child(2) {
		top: 57%;
	}

	#s4 .mid ul li:nth-child(3) {
		top: 71%;
	}

	/* #s4 .chara_list.team4 .mid .line1 {
		width: 51%;
	} */

	#s5 .swiper-container {
		max-width: 861px;
	    width: 53.82%;
	    height: auto;
	    padding: 0.8% 1.07%;
	}

	#s5 .swiper-slide {
		padding-top: 56.22%;
	}

	#s5 .swiper-button-prev, #s5 .swiper-button-next {
		left: -65%;
	}

	#s5 .swiper-button-prev:hover {
		left: -65.5%;
	}

	#s5 .swiper-button-next:hover {
		left: 65.5%;
	}

	#s5 .swiper-button-next {
		left: 65%;
	}

	#s5 .dot_bg {
		width: 50%;
	}

	#s5 .dot_bg:before, #s5 .dot_bg:after {
		width: 38.6%;
	}

}

@media only screen and (max-width: 1200px) {
	
	#s4 {
		height: 912px;
	}

	#s4 .chara_bg.team1 {
		top: 53.5vw;
	}

	#s4 .chara_list {
	    width: 800px;
	}

	#s4 .chara_list li {
		height: 495px;
	}

	#s4 .chara_list li .box {
		width: 524px;
		height: 364px;
		padding-top: 0;
	}

	#s4 .mid .job {
		font-size: 47px;
	}

	#s4 .mid .name {
	    font-size: 41px;
	}

	#s4 .mid .en {
		font-size: 9px;
	}

	#s4 .mid .title {
		font-size: 30px;
	}

	#s4 .mid .txt {
		line-height: 19px;
	}

	#s4 .mid .before {
		font-size: 12px;
		line-height: 23px;
		width: 56px;
		top: -2px;
		left: 0 !important;
	}

	#s4 .mid .after {
		line-height: 23px;
		font-size: 12px;
	    width: 58%;
        left: 42%;
	}

	/* #s4 .mid ul li {
		margin-bottom: 5px;
	} */

	#s4 .chara_list.team4 .mid .line1 {
		width: 41.5%;
	}

	#s4 .chara_list.team4 .mid .after {
		font-size: 10px
	}

	@keyframes box_ani {
		from{width: 0}
		  to{width: 524px;}
	}

	#s4 .chara_list.team1 .chara1 .pic.pic_focus {
	    transform: translate(31%, 39%) scale(1.217);
	}

	#s4 .chara_list.team1 .chara2 .pic.pic_focus {
	    transform: translate(-74%, 39%) scale(1.217);
	}

	#s4 .chara_list.team1 .chara3 .pic.pic_focus {
	    transform: translate(-178%, 39%) scale(1.217);
	}

	#s4 .chara_list.team1 .chara4 .pic.pic_focus {
	    transform: translate(-21%, -61.55%) scale(1.217);
	}

	#s4 .chara_list.team1 .chara5 .pic.pic_focus {
	    transform: translate(-126%, -61.55%) scale(1.217);
	}

	#s5 .swiper_box {
		margin-top: auto;
		position: absolute;
		bottom: 29vw;
	}

}

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

	#s4 .chara_bg {
		top: 258px;
	}

	#s4 .chara_bg.team1 {
		top: 562px;
	}

	#s1 .logo {
		margin-top: -1%;
	}

	#s1 .title0 {
		margin-top: 20vh;
	}

	#s2 .videos li {
		max-width: 407px;
    	width: 38.5vw;
    	height: auto;
    	padding-top: 22.2vw;
	}

	#s2 .videos .title {
		top: 0;
    	position: absolute;
	}

	#s4 .menu li {
		height: 765px;
	    padding-top: 0;
	    width: 183px;
	    margin: 0 -6px;
	}

	#s4 .team_logo {
		margin-top: auto;
		top: 8%;
	}

	#s4 .chara_list {
		top: 257px;
	}

	#s5 .swiper-container {
		width: 565px;
	    height: 317px;
	    padding: 8px 10px;
	}

	#s5 .swiper-slide {
		padding-top: 0;
	}

	#s5 .swiper-button-prev, #s5 .swiper-button-next {
		left: -684px;
	}

	#s5 .swiper-button-prev:hover {
		left: -688px;
	}

	#s5 .swiper-button-next:hover {
		left: 688px;
	}

	#s5 .swiper-button-next {
		left: 684px;
	}

	#s5 .dot_bg {
		width: 525px;
	}

	#s5 .dot_bg:before, #s5 .dot_bg:after {
		width: 202px;
	}

	#s6 {
		height: 1367px;
	}

	#s6 .news_resize {
	    max-width: 800px;
	    position: absolute;
	    top: 0;
	    right: 0;
	    left: 0;
	    margin: 0 auto;
	    height: 100%;
	}

	#s6 .title {
		background-size: contain;
	    position: absolute;
	    top: 12%;
	    margin-top: auto;
	    left: 31.5%;
        width: 50.38%;
        height: auto;
        padding-top: 16.63%;
	}

	#s6 .box {
		position: absolute;
	    margin-top: auto;
	    right: 0;
	    left: 0;
	    top: 24%;
	    width: 76.875%;
	    background: #ffffff;
	    height: auto;
	    padding-top: 104%;
	}

	#s6 .box .more {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_more_sp.png') top center no-repeat;
		background-size: contain;
	    max-width: 182px;
	    width: 29.6%;
	    height: auto;
	    padding-top: 9.76%;
	    right: 0;
	    left: 0;
	    margin: 0 auto;
	}

	#s6 .box .more:hover {
		right: 0;
	}

	#s6 .swiper_box {
		max-width: 584px;
	    width: 95%;
	    padding-top: 57.56%;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
	    top: 2%;
	}

	#s6 .swiper-container3 {
		width: 100%;
		height: 100%;
		top: 0;
	    position: absolute;
	}

	#s6 .dot_bg {
		top: auto;
	    bottom: 2%;
	    position: absolute;
	    left: 0;
	    right: 0;
	    text-align: center;
	}

	#s6 .swiper-pagination3 .swiper-pagination-bullet {
		width: 1.2%;
		height: auto;
		padding-top: 1.2%;
		border: 0.2vw solid #000;
		margin: 0 1%;
	    background: #000 !important;
	    border-radius: 0;
    	opacity: 1;
	    transition: unset;
	}

	#s6 .swiper-pagination3 .swiper-pagination-bullet-active {
		background: #fff100 !important;
	}

	#s6 .swiper-pagination3 .swiper-pagination-bullet span {
		display: none;
	}

	#s6 .list_box {
	    top: 48%;
        max-width: 569px;
        width: 92.5%;
        margin: 0 auto;
        left: 0;
        right: 0;
        padding-top: 67%;
	}

	#s6 .list_box .tabs {
		height: auto;
		position: absolute;
		width: 100%;
		top: 0;
	}

	#s6 .list_box .tabs li {
	    height: auto;
        padding-top: 1.85%;
        padding-bottom: 1.85%;
        width: 18.81%;
        max-width: 107px;
        line-height: unset;
        background-position: -48% -145%;
        margin-right: 1.4%;
        font-size: 21px;
	}

	#s6 .list_box .tabs li.tab_active {
		background-size: 50%;
	    background-position: -35% -145%;
	    padding-left: 2%;
	}

	#s6 .list_box .newslist {
		position: absolute;
        top: 15%;
	    width: 100%;
	    height: auto;
	}

	#s6 .list_box .newslist li {
		height: auto;
	    padding-top: 4.835%;
	    padding-bottom: 4.835%;
	    line-height: 0;
	    font-size: 20px;
	    padding-left: 13.5%;
        padding-right: 19%;
        margin-bottom: 0.95%;
	}

		#s6 .list_box .newslist li.tab1,
		#s6 .list_box .newslist li.tab2,
		#s6 .list_box .newslist li.tab3,
		#s6 .list_box .newslist li.tab4 {
			background-size: 8.8%;
		    background-position-x: 2%;
		}

	#s6 .list_box .newslist li span {
		font-size: 14px;
		right: 2%;
	}
	
}

@media only screen and (max-width: 900px) {
	#s2 .videos li {
		width: 348px;
		height: 202px;
		padding-top: 0;
	}

	#s3 .pic {
		right: auto;
		left: -188px;
	}

	#s3 .mid {
		left: auto;
		right: 11px;
	}
}


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

	#s1 .pic {
		right: unset;
		left: 9%;
	}

	#s5 .title {
		left: -262px;
	}

	#s5 .pic {
		right: -492px;
	}

	#s5 .swiper_box {
		bottom: 238px;
	}

}


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

	body {
		min-width: 320px;
	}

	#app_loading {
		background-size: 180%;
	}

	#app_loading .loadingbg {
		max-width: 168px;
	    width: 30%;
	}

	#app_loading img {
		width: 30%;
	}

	#top_menu, #s1 .scroll_effect, #s4 .page1, #s4 .page2 {
		display: none !important;
	}

	#top_sp {
		display: block;
		position: absolute;
		top: 0.25%;
		z-index: 1;
		width: 100%;
		padding-top: 6%;
		animation: fadeInDown .6s forwards;
	}

	#top_sp .top_menu_right {
		top: 50%;
	    transform: translate(0,-50%);
	    position: absolute;
	    right: 1%;
	    display: inline;
	    float: right;
	    width: 20%;
	}

	#top_sp .top_menu_right li {
		display: inline-block;
		width: 38%;
		padding-top: 38%;
		cursor: pointer;
		position: relative;
	}

	#top_sp .top_menu_right li.fb {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_icon.svg') right bottom no-repeat;
	    background-size: 200%;
	    margin-right: 5%;
	}

	#top_sp .top_menu_right li.music.off {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_icon.svg') right top no-repeat;
		background-size: 200%;
	}

	#top_sp .top_menu_right li.music.on {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_icon.svg') left top no-repeat;
		background-size: 200%;
		animation: music_rotate 2s infinite linear;
	}

	#s1 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/main_bg_sp.jpg') top center no-repeat;
		background-size: contain;
		height: auto;
	    padding-top: 154.5%;
	    margin-top: auto;
	    background-position: 0 0;
	}

	#s1 .pic {
		left: 1.5%;
	    min-width: auto;
	    width: 122%;
	    height: auto;
	    padding-top: 107.25%;
	    top: -0.5%;
	    animation: fadeInRight .6s forwards;
	}

	#s1 .mid {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/main_pic_mask.png') top center no-repeat;
		background-size: contain;
	    left: 0;
	    padding-top: 68%;
	    top: 56.5%;
	}

	#s1 .mid:before {
		content: ' ';
		position: absolute;
		top: 16%;
		background: #fff;
		width: 100%;
		height: 30%;
	}

	#s1 .logo {
		min-width: auto;
		width: 41%;
		height: auto;
		padding-top: 22%;
		margin: 0 auto;
		position: absolute;
		top: 14%;
		right: 0;
		left: 0;
		animation: fadeIn .6s forwards;
		transition-delay: unset;
	}

	#s1 .title0 {
		width: 84%;
	    height: auto;
	    padding-top: 10%;
	    margin-top: auto;
	    min-width: auto;
	    max-width: 672px;
	    top: 50%;
	    position: absolute;
	    right: 0;
	    left: 0;
	    animation: fadeIn .6s forwards;
	    transition-delay: unset;
	}

	#s1 .title1 {
		min-width: auto;
	    position: absolute;
	    width: 55.75%;
	    max-width: 446px;
	    height: auto;
	    padding-top: 4.75%;
	    right: 0;
	    left: 0;
	    top: 64.3%;
	    margin-top: auto;
	    animation-delay: 0.6s
	}

	#s2 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video_bg_sp.png') top center no-repeat;
		background-size: contain;
		width: 100%;
		height: auto;
		padding-top: 56.5%;
		margin-top: -7.5%;
	    overflow: unset;
	}

	#s2 .apps {
		margin-top: auto;
		position: absolute;
		width: 100%;
		top: -14.5%;
		transition-delay: .6s;
	}

	#s2 .google {
		width: 23.5%;
		height: auto;
		padding-top: 7%;
	}

	#s2 .ios {
		width: 21.5%;
		height: auto;
		padding-top: 7%;
	}

	#s2 .apk {
	    width: 34.75%;
        height: auto;
        padding-top: 7%;
		background-size: contain;
	}

	#s2 .videos {
		position: absolute;
	    width: 100%;
	    margin-top: auto;
	    top: 28%;
	}

	#s2 .videos li {
		width: 43.25%;
		height: auto;
		padding-top: 25%;
		max-width: none;
		border: 0.1vw #fff solid;
		box-shadow: 0 0 0 0.25vw #fff, 0.2vw 0.5vw 2vw 0vw #000;
	}

	#s2 .videos .title {
		width: 80.35%;
		height: auto;
		line-height: 0;
		padding: 4.5% 0 9.5% 0;
		background-size: contain;
		margin-top: -5%;
		margin-left: -6%;
		font-size: 2vw;
	}

	#s2 .video_play {
		width: 20.5%;
		height: auto;
		padding-top: 20.5%;
	}

	#s2 .video_play:hover {
		width: 22.5%;
		padding-top: 22.5%;
	}

	#s2 .arrow_move {
		display: block;
	    position: absolute;
	    top: -14%;
	    right: 1%;
	    width: 4.2%;
	    padding-top: 7%;
	    border: #00a0e9 0.1vw solid;
	    animation: fadeInRight 1s forwards;
	}

	#s2 .arrow_move span {
		width: 100%;
		position: absolute;
	    top: 0;
	}

	#s2 .arrow_move span:before, #s2 .arrow_move span:after {
		content: ' ';
	    position: absolute;
	    background: #00a0e9;
	    width: 45%;
	    padding-top: 12%;
	    transform: rotate(25deg);
	    left: 10%;
	}

	#s2 .arrow_move span:after {
		transform: rotate(-25deg);
	    left: 45%;
	}

	#s2 .arrow_move span:nth-child(1) {
		top: 26%;
		animation: arrow_down_ani 1s infinite;
	}

	#s2 .arrow_move span:nth-child(2) {
		top: 46%;
		animation: arrow_down_ani 1s infinite;
		animation-delay: .25s;
	}

	#s2 .arrow_move span:nth-child(3) {
		top: 66%;
		animation: arrow_down_ani 1s infinite;
		animation-delay: .4s;
	}

	@keyframes arrow_down_ani {
		0%, 50.1%, 100% {margin-top: 0; opacity: 0.4}
		50% {margin-top: 7%; opacity: 1}
	}

	#s3 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_bg_sp.jpg') top center no-repeat;
	    background-size: contain;
		height: auto;
	    padding-top: 168.25%;
	    margin-top: -7.5%;
	}

	#s3 .pic {
		position: absolute;
	    top: 12.5%;
	    max-width: unset;
	    min-width: auto;
	    width: 92%;
	    height: auto;
	    padding-top: 138%;
	    left: 5%;
	    transition: none;
        transform: none;
	    opacity: 1;
	}

	#s3 .pic:after {
		content: ' ';
	    position: absolute;
	    bottom: 5%;
	    width: 100%;
	    box-shadow: 0 0 12vw 20vw #fff;
	}

	#s3 .mid {
		top: 0;
	    width: 100%;
	    right: 0;
	    height: 100%;	    
	}

	#s3 .title {
		max-width: 406px;
		width: 50.75%;
		height: auto;
		padding-top: 16.88%;
		margin: 0 auto;
		position: absolute;
		top: 7%;
		right: 7%;
		background-size: cover;
	}

	#s3 .txt {
		margin: 0 auto;
		position: absolute;
		top: 48%;
		width: 100%;
	}

	#s3 .txt li {
		margin-bottom: auto;
	    width: 85%;
	    margin: 0 auto;
        margin-top: 3.5%;
        height: auto;
        background-size: contain;
	}

	#s3 .txt1 {
	    padding-top: 7.3%;
	}

	#s3 .txt2 {
		padding-top: 10.5%;
	}

	#s3 .txt3 {
		padding-top: 10.5%;
	}

	#s3 .txt4 {
		padding-top: 7.3%;
	}

	#s3 .photo {
		position: absolute;
		margin: 0 auto;
		top: 80%;
		right: 0;
		left: 0;
	}

	#s3 .photo li {
		width: 25%;
	    height: auto;
	    padding-top: 18%;
	    margin: 0 2%;
	    border: .2vw solid #fff;
	}

	#s3 .more {
		width: 16.5%;
	    height: auto;
	    padding-top: 14.8%;
	    right: -1%;
	    bottom: -1%;
	}

	#s3 .more:before {
		top: 1%;
		left: 18%;
	}

	#s3 .more_pic {
		width: 36%;
		height: auto;
		padding-top: 36%;
	}

	#s3 .more_pic:after {
		height: auto;
		padding-top: 21%;
		width: 100%;
	}

	#s3 .more_pic:before {
		width: 20%;
	    height: auto;
	    padding-top: 100%;
	}

	#s4 {
		margin-top: -8%;
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_bg_sp.png') top center no-repeat;
		padding-top: 162.63%;
	    height: auto;
        background-size: contain;
	}

	#s4 .page3_sp {
		display: block;
	}

	#s4 .page3_sp .team_logo {
		width: 27%;
	    height: auto;
	    padding-top: 20%;
	    background-size: 219%;
	    left: auto;
	    right: 6%;
	    top: 5%;
	    pointer-events: none;
	}

	.team_logo_ani {
		animation: fadeInRight .6s forwards;
	}

	#s4 .page3_sp .team_logo.team1 {
		background-position: 0 0;
	}

	#s4 .page3_sp .team_logo.team2 {
		background-position: 98% 0;
	}

	#s4 .page3_sp .team_logo.team3 {
		background-position: 0 99%;
	}

	#s4 .page3_sp .team_logo.team4 {
		background-position: 98% 99%;
	}

	#s4 .page3_sp .team_bg {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_team_bg.svg') center center no-repeat;
	    width: 96.88%;
        padding-top: 24%;
        position: absolute;
        left: 50%;
        top: 23.5%;
        transform: translate(-50%, 0);
        background-size: 100%;
        animation: chara_bg_ani .6s forwards;
	}

	#s4 .page3_sp .team_bg.team1 {
		background-position-y: 33%;
	}

	#s4 .page3_sp .team_bg.team2 {
		background-position-y: 66%;
	}

	#s4 .page3_sp .team_bg.team3 {
		background-position-y: 99%;
	}

	#s4 .page3_sp .team_bg.team4 {
		background-position-y: 0%;
	}

	#s4 .page3_sp .pic {
		width: 67.5%;
		padding-top: 120%;
		position: absolute;
		top: 0;
		margin: 0 auto;
		right: 0;
		left: 0;
	}

	#s4 .page3_sp .pic {
		background-size: cover !important;
		z-index: 1;
	}

	#s4 .page3_sp .chara1 {
		top: -6%;
	}

	#s4 .page3_sp .chara4 {
		top: 4%;
	}

	#s4 .page3_sp .chara7 {
		top: 3%;
	}

	#s4 .page3_sp .chara6 {
		top: 6%;
	}

	#s4 .page3_sp .chara10 {
		top: -3%;
	}

	#s4 .page3_sp .chara9 {
		top: 6%;
	}

	#s4 .page3_sp .chara12 {
		top: 3%;
	}

	#s4 .page3_sp .chara14 {
		top: -4%;
	}

	#s4 .page3_sp .box {
		width: 90.63%;
		padding-top: 62.5%;
		position: absolute;
		top: 45.5%;
		left: 50%;
		transform: translate(-50%,0);
		z-index: 10;
		overflow: hidden;
	}

	#s4 .page3_sp .box.team1 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop1.svg') top left no-repeat;
		background-size: cover;
	}

	#s4 .page3_sp .box.team2 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop4.svg') top left no-repeat;
		background-size: cover;
	}

	#s4 .page3_sp .box.team3 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop3.svg') top left no-repeat;
		background-size: cover;
	}

	#s4 .page3_sp .box.team4 {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop2.svg') top left no-repeat;
		background-size: cover;
	}

	#s4 .page3_sp .box .mid {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop_in.svg') center center no-repeat;
		background-size: contain;
		width: 62.35%;
		padding-top: 54.49%;
		position: absolute;
		margin: 0 auto;
		margin-top: auto;
		left: 0;
		right: 0;
		top: 10%;
	}

	#s4 .page3_sp .mid .job {
		top: -2.5%;
		left: 14%;
		font-size: 8vw;
		letter-spacing: -0.1vw;
	}

	#s4 .page3_sp .mid .name {
		font-size: 7.2vw;
	}

	#s4 .page3_sp .mid .en {
		font-size: 1.7vw;
	    top: 22.2%;
	}

	#s4 .page3_sp .mid .title {
		font-size: 5.3vw;
	}

	#s4 .page3_sp .mid .txt {
		font-size: 1.85vw;
	    line-height: 3.4vw;
	    top: 51%;
	}

	/* #s4 .page3_sp .mid ul li {
		margin-bottom: 6%;
	}
 */
	#s4 .page3_sp .mid .before {
		line-height: 3.5vw;
	    top: 0;
	    width: 42%;
	    font-size: 1.65vw;
	    text-align: center;
	}

	#s4 .page3_sp .mid .after {
	    font-size: 1.65vw;
		width: 58.5%;
		text-align: center;
		left: 42%;
		line-height: 3.5vw;
	}

	#s4 .page3_sp .arrow {
		position: absolute;
	    top: 29.5%;
        width: 90%;
        margin: 0 auto;
        right: 0;
        left: 0;
        padding-top: 7.78%;
	}

	#s4 .page3_sp .arrow div {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_arrow.svg') top center no-repeat;
		background-size: contain;
		width: 6.12%;
	    height: auto;
	    padding-top: 7.78%;
        position: absolute;
        cursor: pointer;
        transition: .3s;
        top: 0;
	}

	#s4 .page3_sp .arrow .arrow_prev {
		left: 0;
	}

	#s4 .page3_sp .arrow .arrow_next {
		transform: scale(-1);
	    right: 0;
	}

	#s4 .page3_sp .arrow .arrow_prev:hover {
		left: -1%;
	}

	#s4 .page3_sp .arrow .arrow_next:hover {
		right: -1%;
	}

	#s4 .page3_sp .charamenu {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu.svg') top left no-repeat;
		background-size: 36%;
	    position: absolute;
	    top: 86.5%;
	    width: 92%;
	    padding-top: 3.88%;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
	}

		#s4 .swiper-container2 {
			width: 60%;
		    position: relative;
		    overflow: hidden;
	        margin-top: -3.6%;
	        left: 38%;
		}

		#s4 .swiper2-button-prev:focus, #s4 .swiper2-button-next:focus {
			outline: 0;
		}

		#s4 .swiper-slide {
			width: 11%;
		    height: auto;
		    padding-top: 5.5%;
		    filter: brightness(0.6);
		    background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu001.png') top left no-repeat;
		    background-size: contain;
		}

		#s4 .swiper-slide-active {
			border-bottom: #fff100 0.3vw solid;
			filter: brightness(1);
		}

		#s4 .swiper3 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu001.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper2 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu002.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper4 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu003.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper1 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu004.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper5 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu005.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper7 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu006.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper6 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu007.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper8 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu008.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper10 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu009.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper9 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu010.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper11 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu011.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper13 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu012.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper12 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu013.png') top left no-repeat;
			background-size: contain;
		}

		#s4 .swiper14 {
			background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_menu014.png') top left no-repeat;
			background-size: contain;
		}

		.sp_pic_ani {
			animation: fadeInRight .2s forwards;
		}

		#s4 .page3_sp .both .txt {
			top: 48%;
		}

	#s5 {
		padding-top: 141%;
	    height: auto;
	    margin-top: -6%;
	}

	#s5 .title {
		background-size: contain;
		position: absolute;
	    top: 23%;
	    margin-top: auto;
	    width: 48.25%;
	    height: auto;
	    padding-top: 16.63%;
	    left: 3%;
	    right: auto;
	}

	#s5 .pic {
		background-size: cover;
		top: 2%;
	    left: auto;
	    transform: none;
	    transition: none;
	    opacity: 1;
	    right: -16%;
	    width: 98.8%;
	    height: auto;
	    padding-top: 100%;
	}

	#s5 .swiper_box {
		bottom: auto;
	    top: 23.5%;
	}

	#s5 .swiper-container {
		width: 88%;
		height: auto;
		padding: 27% 2% 27% 2%;
		transition: none;
		transform: none;
		opacity: 1;
	}

	#s5 .swiper-slide {
		padding-top: 56.2%;
	}

	#s5 .swiper-button-prev, #s5 .swiper-button-next {
		background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/feature_arrow.png') center center no-repeat;
		background-size: contain;
		width: 4%;
		height: auto;
		padding-top: 5.13%;
		margin-top: auto;
		top: 79.5%;
		left: -89%;
		transition: .3s;
	}

	#s5 .swiper-button-next {
		left: 89%;
	}

	#s5 .swiper-button-prev:hover {
		left: -90%;
	}

	#s5 .swiper-button-next:hover {
		left: 90%;
	}

	#s5 .dot_bg {
		position: absolute;
	    right: 0;
	    left: 0;
	    margin-top: auto;
	    top: 80.5%;
	    width: 79%;
	    height: auto;
	    padding-top: 2.63%;
	}

	#s5 .dot_bg:before, #s5 .dot_bg:after {
		width: 38%;
		height: auto;
	    padding-top: 0.05%;
	}

	#s5 .swiper-pagination {
		top: 50%;
	    transform: translate(0 , -50%);
	}

	#s5 .swiper-pagination-bullet {
		width: 1.2%;
	    height: auto;
	    padding-top: 1.2%;
	    border: 0.2vw solid #000;
	    margin: 0 1%;
	}

	#s6 {
		margin-top: -11%;
	    height: auto;
	    padding-top: 188.25%;
	}

	#s6 .list_box .tabs li {
		font-size: 2.6vw;
	}

	#s6 .list_box .newslist li {
		font-size: 2.5vw;
	}

	#s6 .list_box .newslist li span {
		font-size: 1.7vw;
	}


	#gotop {
		right: 0;
		left: 0;
		margin: 0 auto;
		position: relative;
		margin-top: -20.5%;
		width: 17.09%;
		height: auto;
		padding-top: 17.09%;
	}

	footer {
		background-size: 200%;
		height: auto;
	    /* padding-top: 38.75%; */
	    margin-top: 3.4%;
	    position: relative;
	}

	body.news_main footer {
		margin-top: auto;
	}

	footer .in {
		max-width: none;
		position: relative;
		top: 0;
		width: 100%;
	}

	footer .pic {
		width: 100%;
	    left: auto;
	    padding-top: 4%;
	    transform: none;
	    position: relative;
	}

	footer .pic li {
		margin: 0 2.5%;
	}

	footer .pic ul li {
	    text-align: center;
	    font-size: 1.8vw;
        line-height: 2.3vw;
	}

	footer .dena {
		width: 16.9%;
		height: auto;
		padding-top: 7.63%;
	}

	footer .toei {
		width: 18.75%;
	    height: auto;
	    padding-top: 12.25%;
	}

	footer .game {
		height: auto;
	    padding-top: 0;
	    font-size: 2vw;
	    transform: translate(-50%, 0);
	    left: 50%;
	    width: 68%;
	    position: relative;
	    padding-left: 13%;
	}

	footer .pic p {
	    font-size: 12px;
	    padding: 0.5% 0 1.7% 0;
	    border-bottom: 0.1vw #00a0e9 solid;
	    width: 80%;
	    margin: 0 auto;
	}

	footer .info {
		transform: none;
	    right: 0;
	    left: 0;
	    font-size: 10px;
	    margin-top: 2%;
        padding-bottom: 2%;
	    text-align: center;
	    position: relative;
	}

	footer .info p {
		margin-top: 1%;
	}

	#popframe {
		min-width: 320px;
	}

	#popframe .box {
		width: 65.58%;
		height: auto;
		padding-top: 47.5%;
	}

	#popframe .video_box {
		width: 100%;
	    height: auto;
	    padding-top: 58%;
	}

	#popframe .box .close, #popframe .agreement_box .close {
		width: 8%;
	    height: auto;
	    padding-top: 8%;
	}

	#popframe .video_box .close {
		width: 5%;
	    height: auto;
	    padding-top: 5%;
	}

	#popframe .agreement_box .close {
		top: -9.5%;
	}

	#popframe .close:before, #popframe .close:after {
		height: auto;
		padding-top: 4.5%;
		top: 48%;
		left: -10%;
	}

	#popframe .agreement_box {
		width: 90%;
	    height: auto;
	    padding-top: 90%;
	}

	#popframe .agreement {
		top: 0;
	    position: absolute;
	    padding: 2% 0.6% 2% 2%;
	    font-size: 1.9vw;
	    line-height: 2.2vw;
	}

	#popframe .title {
		font-size: 2.3vw;
		margin-bottom: 1%;
	}

	#popframe p, #popframe ul, #popframe .tg th,
	#popframe .tg td {
		font-size: 2.1vw !important;
		line-height: 2.8vw !important;
	}

	.nav-icon {
		display: block;
	}


/* News Pages ------------------------------------------------ */

	#news_main .top {
		height: auto;
	    width: 100%;
	    padding-top: 34.87%;
	    position: relative;
	}

	#news_main .title {
		width: 58.5%;
	    height: auto;
	    padding-top: 19.3%;
        position: absolute;
	}

	#news_main .in {
		background-position-y: -0.3%;
	    background-size: 250%;
	}

	#news_main .box {
		width: 94.5%;
	    padding-top: 3.8%;
	}

	#news_main .list_box {
		padding: 5.3% 4.5%;
	    position: relative;
	}

	#news_main .list_box .tabs {
	    height: auto;
	}

	#news_main .list_box .tabs li {
		width: 18.88%;
		height: auto;
		line-height: 6.6vw;
		font-size: 3.1vw;
		margin-right: 1.3%;
	    background-position: -60% -28%;
	}

	#news_main .list_box .tabs li.tab_active {
	    background-position: -45% -28%;
	    padding-left: 3.2%;
        background-size: 54%;
	}

	#news_main .list_box .newslist {
		margin-top: 10.5%;
	}

	#news_main .list_box .newslist li {
		height: auto;
		line-height: 8.3vw;
		font-size: 3vw;
		margin-bottom: 1.2%;
		padding-left: 13.8%;
		padding-right: 18.8%;
	}

	#news_main .list_box .newslist li.tab1,
	#news_main .list_box .newslist li.tab2,
	#news_main .list_box .newslist li.tab3,
	#news_main .list_box .newslist li.tab4 {
		background-position-x: 2.5%;
	    background-size: 9%;
	}

	#news_main .list_box .newslist li span {
		font-size: 2vw;
	    right: 2.3%;
	}

	#news_main .nav {
		margin-top: 2.8%;
	    height: auto;
	    line-height: 8.3vw;
	}

	#news_main .nav li {
		font-size: 2.1vw;
		height: auto;
	    line-height: 4.5vw;
	    top: auto;
	}

	#news_main .prev, #news_main .next {
		width: 5.24%;
	    padding-top: 5.24%;
	    background-size: 64%;
	}

	#news_main .pages {
		width: 29.22%;
		margin: 0 1.5%;
	}

	#news_main .back_btn, #news_main .list_btn {
		background-size: contain;
	    width: 31.25%;
	    height: auto;
	    padding-top: 10.32%;
	    margin-top: 8%;
	    margin-bottom: 4.5%;
	}

	#news_main .article_title {
		padding: 2.6% 2.8%;
		font-size: 20px;
	}

	#news_main .time {
		margin-top: 4.7%;
		font-size: 2vw;
	}

	#news_main .share {
		font-size: 2vw;
		margin-top: -5.6%;
		width: 26%;
		float: unset;
		right: 0;
		position: absolute;
	}

	#news_main .share_fb, #news_main .share_line {
		background-size: contain;
	    width: 27%;
	    height: auto;
	    padding-top: 26.5%;
	}

	#news_main .article_text {
		padding-top: 5.5%;
		padding-bottom: 4%;
		font-size: 14px;
	}

}


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

	#s3 .pic {
		top: 8.5%;
	}

	footer .pic ul li {
		font-size: 10px;
		line-height: 14px;
	}

}


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

	#rewards {
		max-width: 38px;
		width: 9%;
		height: auto;
		padding-top: 56%;
	}

	@keyframes rewards_ani {
		from {left: -9%;opacity: 1}
		  to {left: 0;opacity: 1}
	}

}