@charset "utf-8";
.footer-box {
	background:#f5f5f5;
	margin:0 -15px;
	// 20200325 START 박지영 : redmine 6615
	word-break:normal;
	word-wrap: normal;
	// 20200325 END
	[dir="rtl"] & {
		 text-align: right;
	}
	@include screen(print) {
		display:none;
	}
	.skip_nav {
		max-width:1280px;
		margin:0 auto;
	}
	.footer-component {
		max-width:(1284px + 60px);
		margin:0 auto;
		padding: 0 30px;
		@include screen(custom, max, $max-sm){
			padding:0 24px;
		}
		.footer-caution {
			font-size:14px;
			line-height:20px;
			padding:25px 0;
			border-bottom:1px solid $line-gray;
			color:$color-dimgray;
			.caution-header {
				padding-bottom:25px;
				margin-bottom:25px;
				border-bottom:1px solid $line-gray;

			}
			a {
				color:$color-carmine;
				text-decoration:underline;
			}
			p {
				margin:0 0 19px;
				&:last-child {
					margin:0;
				}
			}
			strong, b {
				@include font-family($font-bold);
			}
			h1, h2, h3, h4, h5, h6 {
				font-size: 16px;
				font-weight: 600;
				color: #333;
				line-height: 24px;
				padding-bottom: 2px;
				@include screen(custom, max, $max-sm){
					padding-bottom: 7px;
				}
			}
		}
		.sub-contents.social {
			@extend %clearfix;
			padding:20px 0;
			border-bottom:1px solid $line-gray;
			@include screen(custom, max, $max-sm){
				padding:20px 0 18px;
			}
			.country-information-wrap{
				@include screen(custom, min, $min-md){
					float: left;
					padding-right:5px;
					[dir="rtl"] & {
						float: right;
						padding-right:0;
						padding-left:5px;
					}
				}
				@include screen(custom, max, $max-sm){
					&:only-child {
						padding-bottom:5px;
					}
				}
				.country-information {
					position:relative;
					padding:5px 0 0;
					display:inline-block;
					font-size:0;
					.icon-wrap{
						position:relative;
						display:inline-block;
						vertical-align:middle;
						line-height:25px;
						.flag-icon{
							width:19px;
							height:19px;
							display:block;
							border-radius:19px;
							margin-right:11px;
							[dir="rtl"] & {
								margin-right:0;
								margin-left:11px;
							}
						}
						.earth-icon{
							width:20px;
							height:20px;
							display:block;
							margin-right: 9px;
							[dir="rtl"] & {
								margin-left: 9px;
								margin-right: 0;
							}
							cursor:pointer;
							&:hover+.icon-tooltip{
								display:block;
							}
						}
						.icon-tooltip{
							display:none;
							width: 272px;
							position: absolute;
							z-index: 1000;
							bottom: 40px;
    						left: -14px;
							[dir="rtl"] & {
								left: auto;
								right: -14px;
							}
							&:before{
								position: absolute;
							    content: '';
							    border-color: #e4e4e4;
							    border-style: solid;
							    border-width: 0 0 1px 1px;
							    background: #fff;
							    width: 11px;
							    height: 11px;
								bottom: -5px;
								left: 18px;
								[dir="rtl"] & {
									left:auto;
									right:18px;
								}
								transform: rotate(-45deg);
							}
							.tooltip-inner{
								padding: 18px 24px;
								border-radius: .25rem;
							}
						}
					}

					>a{
						font-size:16px;
						line-height:25px;
						@include font-family($font-semibold);
						display:inline-block;
						vertical-align:middle;
					}
					.tooltip-area{
						min-width:125px;
						&.top-center{
							margin-left:0;
							transform: translateX(-50%);
						}
						.tooltip-inner{
							padding:5px 10px;
							a{
								color:#333333;
								font-size:14px;
								line-height:20px;
								@include font-family($font-regular);

							}
						}
					}
				}
			}
			.social-links {
				@include screen(custom, min, $min-md){
					text-align:right;
					[dir="rtl"] & {text-align:left;}
				}
				@include screen(custom, max, $max-sm){
					margin-top:26px;
				}
				li {
					position:relative;
					display:inline;
					@include screen(custom, max, $max-sm) {

						&:last-child {
							.social-icon {
								margin-right:0;
							}
						}
					}
					.tooltip-area{
						min-width:160px;
						.tooltip-inner{
							padding:24px 34px 24px 24px;
							a{
								display:block;
							}
						}

					}
				}
				.social-icon {
					position:relative;
					width:35px;
					height:35px;
					display:inline-block;
					margin-left:8px;
					[dir="rtl"] & {
						margin-left:0;
						margin-right:8px;
					}
					@include screen(custom, max, $max-lg){
						margin-bottom:12px;
						margin-left:0px;
						margin-right:8px;
						[dir="rtl"] & {
							margin-left:8px;
							margin-right:0px;
						}
					}
					img {width:100%;height:auto;}
					&.icon-facebook {
						background:url('/lg5-common-gp/images/common/icons/facebook-circle-fill.svg') left top no-repeat;
					}
					&.icon-twitter {
						background:url('/lg5-common-gp/images/common/icons/twitter-circle-fill.svg') left top no-repeat;
					}
					&.icon-google {
						background:url('/lg5-common-gp/images/common/icons/google-circle-fill.svg') left top no-repeat;
					}
					&.icon-pinterest {
						background:url('/lg5-common-gp/images/common/icons/pinterest-circle-fill.svg') left top no-repeat;
					}
					&.icon-youtube {
						background:url('/lg5-common-gp/images/common/icons/youtube-circle-fill.svg') left top no-repeat;
					}
					&.icon-email {
						background:url('/lg5-common-gp/images/common/icons/email-circle-fill.svg') left top no-repeat;
					}
					&.icon-instagram {
						background:url('/lg5-common-gp/images/common/icons/instagram-circle-fill.svg') left top no-repeat;
					}
					&.icon-linked-in {
						background:url('/lg5-common-gp/images/common/icons/linked-in-fill.svg') left top no-repeat;
					}
					&.icon-spiceworks {
						background:url('/lg5-common-gp/images/common/icons/spiceworks-fill.svg') left top no-repeat;
					}
					&.icon-snapchat {
						background:url('/lg5-common-gp/images/common/icons/snapchat-fill.svg') left top no-repeat;
					}
					// 20200421 START 이상현 - CN Wechat ui 추가. 디바이스 별 인터페이스 별도 적용.
					&.mobile {
						display:none;
						@include screen(custom, max, $max-sm){
							display:inline-block;
						}
					}
					&.desktop {
						display:inline-block;
						@include screen(custom, max, $max-sm){
							display:none;
						}
					}
					// 20200421 END
				}
			}
		}
		.footer-contents {
			@extend %clearfix;
			padding-top:30px;
			padding-bottom:50px;
			display:table;
			// 20200409 START 박지영 - footer 데이터 없는 경우 디자인 오류 수정
			width:100%;
			// 20200409 END
			@include screen(custom, max, $max-lg) {
				width:100%;
				display:block;
			}
			.no-link {
				font-size:14px;
				line-height:16px;
				color:$color-dimgray;
			}
			a {
				font-size:14px;
				line-height:16px;
				color:$color-dimgray;
				&.social-support-fb {
					display:inline-block;
					line-height:20px;
					&:before {
						display:inline-block;
						content:'';
						margin-right:8px;
						[dir="rtl"] & {
							margin-right:0;
							margin-left:8px;
						}
						width:20px;
						height:20px;
						vertical-align:middle;
						background:url('/lg5-common-gp/images/common/icons/facebook-circle-line-m.svg') left top no-repeat;
					}
				}
				&.social-support-tw {
					display:inline-block;
					line-height:20px;
					&:before {
						display:inline-block;
						content:'';
						margin-right:8px;
						[dir="rtl"] & {
							margin-right:0;
							margin-left:8px;
						}
						width:20px;
						height:20px;
						vertical-align:middle;
						background:url('/lg5-common-gp/images/common/icons/twitter-circle-line-m.svg') left top no-repeat;
					}
				}
			}
			ul {
				margin-bottom:0;

				li {
					margin-bottom:8px;
					&.social {
						margin-bottom:4px;
						a {
							color:$color-nightrider;
						}
					}
					&:last-child {
						margin-bottom:0;
					}
				}
			}
			.footer-title {
				margin-bottom:12px;
				.no-link,
				a,
				h5 { // LGECI-307 20201124 웹접근성 
					font-size:17px;
					line-height:21px;
					@include font-family($font-bold);
					color:$color-nightrider;
					// 20200325 START 박지영 : redmine 6615
					word-break:normal;
					word-wrap: normal;
					// 20200325 END
				}
				+ .footer-title {
					margin-top:24px;
				}
				+ .support-text {
					+ .footer-title {
						margin-top:29px;
					}
				}
				&:last-child {
					margin-bottom:0;
				}
			}
			.footer-sub-title {
				> .no-link,
				> a,
				h6 { // LGECI-307 20201124 웹접근성 
					font-size:16px;
					line-height:24px;
					@include font-family($font-regular);
					color:$color-black;
				}
				ul {
					margin-top:4px;
					margin-bottom:11px;
					li {
						padding-left:10px;
						[dir="rtl"] & {
							padding-left:0;
							padding-right:10px;
						}
					}
					//LGEIS-321 start
					&.paylogo{
						li{
							padding-left: 0;
							display: inline-block;
							margin-right: 2px;
							margin-bottom: 3px;
						}
					}
					//LGEIS-321 end
				}
			}
			.support-text {
				+ .support-text {
					margin-top:26px;
				}
				+ .link-text {
					margin-top:32px;
				}
				+ .footer-title {
					margin-top:24px;
				}
			}
			ul {
				+ .footer-title {
					margin-top:28px;
				}
			}


			.link-bottom {
				.link-wrap {
					margin-bottom:0;
				}
			}
			.footer-contents-box {
				width:16.978%;
				font-size:0;
				display:table-cell;
				// 20200429 START 이상현 - rtl 국가에서 footer 모바일 화면 수정
				vertical-align:top;
				@include screen("xl"){
					[dir="ltr"] & {
						border-right:1px solid $line-gray;
					}
					[dir="rtl"] & {
						border-left:1px solid $line-gray;
					}
				}
				.link-wrap {
					width:25%;
					display:inline-block;
					vertical-align:top;
					margin-bottom:25px;
					//&:nth-child(5),
					//&:nth-child(6),
					//&:nth-child(7),
					//&:nth-child(8){
					//	margin-bottom:0;
					//}
					/*
					.link-about-lg {
						margin-top:55px;
						@include screen(custom, max, $max-lg) {
							margin-top:0;
						}
					}
					*/
				}
				[dir="ltr"] &:not(:last-child) .link-wrap {
					padding-right:25px;
				}
				[dir="rtl"] &:not(:last-child) .link-wrap {
					padding-left:25px;
				}
				// 20200429 END
				.box-wrap {
					+ .box-wrap {
						margin-top:24px;
					}
				}
				&.column-4 {
					width:65.9%;
					.box-wrap {
						+ .box-wrap {
							margin-top:0px;
							.link-wrap {
								margin-bottom:0;
							}
						}
					}
				}
				&.column-1 {
					.link-wrap {
						width:100%;
						[dir="ltr"] & {
							padding-left:25px;
						}
						[dir="rtl"] & {
							padding-right:25px;
						}
						@include screen(custom, max, $max-lg) {
							padding-left:0;
							padding-right:0;
							width:25%;
							//margin-bottom:0;
							[dir="ltr"] & {
								padding-left:0;
							}
							[dir="rtl"] & {
								padding-right:0;
							}
							.box-wrap {
								+ .box-wrap {
									margin-top:0;
								}
								width:100%;
								[dir="ltr"] & {
									padding-right:25px;
								}
								[dir="rtl"] & {
									padding-left:25px;
								}
								display:inline-block;
								vertical-align:top;
							}
						}
					}
					ul {
						padding-bottom:5px;
					}
					.support-text {
						display:inline-block;

					}
					/*
					&:last-child {
						@include screen(custom, max, $max-lg) {
							.box-wrap {
								width:25%;
								&:nth-child(2){
									width:25%;
									.support-text {
										width:100%;
										+ .support-text {
											margin-top:23px;
										}
										+ .link-text {
											margin-top:0px;
											vertical-align:top;
											line-height:16px;
										}
									}
								}
							}
						}
						@include screen(custom, max, $max-md) {
							.box-wrap {
								width:25%;
								&:nth-child(2){
									width:50%;
									.support-text {
										width:50%;
										+ .support-text {
											margin-top:0px;
										}
										+ .link-text {
											margin-top:0px;
											vertical-align:top;
											line-height:16px;
										}
									}
								}
								&:last-child {
									margin-top:24px;
								}
							}
						}
					}
					*/
				}
				span:not(.no-link) {
					display:block;
					font-size:14px;
					line-height:16px;
					margin-bottom:8px;
					color:$color-nightrider;
					&:last-child {
						margin-bottom:0;
					}
				}
				@include screen(custom, max, $max-lg) {
					width:100%;
					display:block;
					border-right:0;
					border-bottom:1px solid $line-gray;
					padding-bottom:19px;
					margin-bottom:22px;
					&:last-child {
						border-bottom:0;
						margin-bottom:0;
						padding-bottom:0;
					}
					&.column-4 {
						width:100%;

					}

				}
				.ico-right {
					line-height:24px;
					&:after {
						background:url('/lg5-common-gp/images/common/icons/page-right.svg') 0 1px no-repeat;
					}
				}
				.ico-blank {
					text-decoration:none;
					&:hover {
						text-decoration:underline;
					}
					&:after {
						background:url('/lg5-common-gp/images/common/icons/blank-dimgray.svg') 0 0 no-repeat;
					}
				}
				//&:nth-child(2) {
				//	.link-wrap {
				//		padding-right:0;
				//	}
				//}
				&:last-child {
					[dir="ltr"] & {
						border-right:0;
					}
					[dir="rtl"] & {
						border-left:0;
					}
					.link-wrap {
						padding-right:0;
						&:first-child {
							.box-wrap {
								.footer-title {
									&:last-child {
										margin-bottom:0;
									}
								}
							}
						}
					}
					@include screen(custom, max, $max-lg) {
						.link-wrap {
							//width:100%;
							/*
							.box-wrap {
								width:100%;
								.support-text {
									width:160px;
									margin-top:0;

								}
								.ico-right {
									margin-top:0;
									vertical-align:top;
								}
							}
							*/
						}
					}
				}
			}
		}
	}
	.footer-bottom-box {
		background:$bg-nightrider;
		.footer-bottom {
			margin:0 15px;
			padding:0 15px;
			a {
				&.ico-blank {
					&:after {
						@extend %linkicon;margin-left:6px;
						background:url('/lg5-common-gp/images/common/icons/blank-white.svg') no-repeat 0 0;
					}
				}
			}
			&.banner-count1 .footer-component .bottom-links {
				.links-left {
					width:calc(100%-250px);
				}
				@include screen(custom, max, 950) {
					.links-left {width: 100%;}
					.links-right {
						position: relative;
						width:100%;
						top:auto;
						left:auto;
						transform: none;
						margin-top: 17px;
					}
				}
			}
			&.banner-count2 .footer-component .bottom-links {
				.links-left {
					width:calc(100%-500px);
				}
				@include screen(custom, max, 1080) {
					.links-left {width: 100%;}
					.links-right {
						position: relative;
						width:100%;
						top:auto;
						left:auto;
						transform: none;
						margin-top: 17px;
					}
				}
			}
			&.banner-count3 .footer-component .bottom-links {
				.links-left {
					width:calc(100%-750px);
				}
				@include screen(custom, max, 1155) {
					.links-left {width: 100%;}
					.links-right {
						position: relative;
						width:100%;
						top:auto;
						left:auto;
						transform: none;
						margin-top: 17px;
					}
				}
			}
			&.banner-count4 .footer-component .bottom-links {
				.links-left {
					width:calc(100%-1000px);
				}
				@include screen(custom, max, $max-lg) {
					.links-left {width: 100%;}
					.links-right {
						position: relative;
						width:100%;
						top:auto;
						left:auto;
						transform: none;
						margin-top: 17px;
					}
				}
			}
			
			.footer-component {
				max-width:1284px;
				margin:0 auto;
				padding:22px 0;
				font-size:0;
				.bottom-links {
					position:relative;
					min-height: 58px;
					.links-left {
						width:100%;
						min-width:364px;
						ul{
							@extend %clearfix;
							li{
								position: relative;
								float: left;
								margin-right:30px;
								[dir="rtl"] & {
									float: right;
									margin-right:0;
									margin-left:30px;
								}
								line-height: 18px;
								/*
								&:first-child {
									margin-right:40px;
									[dir="rtl"] & {
										margin-right:0;
										margin-left:40px;
									}
									&:after {
										@include pseudo();
										position:absolute;
										right:-20px;
										top:50%;
										[dir="rtl"] & {
											right:auto;
											left:-20px;
										}
										margin-top:-5px;
										width:1px;
										height:10px;
										background:$bg-dimgray;
									}
								}
								*/
							}
						}
						a {
							font-size:14px;
							line-height:24px;
							color:$color-white;
							@include font-family($font-regular);
							display:inline-block;
							position:relative;
						}
					}
					.links-right {
						position:absolute;
						right:0;
						[dir="rtl"] & {
							right:auto;
							left:0;
						}
						top: 0;
						a {
							font-size:14px;
							line-height:19px;
							color:$color-nightrider;
							@include font-family($font-regular);
							text-transform:none;
							display:inline-block;
							vertical-align:middle;
							width:240px;
							height:58px;
							border-radius:3px 3px;
							padding: 9px 0 0 62px;
							word-break: normal;
							background:$bg-white url('/lg5-common-gp/images/common/footer/icon-jungdo.jpg') 0 0 no-repeat;
							[data-countrycode=cn] &,
							[data-countrycode=tw] &,
							[data-countrycode=jp] & {
								font-size:13px;
							}
							// 20200429 START 이상현 - footer 정도경영 배너 ltr 화면 고정.
							&[data-link-area="footer-jeongdo_management"] {
								direction:ltr;
								text-align:left;
								&:after {
									margin: 0 0 0 3px;
									transform: none;
								}
							}
							// [dir="rtl"] & {
							// 	padding: 9px 62px 0 0;
							// 	background:$bg-white url('/lg5-common-gp/images/common/footer/icon-jungdo.jpg') 95% 0 no-repeat;
							// }
							// 20200429 END
							&:after {
								background:url('/lg5-common-gp/images/common/icons/link-right-nightrider.svg') 0 1px no-repeat;
							}
							&.cn_link1 {
								padding: 0;
								background: none;
								width: auto;
								height: auto;
								margin-right: 5px;
								[dir="rtl"] & {
									margin-right: 0;
									margin-left: 5px;
								}
							}
							&.cn_link2 {
								width:263px;
								color:#fff;
								padding-left:49px;
								background:$bg-nightrider url('/lg5-common-gp/images/common/footer/icon-cn01.png') 0 0 no-repeat;
								[dir="rtl"] & {
									padding-left:0;
									padding-right:49px;
									background:$bg-nightrider url('/lg5-common-gp/images/common/footer/icon-cn01.png') 100% 0 no-repeat;
								}
								span{
									font-weight: bold;
								}
							}
							&.uk_link1 {
								font-size: 18px;
								background: #fff;
								padding: 0;
								width: 240px;
								height: 58px;
								line-height: 58px;
								margin-right: 10px;
								[dir="rtl"] & {
									margin-right: 0;
									margin-left: 10px;
								}
								text-align: center;
							}
							&.vn_link1 {
								padding: 0;
								background: none;
								width: auto;
								height: auto;
								margin-right: 15px;
								[dir="rtl"] & {
									margin-right: 0;
									margin-left: 15px;
								}
							}
						}
					}
				}
				.copyright {
					margin-top:5px;
					font-size:14px;
					line-height:20px;
					color:#b2b2b2;
					@include font-family($font-regular);
					a.description {
						display: block;
						text-decoration: underline;
						margin-top: 5px;
						margin-right:0 !important;
						line-height:20px;
						color:#b2b2b2;
						&:after {
							display:none !important;
						}
					}
					.info{
						margin-top: 8px;
						// 20200511 START 박지영 - footer에 이메일 링크 추가
						a {
							color:#b2b2b2;
							text-decoration: underline;
						}
						// 20200511 END
					}
				}
			}
		}
	}
	/*
	[dir="rtl"] & {
		.footer-main-contents{
			&.business{
				.footer-contents{
					.footer-contents-box{
						border-right:1px solid #e4e4e4;
					}
					.link-wrap{
						@include screen(custom, min, $min-xl){
							padding:0;
						 }
					}
				}
			}
		}
	}
	*/
	// 20200421 START 이상현 - CN Wechat ui 추가. 디바이스 별 인터페이스 별도 적용.
	// Icon layer popup
	.local-layer {
		display:none;
		background: $bg-white;
		border: 1px solid $line-gray;
		border-radius: 3px;
		margin-top: 30px;
		position: absolute;
		z-index:1;
		top: 100%;
		right:-1px;
		padding: 24px 34px 24px 24px;
		[dir="rtl"] & {
			right:auto;
			left:-1px;
			padding: 24px 24px 24px 34px;
		}
		&.active {
			display:block;
		}
		&:before {
			content:'';
			width: 11px;
			height: 11px;
			border-color: $line-gray;
			border-style: solid;
			border-width: 1px 1px 0 0;
			background: $bg-white;
			transform: rotate(-45deg);
			position: absolute;
			top:-6px;
			right:12px;
			[dir="rtl"] & {
				right:auto;
				left:12px;
			}
		}
		img {max-width:100%;}
		// QR CODE
		.qr-image {
			width: 100px;
			height: 100px;
			background:$color-nightrider;
		}
		.btn-close {
			position: absolute;
			top: 12px;
			border: none;
			background: url("/lg5-common-gp/images/common/icons/popover-close.svg");
			width: 12px;
			height: 12px;
			right: 12px;
			[dir="rtl"] & {
				right:auto;
				left:12px;
			}
		}
	}
	// 20200421 END
}
.footer-box .visible-mobile {
	.footer-component .footer-contents {
		margin-bottom:0;
		padding-bottom:0;
		padding-top:0;
		.footer-contents-box {
			border-bottom:0;
			padding-bottom:0;
			margin-bottom:30px;
			padding-top:24px;
			&:only-child {
				margin-top:-1px;
			}
			.footer-title {

				font-size:18px;
				line-height:24px;
				color:$color-black;
				margin-bottom:7px;
			}
			.link-wrap {
				display:block;
				width:100%;
				padding-right:0;
				margin-bottom:0;
				.box-wrap {
					.footer-title {
						.no-link,
						a {
							font-size:17px;
							line-height:21px;
							color:$color-nightrider;
							@include font-family($font-semibold);
						}
					}
					.support-text {
						margin-top:0;
						width:50%;
						display:inline-block;
						vertical-align:top;
						li,
						span {
							font-size:14px;
							line-height:22px;

						}
					}
					.footer-title .support-text {
						width:100%;
						padding-top:7px;
					}
					.ico-right {
						margin-top:9px;
					}
				}
			}
			&.site-list {
				padding-top:0;
				margin-bottom:9px;
				.link-wrap {
					border-top:1px solid $line-gray;
					//&:last-child {
					//	border-bottom:0;
					//}
				}

				.category-block {

					&:first-of-type {
						.depth-category {
							border-top:0;
						}
					}
				}
			}
			.box-wrap {
				+ .box-wrap {
					margin-top:28px;
				}
				&.half {
					@extend %clearfix;
					.footer-title {
						float:left;
						[dir="rtl"] & {
							float:right;
						}
						width:50%;
						margin:0;
					}
				}
				span {
					margin-bottom:0;
				}
				&:last-child {
					ul {
						@extend %clearfix;
						li {
							width:50%;
							float:left;
							[dir="rtl"] & {
								float:right;
							}
							margin-bottom:0;
						}
					}
					@extend %clearfix;
					div.social {
						width:50%;
						float:left;
						[dir="rtl"] & {
							float:right;
						}
						margin-bottom:0;
					}
				}
			}
		}

		.depth-1 {
			position:relative;
			display:block;
			margin-bottom:0 !important;
			@include font-family($font-semibold);
			&.has-category {
				background:url('/lg5-common-gp/images/common/icons/accordion-open-nightrider.svg') 100% center no-repeat;
				[dir="rtl"] & {
					background:url('/lg5-common-gp/images/common/icons/accordion-open-nightrider.svg') 0 center no-repeat;
				}
			}
			&.on {
				background:url('/lg5-common-gp/images/common/icons/accordion-close-nightrider.svg') 100% center no-repeat;
				[dir="rtl"] & {
					background:url('/lg5-common-gp/images/common/icons/accordion-close-nightrider.svg') 0 center no-repeat;
				}
				border-bottom:1px solid $line-gray;
				a {
					span {

						&:after {
							@include pseudo();
							position:absolute;
							bottom:-2px;
							width:100%;
							height:1px;
							border-bottom:1px solid $line-black;
						}
					}
					&.no-link {
						span {
							&:after {display:none;}
						}
					}
				}
			}
			a {
				display:block;
				padding:13px 0 16px;
				span {
					font-size:17px;
					line-height:21px;
					color:$color-black;
					position:relative;
					display:inline-block;
					@include font-family($font-semibold);
				}
			}

		}
		.depth-2 {
			position:relative;
			display:none;
			overflow:hidden;
			.category-block {
				margin-bottom:-1px;
			}
			.depth-category {
				position:relative;
				display:block;
				padding:0 10px;
				margin-bottom:0;
				border-top:1px solid $line-lightgray;
				border-bottom:1px solid $line-lightgray;
				.category-button {
					@include font-family($font-semibold);
					padding:18px 0 14px;
					display:block;
					text-decoration:none;
					span {
						font-size:16px;
						line-height:1;
						color:$color-black;
						position:relative;
						display:inline-block;
					}
				}
				&.on {
					.category-button {
						span {
							&:after {
								@include pseudo();
								position:absolute;
								bottom:-2px;
								width:100%;
								height:1px;
								border-bottom:1px solid $line-black;
							}
						}
					}
				}
				&.has-category {
					.category-button {
						background:url('/lg5-common-gp/images/common/icons/accordion-expand-nightrider.svg') right center no-repeat;
						[dir="rtl"] & {
							background:url('/lg5-common-gp/images/common/icons/accordion-expand-nightrider.svg') left center no-repeat;
						}
					}
					&.on {
						.category-button {
							background:url('/lg5-common-gp/images/common/icons/accordion-fold-nightrider.svg') right center no-repeat;
							[dir="rtl"] & {
								background:url('/lg5-common-gp/images/common/icons/accordion-fold-nightrider.svg') left center no-repeat;
							}
						}
					}
				}
			}

			.depth-1-category-link {
				position:relative;
				display:block;
				padding:0 10px;
				a {
					@include font-family($font-semibold);
					padding:15px 0 16px;
					display:block;
					font-size:16px;
					line-height:1;
					color:$color-black;
				}
			}

		}
		.depth-1-list,
		.depth-2-list {
			position:relative;
			display:none;
			overflow:hidden;
			ul {
				padding:11px 0 0;
			}

			li {
				&:last-child {
					padding-bottom:0;
				}
				.no-link,
				a {
					font-size:16px;
					line-height:1;
					color:$color-dimgray;
					padding:0px 10px 15px;
					display:block;
				}
			}
		}
		.button-layer {
			position:absolute;
			width:40px;
			height:100%;
			z-index:2;
			right:0;
			top:0;
			background:none;
		}
		.depth-2-list {
			.depth-2-category-link {
				a {
					@include font-family($font-semibold);
					color:$color-black;
				}
			}
			&.in-depth {
				li {
					padding-left:10px;
					[dir="rtl"] & {
						padding-left:0;
						padding-right:10px;
					}
					&.depth-title {
						padding-left:0;
						[dir="rtl"] & {
							padding-right:0;
						}
						.no-link,
						a {
							span {
								@include font-family($font-semibold);
								font-size:16px;
								line-height:20px;
								color:$color-black;
								display:inline-block;
								position:relative;

							}
						}
						a {
							&:hover {
								span {
									text-decoration:underline;
								}
							}
						}
					}
					//LGEIS-321 start
					.paylogo{
						padding: 0 0 15px 10px;
						li{
							padding-left: 0;
							display: inline-block;
							margin-right: 2px;
							margin-bottom: 3px;
							>img{
								width: 50px;
							}
						}
					}
					//LGEIS-321 end
				}
				li + li.depth-title {
					padding-top:0;
				}
			}
		}
	}
	.footer-bottom-box {
		.footer-bottom {
			padding:0 24px;
			margin:0;
			.footer-component {
				.bottom-links {
					ul{
						@extend %clearfix;
						margin-bottom:9px;
						li{
							position: relative;
							float: left;
							margin-right:24px;
							[dir="rtl"] & {
								float: right;
								margin-right:0;
								margin-left:24px;
							}
							line-height: 18px;
							/*
							&:first-child {
								margin-right:40px;
								[dir="rtl"] & {
									margin-right:0;
									margin-left:40px;
								}
								&:after {
									@include pseudo();
									position:absolute;
									right:-20px;
									[dir="rtl"] & {
										right:auto;
										left:-20px;
									}
									top:50%;
									margin-top:-5px;
									width:1px;
									height:10px;
									background:$bg-dimgray;
								}
							}
							*/
						}
					}
					a {
						font-size:14px;
						line-height:24px;
						color:$color-white;
						@include font-family($font-regular);
						display:inline-block;
						position:relative;
					}
				}
				.copyright {
					margin-top:10px;
					font-size:14px;
					line-height:20px;
				}

			}
			.links-bottom {
				margin-left:-24px;
				margin-right:-24px;
				line-height:58px;
				background:$bg-white;
				.links-wrap {
					display:block;
					width:100%;
					height:100%;
					a {
						position: relative;
						font-size:14px;
						line-height:19px;
						text-transform:none;
						color:$color-nightrider;
						display:inline-block;
						width:100%;
						height:100%;
						vertical-align: middle;
						border-top: 1px solid $line-gray;
						@include font-family($font-regular);
						word-break: normal;
						[data-countrycode=cn] &,
						[data-countrycode=tw] &,
						[data-countrycode=jp] & {
							font-size:13px;
						}
						height: 58px;
						padding: 18px 24px 0 80px;
						[dir="rtl"] & {
							padding: 18px 80px 0 24px;
						}
						background:url('/lg5-common-gp/images/common/footer/icon-jungdo-m.jpg') 14px center no-repeat;
						[dir="rtl"] & {
							@include screen(custom, max, $max-sm) {
								background:url('/lg5-common-gp/images/common/footer/icon-jungdo-m.jpg') calc(100% - 23px) center no-repeat;
							}
						}
						@include screen(custom, max, 320) {
							padding-top:18px;
							height:77px;
						}

						&:after {
							background:url('/lg5-common-gp/images/common/icons/link-right-nightrider.svg') 0 1px no-repeat;
						}
						&.cn_link1,&.cn_link2,&.uk_link1,&.vn_link1{
							background: none;
							padding-left: 25px;
						}
						&.cn_link1{
							padding-top: 9px;
							@include screen(custom, max, $max-sm) {
								padding: 9px 25px 0 24px;
							}
							@include screen(custom, max, 320) {padding-top:18px;}
						}
						&.cn_link2{
							padding-top: 9px;
							padding-left: 83px;
							background:url('/lg5-common-gp/images/common/footer/icon-cn01.png') 22px center no-repeat;
							[dir="rtl"] & {
								background:url('/lg5-common-gp/images/common/footer/icon-cn01.png') calc(100% - 23px) center no-repeat;
							}
							span{
								font-weight: bold;
							}
							@include screen(custom, max, 320) {padding-top:18px;}
						}
						&.uk_link1{
							color:$color-nightrider;
							font-size: 18px;
							line-height:38px;
							padding-top:10px;
							padding-bottom:10px;
							@include screen(custom, max, 320) {padding-top:18px;padding-bottom:18px;line-height:41px;}
							[dir="rtl"] & {
								@include screen(custom, max, $max-sm) {
									padding:18px 24px 0 80px;
								}
							}
						}
						&.vn_link1{
							padding-top: 9px;
							height: 78px;
							[dir="rtl"] & {
								@include screen(custom, max, $max-sm) {
									padding:9px 25px 0 0;
								}
							}
						}
						&:first-child{
							border-top: 0;
						}
					}
				}
			}
			@include screen(custom, max, 375) {
				[data-countrycode=cn] &,
				[data-countrycode=tw] &,
				[data-countrycode=jp] & {
					.links-bottom .links-wrap a{padding-top: 10px;}
				}
			}
			@include screen(custom, max, 320) {
				[data-countrycode=cn] &,
				[data-countrycode=tw] &,
				[data-countrycode=jp] & {
					.links-bottom .links-wrap a{padding-top: 18px;}
				}
			}
		}
	}
}

