html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,input{margin:0;padding:0;border:none;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font-family:arial,sans-serif;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:after{clear:both;content:"";display:block;height:0;visibility:hidden;}
.clearfix{*zoom:1;}
.newDesign-navigation .ds2-navigation-action-links a { line-height: 1.5rem;}

/* * {font-family: bmwTypeNextWeb,Arial,Helvetica,"Noto Sans CJK SC","Noto Sans",sans-serif!important;} */
/*loading*/
.loadPage{position:fixed;left:0;top:0;width:100%;height:100%;background:#000000;z-index:99999;display: block;}
.loadPage .loadimg{position: absolute;width: 68px;/* margin:200px auto; */height: 68px;top: 30%;left: 50%;transform: translateX(-50%);}
.loadPage .load_p1 {position:absolute;/* top: 30%; *//* left:50%; *//* transform: translateX(-50%); */width: 100%;/* height: 47px; */left: 0;bottom: 0;opacity:0;filter:Alpha(opacity:0);}
.loadPage .loadimg .gif01{
	-webkit-animation:ani02 3s infinite linear;
	-moz-animation:ani02 3s infinite linear;
	-o-animation:ani02 3s infinite linear;
	animation: ani02 3s infinite linear;
}
.loadPage .loadimg .gif02 {position:absolute;right: -7px;bottom: 0px;width: 14px;}
.loadPage .loadNum{/* display:none; */position:absolute;/* width:100%; */bottom: -1.6rem;line-height: 20px;font-size: 16px;/* text-align:center; */color:#fff;left: 50%;transform: translateX(-50%);}
/*main*/

html,body{height:100%;background: #FFF;overflow: hidden;}

.wrapper{font-family:Microsoft Yahei,simhei,arial,sans;margin:0 auto;position:relative;overflow:hidden;height:100%}
a{text-decoration:none;color:#FFFFFF;}
img{width:100%;vertical-align:middle;}
.pc{display:block;}
.mobi{display:none;}
.sections{position:relative;}
.center{text-align:center}
.abso{position:absolute}
.swiper-container{width:100%;height:100%;overflow: hidden;}
.bg{height:100%;width:100%;position: relative;background:url(trans.gif) center center / cover no-repeat;}

.container {overflow-y: scroll;scroll-snap-type: y mandatory;max-height: 100vh;transform: translateZ(0);}
.sections {scroll-snap-align: start;height: calc(100vw * 1080 / 1920);width: 100%;/* overflow: hidden; */position: relative;background:url("trans.gif") repeat;}
.wrap.campaign01 {position: relative;top:0;left:0;width:100%;/* background:#000; */overflow: hidden;height: 100vh;}
.wrap.campaign01 img {max-width: inherit;}

html.overshow01,html.overshow01 body {/* overflow-x: hidden; *//* overflow-y: auto; */}
.overshow01 .wrap.campaign01 { overflow-x: hidden; overflow-y: auto;}

.campaign01 canvas {width:100%;/* height:100%; */position: absolute;/* display: none; */top: 50%;transform: translateY(-50%);}
.campaign01 .copy1 {color:#000a2e;line-height: 1.4;position:absolute;font-size: 1vw;}
.campaign01 h1 {font-size: 17vw;line-height: 0.8;}
.campaign01 h2 {font-size: 24px;/* font-weight: 300; */}
.campaign01 h3 {font-size: 2.1vw;font-weight: 700;}

.effect01 {
	-webkit-transition:all 0.35s ease-out;
	-moz-transition:all 0.35s ease-out;
	-o-transition:all 0.35s ease-out;
	transition:all 0.35s ease-out;
}
.sect1 {/* height: 100vh; */}
.sect1 .a1 {width: 15.7%;margin: auto;opacity:0;filter: alpha(opacity=0);z-index: 3;position: relative;}
.sect1 .a2 {left: 14%;position: absolute;z-index: 2;top: 50%;}
.sect1 .a3 {position: absolute;/* display:flex; *//* flex-direction: column; *//* gap: 2px; */z-index: 2;transform-origin: center;transform: matrix(8, 0, 0, 8, 0, 0);top: 16%;left: 0;width: 100%;}
.sect1 .a3 h1 {padding: 1% 3%;background: transparent;color: #000;/* float: left; */width: 94%;font-weight: 700;display: flex;justify-content: space-evenly;/* gap: 10px; */flex-wrap: nowrap;}
.sect1 .a3 h1 span { display:block;}
/* .sect1 .a3 h1:nth-child(2) { padding-right:2%;} */
.sect1 .a3b {position:absolute;top: 50%;right: 14%;z-index: 2;}
.sect1 .a3b .day0 {border-right: 9px solid #ffdb27;text-align: right;font-size: 2.1vw;font-weight: 700;padding-right: 11px;line-height: 0.8;overflow: visible;}
.sect1 .a3b .day0 span {display:block;font-size: 1.225vw;line-height: 0.8;padding-top: 10px;overflow: visible;}
.sect1 .bg01 {width: 82%;height: calc(100vw * 820 / 1920);border-radius: 12px;background: #e6e6e6;position: relative;top: 0;left: 9%;}

.sect1 .bava01 {position:absolute;top:0;left:0;width:100%;height: 100%;z-index: 3;}
.sect1 .pimg0 {position:absolute;top: 9%;width: 74%;left: 30%;z-index: 2;transform: scale(0) translate(10%,5%);}
.sect1 .pimg0 .x01 {position:absolute;top: 0;left: 0;width: 8vw;}
.sect1 .pimg {display:none;position:absolute;top: 0;width: 100%;height: 100%;left:0;background-size: cover;background-color: rgb(255,219,39);clip-path: circle(5% at 87% 90%);z-index: 2;}
.sect1 .pimg img {width: 41.4%;margin-left: 29.3%;margin-top: 11.6%;}
.sect1 .p01 {position:absolute;top: 12%;left: 24%;width: 15.4%;z-index: 2;transform: scale(0.8) translate(15vw,38vh);transform-origin: right;opacity:0;filter:Alpha(opacity:0);}
.sections .bom01 {text-align: center;font-size: 12px;padding: 10px 0;position: relative;top: 30px;width: 80%;left: 10%;}
.sect1 .bom01{opacity:0}

.sect4 .bom01 {/* padding-top: 25%; *//* color: #FFF; */bottom: 4%;position: absolute;top: auto;}

.sect1.on .pimg {z-index: 2; animation: scene-transition 3s linear forwards;}

.sect2 { background:#ffdb26;}
.sect2 .p1 {width: 35.6%;position:relative;left: 51.8%;top: 49.3%;transform:translate(-50%,-50%);}
.sect2 .p1_copy1 {text-align: center;position:absolute;top: 16%;width:100%;left:0;color:#000;line-height: 2rem;z-index: 3;width: 300px;left: calc(50% - 150px);}
.sect2 .p1 img {margin: auto;/* width: 76.9%; *//* display: block; */}

.sect3 .a2 {margin-left: 5%;padding: 10vh 0 6rem;position:relative;z-index: 2;}
.sect3 .day0{margin-left: 5%;font-size: 2.1vw;font-weight: 700;position:relative;z-index: 2;}
.sect3 .day0 span {display:block;font-size: 1.225vw;}
.sect3 .bg01 {width: 86%;height: 80%;border-radius: 12px;background: #e6e6e6;position: absolute;top: 0;left: 7%;}
.sect3 .pimg0 {position:absolute;top: -7%;width: 29.6%;left: 34%;z-index: 2;}
.sect3 .pimg0 .x01 {position:absolute;top: 14%;left: -21%;width: 6.8vw;}
.sect3 .pimg {position:absolute;top: -9%;width: 51.5%;left: 20%;/* z-index: 2; *//* display: none; */}
.sect3 .p1 {/* display: none; */position: absolute;top: 13.2%;left: 0;width: 100%;height: 90%;}
.sect3 .p2 {position:absolute;top:0;left:0;width:100%;height:100%;background: rgb(255,219,38,0.9);display: none;z-index: 11;}
.sect3 .p2 .b1 {position:absolute;top: 2%;right: 0;width: calc(100vw * 321 / 750);display: none;}
.sect3 .p2 .b2 {position:absolute;bottom:2%;left: 0;width: calc(100vw * 330 / 750);display: none;}
.sect3 .p2 .b3 {position:absolute;bottom: 0;right: 0;width: calc(100vw * 343 / 750);display: none;}

.mainSwiper {position:absolute;top: 37%;left: 0;width: 100%;z-index: 3;height: auto;}
.mainSwiper .swiper-slide {background:#ffdb26;border-radius: 12px;border:1px solid #ffdb26;overflow: hidden;}
.mainSwiper .swiper-slide span {display:block;padding: 10px 0;text-align: center;font-weight: 700;font-size: 1vw;letter-spacing: 3px;}
.mainSwiper .swiper-slide img { display:block;}
.mainSwiper .swiper-slide a:link, .mainSwiper .swiper-slide a:visited {position:absolute;top:0;left:0;width:100%;height:100%;background:url(play.png) center no-repeat;background-size:40px;}

.sect4 {/* height: 100vh; */background: #ffdb26;}
.sect4 .p1 {padding: 2.5% 0 0;width: 17.3%;margin: auto;position: absolute;top: 12%;z-index: 3;left: 50%;transform: translateX(-50%);}
.sect4 .p2 {width: 46%;/* margin: 2rem auto; */position: absolute;top: 26%;z-index: 4;left: 50%;transform: translateX(-50%);}
.sect4 .pleft {position:absolute;bottom: 0;left: -33.2%;width: 33.2%;transform: scale(0.6) translateY(100px);z-index: 3;}
.sect4 .pleft .x01 {transition-delay: 0.2s;position: absolute;top: 21%;left:0;width: 80%;}
.sect4 .pright {position:absolute;bottom: 0%;right: -25.3%;width: 25.3%;transform: scale(0.6) translateY(100px);transition-delay: 0.07s;z-index: 3;}
.sect4 .pright .x01 {transition-delay: 0.2s;position: absolute;top: 15%;right: 0;width: 80%;}

.sect4 .bg01 {width: 82%;height: 32%;border-radius: 12px;background: #FFF;position: absolute;top: 10%;left: 9%;padding-top: 26%;}
.sect4 .bg01 p {text-align: center;line-height: 2;margin-top: 1.4rem;font-size: 0.9vw;}

.sect5 {/* height:auto; *//* padding: 10vh 0 11rem 0; */}
.sect5 .p1 {position:relative;left: 9%;top: 10%;width: 72%;height: calc(80% - 10vw);padding: 5vw;background:#e6e6e6;border-radius: 12px;text-align: center;font-size: 0.9vw;line-height: 2;}
.sect5 .p1 .a1 {margin: 4% auto;width: 11vw;}
.sect5 .p1 .a1 img {display:block;margin-bottom: 0.4rem;}
.sect5 .p1 .a2 {margin-top: 2vh;display:flex;gap: 8px;font-size:12px;align-items: flex-end;}
.sect5 .p1 .a2 span {display:block;width: 25%;}
.sect5 .p1 .a2 font {display: block;font-size: 12px;line-height: 1.4;margin-top: 10px;}
.sect5 .p2 {position:absolute;bottom:0;left:0;width: 33vw;height: calc(33vw * 608 / 634);background:url(p5.png) 0 0 no-repeat;background-size: contain;}
/* .sect1_c1 .c1_bg {width:80%;height:300px;margin: auto;background: #999;}
.sect1_c1 .pimg {position:absolute;width: 80%;left: 10%;top: 0;height: 300px;background-size: cover;background-color:#FF0;clip-path: circle(0% at 67% 88%);}
.sect1_c1 .pimg img {position:absolute;top: 0;width: auto;left:50%;transform:translateX(-50%);height: 100%;} */

/* .sect1_c1:is(:hover, :focus) .pimg {
	z-index: 1;
	animation: scene-transition2 3s linear forwards;
  } */

.sections .video_p1 {position: absolute;top: 50%;left: -9999px;transform: translate(-50%,-42%);width: 36.8%;/* height: calc(100% * 1330 / 1920); */overflow: hidden;border: none;}
.sect2 .video_p1 {transform: translate(-51.5%,-50%);height: calc(100% * 1330 / 1920);width: 41.8%;}
.sections .video_close {position:absolute;top: 0;right: 5px;}
.sections .video_close a:link, .sections .video_close a:visited {display:block;width: 20px;height: 22px;background:url(close.png) center no-repeat;background-size: 18px auto;padding: 5px;}

.swiper-button-prev { width: 30px; height: 50px; left: 2%;}
.swiper-button-next { width: 30px; height: 50px; right: 2%;}

.swiper-button-next, .swiper-button-prev {background: rgba(0,0,0,0.1);border-radius: 8px;color: #FFF;top: 53%;background-image: none;}
    
.swiper-button-next:after, .swiper-button-prev:after {font-size: 36px;font-weight: 500;}

.video_mask { display:none; position:fixed; top:0; left:0; background:rgba(0,0,0,.75); width:100%; height:100%; z-index: 10001;}
.video_c1 {width: 100%;/* height: 100%; *//* overflow: hidden; *//* margin-left: 1%; */}
.video_c1 video {width: 100%;/* height: 100%; */margin:auto;border-radius: 8px;}
.video_c1 .close {top: -40px;right: 8px;}

.sect2 .video_c1 {width: 102%;margin-left:auto;/* height: calc(100% * 1156 / 1280); *//* overflow: hidden; */}
.sect2 .video_c1 video {border-radius: 0;}

.swiper-pagination-bullet { background:#FFF; border-radius:3px; width:6px; height:6px; opacity:1; filter:Alpha(opacity:100);}
.swiper-pagination-bullet-active { height:16px;}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {top:50%;margin-top:-72px;transform: translateY(0);height: 156px!important;}

footer { margin-top:auto!important;}


@media only screen and (max-width:1216px){
	.swiper-slide.s1 .copy_p1 { left:30px; transform:translateX(0px)}
}
@media only screen and (max-width:1280px){
}
@media only screen and (max-width:1024px){

}

@media only screen and (max-width:768px){
	.pc{display:none;}
	.mobi{display:block;}
	.swiper-slide .copywrapper{top: auto;left: 12%;bottom: 5%;width: 76%;}
	.campaign01 { font-size:13px;}	

	.swiper-button-next:after, .swiper-button-prev:after { font-size:12px;}
	.swiper-button-prev {width: 20px;height: 35px;left: 0%;background: rgba(151,162,164,0.8);top: 56%;}
	.swiper-button-next {width:20px;height: 35px;right: 0%;background: rgba(151,162,164,0.8);top: 56%;}
	
	.video_c1 {width: 98%;height: auto;/* overflow: hidden; */margin-left: 1%;}
	.video_c1 video {width:100%;height: auto;margin:auto;border-radius: 8px;}
	.video_c1 .close {top: -40px;right: 8px;}
	
	.sect2 .video_c1 { width:100%; margin-left:auto;}
	.sect2 .video_c1 video { border-radius: 0;}

	.swiper-pagination-bullet-active { height:4px; width:16px;}

	
}

/*mobi*/
@media only screen 
  and (min-device-width:414px) 
  and (max-device-width:736px) 
  and (-webkit-min-device-pixel-ratio:3){
	
}

@-moz-keyframes down01{
0%,100%{
	-moz-transform:translateY(3px);
	}
	50%{
	-moz-transform:translateY(0);
	}
}
@-webkit-keyframes down01{
0%,100%{
	-webkit-transform:translateY(3px);
	}
	50%{
	-webkit-transform:translateY(0);
	}
}
@keyframes down01{
0%,100%{
	transform:translateY(3px);
	}
	50%{
	transform:translateY(0);
	}
}

/* @-moz-keyframes scene-transition{
0%{
-moz-clip-path: circle(32% at 67% 88%)
}
20%{
-moz-clip-path: circle(32% at 46% 20%)
}
40%,60%{
-moz-clip-path: circle(32% at 34% 14%)
}
100%{
-moz-clip-path: circle(100% at 34% 14%)
}
}
@-webkit-keyframes scene-transition{
0%{
-webkit-clip-path:circle(32% at 67% 88%)
}
20%{
-webkit-clip-path:circle(32% at 46% 20%)
}
40%,60%{
-webkit-clip-path:circle(32% at 34% 14%)
}
100%{
-webkit-clip-path:circle(100% at 34% 14%)
}
} */
@keyframes scene-transition{
0%,25%{
clip-path: circle(32% at 67% 88%)
}
26%,50%{
clip-path: circle(32% at 46% 20%)
}
51%,75%{
clip-path: circle(44% at 55% 46%)
}
100%{
clip-path: circle(100% at 55% 46%)
}
}
@keyframes scene-transition2{
	0%,10%{
	clip-path: circle(32% at 67% 88%)
	}
	31%{
	clip-path: circle(32% at 46% 20%)
	}
	51%,71%{
	clip-path: circle(32% at 55% 46%)
	}
	100%{
	clip-path: circle(100% at 55% 46%)
	}
	}