@charset "utf-8";
/* CSS Document */
.allbx{
	position:relative;
	width:100%;
	margin:0 auto;
	background:linear-gradient(0.01deg, #3ED3EC 2.97%, #15C1FF 96.26%);
	overflow:hidden;
	}
.titlebx{
	position:relative;
	width:100%;
	padding-bottom:153px;
	background:linear-gradient(112.12deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.15) 100%);
	border-top:2px solid #FFF;
	border-bottom:2px solid #FFF;
	/**/
	text-align: center;
	}
.titlebx > div{
	position:absolute;
	font-size:4.416rem;
	font-weight:700;
	display:inline-block;
	color:#000;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transition: all .5s;
	}
.titlebx > div::before,.titlebx > div::after{
	position:absolute;
	content:" ";
	width:25.6%;
	height:2px;/**/
	background-color:#000;
	top:50%;
	transform:translateY(-50%);
	transition: all .5s;
	}
.titlebx > div::before{left:-37.2%;}
.titlebx > div::after{right:-37.2%;}
/**/
.topbt{
	position:fixed;
	width: 3.91%;
	padding-bottom: 3.91%;
	right: 1.56%;
	bottom: 1.17%;
	/*width:5%;
	padding-bottom:5%;*/
	display:block;
	cursor:pointer;
	/*bottom:5%;
	right:1.85%;*/
	z-index:2;
	/**/
	transition: all .5s;
	}
.topbt::before,.topbt::after,.fbx::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	top:0;
	left:0;
	}
.topbt::before,.fbx::before{
	backdrop-filter: blur(3px);
	border-radius:15px;
	}
.topbt::after{
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/top.png);
	background-size:100% auto;
	}
.fbx{
	position:fixed;
	width:8.1%;/*162*/
	padding-bottom:12.6%;/*252*/
	display:block;
	top:41.07%;/*319*/
	right:1.85%;/*37*/
	z-index: 1;
	}
.fbx > div{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/fbx.png);
	background-size:100% auto;
	top:0;
	left:0;
	}
.fbx > div::before{
	position:relative;
	content:" ";
	width:80.86%;/*131*/
	padding-bottom:21.6%;/*35*/
	display:block;
	margin:15.12% auto 9.142%;/*9.12 7.142*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/logo_b.png);
	background-size:100% auto;
	}
.fbx > div .ios_r{
	position:relative;
	width:80.2469%;/*130*/
	padding-bottom:29.6296%;/*48*/
	display:block;
	cursor:pointer;
	margin:0 auto 5.1746%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/ios.png);
	background-size:100% auto;
	}
.fbx > div .google_r{
	position:relative;
	width:80.2469%;/*130*/
	padding-bottom:23.45678%;/*38*/
	display:block;
	cursor:pointer;
	margin:0 auto 9.14%;/*7.14*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-image: url(../images/google.png);
	background-size:100% auto;
	}
.fbx > div > div{text-align:center;}
.fbx > div .fb_r,.fbx > div .ig_r{
	position:relative;
	width:25.3%;/*41*/
	padding-bottom:25.3%;
	display:inline-block;
	cursor:pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-size:100% auto;
	}
.fbx > div .fb_r{background-image:url(../images/fb.png);margin-right:8.6419%;}
.fbx > div .ig_r{background-image: url(../images/ig.png);}	
/**/
.red{color:rgba(255,47,47,1);}
.yl{color:rgba(255,234,47,1);}	
/*1*/
.page1{
	position:relative;
	width:100%;
	padding-bottom:59%;/*1180*/
	}
.page1 .cloud_1{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/page1_1.png);
	background-size:100% auto;
	}
.page1 > div{
	position:absolute;
	transition: all .5s;
	}
.logo{
	width:24.65%;/*493*/
	padding-bottom:7.4%;/*148*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image: url(../images/logo.png);
	background-size:100% auto;
	top:12.3728%;/*146*/
	left:37.75%;/*755*/
	}
.subtitle{
	width:100%;
	top:27.983%;/*342*/
	left: 50%;
	transform:translateX(-50%);
	display:inline-block;
	font-size:2.25vw;/*45 3.6rem*/
	color:#FFF;
	font-weight:700;
	text-align:center;
	}
.subtitle span{
	position:relative;
	display:inline-block;
	}
	
