* { margin:0;padding:0;border:0; box-sizing: border-box;  }
html{ position:relative; top:0; right:0; width:100%; height:100%; scroll-behavior: smooth; overflow-x:hidden; }
body{ position:relative; top:0; right:0; width:100%; height:100%; direction:rtl; right:0; font-family: DF, Tahoma, Arial, 'Times New Roman'; font-size:12pt; color:#111;  }

@font-face { font-family:'DB'; src: url('../C/F/PlF-B.eot?#') format('eot'), url('../C/F/PlF-B.woff') format('woff'), url('../C/F/PlF-B.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'DF'; src: url('../C/F/PlF-R.woff') format('woff'), url('../C/F/PlF-R.ttf') format('truetype'), url('../C/F/PlF-R.eot?#') format('embedded-opentype'); font-weight: normal; font-style: normal; font-display: swap; }
.Shadow { position:relative; -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 0 60px rgba(0, 0, 0, 0.75); box-shadow:0 0 60px rgba(0, 0, 0, 0.75); }

.G1 { background: radial-gradient(ellipse at center, rgba(47,113,200,1) 0%, transparent 75%); }
.G2 { background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, transparent 70%); }

.F, svg { position:absolute; top:0; right:0; width:100%; height:100%; }
.RCX { position:relative; border-radius:10000px; -webkit-border-radius:10000px; -moz-border-radius:10000px; -o-border-radius:20px; }
.S0{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0); transform:scale(0); }
.R90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
div, span, img, p { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } 

a { text-decoration:none; color:#888; }
::placeholder { color:#bbb; opacity:1; }
::-webkit-scrollbar { width: 3px; height: 3px; right:2px; z-index:100000000;  }
::-webkit-scrollbar-track { background-color: transparent }
::-webkit-scrollbar-thumb { background: #777; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgb(224, 147, 25); }

.ScrollBox { z-index:100000000; }
.ScrollBox::placeholder { color:#bbb; opacity:1; }
.ScrollBox::-webkit-scrollbar { width: 3px; height: 3px; right:-5px; }
.ScrollBox::-webkit-scrollbar-track { background-color: transparent; }
.ScrollBox::-webkit-scrollbar-thumb { background: #777; border-radius: 10px; }
.ScrollBox::-webkit-scrollbar-thumb:hover { background: rgb(224, 147, 25); }

/*///////////////////////*/

.LoaderBox { position:absolute; right:50%; top:50%; margin:-100px; width:200px; height:200px; font-size:18px; background-color:transparent; border:none; -webkit-user-select:none; z-index:20000; display:none; }
.LoaderBack { position:absolute; right:50%; top:50%; margin:-3000px; width:6000px; height:6000px; backdrop-filter: blur(8px) grayscale(10%) brightness(80%); background-image:url(../I/noise.png); }
.LoaderFix { position:fixed; }
#LoaderP1 { position:absolute; width:200px; top:50%; right:100%; margin-top:-6px; color:#666; text-align:right; direction:rtl; opacity:0; }
#LoaderP2 { position:absolute; width:200px; top:50%; left:100%; margin-top:-6px; color:#666; text-align:left; opacity:0; direction:ltr; }
.LoaderW { position:relative; width:140px; height:140px; margin:30px 30px; transform:rotate(-45deg); }
.LoaderB { position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(135, 0, 0, 0.6); background:linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC); background-position:0% 50%; background-size:1000% 1000%; visibility:hidden; }
.LoaderB.LB1 { animation:LMG 15s infinite, LM1 3.5s infinite; }
.LoaderB.LB2 { animation:LMG 15s infinite, LM2 3.5s 0.15s infinite; }
.LoaderB.LB3 { animation:LMG 15s infinite, LM3 3.5s 0.3s infinite; }
.LoaderB.LB4 { animation:LMG 15s infinite, LM4 3.5s 0.575s infinite; }
.LoaderB.LB5 { animation:LMG 15s infinite, LM5 3.5s 0.725s infinite; }
.LoaderB.LB6 { animation:LMG 15s infinite, LM6 3.5s 0.875s infinite; }
@keyframes LMG { to { background-position:100% 50%; } }
@keyframes LM1 {
  0% { visibility:visible; clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  14.2857% { clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  28.5714% { clip-path:inset(35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  42.8571% { clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  57.1428% { clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  71.4285% { clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  85.7142% { clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  100% { clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); } }
@keyframes LM2 {
  0% { visibility:visible; clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  14.2857% { clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  28.5714% { clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  42.8571% { clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  57.1428% { clip-path:inset(35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  71.4285% { clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  85.7142% { clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  100% { clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); } }
@keyframes LM3 {
  0% { visibility:visible; clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  14.2857% { clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  28.5714% { clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  42.8571% { clip-path:inset(0% 70% 70% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  57.1428% { clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  71.4285% { clip-path:inset(0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  85.7142% { clip-path:inset(35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  100% { clip-path:inset(35% 70% 35% 0 round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); } }
@keyframes LM4 {
  0% { visibility:visible; clip-path:inset(35% 0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  14.2857% { clip-path: inset(35% 0% 35% 70% round 5%); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
  28.5714% { clip-path:inset(35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  42.8571% { clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  57.1428% { clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  71.4285% { clip-path:inset(70% 0 0 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  85.7142% { clip-path:inset(70% 0 0 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  100% { clip-path:inset(35% 0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); } }
@keyframes LM5 {
  0% { visibility:visible; clip-path:inset(70% 0 0 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  14.2857% { clip-path:inset(70% 0 0 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  28.5714% { clip-path:inset(35% 0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  42.8571% { clip-path: inset(35% 0% 35% 70% round 5%); animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1); }
  57.1428% { clip-path:inset(35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  71.4285% { clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  85.7142% { clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  100% { clip-path:inset(70% 0 0 70% round 5%);  animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); } }
@keyframes LM6 {
  0% { visibility:visible; clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  14.2857% { clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  28.5714% { clip-path:inset(70% 0 0 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  42.8571% { clip-path:inset(70% 0 0 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  57.1428% { clip-path:inset(35% 0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  71.4285% { clip-path:inset(35% 0% 35% 70% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  85.7142% { clip-path:inset(35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
  100% { clip-path:inset(70% 35% 0% 35% round 5%); animation-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }}

/*///////////////////////*/

.GooBtn { position:relative; width:50px; height:48px; filter:url("#Goo"); cursor:pointer; }
.GooB { width:30px; height:30px; border-radius:50%; position:absolute; z-index:-1; }
.GooBW { position:relative; width:100%; min-height:60px; background: radial-gradient(ellipse at center, rgba(255,210,140,0.5) 0%,rgba(255,210,140,0) 69%,rgba(255,210,140,0) 100%); }
.GooB:before, .GooB:after{ position:absolute; content:' '; height:20px; width:20px; border-radius:50%; transition:all 1s ease; pointer-events:none; }
.GooB:first-of-type:before, .GooB:first-of-type:after { top:0; left:0; }
.GooBtn:hover .GooB:first-of-type:before { top:-35px; left:35px; background-color:transparent; }
.GooBtn:hover .GooB:first-of-type:after { top:35px; left:-35px; background-color:transparent; }
.GooB:first-of-type { top:0; left:0; }
.GooB:last-of-type:before, .GooB:last-of-type:after { right:0; bottom:0; }
.GooBtn:hover .GooB:last-of-type:before { bottom:-50px; right:50px; background-color:transparent; }
.GooBtn:hover .GooB:last-of-type:after { bottom:35px; right:-35px; background-color:transparent; }
.GooB:last-of-type { bottom:0; right:0; }

.GooBRed, .GooBRed .GooB, .GooBRed .GooBW, .GooBRed .GooB:before, .GooBRed .GooB:after { background-color:rgb(224, 147, 25); }
.GooBW { display:flex; }
.GooBW .SVG { position:relative; width:40px; fill:#fff; margin-right:10%; }
.GooBRed:hover .GooB:first-of-type { animation:FirstGooBRed ease 1s forwards; }
@Keyframes FirstGooBRed { 60%{ width:20px; height:20px; background-color:rgb(224, 147, 25); } 80% { top:-30px; left:-30px; background-color:rgb(224, 147, 25); } 100% { top:-30px; left:-30px; width:10px; height:10px; background-color:transparent; }}
.GooBRed:hover .GooB:last-of-type { animation:LastGooBRed ease 1s forwards; }
@Keyframes LastGooBRed { 60% { width:20px; height:20px; background-color:rgb(224, 147, 25); } 80% { bottom:-30px; right:-30px; background-color:rgb(224, 147, 25); } 100% { bottom:-30px; right:-30px; width:10px; height:10px; background-color:transparent; }}

.GooBWhite, .GooBWhite .GooB, .GooBWhite .GooBW, .GooBWhite .GooB:before, .GooBWhite .GooB:after { background-color:#fff; }

.GooBWhite:hover .GooB:first-of-type { animation:FirstGooBWhite ease 1s forwards; }
@Keyframes FirstGooBWhite { 60%{ width:20px; height:20px; background-color:#fff; } 80% { top:-30px; left:-30px; background-color:#fff; } 100% { top:-30px; left:-30px; width:10px; height:10px; background-color:transparent; }}
.GooBWhite:hover .GooB:last-of-type { animation:LastGooBWhite ease 1s forwards; }
@Keyframes LastGooBWhite { 60% { width:20px; height:20px; background-color:#fff; } 80% { bottom:-30px; right:-30px; background-color:#fff; } 100% { bottom:-30px; right:-30px; width:10px; height:10px; background-color:transparent; }}
.GooBWhite .GooIcon svg, .GooBWhite .GooIcon path { fill:#111; stroke:#111; }

.GooBGray, .GooBGray .GooB, .GooBGray .GooBW, .GooBGray .GooB:before, .GooBGray .GooB:after { background-color:#222; }
.GooBGray:hover .GooB:first-of-type { animation:FirstGooBGray ease 1s forwards; }
@Keyframes FirstGooBGray { 60%{ width:20px; height:20px; background-color:#222; } 80% { top:-30px; left:-30px; background-color:#222; } 100% { top:-30px; left:-30px; width:10px; height:10px; background-color:transparent; }}
.GooBGray:hover .GooB:last-of-type { animation:LastGooBGray ease 1s forwards; }
@Keyframes LastGooBGray { 60% { width:20px; height:20px; background-color:#222; } 80% { bottom:-30px; right:-30px; background-color:#222; } 100% { bottom:-30px; right:-30px; width:10px; height:10px; background-color:transparent; }}
.GooBGray .GooIcon svg, .GooBGray .GooIcon path { fill:#fff; }

.GooBWhite.GooBtnDis { opacity:0.1; transition:0.2s; }
.GooBGray.GooBtnDis { opacity:0.25; transition:0.2s; }

.GooBWhite.GooBtnDis:hover { opacity:0.5; }
.GooBGray.GooBtnDis:hover { opacity:0.65; }

.GooFormBtn { width:220px; height:60px; }
.GooBtn p { position:relative; width:100%; top:17px; font-size:19px; text-align:center; color:#fff; }

.GooBtnH .BtnP { position:absolute; width:180px; top:70px; right:50%; margin-right:-90px; color:#fff; text-align:center; font-size:15px; opacity:0; transition:0.3s; }
.GooBtnH:hover .BtnP { top:57px; opacity:0.5; }

/*///////////////////////*/

#PreLoad { position:relative; width:100vw; height:100vh; top:0; right:0; background-color:#eee; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }

#LoginG { position:fixed; width:3000px; height:3000px; top:-2000px; right:-1500px; opacity:0; }
#LoginBgX1 { position:fixed; width:600px; top:0; right:0; opacity:0.06; transform:rotate(180deg) }
#LoginBgX2 { position:fixed; width:600px; bottom:0; left:0; opacity:0.05; }
#LoginNoise { position:fixed; width:100%; height:100%; top:0; right:0; background:url(../I/Noise.png); opacity:1; }
#LoginPic { position:fixed; width:35%; left:12%; opacity:0.75; transform:scale(0) }
#LoginText { position:fixed; width:1200px; top:50%; color:#fff; font-size:120px; text-align:center; opacity:0.03; font-family:DB; line-height:120px; }
#LoginTitle { position:fixed; bottom:-112px; color:#fff; text-align:center; font-size:14px; letter-spacing:1px; opacity:0.5 }
#LoginLogo { position:fixed; bottom:-100px; width:100px; }

#PG1 { position:fixed; width:2000px; height:1000px; top:-400px; left:0; margin-left:-800px; opacity:0.2; }
#PG2 { position:fixed; width:2000px; height:1000px; bottom:-400px; right:0; margin-right:-800px; opacity:0.2; }

#LoginBox { position:fixed; width:380px; height:420px; top:50%; right:15%; margin-top:-210px; display:block; }
.LightBoxHeaderTitle { position:absolute; top:25px; right:30px; width:calc(100% - 60px); color:#fff; font-size:22px; z-index:1; opacity:0; transform:scale(0); }
#LoginBox .LightBoxTopArc, #LoginBox .LightBoxBottomArc { width:380px; margin-right:-190px; }
#LoginFormBox, #LoginOnceBox, #LoginOnceCodeBox { position:absolute; width:calc(100% - 60px); height:calc(100% - 120px); top:60px; right:30px; display:none; }
#LoginBox .BMSBtnCircle { border:0; }

#LoginBox .LightBoxBtnNoise { clip-path: url(#ArcClip2) }

#LoginBox .GooFormBtn { /*right:50%;*/ margin-top:20px;/* margin-right:-110px;*/ }

#LoginBox .XTextBoxLP { margin-right:50%; width:0; opacity:0; }
#LoginBox .XLPPic { transform: scale(0); }
#LoginBox .XLPTitle { right:0; opacity:0; }

#LoginBox #LoginRemember { right:120px; margin-top:25px; opacity:0; }
#LoginBox #LoginForget { right:100px; opacity:0; }
#LoginBox #LoginOncePass { right:100px; opacity:0; }

#LoginBox #ForgetReturn2 { right:100px; margin-top:25px; opacity:0; }

#LoginOnceCodeW { position:relative; width:100%; right:0; margin:10px 0; display:flex; direction:ltr; }
.LoginOnceCodeInput { position:relative; width:50px; min-height:60px; font-family:DF; font-size:20px; color:#fff; padding:15px 0; margin:0 5px; background-color:transparent; border:1px solid rgba(255, 255, 255, 0.3); text-align:center; border-radius:15px; flex-grow:1; outline: none; }
#LoginOnceCodeBox>p { position:relative; width:100%; color:#fff; font-size:18px; margin:15px 0; opacity:0; right:100px; }
#LoginOnceCodeBox #LoginOnceCodeResend { opacity:0; right:100px; direction:ltr; }
#LoginOnceCodeBox #OnceReturn { opacity:0; right:100px; }
#LoginOnceCodeResend span { color:#fff; }