/* BEGIN INDEX CSS ----------------------------------------------> */

body
{
	padding-top: 96px;
}

#index #content
{
	max-width: none;
	margin: 0px auto;
}

#index #mainContent
{
	margin: 0;
	padding: 0;
}


@keyframes homeTriangle
{
	0%
	{
		clip-path: polygon(100% 100%, 100% 100%, 0px 100%);
	}

	30%
	{
		clip-path: polygon(100% 80%, 100% 100%, 0px 100%);
	}

	/*50%
	{
		clip-path: polygon(0% 0%, 130% 100%, 0% 100%);
	}*/

	100%
	{
		clip-path: polygon(0% 0%, 130% 100%, 0% 100%);
	}

}

#homeAnimation
{
	background: #F5F5F5;
	min-height: 30vw;
}

#homeAnimation,
#homeAnimation li
{
	width: 100%;
}

#homeAnimation li
{
	margin: 0;
	list-style: none;
}

#homeAnimation li:not(:first-child)
{
	display: none;
}

#homeAnimation .image
{
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 21vw;
	overflow: hidden;

	aspect-ratio: 1536/652;
}

#homeAnimation .image::before
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	background: #ffffff;
	z-index: 1;
	opacity: .95;
	clip-path: polygon(100% 100%, 100% 100%, 0px 100%);

	animation: homeTriangle .9s;
    animation-fill-mode: forwards;
    animation-delay: 300ms;
    animation-timing-function: linear;

}

#homeAnimation li:nth-child(n+3) .image::before
{
	animation: none;
	clip-path: polygon(0% 0%, 130% 100%, 0% 100%);
}



@media (max-width: 919px)
{
	#homeAnimation .image::before
	{
		clip-path: polygon(0% 0%, 130% 100%, 0% 100%);
		animation: none;
	}
}

#homeAnimation .image img
{
	display: block;
	width: 100%;
	height: auto;
}

#homeAnimation .content
{
	position: relative;
	padding: 30px 0 40px;
	background: #F5F5F5;
}

#homeAnimation .title,
#homeAnimation .title2
{
	font-family: 'HelveticaNeue_cn';
	font-size: 74px;
	font-size: max(30px,
             min(74px, 30px + (74 - 30) * ((100vw - 1024px) / (1920 - 1024))
	));
	font-weight: 700;
	line-height: 1.1;
}

#homeAnimation .content p
{
	--max-font-size: 22;
}

#homeAnimation .abstract
{
	margin-top: 10px;
}

#homeAnimation ul li .sp_pencil
{
	position: absolute;
	bottom: 10px;
	left: 10px;
}

#homeAnimation ul
{
	margin-bottom: 0;
}

#homeAnimation #pager
{
	position: absolute;
	top: 0px;
	right: 0;
	z-index: 1000;
}

#homeAnimation #pager button,
#testimonialPager button
{
	display: inline-block;
	background: #ffffff;
	width: 25px;
	height: 3px;
	border: none;
	cursor: pointer;
}

#homeAnimation #pager button:not(:first-child),
#testimonialPager button:not(:first-child)
{
	margin-left: 8px;
}

#homeAnimation #pager button.active,
#testimonialPager button.active
{
	background: #E31B23;
}

/*I'm surprised I have to add this*/
#homeAnimation #pager button:only-child
{
	display: none;
}

#homeAnimation .standardbutton
{
	padding-bottom: 40px;
	padding-bottom: max(1px,
             min(40px, 1px + (40 - 1) * ((100vw - 767px) / (1920 - 767))
	));
}


/* Practice spotlight */

#practiceSpotlight
{
	position: relative;
	min-height: 300px;
	padding: 100px 0 20px;
	color: #d7d7d7;
	background: #161616;
}



@keyframes homeTriangleRed
{
	0%
	{
		clip-path: polygon(0 0, 100% 0, 100% 0);
	}

	30%
	{
		clip-path: polygon(0 0, 100% 0, 100% 100%);
	}

	/*50%
	{
		clip-path: polygon(0% 0%, 130% 100%, 0% 100%);
	}*/

	100%
	{
		clip-path: polygon(0 0, 100% 0, 0 100%);
	}

}