.star::before,.star::after{
	position:absolute;
	content:"";
	width:5%;
	padding-bottom:5%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-size:100% auto;
	/*top:50%;
	transform:translateY(-50%);*/
	/**/
	transition: all .5s;
	}
.star::before{
	width:4%;
	padding-bottom:4%;
	left:-3.5%;
	top:-15%;
	background-image: url(../images/star1.png);
	/**/
	animation:flashing2 3.5s linear infinite;
	}
.star::after{
	right:-4.2%;
	top:-15%;
	background-image: url(../images/star2.png);
	/**/
	animation:flashing 1.5s linear infinite;
	}
.star2::before,.star2::after{
	position:absolute;
	content:"";
	width:5%;
	padding-bottom:5%;
	/*height:105%;*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 100%;	
	background-size:100% auto;
	/*top:50%;
	transform:translateY(-50%);
	*/
	transition: all .5s;
	}
.star2::before{
	width:4%;
	padding-bottom:4%;
	left:-3.3%;
	top:71%;
	background-image: url(../images/star1a.png);
	/**/
	animation:flashing 1.5s linear infinite;
	}
.star2::after{
	right:-3.8%;
	top:49%;
	background-image: url(../images/star2a.png);
	/**/
	animation:flashing2 3s linear infinite;
	}
.pbx{}
.pbx::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	top:0;
	/**/
	transition: all .5s;
	}
.pbx > span{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.p1{
	width:37.95%;/*759*/
	padding-bottom:28.6%;/*572*/
	top:38.98%;/*460*/
	left:0;
	}
.p1::before{}
.p1 > span{
	background-image: url(../images/p1.png);
	animation:leftright4 5s linear infinite;
	}
.p1 > span::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	background-image: url(../images/p1a.gif);
	}
	
	
.p2{
	width:53.4%;/*1068*/
	padding-bottom:39.9%;/*798*/
	top:24.66%;/*291*/
	right:0;
	}
.p2::before{}
.p2 > span{
	background-image: url(../images/p2.png);
	animation:leftright3 5s linear infinite;
	}
	
	
.seagull_1::before,.seagull_2::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.seagull_1{
	width:5.3%;/*106*/
	padding-bottom:3.25%;/*65*/
	top:27%;/*319*/
	left:17.65%;/*353*/
	}
.seagull_1::before{
	background-image: url(../images/seagull_1.png);
	/**/
	-moz-animation:updown 3s linear infinite;
	-webkit-animation:updown 3s linear infinite;
	-o-animation:updown 3s linear infinite;
	-ms-animation:updown 3s linear infinite;
	animation:updown 2s linear infinite;
	}
.seagull_2{
	width:6.1%;/*122*/
	padding-bottom:3.35%;/*67*/
	top:5.338%;/*63*/
	right:7.1%;/*142*/
	}
.seagull_2::before{
	background-image: url(../images/seagull_2.png);
	/**/
	animation:updown 1.6s linear infinite;
	}
.dialogbx1{
	position:absolute;
	width:56.315%;/*428 21.4*/
	padding-bottom:27.4996%;/*209 10.45*/
	top:-0.441%;/*455*/
	left:72.05%;/*541*/
	}
.dialogbx1 > div,.dialogbx2 > div{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.dialogbx1 > div{background-image: url(../images/dialogbx1.png);}
.dialogbx1 > div > div,.dialogbx2 > div > div{
	position: relative;
	width: 95%;
	height: 80%;
	margin: 3% auto 0;
	/**/
	font-size:1.9vw;
	font-weight:700;
	color:#000;
	text-align:center;
	/**/	
      display:-webkit-box;
      display:-ms-flexbox;
      display:-webkit-flex;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      -webkit-justify-content:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      -webkit-align-items:center;
      align-items:center;
	}
.dialogbx1 > div > div span,.dialogbx2 > div > div span{ display:inline-block;}
.dialogbx2{
	position:absolute;
	width:40.2245%;/*430*/
	padding-bottom:19.55%;/*209*/
	top:40.559%;
	left:6.05%;
	}
.dialogbx2 > div{background-image: url(../images/dialogbx2.png);}

/*2*/

/*光箱*/
#light_bx{
	position:fixed;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background-color:rgba(17,16,15,.8);
	/*backdrop-filter: blur(3px);*/
	z-index:20;
	/*overflow:auto;*/
	display:none;/**/
	}
