@charset "utf-8";


@media screen and (min-width:1180px) {
	#mobile{display:none;}
	body{overflow:hidden;}
	#wrap .swiper-slide{background-repeat:no-repeat; background-size:100% auto; background-position:50% 50%; position:relative;}
	#wrap .swiper-slide .inner{position:absolute; left:0; top:0; width:100%; height:100%;}
	
	#wrap .section01{background-image:url(../images/web/bg_section01.png); background-size:auto 100%; background-repeat:repeat-x;}
	#wrap .section01>.inner{text-align:center; overflow:hidden;}
	#wrap .section01>.inner>h1{position:absolute; left:0; text-align:center; width:100%; display:none;}
	#wrap .section01>.inner>h1>img{width:33%;}
	#wrap .section01.swiper-slide-active>.inner>h1{animation: section01 1s; animation-direction: alternate; display:block;}
	@keyframes section01 {
		0% {transform: scale(0); opacity:0;}
		100% {transform: scale(1); opacity:1;}
	}
	
	#wrap .section02{background-image:url(../images/web/bg_section02.png); background-size:100% auto;}
	#wrap .section02>.inner{background:url(../images/web/bg_section02_inner.png) no-repeat 0 50%; background-size:auto 100%;}
	#wrap .section02>.inner>.content{position:absolute; right:-300px; bottom:7.9%; width:58.1%; display:none;}
	#wrap .section02>.inner>.content>ul:first-child{margin-bottom:0.3%;}
	#wrap .section02>.inner>.content>ul:after{display:block;clear:both;content:''}
	#wrap .section02>.inner>.content>ul>li{float:left; width:23.5%;}
	#wrap .section02>.inner>.content>ul>li>img{width:100%;}
	#wrap .section02>.inner>.content>ul>li:first-child{margin-right:0.3%; margin-left:1%;}
	#wrap .section02>.inner>.content>ul:last-child>li:last-child{width:75.2%;}
	#wrap .section02.swiper-slide-active>.inner>.content{animation:section02 1s; animation-direction:alternate; display:block; right:0;}
	@keyframes section02 {
		0% {opacity:0; right:-30%;}
		100% {opacity:1; right:0;}
	}
	
	#wrap .section03{background-image:url(../images/web/bg_section03.png); background-size:auto 100%;}
	#wrap .section03 .inner01{background:url(../images/web/bg_section03_inner01.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section03 .inner02{background:url(../images/web/bg_section03_inner02.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section03 .inner03{background:url(../images/web/bg_section03_inner03.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section03 .inner04{background:url(../images/web/bg_section03_inner04.png) no-repeat 50% 50%; background-size:auto 100%;}

	#wrap .section04{background-image:url(../images/web/bg_section04.png); background-size:auto 100%; background-repeat:repeat-x;}
	#wrap .section04 .inner01{background:url(../images/web/bg_section04_inner01.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section04 .inner02{background:url(../images/web/bg_section04_inner02.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section04  a{width:21%; height:13%; position:absolute; bottom:39.5%; right:0; background:url(../images/web/btn_link02.png) no-repeat; background-size:100% auto; z-index:4;}
	#wrap .section04  a:hover{background-image:url(../images/web/btn_link02_on.png);}
	
	#wrap .section05{background-image:url(../images/web/bg_section05.png); background-size:auto 100%;}
	#wrap .section05 .btn{position:absolute; bottom:13.5%; right:7%; width:16.5%; height:17%;}
	#wrap .section05 .btn>li{height:50%;}
	#wrap .section05 .btn>li:first-child{margin-bottom:10px;}
	#wrap .section05 .btn>li>a{display:block; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:100% auto;}
	#wrap .section05 .btn>li.google>a{background-image:url(../images/web/btn_googleplay.png);}
	#wrap .section05 .btn>li.google>a:hover{background-image:url(../images/web/btn_googleplay_on.png);}
	#wrap .section05 .btn>li.apple>a{background-image:url(../images/web/btn_appstore.png);}
	#wrap .section05 .btn>li.apple>a:hover{background-image:url(../images/web/btn_appstore_on.png);}
	#wrap .section05 .inner01{background:url(../images/web/bg_section05_inner01.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section05 .inner02{background:url(../images/web/bg_section05_inner02.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section05 .inner03{background:url(../images/web/bg_section05_inner03.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section05 .inner04{background:url(../images/web/bg_section05_inner04.png) no-repeat 50% 50%; background-size:auto 100%;}
	
	#wrap .section06{background-color:#f8a403;}
	#wrap .section06 .video{position:absolute; top:22.8%; left:14%; width:54%; height:61.3%; z-index:5;}
	#wrap .section06  a{width:21%; height:13%; position:absolute; bottom:9.5%; right:14.3%; background:url(../images/web/btn_link.png) no-repeat; background-size:100% auto; z-index:4;}
	#wrap .section06  a:hover{background-image:url(../images/web/btn_link_on.png);}
	#wrap .section06 .inner01{background:url(../images/web/bg_section06_inner01.png) no-repeat 50% 50%; background-size:100% auto;}
	#wrap .section06 .inner02{background:url(../images/web/bg_section06_inner02.png) no-repeat 50% 50%; background-size:100% auto;}
	
	#wrap .section07{background-image:url(../images/web/bg_section07.png); background-size:auto 100%;}
	#wrap .section07 .inner01{background:url(../images/web/bg_section07_inner01.png) no-repeat 50% 50%; background-size:auto 100%;}
	#wrap .section07 .inner02{background:url(../images/web/bg_section07_inner02.png) no-repeat 50% 50%; background-size:auto 100%;}
	
	#wrap .section08{background-image:url(../images/web/bg_section08.png); background-position:left;}
	#wrap .section08>.inner>.cont{background:url(../images/web/bg_section08_inner.png) no-repeat; background-size:auto 100%; position:absolute; left:4%; top:9%; width:25.5%; height:70.5%; padding-top:5%; overflow:hidden;}
	#wrap .section08>.inner>.cont>.cont_inner{background:url(../images/web/text_cont.png) no-repeat;  background-size:contain; width: 100%; height: 80%;margin-top: 50px;}


	
	#wrap .section08.swiper-slide-active>.inner>.cont{animation:section0801 1.5s; animation-direction:alternate;}
	#wrap .section08.swiper-slide-active>.inner>.cont>.cont_inner{animation:section0802 1.5s; animation-direction:alternate; position:relative;}

	#wrap .section08>.inner>.cont a {padding: 2%;position: absolute; bottom: 8%;left: 3.3%;display: block;color: #fff; z-index: 100; font-size: 14px; box-sizing: border-box;font-weight: bold; }
	#wrap .section08>.inner>.cont a:hover{border: 1px solid #fff;}



	@keyframes section0801 {
		0% {opacity:0; transform: scale(0);}
		100% {opacity:1; transform: scale(1);}
	}
	@keyframes section0802 {
		0% {opacity:0; top:30%;}
		50% {opacity:0; top:30%;}
		100% {opacity:1; top:0;}
	}
	
	
	#wrap .swiper-slide-active .inner01{animation:inner01 1.5s; animation-direction:alternate;}
	#wrap .swiper-slide-active .inner02{animation:inner02 1.5s; animation-direction:alternate;}
	#wrap .swiper-slide-active .inner03{animation:inner03 1.5s; animation-direction:alternate;}
	#wrap .swiper-slide-active .inner04{animation:inner04 1.5s; animation-direction:alternate;}
	
	@keyframes inner01 {
		0% {opacity:0; left:25%;}
		100% {opacity:1; left:0;}
	}
	@keyframes inner02 {
		0% {opacity:0; left:25%;}
		25% {opacity:0; left:25%;}
		100% {opacity:1; left:0;}
	}
	@keyframes inner03 {
		0% {opacity:0; left:25%;}
		50% {opacity:0; left:25%;}
		100% {opacity:1; left:0;}
	}
	@keyframes inner04 {
		0% {opacity:0; left:25%;}
		75% {opacity:0; left:25%;}
		100% {opacity:1; left:0;}
	}
	
	#wrap>.navi{position:fixed; bottom:3%; left:0; text-align:center;}
	#wrap>.navi>a{display:inline-block; width:15px; height:15px; background:url(../images/web/navi_off.png) no-repeat; margin:0 5px;}
	#wrap>.navi>a.on{background-image:url(../images/web/navi_on.png);}
	
	#wrap .swiper-pagination{bottom:30px;}
	#wrap .swiper-pagination-bullet{width:15px; height:14px; background:url(../images/web/navi_off.png) no-repeat; opacity:1;}
	#wrap .swiper-pagination-bullet-active{background-image:url(../images/web/navi_on.png);}
	#wrap .swiper-button-next{position:absolute; top:15%; right:5%; background-image:none; width:26px; height:26px;}
	
}