#practiceSpotlight::after
{
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	width: 326px;
	height: 68px;
	background: #E31B23;

	clip-path: polygon(0 0, 100% 0, 100% 0);
	/*clip-path: polygon(0 0, 100% 0, 100% 100%);*/

	animation: homeTriangleRed 1.2s;
    animation-fill-mode: forwards;
    animation-delay: 300ms;
    animation-timing-function: linear;
    will-change: transform;


	/*opacity: 0;
	transition: opacity 250ms ease 1000ms;*/
}

@media (max-width: 919px)
{
	#practiceSpotlight::after
	{
		animation: none;
		clip-path: polygon(0 0, 100% 0, 0 100%);
	}
}

#practiceSpotlight h2
{
	color: inherit;
}

#practiceSpotlight ul,
#practiceSpotlight li
{
	margin: 0;
	list-style: none;
}

#practiceSpotlight .content
{
	margin-top: 15px;
	margin-top: max(1px,
             min(15px, 1px + (15 - 1) * ((100vw - 767px) / (1920 - 767))
	));

	margin-bottom: 50px;
	margin-bottom: max(30px,
             min(50px, 30px + (50 - 30) * ((100vw - 767px) / (1920 - 767))
	));


}

#practiceSpotlight .content p
{
	font-size: 19px;
	font-size: max(16px,
             min(19px, 16px + (19 - 16) * ((100vw - 767px) / (1920 - 767))
	));
}

#practiceSpotlight #introContent
{
	margin: 0 0 60px;
	/*opacity: 0;
	transition: all 450ms ease;*/
}

#practiceSpotList ul li
{
	position: relative;
	/*top: 40px;
	opacity: 0;
	transition: all 500ms ease 300ms;*/
}

#practiceSpotList ul li:nth-child(2)
{
	transition-delay: 400ms;
}

/*#practiceSpotlight::before
{
	left: 100vw;
	transition: all 1000ms ease;
}

#practiceSpotlight.transitionNow::before
{
	left: calc(50% - 50vw);
}
*/

/*#practiceSpotlight.transitionNow ul li
{
	top: 0;
	opacity: 1;
}*/

/*#practiceSpotlight.transitionNow #introContent
{
	opacity: 1;
}*/

#practiceSpotList .title
{
	margin: 15px 0 10px;
	font-family: 'HelveticaNeue_cn';
	font-size: 24px;
	font-size: max(20px,
             min(24px, 20px + (24 - 20) * ((100vw - 767px) / (1350 - 767))
	));
	line-height: 1.3;
	font-weight: 500;

}

#practiceSpotList a .image
{
	position: relative;
}

#practiceSpotList a
{
	color: inherit;
}

#practiceSpotList a .image::after
{
	content: '';
	position: absolute;
	display: block;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;
	background: #161616;

	clip-path: polygon(15% 100%, 100% 100%, 100% 100%, 0 100%);
	transition: all 250ms ease;
}

#practiceSpotList a:hover .image::after,
#practiceSpotList a:focus .image::after
{
	clip-path: polygon(15% 100%, 100% 70%, 100% 100%, 0 100%);
}

#practiceSpotList li
{
	margin: 0 0 70px;
}

#practiceSpotList p
{
	--min-font-size: 16;
	--max-font-size: 19;
}

#practiceSpotList .image img
{
	display: block;
	width: 100%;
	height: auto;
}

#homeNews ul,
#homeNews li
{
	margin: 0;
	list-style: none;
}

#homeNewsList
{
	position: relative;
	padding-top: 50px;
	padding-top: max(30px,
             min(50px, 30px + (50 - 30) * ((100vw - 767px) / (1350 - 767))
	));

	padding-bottom: 70px;
	/*padding-bottom: max(50px,
             min(70px, 50px + (70 - 50) * ((100vw - 767px) / (1350 - 767))
	));*/

	box-sizing: border-box;
}

#homeNewsList::before
{
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	content: '';
	display: block;
	width: 100vw;
	height: 100%;
	background: #EEEEEE;
	opacity: .59;
	z-index: -1;
	clip-path: polygon(0 70%, 100% 25%, 100% 100%, 0 100%);
}

#homeNewsList li
{
	margin-top: 55px;
	margin-top: max(40px,
             min(55px, 40px + (55 - 40) * ((100vw - 767px) / (1600 - 767))
	));
}

#homeNewsList .datetype
{
	display: flex;
	font-weight: 500;
	font-family: 'HelveticaNeue_cn';
}

