@charset "utf-8";
/* CSS Document */
.chatbx{
	position:fixed;
	width:0;/*1056px*/
	height:750px;
	right: 0;
	bottom:0;
	overflow:hidden;
	transition: all .5s;
	z-index: 5;
	}
.chatbx.on{width:1056px;}
.chatbx > span{
	position:absolute;	
	width:1056px;
	height: 100%;
	left: 0;
	bottom: 0;
	transition: all .5s;
	}
.chatbx  .chbx{
	position:absolute;
	width:660px;/*790px*/
	height:700px;/*100%*/
	border-radius:20px 0 0 0;
	border:3px solid #203c66;
	background-color:#203c66;
	background-attachment: scroll;
	background-repeat:repeat;
	background-position:0% 0%;
	/*background-size:100% auto;*/
	background-image:url(../images/sp/chbg.png);
	right:0;
	bottom:0;
	/*overflow:hidden;*/
	}
.chatbx  .chbx > .chb1{
	position:absolute;
	width:435px;/*435  55%*/
	height:96.4%;/*674*/
	right:1.6%;/*13*/
	bottom:1.8%;/*13*/
	/**/
  	-webkit-filter: drop-shadow(0 0 35px rgba(9, 29, 52, .8));
  	filter: drop-shadow(0 0 35px rgba(9, 29, 52, .8));
	}
.chatconbx{
	position:absolute;
	width:100%;
	height:79.8%;/*538*/
	background-color:#fff;
	border-radius:10px;
	right:0;
	bottom:0;
	}
.messagenbx{
	position:absolute;
	width:100%;/*435*/
	height:56px;/*56*/
	border-top:1px solid #c9c9c9;
	border-radius:0 0 10px 10px;
	background-attachment: scroll;
	background-repeat:repeat;
	background-position:0% 0%;
	/*background-size:100% auto;*/
	background-image:url(../images/sp/mesbg.png);
	left: 0;
	bottom:0;
	padding:2% 12.6% 2% 14.9%;/*9 16  9 55  9  65 */
	}
.mescon{
	position:absolute;
	width:100%;/*403 92.6%*/
	height:calc(100% - 3.3% - 57px );/*12*/
	left:0%;
	top:2.2%;
	overflow:auto;
	/**/
	display:flex;
	flex-wrap:wrap;
	flex-direction:column-reverse;
	}
.mesconbx{
	position:relative;
	width:100%;/*403 92.6%*/
	/*height:calc(100% - 3.3% - 57px );12*/
	/**/
	display:flex;
	flex-wrap:wrap;
	flex-direction: column;
	/*flex-direction:column-reverse;*/
	}
.mesconbx > li{
	position:relative;
	width:100%;
	min-height:4rem;/*48*/
	padding:.5rem 3.67% .5rem 14.9%;/* 16  65*/
	margin:0 auto;
	/**/
	font-size:1.25rem;/*15*/
	color:#585858;
	/**/
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	}
.mesconbx > li > p{
	position:absolute;
	width:8.7%;/*38*/
	padding-bottom:8.7%;
	border-radius:99px;
	background-color: #FFF;
	overflow: hidden;
	top:.5rem;
	left:3.67%;
	}
.mesconbx > li > p img{
	position:absolute;
	width:100%;
	display:block;
	top: 0;
	left: 0;
	}
.mesconbx > li .name{
	position:relative;
	/*padding:0 2px 0 0;*/
	display:inline-block;
	color:#929292;
	}

.messagenbx .avatarbx{
	position:absolute;
	width:8.7%;/*38*/
	padding-bottom:8.7%;
	display: block;
	cursor:pointer;
	border-radius:99px;
	background-color: #FFF;
	overflow: hidden;
	top:50%;
	left:3.67%;
	transform: translateY(-50%);
	}
.avatarbx img{
	position:absolute;
	width: 100%;
	display: block;
	top: 0;
	left: 0;
	}
.messagenbx .sendbt{
	position:absolute;
	width:8.7%;/*38*/
	padding-bottom:8.7%;
	display:block;
	cursor:pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/sp/sendpsd.png);
	top:50%;
	right:2.67%;
	transform: translateY(-50%);
	}
.messagenbx input{
	position:relative;
	width:100%;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:1.33rem;/*16*/
	color:#585858;
	height:3.16rem;/*38*/
	line-height:3.16rem;
	border:0;
	padding:0;
	margin:0 auto;
	background-color:transparent;
	}
