/*ribbon*/
.has-modal {
	overflow: hidden;
}

.has-modal-full-viewport {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.has-modal-full-viewport body {
	height: 100%;
	overflow: hidden;
}

.modal {
	position: fixed;
	z-index: -1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: none;
}

.modal-standard {
	overflow: auto;
	padding: 54px 0;
	background: rgba(0, 0, 0, 0.48);
	-webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 480px) {
	.modal-standard {
		padding-top: 20px;
		padding-bottom: 0;
	}
}

.modal-standard .content-table {
	display: table;
	width: 100%;
	height: 100%;
}

.modal-standard .content-cell {
	display: table-cell;
	vertical-align: middle;
}

.modal-standard .content-wrapper {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

@media only screen and (min-width: 1441px) {
	.modal-standard .content-wrapper {
		margin-left: auto;
		margin-right: auto;
		width: 980px;
	}
}

@media only screen and (max-width: 1068px) {
	.modal-standard .content-wrapper {
		margin-left: auto;
		margin-right: auto;
		width: 692px;
	}
}

@media only screen and (max-width: 734px) {
	.modal-standard .content-wrapper {
		margin-left: auto;
		margin-right: auto;
		width: 87.5%;
	}
}

@media only screen and (max-width: 734px) {
	.modal-standard .content-wrapper {
		min-width: min(100%, 480px);
	}
}

@media only screen and (max-width: 480px) {
	.modal-standard .content-wrapper {
		min-width: 100%;
		width: 100%;
		height: 100%;
	}
}

.modal-standard .content-padding {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1;
	padding: 80px 8.33333%;
	background: #fff;
	border-radius: 18px;
}

@media only screen and (max-width: 734px) {
	.modal-standard .content-padding {
		padding-top: 80px;
		padding-bottom: 60px;
	}
}

@media only screen and (max-width: 480px) {
	.modal-standard .content-padding {
		flex-basis: 100%;
		max-width: 100%;
		padding-left: 6.25%;
		padding-right: 6.25%;
		box-sizing: border-box;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		height: 100%;
	}
}

@media only screen and (max-width: 1068px) {
	.modal-standard .modal-close {
		left: 17px;
		top: 18px;
	}
}

.theme-dark .modal-standard .content-padding, .modal-standard.theme-dark .content-padding {
	background: #1d1d1f;
}

.modal-full-viewport {
	background: #fff;
	padding: 96px 0;
}

@media only screen and (max-width: 1068px) {
	.modal-full-viewport {
		padding: 80px 0;
	}
}

.modal-full-viewport.remove-container-padding {
	padding: 0;
}

.theme-dark .modal-full-viewport, .modal-full-viewport.theme-dark {
	background: #000;
}

.modal-open {
	display: block;
	z-index: 11000;
}

.modal-open:focus {
	outline-offset: -4px;
}

.modal-close {
	position: absolute;
	display: flex;
	z-index: 9999;
	overflow: hidden;
	top: 24px;
	left: 24px;
	margin: 0;
	padding: 0;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	background: none;
	border: 0;
	color: rgba(134, 134, 139, 0.8);
}

.modal-close::before, .modal-close::after {
	font-family: "SF Pro Icons";
	color: inherit;
	display: inline-block;
	font-style: normal;
	font-weight: inherit;
	font-size: inherit;
	line-height: 1;
	text-decoration: underline;
	position: relative;
	z-index: 1;
	alt: "";
}

.modal-close::before, .modal-close::after {
	text-decoration: none;
}

.modal-close::before {
	display: none;
}

.modal-close::before, .modal-close::after {
	content: "";
}

.modal-close:hover {
	color: #86868b;
}

.theme-dark .modal-close {
	color: rgba(110, 110, 115, 0.8);
}

.theme-dark .modal-close:hover {
	color: #6e6e73;
}

.modal-close::after {
	width: 0.9em;
	height: 0.9em;
	top: 0.05em;
	padding: 0;
	font-weight: 300;
}

@media only screen and (max-width: 1068px) {
	.modal-close {
		top: 20px;
		left: 20px;
		font-size: 32px;
	}
}

@keyframes ribbon-drop {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

.ribbon {
	overflow: hidden;
	--ribbon-background-color: #f5f5f7;
	--ribbon-text-color: #1d1d1f;
	--ribbon-link-color: #06c;
	--ribbon-focus-color: rgba(0, 125, 250, 0.6);
}

.ribbon-content-wrapper {
	text-align: center;
}

.ribbon-content {
	margin-left: auto;
	margin-right: auto;
	width: 980px;
}

@media only screen and (min-width: 1441px) {
	.ribbon-content {
		margin-left: auto;
		margin-right: auto;
		width: 980px;
	}
}

@media only screen and (max-width: 1068px) {
	.ribbon-content {
		margin-left: auto;
		margin-right: auto;
		width: 692px;
	}
}

@media only screen and (max-width: 734px) {
	.ribbon-content {
		margin-left: auto;
		margin-right: auto;
		width: 87.5%;
	}
}

.ribbon-link {
	white-space: nowrap;
}

.ribbon-link:focus {
	text-decoration: underline;
}

.ribbon .ribbon-content-wrapper {
	padding-top: 0.94118em;
	padding-bottom: 0.94118em;
}

.ribbon .ribbon-content {
	font-size: 14px;
	line-height: 1.42859;
	font-weight: 400;
	letter-spacing: -0.016em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
		"Arial", sans-serif;
}

.ribbon .ribbon-content:lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(ja) {
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons",
		"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo",
		"ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(ko) {
	line-height: 1.57143;
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic",
		"HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(zh) {
	letter-spacing: 0em;
}

.ribbon .ribbon-content:lang(th) {
	line-height: 1.35718;
	letter-spacing: 0em;
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons",
		"PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content:lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color);
}

.ribbon .ribbon-content {
	color: var(--ribbon-text-color);
}

.ribbon .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

.ribbon .ribbon-link {
	color: var(--ribbon-link-color);
}

.ribbon-elevated .ribbon-content-wrapper {
	padding-top: 1.41176em;
	padding-bottom: 1.41176em;
}

.ribbon-elevated .ribbon-content {
	font-size: 17px;
	line-height: 1.47059;
	font-weight: 400;
	letter-spacing: -0.022em;
	font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
		"Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(ar) {
	letter-spacing: 0em;
	font-family: "SF Pro AR", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(ja) {
	letter-spacing: 0em;
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons",
		"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo",
		"ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(ko) {
	line-height: 1.58824;
	letter-spacing: 0em;
	font-family: "SF Pro KR", "SF Pro Text", "SF Pro Icons", "Apple Gothic",
		"HY Gulim", "MalgunGothic", "HY Dotum", "Lexi Gulim", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(zh) {
	letter-spacing: 0em;
}

.ribbon-elevated .ribbon-content:lang(th) {
	line-height: 1.35296;
	letter-spacing: 0em;
	font-family: "SF Pro TH", "SF Pro Text", "SF Pro Icons", "Helvetica Neue",
		"Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(zh-CN) {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(zh-HK) {
	font-family: "SF Pro HK", "SF Pro Text", "SF Pro Icons", "PingFang HK",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(zh-MO) {
	font-family: "SF Pro HK", "SF Pro TC", "SF Pro Text", "SF Pro Icons",
		"PingFang HK", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon-elevated .ribbon-content:lang(zh-TW) {
	font-family: "SF Pro TC", "SF Pro Text", "SF Pro Icons", "PingFang TC",
		"Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.ribbon-blue {
	--ribbon-background-color: #0071e3;
	--ribbon-text-color: #fff;
	--ribbon-link-color: #fff;
	--ribbon-focus-color: rgba(255, 255, 255, 0.6);
}

.ribbon-blue .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color);
}

.ribbon-blue .ribbon-content {
	color: var(--ribbon-text-color);
}

.ribbon-blue .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

.ribbon-blue .ribbon-link {
	color: var(--ribbon-link-color);
}

.ribbon-blue-to-default {
	--ribbon-background-color: #f5f5f7;
	--ribbon-background-color-initial: #0071e3;
	--ribbon-text-color: #1d1d1f;
	--ribbon-text-color-initial: #fff;
	--ribbon-link-color: #06c;
	--ribbon-focus-color: rgba(0, 125, 250, 0.6);
	--ribbon-link-color-initial: #fff;
}

@keyframes animate-background-0071e3-f5f5f7 {
	0% {
		background-color: var(--ribbon-background-color-initial);
	}

	100% {
		background-color: var(--ribbon-background-color);
	}
}

.ribbon-blue-to-default .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color-initial);
	animation: animate-background-0071e3-f5f5f7 1s
		cubic-bezier(0.42, 0, 0.58, 1) 1.8s forwards;
}

@media (prefers-reduced-motion) {
	.ribbon-blue-to-default .ribbon-content-wrapper {
		background-color: var(--ribbon-background-color);
		animation: none;
	}
}

@keyframes animate-color-fff-1d1d1f {
	0% {
		color: var(--ribbon-text-color-initial);
	}

	100% {
		color: var(--ribbon-text-color);
	}
}

.ribbon-blue-to-default .ribbon-content {
	color: var(--ribbon-text-color-initial);
	animation: animate-color-fff-1d1d1f 1s cubic-bezier(0.42, 0, 0.58, 1) 1.8s
		forwards;
}

@media (prefers-reduced-motion) {
	.ribbon-blue-to-default .ribbon-content {
		color: var(--ribbon-text-color);
		animation: none;
	}
}

.ribbon-blue-to-default .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

@keyframes animate-color-fff-06c {
	0% {
		color: var(--ribbon-link-color-initial);
	}

	100% {
		color: var(--ribbon-link-color);
	}
}

.ribbon-blue-to-default .ribbon-link {
	color: var(--ribbon-link-color-initial);
	animation: animate-color-fff-06c 1s cubic-bezier(0.42, 0, 0.58, 1) 1.8s
		forwards;
}

@media (prefers-reduced-motion) {
	.ribbon-blue-to-default .ribbon-link {
		color: var(--ribbon-link-color);
		animation: none;
	}
}

.ribbon-drop-wrapper {
	animation: ribbon-drop 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@media (prefers-reduced-motion) {
	.ribbon-drop-wrapper {
		animation: none;
	}
}

.theme-dark .ribbon, .theme-dark.ribbon {
	--ribbon-background-color: #1d1d1f;
	--ribbon-text-color: #f5f5f7;
	--ribbon-link-color: #2997ff;
	--ribbon-focus-color: rgba(0, 125, 250, 0.6);
}

.theme-dark .ribbon .ribbon-content-wrapper, .theme-dark.ribbon .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color);
}

.theme-dark .ribbon .ribbon-content, .theme-dark.ribbon .ribbon-content {
	color: var(--ribbon-text-color);
}

.theme-dark .ribbon .ribbon-link:focus, .theme-dark.ribbon .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

.theme-dark .ribbon .ribbon-link, .theme-dark.ribbon .ribbon-link {
	color: var(--ribbon-link-color);
}

.theme-dark .ribbon-blue, .theme-dark.ribbon-blue {
	--ribbon-background-color: #0071e3;
	--ribbon-text-color: #fff;
	--ribbon-link-color: #fff;
	--ribbon-focus-color: rgba(255, 255, 255, 0.6);
}

.theme-dark .ribbon-blue .ribbon-content-wrapper, .theme-dark.ribbon-blue .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color);
}