.ncb{
	position:relative;
	width:100%;
	height:100vh;
	height:calc(var(--vh, 1vh) * 100);
	padding:0 0;
	/**/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/**/	
      display:-webkit-box;
      display:-ms-flexbox;
      display:-webkit-flex;
      display:flex;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      -webkit-justify-content:center;
      justify-content:center;
      -webkit-box-align:center;
      -ms-flex-align:center;
      -webkit-align-items:center;
      align-items:center;
	}	
.noticebx{
	position:relative;
	width:1100px;/**/
	margin:0 auto;
	display:none;
	border-radius:16px;
	/*background-color: #FFF;*/
	overflow:hidden;
	}
.noticebx > .n_titbx{
	position: relative;
	width: 100%;
	height:70px;
	background: linear-gradient(90deg,#2199BF 0%,#79CC90 100%);
	/**/
	font-size:2.5rem;
	line-height:70px;
	color:#FFF;
	text-align: center;
	font-weight: 700;
	border-radius:16px  16px 0 0;
	}
.close{
	position:absolute;
	width:20px;
	padding-bottom:20px;
	display:block;
	cursor: pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-image: url(../images/close.png);
	background-size:100% auto;
	right:2%;
	top:50%;
	transform:translateY(-50%);
	}
.noticebx > .n_con{
	position: relative;
	width: 100%;
	height:auto;
	max-height:calc(100vh - 210px);/*70*/
	border-radius: 0 0 16px  16px;
	background-color: #FFF;
	overflow: auto;
	/**/
	font-size: 1.5rem;
	line-height:2.3rem;
	color: #3C3531;
	font-weight: 400;
	}
.noticebx > .n_con > div{
	position:relative;
	width:90%;
	padding:2.5rem 0 2rem;
	margin:0 auto;
	display:none;
	}
.noticebx > .n_con .nb1,.noticebx > .n_con .nb2{
	position:relative;
	padding:0 0 0 2rem;
	}
.noticebx > .n_con .nb1 li,.noticebx > .n_con .nb2 li{
	position: relative;
	margin-bottom:.5rem;
	}
.noticebx > .n_con .nb1 li{list-style-type: decimal;}
.noticebx > .n_con .nb2 li{list-style-type: disc;}
/*3*/
.page3{
	position:relative;
	width:100%;
	padding-bottom:44.9%;/*898*/
	overflow:hidden;
	}
.cloud3_1,.cloud3_2,.seagull_3,.feature{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:auto 100%;
	/**/
	transition: all .5s;
	}
.cloud3_1{background-image: url(../images/cloud_3_1.png);}
.cloud3_2{background-image: url(../images/cloud_3_2.png);}
.seagull_3{background-image: url(../images/seagull_3.png);}
#featurebx{
	position:relative;
	width:16.9%;/*338 x740*/
	margin:0 auto;
	top:50%;
	transform:translateY(-50%);
	-webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-image: url(../images/feature_bg.png);
	background-size:100% auto;
	}
	
#featurebx .swiper-slide{
	width:100%;
	padding-bottom:218.934911%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	}
#featurebx .swiper-slide:nth-child(1){background-image: url(../images/feature_1.png);}
#featurebx .swiper-slide:nth-child(2){background-image: url(../images/feature_2.png);}
#featurebx .swiper-slide:nth-child(3){background-image: url(../images/feature_3.png);}
#featurebx .swiper-slide:nth-child(4){background-image: url(../images/feature_4.png);}
#featurebx .swiper-slide:nth-child(5){background-image: url(../images/feature_5.png);}
#featurebx .swiper-slide:nth-child(6){background-image: url(../images/feature_6.png);}
.febtbx{
	position:absolute;
	width:65.35%;/*1307*/
	height:100%;
	top:0;
	left:50%;
	transform:translateX(-50%);
	}
.febtbx > li{
	position:absolute;
	width:30.145%;/*394*/
	padding-bottom:17.673%;/*231*/
	display:block;
	cursor: pointer;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-image: url(../images/febt.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	/**/
	-webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0));
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0));
	}
.febtbx > li::before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-image: url(../images/febt2.png);
	background-size:100% auto;
	left:0;
	top:0;
	opacity:0;
	/**/
	transition: all .5s;
	}