#homeNewsList .datetype > div + div::before
{
	content: '|';
	margin: 0 5px;
}

#homeNewsList .title
{
	font-weight: 300;
	font-size: 21px;
	font-size: max(17px,
             min(21px, 17px + (21 - 17) * ((100vw - 1280px) / (1920 - 1280))
	));
}

#homeNewsList .title a:not(:hover):not(:focus)
{
	color: #000000;
}

#homeNewsList .standardbutton
{
	margin-top: 55px;
	margin-top: max(40px,
             min(55px, 40px + (55 - 40) * ((100vw - 767px) / (1600 - 767))
	));
}

#homeNewsSpotlight .sp_pencil
{
	position: absolute;
	top: 10px;
	left: 10px;
}

#homeNewsSpotlight .image img
{
	position: relative;
	display: block;
	width: 100vw;
	height: auto;
	left: calc(50% - 50vw);
}

#homeNewsSpotlight .content
{
	position: relative;
	padding: 30px 0;
	background: #E31B23;
	color: #ffffff;
}

#homeNewsSpotlight .spottitle
{
	margin-bottom: 20px;
	margin-bottom: max(16px,
             min(20px, 16px + (20 - 16) * ((100vw - 1280px) / (1920 - 1280))
	));
	font-size: 34px;
	font-size: max(24px,
             min(34px, 24px + (34 - 24) * ((100vw - 1280px) / (1920 - 1280))
	));
	line-height: 1.18;
}


#testimonialSlides
{
	position: relative;

	padding-top: 40px;
	padding-top: max(20px,
             min(40px, 20px + (40 - 20) * ((100vw - 767px) / (1920 - 767))
	));

	padding-bottom: 80px;
	padding-bottom: max(40px,
             min(80px, 40px + (80 - 40) * ((100vw - 767px) / (1920 - 767))
	));

	color: #ffffff;
}

#testimonialSlides::after
{
	z-index: 100;
	background: #ffffff;
	transition: all 1000ms ease;
	left: auto;
	right: calc(50% - 50vw);
}

#testimonialSlides.transitionNow::after
{
	right: 100vw;
}

#testimonialSlides ul,
#testimonialSlides li
{
	margin: 0;
	list-style: none;
}

#testimonialSlides .background
{
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	display: block;
	width: 100vw;
	height: 100%;
	object-fit: cover;
	z-index: -1;

	background-color: black;
}

#testimonialSlides h2
{
	color: inherit;
}

#testimonialSlides .image
{
	width: 100%;
	max-width: 376px;
	margin: 0 0 30px;

	aspect-ratio: 475/235;
}

#testimonialSlides .image img
{
	display: block;
	width: 100%;
	height: auto;
}


#testimonialSlides #slides
{
	max-width: 1150px;
	margin: 0 auto;
}

#testimonialSlides .content
{
	font-size: 21px;
	font-size: max(17px,
             min(21px, 17px + (21 - 17) * ((100vw - 767px) / (1600 - 767))
	));
	font-weight: 300;
}

#testimonialSlides .content p
{
	font: inherit;
}

#testimonialSlides .nameposition::before
{
	content: '- ';
}

#testimonialSlides .standardbutton
{
	margin-top: 30px;
	padding-bottom: 0;
}

#testimonialPager
{
	margin-top: 40px;
}