.theme-dark .ribbon-blue .ribbon-content, .theme-dark.ribbon-blue .ribbon-content {
	color: var(--ribbon-text-color);
}

.theme-dark .ribbon-blue .ribbon-link:focus, .theme-dark.ribbon-blue .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

.theme-dark .ribbon-blue .ribbon-link, .theme-dark.ribbon-blue .ribbon-link {
	color: var(--ribbon-link-color);
}

.theme-dark .ribbon-blue-to-default, .theme-dark.ribbon-blue-to-default {
	--ribbon-background-color: #1d1d1f;
	--ribbon-background-color-initial: #0071e3;
	--ribbon-text-color: #f5f5f7;
	--ribbon-text-color-initial: #fff;
	--ribbon-link-color: #2997ff;
	--ribbon-focus-color: rgba(0, 125, 250, 0.6);
	--ribbon-link-color-initial: #fff;
}

@keyframes animate-background-0071e3-1d1d1f {
	0% {
		background-color: var(--ribbon-background-color-initial);
	}

	100% {
		background-color: var(--ribbon-background-color);
	}
}

.theme-dark .ribbon-blue-to-default .ribbon-content-wrapper, .theme-dark.ribbon-blue-to-default .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color-initial);
	animation: animate-background-0071e3-1d1d1f 1s
		cubic-bezier(0.42, 0, 0.58, 1) 1.8s forwards;
}

