*{ margin:0px; padding:0px; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
*:focus{ outline:none;}
ul,li{ list-style-type: none;}
.overflow{overflow: hidden;height: 100%;}
.dialog-modal-mask{ width:100%; height:100%; display: none; position: fixed; left:0; top:0; background:rgba(0,0,0,0.5); z-index:999999;}
#dialog-mask-toast,#dialog-mask-loading{background:rgba(0,0,0,0);}
.dialog-modal{ position: fixed; z-index:33;  display: none; left:50%; top:50%; text-align: center; max-width:80%; max-height:80%;}
.dialog-modal.dialog-modal-model{ width:400px;}
.dialog-modal.dialog-modal-success,.dialog-modal.dialog-modal-error{ padding:20px 12px; width:140px; }
.dialog-modal.dialog-modal-alert,.dialog-modal.dialog-modal-confirm,.dialog-modal.dialog-modal-alertLog,.dialog-modal-alertdropdown{ position: absolute; left: 50%; top: 50%; background-color: #fff; width: 430px; border-radius: 28px; box-sizing: border-box; transform: translate(-50%, -50%);}
.dialog-modal .dialog-modal-ico{ position: absolute; top: 16px; right: 16px;}
.dialog-modal .dialog-modal-prompt{ display: block; line-height: 1; padding: 0 40px 12px 40px; text-align: left; color: #aaa; font-size: 16px;}
.dialog-modal .dialog-modal-prompt font{ display: inline-block; vertical-align: middle; margin-left: 6px;}
.dialog-modal.dialog-modal-toast{ display: inline-block; }
.dialog-modal.dialog-modal-toast .dialog-modal-text{ display: inline-block; padding:10px 20px; background:rgba(0,0,0,0.6); color:#fff; border-radius:5px;}
.dialog-modal.dialog-modal-loading{  padding:20px 12px; width:100px; background:rgba(0,0,0,0.6); border-radius: 5px;}
.dialog-modal.dialog-modal-loading .dialog-modal-text{ padding:0; color:#fff; }
.dialog-modal .dialog-modal-load{ display: flex; align-items: center; padding-top:10px; margin-bottom:15px; justify-content:center; z-index: 9;}
.dialog-modal .dialog-modal-load span{ width:6px;  animation: dialog-alert-load 1s ease infinite; transform: translateY(10px); animation-delay:0.1s; margin:0 5px; height:6px; opacity:0; border-radius:6px; background:#fff;}
.dialog-modal .dialog-modal-load span:nth-child(2){ animation-delay:0.2s;}
.dialog-modal .dialog-modal-load span:nth-child(3){ animation-delay:0.3s;}
.dialog-modal .dialog-modal-title{ display: block; text-align: center; font-size: 22px; line-height: 1; margin-bottom: 20px; margin-top: 42px;}
.dialog-modal .dialog-close-btn{ position: absolute; right: 16px; top: 16px; cursor: pointer;}
.dialog-modal .dialog-modal-text{ font-size:16px; text-align: center; color:#808080; line-height:28px; padding: 0 40px 30px 40px; }
.dialog-modal .dialog-modal-text .h2{ display: block; margin-top: -10px; margin-bottom: 8px; font-size: 14px; color: #7A849A; line-height: 19px;}
.dialog-modal .dialog-modal-text .form-group{ display: inline-block; width: 100%; height: 54px; margin-top: 12px;  border: 1px solid #E0E0E0; border-radius: 8px; text-align: left;}
.dialog-modal .dialog-modal-text .form-group input{ display: inline-block; width: 302px; height: 52px; line-height: 52px; border: 0;}
.dialog-modal .dialog-modal-text .form-group .ico6{ cursor: pointer;}
.dialog-modal .dialog-modal-text .form-group .code{ width: 248px;}
.dialog-modal .dialog-modal-text .form-group .code_but{ display: inline-block; width: 95px; padding-right: 20px; color: #304DFF; font-size: 15px; border: 0; background-color: transparent; text-align: right;}
.dialog-modal .dialog-modal-text.l{ text-align: left;}
.dialog-modal .dialog-modal-text input{width: 100%;height: 54px;line-height: 54px;padding: 0 20px; border-radius: 8px; border: 1px solid #E0E0E0; font-size: 15px; color: #222222;}
.dialog-modal .dialog-modal-text img{ display: block; max-width: 300px; margin: 0 auto;}
.dialog-modal .dialog-modal-select{ display: inline-block; position: relative; width: 100%; padding:0 40px 30px 40px;}
.dialog-modal .dialog-modal-select>a{ display: inline-block; width: 100%;height: 54px;line-height: 54px;padding: 0 20px; border-radius: 8px; border: 1px solid #E0E0E0; font-size: 15px; color: #222222; text-align: left;}
.dialog-modal .dialog-modal-select>a font{ display: inline-block; vertical-align: top; line-height: 52px;}
.dialog-modal .dialog-modal-select>a i{ float: right; margin-top: 17px;}
.dialog-modal .dialog-modal-select .yun_select_box { position: absolute; top: 68px; display: none; width: 350px; max-height: 250px; padding: 20px 10px; background-color: #fff; border-radius: 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); z-index: 1; overflow-y: auto;}
.dialog-modal .dialog-modal-select .yun_select_box::-webkit-scrollbar { display: block; width: 6px; height: 1px; }
.dialog-modal .dialog-modal-select .yun_select_box::-webkit-scrollbar-thumb { border-radius: 10px; background: #C1C1C1; }
.dialog-modal .dialog-modal-select .yun_select_box::-webkit-scrollbar-track { border-radius: 10px; background: #F1F1F1; }
.dialog-modal .dialog-modal-select .yun_select_box a { display: block; width: 100%; height: 48px; padding-left: 20px; line-height: 48px; border-radius: 8px; font-size: 0; text-align: left;}
.dialog-modal .dialog-modal-select .yun_select_box a:hover{ background-color: #F9FAFC;}
.dialog-modal .dialog-modal-select .yun_select_box a.active { position: relative; background-color: #F1F0FE !important; color: #746EF6; }
.dialog-modal .dialog-modal-select .yun_select_box a.active::before{ content: ''; position: absolute; right: 7px; top: 9px; display: inline-block; width: 30px; height: 30px; background: url('../images/h5pc/ico20.png') no-repeat;}
.dialog-modal .dialog-modal-select .yun_select_box a font { display: inline-block; vertical-align: middle; font-size: 18px; }
.dialog-modal .dialog-modal-select .yun_select_box a .ico29 { margin-right: 5px; }
.dialog-modal .dialog-modal-icon{ padding-bottom:12px;}
.dialog-modal .dialog-modal-icon svg{ margin:0 auto; display: block;}
.dialog-modal.dialog-modal-success .dialog-modal-text,.dialog-modal.dialog-modal-error .dialog-modal-text{ color:#14d6a2; padding:0; opacity:0; transform: translateY(10px); animation: dialog-alert-text 0.3s ease forwards; animation-delay:0.9s; }
.dialog-modal.dialog-modal-error .dialog-modal-text{ color:#f54655}
.dialog-modal .dialog-modal-content{ padding-top:0; overflow: hidden auto; max-height:80%; font-size:0.38889rem;}
.dialog-modal .dialog-modal-btn{ display:flex; align-items: center; justify-content: center; padding: 0 33px 30px 33px;}
.dialog-modal .dialog-modal-btn button{ flex:1; color:#999; cursor: pointer; max-width: 350px; border:0; background:#F1F2F6; padding: 14px 0; margin: 0 7px; font-size:16px; border-radius: 100px;}
.dialog-modal .dialog-modal-btn button:last-child{ background-color: #746EF6; color: #fff;}
.dialog-modal .dialog-modal-btn button:active{ opacity:0.6;}

.dialog-ani-open{ animation: dialog-open 0.2s ease forwards; }
.dialog-ani-close{ animation: dialog-close 0.3s ease forwards; }

@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){
	.dialog-modal .dialog-modal-text,.dialog-modal .dialog-modal-content,.dialog-modal .dialog-modal-btn button{font-size: 14px;}
	.dialog-modal .dialog-modal-title{padding-top: 15px;}
	.dialog-modal .dialog-modal-text{padding: 15px 20px;}
	.dialog-modal .dialog-modal-btn button{padding: 12px;}
}

@-webkit-keyframes dialog-open{
   0%{ transform: scale(0.7) translate(-50%, -50%); opacity:0;  }
   100%{ transform: scale(1) translate(-50%, -50%); opacity:1; }
}

@-webkit-keyframes dialog-close{
 0%{ transform: scale(1) translate(-50%, -50%); opacity:1;  }
 30%{ transform: scale(1.05) translate(-50%, -50%); opacity: 0.5; }
 100%{ transform: scale(0.7) translate(-50%, -50%); opacity: 0;}
}

.dialog-alert-svgcircle{
   stroke-dasharray:200;
   stroke-dashoffset:200;
   animation: dialog-alert-ruand 0.5s ease-in-out forwards
}

.dialog-alert-svggou {
   stroke-dasharray:80;
   stroke-dashoffset:80;
   animation: dialog-alert-tick .6s ease-out forwards;
   animation-delay: .75s;
}

.dialog-alert-svgca1 {
 stroke-dasharray:80;
 stroke-dashoffset:80;
 animation: dialog-alert-tick .6s ease-out forwards;
 animation-delay: .75s;
}

.dialog-alert-svgca2 {
 stroke-dasharray:80;
 stroke-dashoffset:80;
 animation: dialog-alert-tick .6s ease-out forwards;
 animation-delay: .85s;
}

@keyframes dialog-alert-ruand {
 form{
  stroke-dashoffset:200;
 }
 to{
  stroke-dashoffset:400;
 }
}

@keyframes dialog-alert-tick {
from {
stroke-dashoffset:80;
}
to {
stroke-dashoffset: 0;
}
}

@keyframes dialog-alert-text {
	 from {
		transform: translateY(10px);
		opacity: 0;
	 }
	 to {
		transform: translateY(0px);
		opacity: 1;
	 }
 }
 
 @keyframes dialog-alert-button {
 	 from {
		opacity: 0;
 	 }
 	 to {
 		opacity: 1;
 	 }
}

 @keyframes dialog-alert-load {
  0% {
   transform: translateY(0px);
   opacity: 0;
  }
  50% {
   transform: translateY(-10px);
   opacity: 1;
  }
  100%{
   transform: translateY(0px);
   opacity: 0;
  }
  }