IROS 2025

<!DOCTYPE html> <html lang="UTF-8"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IROS 2025</title> <meta name="description" content="IROS 2025"> <meta name="keywords" content="IROS,IROS 2025"> <link href="/templates/iros2025/static/css/bootstrap.min.css" rel="stylesheet"> <link href="/templates/iros2025/static/css/base.css" rel="stylesheet"> <link href="/templates/iros2025/static/css/main.css" rel="stylesheet"> <link href="/templates/iros2025/static/css/animate.css" rel="stylesheet"> <link href="/templates/iros2025/static/css/style.css" rel="stylesheet" type="text/css"> <link href="/templates/iros2025/static/css/style1200.css" rel="stylesheet" type="text/css"> <link href="/templates/iros2025/static/css/style480.css" rel="stylesheet" type="text/css"> <link href="/templates/iros2025/static/css/footer.css" rel="stylesheet" type="text/css"> <link href="/templates/iros2025/static/css/favicon.ico" rel="shortcut icon" > <link href="/templates/iros2025/static/css/swiper.min.css" rel="stylesheet" >  <link href="/templates/iros2025/static/css/tongzhi.css" type="text/css" rel="stylesheet">   <script src="/templates/iros2025/static/js/swiper.min.js"></script> <script src="/templates/iros2025/static/js/jquery.js"></script> <script src="/templates/iros2025/static/js/bootstrap.js"></script> <script src="/templates/iros2025/static/js/bootstrap.min.js"></script> <script src="/templates/iros2025/static/js/main.js"></script> <script src="/templates/iros2025/static/js/banner.js" type="text/javascript" ></script> <script src="/templates/iros2025/static/js/gotop.js" type="text/javascript"></script> <style type="text/css"> /* 文字过多时，一行显示不下， */ .textline{ display:block;overflow:hidden;word-break:keep-all; white-space:nowrap;text-overflow:ellipsis; } </style> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d47cb7c1b2200e13c65bb1609a2b6f99"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </head> <body>    <div class="banner mar-bottom"> <style type="text/css"> /* Header 样式 */ .header { position: fixed; top: 0; left: 0; z-index: 8000; width: 100%; height: 80px; /* 固定高度 */ display: flex; align-items: center; transition: 0.4s; /* 默认情况下显示header */ display: block; } /* 在小屏幕上隐藏header */ @media (max-width: 768px) { .header { display: none; /* 隐藏header */ } } /* Media Query for smaller screens */ @media screen and (max-width: 1520px) { .header .box .boxRight pcnav .item { padding: 0 0.1rem; } } /* 导航栏（nav）样式 */ pcnav { display: flex; justify-content: center; /* 居中对齐 .item 元素 */ flex-wrap: wrap; gap: 1rem; /* 添加.item之间的间距 */ height: 100%; } /* 导航项（.item）样式 */ .header .box .boxRight pcnav .item { height: 100%; /* 使.item元素高度与父级相同 */ display: flex; align-items: center; /* 垂直居中对齐内容 */ /*justify-content: center; *//* 水平居中对齐内容 */ justify-content: flex-end; /*padding: 0 1rem; *//* 增加左右内边距 */ margin: 0; /* 移除外边距以避免不必要的间距 */ position: relative; font-weight: bold; /* 加粗.item中的文本 */ transition: color 0.3s; /* 平滑过渡效果 */ } /* 链接（a标签）样式 */ .header .box .boxRight pcnav .item a { display: flex; align-items: center; justify-content: center; height: 100%; /* 使a标签高度与父级相同 */ padding: 0 1rem; /* 保留内边距以确保文本不紧贴边缘 */ color: #1E5597; /* 默认字体颜色 */ text-decoration: none; /* 移除默认的下划线 */ transition: color 0.3s; /* 平滑过渡效果 */ height: 100%; } /* 当前页面的导航项高亮 */ .header .box .boxRight pcnav .item.active a { color: #1E5597; /* 当前页面的字体颜色 */ /*border-bottom: 2px solid #E60012;*/ /* 添加下划线 */ } /* 鼠标悬停时的字体颜色变为白色 */ .header .box .boxRight pcnav .item a:hover { color: white; /* 鼠标悬停时字体颜色变为白色 */ background-color: rgba(30, 85, 151, 0.7); /* 藏蓝色加30%透明度 */ } /* 容器（.w1400）样式 */ .w1400 { /*padding-left: var(--padd_vw, 1rem);*/ /*padding-right: var(--padd_vw, 1rem);*/ box-sizing: border-box; /*width: 80%;*/ width: 1200px; /*max-width: 80%;*/ /* 设置最大宽度，防止过大 */ margin: 0 auto; /* 水平居中 */ display: flex; justify-content: flex-end; /* 确保子元素水平居中 */ align-items: center; /* 确保子元素垂直居中 */ height: 100%; } /* 内容容器（.box）样式 */ .box { display: flex; justify-content: space-between; /* 子元素之间均匀分布 */ align-items: center; /* 确保子元素垂直居中 */ width: 100%; /* 占满父容器的宽度 */ height: 100%; } /* 左侧内容（.boxLeft）样式 */ .header .box .boxLeft { display: flex; align-items: flex-start; padding-top: 5px; height: 100%; } /* Logo 样式 */ .header .box .boxLeft a { position: relative; display: flex; align-items: center; /* 确保Logo和其他元素垂直居中 */ } .header .box .boxLeft a img.img1 { height: 80px; /* 调整Logo的高度 */ /*height: 80%; /* 让图片高度100%填充父级容器 */ width: 100%; /* 让图片宽度100%填充父级容器 */ object-fit: cover; /* 裁剪图片以覆盖整个区域 */ transition: 0.4s; margin-right: 1rem; } /* 右侧内容（.boxRight）样式 */ .header .box .boxRight { display: flex; justify-content: flex-end; /* 居中对齐.nav */ align-items: center; /* 垂直居中对齐 */ flex-grow: 1; /* 让.boxRight占据剩余空间 */ height: 40px } /* 下拉菜单样式 */ .header .box .boxRight pcnav .item ul { display: block; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; position: absolute; top: 100%; left: 0; background-color: rgba(30, 85, 151, 0.7); /* 藏蓝色加30%透明度 */ list-style: none; padding: 0; margin: 0; min-width: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */ border-radius: 0 0 4px 4px; /* 圆角效果 */ text-align: left; /* 文字左对齐 */ } /* 下拉菜单项的动画样式 */ .header .box .boxRight pcnav .item ul li { padding: 1rem 1rem; /* 减少左右内边距 */ min-width: 200px; /* 设置最小宽度 */ text-align: left !important; /* 强制左对齐 */ white-space: nowrap; /* 防止文本换行 */ border-bottom: 1px solid #f0f0f0; /* 添加分隔线 */ position: relative; transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */ font-weight: bold; /* 加粗<li>中的文本 */ height: 100%; color: white !important; /* 强制文字颜色为白色 */ opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } /* 鼠标悬停时的样式 */ .header .box .boxRight pcnav .item ul li:hover { color: #1E5597 !important;/*color: white;*/ /* 改变字体颜色 */ background-color: #f0f0f0 !important; /* 可选：添加背景色 */ } /* 确保下拉菜单中的链接也遵循同样的文本颜色和内边距 */ .header .box .boxRight pcnav .item ul li a { color: white !important; /* 强制链接文字颜色为白色 */ display: block; /* 确保链接占据整个<li>的宽度和高度 */ padding: 1rem 1rem; /* 保持与<li>一致的内边距 */ } .header .box .boxRight pcnav .item ul li a { color: white !important; /* 强制链接文字颜色为白色 */ display: block; /* 确保链接占据整个<li>的宽度和高度 */ width: 100%; /* 填满父元素宽度 */ padding: 1rem 1rem; /* 保持与<li>一致的内边距 */ padding-left: 1rem; /* 将文字向右移动1rem */ box-sizing: border-box; /* 确保内边距不会影响总宽度 */ } .header .box .boxRight pcnav .item ul li a:hover { color: #1E5597 !important; /* 强制链接文字颜色为白色 */ background-color: #f0f0f0; display: block; /* 确保链接占据整个<li>的宽度和高度 */ padding: 1rem 1rem; /* 保持与<li>一致的内边距 */ } /* 使 <a> 标签填满 <li> 标签 */ .header .box .boxRight pcnav .item ul li { padding: 0; /* 移除内边距 */ margin: 0; /* 移除外边距 */ } .header .box .boxRight pcnav .item ul li a { display: block; /* 使 <a> 填满 <li> */ width: 100%; /* 确保占满宽度 */ height: 100%; /* 确保占满高度 */ padding: 1rem 1rem; /* 根据需要调整内边距 */ box-sizing: border-box; /* 确保内边距不会影响总宽度 */ color: white; /* 设置字体颜色 */ text-decoration: none; /* 移除下划线 */ } /* 鼠标悬停时的样式 */ .header .box .boxRight pcnav .item ul li a:hover { color: #1E5597; /* 悬停时改变字体颜色 */ background-color: #f0f0f0; /* 悬停时改变背景颜色 */ } /* 移除最后一个<li>的分隔线 */ .header .box .boxRight nav .item ul li:last-child { border-bottom: none; } /* 响应式设计 */ @media (max-width: 768px) { .header .box .boxRight pcnav { flex-direction: column; /* 切换为垂直排列 */ align-items: center; /* 水平居中对齐 */ } .header .box .boxRight pcnav .item { margin: 0.5rem 0; /* 调整上下间距 */ padding: 0 1rem; /* 保持左右内边距 */ } .header .box .boxRight pcnav .item ul li { padding: 0.5rem 1rem; /* 减少内边距以适应较小屏幕 */ min-width: 100%; /* 占满整个宽度 */ white-space: normal; /* 允许文本换行 */ border-right: none; /* 移除分隔线 */ border-bottom: 1px solid #ccc; /* 在小屏幕上使用底部分隔线 */ } .header .box .boxRight pcnav .item ul li:hover { font-size: 1.1rem; /* 小屏幕上字体增大的幅度可以适当减小 */ } } /* 为每个li添加递增的延迟 */ .header .box .boxRight pcnav .item:hover ul li:nth-child(1) { transition-delay: 0.1s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(2) { transition-delay: 0.2s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(3) { transition-delay: 0.3s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(4) { transition-delay: 0.4s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(5) { transition-delay: 0.5s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(6) { transition-delay: 0.6s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(7) { transition-delay: 0.7s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(8) { transition-delay: 0.8s; } .header .box .boxRight pcnav .item:hover ul li:nth-child(9) { transition-delay: 0.9s; } /* 悬停时显示菜单 */ .header .box .boxRight pcnav .item:hover ul { opacity: 1; visibility: visible; transform: translateY(0); } /* 悬停时显示菜单项 */ .header .box .boxRight pcnav .item:hover ul li { opacity: 1; transform: translateY(0); } </style>  <header class="header"> <div class="w1400"> <div class="box flexBetween"> <div class="boxLeft"> <a href="/"> <img src="/templates/iros2025/static/images/logo.png" alt="Logo" class="img1"> </a> </div> <div class="boxRight flexBetween"> <pcnav> <div class="item active"> <a href="/">Home</a> </div> <div class="item"> <a>About</a> <ul> <li><a href="/FullContact">Full Contact</a></li> <li><a href="/OCMembers">Committee</a></li> </ul> </div> <div class="item"> <a href="/Program">Program</a> <ul> </ul> </div> <div class="item"> <a>Contribute</a> <ul> <li><a href="/CallForPapersv2">Call For Papers</a></li> <li><a href="/CFC">Call For Competitions</a></li> <li><a href="/CallForWorkshopsTutorials">Call For Workshops / Tutorials</a></li> <li><a href="/callforlatebreakingresults">Call For Late Breaking Results</a></li> <li><a href="/callforspecialforums">Call For Special Forums</a></li> </ul> </div> <div class="item"> <a>Attend</a> <ul> <li><a href="/Visa">Visa</a></li> <li><a href="/Transportation">Transportation</a></li> <li><a href="/conferencevenue">Conference Venue</a></li> <li><a href="/Accomodation">Accommodation</a></li> <li><a href="/LocalFeatures">Local Features</a></li> <li><a href="/UsefulInfo">Useful Info</a></li> </ul> </div> <div class="item"> <a>Partners</a> <ul> <li><a href="/sponsorsandexhibitors">Sponsors & Exhibitors</a></li> <li><a href="/PartnersSponsors">Join Us</a></li> </ul> </div> </pcnav> </div> </div> </div> </header>   <style type="text/css"> /* 默认情况下隐藏.navbar-inverse */ .nav.navbar-inverse { display: none; /* 隐藏在大屏幕上 */ } /* 在小屏幕上显示.navbar-inverse */ @media (max-width: 768px) { .nav.navbar-inverse { display: block;/* 显示在小屏幕上 */ } .navbar-inverse .navbar-toggle { border-color: #2F5597 !important; background-color: #2F5597 !important; /* padding: 8px; */ } } </style> <div class="nav navbar-inverse"> <div class="container"> <div class="navbar-header"> <div class="nav-logo"> <img alt="logo" src="/templates/iros2025/static/images/logomini.png"> </div> <button class="navbar-toggle" data-toggle="collapse" data-target=".nav-bar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="ph-menu-wrapper"> <ul class="ph-menu-list"> <li><a href="/">HOME</a></li> <li> <div class="ph-menu-seclink"> <span class="ph-menu-seclinka">About</span> <span class="head-icon"></span> </div> <div class="ph-menu-thirdlist"> <a href="/FullContact">Full Contact</a> <a href="/OCMembers">Committee</a> </div> </li> <li> <div class="ph-menu-seclink"> <a class="ph-menu-seclinka" href="/Program">Program</a> </div> </li> <li> <div class="ph-menu-seclink"> <span class="ph-menu-seclinka">Contribute</span> <span class="head-icon"></span> </div> <div class="ph-menu-thirdlist"> <a href="/CallForPapersv2">Call For Papers</a> <a href="/CFC">Call For Competitions</a> <a href="/CallForWorkshopsTutorials">Call For Workshops / Tutorials</a> <a href="/callforlatebreakingresults">Call For Late Breaking Results</a> <a href="/callforspecialforums">Call For Special Forums</a> </div> </li> <li> <div class="ph-menu-seclink"> <span class="ph-menu-seclinka">Attend</span> <span class="head-icon"></span> </div> <div class="ph-menu-thirdlist"> <a href="/Visa">Visa</a> <a href="/Transportation">Transportation</a> <a href="/conferencevenue">Conference Venue</a> <a href="/Accomodation">Accommodation</a> <a href="/LocalFeatures">Local Features</a> <a href="/UsefulInfo">Useful Info</a> </div> </li> <li> <div class="ph-menu-seclink"> <span class="ph-menu-seclinka">Partners</span> <span class="head-icon"></span> </div> <div class="ph-menu-thirdlist"> <a href="/sponsorsandexhibitors">Sponsors & Exhibitors</a> <a href="/PartnersSponsors">Join Us</a> </div> </li> </ul> </div> </div> </div>   <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { var prevScrollPos = window.pageYOffset; var header = document.querySelector('.header'); var hideHeader = false; window.addEventListener('scroll', function() { var currentScrollPos = window.pageYOffset; if (currentScrollPos === 0) { // 页面滚动到顶部 if (hideHeader) { header.style.transform = 'translateY(0)'; hideHeader = false; } } else if (prevScrollPos > currentScrollPos) { // 向上滚动但未到达顶部 // 不做任何处理，保持隐藏状态 } else { // 向下滚动 if (!hideHeader && window.innerWidth > 768) { // 确保只在大屏幕应用此效果 header.style.transform = 'translateY(-100%)'; hideHeader = true; } } prevScrollPos = currentScrollPos; }); }); </script>  <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-caption"> <div class="ccap-left"> <p>IEEE/RSJ International Conference</p> <p>on Intelligent Robots and Systems</p> </div> <div class="ccap-mid"></div> <div class="ccap-right"> <p>19 – 25 October, 2025</p> <p>Hangzhou, CHINA</p> </div> </div>  <div class="item active " > <img src="/static/upload/4f523a64-7818-4af1-8289-9a68ec473b14.png" alt=""> </div> </div> </div> </div>  <style> .containerwelcome { max-width: 100%; } .iros2025 { /*filter: brightness(0.9) contrast(1.8) sepia(0) hue-rotate(30deg);*/ /*background-image: url('templates/iros2025/static/images/iros25bgpic.png');*/ /* Use the transparent PNG */ background-image: url('templates/iros2025/v2/img/iros2025HDp1.png'); background-size: cover; background-position: center; color: rgba(0, 0, 0, 0.75); /* Slightly transparent white text */ text-align: center; padding: 30px 20px 140px 20px; /* Add some padding to the sides */ min-height: 300px; /* Ensure the div covers the entire viewport height */ display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.75); /* Add a semi-transparent white layer */ /*backdrop-filter: blur(5px); *//*delete at 20241208*//* Slightly blur the background */ z-index: 1; /* 确保 header 在 countdowns 之下 */ } .iros2025 header { padding: 10px 0; width: 100%; } .containeriros25 { display: flex; width: 100%; justify-content: space-between; /* 让 event-box 之间有间距 */ margin: 20px auto 0; /* 合并 margin-top 和 margin-left/right */ flex-wrap: nowrap; flex-direction: row; gap: 20px; /* 控制 event-box 之间的间距 */ padding: 20px; /* 可选：为容器添加内边距 */ } .iros2025 h1 { margin: 0; font-size: 3em; color: #03717D; /* Set the title color */ display: inline-block; /* Ensure the h1 only wraps around the text */ position: relative; /* Ensure the ::after pseudo-element is positioned relative to the h1 */ padding-bottom: 10px; /* Add some space between the text and the underline */ } .iros2025 h1::after { content: ''; display: block; width: 100%; /* Set the underline width to 30% of the h1's text width */ height: 2px; /* Set the thickness of the underline */ background-color: black; /* Set the color of the underline */ margin-top: 10px; /* Add some space between the text and the underline */ } .iros2025 .intro { /*border-radius: 10px;*/ /*padding: 10px 20px 10px 20px;*/ max-width: 1200px; margin: 0px auto 0px auto; /*backdrop-filter: blur(10px); *//* Apply a blur effect to the background */ color: black; /* Set the text color inside .intro */ text-align: left; /* Ensure the text inside .intro is left-aligned */ padding: 0px; /* Add some padding inside the intro section */ } .iros2025 .buttons { display: flex; justify-content: center; margin: 20px 0 0px 0; width: 60%; gap: 10px; /* 子元素之间的间距 */ } .iros2025 .button { background-color: #03717D; color: white; padding: 15px 30px; text-decoration: none; font-size: 1.2em; border-radius: 20px; margin: 0 20px; } .titleiros25 { font-size: 24px; font-size: 2em; /* 调整字体大小 */ font-weight: bold; color: #03717D; margin-bottom: 0px; text-align: center; width: 100%; } /*20241221 1600 zhong 要求去掉 */ /* .titleiros25::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; margin: 10px auto; } */ .buttonwel { display: block; padding: 15px 25px; /* 将原来的 10px 20px 增加到 20px 40px */ background-color: #03717D; color: #fff; text-decoration: none; border-radius: 30px; /* 从 20px 改为 40px */ transition: background-color 0.3s, transform 0.3s; margin: 20px auto; width: fit-content; text-align: center; font-size: 1.8em; /* 调整字体大小，根据需要设置 */ } .buttonwel:hover { background-color: #002060; transform: scale(1.1); /* 按钮大小在悬停时增加10% */ color: #fff; } .mar-bottom { margin-bottom: 0px !important; /* 如果你还想保留底部间距 */ } .mar_iroswelcome { border-top: 2px solid black; /* 添加黑色的下边框 */ } .introtext { text-align: justify; word-break: keep-all; overflow-wrap: normal; font-size: 1.5em; } @media(max-width: 767px) { .iros2025 { padding: 10px 20px 10px 20px; } .titleiros25 { font-size: 1.8em; font-weight: bold; margin-bottom: 0px; text-align: center; width: 100%; } .introtext { text-align: justify; word-break: keep-all; overflow-wrap: normal; font-size: 1.2em; } .buttonwel { display: block; padding: 10px 25px; background-color: #03717D; color: #fff; text-decoration: none; border-radius: 10px; transition: background-color 0.3s, transform 0.3s; margin: 20px auto; width: fit-content; text-align: center; font-size: 1.2em; } } </style> <div class="brand brand1 mar-bottom mar_iroswelcome"> <div class="containerwelcome"> <div class="row"> <div class="iros2025"> <div class="titleiros25">Welcome to IROS 2025!</div> <section class="intro"> <br> <p class="introtext" >The 2025 IEEE/RSJ International Conference on Intelligent Robots and Systems (IROS 2025) will be held from October 19 to 25, 2025 in Hangzhou, China. Located in southeastern China, Hangzhou is a captivating tourist destination renowned for its rich history, stunning natural beauty, and vibrant cultural sophistication.</p> <br> <p class="introtext" >IROS is a large and impactful forum for the international robotics research community to explore the frontier of science and technology in intelligent robots and smart machines, emphasizing future directions and the latest approaches, designs, and outcomes. In addition to technical sessions and multi-media presentations, IROS conferences also hold panel discussions, forums, workshops, tutorials, exhibits, and technical tours to enrich the fruitful discussions among conference attendees.</p> </section>  </div> </div> </div> </div>  <div id="conference-dates"> <div class="date-section"> <div class="date-label">Paper submission</div> <div class="date-value">Mar.1, 2025</div> <div class="countdown-value" id="conference-countdown"></div> </div> <div class="date-section"> <div class="date-label">Notification of Paper Acceptance</div> <div class="date-value">Jun.30, 2025</div> <div class="countdown-value" id="submission-countdown"></div> </div> <div class="date-section"> <div class="date-label">Conference Date</div> <div class="date-value">Oct.19, 2025</div> <div class="countdown-value" id="registration-countdown"></div> </div> </div> <script> function updateCountdown(targetId, targetDate) { const now = new Date().getTime(); const distance = targetDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById(targetId).innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; if (distance < 0) { document.getElementById(targetId).innerHTML = "EXPIRED"; } } // Set up intervals for each countdown const conferenceDate = new Date("March 2, 2025 16:00:00").getTime(); const submissionDate = new Date("June 2, 2025 15:00:00").getTime(); const registrationDate = new Date("October 20, 2025 15:00:00").getTime(); const conferenceInterval = setInterval(() => updateCountdown('conference-countdown', conferenceDate), 1000); const submissionInterval = setInterval(() => updateCountdown('submission-countdown', submissionDate), 1000); const registrationInterval = setInterval(() => updateCountdown('registration-countdown', registrationDate), 1000); // Initial calls to set the countdowns immediately updateCountdown('conference-countdown', conferenceDate); updateCountdown('submission-countdown', submissionDate); updateCountdown('registration-countdown', registrationDate); </script> <br class="px-10"> <style> .containergotohz { max-width: 80%; margin: 20px auto; background-color: #fff; display: flex; flex-direction: column; gap: 20px; /* Add space between child elements */ } @media(max-width: 767px) { .containergotohz { max-width: 98%; margin: 10px auto; padding: 10px; } } .gotohzdesc { margin: 0 0 10px 0; } .containergotohz h1 { color: #006666; text-align: center; border-bottom: 1px solid #006666; padding-bottom: 10px; } .containergotohz .gotohzdesc p { text-align: justify; line-height: 1.6; } .containergotohz img { display: block; margin: 20px auto; max-width: 100%; height: auto; } .titlegotohz { font-size: 24px; font-weight: bold; color: #03717D; margin-bottom: 0px; text-align: center; } .titlegotohz::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; margin: 10px auto; } .gotohzbtn { text-align: center; } .containergotohz .hvbutton { display: inline-block; /* Changed from block to inline-block for better centering */ width: 20%; /* Set the button width to 30% */ margin: 20px 30px 10px 30px; padding: 10px 20px; background-color: #006666; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; transition: background-color 0.3s, transform 0.3s; /* Added transform transition */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better appearance */ } @media(max-width: 767px) { .containergotohz .hvbutton { width: 60%; /* Adjusted width for smaller screens */ } } /* 鼠标悬停时的样式 */ .gotohzbtn .hvbutton:hover { background-color: #002060; /* 藏蓝色的RGB值 */ transform: scale(1.1); /* 按钮大小增加10% */ } /* video left begin */ .hzvideo { background: #fff; height: 540px; overflow: hidden; width: 100%; display: flex; /* 将 .hzvideo 设置为 Flex 容器 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } @media(max-width: 767px) { .hzvideo { height: 200px; } } .tab-paddingvideo { padding: 1px 0px 0px 1px; height: 100%; /* Changed to 100% to maintain aspect ratio on all screen sizes */ width: 100%; display: flex; justify-content: center; align-items: center; } </style> <div class="brand brand1 mar-bottom"> <div class="container"> <div class="row"> <div class="containergotohz"> <div class="col-md-12 col-sm-12 hzvideo"> <div class="tab-paddingvideo"> <video id="localVideo" width="100%" controls> <source src="http://1257959732.vod-qcloud.com/127e49a3vodtranssh1257959732/1fb878881397757903503179052/v.f100040.mp4" type="video/mp4"> </video> </div> </div> <script> $(document).ready(function () { // 设置视频高度与宽度比例相同 $videoHeight = 540; $('#localVideo').height($videoHeight); // 当点击封面图片或播放按钮时播放视频并隐藏封面 $('#videoCoverWrapper').click(function() { var video = document.getElementById('localVideo'); video.play().then(function() { $('#videoCoverWrapper').hide(); }).catch(function(error) { console.error("无法播放视频：", error); }); }); // 如果是自动播放或通过其他方式触发播放，也可以监听视频的play事件 $('#localVideo').on('play', function() { $('#videoCoverWrapper').hide(); }); }); </script> <div class="gotohzbtn"> <a href="/visa" class="hvbutton">Visa Application</a> <a href="/LocalFeatures" class="hvbutton">About Hangzhou</a> </div> </div> </div> </div> </div> <style> .bkeyd{ margin-top: 30px; } .containerkds { width: 80%; margin: 0px auto; background-color: #fff; padding: 20px; border-radius: 10px; display: flex; flex-direction: row; } .containerkds .dates { width: 70%; padding: 10px; border: 2px solid #03717D; border-radius: 10px; display: flex; flex-direction: row; align-items: center; /* 确保 .year 和 .dates-list 垂直居中 */ } .containerkds .year { font-size: 24px; font-weight: bold; color: #03717D; padding-left: 10px; margin-right: 20px; display: flex; flex-direction: column; justify-content: center; height: 100%; align-items: center; flex-shrink: 0; /* 确保年份部分不会缩小 */ } .containerkds .dates-list { width: 95%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; } .containerkds .dates ul { list-style-type: none; padding: 0; } .containerkds .dates ul li { margin-bottom: 10px; display: flex; align-items: center; flex-wrap: nowrap; /* 确保子元素在同一行 */ } .containerkds .dates ul li span { background-color: #03717D; color: #fff; padding: 5px 10px; border-radius: 5px; margin-right: 15px; width: 150px; /* 保持日期宽度一致 */ text-align: center; flex-shrink: 0; /* 确保日期宽度不会缩小 */ } .containerkds .dates ul li .dot { width: 15px; height: 15px; background-color: #03717D; border-radius: 50%; margin-right: 15px; flex-shrink: 0; /* 确保点不会缩小 */ } .containerkds .dates ul li .description { flex-grow: 1; /* 占据剩余空间 */ white-space: pre-wrap; /* 允许换行但不在单词中间 */ word-break: keep-all; /* 防止在单词中间换行 */ overflow-wrap: break-word; /* 允许长单词换行 */ } .containerkds .qr-code { width: 30%; padding: 10px; display: flex; flex-direction: column; /* 垂直排列子元素 */ align-items: center; /* 水平居中 */ justify-content: center; /* 如果需要垂直居中 */ text-align: center; /* 确保 <p> 内的文本也居中 */ background: #fff; } .containerkds .qr-code img { width: 170px; /* 调整QR码图片的宽度 */ } .titlekd { font-size: 24px; font-weight: bold; color: #03717D; margin-bottom: 0px; text-align: center; } .titlekd::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; margin: 10px auto; } @media(max-width: 767px) { .containerkds { flex-direction: column; /* 子元素垂直排列 */ width: 100%; margin: 0px auto; padding: 10px; border-radius: 10px; } .containerkds .dates, .containerkds .qr-code { width: 100%; /* 占满整个宽度 */ margin-top: 20px; /* 添加顶部间距，使内容之间有间隔 */ } .containerkds .dates { border: 2px solid #03717D; border-radius: 10px; padding: 10px; } .containerkds .dates ul li span { background-color: #03717D; color: #fff; padding: 5px 10px; border-radius: 5px; margin-right: 10px; width: 80px; /* 保持日期宽度一致 */ text-align: center; flex-shrink: 0; /* 确保日期宽度不会缩小 */ } .containerkds .year { width: 10%; /* 年份部分也应适应小屏幕 */ justify-content: center; /* 居中年份数字 */ margin-bottom: 10px; /* 与日期列表保持一定距离 */ } .containerkds .dates-list { width: 90%; } } </style> <div class="brand brand1 bkeyd mar-bottom"> <div class="container"> <div class="row"> <div class="titlekd">Key Dates</div> <div class="containerkds"> <div class="dates"> <div class="year"> <div>2</div> <div>0</div> <div>2</div> <div>5</div> </div> <div class="dates-list"> <ul> <li><span>Mar 1</span><div class="dot"></div><div class="description">Paper Submission Deadline</div></li> <li><span>Jun 30</span><div class="dot"></div><div class="description">Notification of Paper Acceptance</div></li> <li><span>Jul 31</span><div class="dot"></div><div class="description">Final Paper Submission Deadline</div></li> <li><span>Mar 15</span><div class="dot"></div><div class="description">Workshop/Tutorial Proposal Submission Deadline</div></li> <li><span>Feb 1</span><div class="dot"></div><div class="description">Competition Proposal Submission Deadline</div></li> <li><span>Apr 1</span><div class="dot"></div><div class="description">Special Forum Proposal Submission Deadline</div></li> </ul> </div> </div> <div class="qr-code"> <a href="templates/iros2025/doc/iros25pp.pdf" target="_blank"> <img src="/templates/iros2025/static/images/iros25pp.jpeg" alt="iros25pp.jpeg"> </a> <p><a href="templates/iros2025/doc/iros25pp.pdf" target="_blank">See our poster!</a></p> </div> </div> </div> </div> </div> <br class="px-10"> <style> .containerme { display: flex; width: 80%; justify-content: space-between; /* 让 event-box 之间有间距 */ margin: 0px auto 0; /* 合并 margin-top 和 margin-left/right */ flex-wrap: nowrap; flex-direction: row; gap: 20px; /* 控制 event-box 之间的间距 */ padding: 20px; /* 可选：为容器添加内边距 */ } .containerme .event-box { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; width: calc(50% - 10px); /* 每个 event-box 占 50% 宽度，减去一半的间距 */ flex-grow: 1; /* 确保在大屏幕上每个盒子会尝试占据可用空间 */ max-width: calc(50% - 10px); /* 设置最大宽度以防止过度扩展 */ display: flex; /* 新增：将 event-box 设置为 flex 容器 */ flex-direction: column; /* 新增：垂直排列内容 */ } .containerme .event-box::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: transparent #03717D transparent transparent; } .containerme .event-box h2 { color: #03717D; margin-bottom: 10px; font-weight: bold; font-size: 20px; text-align: left; /* 居中显示标题 */ } .containerme .event-box p { color: #666; margin-bottom: 20px; } .containerme .h1 { color: #506E32; border-bottom: 2px solid #03717D; width: 30%; text-align: center; margin-bottom: 20px; } .titleme { font-size: 24px; font-weight: bold; color: #03717D; text-align: center; } .titleme::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; margin: 10px auto; } .hereplain-link { color: inherit; text-decoration: underline; } .hereplain-link:hover { color: inherit; text-decoration: underline; } .learn-more-container { margin-top: auto; /* 新增：将 LEARN MORE 按钮推到最底部 */ } .learn-more-container .learn-more-link { display: inline-block; background-color: transparent; color: #03717D; padding: 10px 20px 10px 0px; text-decoration: none; border-radius: 5px; position: relative; font-weight: bold; } .learn-more-container .learn-more-link::after { content: '>'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); } @media (max-width: 767px) { .containerme { width: 100%; flex-wrap: wrap; gap: 10px; padding: 10px; } .containerme .event-box { width: 100%; max-width: 100%; } } </style> <div class="brand brand1 mar-bottom"> <div class="container"> <div class="row"> <div class="titleme">Latest News</div> <div class="containerme"> <div class="event-box"> <h2>Workshop/Tutorial Information & Tips</h2> <p style="text-align: justify; word-break: keep-all; overflow-wrap: normal;color: black;">We have released an introduction video that introduces the core purpose, drafting points, and evaluation criteria for a workshop/tutorial.</p> <div class="learn-more-container"> <a href="/CallForWorkshopsTutorials" class="learn-more-link">LEARN MORE</a> </div> </div> <div class="event-box"> <h2>Call for papers</h2> <p style="text-align: justify; word-break: keep-all; overflow-wrap: normal;color: black;">Prospective authors are invited to submit high-quality papers representing original work. Submissions in all areas of intelligent robots and applications are welcome. IROS2025 submission site is online <a href="https://ras.papercept.net/conferences/scripts/start.pl" target="_blank" class="hereplain-link">here</a>.</p> <div class="learn-more-container"> <a href="#" class="learn-more-link">LEARN MORE</a> </div> </div> <div class="event-box"> <h2>How to Become a Partner</h2> <p style="text-align: justify; word-break: keep-all; overflow-wrap: normal;color: black;">IROS 2025 is expected to attract over 6,000 leading experts in robotics! We are pleased to provide a platform for interactive communication. We sincerely invite you to partner with us as a sponsor or exhibitor for this prestigious event.</p> <div class="learn-more-container"> <a href="#" class="learn-more-link">LEARN MORE</a> </div> </div> </div> </div> </div> </div> <br class="px-10"> <style> .containergotohz { max-width: 80%; margin: 20px auto; background-color: #fff; display: flex; flex-direction: column; gap: 20px; /* Add space between child elements */ } @media(max-width: 767px) { .containergotohz { max-width: 98%; margin: 10px auto; padding: 10px; } } .gotohzdesc { margin: 0 0 10px 0; } .containergotohz h1 { color: #006666; text-align: center; border-bottom: 1px solid #006666; padding-bottom: 10px; } .containergotohz .gotohzdesc p { text-align: justify; line-height: 1.6; } .containergotohz img { display: block; margin: 20px auto; max-width: 100%; height: auto; } .titlegotohz { font-size: 24px; font-weight: bold; color: #03717D; margin-bottom: 0px; text-align: center; } .titlegotohz::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; margin: 10px auto; } .gotohzbtn { text-align: center; } .containergotohz .button { display: inline-block; /* Changed from block to inline-block for better centering */ width: 30%; /* Set the button width to 30% */ margin: 20px auto 10px auto; padding: 10px 20px; background-color: #006666; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; transition: background-color 0.3s, transform 0.3s; /* Added transform transition */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better appearance */ } @media(max-width: 767px) { .containergotohz .button { width: 60%; /* Adjusted width for smaller screens */ } } /* 鼠标悬停时的样式 */ .gotohzbtn .button:hover { background-color: #002060; /* 藏蓝色的RGB值 */ transform: scale(1.1); /* 按钮大小增加10% */ } /* video left begin */ .hzvideo { background: #fff; height: 540px; overflow: hidden; width: 100%; display: flex; /* 将 .hzvideo 设置为 Flex 容器 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } @media(max-width: 767px) { .hzvideo { height: 400px; } } .tab-paddingvideo { padding: 1px 0px 0px 1px; height: 100%; /* Changed to 100% to maintain aspect ratio on all screen sizes */ width: 100%; display: flex; justify-content: center; align-items: center; } </style> <div class="brand brand1 mar-bottom"> <div class="container"> <div class="row"> <div class="containergotohz"> <div class="titlegotohz">Welcome To Hangzhou</div> <div class="gotohzdesc"> <p style="text-align: justify; word-break: keep-all; overflow-wrap: normal;color: black;">Hangzhou, known as the "Heaven on Earth," is the capital city of Zhejiang Province in eastern China. It boasts a rich tapestry of history and culture, with its origins dating back to the 10th century. The city is famous for its picturesque landscapes, particularly the beautiful West Lake, which has inspired countless poets and artists over the centuries.</p> <br> <p style="text-align: justify; word-break: keep-all; overflow-wrap: normal;color: black;">The West Lake, with its serene waters and surrounding mountains, is the quintessential symbol of Hangzhou. It is a UNESCO World Heritage site and a place where one can find traditional Chinese gardens, pagodas, and temples.</p> </div> <div class="col-md-12 col-sm-12 hzvideo"> <div class="tab-paddingvideo"> <video id="localVideo" width="100%" controls> <source src="http://1257959732.vod-qcloud.com/127e49a3vodtranssh1257959732/210bef0f1397757900242459718/v.f100020.mp4" type="video/mp4"> </video> </div> </div> <script> $(document).ready(function () { // 设置视频高度与宽度比例相同 $videoHeight = 540; $('#localVideo').height($videoHeight); // 当点击封面图片或播放按钮时播放视频并隐藏封面 $('#videoCoverWrapper').click(function() { var video = document.getElementById('localVideo'); video.play().then(function() { $('#videoCoverWrapper').hide(); }).catch(function(error) { console.error("无法播放视频：", error); }); }); // 如果是自动播放或通过其他方式触发播放，也可以监听视频的play事件 $('#localVideo').on('play', function() { $('#videoCoverWrapper').hide(); }); }); </script> <div class="gotohzbtn"> <a href="/Transportation" class="button">Getting to Hangzhou</a> </div> </div> </div> </div> </div> <br class="px-10"> <style> .committee { display: flex; flex-wrap: wrap; justify-content: center; gap: 0px; margin: 0px 0 0px 0; flex-direction: column; align-content: center; } .rowoc, .rowocex { display: flex; justify-content: center; width: 60%; gap: 20px; /*margin-bottom: 20px;*/ flex-wrap: wrap; /* 允许子元素换行 */ } @media (max-width: 768px) { .rowoc, .rowocex { width: 100%; } } @media (min-width: 769px) and (max-width: 1024px) { .rowoc, .rowocex { width: 80%; } } .member, .memberex { text-align: center; width: 200px; box-sizing: border-box; margin-bottom: 20px; /* 为成员之间添加底部间距 */ } .member { flex: 0 0 calc(33.333% - 40px); /* 在较大屏幕上每行显示3个成员 */ } .memberex { flex: 0 0 calc(25% - 40px); /* 在较大屏幕上每行显示4个成员 */ } @media (max-width: 768px) { .member, .memberex { flex: 0 0 calc(50% - 20px); /* 每行显示2个成员 */ max-width: calc(50% - 20px); /* 确保每个成员不会超出容器宽度 */ } } .member img, .memberex img { width: 100%; height: auto; border-radius: 5px; } .member h3, .memberex h3 { margin: 10px 0; font-size: 18px; color: #03717D; } .member p, .memberex p { font-size: 14px; color: #666; } .member p.general-chair, .memberex p.general-chair { font-weight: bold; } .see-all { background-color: #006666; color: white; padding: 10px 20px; border-radius: 20px; text-decoration: none; margin: 20px auto 0; display: block; width: fit-content; transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */ } .see-all:hover { color: white; background-color: #002060; /* 藏蓝色的RGB值 */ transform: scale(1.1); /* 按钮大小增加10% */ } .titleoc { font-size: 24px; font-weight: bold; color: #006666; margin-bottom: 20px; text-align: center; } .titleoc::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; margin: 10px auto; } /* 响应式设计 - 小屏幕（例如手机） */ @media (max-width: 768px) { .member h3, .memberex h3 { font-size: 16px; /* 调整标题字体大小 */ } .member p, .memberex p { font-size: 12px; /* 调整段落字体大小 */ } } /* 响应式设计 - 中等屏幕（例如平板） */ @media (min-width: 769px) and (max-width: 1024px) { .member h3, .memberex h3 { font-size: 16px; } .member p, .memberex p { font-size: 12px; } } </style> <div class="brand brand1 mar-bottom"> <div class="container"> <div class="row"> <div class="titleoc">Organization Committee</div> <div class="committee"> <div class="rowoc"> <div class="member"> <img src="/templates/iros2025/static/images/2025team/1HeshengWang.png" alt="Hesheng Wang"> <h3>Hesheng Wang</h3> <p class="general-chair">General Chair</p> <p>Shanghai Jiao Tong University</p> </div> <div class="member"> <img src="/templates/iros2025/static/images/2025team/2YiGuo.png" alt="Yi Guo"> <h3>Yi Guo</h3> <p class="general-chair">Program Chair</p> <p>Stevens Institute of Technology</p> </div> <div class="member"> <img src="/templates/iros2025/static/images/2025team/3ChristianLaugier.png" alt="Christian Laugier"> <h3>Christian Laugier</h3> <p class="general-chair">IROS EIC</p> <p>Inria & University Grenoble Alpes</p> </div> </div>  <a href="/OCMembers" class="see-all">See all committee members</a> </div> </div> </div> </div> <br class="px-10"> <style> .containerps { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/ } .exPStopspace { margin-top: 30px; } .pslogos { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; } .pslogos img { width: 150px; height: auto; margin: 10px; } .buttonps { display: block; /* 改为 block */ padding: 10px 20px; background-color: #006666; color: #fff; text-decoration: none; border-radius: 20px; transition: background-color 0.3s, transform 0.3s; /* 添加 transform 过渡效果 */ margin: 20px auto 0; /* 水平居中 */ width: fit-content; /* 让按钮宽度适应内容 */ text-align: center; /* 确保文本居中 */ } .buttonps:hover { background-color: #002060; /* 藏蓝色的RGB值 */ transform: scale(1.1); /* 按钮大小增加10% */ color: #fff; /* 确保文字颜色始终为白色 */ } .titleps { font-size: 24px; font-weight: bold; color: #006666; margin-bottom: 20px; text-align: center; } .titleps::after { content: ''; display: block; width: 30%; height: 1px; background-color: black; /* 使用黑色线条 */ margin: 10px auto; } .comeingsoon { display: block; text-align: center; /* 水平居中 */ font-size: 1.5em; /* 调整字体大小 */ color: black; /* 设置字体颜色为黑色 */ text-decoration: none; /* 去除下划线 */ /*margin-top: 50px;*/ /* 增加上下边距以垂直居中 */ } </style> <div class="brand brand1 exPStopspace mar-bottom"> <div class="container"> <div class="row"> <div class="containerps"> <div class="titleps">Partners & Sponsors</div>  <a class="comeingsoon">Coming soon!</a> <a href="/PartnersSponsors" class="buttonps">See complete list</a> </div> </div> </div> </div> <br class="px-10"> <style> /* 全局样式 */ .footer { background-color: #e6f7ff; padding: 10px; border-top: 5px solid #006666; font-family: 'Century Gothic', sans-serif; } .ftv2-container { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; width: 80%; margin: 0px auto; } .ftv2-left, .ftv2-right { display: flex; flex-direction: column; align-items: center; height: 100%; /* 确保子元素有明确的高度 */ } .ftv2-left { width: 40%; } .ftv2-right { width: 60%; } .header-title { font-size: 18px; margin-bottom: 10px; color: #006666; text-align: center; } .header-title p { font-size: 18px; /*margin-bottom: 10px;*/ color: #006666; text-align: center; } .header-title-right { font-size: 18px; margin-bottom: 10px; color: #006666; text-align: center; margin-left: -180px; } .header-title-right p { font-size: 18px; /*margin-bottom: 10px;*/ color: #006666; text-align: center; } .contact-email a { display: block; margin: 0 auto; } .contact-email img { width: 50px; height: 50px; } .social-media { display: flex; align-items: center; text-align: center; width: 100%; flex-wrap: nowrap; justify-content: center; flex-direction: row; } .social-icons { display: flex; justify-content: space-evenly; gap: 20px; margin-bottom: 10px; width: 60%; } .social-icons img { width: 50px; height: 50px; } .hashtags { display: flex; flex-direction: column; align-items: flex-start; text-align: left; justify-content: center; /* 垂直居中 */ height: 100%; /* 确保容器有明确的高度 */ padding: 0 0 0 20px ; width: 40%; } .hashtags p { margin: 0; /* 移除默认的上下边距 */ font-size: 18px; color: #006666; text-align: left; /* 文本左对齐 */ flex-grow: 1; /* 每个段落等分可用空间 */ display: flex; /* 使段落本身也成为弹性容器 */ align-items: center; /* 水平居中文本 */ } hr { border: 1px solid #006666; width: 70%; margin: 10px auto; } .friend-links-section { display: flex; flex-wrap: wrap; /* 允许换行 */ justify-content: center; /* 水平居中 */ gap: 20px; /* 项目之间的间距 */ margin-bottom: 10px; margin-top: 10px; width: 80%; margin: 0 auto; /* 确保居中 */ } .friend-links-item { list-style: none; /*margin: 5px;*/ flex: 1 1 calc(12.5% - 40px); max-width: calc(12.5% - 40px); } .friend-links-link img { max-width: 100%; } .copyright { text-align: center; margin-top: 20px; } /* 小屏幕样式 */ @media only screen and (max-width: 768px) { .ftv2-container { flex-direction: column; } .ftv2-left, .ftv2-right { width: 100%; margin-bottom: 20px; } .social-icons img { width: 40px !important; height: 40px !important; } .friend-links-item { flex: 1 1 100%; max-width: 100%; margin-bottom: 10px; } .friend-links-section { display: flex; flex-wrap: wrap; /* 允许换行 */ justify-content: center; gap: 5px; /* 项目之间的间距 */ margin-bottom: 10px; margin-top: 10px; } .friend-links-item { list-style: none; margin: 5px; flex: 1 1 calc(40% - 5px); /* 每个项目占据50%宽度，减去间距 */ max-width: calc(40% - 5px); /* 确保最大宽度不超过50% */ margin-bottom: 5px; box-sizing: border-box; /* 确保 padding 和 border 包含在元素的宽度和高度内 */ } .header-title-right { margin-left: 0px; } .footer p, .footer a { font-size: 18px; } .social-media { flex-direction: column; } .social-icons, .hashtags { width: 100%; text-align: center; } .hashtags { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; /* 垂直居中 */ height: 100%; /* 确保容器有明确的高度 */ padding: 0 0 0 20px ; } } /* 更小屏幕的额外样式 */ @media only screen and (max-width: 480px) { .social-icons img { width: 30px !important; height: 30px !important; } .footer p, .footer a { font-size: 16px; } } </style> <div class="footer"> <footer>  <div class="ftv2-container">  <div class="ftv2-left"> <div class="header-title"> <p>Contact us via email:</p> </div> <div class="contact-email"> <a href="mailto:info@iros25.org"> <img src="/templates/iros2025/static/icon/footer/email.png" alt="Email Icon"> </a> </div> </div>  <div class="ftv2-right"> <div class="header-title-right"> <p>Follow us on social media:</p> </div> <div class="social-media"> <div class="social-icons"> <a href="https://x.com/IROS2025"> <img src="/templates/iros2025/static/icon/footer/twitter.png" alt="Twitter Icon"> </a> <a href="https://www.facebook.com/profile.php?id=61569994154219"> <img src="/templates/iros2025/static/icon/footer/facebook.png" alt="Facebook Icon"> </a> <a href="https://www.instagram.com/IROS2025"> <img src="/templates/iros2025/static/icon/footer/instagram.png" alt="Instagram Icon"> </a> <a href="https://www.linkedin.com/company/iros2025hangzhou/"> <img src="/templates/iros2025/static/icon/footer/linkedin.png" alt="Linkedin Icon"> </a> <a href="https://www.youtube.com/@IROS2025"> <img src="/templates/iros2025/static/icon/footer/youtube.png" alt="Youtube Icon"> </a> </div> <div class="hashtags"> <p>#IROS2025</p> <p>#IROSHangzhou</p> </div> </div> </div> </div> <hr>  <div class="friend-links-section"> <li class="friend-links-item"> <a href="https://www.ieee.org" target="_blank" class="friend-links-link"> <img src="/static/upload/5daf7852-661a-47a3-b1e2-68c9999a0637.png" alt="IEEE" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.ieee-ras.org" target="_blank" class="friend-links-link"> <img src="/static/upload/f8c93cfa-b0d1-4d16-a925-f412c023a9d0.png" alt="ieeee-ras" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.ieee-ies.org/" target="_blank" class="friend-links-link"> <img src="/static/upload/57341472-43cf-4963-a6ee-9115f15dfb74.png" alt="ies" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.rsj.or.jp/en/" target="_blank" class="friend-links-link"> <img src="/static/upload/15ce02e1-c619-4053-9ff3-9663057d679e.png" alt="RSJ" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.sice.jp/english/" target="_blank" class="friend-links-link"> <img src="/static/upload/f2d39598-80b4-4c08-b6ab-7e6739504367.png" alt="SICE" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.sjtu.edu.cn/" target="_blank" class="friend-links-link"> <img src="/static/upload/b79c85c5-50f9-4c42-a1e3-8894c24d540d.png" alt="上海交通大学" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.zju.edu.cn/" target="_blank" class="friend-links-link"> <img src="/static/upload/bcdcb893-fd20-4d12-ac03-54d2000ab520.png" alt="浙江大学" class="friend-links-image"> </a> </li> <li class="friend-links-item"> <a href="https://www.shu.edu.cn/" target="_blank" class="friend-links-link"> <img src="/static/upload/cc7bc1fb-ecf0-4753-b930-45281f7b73b8.png" alt="上海大学" class="friend-links-image"> </a> </li> </div>  <p class="copyright">Copyright © 2025 IEEE/RSJ International Conference on Intelligent Robots and Systems (IROS 2025), Hangzhou, China. All Rights Reserved.</p> </footer> </div> </body> </html>

CINXE.COM

IROS 2025