@media (prefers-reduced-motion) {
	.theme-dark .ribbon-blue-to-default .ribbon-content-wrapper, .theme-dark.ribbon-blue-to-default .ribbon-content-wrapper {
		background-color: var(--ribbon-background-color);
		animation: none;
	}
}

@keyframes animate-color-fff-f5f5f7 {
	0% {
		color: var(--ribbon-text-color-initial);
	}

	100% {
		color: var(--ribbon-text-color);
	}
}

.theme-dark .ribbon-blue-to-default .ribbon-content, .theme-dark.ribbon-blue-to-default .ribbon-content {
	color: var(--ribbon-text-color-initial);
	animation: animate-color-fff-f5f5f7 1s cubic-bezier(0.42, 0, 0.58, 1) 1.8s
		forwards;
}

@media (prefers-reduced-motion) {
	.theme-dark .ribbon-blue-to-default .ribbon-content, .theme-dark.ribbon-blue-to-default .ribbon-content {
		color: var(--ribbon-text-color);
		animation: none;
	}
}

.theme-dark .ribbon-blue-to-default .ribbon-link:focus, .theme-dark.ribbon-blue-to-default .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

@keyframes animate-color-fff-2997ff {
	0% {
		color: var(--ribbon-link-color-initial);
	}

	100% {
		color: var(--ribbon-link-color);
	}
}