.febtbx > li::after{
	position: absolute;
	content:attr(data-index);
	font-size: 1.43vw;/*29*/
	font-weight:700;
	color: #FFF;
	right:4.3%;
	top:0.1%;
	}
.febtbx > li .tx1{
	position:absolute;
	width:100%;
	top:23%;
	left:50%;
	transform:translateX(-50%);
	/**/
	font-size: 1.4vw;/*28*/
	font-weight:700;
	color: #3C3531;
	text-align:center;
	}
.febtbx > li .tx2{
	position:absolute;
	width:100%;
	top:53%;
	left:50%;
	transform:translateX(-50%);
	/**/
	font-size: 1.1vw;/*22*/
	font-weight:700;
	color: #3C3531;
	text-align:center;
	}
.febtbx > li .line{
	position:absolute;
	width:83.5%;
	height:1px;
	background-color:#3C3531;
	top:46.3%;/*107*/
	left:50%;
	transform:translateX(-50%);
	}
.febtbx .r_arrow,.febtbx .l_arrow{
	position:absolute;
	width:12.72%;/*64 503*/
	padding-bottom:3.5775%;/*18*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	bottom:8.843%;/*26 294*/
	}
.febtbx .r_arrow{
	right:8.151%;/*41*/
	background-image: url(../images/right_arrow.png);
	}
.febtbx .l_arrow{
	left:8.151%;/*41*/
	background-image: url(../images/left_arrow.png);
	}
.febtbx > li.on	.r_arrow{background-image: url(../images/right_arrow_on.png);}
.febtbx > li.on	.l_arrow{background-image: url(../images/left_arrow_on.png);}
	
	
.febtbx > li:nth-child(1){top:8.67%;/*42*/left:0;}
.febtbx > li:nth-child(2){top:37.518%;/*301*/left:0;}
.febtbx > li:nth-child(3){top:66.583%;/*562*/left:0;}
.febtbx > li:nth-child(4){top:8.67%;right:0; }
.febtbx > li:nth-child(5){top:37.518%;right:0;}
.febtbx > li:nth-child(6){top:66.583%;right:0;}
	
.febtbx > li:hover{
	-webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
	}
.febtbx > li.on::before{opacity:1;}
.febtbx > li.on .tx1,.febtbx > li.on .tx2{color:#F5931B;}
.febtbx > li.on .line{background-color:#F5931B;}
.febtbx > li.on{
	/**/
	-webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35));
	}
/*4*/
.page4{
	position:relative;
	width:100%;
	/*min-height:2000px;*/
	}
ul.qabx{
	position:relative;
	width:61.1%;/*1222px*/
	margin:0 auto;
	padding:3.8rem 0 0;
	z-index:1;
	/**/
	transition: all .5s;
	}
ul.qabx > li{
	position: relative;
	width:100%;
	border-radius:30px;
	border:5px solid #3C3531;
	background-color:#FFF;
	margin-bottom:3rem;
	}
ul.qabx > li .qbx{
	position:relative;
	padding:1.8vw 5.4%;
	cursor:pointer;
	}
ul.qabx > li .question{
	position: relative;
	font-size:1.4vw;/*28*/
	color: #3C3531;
	display:block;
	
	padding: 0 2.2vw 0 1.6vw;
	font-weight:700;
	}
ul.qabx > li .question::before{
	position:absolute;
	content:attr(data-index);
	left:0;
	top:.3vw;
	}
