init

assets/css/lists.css

@@ -0,0 +1,101 @@
+.list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.list--menu {
+	display: none;
+	font-size: 1.5rem;
+}
+
+.list--menu > li {
+	position: relative;
+	display: flex;
+	width: 8.75rem;
+	height: 5rem;
+}
+
+.list--menu > li:hover .header__dropdown {
+  height: 9.375rem;
+}
+
+.list--menu .header__dropdown {
+	position: absolute;
+	top: 4rem;
+	width: 8.75rem;
+	height: 0;
+	background: var(--color-white);
+	transition: .3s ease;
+	border-radius: 0 0 var(--border-radius) var(--border-radius);
+  box-shadow: 0rem 0.75rem 0.75rem -0.125rem rgb(0 0 0 / 30%);
+	overflow: hidden;
+}
+
+.list--menu > li + li {
+	margin-left: 0.5rem;
+}
+
+.list--menu > li > a {
+	position: relative;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}
+
+.list--menu > li > a::after {
+	content: '';
+	position: absolute;
+  left: 0;
+  bottom: 1rem;
+  width: 100%;
+	height: 0.625rem;
+  background: no-repeat 50% 70%;
+  background-image: url("../../img/underline.webp");
+  background-size: 65% 0.4375rem;
+	transition: opacity 0.15s;  
+	opacity: 0; 
+}
+
+.list--menu li:hover > a::after{
+  opacity: 1;
+}
+
+.list--dropdown {
+	padding-top: 1rem;
+}
+
+.list--object {
+	font-size: 0.875rem;
+}
+
+.list--object li+li {
+  margin-top: 1rem;
+}
+
+.section__right .list--dot {
+	list-style-type: circle;
+  margin-left: 1.375rem;
+  font-size: 0.6875rem;
+}
+
+.list--mobile {
+	text-align: center;
+	font-size: 1.375rem;
+	border-top: 0.0625rem solid var(--color-black);
+    padding-top: 0.75rem;
+}
+
+.list--mobile .link {
+  padding-inline: 3rem;
+}
+
+.list--mobile li + li {
+	margin-top: 0.375rem;
+}
+
+.link--title {
+	font-size: 1.75rem;
+	font-weight: bold;
+	text-decoration: underline;
+}