.theme-dark .ribbon-blue-to-default .ribbon-link, .theme-dark.ribbon-blue-to-default .ribbon-link {
	color: var(--ribbon-link-color-initial);
	animation: animate-color-fff-2997ff 1s cubic-bezier(0.42, 0, 0.58, 1) 1.8s
		forwards;
}

@media (prefers-reduced-motion) {
	.theme-dark .ribbon-blue-to-default .ribbon-link, .theme-dark.ribbon-blue-to-default .ribbon-link {
		color: var(--ribbon-link-color);
		animation: none;
	}
}

.theme-light .ribbon, .theme-light.ribbon {
	--ribbon-background-color: #f5f5f7;
	--ribbon-text-color: #1d1d1f;
	--ribbon-link-color: #06c;
	--ribbon-focus-color: rgba(0, 125, 250, 0.6);
}

.theme-light .ribbon .ribbon-content-wrapper, .theme-light.ribbon .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color);
}

.theme-light .ribbon .ribbon-content, .theme-light.ribbon .ribbon-content {
	color: var(--ribbon-text-color);
}

.theme-light .ribbon .ribbon-link:focus, .theme-light.ribbon .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

.theme-light .ribbon .ribbon-link, .theme-light.ribbon .ribbon-link {
	color: var(--ribbon-link-color);
}