ul.qabx > li .question::after{
	position:absolute;
	content:"";
	width:1.8vw;/*36*/
	padding-bottom:1.8vw;
	right:0;
	top:.2vw;
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-image: url(../images/arrow.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
ul.qabx > li.on .question::after{
	/**/
  	transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
	}
	
ul.qabx > li .answer{
	position:relative;
	padding:0 5.4% 2vw;
	display:none;
	}
ul.qabx > li .answer > .con{
	position: relative;
	border-top: 2px solid #3C3531;
	padding:1.8vw 0 0;
	/**/
	font-size:1.08vw;/*22*/
	color:#3C3531;
	}
ul.qabx > li .answer > .con ul.nb{
	position:relative;
	padding:2rem 0 0 1.25vw;/*25px*/
	}
ul.qabx > li .answer > .con ul.nb li{
	position: relative;
	list-style-type: decimal;
	margin-bottom:1.5rem;
	}
ul.qabx > li .answer > .con ul.nb li:nth-last-child(1){margin-bottom:0;}
	
	
.page4 .gap{
	position:relative;
	width:100%;
	padding-bottom:0%;
	}
.road{
	position:relative;
	width:100%;
	padding-bottom:69.55%;/*1391*/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image: url(../images/page4_1.png);
	background-size:100% auto;
	/*pointer-events:none;*/
	margin-top:-22%;
	}
.road > div{
	position:absolute;
	/**/
	background-attachment:scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-size:100% auto;
	/**/
	transition:all .5s;
	}
.balloon3{
	width:8.2%;/*164*/
	padding-bottom:18.1%;/*362*/
	top:-29.4%;/*78*/
	left:86.1%;/*1042*/
	/**/
	transition:all .5s;
	}
.balloon3::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-image: url(../images/balloon_4_1.png);
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	-moz-animation:updown 3s linear infinite;
	-webkit-animation:updown 3s linear infinite;
	-o-animation:updown 3s linear infinite;
	-ms-animation:updown 3s linear infinite;
	animation:updown 3s linear infinite;
	}	
	
	
.cloud4_1{
	width:20.75%;/*415*/
	padding-bottom:10.35%;/*207*/
	top:3.594%;/*50*/
	left:4.1%;/*82*/
	}
.cloud4_2{
	width:15.8%;/*316*/
	padding-bottom:17.8%;/*356*/
	top:1.0064%;/*14*/
	right:0;/**/
	}	
.cloud4_1::before,.cloud4_2::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.cloud4_1::before{
	background-image: url(../images/cloud_4_1.png);
	/**/
	animation:leftright2 3.5s linear infinite;
	}
.cloud4_2::before{
	background-image: url(../images/cloud_4_2.png);
	/**/
	animation:leftright 5s linear infinite;
	}
.phone{
	width:29.7%;/*594*/
	padding-bottom:35.8%;/*716*/
	top:38.389%;/*534*/
	right:19%;/*380*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-image: url(../images/phone.png);	
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
.phone2{
	width:39.5%;/*790*/
	padding-bottom:39.5%;/*790*/
	top:35.389%;/*534*/
	right:14.3%;/*286*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;
	background-image: url(../images/phone2.webp);	
	background-size:100% auto;
	overflow:hidden;
	/**/
	transition: all .5s;
	}
.phone2 .vbx{
	position:absolute;
	width:100%;
	height:100%;
	display:none;
	top:-1px;
	left:0;
	overflow:hidden;
	}
.phone2 .vbx video{
	position: relative;
	width:100%;
	}
	
	
	
.qrcbx{
	width:28.95%;/*579*/
	padding-bottom:25.224%;/*501*/
	top:43.925%;/*611*/
	left:18.9%;/*378*/
	}
.qrcbx::before{
	position:absolute;
	content:attr(data-index);
	width: 100%;
	font-size: 2.65vw;/*53*/
	font-weight: 700;
	color:#000;
	text-align:center;
	top:2%;
	left:0;
	}
.qrcbx img,.qrcbx a{position:absolute; }
.qr1,.qr2{
	width:37.99%;/*220*/
	padding-bottom:37.99%;
	top:32.1357%;
	}
.qr1{left:7.944%;/*46*/}
.qr2{right:7.944%;/*313*/}	
.qrcbx a img{width:100%;}
.ios_q,.google_q{width:37.651%;/*218*/}
.ios_q{
	top:80.8383%;/*405*/
	left:8.29%;/*48*/
	}
.google_q{
	top:82.23552%;/*412*/
	left:54.058%;/*313*/
	}	
.bear2{
	position:absolute;
	width:12.1%;/*242*/
	padding-bottom:16.75%;/*335*/
	left:9%;/*180*/
	top:71.1718%;/*990*/
	pointer-events: none;
	}
.bear2 > div{
	position:absolute;
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-image: url(../images/bear2.png);	
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.bear2 > div::before{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-image: url(../images/bear2a.gif);
	background-size:100% auto;
	top:0;
	left:0;
	}
.bear2::before,.bear2::after{
	position:absolute;
	content:" ";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:0% 0%;	
	background-size:100% auto;
	top:0;
	left:0;
	/**/
	transition: all .5s;
	}
.bear2::before{
	width:26.85%;/*94*/
	height:auto;
	padding-bottom:49.129%;/*172*/
	background-image: url(../images/bear21.png);
	animation:ma2a 2.5s linear infinite;
	top:55%;
	left:70%;
	}
.bear2::after{
	width:31.42%;/*110*/
	height:auto;
	padding-bottom:54.55%;/*191*/
	background-image: url(../images/bear22.png);
	top:55%;
	left:0%;
	animation:ma2b 2.5s linear infinite;
	}
/**/
.navb2{
	position:relative;
	width:100%;
	height:78px;
	}

@media only screen and (max-width:2000px){
/**/
}
@media only screen and (max-width:1600px){
/**/
.navb2{height:75px;}
}
@media only screen and (max-width:1450px){
/**/
/*2*/
/*光箱*/
.noticebx{width:90%;}
/*3*/
.page3{padding-bottom:63.78%;/*898*/}
#featurebx{width:24.142%;/*338 x740*/}
.febtbx{width:93.357%;/*1307*/}
.febtbx > li::after{font-size: 2.07vw;/*29*/}
.febtbx > li .tx1{font-size: 2vw;/*28*/}
.febtbx > li .tx2{font-size: 1.57vw;/*22*/}
/*4*/
ul.qabx{width:90%;} 
}
@media only screen and (max-width:1200px){
/**/
/*4*/
ul.qabx{width:95%;} 
ul.qabx > li .question{  /*以寬1400*/
	font-size:2vw;/*28*/
	padding: 0 2.8vw 0 2.2vw;
	}
ul.qabx > li .question::before{
	top:.5vw;
	}
ul.qabx > li .question::after{
	width:2.57vw;/*36*/
	padding-bottom:2.57vw;
	top:.3vw;
	}
ul.qabx > li .answer > .con{font-size:1.57vw;/*22*/}
ul.qabx > li .answer > .con ul.nb{padding:2rem 0 0 1.78vw;/*25px*/}	
}
@media only screen and (max-width:1080px){

	}	
@media only screen and (max-width:1000px){	
/**/
.titlebx{padding-bottom:77px;}
.titlebx > div{font-size:3rem;}	
/*2*/
/*光箱*/
.noticebx > .n_titbx{
	height:60px;
	/**/
	font-size:2rem;
	line-height:60px;
	font-weight: 700;
	}
.close{
	width:20px;
	padding-bottom:20px;
	}
.noticebx > .n_con{
	height:calc(100vh - 180px);
	border-radius: 0 0 16px  16px;
	/**/
	font-size: 1.5rem;
	line-height:2.5rem;
	}
.noticebx > .n_con > div{
	width:90%;
	padding:2rem 0 .8rem;
	}
.noticebx > .n_con .nb1,.noticebx > .n_con .nb2{
	padding:0 0 0 1.8rem;
	}
.noticebx > .n_con .nb1 li,.noticebx > .n_con .nb2 li{
	margin-bottom:.5rem;
	}
/**/
.navb2{height:70px;}
}
@media only screen and (max-width:800px){
/**/
.topbt{
		right: 3.85%;
		bottom: 2.56%;
		width: 10.26%;
		padding-bottom: 10.26%;
	}
/*1*/
.page1{padding-bottom:177.75%;/*1422*/}
.page1 .cloud_1{background-image: url(../images/page1_1m.png);}
.logo{
	width:61.625%;/*493*/
	padding-bottom:18.5%;/*148*/
	top:11.744%;/*167*/
	left:19.25%;/*154*/
	}
.subtitle{
	top:23.983%;
	font-size:6.25vw;/*50*/
	}
.star::before,.star::after,.star2::before,.star2::after{
	/*width:5%;
	height:50%;
	top:75%;
	transform:translateY(-50%);*/
	}
.star::before{left:4.2%;top:53%;}
.star2::before{left:3.8%;top:86%;}
.star::after{right:3.8%;;top:43%;}
.star2::after{right:3.8%;top:77%;}
.p1{
	width:94.875%;/*759*/
	padding-bottom:71.5%;/*572*/
	top:37.9%;/*539*/
	left:-33.375%;
	}
.p2{
	width:133.5%;/*1068*/
	padding-bottom:99.75%;/*798*/
	top:39.4514%;/*561*/
	right:-37.875%;/*-303*/
	}
.seagull_1{
	width:13.25%;/*106*/
	padding-bottom:8.125%;/*65*/
	top:21.72995%;/*309*/
	left:1.125%;/*9*/
	}
.seagull_2{
	width:15.25%;/*122*/
	padding-bottom:8.375%;/*67*/
	top:3.44585%;/*49*/
	right:6.25%;/*50*/
	}
.dialogbx1 > div > div,.dialogbx2 > div > div{font-size:4.75vw;/*38*/}

/*2*/
 
/*光箱*/
.noticebx > .n_titbx{
	height:50px;
	border-radius:10px 10px 0 0 ;
	/**/
	font-size:1.8rem;
	line-height:50px;
	font-weight: 500;
	}
.close{
	width:17px;
	padding-bottom:17px;
	right:3.8%;
	}
.noticebx > .n_con{
	height:calc(100vh - 150px);
	border-radius: 0 0 10px  10px;
	/**/
	font-size: 1.3rem;/*1.35*/
	line-height:2rem;
	}
.noticebx > .n_con > div{
	width:100%;/*92*/
	padding:1.8rem 16px 1.2rem 13px;
	}
.noticebx > .n_con .nb1,.noticebx > .n_con .nb2{
	padding:0 0 0 1.6rem;
	}
.noticebx > .n_con .nb1 li,.noticebx > .n_con .nb2 li{
	margin-bottom:.3rem;
	}
/*3*/
.page3{padding-bottom:176%;}
#featurebx{width:69%;top:48.2%;}
#featurebx .swiper-slide:nth-child(1){background-image: url(../images/feature_1m.png);}
#featurebx .swiper-slide:nth-child(2){background-image: url(../images/feature_2m.png);}
#featurebx .swiper-slide:nth-child(3){background-image: url(../images/feature_3m.png);}
#featurebx .swiper-slide:nth-child(4){background-image: url(../images/feature_4m.png);}
#featurebx .swiper-slide:nth-child(5){background-image: url(../images/feature_5m.png);}
#featurebx .swiper-slide:nth-child(6){background-image: url(../images/feature_6m.png);}
.febtbx{
	width:100%;/*1307*/
	height:2%;
	top:94.5%;
	left:50%;
	transform:translateX(-50%);
	text-align:center;
	}
.febtbx > li{
	position:relative;
	width:2.5%;
	padding-bottom:2.5%;
	display:inline-block;
	border-radius:50%;
	background-color:#FFF;
	background-image:none;
	margin:0 1.3%;
	overflow:hidden;
	/**/
	-webkit-filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0));
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0));
	}
