@charset "utf-8";

body{background: #111;}
#wrap{padding: 50px 70px;}
h1{display: block; font-size: 70px; font-weight: 100; color: #fff;}
h1 span{display: block;}
.list{margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1);}
.list li{position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.list li a{display: block; position: relative; padding-left: 20px; font-size: 20px; line-height: 350%;; color: rgba(255, 255, 255, 0.5); font-weight: 100; z-index: 10; transition: all 0.2s ease;}
.list li a span{display: inline-block; position: relative;}
.list li a span::after{position: absolute; left: -20px; bottom: -1px; width: 0; height: 1px; background: #fff; content: ""; transition: all 0.2s ease;}
.list li i{display: block; position: absolute; right: 20px; top: 50%; margin-top: -10px; width: 21px; height: 21px; opacity: 0.4; transition: all 0.2s ease;}
.list li i::before{position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 1px; background: #fff; content: "";}
.list li i::after{position: absolute; left: calc(50% - 1px); top: 0; width: 1px; height: 100%; background: #fff; content: "";}
.list li:hover a{color: #fff; font-weight: 400;}
.list li:hover a span::after{width: calc(100% + 40px);}
.list li:hover a.none{pointer-events: none;}
.list li:hover i{transform: rotate(90deg); opacity: 1;}
p{margin-top: 40px; font-family: 'Inter'; font-size: 13px; font-weight: 100; color: rgba(255, 255, 255, 0.5); text-align: center;}
p a{color: #fff; vertical-align: top;}

@media all and (max-width: 767px) {
	#wrap{padding: 30px 30px 40px;}
	h1{font-size: 38px;}
	.list{margin-top: 25px;}
	.list li a{padding-left: 10px; font-size: 16px;}
	.list li a span::after{left: -10px;}
	.list li i{right: 12px; width: 13px; height: 13px; margin-top: -6px;}
	.list li:hover a span::after{width: calc(100% + 20px);}
	p{margin-top: 20px; font-size: 11px;}
}