.hidden-mobile {display:block;}
.visible-mobile {display:none;}
@include screen(custom, max, $max-sm) {
	.hidden-mobile { display:none;}
	.visible-mobile {display:block;}
}
//b2b footer
.footer-box .business {
	.footer-component {
		.footer-contents {
			@include screen(custom, max, $max-sm) {
				padding-top:0;
				// margin-top:0;
			}
			.footer-contents-box {
				width:20%;
				padding:0 25px;
				&:first-child {
					[dir="ltr"] & {
						padding-left:0;
					}
					[dir="rtl"] & {
						padding-right:0;
					}
					.box-wrap {
						@extend %clearfix;
					}
				}
				&.site-list {
					//@include screen(custom, max, $max-sm) {
					//	padding-bottom:10px;
					//}
					.link-wrap {
						@include screen(custom, max, $max-sm) {
							&:first-child {
								//border-top:1px solid $line-gray;
							}
						}
					}
				}
				&.support {
					@include screen(custom, max, $max-lg) {
						padding:0 25px 0 0;

					}
				}

				.link-wrap {
					width:100%;
					[dir="ltr"] & {
						padding-right:0;
					}
					[dir="rtl"] & {
						padding-left:0;
					}
					@include screen(custom, max, $max-md) {
						&:first-child {
							.box-wrap {
								margin-top:-8px;
							}
						}
						&:last-child {
							margin-bottom:0;
						}

					}
					&:only-child {
						margin-bottom:0;
					}
					&:last-child {
						margin-bottom:0;
					}
				}
				.inner-box-wrap {
					@include screen(custom, max, $max-lg) {
						padding-bottom:12px;
					}
				}
				@include screen(custom, max, $max-lg) {
					display:table-cell;
					border-bottom:0;
					[dir="ltr"] & {
						border-right:1px solid $line-gray;
					}
					[dir="rtl"] & {
						border-left:1px solid $line-gray;
					}
					padding:0 25px;
					width:25%;

					&:nth-child(4) {
						[dir="ltr"] & {
							border-right:0;
						}
						[dir="rtl"] & {
							border-left:0;
						}
					}
					&:nth-child(5) {
						padding:0;
						width:100%;
						display:block;
						border-right:0;
						border-left:0;
						clear:both;
						border-top:1px solid $line-gray;
						margin-top:25px;
						@include screen(custom, max, $max-sm) {
							&:first-child {border-top:0;}
						}
						.link-wrap {
							width:25%;
							@include screen(custom, max, $max-sm) {
								width:100%;
							}
							&:first-child {
								.box-wrap {
									margin-top:0;
									margin-bottom:0;
									padding-left:0;
								}
							}
						}
						.box-wrap {
							padding-left:25px;
							padding-right:25px;
						}
						.footer-title {
							width:100%;
							display:inline-block;
							vertical-align:top;
							margin-top:24px;
							padding:0;
						}
					}
				}

				@include screen(custom, max, $max-sm) {
					padding:0;
					width:100%;
					display:block;
					[dir=ltr] &,
					[dir=rtl] & {
						border-right:0;
						border-left:0;
					}
					clear:both;
					&:first-child {
						border-bottom:0;
						padding-bottom:0;
						margin-bottom:10px;
					}
					&.contents-top {
						padding:24px 0 16px;
						margin-bottom:7px;
						.link-wrap {
							.box-wrap {
								margin-top:0;
								+ .box-wrap {
									margin-top:28px;
								}
								.footer-title {
									padding:0;
								}
								&.contact {
									.footer-title {
										float:left;
										[dir="rtl"] & {
											float:right;
										}
										width:50%;
										margin:0 0 7px 0;
									}
									.support-text {
										clear:both;
										vertical-align:top;
										a {
											margin-top:0;
											line-height:22px;
										}
									}
								}
							}
						}
					}
				}

			}
		}
		.footer-bottom-box {
			.connect-link {
				margin-top:5px;
				a {
					font-size:14px;
					line-height:24px;
					color:#b2b2b2;
					text-decoration:underline;
				}
			}
			.footer-bottom {
				.footer-component {
					.links-left {
						a {
							margin-bottom:3px;
						}
					}
					.copyright {
						margin-top:2px;
					}
					@include screen(custom, max, $max-md) {
						.bottom-links {
							position:relative;

							.links-left {
								a {
									margin-bottom:5px;
								}
							}
							.links-right {
								top:0;
								transform:none;
							}
						}
						.copyright {
							margin-top:0;
						}
					}
					@include screen(custom, max, $max-sm) {
						padding-bottom:25px;
						.bottom-links {
							margin-bottom:10px;
						}

						.connect-link {
							margin-top:8px;
						}
					}
				}
			}
		}
	}

	// mobile view, 2depth, 3depth
	.visible-mobile {
		.footer-component {
			.footer-contents {
				ul {
					li {
						padding-left:10px;
						[dir="rtl"] & {
							padding-left:0;
							padding-right:10px;
						}
						&.depth-title {
							padding-left:0;
							[dir="rtl"] & {
								padding-right:0;
							}
							.no-link,
							a {
								@include font-family($font-semibold);
								font-size:16px;
								line-height:20px;
								color:$color-black;
								display:inline-block;
								position:relative;
							}
							a {
								&:hover {
									text-decoration:underline;
								}
							}
						}
					}
					li + li.depth-title {
						padding-top:0;
					}
				}
			}
		}
	}
}