@media (min-width: 768px)
{

	#homeAnimation li
	{
		background: #ffffff;
		height: 60vw;
	}

	#homeAnimation .image
	{
		height: 100%;
	}

	#homeAnimation .image img
	{
		object-fit: cover;
		height: 100%;
	}

	#practiceSpotList ul
	{
		display: flex;
	}

	#practiceSpotList ul li
	{
		flex: 0 1 378px;
		margin: 0;
	}

	#practiceSpotList ul li:first-child
	{
		margin-right: 116px;
		margin-right: max(50px,
	             min(116px, 50px + (116 - 50) * ((100vw - 920px) / (1920 - 920))
		));
	}

	#testimonialSlides #slides
	{
		margin-top: 30px;
		padding-right: 40px;

	}

	#testimonialSlides li
	{
		display: flex !important;

		padding-left: 79px;
		padding-left: max(20px,
	             min(79px, 20px + (79 - 20) * ((100vw - 768px) / (1100 - 768))
		));
		box-sizing: border-box;

	}

	#testimonialSlides .image
	{
		width: 70%;
	}

	#testimonialSlides .content
	{
		flex: 1 3 650px;
		margin-left: 75px;
		margin-left: max(45px,
	             min(75px, 45px + (75 - 45) * ((100vw - 768px) / (1100 - 768))
		));
	}

	#testimonialPager
	{
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 0;
	}

	#testimonialPager button
	{
		display: block;
		background: #ffffff;
		height: 39px;
		width: 5px;
		padding: 0;
		margin: 0 0 8px !important;
	}


	#homeAnimation .content
	{
		position: absolute;
		bottom: 0;
		z-index: 2;
		background: none;
		width: 100%;
		max-width: 954px;
	}

	#homeAnimation .title
	{
		width: 45%;
		max-width: 700px;
	}

	#homeAnimation .title2
	{
		width: 50%;
		max-width: 750px;
	}

	#homeAnimation .abstract
	{
		width: 65%;
	}

	#homeAnimation li .content > div
	{
		opacity: 0;
		transition: opacity 250ms ease;
	}

	/*#homeAnimation li .content > div:nth-child(4) {transition-delay: 950ms;}
	#homeAnimation li .content > div:nth-child(3) {transition-delay: 1000ms;}
	#homeAnimation li .content > div:nth-child(2) {transition-delay: 1050ms;}
	#homeAnimation li .content > div:nth-child(1) {transition-delay: 1100ms;}*/

	#homeAnimation li .content > div:nth-child(4) {transition-delay: 50ms;}
	#homeAnimation li .content > div:nth-child(3) {transition-delay: 100ms;}
	#homeAnimation li .content > div:nth-child(2) {transition-delay: 150ms;}
	#homeAnimation li .content > div:nth-child(1) {transition-delay: 200ms;}

	#homeAnimation.startAnimation .content > div
	{
		opacity: 1;
	}

	#homeAnimation #pager
	{
		position: absolute;
		top: 50px;
		right: 0;
		z-index: 1000;
	}

	#homeAnimation #pager button
	{
		display: block;
		background: #ffffff;
		height: 39px;
		width: 5px;
		padding: 0;
		margin: 0 0 8px !important;
	}



	#homeNews
	{
		position: relative;
		width: 100vw;
		left: calc(50% - 50vw);
		display: flex;
	}


	#homeNews > div
	{
		width: 50%;
	}


	#homeNewsList
	{
		/*transform: translateX(-100%);*/
		padding-left: 94px;
		padding-left: max(25px,
	             min(94px, 25px + (94 - 25) * ((100vw - 767px) / (1920 - 767))
		));

		padding-right: 94px;
		padding-right: max(25px,
	             min(94px, 25px + (94 - 25) * ((100vw - 767px) / (1920 - 767))
		));

		transition: transform 1000ms ease;
	}


	#homeNewsList::before
	{
		width: 100%;
		left: auto;
		right: 0;
	}

	#homeNewsSpotlight
	{
		position: relative;
		/*transform: translateX(100%);*/
		transition: transform 1000ms ease;
	}


	#homeNewsSpotlight .image,
	#homeNewsSpotlight ul,
	#homeNewsSpotlight li,
	#homeNewsSpotlight > div
	{
		height: 100%;
	}

	#homeNewsSpotlight .content
	{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-top: 115px;
		padding-left: 54px;
		padding-left: max(20px,
	             min(54px, 20px + (54 - 20) * ((100vw - 920px) / (1920 - 920))
		));
		padding-right: 64px;
		padding-right: max(40px,
	             min(64px, 40px + (64 - 40) * ((100vw - 920px) / (1920 - 920))
		));

		padding-bottom: 60px;
		padding-bottom: max(40px,
	             min(60px, 40px + (60 - 40) * ((100vw - 920px) / (1920 - 920))
		));

		background: rgba(227, 27, 35, .77);

		font-size: 19px;
		font-size: max(16px,
	             min(19px, 16px + (19 - 16) * ((100vw - 920px) / (1920 - 920))
		));
		line-height: 1.47;

		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
		box-sizing: border-box;

		transition: clip-path 750ms ease 250ms;
	}

	#homeNewsSpotlight .spottitle
	{
		width: 60%;
		max-width: 370px;
		font-size: 34px;
		font-size: max(20px,
	             min(34px, 20px + (34 - 20) * ((100vw - 1280px) / (1920 - 1280))
		));
	}

	#homeNewsSpotlight .spotabstract
	{
		max-width: 600px;
	}

	#homeNewsSpotlight.transitionNow .content
	{
		clip-path: polygon(0 0, 100% 55%, 100% 100%, 0 100%);
	}

	#homeNewsSpotlight .image img
	{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		left: auto;

		background: black;
	}

	#homeNewsSpotlight .content::before
	{
		display: none;
	}

	/*#homeNews.transitionNow #homeNewsList,
	#homeNews.transitionNow #homeNewsSpotlight
	{
		transform: translateX(0);
	}*/


}