.theme-light .ribbon-blue, .theme-light.ribbon-blue {
	--ribbon-background-color: #0071e3;
	--ribbon-text-color: #fff;
	--ribbon-link-color: #fff;
	--ribbon-focus-color: rgba(255, 255, 255, 0.6);
}

.theme-light .ribbon-blue .ribbon-content-wrapper, .theme-light.ribbon-blue .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color);
}

.theme-light .ribbon-blue .ribbon-content, .theme-light.ribbon-blue .ribbon-content {
	color: var(--ribbon-text-color);
}

.theme-light .ribbon-blue .ribbon-link:focus, .theme-light.ribbon-blue .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

.theme-light .ribbon-blue .ribbon-link, .theme-light.ribbon-blue .ribbon-link {
	color: var(--ribbon-link-color);
}

.theme-light .ribbon-blue-to-default, .theme-light.ribbon-blue-to-default {
	--ribbon-background-color: #f5f5f7;
	--ribbon-background-color-initial: #0071e3;
	--ribbon-text-color: #1d1d1f;
	--ribbon-text-color-initial: #fff;
	--ribbon-link-color: #06c;
	--ribbon-focus-color: rgba(0, 125, 250, 0.6);
	--ribbon-link-color-initial: #fff;
}

@keyframes animate-background-0071e3-f5f5f7 {
	0% {
		background-color: var(--ribbon-background-color-initial);
	}

	100% {
		background-color: var(--ribbon-background-color);
	}
}

.theme-light .ribbon-blue-to-default .ribbon-content-wrapper, .theme-light.ribbon-blue-to-default .ribbon-content-wrapper {
	background-color: var(--ribbon-background-color-initial);
	animation: animate-background-0071e3-f5f5f7 1s
		cubic-bezier(0.42, 0, 0.58, 1) 1.8s forwards;
}

@media (prefers-reduced-motion) {
	.theme-light .ribbon-blue-to-default .ribbon-content-wrapper, .theme-light.ribbon-blue-to-default .ribbon-content-wrapper {
		background-color: var(--ribbon-background-color);
		animation: none;
	}
}

@keyframes animate-color-fff-1d1d1f {
	0% {
		color: var(--ribbon-text-color-initial);
	}

	100% {
		color: var(--ribbon-text-color);
	}
}

.theme-light .ribbon-blue-to-default .ribbon-content, .theme-light.ribbon-blue-to-default .ribbon-content {
	color: var(--ribbon-text-color-initial);
	animation: animate-color-fff-1d1d1f 1s cubic-bezier(0.42, 0, 0.58, 1) 1.8s
		forwards;
}

@media (prefers-reduced-motion) {
	.theme-light .ribbon-blue-to-default .ribbon-content, .theme-light.ribbon-blue-to-default .ribbon-content {
		color: var(--ribbon-text-color);
		animation: none;
	}
}

.theme-light .ribbon-blue-to-default .ribbon-link:focus, .theme-light.ribbon-blue-to-default .ribbon-link:focus {
	outline-color: var(--ribbon-focus-color);
}

@keyframes animate-color-fff-06c {
	0% {
		color: var(--ribbon-link-color-initial);
	}

	100% {
		color: var(--ribbon-link-color);
	}
}

.theme-light .ribbon-blue-to-default .ribbon-link, .theme-light.ribbon-blue-to-default .ribbon-link {
	color: var(--ribbon-link-color-initial);
	animation: animate-color-fff-06c 1s cubic-bezier(0.42, 0, 0.58, 1) 1.8s
		forwards;
}

@media (prefers-reduced-motion) {
	.theme-light .ribbon-blue-to-default .ribbon-link, .theme-light.ribbon-blue-to-default .ribbon-link {
		color: var(--ribbon-link-color);
		animation: none;
	}
}

.ribbon-container {
	position: relative;
}