custom/public/css/git.openi.css

@@ -72,9 +72,7 @@
   z-index: 10;
 }
 .ui.secondary.c2net.segment{
-    /* background: #f8faff; 
-    border: none;*/
-    margin-bottom: 5em;
+    padding-bottom: 3em;
     padding-top: 2em;
     color: rgba(0,0,0,.87);
     background-image: linear-gradient(to bottom left,var(--tw-gradient-stops));
@@ -176,7 +174,7 @@
 }
 .homeorg, .homepro, .homemodel, .i-env{ 
   position: relative;
-  padding-bottom: 5em;
+  padding-bottom: 3em;
 }
 .homenews::before{
   content: '';
@@ -203,7 +201,7 @@
   padding: 0;
 }
 .newslist{
-  height: 300px;
+  height: 260px;
   overflow: hidden;
 }
 
@@ -278,7 +276,7 @@
   z-index: 9;
 }
 .homeorg-list .card{
-  background-image: linear-gradient(#FFF, #FFF 60%, #DFF0EF) !important;
+  /* background-image: linear-gradient(#FFF, #FFF 60%, #DFF0EF) !important; */
   box-shadow: none !important;
 }
 .homeorg-list .card .ui.small.header .content{
@@ -299,7 +297,7 @@
   background-color: #FFF;
   box-shadow: 0px 5px 10px 0px rgba(105, 192, 255, .3);
   border: 1px solid rgba(105, 192, 255, .4);
-  min-height: 10.8em;
+  /* min-height: 10.8em; */
 }
 .homepro-list .ui.card>.content>.header{
   line-height: 40px !important;
@@ -307,7 +305,7 @@
 
 .homepro-list .swiper-pagination-bullet-active, .homeorg-list .swiper-pagination-bullet-active{
   width: 40px;
-  border-radius: 4px;
+  border-radius: 4px;  
 }
 .i-env > div{
   position: relative;
@@ -317,6 +315,15 @@
 }
 
 @media only screen and (max-width: 767px) {
+  .mobile-margin-left-20 {
+    margin-left: 20px !important;
+  }
+  .mobile-text-align-center {
+    text-align: center !important;
+  }
+  .mobile-justify-content-center {
+    justify-content: center !important;
+  }
   .am-mt-30{ margin-top: 1.5rem !important;}
   .ui.secondary.hometop.segment{
     margin-bottom: 5.0rem;
@@ -341,7 +348,7 @@
     background: #FFF;
   }
   .homeorg{
-    padding-left: 3.5em;
+    /* padding-left: 3.5em; */
   }
   .homeorg-tit::after {
     left: -2.3em;

custom/public/img/logo-w.svg

@@ -1 +1,45 @@
-<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 50"><defs><style>.cls-1{fill:#5bb973;}.cls-2{fill:#fff;}</style></defs><title>logo-w</title><path class="cls-1" d="M42.08,12.13l-15.65-9a4.44,4.44,0,0,0-4.43,0l-15.65,9A4.44,4.44,0,0,0,4.13,16V34a4.44,4.44,0,0,0,2.22,3.84l3.83,2.21a2.88,2.88,0,0,0-.06.59,2.95,2.95,0,1,0,1-2.17L7.26,36.3A2.63,2.63,0,0,1,6,34V16A2.62,2.62,0,0,1,7.26,13.7l15.65-9a2.59,2.59,0,0,1,2.61,0l15.65,9A2.63,2.63,0,0,1,42.47,16V34a2.64,2.64,0,0,1-1.3,2.27l-15.65,9a3.16,3.16,0,0,1-.5.22V39.88a1.31,1.31,0,0,0,0-.28V36.35l.1,0,9-6a.92.92,0,0,0,.41-.75V20a3,3,0,1,0-1.82,0v9L25,34.18V15.94a3,3,0,1,0-1.82,0v12l-5.08-2.95V20.19a3,3,0,1,0-1.82,0v5.26a.9.9,0,0,0,.45.79L23.2,30v8.16L12.11,31.73V23.84a2.93,2.93,0,1,0-1.82,0v8.41a.94.94,0,0,0,.46.79l12.45,7.2v6.34a.22.22,0,0,0,0,.08v.09l0,.1s0,0,0,.07l.06.1s0,0,0,0l.08.1,0,0a.39.39,0,0,0,.1.08l0,0,.12.07,0,0,.14,0h0a.39.39,0,0,0,.15,0h.16a4.44,4.44,0,0,0,2.22-.59l15.65-9A4.46,4.46,0,0,0,44.29,34V16a4.45,4.45,0,0,0-2.21-3.83m-29,27.42a1.12,1.12,0,1,1-1.12,1.12,1.12,1.12,0,0,1,1.12-1.12m20.6-23.46a1.12,1.12,0,1,1-1.12,1.12,1.12,1.12,0,0,1,1.12-1.12m-16.45.19a1.12,1.12,0,1,1-1.12,1.12,1.12,1.12,0,0,1,1.12-1.12m-6,3.65a1.12,1.12,0,1,1-1.12,1.12,1.12,1.12,0,0,1,1.12-1.12M24.13,12A1.12,1.12,0,1,1,23,13.14,1.12,1.12,0,0,1,24.13,12"/><path class="cls-2" d="M81.68,26.69H67.86c-2,.1-3.06,1-3.06,2.85v6.33c.1,1.68,1.16,2.53,3.06,2.63H81.57c1.9-.1,2.85-1,3-2.74V29.54A2.71,2.71,0,0,0,81.68,26.69Zm-.53,8c-.11.73-.53,1.16-1.48,1.26H69.54c-1-.21-1.37-.53-1.47-1.26V30.59a1.44,1.44,0,0,1,1.47-1.48h10a1.54,1.54,0,0,1,1.58,1.48Z"/><path class="cls-2" d="M63.21,20.57V17A1.63,1.63,0,0,1,64.8,15.4H79.25c1.06-.11,1.58.42,1.58,1.37V19.3c0,.85-.52,1.27-1.47,1.27H64.59V23H81.47c1.79,0,2.74-.85,2.74-2.43V15.72A2.45,2.45,0,0,0,81.47,13H74.08V11H70.6v2H62.69c-2,0-3,.95-3,3v9.39a42.65,42.65,0,0,1-2,13l3.27.64a43.43,43.43,0,0,0,2.11-13V20.57Z"/><path class="cls-2" d="M90,24.47l3.38,1.8a10.1,10.1,0,0,0,3.9-5.81h5.91V18H97.82a25.57,25.57,0,0,0,.21-3h5V12.55H93.7V11H90.22v4h4.43a17.38,17.38,0,0,1-.21,2.95H89.38v2.53h4.43A7.05,7.05,0,0,1,90,24.47Z"/><path class="cls-2" d="M97.82,21.62A21.82,21.82,0,0,1,100,26.05h3.7a25.8,25.8,0,0,0-2.22-4.43Z"/><path class="cls-2" d="M112.17,26.79H93.39c-1.8.21-2.85,1.06-3,2.64v4.75H112v1c0,.85-.52,1.27-1.58,1.27h-15c-1,0-1.48-.42-1.48-1.16H90.54v1A2.75,2.75,0,0,0,93.18,39h19.09c2-.1,3.06-1,3.06-2.64V29.54A3.21,3.21,0,0,0,112.17,26.79Zm-.32,4.86h-18V30.8a1.43,1.43,0,0,1,1.48-1.47h15c1,0,1.58.52,1.58,1.47Z"/><path class="cls-2" d="M113.64,12h-6.22q-2.53.17-2.85,2.22V23.1a2.33,2.33,0,0,0,2.32,2.22h6.65c1.47-.11,2.32-.85,2.32-2.22V14.24C116,13,115.23,12.23,113.64,12Zm-1,9.29c0,1.05-.53,1.58-1.48,1.58h-1.79A1.39,1.39,0,0,1,108,21.31V16a1.42,1.42,0,0,1,1.47-1.47H111A1.53,1.53,0,0,1,112.59,16Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 160 64" style="enable-background:new 0 0 160 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{display:none;fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M105.3,33.3H87.1c-2.6,0.1-4,1.3-4,3.8v8.3c0.1,2.2,1.5,3.3,4,3.5h18c2.5-0.1,3.8-1.3,3.9-3.6v-8.2
+		c0.1-2-1.4-3.6-3.4-3.8C105.6,33.3,105.4,33.3,105.3,33.3z M104.6,43.9c-0.1,1-0.7,1.5-1.9,1.7H89.3c-1.3-0.3-1.8-0.7-1.9-1.7v-5.4
+		c0-1,0.8-1.9,1.8-1.9c0,0,0.1,0,0.1,0h13.1c1.1,0,2,0.8,2.1,2L104.6,43.9z"/>
+	<path class="st0" d="M81,25.3v-4.7c0-1.1,0.9-2.1,2.1-2.1h19c1.4-0.1,2.1,0.5,2.1,1.8v3.3c0,1.1-0.7,1.7-1.9,1.7H82.8v3.2H105
+		c2.3,0,3.6-1.1,3.6-3.2v-6.4c0.2-1.8-1.1-3.4-2.8-3.6c-0.3,0-0.5,0-0.8,0h-9.7v-2.6h-4.6v2.6H80.3c-2.6,0-3.9,1.2-3.9,3.9v12.3
+		c0,5.8-0.9,11.6-2.6,17.1l4.3,0.8c1.8-5.5,2.7-11.3,2.8-17.1v-7.2H81z"/>
+	<path class="st0" d="M116.2,30.4l4.4,2.4c2.6-1.9,4.4-4.6,5.1-7.6h7.8v-3.2h-7.1c0.2-1.3,0.3-2.6,0.3-3.9h6.6v-3.2h-12.3v-2h-4.6
+		V18h5.8c0,1.3-0.1,2.6-0.3,3.9h-6.7v3.3h5.8C120.4,27.5,118.6,29.4,116.2,30.4z"/>
+	<path class="st0" d="M126.5,26.7c1.2,1.8,2.1,3.8,2.9,5.8h4.9c-0.8-2-1.8-4-2.9-5.8H126.5z"/>
+	<path class="st0" d="M145.4,33.5h-24.7c-2.4,0.3-3.8,1.4-3.9,3.5v6.2h28.4v1.3c0,1.1-0.7,1.7-2.1,1.7h-19.7c-1.3,0-1.9-0.5-1.9-1.5
+		h-4.5V46c0,1.9,1.6,3.5,3.5,3.6h25.1c2.6-0.1,4-1.3,4-3.5v-9C149.2,35,147.5,33.5,145.4,33.5z M145,39.9h-23.7v-1.1
+		c0-1,0.8-1.9,1.8-1.9c0,0,0.1,0,0.1,0H143c1.3,0,2.1,0.7,2.1,1.9L145,39.9z"/>
+	<path class="st0" d="M147.3,14h-8.2c-2.2,0.1-3.5,1.1-3.8,2.9v11.7c0.1,1.6,1.4,2.9,3.1,2.9h8.7c1.9-0.1,3.1-1.1,3.1-2.9V17
+		C150.4,15.4,149.4,14.3,147.3,14z M146,26.2c0,1.4-0.7,2.1-1.9,2.1h-2.4c-1,0-1.8-0.8-1.8-1.8c0-0.1,0-0.1,0-0.2v-7
+		c0-1,0.8-1.9,1.8-1.9c0,0,0.1,0,0.1,0h2c1.1,0,2.1,0.8,2.1,1.9l0,0L146,26.2z"/>
+</g>
+<path class="st1" d="M67.2,44.1V20c0-2.6-1.4-5.1-3.7-6.4l-20.9-12c-2.3-1.3-5.1-1.3-7.4,0l-20.9,12c-2.3,1.3-3.7,3.8-3.7,6.4v24.1
+	c0,2.6,1.4,5.1,3.7,6.4l20.9,12c2.3,1.3,5.1,1.3,7.4,0l20.9-12C65.8,49.2,67.2,46.7,67.2,44.1z"/>
+<path class="st0" d="M61.9,15.4L42,3.9c-1.9-1.1-4.3-1.1-6.2,0L15.9,15.4c-1.9,1.1-3.1,3.2-3.1,5.4v22.9c0,2.2,1.2,4.3,3.1,5.4
+	l3.8,2c0.8,0.4,0.8,1,0.8,1.9c0,0,0,0.1,0,0.1c0.1,1.6,1.8,3.5,4.2,3.5c2.3,0,4.3-1.9,4.4-4.2c0-1.6-0.8-3.1-2.3-3.9
+	c-0.6-0.3-1.7-0.5-2.9-0.4c-0.9,0.1-1,0.6-2.8-0.5l-2.8-1.6c-0.8-0.5-1.7-1.3-1.6-2.3V22c0-1.8,0.8-2.8,2.1-3.5L37,7.8
+	C38.1,7,40.2,7.2,41.5,8l16.4,9.5c2.9,1.6,3,3,3,4v19.7c0,2.3-1.5,4-2.3,4.5l-15.1,8.5C42.8,54.5,42,54,42,53.3l0-2.5
+	c0-0.1,0-0.3,0-0.4v-2.5c0-0.8,0.4-1.6,1.1-2l8.8-5.7c1.4-0.9,2-1.7,2-3.8L53.7,28c0-1,0.4-1.9,1.2-2.5c1.5-1.3,2-3.7,0.8-5.6
+	c-0.8-1.4-2.4-2.2-4-2c-1.6,0.1-2.8,1-3.5,2.4c-0.5,1-0.6,2.2-0.3,3.3c0.2,0.8,0.7,1.4,1.3,2c0.7,0.6,1.2,1.5,1.2,2.5v7.2
+	c0,1.1-0.5,2.1-1.5,2.7l-5.5,2.8c-0.7,0.5-1.6,0-1.6-0.8l-0.2-17.1c0-1,0.5-1.9,1.2-2.5c0.4-0.3,0.7-0.8,1-1.3
+	c0.7-1.3,0.7-2.9-0.1-4.3c-0.8-1.4-2.5-2.2-4.1-2.1c-2.9,0.3-4.6,3.1-3.8,5.7c0.2,0.8,0.7,1.4,1.3,2c0.7,0.6,1.2,1.5,1.2,2.5v9.9
+	c0,0.8-0.8,1.3-1.5,0.9L34,32.5c-0.7-0.4-1.2-1.2-1.2-2.1v-2.2c0-1,0.4-1.9,1.2-2.5c1.5-1.3,2-3.7,0.8-5.6c-0.8-1.3-2.4-2.1-4-2
+	c-2.9,0.2-4.7,3.1-3.8,5.7c0.2,0.8,0.7,1.5,1.3,2c0.7,0.6,1.2,1.5,1.2,2.5l0,3.5c0,1,0,2,1.6,3.1l5.5,3c0.7,0.4,1.2,1.2,1.2,2.1v4.5
+	c0,0.8-0.8,1.3-1.5,0.9L26.6,41c-0.7-0.4-1.2-1.2-1.2-2.1l-0.2-6.1c0-1,0.4-1.8,1.1-2.5c1.4-1.3,1.9-3.4,0.9-5.3
+	c-0.8-1.4-2.4-2.3-4-2.2c-2.9,0.2-4.6,3-3.8,5.6c0.2,0.7,0.7,1.4,1.2,1.9c0.7,0.6,1.1,1.5,1.1,2.5l-0.5,6.8c0,1.9,0.3,2.8,1.8,3.5
+	l11.8,6.3c1,0.6,1.6,1.7,1.6,2.8l0,3.1c0,3.1,4.3,5.7,8.7,3.3l16.4-9.8c1.9-1,3.2-3,3.4-5.2V20.7C65,18.5,63.8,16.5,61.9,15.4z
+	 M24.2,50.7c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2C22.2,51.7,23.1,50.7,24.2,50.7z M48.7,21.5c0-1.1,0.9-2,2-2
+	s2,0.9,2,2c0,1.1-0.9,2-2,2S48.7,22.6,48.7,21.5z M30.6,23.8c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S31.8,23.8,30.6,23.8z
+	 M22.2,26.4c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2s-0.9,2-2,2C23.1,28.4,22.2,27.5,22.2,26.4z M40,17.9c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2
+	c1.1,0,2,0.9,2,2C42,17,41.1,17.9,40,17.9z"/>
+</svg>

models/dataset.go

@@ -122,22 +122,22 @@ func (datasets DatasetList) loadAttachmentAttributes(opts *SearchDatasetOptions)
 		for i := range datasets {
 			if attachment.DatasetID == datasets[i].ID {
 
-				if !attachment.IsPrivate{
+				if !attachment.IsPrivate {
 					datasets[i].Attachments = append(datasets[i].Attachments, attachment)
-				}else{
+				} else {
 					permission, ok := permissionMap[datasets[i].ID]
 					if !ok {
 
 						permission = false
 						datasets[i].Repo.GetOwner()
 						if !permission {
-							if datasets[i].Repo.OwnerID==opts.User.ID{
+							if datasets[i].Repo.OwnerID == opts.User.ID {
 								permission = true
-							}else{
+							} else {
 								isCollaborator, _ := datasets[i].Repo.IsCollaborator(opts.User.ID)
-								isInRepoTeam,_:=datasets[i].Repo.IsInRepoTeam(opts.User.ID)
+								isInRepoTeam, _ := datasets[i].Repo.IsInRepoTeam(opts.User.ID)
 
-								if isCollaborator ||isInRepoTeam {
+								if isCollaborator || isInRepoTeam {
 									permission = true
 								}
 							}
@@ -603,3 +603,11 @@ func UpdateDatasetCreateUser(ID int64, user *User) error {
 	}
 	return nil
 }
+
+func QueryDatasetGroupByTask() ([]map[string]interface{}, error) {
+	rows, err := x.QueryInterface("SELECT count(*) as total,task FROM public.dataset where task <>'' group by task order by total desc limit 7")
+	if err != nil {
+		return nil, err
+	}
+	return rows, nil
+}

models/repo_activity_custom.go

@@ -263,7 +263,11 @@ func GetAllUserKPIStats(startTime time.Time, endTime time.Time) (map[string]*git
 			log.Warn("get user kpi status err:"+repository.RepoPath(), err1.Error())
 			continue
 		}
-
+		// if repository.Name == "yolov5" {
+		// 	log.Info("repoName=" + repository.Name + "  owner=" + repository.RepoPath())
+		// 	authorsOneRepoJson, _ := json.Marshal(authorsOneRepo)
+		// 	log.Info("authorsOneRepoJson=" + string(authorsOneRepoJson))
+		// }
 		for key, value := range authorsOneRepo {
 			if _, ok := authors[key]; !ok {
 				authors[key] = &git.UserKPIStats{

options/locale/locale_en-US.ini

@@ -24,6 +24,7 @@ enable_javascript = This website works better with JavaScript.
 toc = Table of Contents
 return=Back OpenI
 calculation_points = Calculation Points
+notice_announcement = Notice Announcement
 
 username = Username
 email = Email Address
@@ -236,7 +237,7 @@ page_title=Explore Better AI
 page_small_title=OpenI AI Development Cooperation Platform
 page_description=The one-stop collaborative development environment for AI field provides AI development pipeline integrating code development, data management, model debugging, reasoning and evaluation
 page_use=Use Now
-page_only_dynamic=Only show the dynamics of open source projects
+page_only_dynamic=The dynamics of open source projects
 page_recommend_org=Recommended Organizations
 page_recommend_org_desc=These excellent organizations are using the OpenI AI Collaboration Platform for collaborative development of projects. To show your organization here,
 page_recommend_org_commit=Click here to submit.
@@ -283,6 +284,7 @@ search_ge=
 wecome_AI_plt = Welcome to OpenI AI Collaboration Platform!
 explore_AI = Explore better AI, come here to find more interesting
 datasets = Datasets
+datasets_descr = Open source dataset base, seamlessly integrated with your project. View all
 repositories = Repositories
 use_plt__fuction = To use the AI collaboration functions provided by this platform, such as: hosting code, sharing data, debugging algorithms or training models, start with
 provide_resoure = Computing resources of CPU/GPU/NPU are provided freely for various types of AI tasks.
@@ -290,6 +292,12 @@ activity = Activity
 no_events = There are no events related
 or_t = or
 powerdby=Powered_by Pengcheng CloudBrain、China Computing NET(C²NET)、
+experience_officer=Experience Officer
+openi_experience_officer_plan=OpenI AI experience officer growth plan
+more_benefits=, More benefits
+org_see=See
+more_notice=More notices
+vedio_detail=Video details
 
 [explore]
 repos = Repositories
@@ -3203,6 +3211,9 @@ foot.copyright= Copyright: New Generation Artificial Intelligence Open Source Op
 Platform_Tutorial = Tutorial
 foot.advice_feedback = Feedback
 resource_description = Resource Note
+foot.openi_subscription_number = OpenI subscription number
+foot.user_communication_group = User communication group
+
 [cloudbrain]
 all_resource_cluster=All Cluster
 all_ai_center=All Computing NET

options/locale/locale_zh-CN.ini

@@ -24,6 +24,7 @@ enable_javascript=使用 JavaScript能使本网站更好的工作。
 toc=目录
 return=返回OpenI
 calculation_points=算力积分
+notice_announcement=通知公告
 
 username=用户名
 email=电子邮件地址
@@ -238,7 +239,7 @@ page_title=探索更好的AI
 page_small_title=启智AI协作平台
 page_description=面向AI领域的一站式协同开发环境，提供集代码开发、数据管理、模型调试、推理和评测为一体的AI开发流水线
 page_use=立即使用
-page_only_dynamic=仅展示开源项目动态
+page_only_dynamic=社区开源项目动态
 page_recommend_org=推荐组织
 page_recommend_org_desc=这些优秀的组织正在使用启智AI开发协作平台；你的组织也想展示到这里，
 page_recommend_org_commit=点此提交
@@ -285,6 +286,7 @@ search_ge=个
 wecome_AI_plt=欢迎来到启智AI协作平台！
 explore_AI = 探索更好的AI，来这里发现更有意思的
 datasets = 数据集
+datasets_descr=开源数据集大本营，同你的项目无缝集成。查看所有
 repositories = 项目
 use_plt__fuction = 使用本平台提供的AI协作功能，如：托管代码、共享数据、调试算法或训练模型，请先
 provide_resoure = 平台目前提供CPU、GPU、NPU的普惠算力资源，可进行多种类型的AI任务。
@@ -293,7 +295,12 @@ activity = 活动
 no_events = 还没有与您相关的活动
 or_t = 或
 powerdby=Powered_by 鹏城实验室云脑、中国算力网（C²NET）、
-
+experience_officer=体验官
+openi_experience_officer_plan=启智社区体验官成长计划
+more_benefits=，超多福利大放送
+org_see=。查看
+more_notice=更多通知
+vedio_detail=详细介绍视频
 
 [explore]
 repos=项目
@@ -3221,6 +3228,8 @@ foot.copyright= 版权所有：新一代人工智能开源开放平台（OpenI
 Platform_Tutorial=新手指引
 foot.advice_feedback = 意见反馈
 resource_description = 资源说明
+foot.openi_subscription_number = 启智社区订阅号
+foot.user_communication_group = 用户交流群
 
 [cloudbrain]
 all_resource_cluster=全部集群

public/home/home.js

@@ -9,16 +9,20 @@ if(isEmpty(token)){
 
 var swiperNewMessage = new Swiper(".newslist", {
     direction: "vertical",
-    slidesPerView: 9,
+    slidesPerView: 6,
     loop: true,
+    spaceBetween: 8,
     autoplay: {
         delay: 2500,
         disableOnInteraction: false,
     },
 });
-var swiperEvent = new Swiper(".event-list", {
-    slidesPerView: 3,
-    spaceBetween: 30,
+
+var swiperRepo = new Swiper(".homepro-list", {
+    slidesPerView: 1,
+    // slidesPerColumn: 2,
+    // slidesPerColumnFill:'row',
+    spaceBetween: 20,
     pagination: {
         el: ".swiper-pagination",
         clickable: true,
@@ -27,49 +31,130 @@ var swiperEvent = new Swiper(".event-list", {
         delay: 2500,
         disableOnInteraction: false,
     },
+    breakpoints: {       
+        768: {
+            slidesPerView: 2,
+        },
+        1024: {
+            slidesPerView: 2,
+        },
+        1200: {
+            slidesPerView: 3,
+        },
+        1440: {
+            slidesPerView: 3,
+        },
+        1840: {
+            slidesPerView: 3,
+        },
+        1920: {
+            slidesPerView: 3,
+        },
+    },
 });
-var swiperRepo = new Swiper(".homepro-list", {
+
+var swiperOrg = new Swiper(".homeorg-list", {
     slidesPerView: 1,
     slidesPerColumn: 2,
     slidesPerColumnFill:'row',
-    spaceBetween: 30,
+    spaceBetween: 25,
     pagination: {
         el: ".swiper-pagination",
         clickable: true,
     },
     autoplay: {
-        delay: 2500,
+        delay: 4500,
         disableOnInteraction: false,
     },
     breakpoints: {
         768: {
-            slidesPerView: 2,
+            slidesPerView: 3,
+            slidesPerColumn: 2,
         },
         1024: {
             slidesPerView: 3,
+            slidesPerColumn: 2,
+        },
+        1200: {
+            slidesPerView: 4,
+            slidesPerColumn: 2,
+        },
+        1440: {
+            slidesPerView: 4,
+            slidesPerColumn: 2,
+        },
+        1840: {
+            slidesPerView: 4,
+            slidesPerColumn: 2,
+        },
+        1920: {
+            slidesPerView: 4,
+            slidesPerColumn: 2,
         },
     },
 });
 
-var swiperOrg = new Swiper(".homeorg-list", {
+var swiperUserExp = new Swiper(".home-user-exp-list", {
     slidesPerView: 1,
-    slidesPerColumn: 4,
+    spaceBetween: 0,
+    navigation: {
+       nextEl: '.homeuserexp .swiper-prev',
+       prevEl: '.homeuserexp .swiper-next',
+    },
+    autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+    },
+    breakpoints: {
+        768: {
+            slidesPerView: 2,
+        },
+        1200: {
+            slidesPerView: 3,
+        },
+        1440: {
+            slidesPerView: 4,
+        },
+        1840: {
+            slidesPerView: 4,
+        },
+        1920: {
+            slidesPerView: 5,
+        },
+    },
+});
+
+var swiperDataset = new Swiper(".home-dataset-list", {
+    slidesPerView: 2,
+    slidesPerColumn: 1,
     slidesPerColumnFill:'row',
-    spaceBetween: 15,
+    spaceBetween: 30,
     pagination: {
         el: ".swiper-pagination",
         clickable: true,
     },
     autoplay: {
-        delay: 4500,
+        delay: 2500,
         disableOnInteraction: false,
     },
     breakpoints: {
+        676: {
+            slidesPerView: 3,
+        },
         768: {
-            slidesPerView: 2,
+            slidesPerView: 4,
         },
-        1024: {
-            slidesPerView: 3,
+        1320: {
+            slidesPerView: 5,
+        },
+        1520: {
+            slidesPerView: 6,
+        },
+        1720: {
+            slidesPerView: 7,
+        },
+        1920: {
+            slidesPerView: 7,
         },
     },
 });
@@ -85,7 +170,7 @@ document.onreadystatechange = function () {
     if(document.readyState != "complete"){
         return;
     }
-    console.log("Start to open WebSocket." + document.readyState);
+    console.log("Start to open WebSocket." + document.readyState);    
     queryRecommendData();
 
     var output = document.getElementById("newmessage");
@@ -101,6 +186,7 @@ document.onreadystatechange = function () {
     };
 
     socket.onmessage = function (e) {
+        if (!output) return;
 		var data =JSON.parse(e.data)
         var html = "";
         if (data != null){
@@ -177,18 +263,17 @@ document.onreadystatechange = function () {
                    var time = getTime(record.CreatedUnix,currentTime);
                    html += " " + time;
                 }
-                html += "</div>";
+                html += "</div></div>";
                 html += "</div>";
             }
         }
 		output.innerHTML = html;
+        $('#homenews p').show();
         swiperNewMessage.updateSlides();
         swiperNewMessage.updateProgress();
     };
 }
 
-
-
 function getTaskLink(record){
     var re = getRepoLink(record);
     if(record.OpType == 24){
@@ -223,7 +308,7 @@ function getMsg(record){
     }else{
         console.log("act user is null.");
     }
-    html += "  <img class=\"ui avatar image\" src=\"/user/avatar/" + name + "/-1\" alt=\"\">"
+    html += "<div class=\"content-c\"><img class=\"ui avatar image\" src=\"/user/avatar/" + name + "/-1\" alt=\"\">"
     html += " <div class=\"middle aligned content nowrap\">"
     html += " <a href=\"/" + encodeURI(name) + "\" title=\"\">" + name + "</a>"
     return html;
@@ -236,6 +321,7 @@ function getRepotext(record){
         return   record.Repo.OwnerName + "/" + record.Repo.Name;
     }
 }
+
 function getRepoLink(record){
     return   encodeURI(record.Repo.OwnerName + "/" + record.Repo.Name);
 
@@ -437,10 +523,6 @@ function getAction(opType,isZh){
     }
 }
 
-
-
-
-
 function queryRecommendData(){
     $.ajax({
         type:"GET",
@@ -453,7 +535,10 @@ function queryRecommendData(){
         success:function(json){
            displayOrg(json.org);
            displayRepo(json.repo);
-           displayActivity(json.image);
+           displayActivity(json.activity);
+           displayDataset(json.dataset);
+           displayUserExp(json.user_experience);
+           LetterAvatar && LetterAvatar.transform();
         },
         error:function(response) {
         }
@@ -463,49 +548,99 @@ function queryRecommendData(){
 
 function displayActivity(json){
     var activityDiv = document.getElementById("recommendactivity");
+    if (!activityDiv) return;    
     var html = "";
     if (json != null && json.length > 0){
         for(var i = 0; i < json.length;i++){
-            var record = json[i]
-            html += "<div class=\"swiper-slide\">";
-            html += "<a href=\"" + record["image_link"] + "\" class=\"ui fluid card\">";
-            html += "   <div class=\"image\"><img src=\"" + record["url"] + "\"></div>"
+            var record = json[i];
+            var name = isZh ? (record["name"] || '') : (record["name_en"] || record["name"]);
+            html += "<div class=\"swiper-slide\" style=\"text-align:center;\">";
+            html += "<a href=\"" + record["image_link"] + "\">";
+            html += "   <div class=\"image ui card\"><img src=\"" + record["url"] + "\">";
+            html += '       <div class="image-name" title="' + name + '">' + name + "</div>";
+            html +=     "</div>";
             html += "</a>";
             html += "</div>";
         }
+        var swiperEvent = new Swiper(".event-list", {
+            slidesPerView: 1,
+            spaceBetween: 30,
+            // pagination: {
+            //     el: ".swiper-pagination",
+            //     clickable: true,
+            // },
+            autoplay: {
+                delay: 2500,
+                disableOnInteraction: false,
+            },
+            breakpoints: {
+                768: {
+                    slidesPerView: Math.min(2, json.length),
+                },
+                1024: {
+                    slidesPerView: Math.min(3, json.length),
+                },
+                1200: {
+                    slidesPerView: Math.min(3, json.length),
+                },
+                1440: {
+                    slidesPerView: Math.min(4, json.length),
+                },
+                1840: {
+                    slidesPerView: Math.min(4, json.length),
+                },
+                1920: {
+                    slidesPerView: Math.min(4, json.length),
+                },
+            },
+        });
+        activityDiv.innerHTML = html;
+        swiperEvent.updateSlides();
+        swiperEvent.updateProgress();
     }
-    activityDiv.innerHTML = html;
-    swiperEvent.updateSlides();
-    swiperEvent.updateProgress();
 }
 
 function displayRepo(json){
     var orgRepo = document.getElementById("recommendrepo");
     var html = "";
     if (json != null && json.length > 0){
-        for(var i = 0; i < json.length;i++){
-            var record = json[i]
-            html += "<div class=\"swiper-slide\">";
-            html += "   <div class=\"ui fluid card\">";
-            html += "       <div class=\"content\">";
-            html += "           <span class=\"right floated meta\">";
-            html += "               <i class=\"ri-star-line\"></i>" + record["NumStars"] + "<i class=\"ri-git-branch-line am-ml-10\"></i>" +  record["NumForks"];
-            html += "           </span>";
-            html += "           <img class=\"left floated mini ui image\" src=\"" + record["Avatar"] + "\">";
-            html += "           <a class=\"header nowrap\" href=\"/" + record["OwnerName"] + "/" + record["Name"] + "\">" + record["Alias"]  +"</a>";
-            html += "           <div class=\"description nowrap-2\">" + record["Description"] + " </div>";
-            html += "           <div class=\"ui tags nowrap am-mt-10\">"
-            if(record["Topics"] != null){
-                for(var j = 0; j < record["Topics"].length; j++){
-                    topic = record["Topics"][j];
-                    url = "/explore/repos?q=" +  (topic) + "&amp;topic="
-                    html += "<a class=\"ui small label topic\" href=\"" + url + "\">" + topic +  "</a>";
-                }
+        var repoMap = {};
+        for (var i = 0, iLen = json.length; i < iLen; i++) {
+            var repo = json[i];
+            var labelSearch = repo.Label;
+            var label = isZh ? repo.Label : repo.Label_en;
+            if (repoMap[label]) {
+                repoMap[label].push(repo);
+            } else {
+                repoMap[label] = [repo];
             }
-            html += "           </div>";
-            html += "       </div>";
-            html += "   </div>";
-            html += "</div>";
+        }
+
+        for (var label in repoMap) {
+            var repos = repoMap[label];
+            html += `<div class="swiper-slide"><div><a style="color:rgb(50, 145, 248);font-size:16px;font-weight:550;" href="/explore/repos?q=&topic=${labelSearch}&sort=hot"># ${label}</a></div>`;
+            for (var i = 0, iLen = repos.length; i < iLen; i++) {
+                if (i >= 4) break;
+                var repo = repos[i];
+                //  <i class="ri-star-line"></i>${repo["NumStars"]}<i class="ri-git-branch-line am-ml-10"></i>${repo["NumForks"]}</span> <div class="ui tags nowrap am-mt-10"></div>
+                html += `<div class="ui fluid card" style="border-radius:6px;">
+                    <div class="content">
+                        ${repo["Avatar"] ? `<img class="left floated mini ui image" src="${repo["Avatar"]}">` : `<img class="left floated mini ui image" avatar="${repo["OwnerName"]}">`}
+                        <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}">${repo["Alias"]}</a>
+                        <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div>
+                        `;
+                // if (repo["Topics"] != null) {
+                //     for(var j = 0; j < repo["Topics"].length; j++){
+                //         var topic = repo["Topics"][j];
+                //         var url = "/explore/repos?q=" +  (topic) + "&amp;topic="
+                //         html += `<a class="ui small label topic" href=" ${url}">${topic}</a>`;
+                //     }
+                // }
+                html += `
+                    </div>
+                </div>`;
+            }
+            html += '</div>'
         }
     }
     orgRepo.innerHTML = html;
@@ -513,7 +648,6 @@ function displayRepo(json){
     swiperRepo.updateProgress();
 }
 
-
 function getRepoOrOrg(key,isZhLang,numbers=1){
     if(numbers > 1){
         key+="1";
@@ -537,7 +671,7 @@ function displayOrg(json){
             html += "               <img class=\"ui image\" src=\"" + record["Avatar"] +  "\">";
             html += "               <div class=\"content nowrap\">";
             html += "                   <span class=\"ui blue\">" + record["Name"]  +  "</span> " + record["FullName"];
-            html += "                   <div class=\"sub header\">" + record["NumRepos"] +" " + getRepoOrOrg(1,isZh,record["NumRepos"]) + " ･ " + record["NumMembers"] +" " + getRepoOrOrg(2,isZh,record["NumMembers"]) + " ･ " + record["NumTeams"] + " " + getRepoOrOrg(3,isZh,record["NumTeams"]) + "</div>";
+            html += "                   <div class=\"sub header\" style=\"margin-top:4px;\"><span style=\"color:rgb(54, 56, 64)\">" + record["NumRepos"] +"</span> " + getRepoOrOrg(1,isZh,record["NumRepos"]) + " ･ <span style=\"color:rgb(54, 56, 64)\">" + record["NumMembers"] +"</span> " + getRepoOrOrg(2,isZh,record["NumMembers"]) + " ･ <span style=\"color:rgb(54, 56, 64)\">" + record["NumTeams"] + "</span> " + getRepoOrOrg(3,isZh,record["NumTeams"]) + "</div>";
             html += "               </div>";
             html += "           </div>";
             html += "       </div>";
@@ -548,3 +682,173 @@ function displayOrg(json){
     orgDiv.innerHTML = html;
     swiperOrg.updateSlides();
 }
+
+function displayDataset(data) {    
+    var homeDatasetEl = document.getElementById("home_dataset");
+    if (!homeDatasetEl) return;
+    var html = '';
+    var svgStrMap = {
+      '0': '<svg xmlns="http://www.w3.org/2000/svg" class="svg svg-icon-path-icon fill" viewBox="0 0 32 32" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><path d="M16 4c7.189 0 13.171 5.173 14.425 12-1.253 6.827-7.236 12-14.425 12s-13.171-5.173-14.425-12c1.253-6.827 7.236-12 14.425-12zM16 25.333c5.682-0.001 10.442-3.949 11.687-9.252l0.016-0.081c-1.265-5.379-6.024-9.322-11.703-9.322s-10.437 3.943-11.686 9.241l-0.016 0.081c1.261 5.384 6.021 9.332 11.703 9.333h0zM16 22c-3.314 0-6-2.686-6-6s2.686-6 6-6v0c3.314 0 6 2.686 6 6s-2.686 6-6 6v0zM16 19.333c1.841 0 3.333-1.492 3.333-3.333s-1.492-3.333-3.333-3.333v0c-1.841 0-3.333 1.492-3.333 3.333s1.492 3.333 3.333 3.333v0z"></path></g></svg>',
+      '1': '<svg xmlns="http://www.w3.org/2000/svg" class="svg svg-icon-path-icon fill" viewBox="0 0 32 32" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93gapd7aoa4d1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><path d="M2.667 16c0-7.364 5.969-13.333 13.333-13.333s13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333h-13.333l3.905-3.905c-2.413-2.407-3.905-5.735-3.905-9.411 0-0.006 0-0.012 0-0.018v0.001zM9.104 26.667h6.896c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667c-5.891 0-10.667 4.776-10.667 10.667v0c0 2.869 1.135 5.553 3.124 7.543l1.885 1.885-1.239 1.239zM14.667 8h2.667v16h-2.667v-16zM9.333 12h2.667v8h-2.667v-8zM20 12h2.667v8h-2.667v-8z"></path></g></svg>',
+      '2': '<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 lhfskE svg-icon-path-icon fill" viewBox="0 0 48 48" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93j5tkotzm421,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><rect width="48" height="48" fill-opacity="0.01" fill="url(#ila93j5tkotzm421,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" storke="none"></rect><path stroke="url(#ila93j5tkotzm421,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" d="M4 24C4 24 10 15 14 15C18 15 22 17 24 17C26 17 30 15 34 15C38 15 44 24 44 24C44 24 34 34 24 34C14 34 4 24 4 24Z" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path stroke="url(#ila93j5tkotzm421,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" d="M4 24H44" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>',
+      '3': '<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 beWLko svg-icon-path-icon fill" viewBox="0 0 48 48" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><path d="M6 25C6 15.0589 14.0589 7 24 7C30.8669 7 36.8357 10.8453 39.8706 16.5" stroke="url(#ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M41 25H43L42 24L41 25Z" stroke="url(#ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M31 34L28.375 27L25 18H23L19.625 27L17 34" stroke="url(#ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M28.375 27H19.625" stroke="url(#ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M7 25H5L6 26L7 25Z" stroke="url(#ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M42 25C42 34.9411 33.9411 43 24 43C17.1331 43 11.1643 39.1547 8.12939 33.5" stroke="url(#ila93k86om2ayqg1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path></g></svg>',
+      '4': '<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 kqqJug svg-icon-path-icon fill" viewBox="0 0 48 48" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93lcoqm7710i1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><path d="M33 4.99976H41C42.1046 4.99976 43 5.89519 43 6.99976V14.9998M43 32.9998V40.9998C43 42.1043 42.1046 42.9998 41 42.9998H33M15 42.9998H7C5.89543 42.9998 5 42.1043 5 40.9998V32.9998M5 14.9998V6.99976C5 5.89519 5.89543 4.99976 7 4.99976H15" stroke="url(#ila93lcoqm7710i1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24 38C30.6274 38 36 31.732 36 24C36 16.268 30.6274 10 24 10C17.3726 10 12 16.268 12 24C12 31.732 17.3726 38 24 38Z" stroke="url(#ila93lcoqm7710i1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M6 24H42" stroke="url(#ila93lcoqm7710i1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path><path d="M20.0693 30.1057C21.3372 31.0429 22.6473 31.5115 23.9996 31.5115C25.3519 31.5115 26.698 31.0429 28.0378 30.1057" stroke="url(#ila93lcoqm7710i1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path></g></svg>',
+      '5': '<svg xmlns="http://www.w3.org/2000/svg" class="svg svg-icon-path-icon fill" viewBox="0 0 32 32" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93mrrwzocn0r1,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><path d="M16 26.667c5.891 0 10.667-4.776 10.667-10.667s-4.776-10.667-10.667-10.667v0c-5.891 0-10.667 4.776-10.667 10.667s4.776 10.667 10.667 10.667v0zM16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM16 21.333c2.946 0 5.333-2.388 5.333-5.333s-2.388-5.333-5.333-5.333v0c-2.946 0-5.333 2.388-5.333 5.333s2.388 5.333 5.333 5.333v0zM16 24c-4.418 0-8-3.582-8-8s3.582-8 8-8v0c4.418 0 8 3.582 8 8s-3.582 8-8 8v0zM16 18.667c-1.473 0-2.667-1.194-2.667-2.667s1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667s-1.194 2.667-2.667 2.667v0z"></path></g></svg>',
+      '6': '<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 cAmoNA svg-icon-path-icon fill" viewBox="0 0 48 48" width="32" height="32"><defs data-reactroot=""><linearGradient id="ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs" x1="0" x2="100%" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#82d1f6" stop-opacity="1" offset="0"></stop><stop stop-color="#29b6f4" stop-opacity="1" offset="0.5"></stop><stop stop-color="#0089cd" stop-opacity="1" offset="0.99"></stop></linearGradient></defs><g><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M14.5397 20.0186C12.8522 17.9434 11.2675 17.4979 9.78564 18.6821C7.5629 20.4583 6.92453 26.6496 8.71324 32.1086C10.502 37.5676 13.9801 45.0017 21.0016 45.0017C28.0231 45.0017 29.684 37.5222 32.5485 33.0001C35.413 28.478 36.9285 24.1152 34.1208 18.6821" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11 18.0368C9.29707 15.4428 7.96374 13.4306 6.99996 12.0002C5.5543 9.85464 9.25107 7.08164 11 8.96807C12.1659 10.2257 13.7148 12.078 15.6466 14.5249" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path><path d="M15.0236 25.6396C14.5391 19.5759 14.9333 15.6276 16.2062 13.7947C18.1155 11.0455 21.6631 10.0031 25.0035 10.0031C26.9924 10.0031 28.8087 10.8502 30.4525 12.5444" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M41.0003 12.6128C41.5858 14.6492 40.6294 16.5097 37.6844 16.931C34.7393 17.3523 32.5313 18.8332 30.9388 20.079C29.3463 21.3248 26.4983 25.1046 25.9361 27.0023C25.3738 28.9 22.1602 27.1547 21.2971 26.3971C20.434 25.6394 19.5855 23.9806 21.2971 22.2457C23.0086 20.5108 22.6383 20.1646 22.6383 18.4052C22.6383 16.6459 32.0003 10.8263 37.2729 10.2941C38.4449 10.2257 40.4147 10.5763 41.0003 12.6128Z" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4"></path><path d="M23.0078 4.00014V9.26283" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path><path d="M20.3066 10.7178C17.2888 6.92534 14.8555 4.80868 13.0068 4.36781" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path><path d="M17.0039 7.02894L17.9944 2.96156" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path><path d="M35.6128 10.7174C35.2905 11.8219 35.2905 12.8575 35.6128 13.8241C35.935 14.7908 36.6255 15.8264 37.6842 16.9308" stroke="url(#ila93oiqy4t1x861,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs)" fill="none" stroke-width="4" stroke-linecap="round"></path></g></svg>',
+    }
+    for (var i = 0, iLen = data.length; i < iLen; i++) {
+      var dataI = data[i];
+      html += `<div class="swiper-slide">
+        <a href="/explore/datasets?sort=default&q=&tab=&category=&task=${dataI.task}&license=">
+          <div class="ui fluid dataset-card">
+            <div><div class="content icon-c">
+              ${svgStrMap[i % 7]}
+            </div></div>
+            <div><div class="content label" title="${i18n[dataI.task] || dataI.task}">${i18n[dataI.task] || dataI.task}</div></div>
+            <div><div class="content count" style="">${i18n['about']} ${dataI.total} ${i18n['count']}</div></div>
+          </div>
+        </a>
+      </div>`
+    }
+    homeDatasetEl.innerHTML = html;
+    swiperDataset.updateSlides();
+    swiperDataset.updateProgress();
+}
+
+function displayUserExp(data) {
+    var homeUserExpEl = document.getElementById("home_user-exp");
+    if (!homeUserExpEl) return;
+    var html = '';
+    for (var i = 0, iLen = data.length; i < iLen; i++) {
+      var dataI = data[i];
+      html += `<div class="swiper-slide">
+         <div class="ui fluid user-card">            
+              <div><div class="content img-c">
+                <a href="/${dataI.name}">
+                  <div class="img" style="width:60px;height:60px;background-image:url('${dataI.avatar}')"></div>
+                </a>
+              </div></div>
+              <div><div class="content label" title="${dataI.fullname || dataI.name}">${dataI.fullname || dataI.name}</div></div>
+              <div><div class="content descr" title="${dataI.desc}">${dataI.desc}</div></div>
+            </div>        
+      </div>`
+    }
+    homeUserExpEl.innerHTML = html;
+    swiperUserExp.updateSlides();
+    swiperUserExp.updateProgress();
+}
+
+function getNotice() {
+    $.ajax({
+        type:"GET",
+        url:"/dashboard/invitation",
+        headers: { authorization:token, },
+        dataType:"json",
+        data: {
+            filename: 'notice/notice.json',
+        },
+        success:function(json){
+           if (json) {
+                try {
+                    var noticeList = JSON.parse(json).Notices || [];
+                    var noticeEls = $('._hm-recommend-info-area-1 a._hm-notice');
+                    for (var i = 0, iLen = noticeEls.length; i < iLen; i++) {
+                        var noticeEl = noticeEls.eq(i);
+                        var noticeObj = noticeList[i];
+                        if (noticeObj) {
+                            var title = isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title);
+                            noticeEl.attr('href', noticeObj.Link);
+                            noticeEl.find('span').text(title).attr('title', title);
+                            noticeEl.show();
+                        } else {
+                            noticeEl.hide();
+                        }
+                    }
+                } catch (e) {
+                    console.info(e);
+                }
+           }
+        },
+        error:function(response) {
+        }
+    });
+}
+
+function getRecommendModule() {
+    $.ajax({
+        type:"GET",
+        url:"/dashboard/invitation",
+        headers: { authorization:token, },
+        dataType:"json",
+        data: {
+            filename: 'home/newfunction',
+        },
+        success:function(json){
+            if (json) {
+                try {
+                    var recommendModuleList = JSON.parse(json) || [];
+                    var recommendModuleEls = $('._hm-recommend-info-area a._hm-link');
+                    for (var i = 0, iLen = recommendModuleEls.length; i < iLen; i++) {
+                        var recommendModuleEl = recommendModuleEls.eq(i);
+                        var recommendModuleObj = recommendModuleList[i];
+                        if (recommendModuleObj) {
+                            recommendModuleEl.attr('href', recommendModuleObj.image_link);
+                            recommendModuleEl.text(isZh ? recommendModuleObj.name : (recommendModuleObj.name_en || recommendModuleObj.name));
+                        } else {
+                        }
+                    }
+                } catch (e) {
+                    console.info(e);
+                }
+           }
+        },
+        error:function(response) {
+        }
+    });
+}
+
+function initHomeTopBanner() {
+    var homeSlideTimer = null;
+    var homeSlideDuration = 8000;
+    function homeSlide(direction) {
+        var slidePages = $('._hm-pg-c ._hm-pg');
+        var currentPage = slidePages.filter('._hm-pg-show');
+        var currentIndex = currentPage.index();
+        var next = direction == 'left' ? currentIndex - 1 : currentIndex + 1;
+        if (next < 0) next = slidePages.length - 1;
+        if (next == slidePages.length) next = 0;
+        slidePages.removeClass('_hm-pg-show');
+        slidePages.eq(next).addClass('_hm-pg-show');
+    }
+
+    function startSlide() {
+        homeSlideTimer && clearTimeout(homeSlideTimer);
+        homeSlideTimer = setTimeout(function() {
+            homeSlide('right');
+            startSlide();
+        }, homeSlideDuration);
+    }
+
+    function stopSlide() {
+        homeSlideTimer && clearTimeout(homeSlideTimer);
+    }
+
+    $('._hm-slide-btn').on('click', function () {
+        if ($(this).hasClass('_hm-slide-btn-left')) {
+            homeSlide('left');            
+        } else {
+            homeSlide('right');
+        }
+        startSlide();
+    });
+    $('._hm-pg #homenews').on('mouseenter', function() {
+        stopSlide();
+    }).on('mouseleave', function() {
+        startSlide();
+    });
+    setTimeout(function() { startSlide(); }, 500);
+}
+
+initHomeTopBanner();
+getNotice();
+getRecommendModule();

public/img/search.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1638433773401" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2884" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M469.333333 768c-166.4 0-298.666667-132.266667-298.666666-298.666667s132.266667-298.666667 298.666666-298.666666 298.666667 132.266667 298.666667 298.666666-132.266667 298.666667-298.666667 298.666667z m0-85.333333c119.466667 0 213.333333-93.866667 213.333334-213.333334s-93.866667-213.333333-213.333334-213.333333-213.333333 93.866667-213.333333 213.333333 93.866667 213.333333 213.333333 213.333334z m251.733334 0l119.466666 119.466666-59.733333 59.733334-119.466667-119.466667 59.733334-59.733333z" fill="#5BB973" p-id="2885"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon fill" viewBox="0 0 32 32" width="24" height="24"><defs data-reactroot=""></defs><g><path fill="rgb(255, 255, 255)" d="M14.667 2.667c6.624 0 12 5.376 12 12s-5.376 12-12 12-12-5.376-12-12 5.376-12 12-12zM14.667 24c5.156 0 9.333-4.177 9.333-9.333 0-5.157-4.177-9.333-9.333-9.333-5.157 0-9.333 4.176-9.333 9.333 0 5.156 4.176 9.333 9.333 9.333zM25.98 24.095l3.772 3.771-1.887 1.887-3.771-3.772 1.885-1.885z"></path></g></svg>

routers/api/v1/repo/cloudbrain.go

@@ -636,7 +636,6 @@ func CloudbrainDownloadLogFile(ctx *context.Context) {
 		url, err := storage.Attachments.PresignedGetURL(prefix+"/"+fileName, fileName)
 		if err != nil {
 			log.Error("Get minio get SignedUrl failed: %v", err.Error(), ctx.Data["msgID"])
-			ctx.ServerError("Get minio get SignedUrl failed", err)
 			return
 		}
 		log.Info("fileName=" + fileName)
@@ -720,7 +719,7 @@ func CloudbrainGetLog(ctx *context.APIContext) {
 		result = getLogFromModelDir(job.JobName, startLine, endLine, resultPath)
 		if result == nil {
 			log.Error("GetJobLog failed: %v", err, ctx.Data["MsgID"])
-			ctx.ServerError(err.Error(), err)
+			//ctx.ServerError(err.Error(), err)
 			return
 		}
 	}
@@ -935,7 +934,7 @@ func CloudBrainModelConvertList(ctx *context.APIContext) {
 		err = json.Unmarshal([]byte(dirs), &fileInfos)
 		if err != nil {
 			log.Error("json.Unmarshal failed:%v", err.Error(), ctx.Data["msgID"])
-			ctx.ServerError("json.Unmarshal failed:", err)
+			//ctx.ServerError("json.Unmarshal failed:", err)
 			return
 		}
 
@@ -966,7 +965,7 @@ func CloudBrainModelConvertList(ctx *context.APIContext) {
 		models, err := storage.GetObsListObject(job.ID, "output/", parentDir, versionName)
 		if err != nil {
 			log.Info("get TrainJobListModel failed:", err)
-			ctx.ServerError("GetObsListObject:", err)
+			//ctx.ServerError("GetObsListObject:", err)
 			return
 		}
 
@@ -1011,7 +1010,7 @@ func CloudBrainModelList(ctx *context.APIContext) {
 	err = json.Unmarshal([]byte(dirs), &fileInfos)
 	if err != nil {
 		log.Error("json.Unmarshal failed:%v", err.Error(), ctx.Data["msgID"])
-		ctx.ServerError("json.Unmarshal failed:", err)
+		//ctx.ServerError("json.Unmarshal failed:", err)
 		return
 	}
 

routers/home.go

@@ -7,6 +7,7 @@ package routers
 
 import (
 	"bytes"
+	"encoding/json"
 	"net/http"
 	"strconv"
 	"strings"
@@ -672,7 +673,7 @@ func NotFound(ctx *context.Context) {
 }
 
 func getRecommendOrg() ([]map[string]interface{}, error) {
-	url := setting.RecommentRepoAddr + "organizations"
+	url := setting.RecommentRepoAddr + "home/organizations"
 	result, err := repository.RecommendFromPromote(url)
 
 	if err != nil {
@@ -745,7 +746,7 @@ func GetMapInfo(ctx *context.Context) {
 }
 
 func GetRankUser(index string) ([]map[string]interface{}, error) {
-	url := setting.RecommentRepoAddr + "user_rank_" + index
+	url := setting.RecommentRepoAddr + "user_rank/user_rank_" + index
 	result, err := repository.RecommendFromPromote(url)
 
 	if err != nil {
@@ -756,13 +757,25 @@ func GetRankUser(index string) ([]map[string]interface{}, error) {
 		tmpIndex := strings.Index(userRank, " ")
 		userName := userRank
 		score := 0
+		label := ""
 		if tmpIndex != -1 {
 			userName = userRank[0:tmpIndex]
-			tmpScore, err := strconv.Atoi(userRank[tmpIndex+1:])
-			if err != nil {
-				log.Info("convert to int error.")
+			left := userRank[tmpIndex+1:]
+			tmpIndex1 := strings.Index(left, " ")
+			if tmpIndex1 != -1 {
+				tmpScore, err := strconv.Atoi(left[0:tmpIndex1])
+				if err != nil {
+					log.Info("convert to int error.")
+				}
+				score = tmpScore
+				label = left[tmpIndex1+1:]
+			} else {
+				tmpScore, err := strconv.Atoi(left[tmpIndex+1:])
+				if err != nil {
+					log.Info("convert to int error.")
+				}
+				score = tmpScore
 			}
-			score = tmpScore
 		}
 		user, err := models.GetUserByName(userName)
 		if err == nil {
@@ -772,6 +785,7 @@ func GetRankUser(index string) ([]map[string]interface{}, error) {
 			userMap["FullName"] = user.FullName
 			userMap["HomeLink"] = user.HomeLink()
 			userMap["ID"] = user.ID
+			userMap["Label"] = label
 			userMap["Avatar"] = user.RelAvatarLink()
 			userMap["Score"] = score
 			resultOrg = append(resultOrg, userMap)
@@ -792,25 +806,54 @@ func GetUserRankFromPromote(ctx *context.Context) {
 	ctx.JSON(200, resultUserRank)
 }
 
+func getMapContent(fileName string) []map[string]string {
+	url := setting.RecommentRepoAddr + fileName
+	result, err := repository.RecommendContentFromPromote(url)
+	remap := make([]map[string]string, 0)
+	if err == nil {
+		json.Unmarshal([]byte(result), &remap)
+	}
+	return remap
+}
+
+func HomeNoticeTmpl(ctx *context.Context) {
+	ctx.Data["url_params"] = ""
+	ctx.HTML(200, "notice")
+}
+
 func RecommendHomeInfo(ctx *context.Context) {
 	resultOrg, err := getRecommendOrg()
 	if err != nil {
 		log.Info("error." + err.Error())
 	}
-	resultRepo, err := repository.GetRecommendRepoFromPromote("projects")
+	repoMap := getMapContent("home/projects")
+	resultRepo, err := repository.GetRecommendRepoFromPromote(repoMap)
 	if err != nil {
 		log.Info("error." + err.Error())
 	}
-	resultImage, err := getImageInfo("picture_info")
-	if err != nil {
-		log.Info("error." + err.Error())
-	}
-
+	resultActivityInfo := getMapContent("home/activity_info")
 	mapInterface := make(map[string]interface{})
 	mapInterface["org"] = resultOrg
 	mapInterface["repo"] = resultRepo
-	mapInterface["image"] = resultImage
-	//mapInterface["cloudbrain"] = resultCloudBrain
+	mapInterface["activity"] = resultActivityInfo
+
+	user_experience := getMapContent("home/user_experience")
+	for _, amap := range user_experience {
+		userId := amap["userid"]
+		userIntId, _ := strconv.Atoi(userId)
+		user, err := models.GetUserByID(int64(userIntId))
+		if err == nil {
+			amap["name"] = user.Name
+			amap["fullname"] = user.FullName
+			amap["detail"] = user.Description
+			amap["avatar"] = user.AvatarLink()
+		}
+	}
+	mapInterface["user_experience"] = user_experience
+	dataset, err := models.QueryDatasetGroupByTask()
+	if err == nil {
+		mapInterface["dataset"] = dataset
+	}
 	ctx.JSON(http.StatusOK, mapInterface)
 }
 
@@ -824,4 +867,4 @@ func HomePrivacy(ctx *context.Context) {
 
 func HomeResoruceDesc(ctx *context.Context) {
 	ctx.HTML(200, tplResoruceDesc)
-}
+}

routers/repo/ai_model_convert.go

@@ -828,5 +828,4 @@ func ModelConvertDownloadModel(ctx *context.Context) {
 			http.Redirect(ctx.Resp, ctx.Req.Request, url, http.StatusTemporaryRedirect)
 		}
 	}
-
 }

routers/routes/routes.go

@@ -359,6 +359,7 @@ func RegisterRoutes(m *macaron.Macaron) {
 	m.Get("/all/dosearch/", routers.SearchApi)
 	m.Post("/user/login/kanban", user.SignInPostAPI)
 	m.Get("/home/term", routers.HomeTerm)
+	m.Get("/home/notice", routers.HomeNoticeTmpl)
 	m.Get("/home/privacy", routers.HomePrivacy)
 	m.Get("/extension/tuomin/upload", modelapp.ProcessImageUI)
 	m.Post("/extension/tuomin/upload", reqSignIn, modelapp.ProcessImage)
@@ -1273,8 +1274,8 @@ func RegisterRoutes(m *macaron.Macaron) {
 
 		m.Group("/modelsafety", func() {
 			m.Group("/:id", func() {
-				m.Get("/show", reqRepoCloudBrainWriter, repo.GetAiSafetyTaskTmpl)
-				m.Get("", reqRepoCloudBrainWriter, repo.GetAiSafetyTask)
+				m.Get("/show", reqRepoCloudBrainReader, repo.GetAiSafetyTaskTmpl)
+				m.Get("", reqRepoCloudBrainReader, repo.GetAiSafetyTask)
 				m.Post("/stop", cloudbrain.AdminOrOwnerOrJobCreaterRight, repo.StopAiSafetyTask)
 				m.Post("/del", cloudbrain.AdminOrOwnerOrJobCreaterRight, repo.DelAiSafetyTask)
 			})

services/repository/repository.go

@@ -107,18 +107,13 @@ func GetRecommendCourseKeyWords() ([]string, error) {
 
 }
 
-func GetRecommendRepoFromPromote(filename string) ([]map[string]interface{}, error) {
+func GetRecommendRepoFromPromote(repoMap []map[string]string) ([]map[string]interface{}, error) {
 	resultRepo := make([]map[string]interface{}, 0)
-	url := setting.RecommentRepoAddr + filename
-	result, err := RecommendFromPromote(url)
-
-	if err != nil {
-
-		return resultRepo, err
-	}
 
 	//resultRepo := make([]*models.Repository, 0)
-	for _, repoName := range result {
+	for _, record := range repoMap {
+		repoName := record["project_url"]
+		//log.Info("repoName=" + repoName + " tmpIndex1=" + fmt.Sprint(tmpIndex1) + " len(repoName)=" + fmt.Sprint(len(repoName)))
 		tmpIndex := strings.Index(repoName, "/")
 		if tmpIndex == -1 {
 			log.Info("error repo name format.")
@@ -131,7 +126,8 @@ func GetRecommendRepoFromPromote(filename string) ([]map[string]interface{}, err
 				repoMap["ID"] = fmt.Sprint(repo.ID)
 				repoMap["Name"] = repo.Name
 				repoMap["Alias"] = repo.Alias
-
+				repoMap["Label"] = record["class"]
+				repoMap["Label_en"] = record["class_en"]
 				repoMap["OwnerName"] = repo.OwnerName
 				repoMap["NumStars"] = repo.NumStars
 				repoMap["NumForks"] = repo.NumForks

templates/base/footer_content.tmpl

@@ -1,15 +1,17 @@
-<footer>
+<footer style="border-top:none;">
 	<div class="ui container">
 		<div class="ui grid">
-			<div class="sixteen wide mobile eight wide tablet eight wide computer column">
+			<div class="sixteen wide mobile wide tablet three wide computer column mobile-text-align-center">
+				<img style="width:166px;height:66px;margin-top:24px;" src="/img/logo-footer.svg" />
+			</div>
+			<div class="sixteen wide mobile wide tablet seven wide computer column" style="padding-left:20px;">
 				<div class="ui three column grid">
 					<div class="column ui vertical text menu">
 						<div class="header item">{{.i18n.Tr "custom.head.community"}}</div>
 						<a href="https://openi.org.cn/html/Club/2019/0227/14.html" class="item">{{.i18n.Tr "custom.foot.council"}}</a>
 						<a href="https://openi.org.cn/html/Club/2019/0227/14.html" class="item">{{.i18n.Tr "custom.foot.technical_committee"}}</a>
 						<a href="https://openi.org.cn/html/Club/2019/0228/17.html" class="item">{{.i18n.Tr "custom.foot.join"}}</a>
-						<a href="{{AppSubUrl}}/home/term/" class="item">{{.i18n.Tr "custom.foot.agreement"}}</a>
-						
+						<a href="{{AppSubUrl}}/home/term/" class="item">{{.i18n.Tr "custom.foot.agreement"}}</a>						
 					</div>
 					<div class="column ui vertical text menu">
 						<div class="header item">{{.i18n.Tr "custom.foot.news"}}</div>
@@ -61,7 +63,40 @@
 					</div>
 				</div>
 			</div>
-			<div class="sixteen wide mobile eight wide tablet eight wide computer column" style=" margin:2.0rem 0">
+			<style>
+				.contacts-qr-code-c {
+					margin:2.0rem 0;
+					display:flex !important;
+					justify-content:flex-end;
+				}
+			</style>
+			<div class="sixteen wide mobile wide tablet six wide computer column contacts-qr-code-c mobile-justify-content-center">
+				<div style="text-align:center;">
+					<div  style="width:80px;height:80px;display:inline-block;
+						background-image: url('https://openi.pcl.ac.cn/zeizei/OpenI_Learning/raw/branch/master/img/official_account_mini.png');
+            background-repeat: no-repeat;
+            background-attachment: scroll;
+						background-position: -2px -2px;
+						background-size: 84px 84px;
+						background-color: transparent;"           
+					></div>
+					<p style="margin-top:4px;color:rgb(16, 16, 16);">{{.i18n.Tr "custom.foot.openi_subscription_number"}}</p>
+					</div>
+				<div style="text-align:center;margin-left:40px;">
+					<div  style="width:80px;height:80px;display:inline-block;
+						background-image: url('https://openi.pcl.ac.cn/zeizei/OpenI_Learning/raw/branch/master/img/wechatgroup.jpg');
+            background-repeat: no-repeat;
+            background-attachment: scroll;
+						background-position: -7px -25px;
+						background-size: 94px 117px;
+						background-color: transparent;"           
+					></div>
+					<p style="margin-top:4px;color:rgb(16, 16, 16);">{{.i18n.Tr "custom.foot.user_communication_group"}}</p>
+				</div>
+			</div>
+		</div>
+		<div class="ui grid" style="margin-top:2rem;margin-bottom:2rem;border-top:1px solid #d6d6d6;">
+			<div class="sixteen wide mobile sixteen wide tablet wide computer column" style=" margin:1.0rem 0;text-align:center;">
 				{{.i18n.Tr "custom.foot.copyright"}} <a href="http://beian.miit.gov.cn/" target="_blank">京ICP备18004880号</a>
 				<br>
 				{{.i18n.Tr "home.powerdby"}}<a href="https://www.trustie.net/" target="_blank">Trustie确实</a>{{.i18n.Tr "、Gitea"}}
@@ -69,4 +104,9 @@
 			</div>
 		</div>
 	</div>
+	<div class="__go-top" style="display:none;z-index:100;width:44px;height:44px;bottom:50px;right:50px;background:rgba(16, 16, 16, 0.1);position:fixed;cursor:pointer;border-radius:5px;">
+		<div style="display:flex;align-items:center;justify-content:center;height:100%;">
+			<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 mHEdk svg-icon-path-icon fill" viewBox="0 0 32 32" width="30" height="30"><defs data-reactroot=""></defs><g><path fill="rgba(16, 16, 16, 0.6)" d="M17.333 10.437v16.229h-2.667v-16.229l-7.152 7.152-1.885-1.885 10.371-10.371 10.371 10.371-1.885 1.885-7.152-7.152z"></path></g></svg>
+		</div>
+	</div>
 </footer>

templates/base/head.tmpl

@@ -240,6 +240,7 @@ var _hmt = _hmt || [];
 			}
 		}
 		if (isShowNoticeTag){
+			if (!document.getElementById("notic_content")) return;
 			if(isNewNotice){
 				document.getElementById("notic_content").style.display='block'
 			}else{

templates/base/head_home.tmpl

@@ -247,6 +247,7 @@ var _hmt = _hmt || [];
 			}
 		}
 		if (isShowNoticeTag){
+			if (!document.getElementById("notic_content")) return;
 			if(isNewNotice){
 				document.getElementById("notic_content").style.display='block'
 			}else{

templates/base/head_navbar.tmpl

@@ -1,5 +1,5 @@
 <div class="ui container" id="navbar">
-	<div class="item brand" style="justify-content: space-between;">
+	<div class="item brand" style="justify-content: space-between;height:62px;">
 		<a href="https://openi.org.cn/">
 			<img class="ui mini image" src="{{StaticUrlPrefix}}/img/logo-w.svg">
 		</a>
@@ -7,15 +7,18 @@
 			<i class="sidebar icon"></i>
 		</div>
 	</div>
-	<div style="width:1px;background:#606266;height:80%;margin:auto 0.5rem"></div>
-	<div class="item brand" style="margin-left: 0.9rem;">
+	<div class="item brand" style="padding-right:1.9rem">
 		<a href="/">
-			<img class="ui mini image" style="height: 1.3rem;" src="{{StaticUrlPrefix}}/img/git-logo.svg">
+			<!-- <img class="ui mini image" style="height: 1.3rem;" src="{{StaticUrlPrefix}}/img/git-logo.svg"> -->
+			<div>
+				<div style="display:flex">
+					<div style="line-height:24px;font-weight:700;font-size:24px;color:rgba(91,185,115,1);margin-right:2px;">AI</div>
+					<div style="line-height:24px;font-weight:700;font-size:21px;color:rgba(91,185,115,1);">协作平台</div>
+				</div>
+				<div style="font-weight:300;font-size:12px;color: rgba(254,221,89,1);font-style:normal;letter-spacing: 0.1px;line-height:17px;">Powered  by  C²NET</div>
+			</div>
 		</a>
 	</div>
-
-	
-
 	{{if .IsSigned}}
 		<div class=" item edge">
 			<div class="dropdown-menu">
@@ -116,14 +119,14 @@
 	{{if .IsSigned}}
 		<div class="right stackable menu">			
 			<form id="searchForm" class="fourteen wide mobile ten wide tablet ten wide computer column ui form ignore-dirty" style="margin:auto" action="/all/search/" method="post">
-				<div class="ui fluid action input" style="background:#363840 ;border-radius: 5px;width: 200px;height:30px;border: #888888 solid 1px;">
+				<div class="ui fluid action input" style="background:transparent ;border-radius: 5px;width: 200px;height:30px;border:rgb(233,233,233) solid 1px;">
 					<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..."  
-					style="transition: background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#888888;background:#363840 ;color:#888888;border: none;outline: none;">
+					style="transition: background-color 5000s ease-in-out 0s;-webkit-text-fill-color:white;background:transparent;color:white;border: none;outline: none;">
 					<input type="hidden" name="tab" value="{{$.TabName}}">
 					<input type="hidden" name="sort" value="hot">
-					<button style="border: none;background-color: #363840;outline: none;border-radius:5px"><img type = "submit"  style="width: 25px; height: 25px;margin: auto;"  src="/img/search.svg" >
-					</button> 
-					<!-- <button class="ui green button">{{.i18n.Tr "explore.search"}}</button> -->
+					<button style="border:none;background-color:transparent;outline:none;border-radius:5px;cursor:pointer;">
+						<img type="submit" style="width:21px;height:21px;margin:auto;vertical-align:bottom;" src="/img/search.svg" >
+					</button>
 				</div>
 			</form>
 			<a href="{{AppSubUrl}}/notifications" class="item poping up" data-content='{{.i18n.Tr "notifications"}}' data-variation="tiny inverted">
@@ -160,7 +163,7 @@
 			</div><!-- end dropdown menu create new -->
 
 			<div class="ui simple dropdown jump item poping up" tabindex="-1" data-content="{{.i18n.Tr "user_profile_and_more"}}" data-variation="tiny inverted">
-				<span class="text">
+				<span class="text" style="display:flex;align-items:center;">
 					<img class="ui tiny avatar image" width="24" height="24" src="{{.SignedUser.RelAvatarLink}}">
 					<span class="sr-only">{{.i18n.Tr "user_profile_and_more"}}</span>
 					<span class="mobile-only">{{.SignedUser.Name}}</span>
@@ -216,6 +219,13 @@
 					</a>
 				</div><!-- end content avatar menu -->
 			</div><!-- end dropdown avatar menu -->
+			<div class="ui simple item  poping up" data-content="{{.i18n.Tr "help"}}" data-variation="tiny inverted">
+				<a target="_blank" href="{{AppSubUrl}}/docs/index.html">
+					<div style="display:flex;justify-content:center;align-items:center;font-size:10px;cursor:pointer;width:26px;height:26px;border-radius:100%;text-align:center;background: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.7%2C%20-0.5250000000000001%2C%200.5250000000000001%2C%200.7%2C%200.283%2C%200.767)%22%3E%3Cstop%20stop-color%3D%22%2361d8dc%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23498af9%22%20stop-opacity%3D%221%22%20offset%3D%220.63%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e840f7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E&quot;);">				
+						<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon fill" viewBox="0 0 384 512" width="16" height="16"><defs data-reactroot=""></defs><g><path fill="rgb(255,255,255)" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path></g></svg>
+					</div>
+				</a>
+			</div>
 		</div><!-- end signed user right menu -->
 
 	{{else}}
@@ -224,14 +234,14 @@
 		<div class="right stackable menu">
 			
 			<form id="searchForm" class="fourteen wide mobile ten wide tablet ten wide computer column ui form ignore-dirty" style="margin:auto" action="/all/search/" method="post">
-				<div class="ui fluid action input" style="background:#363840 ;border-radius: 5px;width: 200px;height:30px;border: #888888 solid 1px;">
+				<div class="ui fluid action input" style="background:transparent ;border-radius: 5px;width: 200px;height:30px;border:rgb(233,233,233) solid 1px;">
 					<input name="q" value="{{.Keyword}}" placeholder="{{.i18n.Tr "explore.search"}}..."  
-					style="transition: background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#888888;background:#363840 ;color:#888888;border: none;outline: none;">
+					style="transition: background-color 5000s ease-in-out 0s;-webkit-text-fill-color:white;background:transparent;color:white;border: none;outline: none;">
 					<input type="hidden" name="tab" value="{{$.TabName}}">
 					<input type="hidden" name="sort" value="hot">
-					<button style="border: none;background-color: #363840;outline: none;border-radius:5px"><img type = "submit"  style="width: 25px; height: 25px;margin: auto;"  src="/img/search.svg" >
-					</button> 
-					<!-- <button class="ui green button">{{.i18n.Tr "explore.search"}}</button> -->
+					<button style="border:none;background-color:transparent;outline:none;border-radius:5px;cursor:pointer;">
+						<img type="submit" style="width:21px;height:21px;margin:auto;vertical-align:bottom;" src="/img/search.svg" >
+					</button>
 				</div>
 			</form>
 			{{if .ShowRegistrationButton}}
@@ -254,9 +264,20 @@
 					{{svg "octicon-sign-in" 16}} {{.i18n.Tr "sign_in"}}
 				</a>
 			{{end}}
+
+			<div class="ui simple item  poping up" data-content="{{.i18n.Tr "help"}}" data-variation="tiny inverted">
+				<a target="_blank" href="{{AppSubUrl}}/docs/index.html">
+					<div style="display:flex;justify-content:center;align-items:center;font-size:10px;cursor:pointer;width:26px;height:26px;border-radius:100%;text-align:center;background: url(&quot;data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.7%2C%20-0.5250000000000001%2C%200.5250000000000001%2C%200.7%2C%200.283%2C%200.767)%22%3E%3Cstop%20stop-color%3D%22%2361d8dc%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23498af9%22%20stop-opacity%3D%221%22%20offset%3D%220.63%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e840f7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E&quot;);">				
+						<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon fill" viewBox="0 0 384 512" width="16" height="16"><defs data-reactroot=""></defs><g><path fill="rgb(255,255,255)" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path></g></svg>
+					</div>
+				</a>
+			</div>
+
 		</div><!-- end anonymous right menu -->
 
 	{{end}}
 
+
+
 </div>
 

templates/base/head_notice.tmpl

@@ -1,5 +1,5 @@
 {{if not .IsCourse}}
-    {{ if .notices}}
+    {{ if (and .notices (not .PageIsHome)) }}
         <div  class="notic_content" id ="notic_content"  style="display: block; position: relative">
             <div class="ui container">
                 <marquee behavior="scroll" direction="left">

templates/custom/home/home_activity.tmpl

@@ -0,0 +1,36 @@
+<style>
+.homeactivity {
+  padding-top: 5rem;
+  padding-bottom: 6rem;
+  overflow: hidden;
+}
+.homeactivity .card {
+  width: 360px !important;
+  height: 160px !important;
+}
+.homeactivity img {
+  width: 100% !important;
+  height: 100% !important;
+}
+.homeactivity .image-name {
+  font-size: 14px;
+  color: rgb(16, 16, 16);
+  text-align: center;
+  margin-top: 0.8em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 20px;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+</style>
+ <div class="ui container homeactivity _hm-container">
+    <div class="ui center homepro-tit am-mb-20">
+      <h2>{{.page_recommend_activity}}</h2>
+      <p><span class="ui text grey">{{.page_recommend_activity_desc}}</p>
+    </div>
+    <div class="event-list">
+      <div class="swiper-wrapper" id="recommendactivity"></div>
+      <div class="swiper-pagination"></div>
+    </div>
+</div>

templates/custom/home/home_dataset.tmpl

@@ -0,0 +1,85 @@
+<style>
+  .homedataset {
+    padding-top: 4em;
+    padding-bottom: 4em;
+  }    
+  .home-dataset-list {    
+    position: relative;
+    z-index: 9;
+    padding: 0em 1em 3em;
+    overflow: hidden;
+  }
+  .home-dataset-list .swiper-slide {
+    padding-top: 5px;
+  }
+  .home-dataset-list .dataset-card {
+    height: 130px;
+    width: 130px;
+    border: 1px solid rgba(157, 197, 226, 0.4);    
+    box-shadow: rgb(157 197 226 / 20%) 0px 5px 10px 0px;
+    color: rgb(16, 16, 16);
+    border-radius: 6px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;    
+    transition: all 0.1s;
+  }
+  .home-dataset-list .dataset-card:hover {
+    transform: translateY(-3px);
+  }
+  .home-dataset-list .dataset-card>div {
+    width:100%;
+    display: flex;   
+    justify-content: center;
+  }
+  .home-dataset-list .dataset-card .content {
+    width:100%;   
+    overflow: hidden;    
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    padding: 0 10px;
+  }
+  .home-dataset-list .dataset-card .icon-c {   
+    font-size: 14px;
+    color: #101010;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  .home-dataset-list .dataset-card .label {
+    font-size: 14px;
+    color: #101010;
+    margin-bottom: 8px;
+  }
+  .home-dataset-list .dataset-card .svg.fill:not([stroke]) {
+    fill: url(#ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs);
+  }
+  .home-dataset-list .dataset-card .svg.fill:not([fill]) {
+    fill: url(#ila93em9ydx6bi61,1,rs,1,f000f000,f0rsf000,f000,00e6msqtrs,dw4hjuqlrs,ri00exmcrs);
+  }
+  .home-dataset-list .dataset-card .count {
+    font-size:12px;
+    color:rgb(136,136,136);
+  }
+  .home-dataset-list .swiper-pagination-bullet-active {
+    width: 40px;
+    border-radius: 4px;
+  }
+</style>
+<div class="ui container homedataset _hm-container">
+  <div class="ui stackable grid">
+    <div class="sixteen wide tablet four wide computer column mobile-text-align-center">
+      <h2>{{.i18n.Tr "home.search_dataset"}}</h2>
+      <p><span class="ui text grey">{{.i18n.Tr "home.datasets_descr"}}&nbsp;</span><a href="/explore/datasets">{{.i18n.Tr "home.search_dataset"}}</a></p>
+    </div>
+    <div class="sixteen wide tablet twelve wide computer column">
+      <div class="home-dataset-list">
+        <div class="swiper-wrapper" id="home_dataset"></div>
+        <div class="swiper-pagination"></div>
+      </div>
+    </div>
+  </div>        
+</div>

templates/custom/home/home_org.tmpl

@@ -0,0 +1,20 @@
+<style>
+
+</style>
+<div class="ui container homeorg _hm-container" style="max-width:1200px;">
+  <div class="ui stackable grid"> 
+    <div class="sixteen wide tablet sixteen wide computer column mobile-text-align-center" style="text-align:center;">
+      <h2>{{.page_recommend_org}}</h2>
+      <p><span class="ui text grey">{{.page_recommend_org_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{.page_recommend_org_commit}}</a>
+      {{.i18n.Tr "home.org_see"}}
+      <a href="{{AppSubUrl}}/explore/organizations" class="">{{.page_recommend_org_more}}</a>
+      </p>
+    </div>
+    <div class="sixteen wide tablet sixteen wide computer column">
+      <div class="homeorg-list">
+        <div class="swiper-wrapper" id="recommendorg"></div>
+        <div class="swiper-pagination"></div>                    
+      </div>
+    </div>
+  </div>
+</div>

templates/custom/home/home_repo.tmpl

@@ -0,0 +1,21 @@
+<style>
+.homepro-bg {
+   background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.013999999999999973%2C%201.0040000000000002%2C%20-0.1807553452932099%2C%200.013999999999999973%2C%200.374%2C%20-0.007)%22%3E%3Cstop%20stop-color%3D%22%23eee9da%22%20stop-opacity%3D%220.2%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23f3e7f7%22%20stop-opacity%3D%220.26%22%20offset%3D%220.29%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23d0e7ff%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+}
+</style>
+<div class="homepro-bg">
+  <div class="ui container homepro _hm-container" style="padding-top:4rem;padding-bottom:3rem;">
+    <div class="ui stackable grid">
+      <div class="sixteen wide tablet four wide computer column mobile-text-align-center">
+        <h2>{{.page_recommend_repo}}</h2>
+        <p><span class="ui text grey">{{.page_recommend_repo_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{.page_recommend_repo_commit}}</a>&nbsp;<span class="ui text grey">{{.page_recommend_repo_go}}</span>&nbsp;<a href="{{AppSubUrl}}/explore/">{{.page_recommend_repo_more}}</a></p>
+      </div>
+      <div class="sixteen wide tablet twelve wide computer column">
+        <div class="homepro-list">
+          <div class="swiper-wrapper" id="recommendrepo"></div>
+          <div class="swiper-pagination"></div>
+        </div>
+      </div>
+    </div>  
+  </div>
+</div>

templates/custom/home/home_top.tmpl

@@ -0,0 +1,1942 @@
+<style>
+  @media (min-width: 100px) and (max-width: 1199.99px) {
+    #homenews {
+      top: -1100px !important;
+    }
+  }
+  @media (min-width: 1320px) and (max-width: 1599.99px) {
+    ._hm-container {
+      width: 1200px !important;
+    }
+  }
+
+  @media only screen and (min-width: 1600px) {
+    ._hm-container {
+      width: 1440px !important;
+    }
+  }
+
+  @keyframes _hm-swing {
+    20% {
+      transform: rotate3d(0, 0, 1, 15deg);
+    }
+
+    40% {
+      transform: rotate3d(0, 0, 1, -10deg);
+    }
+
+    60% {
+      transform: rotate3d(0, 0, 1, 5deg);
+    }
+
+    80% {
+      transform: rotate3d(0, 0, 1, -5deg);
+    }
+
+    to {
+      transform: rotate3d(0, 0, 1, 0deg);
+    }
+  }
+
+  ._hm-swing {
+    transform-origin: top center;
+    animation-name: _hm-swing;
+  }
+
+  @keyframes _hm-shake {
+
+    from,
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translate3d(-10px, 0, 0);
+    }
+
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translate3d(10px, 0, 0);
+    }
+  }
+
+  ._hm-shake {
+    animation-name: _hm-shake;
+  }
+
+  @keyframes _hm-slide-up {
+
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+
+    5% {
+      transform: translate3d(0, 0, 0);
+    }
+
+    50% {
+      transform: translate3d(0, -90%, 0);
+    }
+
+    to {
+      transform: translate3d(0, -90%, 0);
+    }
+  }
+
+  ._hm-slide-up {
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-slide-up;
+  }
+
+  @keyframes _hm-fade-out {
+    from {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    70% {
+      opacity: 1;
+    }
+
+    80% {
+      opacity: 1;
+    }
+
+    90% {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  ._hm-fade-out {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-fade-out;
+    animation-delay: 1.2s;
+  }
+
+  @keyframes _hm-change-bg {
+    from {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    45% {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    50% {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    95% {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+
+    to {
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+    }
+  }
+
+  ._hm-change-bg {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-change-bg;
+  }
+
+  @keyframes _hm-show-section-1 {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    45% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    45.01%,
+    95% {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    95.01% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  ._hm-show-section-1 {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-show-section-1;
+  }
+
+  @keyframes _hm-show-section-2 {
+    from {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    45% {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    45.01%,
+    95% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    95.01% {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-1000%);
+    }
+  }
+
+  ._hm-show-section-2 {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-show-section-2;
+  }
+
+  @keyframes _hm-slide-in-left-once {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes _hm-slide-in-right-once {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes _hm-slide-in-left {
+    from {
+      opacity: 1;
+    }
+
+    5% {
+      transform: translateX(0);
+    }
+
+    45% {
+      opacity: 1;
+    }
+
+    45.01%,
+    95% {
+      opacity: 0;
+      transform: translateX(0);
+    }
+
+    95.01% {
+      opacity: 1;
+      transform: translateX(-100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  ._hm-slide-in-left {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-slide-in-left;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes _hm-slide-in-right {
+    from {
+      opacity: 0;
+    }
+
+    45% {
+      opacity: 0;
+
+    }
+
+    45.01% {
+      transform: translateX(100%);
+      opacity: 1;
+    }
+
+    50% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    95% {
+      opacity: 1;
+    }
+
+    95.01% {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  ._hm-slide-in-right {
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+    animation-name: _hm-slide-in-right;
+    animation-fill-mode: forwards
+  }
+
+  @keyframes _hm-bounce-in-up {
+
+    0%,
+    60%,
+    75%,
+    90%,
+    100% {
+      transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
+    }
+
+    0% {
+      opacity: 0;
+      transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -25px, 0);
+    }
+
+    75% {
+      transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+      transform: translate3d(0, -5px, 0);
+    }
+
+    100% {
+      transform: none;
+    }
+  }
+
+  ._hm-bounce-in-up {
+    animation-name: _hm-bounce-in-up
+  }
+
+  @keyframes _hm-ani-bubble-c {
+    from {
+      opacity: 1;
+    }
+
+    20% {
+      opacity: 1;
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    40%,
+    50%,
+    90% {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  ._hm-ani-bubble-c {
+    animation-name: _hm-ani-bubble-c;
+    animation-duration: 20s;
+    animation-iteration-count: infinite;
+    animation-delay: 1s;
+  }
+
+  ._hm-transition-common {
+    transition: all 500ms linear 0s, z-index 0s linear 0s;
+  }
+
+  ._hm-bg-container {
+    overflow: hidden;
+    position: relative;
+    height: 580px;    
+  }
+
+  ._hm-pg-static {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  ._hm-pg {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: none;
+  }
+
+  ._hm-pg-show {
+    display: block;
+  }
+
+  ._hm-pg-hide {
+    display: none;
+  }
+
+  ._hm-pg-bg-1 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-pg-bg-2 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.117110761741029e-17%2C%200.999%2C%20-0.21820798177083334%2C%206.117110761741029e-17%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%239c6af2%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2363d0f9%22%20stop-opacity%3D%221%22%20offset%3D%220.78%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2378fbed%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");    
+  }
+  ._hm-pg-bg-3 {
+    background: url("/img/home-banner-01.jpg");    
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+  ._hm-pg-bg-3-en {
+    background: url("/img/home-banner-01-en.jpg");    
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+  }
+
+  ._hm-slide-btn {
+    position: absolute;
+    z-index: 30;
+    color: white;
+    height: 30px;
+    width: 30px;
+    border: 1px solid rgba(255,255,255,0.6);
+    box-sizing: border-box;
+    top: 50%;
+    transform: translateY(-50%) rotate(-45deg) ;
+    cursor: pointer;
+    padding: 5px;
+  }
+
+  ._hm-slide-btn-left {
+    left: 30px;    
+    border-right: none;
+    border-bottom: none;    
+  }
+
+  ._hm-slide-btn-right {
+    right: 30px;
+    border-top: none;
+    border-left: none;  
+  }
+
+  ._hm-circle {
+    position: absolute;
+    top: 180px;
+    left: 70%;
+    z-index: 1;
+    opacity: 0.9;
+    transform-origin: 73px 73px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 146px;
+    height: 146px;
+    border-width: 0px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%201%2C%201)%22%3E%3Cstop%20stop-color%3D%22%2390fe9f%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-circle-rect {
+    position: absolute;
+    top: 400px;
+    left: 55%;
+    opacity: 0.9;
+    transform-origin: 632px 430px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 1264px;
+    height: 860px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.5890000000000002%2C%20-0.6789999999999998%2C%200.3177778954194038%2C%20-0.5954790000000001%2C%200.749%2C%200.847)%22%3E%3Cstop%20stop-color%3D%22%2390fe9f%22%20stop-opacity%3D%220%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2302cafd%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-up-arr-c {
+    position: absolute;
+    height: 1px;
+    width: 80%;
+    left: 10%;
+    bottom: -40px;
+    transform: translate(-2.5%, 0);
+    z-index: 5;
+  }
+
+  ._hm-up-arr {
+    width: 8%;
+    max-width: 86px;
+    min-width: 5px;
+  }
+
+  ._hm-up-arr-1 {
+    position: absolute;
+    left: 5%;
+    animation-delay: 1.1s;
+  }
+
+  ._hm-up-arr-2 {
+    position: absolute;
+    left: 15%;
+    animation-delay: 1.2s;
+  }
+
+  ._hm-up-arr-3 {
+    position: absolute;
+    top: 0;
+    left: 25%;
+    animation-delay: 1.3s;
+  }
+
+  ._hm-up-arr-4 {
+    position: absolute;
+    top: 0;
+    left: 35%;
+    animation-delay: 1.4s;
+  }
+
+  ._hm-up-arr-5 {
+    position: absolute;
+    top: 0;
+    left: 45%;
+    animation-delay: 1.5s;
+  }
+
+  ._hm-up-arr-6 {
+    position: absolute;
+    top: 0;
+    left: 55%;
+    animation-delay: 1.6s;
+  }
+
+  ._hm-up-arr-7 {
+    position: absolute;
+    top: 0;
+    left: 65%;
+    animation-delay: 1.7s;
+  }
+
+  ._hm-up-arr-8 {
+    position: absolute;
+    top: 0;
+    left: 75%;
+    animation-delay: 1.8s;
+  }
+
+  ._hm-up-arr-9 {
+    position: absolute;
+    top: 0;
+    left: 85%;
+    animation-delay: 1.9s;
+  }
+
+  ._hm-up-arr-10 {
+    position: absolute;
+    top: 0;
+    left: 95%;
+    animation-delay: 2s;
+  }
+
+  ._hm-arr-triangle-c {
+    width: 100%;
+    padding: 16% 0;
+    position: relative;
+  }
+
+  ._hm-arr-triangle {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+  }
+
+  ._hm-arr-triangle-l {
+    float: left;
+    width: 50%;
+    height: 100%;
+    background-repeat: no-repeat;
+  }
+
+  ._hm-arr-triangle-r {
+    width: 50%;
+    height: 100%;
+    float: left;
+    background-repeat: no-repeat;
+  }
+
+  ._hm-arr-triangle-1 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-1 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-2 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 244.035, 219.045, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-2 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 244.035, 219.045, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-3 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 187.935, 244.035, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-3 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 187.935, 244.035, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-4 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 244.035, 219.045, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-4 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 244.035, 219.045, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-5 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-5 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-6 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-6 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-7 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 244.035, 219.045, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-7 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 244.035, 219.045, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-8 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 187.935, 244.035, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-8 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 187.935, 244.035, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-9 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 244.035, 219.045, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-9 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 244.035, 219.045, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-triangle-10 ._hm-arr-triangle-l {
+    background-image: linear-gradient(to bottom right, transparent 50%, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%);
+  }
+
+  ._hm-arr-triangle-10 ._hm-arr-triangle-r {
+    background-image: linear-gradient(to top right, rgba(184.875, 226.95000000000002, 244.035, 0.6) 50%, transparent 50%);
+  }
+
+  ._hm-arr-rect {
+    width: 100%;
+  }
+
+  ._hm-arr-rect-1 {
+    height: 190px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-4.876135749053542%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9e3f4%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-2 {
+    height: 236px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-7.523026500811249%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9f4db%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-3 {
+    height: 212px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-6.070721471065441%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9bcf4%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-4 {
+    height: 236px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-7.523026500811249%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9f4db%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-5 {
+    height: 178px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-4.2796533261222285%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9e3f4%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-6 {
+    height: 190px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-4.876135749053542%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9e3f4%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-7 {
+    height: 236px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-7.523026500811249%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9f4db%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-8 {
+    height: 212px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-6.070721471065441%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9bcf4%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-9 {
+    height: 236px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-7.523026500811249%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9f4db%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-arr-rect-10 {
+    height: 178px;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.015000000000000024%2C%200.999%2C%20-4.2796533261222285%2C%200.015000000000000024%2C%200%2C%200)%22%3E%3Cstop%20stop-color%3D%22%23b9e3f4%22%20stop-opacity%3D%220.6%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2398d7f1%22%20stop-opacity%3D%220.6%22%20offset%3D%220.5%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2377cbed%22%20stop-opacity%3D%220.1%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-bubble-c {
+    position: absolute;
+    height: 1px;
+    width: 100%;
+    left: 0;
+    bottom: -90px;    
+    z-index: 3;
+    opacity: 0.8;
+  }
+
+  ._hm-bubble-1 {
+    position: absolute;
+    top: -474px;
+    left: 0px;
+    z-index: 9;
+    opacity: 0.9;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    width: 24px;
+    height: 24px;
+    border-radius: 100%;
+    transform: translate3d(0, 3000px, 0);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-bubble-2 {
+    position: absolute;
+    top: -455px;
+    left: 45px;
+    z-index: 10;
+    opacity: 0.9;
+    transform-origin: 10px 10px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    transform: translate3d(0, 3000px, 0);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-bubble-3 {
+    position: absolute;
+    top: -433px;
+    left: 6px;
+    z-index: 11;
+    opacity: 0.9;
+    transform-origin: 6px 6px;
+    animation-delay: 0.8s;
+    animation-duration: 2.4s;
+    animation-iteration-count: infinite;
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    transform: translate3d(0, 3000px, 0);
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-universe {
+    position: relative;
+    top: -20px;
+    left: 20%;
+  }
+
+  ._hm-universe-1 {
+    position: absolute;
+    top: 116px;
+    left: 22px;
+    z-index: 5;
+    opacity: 0.9;
+    transform-origin: 34px 34px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 68px;
+    height: 68px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.14099999999999993%2C%20-0.622%2C%200.622%2C%200.14099999999999993%2C%200.422%2C%200.631)%22%3E%3Cstop%20stop-color%3D%22%235c29ec%22%20stop-opacity%3D%220%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%237702f8%22%20stop-opacity%3D%220.1%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%220.5%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-universe-2 {
+    position: absolute;
+    top: 122px;
+    left: 0;
+    z-index: 6;
+    opacity: 0.9;
+    transform: rotate(19deg);
+    transform-origin: 56px 29px;
+    width: 112px;
+    height: 58px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.5617810274234694%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%23046af7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%220.1%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%220.3%22%20offset%3D%220.98%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-area {
+    position: relative;
+    top: -25px;
+    right: 10%;
+    z-index: 3;
+  }
+
+  ._hm-person {
+    position: absolute;
+    top: 211px;
+    /* left: 1073px; 277px; */
+    right: 12px;;
+    width: 265px;
+    height: 309px;
+    z-index: 3;
+    opacity: 1;
+    transform-origin: 132.5px 154.5px;
+    background-image: url("/img/home-bg-ps.png");
+    background-size: cover;
+  }
+
+  ._hm-person-ring-1 {
+    position: absolute;
+    top: 248px;
+    right: -73px;
+    z-index: 8;
+    opacity: 0.9;
+    transform: rotate(282deg);
+    transform-origin: 194.5px 101px;
+    width: 389px;
+    height: 202px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.5648727994660357%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300f2ff%22%20stop-opacity%3D%221%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fff2%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-ring-2 {
+    position: absolute;
+    top: 246px;
+    right: -95px;
+    z-index: 6;
+    opacity: 0.9;
+    transform: rotate(281deg);
+    transform-origin: 194px 106.5px;
+    width: 388px;
+    height: 213px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.002000000000000036%2C%200.579%2C%20-0.6313103100621746%2C%200.00723600000000013%2C%200.508%2C%200.404)%22%3E%3Cstop%20stop-color%3D%22%2304d1f7%22%20stop-opacity%3D%220%22%20offset%3D%220.7%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300c9ff%22%20stop-opacity%3D%220.5%22%20offset%3D%220.8%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23bc00ff%22%20stop-opacity%3D%220.21%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-ring-3 {  
+    position: absolute;
+    top: 285px;
+    right: -20px;
+    opacity: 0.9;
+    transform: rotate(282deg);
+    transform-origin: 141.5px 66px;
+    width: 283px; 
+    height: 132px; 
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.048999999999999905%2C%20-1.2400000000000002%2C%200.9760346574435941%2C%200.17728199999999966%2C%200.467%2C%201.034)%22%3E%3Cstop%20stop-color%3D%22%231e04f7%22%20stop-opacity%3D%220.39%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300aeff%22%20stop-opacity%3D%220.52%22%20offset%3D%220.73%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%239ff7f2%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-1 {
+    position: absolute;
+    top: 35px;
+    right: 296px;
+    z-index: 5;
+    opacity: 0.9;
+    transform-origin: 73px 73px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 146px;
+    height: 146px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.5259999999999999%2C%20-0.45000000000000007%2C%200.45000000000000007%2C%20-0.5259999999999999%2C%200.648%2C%200.591)%22%3E%3Cstop%20stop-color%3D%22%239e02f9%22%20stop-opacity%3D%220.14%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230241f8%22%20stop-opacity%3D%220.23%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-2 {
+    position: absolute;
+    top: 86px;
+    right: 396px;
+    z-index: 6;
+    opacity: 0.9;
+    transform-origin: 16.5px 16.5px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 33px;
+    height: 33px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.42500000000000004%2C%20-0.4099999999999999%2C%200.4099999999999999%2C%20-0.42500000000000004%2C%200.648%2C%200.591)%22%3E%3Cstop%20stop-color%3D%22%2376029f%22%20stop-opacity%3D%220.01%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23010664%22%20stop-opacity%3D%220.22%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-3 {
+    position: absolute;
+    top: 121px;
+    right: 192px;
+    z-index: 15;
+    opacity: 0.9;
+    transform-origin: 20px 20px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(0.524%2C%200.4450000000000001%2C%20-0.4450000000000001%2C%200.524%2C%200.339%2C%200.364)%22%3E%3Cstop%20stop-color%3D%22%235f00b4%22%20stop-opacity%3D%220.06%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23150bc4%22%20stop-opacity%3D%220.31%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300fcff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-circle-4 {
+    position: absolute;
+    top: -39px;
+    right: -66px;
+    z-index: 2;
+    opacity: 0.9;
+    transform-origin: 121px 121px;
+    animation-delay: 0.5s;
+    animation-duration: 2.6s;
+    animation-iteration-count: infinite;
+    width: 242px; 
+    height: 242px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.6710000000000002%2C%20-0.8079999999999999%2C%200.8079999999999999%2C%20-0.6710000000000002%2C%200.495%2C%200.568)%22%3E%3Cstop%20stop-color%3D%22%2390edfe%22%20stop-opacity%3D%220.6%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235b52f8%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-1 {}
+
+  ._hm-person-star-1-1 {
+    position: absolute;
+    top: 101px;
+    right: 477px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 3.5px;
+    width: 15px;
+    height: 7px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-1-2 {
+    position: absolute;
+    top: 97px;
+    right: 475px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 15.5px 3px;
+    width: 31px;
+    height: 6px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0023600416233090465%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-2 {}
+
+  ._hm-person-star-2-1 {
+    position: absolute;
+    top: 136px;
+    right: 388px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 3.5px;
+    width: 15px;
+    height: 7px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-2-2 {
+    position: absolute;
+    top: 132px;
+    right: 387px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 15px 3px;
+    width: 30px;
+    height: 6px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.002519999999999994%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-3 {}
+
+  ._hm-person-star-3-1 {
+    position: absolute;
+    top: 289px;
+    right: 594px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 6px 2.5px;
+    width: 12px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-3-2 {
+    position: absolute;
+    top: 285px;
+    right: 594px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 11.5px 2.5px;
+    width: 23px;
+    height: 5px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0029773156899810887%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fef512%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fea712%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-4 {}
+
+  ._hm-person-star-4-1 {
+    position: absolute;
+    top: 448px;
+    right: -15px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 3.5px;
+    width: 15px;
+    height: 7px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-4-2 {
+    position: absolute;
+    top: 444px;
+    right: -17px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 15.5px 3px;
+    width: 31px;
+    height: 6px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0023600416233090465%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fa24f9%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fa2424%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-5 {}
+
+  ._hm-person-star-5-1 {
+    position: absolute;
+    top: 503px;
+    right: 101px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 5.5px 2.5px;
+    width: 11px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-5-2 {
+    position: absolute;
+    top: 500px;
+    right: 101px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 11px 2.5px;
+    width: 22px;
+    height: 5px;
+    border-radius: 100%;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(-0.97%2C%20-0.06299999999999983%2C%200.0032541322314049497%2C%20-0.97%2C%200.989%2C%200.52)%22%3E%3Cstop%20stop-color%3D%22%23fef512%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23fea712%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-person-star-6 {
+    position: absolute;
+    top: 515px;
+    right: 328px;
+    z-index: 23;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2.5px;
+    width: 8px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-7 {
+    position: absolute;
+    top: 349px;
+    right: 221px;
+    z-index: 24;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 2.5px 2.5px;
+    width: 5px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-8 {
+    position: absolute;
+    top: 456px;
+    right: 138px;
+    z-index: 25;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2.5px;
+    width: 8px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-9 {
+    position: absolute;
+    top: 345px;
+    right: 48px;
+    z-index: 26;
+    opacity: 1;
+    transform: rotate(48deg);
+    transform-origin: 4px 1.5px;
+    width: 8px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(0, 242, 255);
+  }
+
+  ._hm-person-star-10 {
+    position: absolute;
+    top: 439px;
+    right: 347px;
+    z-index: 27;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4.5px 2.5px;
+    width: 9px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+  }
+
+  ._hm-person-star-11 {
+    position: absolute;
+    top: 291px;
+    right: 20px;
+    z-index: 28;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4.5px 2.5px;
+    width: 9px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+  }
+
+  ._hm-person-star-12 {
+    position: absolute;
+    top: 144px;
+    right: 333px;
+    z-index: 17;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 3px 2.5px;
+    width: 6px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(255, 255, 255);
+  }
+
+  ._hm-person-star-13 {
+    position: absolute;
+    top: 478px;
+    right: 220px;
+    z-index: 16;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 3px 2.5px;
+    width: 6px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-14 {
+    position: absolute;
+    top: 296px;
+    right: 377px;
+    z-index: 15;
+    opacity: 1;
+    transform: rotate(47deg);
+    transform-origin: 4px 1.5px;
+    width: 8px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-15 {
+    position: absolute;
+    top: 321px;
+    right: 427px;
+    z-index: 14;
+    opacity: 1;
+    transform: rotate(47deg);
+    transform-origin: 9.5px 1.5px;
+    width: 19px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-16 {
+    position: absolute;
+    top: 451px;
+    right: 470px;
+    z-index: 13;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 3px 2.5px;
+    width: 6px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+
+  }
+
+  ._hm-person-star-17 {
+    position: absolute;
+    top: 230px;
+    right: 128px;
+    z-index: 12;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2px;
+    width: 8px;
+    height: 4px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-18 {
+    position: absolute;
+    top: 564px;
+    right: 278px;
+    z-index: 11;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 2.5px;
+    width: 8px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-19 {
+    position: absolute;
+    top: 504px;
+    right: 404px;
+    z-index: 10;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 4px 1.5px;
+    width: 8px;
+    height: 3px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-20 {
+    position: absolute;
+    top: 291px;
+    right: 68px;
+    z-index: 9;
+    opacity: 1;
+    transform: rotate(39deg);
+    transform-origin: 6px 2.5px;
+    width: 12px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-21 {
+    position: absolute;
+    top: 238px;
+    right: 48px;
+    z-index: 8;
+    opacity: 1;
+    transform: rotate(52deg);
+    transform-origin: 6px 2.5px;
+    width: 12px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-22 {
+    position: absolute;
+    top: 106px;
+    right: 161px;
+    z-index: 7;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 10px 2.5px;
+    width: 20px;
+    height: 5px;
+    border-radius: 100%;
+    background: rgb(254, 245, 18);
+  }
+
+  ._hm-person-star-23 {
+    position: absolute;
+    top: 387px;
+    right: 436px;
+    z-index: 6;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 2.5px 2px;
+    width: 5px;
+    height: 4px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-24 {
+    position: absolute;
+    top: 506px;
+    right: 65px;
+    z-index: 5;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 4px 2px;
+    width: 8px;
+    height: 4px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-25 {
+    position: absolute;
+    top: 269px;
+    right: 306px;
+    z-index: 4;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 4px;
+    width: 15px;
+    height: 8px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-26 {
+    position: absolute;
+    top: 344px;
+    right: 262px;
+    z-index: 3;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 6px 3px;
+    width: 12px;
+    height: 6px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-27 {
+    position: absolute;
+    top: 417px;
+    right: 251px;
+    z-index: 2;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 11.5px 3px;
+    width: 23px;
+    height: 6px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-person-star-28 {
+    position: absolute;
+    top: 171px;
+    right: 13px;
+    z-index: 1;
+    opacity: 1;
+    transform: rotate(38deg);
+    transform-origin: 7.5px 4px;
+    width: 15px;
+    height: 8px;
+    border-radius: 100%;
+    background: rgb(250, 36, 249);
+  }
+
+  ._hm-txt-content-c {
+    position: relative;
+    top: 70px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 80%;
+    min-width: 300px;
+    max-width: 900px;
+    z-index: 10;
+  }
+
+  ._hm-big-txt-1,
+  ._hm-big-txt-2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ._hm-big-title {
+    text-align: center;
+    font-weight: 400;
+    font-size: 48px;
+    color: rgba(251, 251, 251, 1);
+    font-style: normal;
+    letter-spacing: 0px;
+    line-height: 53px;
+    text-decoration: none;
+    text-align: center;
+    margin-bottom: 38px;
+  }
+
+  ._hm-big-descr {
+    font-weight: 300;
+    font-size: 28px;
+    color: rgb(255, 255, 255);
+    font-style: normal;
+    letter-spacing: 0px;
+    line-height: 36px;
+    text-decoration: none;
+    text-align: center;
+    margin-bottom: 32px;
+  }
+
+  ._hm-big-btn-c {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 42px;
+    width: 200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ._hm-big-btn-c a {
+    text-decoration: none;
+    color: rgb(255, 255, 255);
+  }
+
+  ._hm-big-btn-1 {
+    width: 160px;
+    height: 48px;
+    border-style: none;
+    border-color: unset;
+    color: rgb(255, 255, 255);
+    border-radius: 40px;
+    font-size: 18px;
+    padding: 0px;
+    text-align: center;
+    font-weight: normal;
+    font-style: normal;
+    margin-right: 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;   
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22null%22%3E%3Cstop%20stop-color%3D%22%23db00ff%22%20stop-opacity%3D%221%22%20offset%3D%220.03%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230075ff%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-big-btn-2,
+  ._hm-big-btn-3 {
+    cursor: pointer;
+    width: 160px;
+    height: 40px;
+    border-color: rgb(251, 251, 251);
+    border-width: 1px;
+    border-style: solid;
+    color: rgb(255, 255, 255);
+    border-radius: 2px;
+    font-size: 14px;
+    padding: 0px;
+    text-align: center;
+    margin-right: 28px;
+    box-sizing: border-box;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ._hm-recommend-info {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: 60px 0px;
+    flex-wrap: wrap;
+  }
+
+  ._hm-recommend-info-area {
+    height: 100%;
+    flex: 1;
+    margin: 20px;
+    display: flex;
+    position: relative;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    min-width: 240px;
+    height: 150px;
+  }
+
+  ._hm-recommend-info-area ._hm-link {
+    font-weight: 400;
+    font-size: 20px;
+    color: rgba(255, 255, 255, 1);
+    text-decoration: none;
+  }
+
+  ._hm-recommend-info-area ._hm-link:hover {
+    opacity: 0.8;
+  }
+
+  ._hm-recommend-info-area-1 {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: flex-start;
+    font-size: 14px;
+    color: rgba(16, 16, 16, 1);
+  }
+
+  ._hm-recommend-info-area-1 div {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: left;
+  }
+
+  ._hm-recommend-info-area-1 div i {
+    vertical-align: -2px;
+  }
+
+  ._hm-recommend-info-area-1 a {
+    font-size: 14px;
+    color: rgb(16, 16, 16);
+    text-decoration: none;
+    font-weight: 400;
+  }
+
+  ._hm-recommend-info-area-1 a:hover {
+    opacity: 0.8;
+  }
+
+  ._hm-recommend-info-area-2 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.31499999999999984%2C%20-1.339%2C%200.23547450572320502%2C%200.31499999999999984%2C%200.5%2C%201.207)%22%3E%3Cstop%20stop-color%3D%22%231eb3c4%22%20stop-opacity%3D%220.91%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%230ca451%22%20stop-opacity%3D%220.5%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-2-bg-1 {
+    position: absolute;
+    width: 42px;
+    height: 42px;
+    border-radius: 100%;
+    right: 10px;
+    top: 23px;
+    z-index: -1;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.3550000000000002%2C%200.765%2C%20-0.8018622448979591%2C%20-0.3550000000000002%2C%200.779%2C%200.021)%22%3E%3Cstop%20stop-color%3D%22%23c2ffd8%22%20stop-opacity%3D%220.1%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300a5b8%22%20stop-opacity%3D%220.6%22%20offset%3D%220.76%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300a5b8%22%20stop-opacity%3D%220.2%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-2-bg-2 {
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    border-radius: 100%;
+    left: 42%;
+    bottom: 2px;
+    z-index: -1;
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-0.3550000000000002%2C%200.765%2C%20-0.7321006616257089%2C%20-0.3550000000000002%2C%200.779%2C%200.021)%22%3E%3Cstop%20stop-color%3D%22%23c2ffd8%22%20stop-opacity%3D%220.1%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%2300b87e%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-3 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22null%22%3E%3Cstop%20stop-color%3D%22%23c7b4ec%22%20stop-opacity%3D%220.8%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23f78284%22%20stop-opacity%3D%220.9%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+
+  ._hm-recommend-info-area-4 {
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.08399999999999999%2C%201.412%2C%20-0.24831217481789805%2C%200.08399999999999999%2C%200.306%2C%20-0.053)%22%3E%3Cstop%20stop-color%3D%22%23f89277%22%20stop-opacity%3D%220.8%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%235d32ff%22%20stop-opacity%3D%220.9%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+  #homenews {
+    position: absolute;
+    left: 0;     
+    width: 420px;
+    top: -328px;
+    z-index: 2;
+  }
+  .homenews {
+    background-color: transparent;
+  }
+  .homenews::before {
+    background-color: transparent;
+  }
+  .homenews .swiper-slide {
+  }
+  .homenews .swiper-slide .content-c {    
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+    height: 90%;
+    border-radius: 16px; 
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(1.004%2C%200%2C%200%2C%201.004%2C%20-0.004%2C%201.004)%22%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220.3%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23101010%22%20stop-opacity%3D%220%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+  .homenews .swiper-slide .content {
+    color: white;
+  }
+</style>
+<div class="_hm-bg-container">
+  <div class="_hm-pg _hm-pg-static">
+    <div class="_hm-circle-rect _hm-transition-common _hm-shake"></div>
+  </div>
+  <div class="_hm-pg-c">
+    <div class="_hm-pg _hm-pg-bg-1 _hm-pg-show">
+      <div class="_hm-universe">
+        <div class="_hm-universe-1 _hm-swing"></div>
+        <div class="_hm-universe-2"></div>
+      </div>
+      <div class="_hm-person-area">
+        <div class="_hm-person"></div>
+        <div class="_hm-person-ring-1"></div>
+        <div class="_hm-person-ring-2"></div>
+        <div class="_hm-person-ring-3"></div>
+        <div class="_hm-person-circle-1 _hm-swing"></div>
+        <div class="_hm-person-circle-2 _hm-swing"></div>
+        <div class="_hm-person-circle-3 _hm-swing"></div>
+        <div class="_hm-person-circle-4 _hm-swing"></div>
+        <div class="_hm-person-star-1">
+          <div class="_hm-person-star-1-1"></div>
+          <div class="_hm-person-star-1-2"></div>
+        </div>
+        <div class="_hm-person-star-2">
+          <div class="_hm-person-star-2-1"></div>
+          <div class="_hm-person-star-2-2"></div>
+        </div>
+        <div class="_hm-person-star-3">
+          <div class="_hm-person-star-3-1"></div>
+          <div class="_hm-person-star-3-2"></div>
+        </div>
+        <div class="_hm-person-star-4">
+          <div class="_hm-person-star-4-1"></div>
+          <div class="_hm-person-star-4-2"></div>
+        </div>
+        <div class="_hm-person-star-5">
+          <div class="_hm-person-star-5-1"></div>
+          <div class="_hm-person-star-5-2"></div>
+        </div>
+        <div class="_hm-person-star-6"></div>
+        <div class="_hm-person-star-7"></div>
+        <div class="_hm-person-star-8"></div>
+        <div class="_hm-person-star-9"></div>
+        <div class="_hm-person-star-10"></div>
+        <div class="_hm-person-star-11"></div>
+        <div class="_hm-person-star-12"></div>
+        <div class="_hm-person-star-13"></div>
+        <div class="_hm-person-star-14"></div>
+        <div class="_hm-person-star-15"></div>
+        <div class="_hm-person-star-16"></div>
+        <div class="_hm-person-star-17"></div>
+        <div class="_hm-person-star-18"></div>
+        <div class="_hm-person-star-19"></div>
+        <div class="_hm-person-star-20"></div>
+        <div class="_hm-person-star-21"></div>
+        <div class="_hm-person-star-22"></div>
+        <div class="_hm-person-star-23"></div>
+        <div class="_hm-person-star-24"></div>
+        <div class="_hm-person-star-25"></div>
+        <div class="_hm-person-star-26"></div>
+        <div class="_hm-person-star-27"></div>
+        <div class="_hm-person-star-28"></div>
+      </div>
+      <div class="ui container _hm-container" style="position:absolute;left:50%;bottom:0;height:0;transform:translate(-50%);z-index:11">
+        <div class="_hm-bubble-c _hm-ani-bubble-c">
+          <div class="bubble _hm-bubble-1 _hm-bounce-in-up"></div>
+          <div class="bubble _hm-bubble-2 _hm-bounce-in-up"></div>
+          <div class="bubble _hm-bubble-3 _hm-bounce-in-up"></div>
+        </div>
+        <div id="homenews">
+          <p style="display:none;">* {{.page_only_dynamic}}</p>
+          <div class="ui grid">
+            <div class="sixteen wide mobile twelve wide tablet wide computer column homenews">
+              <div class="newslist">
+                <div class="ui mini aligned list swiper-wrapper" id="newmessage"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="_hm-txt-content-c">
+        <div class="_hm-big-txt-1">
+          <div class="_hm-big-title" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.page_title"}}</div>
+          <div class="_hm-big-descr">{{.i18n.Tr "home.page_description"}}</div>
+        </div>
+        <div class="_hm-big-btn-c">
+          <a href="https://git.openi.org.cn/zeizei/OpenI_Learning">
+            <div class="_hm-big-btn-2">
+              <svg xmlns="http://www.w3.org/2000/svg" style="margin-right:8px;margin-top:-2px;" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon fill" viewBox="0 0 32 32" width="16" height="16"><defs data-reactroot=""></defs><g><path fill="rgb(255, 255, 255)" d="M2.667 5.324c0.005-0.729 0.594-1.318 1.322-1.324h24.022c0.731 0 1.323 0.593 1.323 1.324v21.352c-0.005 0.729-0.594 1.318-1.322 1.324h-24.022c-0.731-0.001-1.323-0.593-1.323-1.324v0-21.352zM14.667 6.667h-9.333v18.667h9.333v-18.667zM17.333 6.667v18.667h9.333v-18.667h-9.333zM18.667 9.333h6.667v2.667h-6.667v-2.667zM18.667 13.333h6.667v2.667h-6.667v-2.667z"></path></g></svg>
+              {{.i18n.Tr "custom.Platform_Tutorial"}}
+            </div>
+          </a>
+          <a href="/resource_desc">
+            <div class="_hm-big-btn-2">
+              <svg xmlns="http://www.w3.org/2000/svg" style="margin-right:8px;margin-top:-2px;" class="styles__StyledSVGIconPathComponent-sc-16fsqc8-0 fPsHiw svg-icon-path-icon fill" viewBox="0 0 32 32" width="16" height="16"><defs data-reactroot=""></defs><g><path fill="rgb(255, 255, 255)" d="M16 29.333c-7.364 0-13.333-5.969-13.333-13.333s5.969-13.333 13.333-13.333 13.333 5.969 13.333 13.333-5.969 13.333-13.333 13.333zM12.947 26.223c-1.254-2.597-2.063-5.628-2.241-8.827l-0.003-0.062h-5.287c0.551 4.238 3.518 7.661 7.455 8.869l0.076 0.020zM13.373 17.333c0.201 3.252 1.131 6.307 2.627 9.003 1.469-2.597 2.418-5.669 2.624-8.941l0.003-0.061h-5.253zM26.584 17.333h-5.287c-0.181 3.261-0.99 6.292-2.306 9.033l0.062-0.143c4.012-1.229 6.98-4.651 7.525-8.836l0.006-0.054zM5.416 14.667h5.287c0.181-3.261 0.99-6.292 2.306-9.033l-0.062 0.143c-4.012 1.229-6.98 4.652-7.525 8.836l-0.006 0.054zM13.375 14.667h5.251c-0.209-3.334-1.157-6.405-2.68-9.109l0.055 0.106c-1.469 2.597-2.418 5.669-2.624 8.941l-0.003 0.061zM19.053 5.777c1.254 2.597 2.063 5.628 2.241 8.827l0.003 0.062h5.287c-0.551-4.238-3.518-7.661-7.455-8.869l-0.076-0.020z"></path></g></svg>
+              {{.i18n.Tr "custom.resource_description"}}
+            </div>
+          </a>
+        </div>
+        <div class="_hm-big-btn-c">
+          <a href="{{if .IsSigned}}/dashboard{{else}}/user/login{{end}}">
+            <div class="_hm-big-btn-1">
+              {{.i18n.Tr "home.page_use"}}
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <!--
+    <div class="_hm-pg _hm-pg-bg-2">
+      <div class="_hm-circle _hm-transition-common _hm-swing"></div>
+      <div class="_hm-up-arr-c">
+        <div class="_hm-up-arr _hm-up-arr-1 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-1">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-1"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-2 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-2">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-2"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-3 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-3">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-3"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-4 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-4">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-4"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-5 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-5">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-5"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-6 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-6">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-6"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-7 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-7">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-7"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-8 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-8">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-8"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-9 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-9">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-9"></div>
+        </div>
+        <div class="_hm-up-arr _hm-up-arr-10 _hm-slide-up">
+          <div class="_hm-arr-triangle-c _hm-arr-triangle-10">
+            <div class="_hm-arr-triangle">
+              <div class="_hm-arr-triangle-l"></div>
+              <div class="_hm-arr-triangle-r"></div>
+            </div>
+          </div>
+          <div class="_hm-arr-rect _hm-arr-rect-10"></div>
+        </div>
+      </div>
+      <div class="_hm-txt-content-c">
+        <div class="_hm-big-txt-2">
+          <div class="_hm-big-title" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.c2net_title"}}</div>
+          <div class="_hm-big-descr">{{.i18n.Tr "home.c2net_desc" }}</div>
+        </div>
+        <div class="_hm-big-btn-c">
+          <div class="_hm-big-btn-1">
+            <a href="{{if .IsSigned}}/dashboard{{else}}/user/login{{end}}">{{.i18n.Tr "home.page_use"}}</a>        
+          </div>
+          <div>
+            <div class="_hm-big-btn-3">
+              <a href="/resource_desc">{{.i18n.Tr "custom.resource_description"}}</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    -->
+    <div class="_hm-pg _hm-pg-bg-3 {{if ne $.Lang "zh-CN"}}_hm-pg-bg-3-en{{end}}">
+      <div class="_hm-txt-content-c">
+        <div class="_hm-big-txt-2">
+          <div class="_hm-big-title" style="animation:_hm-slide-in-left-once 0.5s">{{.i18n.Tr "home.c2net_title"}}</div>
+          <div class="_hm-big-descr">{{.i18n.Tr "home.c2net_desc" }}
+            <a target="_blank;" href="https://openi.org.cn/html/2022/openi-o_0623/646.html" style="margin-left:4px;font-size:18px;color:white;">
+              <div style="display:inline-block;">
+                <span style="border-bottom:2px solid white;">{{.i18n.Tr "home.vedio_detail"}}</span>
+                <i style="vertical-align:bottom;" class="ri-play-circle-line"></i>
+              </div>
+            </a>
+          </div>
+        </div>
+        <div class="_hm-big-btn-c"></div>
+      </div>
+    </div>
+  </div>
+  <div class="_hm-slide-btn _hm-slide-btn-left"></div>
+  <div class="_hm-slide-btn _hm-slide-btn-right"></div>
+</div>
+<div class="ui container _hm-container">
+  <div class="_hm-recommend-info ">
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-1 mobile-margin-left-20" style="margin-left:0">
+      <div>
+        <a style="display:none;" class="_hm-notice" href="javascript:;">
+          <i class="ri-arrow-right-s-line"></i>
+          <span></span>
+        </a>
+      </div>
+      <div>
+        <a style="display:none;" class="_hm-notice" href="javascript:;">
+          <i class="ri-arrow-right-s-line"></i>
+          <span></span>
+        </a>
+      </div>
+      <div>
+        <a style="display:none;" class="_hm-notice" href="javascript:;">
+          <i class="ri-arrow-right-s-line"></i>
+          <span></span>
+        </a>
+      </div>
+      <div style="text-align:right;">
+        <a href="/home/notice" style="border-bottom: 1px solid;display:inline-block;">
+          <span style="margin-right:2px;">{{.i18n.Tr "home.more_notice"}}</span><i class="ri-arrow-right-line"></i>
+        </a>
+      </div>
+    </div>
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-2">
+      <div class="_hm-recommend-info-area-2-bg-1"></div>
+      <div class="_hm-recommend-info-area-2-bg-2"></div>
+      <a href="javascript:;" class="_hm-link"></a>
+    </div>
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-3">
+      <a href="javascript:;" class="_hm-link"></a>
+    </div>
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-4">
+      <a href="javascript:;" class="_hm-link"></a>
+    </div>
+  </div>
+</div>

templates/custom/home/home_user_experience.tmpl

@@ -0,0 +1,133 @@
+<style>
+  .homeuserexp-bg {  
+    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.04900000000000009%2C%201.104%2C%20-0.06118479166666667%2C%200.04900000000000009%2C%200.339%2C%20-0.107)%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.33%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e5e7eb%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
+  }
+  .homeuserexp {
+    padding-top: 5em;
+    padding-bottom: 2em;
+  }
+
+  .homeuserexp .swiper-prev {
+    position: absolute;
+    top: 104px;
+    left: 14px;
+    z-index: 10;
+  }
+
+  .homeuserexp .swiper-next {
+    position: absolute;
+    top: 104px;
+    right: 14px;
+    z-index: 10;
+  }
+  
+  .homeuserexp .prev-next-i {    
+    font-size: 22px;
+    border: 1px solid rgb(0, 122, 255);
+    border-radius: 100%;
+    color: rgb(0, 122, 255);
+    cursor: pointer;
+  }
+  
+  .homeuserexp .swiper-prev.swiper-button-disabled .prev-next-i, .homeuserexp .swiper-next.swiper-button-disabled .prev-next-i {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  .home-user-exp-list {    
+    position: relative;
+    z-index: 9;
+    padding: 0em 1.2em 3em 1.2em;
+    overflow: hidden;
+  }
+
+  .home-user-exp-list .user-card {
+    width: 240px;
+    height: 180px;    
+    color: rgb(16, 16, 16);
+    border-radius: 6px;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+  
+  .home-user-exp-list .swiper-slide {
+    display: flex;
+    justify-content: center;
+  }
+
+  .home-user-exp-list .user-card>div {
+    width:100%;
+    display: flex;   
+    justify-content: center;
+  }
+
+  .home-user-exp-list .user-card .content {
+    width:100%;   
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    padding: 0 10px;
+  }
+
+  .home-user-exp-list .user-card .img-c {   
+    font-size: 14px;
+    color: #101010;
+    display:flex;
+    justify-content: center;
+    align-items: center;   
+    height: 74px;
+    margin-bottom: 8px;
+  }
+
+  .home-user-exp-list .user-card .img {
+    border: 3px solid rgb(243, 240, 164);
+    border-radius: 100%;    
+    box-shadow: rgb(255 220 144) 0px 0px 0px 2px;
+    height: 60px;
+    width: 60px;
+    display: block;
+    background-size:cover;
+  }
+
+  .home-user-exp-list .user-card .label {
+    font-size: 14px;
+    color: #101010;
+    margin-bottom: 8px;
+    font-weight: 550;
+  }
+
+  .home-user-exp-list .user-card .descr {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    font-size:12px;
+    color:rgb(136,136,136);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-height: 50px;
+    white-space: break-spaces;
+  }
+</style>
+<div class="homeuserexp-bg">
+  <div class="ui container homeuserexp _hm-container">
+    <div class="ui stackable grid">
+      <div class="sixteen wide tablet four wide computer column mobile-text-align-center">
+        <h2>{{.i18n.Tr "home.experience_officer"}}</h2>
+        <p><a href="https://openi.org.cn/index.php?m=content&c=index&a=lists&catid=220">{{.i18n.Tr "home.openi_experience_officer_plan"}}</a><span class="ui text grey">{{.i18n.Tr "home.more_benefits"}}</span></p>
+      </div>
+      <div class="sixteen wide tablet twelve wide computer column">      
+        <div class="home-user-exp-list">
+          <div class="swiper-wrapper" id="home_user-exp"></div>
+          <div style="display:none;" class="swiper-button-prev"></div>
+          <div style="display:none;" class="swiper-button-next"></div>
+        </div>
+        <div class="swiper-prev"><i class="ri-arrow-left-line prev-next-i"></i></div>
+        <div class="swiper-next"><i class="ri-arrow-right-line prev-next-i"></i></div>
+      </div>
+    </div>        
+  </div>
+</div>

templates/explore/repos.tmpl

@@ -1,9 +1,7 @@
-{{template "base/head_pro" .}}
+{{template "base/head_home" .}}
 <div class="explore repositories">
-
 	{{template "explore/repo_search" .}}
 	{{template "explore/repo_orgtop" .}}
-	
 	<div class="ui container">
 		<div class="ui grid">
 			{{template "explore/repo_left" .}}

templates/home.tmpl

@@ -1,91 +1,25 @@
 {{template "base/head_home" .}}
-    <div class="ui vertical masthead secondary hometop segment">
-        <div class="ui container" style="position: relative;">            
-            <div class="ui center homebanner">
-                <h1 class="ui huge header">
-                    {{.page_title}}
-                    <div class="sub header">
-                        {{.page_small_title}}
-                    </div>
-                </h1>
-                <p class="ui am-lh-18">{{.page_description}}</p>
-                
-                {{if .IsSigned}}
-                <a class="circular huge ui secondary button" href="{{AppSubUrl}}/dashboard">{{.page_use}} <i class="right arrow icon"></i></a>
-                {{else}}
-                <a class="circular huge ui secondary button" href="{{AppSubUrl}}/user/login">{{.page_use}} <i class="right arrow icon"></i></a>
-                {{end}}
-            </div>
-            <div class="bannerpic"><img class="ui fluid image" src="/img/gitopeni-index-01.svg"></div>
-            <div id="homenews">
-                <p>* {{.page_only_dynamic}}</p>
-                <div class="ui grid">
-                    <div class="sixteen wide mobile twelve wide tablet ten wide computer column homenews">
-                        <div class="newslist">
-                            <div class="ui mini aligned list swiper-wrapper" id="newmessage">
-                                
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div><!-- end homenews -->
-            
-        </div>
-    </div><!-- end segment -->
+    <div class="ui vertical masthead secondary hometop segment" style="background:transparent;margin-bottom:0">
+        {{template "custom/home/home_top" .}}
+    </div>
 
     <!--组织-->
-    <div class="ui container homeorg">
-        <div class="ui stackable grid"> 
-            <div class="sixteen wide tablet four wide computer column homeorg-tit">
-                <h2>{{.page_recommend_org}}</h2>
-                <p><span class="ui text grey">{{.page_recommend_org_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{.page_recommend_org_commit}}</a></p>
-                <a href="{{AppSubUrl}}/explore/organizations" class="circular ui primary basic button">{{.page_recommend_org_more}} <i class="arrow circle right icon"></i></a>
-            </div>
-            <div class="sixteen wide tablet twelve wide computer column">
-                <div class="homeorg-list">
-                    <div class="swiper-wrapper" id="recommendorg">
-                        
-                    </div>
-                    <div class="swiper-pagination"></div>
-                    
-                </div>
-            </div>
+    {{template "custom/home/home_org" .}}
 
-            <div class="sixteen wide tablet four wide computer column homeorg-tit">
-                <h2>{{.page_recommend_activity}}</h2>
-                <p><span class="ui text grey">{{.page_recommend_activity_desc}}</p>
-            </div>
-            <div class="sixteen wide tablet twelve wide computer column">
-                <div class="event-list">
-                    <div class="swiper-wrapper" id="recommendactivity">                    
-                        
-                    </div>
-                    <div class="swiper-pagination"></div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="leftline01"></div>
-    </div>
-    
-    <!--项目-->
-    <div class="ui container homepro">
-        <div class="leftline02"></div>
-        <div class="leftline02-2"></div>
-        <div class="ui center homepro-tit am-mb-20">
-            <h2>{{.page_recommend_repo}}</h2>
-            <p><span class="ui text grey">{{.page_recommend_repo_desc}}&nbsp;</span><a href="{{.RecommendURL}}">{{.page_recommend_repo_commit}}</a>{{.page_recommend_repo_go}}&nbsp;<a href="{{AppSubUrl}}/explore/">{{.page_recommend_repo_more}}</a></p>
-        </div>
+    <!-- 项目 -->
+    {{template "custom/home/home_repo" .}}
 
-        <div class="homepro-list">				
-            <div class="swiper-wrapper" id="recommendrepo">
-                   
-            </div>
-            <div class="swiper-pagination"></div>
-        </div>
-        
-    </div>
+    <!-- 数据集 -->
+    {{template "custom/home/home_dataset" .}}
+
+    <!-- 体验官 -->
+    {{template "custom/home/home_user_experience" .}}
 
+    <!-- 社区活动 -->
+    {{template "custom/home/home_activity" .}}
+   
+
+    <!-- 中国算力网(C²NET) -->
     <div class="ui vertical masthead secondary c2net segment">
         <div class="ui container">
             <div class="ui center am-pt-30 am-pb-30">
@@ -136,11 +70,11 @@
                 </div>
             </div><!--rotation3D end--> 
         </div>
-    </div>
+    </div>    
 
+    <!-- 协同开发环境 -->
     <a name="fourth"></a>
-    <div class="ui container i-env">
-        
+    <div class="ui container i-env _hm-container" style="padding-bottom:0rem;padding-top:4rem;">
         <div class="ui center am-pb-30">
             <h2>{{.page_dev_env}}</h2>
             <p><span class="ui text grey">{{.page_dev_env_desc}}</p>
@@ -193,8 +127,10 @@
         </div>
     </div>
 
+    <!-- 启智AI协作平台 介绍 -->
+    <!--    
     <a name="fifth"></a>
-    <div class="ui container">
+    <div class="ui container _hm-container">
         <div class="ui very padded inverted segment radius15">
             <div class="ui stackable grid">
                 <div class="six wide column">
@@ -221,7 +157,9 @@
             </div>
         </div>
     </div>
-    <div class="am-mt-30"></div>
+    -->
+
+    <!-- <div class="am-mt-30"></div> -->
     <script src="/self/js/jquery.min.js" type="text/javascript"></script>	
     <script src="/home/home.js?v={{MD5 AppVer}}" type="text/javascript"></script>
 

templates/notice.tmpl

@@ -0,0 +1,81 @@
+
+{{template "base/head_home" .}}
+<style>
+  .notice-container {
+  
+  }
+  .notice-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 52px;
+    border-bottom: 1px solid rgba(157, 197, 226, 0.2);
+    padding: 0 16px;
+  }
+  .notice-title {
+    flex: 1;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .notice-title a {    
+    font-size: 16px;
+    color: rgb(16, 16, 16);
+  }
+  .notice-title a:hover {
+    opacity: 0.8;
+  }
+  .notice-time {
+    width: 150px;
+    text-align: right;    
+    font-size: 14px;
+    color: rgba(16, 16, 16, 0.6);
+  }
+</style>
+<div class="ui container">
+  <h3 class="ui center am-pt-30 am-pb-20">{{.i18n.Tr "notice_announcement"}}</h3>
+  <div class="notice-container">
+  </div>
+</div>
+{{template "base/footer" .}}
+<script>
+  ;(function() {    
+    var isZh = document.documentElement.getAttribute('lang') == 'zh-CN';
+    function getNotice() {
+      $.ajax({
+        type:"GET",
+        url:"/dashboard/invitation",
+        dataType:"json",
+        data: {
+          filename: 'notice/notice.json',
+        },
+        success:function(data){
+          if (!data) return;
+          try {
+            var noticeList = JSON.parse(data).Notices || [];
+            var noticeEl = $('.notice-container');
+            for (var i = 0, iLen = noticeList.length; i < iLen; i++) {              
+              var noticeObj = noticeList[i];
+              noticeEl.append(`<div class="notice-row">
+                <div class="notice-title">
+                   <a class="_hm-notice" href="${noticeObj.Link}">
+                    <i class="ri-arrow-right-s-line" style="vertical-align:-2px;"></i>
+                    <span>${isZh ? noticeObj.Title : (noticeObj.Title_en || noticeObj.Title)}</span>
+                  </a>
+                </div>
+                <div class="notice-time">${noticeObj.Date || ''}</div>
+              </div>`);              
+            }
+          } catch (e) {
+            console.info(e);
+          }
+        },
+        error:function(err) {
+          console.info(err);
+        }
+      });
+    }
+    getNotice();
+  })();
+</script>

templates/repo/modelsafety/new.tmpl

@@ -217,7 +217,9 @@
                                         {{end}}
                                     {{else}}
                                         {{range .engine_versions}}
-                                            <option value="{{.ID}}">{{.Value}}</option>
+                                            {{if not (eq .ID -1)}}
+                                                <option value="{{.ID}}">{{.Value}}</option>
+                                            {{end}}
                                         {{end}}
                                     {{end}}
                                 </select>

web_src/js/features/i18nVue.js

@@ -108,6 +108,8 @@ export const i18nVue = {
     local:"本地",
     online:"线上",
     modify:"修改",
+    about:"约",
+    count:"个",
   },
   US: {
     computer_vision: "computer vision",
@@ -222,5 +224,7 @@ export const i18nVue = {
     local:"Local",
     online:"Online",
     modify:"Modify",
+    about:"About",
+    count:"",
   },
 };

web_src/js/index.js

@@ -5207,4 +5207,22 @@ Fancybox.bind('.gallery img', {
   // Custom animations
   showClass: "fancybox-zoomIn",
   hideClass: "fancybox-zoomOut",
-});
+});
+
+function initTopToHome() {
+  const topToHomeEl = $('.__go-top');
+  $(window).scroll(function (e) {
+    const scrollTop = $(document).scrollTop();
+    const winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+    if (scrollTop > winHeight * 1.2) {
+      topToHomeEl.fadeIn();
+    } else {
+      topToHomeEl.fadeOut();
+    }
+  });
+  topToHomeEl.on('click', function() {
+    $('html').animate({ scrollTop: 0 }, 'slow', 'swing');
+  });
+}
+
+initTopToHome();

web_src/less/openi.less

@@ -34,7 +34,7 @@ a {
 }
 
 .following.bar.dark {
-    background-color: #363840;
+    background-color: rgb(16, 16, 16);
 }
 .ui.secondary.menu.dark .item {
     color: #fff;
@@ -94,7 +94,7 @@ footer {
 }
 @media only screen and (min-width: 1600px) {
     .ui.ui.ui.container:not(.fluid) {
-        width: 1200px;
+        width: 1440px;
     }
 }
 

web_src/vuepages/pages/modelmanage/common/modelmanage-common-detail.vue

@@ -339,7 +339,7 @@ export default {
           bootFile: trainTaskInfo.BootFile,
           datasetName: trainTaskInfo.DatasetName,
           parameters: parametersStr || '--',
-          workServerNumber: trainTaskInfo.WorkServerNumber || '--',
+          workServerNumber: trainTaskInfo.WorkServerNumber || '1',
           specStr: sepcStr || '--',
         });
       }