.febtbx > li::before{background-image:none;background-color:#F5931B;}
.febtbx > li::after{display:none;}
.febtbx > li .tx1{display:none;}
.febtbx > li .tx2{display:none;}
.febtbx > li .line{display:none;}
.febtbx > li:nth-child(1){top:0%;left:0;}
.febtbx > li:nth-child(2){top:0%;left:0;}
.febtbx > li:nth-child(3){top:0%;left:0;}
.febtbx > li:nth-child(4){top:0%;right:0;}
.febtbx > li:nth-child(5){top:0%;right:0;}
.febtbx > li:nth-child(6){top:0%;right:0;}


/*4*/
ul.qabx{width:95%;} 
ul.qabx > li {
  border-radius:20px;
  border:4px solid #3C3531;
  margin-bottom:2rem;
	}
ul.qabx > li .qbx {
  position: relative;
  padding: 1.5rem 5.4%;
  cursor: pointer;
}
ul.qabx > li .question{  /*以寬800*/
	font-size:1.8rem;/*28*/
	padding: 0 2.1rem 0 2rem;
	}
ul.qabx > li .question::before{
	top:.3rem;
	}
ul.qabx > li .question::after{
	width:2rem;/*36*/
	padding-bottom:2rem;
	top:.2rem;
	}
ul.qabx > li .answer {
  	position: relative;
  	padding: 0 5.4% 1.5rem;
	}
ul.qabx > li .answer > .con{font-size:1.5rem;/*22*/}
ul.qabx > li .answer > .con ul.nb{padding:2rem 0 0 2rem;/*25px*/}		
	
}
/**/
@media only screen and (max-width:780px){
/**/
.fbx{display:none;}	
/**/
.navb2{height:60px;}
}
@media only screen and (max-width:685px){ 
/**/
.titlebx{padding-bottom:70px;}
.titlebx > div{font-size:2.416rem;}	
.titlebx > div::before,.titlebx > div::after{width:20.6%;}
.titlebx > div::before{left:-30.2%;}
.titlebx > div::after{right:-30.2%;}
/*4*/
ul.qabx{
	width:98%;
	padding:3rem 0 0;
	} 
ul.qabx > li {
  border-radius:20px;
  border:4px solid #3C3531;
	}
ul.qabx > li .qbx {
  position: relative;
  padding: 1.5rem 5.4%;
  cursor: pointer;
}
ul.qabx > li .question{ 
	font-size:1.5rem;/*28*/
	padding: 0 2.2rem 0 1.6rem;
	}
ul.qabx > li .question::before{
	top:.35rem;
	}
ul.qabx > li .question::after{
	width:1.6rem;/*36*/
	padding-bottom:1.6rem;
	top:.2rem;
	}
ul.qabx > li .answer {
  	position: relative;
  	padding: 0 5.4% 1.5rem;
	}
ul.qabx > li .answer > .con{font-size:1.35rem;/*22*/}
ul.qabx > li .answer > .con ul.nb{padding:1.5rem 0 0 1.8rem;/*25px*/}	

}
@media only screen and (max-width:580px){
/*2*/
.ncb{padding:0 16px;}
.noticebx {width:100%;}
/*4*/	
.page4 .gap{padding-bottom:106%;}
.road{background-image:url(../images/page4_1m.png);margin-top:0;}
.cloud4_1{
	top:-22.594%;
	left:5.1%;
	}
.balloon3{
	top:-45.6%;
	left:89.1%;
	}
.phone{
	width:100%;/*594*/
	padding-bottom:96.438%;/*716*/
	top:-145%;/*534*/
	right:10%;/*20.5*/
	}
.phone2{
	width:100%;
	padding-bottom:99%;
	top:-150%;
	right:0%;
	background-image:none;
	}
.phone2 .vbx{display:block;}
.qrcbx{
	width:72%;/*579*/
	padding-bottom:62.3%;/*501*/
	top:-11%;/*611*/
	left:14%;
	}
.qrcbx::before{
	font-size: 6.3vw;/*53*/
	top:8%;
	}
/**/
.navb2{height:55px;}
		
}
@media only screen and (max-width:560px){
/**/
}
@media only screen and (max-width:470px){
/**/
.titlebx{
	padding-bottom:60px;
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;
	}
.titlebx > div{font-size:2.2rem;}	
.titlebx > div::before,.titlebx > div::after{width:20%;}
.titlebx > div::before{left:-30.2%;}
.titlebx > div::after{right:-30.2%;}
/**/
.topbt{
	width:10%;/**/
	padding-bottom:10%;
	bottom:5%;
	right:1%;
	}

}