@media screen and (max-width:1180px) {
	#wrap{display:none;}
	h1.img{top:auto !important;}
	.img{position:relative;}
	.img>img{width:100%;}
	.video{height:200px;}
	.img>.btn{position:absolute; width:100%; height:12%; left:0; top:-6%; padding:0 3%;}
	.img>.btn>li{width:50%; float:left; height:100%;}
	.img>.btn>li>a{display:block; height:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:auto 100%;}
	.img>.btn>li.google>a{background-image:url(../images/mobile/btn_googleplay.png);}
	.img>.btn>li.apple>a{background-image:url(../images/mobile/btn_appstore.png);}
	.img>.btn>li.google>a:active{background-image:url(../images/mobile/btn_googleplay_on.png);}
	.img>.btn>li.apple>a:active{background-image:url(../images/mobile/btn_appstore_on.png);}
	
	.img05{padding-bottom:28.5%; z-index:3;}
	.img05>img{z-index:5; position:relative;}
	.img05>.btn_link{position:absolute; width:100%; height:31%; left:0; bottom:0; background:url(../images/mobile/btn_link.png) no-repeat 50% 50%; background-size:100% auto; z-index:4;}
	.img05>.btn_link:active{background-image:url(../images/mobile/btn_link_on.png);}

	.img08{padding-bottom:25.5%;}
	.img08>.btn_link{position:absolute; width:100%; height:11%; left:0; bottom:0; background:url(../images/mobile/btn_link02.png) no-repeat 50% 50%; background-size:100% auto; z-index:4;}
	.img08>.btn_link:active{background-image:url(../images/mobile/btn_link02_on.png);}
}