@media (min-width: 920px)
{

	#homeAnimation li
	{
		height: 50vw;
	}

}

@media (min-width: 1024px)
{
	body
	{
		padding-top: 135px;
	}
}

@media (min-width: 1280px)
{

	#homeAnimation li
	{
		height: auto;
	}

	#practiceSpotlight
	{
		display: flex;

		/*padding-left: 54px;
		padding-left: max(10px,
	             min(54px, 10px + (54 - 10) * ((100vw - 1280px) / (1920 - 1280))
		));

		padding-right: 185px;
		padding-right: max(10px,
	             min(185px, 10px + (185 - 10) * ((100vw - 1280px) / (1920 - 1280))
		));*/
	}

	#practiceSpotlight #introContent
	{
		flex: 0 1 650px;
		margin-right: 110px;
		margin-right: max(20px,
	             min(110px, 20px + (110 - 20) * ((100vw - 1280px) / (1920 - 1280))
		));
	}

	#practiceSpotlight #practiceSpotList
	{
		flex: 0 1 880px;
	}

	#practiceSpotlight ul
	{
		justify-content: flex-end;
	}

	#practiceSpotList
	{
		padding-right: 50px;
		padding-right: max(20px,
	             min(50px, 20px + (50 - 20) * ((100vw - 1280px) / (1920 - 1280))
		));
	}
}

@media (min-width: 1350px)
{
	body
	{
		padding-top: 0;
	}

	#homeAnimation .title,
	#homeAnimation .abstract,
	#homeAnimation .title2
	{
		width: 100%;
	}

	#homeAnimation li::before
	{
		/*transition-delay: 0ms;*/
		/*clip-path: polygon(0px 100%, 100% 100%,100% 100%,0px 100%) !important;*/
	}

	#homeAnimation li.current::before
	{
		/*transition-delay: 500ms;*/
		/*clip-path: polygon(0px -50px, 100% 80%,100% 100%,0px 100%) !important;*/
	}

	#homeAnimation #pager
	{
		top: 270px;
		top: max(200px,
	             min(270px, 200px + (270 - 200) * ((100vw - 1350px) / (1920 - 1350))
		));
		right: 40px;
	}
}

@media (min-width: 1800px)
{
	/*#homeAnimation li::before
	{
		clip-path: polygon(0px 100px, 100% 85%,100% 100%,0px 100%);
	}*/
}

/* Home Alert Message */

#alertMessage
{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 98;
	width: 100%;
	padding: 20px 80px 20px 80px;
	background: #9f0604;
	box-sizing: border-box;
	color: #ffffff;
	line-height: 1.2;
	text-align: center;
}

#alertMessage *
{
	margin: 0;
	padding: 0;
	color: #ffffff;
}

#alertMessage a
{
	text-decoration: underline;
}

@media (max-width: 1349px)
{
	#alertMessage
	{
		padding: 20px 44px 20px 44px;
	}
}

@media (max-width: 1024px)
{
	#alertMessage
	{
		padding: 12px 16px 12px 16px;
		font-size: 0.9rem;
	}
}


/* Home Notice Message */

#noticeMessageWrapper
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: calc(50% - 5vh);
	left: calc(50% - 45vw);
	z-index: 99;
	height: 10vw;
	width: 90vw;
	background: #000000;
}

#noticeMessage
{
	position: relative;
	z-index: 999999;
	overflow: hidden;
	width: 100%;
	background: #000000;
	color: #ffffff;
	font-size: 1.1rem;
}

#noticeMessage > div
{
	margin: 0;
	padding: 1.5em 2.5em;
}

#noticeMessage > div p
{
	margin: 0;
	padding: 0;
}


/* END INDEX CSS ------------------------------------------------>