@media only screen and (max-width:380px){
/**/
.titlebx > div{font-size:2rem;}	
.titlebx > div::before,.titlebx > div::after{width:15%;}
.titlebx > div::before{left:-25.2%;}
.titlebx > div::after{right:-25.2%;}
}
@media only screen and (max-width:360px){
/**/
}
@media only screen and (max-width:340px){
/**/
.titlebx > div.t1{ width:53%;}	
}

/*動態*/

@keyframes updown {
   0% {top:0%;}
   50% {top:10%;}
   100% {top:0%;}
	}
@keyframes updown2 {
   0% {top:0%;}
   50% {top:5%;}
   100% {top:0%;}
	}
@keyframes leftright {
   0% {left:0%;}
   50% {left:20%;}
   100% {left:0%;}
	}
@keyframes leftright2 {
   0% {right:0%;}
   50% {left:-20%;}
   100% {right:0%;}
	}
@keyframes leftright3 {
   0% {left:0%;}
   50% {left:4%;}
   100% {left:0%;}
	}
@keyframes leftright4 {
   0% {left:0%;}
   50% {left:-4%;}
   100% {left:0%;}
	}
	
@keyframes flashing{
   0% {opacity:1}
   50% {
	   opacity:0;
	   transform: scale(0.3);
	   }
   100% {opacity:1}
	}
@keyframes flashing2{
   0% {opacity:0;transform:scale(0.2);}
   25% {opacity:1;transform:scale(1.2);}
   50% {opacity:0;transform:scale(0.3);}
   75% {opacity:1;transform:scale(1);}
   100% {opacity:0;transform:scale(0.2);}
	}