.messagenbx ::-webkit-input-placeholder{color:#979797;}
.messagenbx :-ms-input-placeholder{color:#979797;}
.messagenbx ::placeholder{color:#979797;}
.avatarbx2{
	position:absolute;
	width:75%;/*200*/
	border-radius:10px;
	background-color:#FFF;
	padding:2%;
	/**/
  	-webkit-filter: drop-shadow(0 0 30px rgba(9, 29, 52, .6));
  	filter: drop-shadow(0 0 30px rgba(9, 29, 52, .6));
	bottom:5.5%;/*9.5*/
	left:-12%;
	opacity:0;
	pointer-events: none;
	/**/
	transition: all .5s;
	}
.avatarbx2.on{
	pointer-events:auto;
	opacity:1;
	bottom: 11.5%;
	}	
.avatarbx2:before{
	position: absolute;
	width:10%;
	padding-bottom:10%;
	content: "";
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/sp/av.png);
	bottom: -10%;
	left:21.5%;
	}
.avatarbx2 > p{
	position:relative;
	width: 21%;
	padding-bottom:21%;
	display:inline-block;
	cursor:pointer;
	border-radius:99px;
	background-color: #FFF;
	overflow: hidden;
	margin:1.5% 1.2%; 
	}
.avatarbx2 > p::before{
	position: absolute;
	display:block;
	content: "";
	width:110%;
	height:110%;
	border-radius:99px;
	border:10px solid #e3b55d;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	pointer-events: none;
	/**/
	transition: all .3s;
	}
.avatarbx2 > p > img{
	position:absolute;
	width: 100%;
	display: block;
	top: 0;
	left: 0;
	opacity:.8;
	transition: all .5s;
	}
.avatarbx2 > p:hover > img,.avatarbx2 > p.on > img{opacity:1;}
.avatarbx2 > p:hover::before,.avatarbx2 > p.on::before{
	width:85%;
	height:85%;
	}
/**/
.avabnbx{
	position:absolute;
	width:100%;
	right:0;
	top:0;
	}
.avabnbx .avapag{width:100%;}
.avabnbx .avapag .swiper-pagination-bullet {
  	width: 10px;
  	height: 10px;
  	margin: 7px 4px;
  	opacity: .5;
	}
.avabnbx .avapag .swiper-pagination-bullet-active {
  	background:#2c8aff;
	}
.avabn{
	position: relative;
	width:100%;
	/*height:16.32%;110*/
	border:1px solid #fff;
	background-color:#fff;
	border-radius:10px;
	}
.avabn .swiper-slide{
	width:100%;/*435*/
	padding-bottom:25.287%;/*110*/
	background-color: #ebebeb;
	}
.avabn .swiper-slide a,.avabn .swiper-slide > img{
	position: absolute;
	width:100%;
	display:block;
	left:0;
	top:0;
	}
.avabn .swiper-slide a img{
	position: relative;
	width:100%;
	display:block;
	}
.avabn .swiper-slide p{
	position: absolute;
	}
.sp1{
	position: absolute;
	width:1056px;
	height:750px;
	display: block;
	pointer-events: none;
	bottom: 0;
	right: 0;
	/*opacity: 0;*/
	}
.sp1 canvas{
	position: relative;
	width: 100%;
	display: block;
	}
.spclos{
	position: absolute;
	width: 105px;
	padding-bottom:52px;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:100% 50%;
	background-size:100% auto;
	background-image:url(../images/sp/spclos.png);
	top:20px;
	right: 100%;
	cursor: pointer;
	}
.opavbx{
	position:fixed;
	width:12.3%;/*246*/
	display: block;
	cursor: pointer;
	right:-2%;
	bottom: 20%;/*244*/
	z-index: 5;
	}
.opavbx > div{
	position:relative;
	width:100%;/*246*/
	padding-bottom:108.13%;/*266*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/sp/opav1.png);
	background-size:100% auto;
	top: 0;
	right: 0;
	}
.opavbx > div.op1{background-image:url(../images/sp/opav2.png);}
.opavbx > div.op2{background-image:url(../images/sp/opav3.png);}
.opavbx > p{
	position: absolute;
	width:60.975%;/*150*/
	padding-bottom:46.341%;/*114*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/sp/opav_k.png);
	background-size:100% auto;
	top:-2%;
	left:0;
	/**/
	-moz-animation:wobble 3s 2s ease-out infinite;
	-webkit-animation:wobble 3s 2s ease-out infinite;
	-o-animation:wobble 3s 2s ease-out infinite;
	-ms-animation:wobble 3s 2s ease-out infinite;
	animation:wobble 3s 2s ease-out  infinite;
	}
/*20250331*/
.mes_newbx{
	position: absolute;
	width: 100%;
	padding: 8px 4.2%;
	display: block;
	cursor: pointer;
	background-color: #757c8d;
	color: #FFF;
	font-size: 1.25rem;
	border-radius: 10px 10px 0 0;
	/**/
  	-webkit-filter: drop-shadow(0 0 10px rgba(9, 29, 52, .5));
  	filter: drop-shadow(0 0 10px rgba(9, 29, 52, .5));
	}


@media only screen and (max-width:1600px){
/**/
		
}
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1200px){
/**/
	
}
@media only screen and (max-width:1000px){	
/**/
.chatbx {height: 675px;}
.chatbx.on{width: 950px;}
.chatbx > span {width: 950px;}
.chatbx .chbx {
  	width: 620px;
  	height: 627px;
	}
.chatbx .chbx > .chb1 {width: 380px;}
.sp1 {
  	width: 950px;
  	height: 675px;
	}
}
@media only screen and (max-width:800px){
/**/

}	
@media only screen and (max-width:780px){
/**/
.chatbx{
	width:0;/*750px*/
	height:137vw;/*1070px*/
	}
.chatbx.on{width:96.15vw;}
.chatbx > span{width:96.15vw;}
.chatbx  .chbx{
	width:96.15vw;/*750px*/
	height: 100%;
	border-radius:2.5vw 0 0 0;/*20*/
	border:.38vw solid #203c66;/*3*/
	background-position:0% 0%;
	background-size:8.5vw auto;
	}
.chatbx  .chbx > .chb1{
	width:94%;/*665 88.6*/
	height:96.2%;/*1030*/
	right:3%;/*13 5.7*/
	bottom:1.9%;/*13*/
	/**/
  	-webkit-filter: drop-shadow(0 0 4.5vw rgba(9, 29, 52, .8));/*35*/
  	filter: drop-shadow(0 0 4.5vw rgba(9, 29, 52, .8));
	}
.chatconbx{
	height:77.9%;/*823 79.9%*/
	border-radius:1.9vw;/*15*/
	}
.messagenbx{
	height:10.8vw;/*85*/
	border-top:.12vw solid #c9c9c9;/*1*/
	border-radius:0 0 1.9vw 1.9vw;/*15px*/
	background-size:10.2vw auto;/*80*/
	padding:2% 12.6% 2% 14.9%;/*9 16  9 55  9  65 */
	}
.mescon{
	height:calc(100% - 5.8% - 7.4vw );/*58*/
	top:2.2%;
	}
.mesconbx > li{
	min-height:9.3vw;/*72.54*/
	padding:.7vw 3.67% .7vw 14.9%;/* 16  65 6*/
	/**/
	font-size:2.9vw;/*23*/
	}
.mesconbx > li > p{
	top:.7vw;
	}	
.messagenbx .avatarbx{
	width:8.7%;/*58*/
	padding-bottom:8.7%;
	left:3.67%;/*24*/
	}	
.messagenbx input{
	font-size:3.2vw;
	height:7.4vw;/*58*/
	line-height:7.4vw;
	}
.avatarbx2{
	width:70%;
	border-radius:2vw;/*15*/
	/**/
  	-webkit-filter: drop-shadow(0 0 3.8vw rgba(9, 29, 52, .6));
  	filter: drop-shadow(0 0 3.8vw rgba(9, 29, 52, .6));/*30*/
	left:-2%;
	}
.avatarbx2:before{
	left:8.5%;
	}
/**/
.avabn{
	border:.12vw solid #fff;/*1*/
	border-radius:1.9vw;/*15*/
	}
.avabnbx .avapag .swiper-pagination-bullet {
  	width: 1.92vw;/*15*/
  	height: 1.92vw;
  	margin: 2.1vw .76vw;/*6*/
	}
.sp1{display:none;}
.spclos{
	width: 15.769vw;/*123*/
	padding-bottom:12.051vw;/*94*/
	background-image:url(../images/sp/spclos_m.png);
	top:23vw;;
	right:auto;
	left: 0;
	z-index: 2;
	}	
.opavbx{
	width:31.53%;/*246*/
	right:-2%;
	bottom:3%;/*244*/
	}
/*20250331*/
.mes_newbx{
	padding: 10px 4.2%;
	font-size: 2.9vw;
	border-radius: 1.9vw 1.9vw 0 0;
	}
	
	
}
@media only screen and (max-width:685px){ 
/**/
}
@media only screen and (max-width:580px){
/**/	
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:470px){
/**/
.mesconbx > li{font-size:1.1rem;}
.messagenbx input{font-size:1.2rem;}
/*20250331*/
.mes_newbx{
	padding: 10px 4.2% 8px;
	font-size: 1.1rem;
	border-radius: 1.9vw 1.9vw 0 0;
	}
}
@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/	
}
@media only screen and (max-width:340px){
/**/

}


@keyframes wobble {
 0% {
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
 10% {
  -webkit-transform:translate3d(-25%,0,0) rotate(-5deg);
  transform:translate3d(-25%,0,0) rotate(-5deg)
 }
 20% {
  -webkit-transform:translate3d(20%,0,0) rotate(3deg);
  transform:translate3d(20%,0,0) rotate(3deg)
 }
 30% {
  -webkit-transform:translate3d(-15%,0,0) rotate(-3deg);
  transform:translate3d(-15%,0,0) rotate(-3deg)
 }
 40% {
  -webkit-transform:translate3d(10%,0,0) rotate(2deg);
  transform:translate3d(10%,0,0) rotate(2deg)
 }
 50% {
  -webkit-transform:translate3d(-5%,0,0) rotate(-1deg);
  transform:translate3d(-5%,0,0) rotate(-1deg)
 }
 60% {
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
 to {
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
 }
}