/* common */
#container {
  background: url(../img/bg.jpg) no-repeat 50% -164px;
	background-size: cover;
}

.point {
	color: #e99d1a; vertical-align: middle;
}


/* sub */
article[id^='section0'] > .box {
	position: relative;
	padding: 110px 95px 70px; margin: 0 auto;
	width: 1280px;
	background-color: #fff;
	border: 8px solid #200605; border-radius: 30px;
	box-shadow: 10px 10px 0 rgba(78,78,78,.35);
	box-sizing: border-box;

	h2 {
		position: absolute; top: -55px; left: 50%;
		font-size: 0;
	}

	> dl {
		display: flex; gap: 30px;
		margin-bottom: 10px;

		&:last-child {margin-bottom: 0;}

		> dt {
			width: 50px; height: 50px;
			font-family: 'GmarketSansMedium'; font-size: 23px; font-weight: bold;
			color: #fff; text-align: center; line-height: 55px;
			background-color: #f5a91b; border-radius: 10px;
		}
		> dd {
			padding: 10px 30px 10px 35px;
			width: calc(100% - 80px);
			font-size: 24px; font-weight: bold;
			color: #2b1d19; word-break: keep-all;
			background-color: #f2f2f2; border-radius: 10px;
			box-sizing: border-box;

			.point {
				font-size: 22px; font-weight: normal;
				letter-spacing: -1.8px; vertical-align: middle;
			}
			.exp {
				position: relative;
				padding-left: 15px;

				span {
					position: absolute; left: 0; top: 1px;
				}
			}

			> dl {
				display: flex; gap: 10px;
				margin-top: 10px;

				dt {
					width: 100px; height: 35px;
					font-size: 22px;
					color: #fff; text-align: center; line-height: 35px;
					background-color: #f5a91b; border-radius: 10px;
				}
			}
		}
	}

	@media screen and (max-width: 1280px) {
		padding: 55px 22px 37px;
		width: calc(100% - 46px);
		border-width: 4px;
		box-shadow: 4px 4px 0 rgba(78,78,78,.35);

		dl {
			gap: 15px;
			margin-bottom: 10px;

			dt {
				width: 25px; height: 25px;
				font-size: 13px;
				line-height: 28px; 
				border-radius: 8px;
			}
			dd {
				padding: 10px 10px 10px 15px;
				width: calc(100% - 40px);
				font-size: 12px;
				word-break: break-all;
			}
		}
	}
}

#section01 {
	display: flex; flex-direction: column; align-items: center;
	position: relative;
	z-index: 1;

	.main_visual {
		.img {
			width: 1437px; height: 830px;
			font-size: 0;
			background: url(../img/main_tit.png) no-repeat center/contain;
			margin-top: 5px;
		}

		i {display: none;}
	}

	.wrap_video {
		padding: 75px 105px; margin: -50px 0 70px;
		width: 1280px; height: 825px;
		background-color: #fff;
		border: 8px solid #200605; border-radius: 30px;
		box-shadow: 10px 10px 0 rgba(78,78,78,.35);
		box-sizing: border-box;

		&:last-child {margin-bottom: 0;}

		.box {
			height: 550px;
			background-color: #000;
			border-radius: 30px;
			overflow: hidden;

			iframe {
				width: 100%; height: 100%;
			}
		}

		.btn {
			display: block;
			margin: 50px auto 0;
			width: 550px; height: 90px;
			font-family: 'GmarketSansMedium'; font-size: 26px; font-weight: bold;
			color: #200605; text-align: center; line-height: 77px; text-decoration: none;
			background-color: #f5a91b;
			border: 9px solid #200605; border-radius: 35px;
			box-sizing: border-box;

			&:after {
				content: '';
				display: inline-block;
				margin: -4px 0 0 10px;
				width: 43px; height: 26px;
				vertical-align: middle;
				background: url(../img/btn_arrow.png) no-repeat;
			}
		}
	}

	@media screen and (max-width: 1280px) {
		padding-top: 30px;

		.main_visual {
			position: relative;
			width: calc(100% - 67px);

			&:before {
				content: ''; 
				display: block;
				padding-top: 100%;
			}

			.img {
				position: absolute;
				left: 0; top: 0; right: 0; bottom: 0;
				width: 100%; height: auto;
				background: url(../img/mobile/main_visual.png) no-repeat 50%;
				background-size: contain;
			}

			i {
				position: absolute; 
				display: block;

				&.m_icn01 {
					top: 0; left: -34px;
					width: 102.5px; height: 166.5px;
					background: url(../img/mobile/main_icn01.png) no-repeat;
					background-size: contain;
				}
				&.m_icn02 {
					top: 30px; right: -33px;
					width: 68px; height: 119.5px;
					background: url(../img/mobile/main_icn02.png) no-repeat;
					background-size: contain;
				}
				&.m_icn03 {
					left: -35px; bottom: -64px;
					width: 111.5px; height: 173.5px;
					background: url(../img/mobile/main_icn03.png) no-repeat;
					background-size: contain;
				}
				&.m_icn04 {
					right: -33px; bottom: -43px;
					width: 94.5px; height: 147px;
					background: url(../img/mobile/main_icn04.png) no-repeat;
					background-size: contain;
				}
			}
		}

		.wrap_video {
			position: relative;
			padding: 30px 15px 35px; margin: 0 0 20px;
			width: calc(100% - 46px); height: auto;
			box-shadow: 4px 4px 0 rgba(78,78,78,.35);

			.box {
				position: relative;
				height: auto;

				&:before {
					content: '';
					display: block;
					padding-top: 53%;
				}

				iframe {
					position: absolute; left: 0; top: 0; right: 0; bottom: 0;
				}
			}
			.btn {
				margin: 20px auto 0;
				width: 100%; height: 45px;
				font-size: 13px;
				line-height: 42px;
				border-width: 4px;

				&:after {
					margin: 1px 0 0 15px;
					width: 22px; height: 18px;
					background-size: contain;
				}
			}
		}

	}
}

#section02 {
	padding: 255px 0 120px;
	background-color: #f5a91b;
	border-top: 8px solid #200605; border-bottom: 8px solid #200605;
	transform: translateY(-115px);
	
	.box {
		h2 {
			margin-left: -211px;
			width: 422px; height: 99px;
			background: url(../img/sec02_tit.png) no-repeat 50%;
		}
		
		i {display: none;}
		.date {font-size: 21px;}
		
		> dl {
			gap: 0;
			margin-bottom: 15px;

			> dt {
				width: 170px; height: auto;
				font-size: 24px; font-weight: bold;
				color: #f5a91b;
				text-align: left;
				background-color: transparent;
			}
			dd {
				width: calc(100% - 170px);

				dl {
					gap: 10px;
					dt {
						flex-shrink: 0;
						width: 100px;
					}
					dd {
						width: calc(100% - 110px);
					}
				}
			}
		}

		dl:nth-of-type(1),
		dl:nth-of-type(2) {
			.point {
				letter-spacing: -1px;
			}
		}

		dl:nth-of-type(4) {
			dd {
				ul {
					display: flex; flex-direction: column; gap: 10px;
					margin-bottom: 20px;

					li {
						font-size: 20px;
						letter-spacing: -1.7px;
					}
				}
				.wrap_btn {
					display: flex; gap: 20px;
					margin-top: 10px;

					a {
						display: block; 
						width: 360px; height: 70px;
						font-family: 'GmarketSansMedium'; font-size: 26px;
						color: #200605; text-align: center; line-height: 64px; text-decoration: none;
						border: 6px solid #200605; border-radius: 20px;
						box-sizing: border-box;

						&:after {
							content: '';
							display: inline-block;
							margin: -6px 0 0 10px;
							width: 23px; height: 23px;
							vertical-align: middle;
						}

						&:nth-of-type(1) {
							background-color: #f4e1bd;
							&:after {
								background: url(../img/icn_download.png) no-repeat;
							}
						}
						&:nth-of-type(2) {
							background-color: #f3bf5d;
							&:after {
								background: url(../img/icn_upload.png) no-repeat;
							}
						}
					}
				}
			}
		}
		dl:nth-of-type(5) {
			dd {
				br {display: none;}

				.point {
					margin-left: 20px;
					vertical-align: text-bottom;
				}

				> dl {
					align-items: center;

					&:nth-of-type(1) {
						margin-bottom: 20px;
					}

					dd {
						font-size: 20px;
					}
				}
			}
		}
		dl:nth-of-type(6) {
			dd {
				.point {
					margin-left: 20px;
					vertical-align: text-bottom;
				}
				.table {
					margin-top: 20px;
					border-bottom: 1px solid #4a3534;

					.th {
						display: flex;
						p {
							width: 25%; height: 60px;
							font-size: 22px; font-weight: bold;
							color: #fff; text-align: center; line-height: 60px;
							background-color: #200605;
						}
					}
					.td {
						display: flex;
						border-bottom: 1px solid #4a3534;
						p {
							width: 25%; height: 60px;
							font-size: 22px;
							color: #2b1d19; text-align: center; line-height: 60px;
						}
					}
				}

				.table + p {
					margin: 20px 0 0 0;
				}
			}
		}
		dl:nth-of-type(7) {
			dd {
				ul {
					display: flex; gap: 46px;
				}
				.point {
					margin-top: 5px;
					font-size: 22px;
				}
			}
		}
	}

	@media screen and (max-width: 1280px) {
		padding: 150px 0 75px;
		transform: translateY(-55px);
		border-width: 3px;

		.box {
			padding: 46px 22px 37px;
			h2 {
				top: -37px;
				margin-left: -105.5px;
				width: 211px; height: 50px;
				background-size: contain;
			}

			.date {font-size: 12px;}

			i {
				display: block;
				position: absolute;

				&.m_icn01 {
					top: -84px; left: 60px;
					width: 15px; height: 15px;
					background: url(../img/mobile/sec02_icn01.png) no-repeat;
					background-size: contain;
				}
				&.m_icn02 {
					top: -19px; left: -16px;
					width: 43px; height: 45px;
					background: url(../img/mobile/sec02_icn02.png) no-repeat;
					background-size: contain;
					z-index: -1;
				}
				&.m_icn03 {
					right: 2px; top: -36px;
					width: 16px; height: 14px;
					background: url(../img/mobile/sec02_icn03.png) no-repeat;
					background-size: contain;
				}
				&.m_icn04 {
					bottom: -22px; right: -18px;
					width: 86.5px; height: 43px;
					background: url(../img/mobile/sec02_icn04.png) no-repeat;
					background-size: contain;
					z-index: -1;
				}
			}

			> dl {
				margin-bottom: 10px;

				dt {
					width: 85px;
					font-size: 13px;
				}
				dd {
					width: calc(100% - 85px);;
					
					.exp {
						padding-left: 8px;
					}

					.point {
						display: block;
						font-size: 12px;
					}

					> dl {
						gap: 5px;

						dt {
							flex-shrink: 0;
							width: 50px; height: 18px;
							font-size: 11px; font-weight: normal;
							line-height: 19px;
							border-radius: 5px;
						}
						dd {
							padding: 0;
							width: calc(100% - 55px);
						}
					}
				}

				&:nth-of-type(4) {
					dd {
						> dl {
							position: relative;
							display: block;

							dt {
								position: absolute; left: 0; top: 0;
							}
							dd {
								width: 100%;
								ul {
									flex-direction: column; gap: 5px;
									padding-left: 55px; margin-bottom: 10px;

									li {
										font-size: 10px;
										letter-spacing: -1px;
									}
								}
								.wrap_btn {
									flex-direction: column; gap: 5px;
									a {
										width: 100%; height: 35px;
										font-size: 13px;
										line-height: 33px;
										border-radius: 15px; border-width: 3px;

										&:after {
											margin: -4px 0 0 5px;
											width: 12px; height: 12px;
										}

										&:nth-of-type(1):after {background-size: contain;}
										&:nth-of-type(2):after {background-size: contain;}
									}
								}
							}
						}
					}
				}
				&:nth-of-type(5) {
					dd {
						br {display: block;}

						p {
							position: relative;
							.point {
								position: absolute; top: -1px;
								margin-left: 30px;
							}
						}

						> dl {
							align-items: start;
							&:nth-of-type(1) {
								margin-bottom: 10px;
							}
							dd {
								font-size: 11px;
							}
						}
					}
				}
				&:nth-of-type(6) {
					dd {
						.point {
							margin-left: 0;
						}

						.table {
							display: flex; flex-wrap: wrap;
							margin-top: 10px;
							border-bottom: none; border-right: 1px solid #4a3534;

							.th {
								flex-direction: column;
								width: 40%;
								p {
									width: 100%; height: 30px;
									font-size: 11px;
									line-height: 30px;
								}
							}
							.td {
								flex-direction: column;
								width: 30%;
								border-right: 1px solid #4a3534; border-bottom: none;
								box-sizing: border-box;
								p {
									width: 100%; height: 30px;
									font-size: 11px;
									line-height: 30px;
								}
							}
						}
					}
				}
				&:nth-of-type(7) {
					dd {
						ul {
							flex-direction: column; gap: 0px;
						}
						.point {
							font-size: 12px;
						}
					}
				}
			}
		}
	}
}

#section04 {
	padding: 140px 0 110px;

	.box {
		h2 {
			margin-left: -211px;
			width: 422px; height: 100px;
			background: url(../img/sec03_tit.png) no-repeat 50%;
		}

		i {display: none;}

		dl {
			dd {
				font-size: 20px; font-weight: normal;

				> dl {
					flex-direction: column; gap: 5px;
					position: relative;
					padding-left: 30px;

					&:before {
						content: '▶';
						position: absolute; left: 0; top: -3px;
					}

					dt {
						width: 100%; height: auto; 
						font-size: 20px;
						color: #2b1d19; line-height: 1.2; text-align: left;
						background-color: transparent;
					}
					dd {
						position: relative;
						padding-left: 25px;

						b {
							position: absolute; left: 0; top: 0;
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 1280px) {
		padding: 85px 0 70px;

		.box {

			i {
				display: block;
				position: absolute;

				&.m_icn01 {
					right: -2px; top: -110px;
					width: 13px; height: 13px;
					background: url(../img/mobile/sec04_icn01.png) no-repeat 50%;
					background-size: contain;
				}
				&.m_icn02 {
					right: 6px; top: -45px;
					width: 30px; height: 32px;
					background: url(../img/mobile/sec04_icn02.png) no-repeat 50%;
					background-size: contain;
				}
			}

			h2 {
				top: -27px;
				margin-left: -105px;
				width: 211px; height: 50px;
				background-size: contain;
			}

			dl {
				dd {
					font-size: 12px;
					
					> dl {
						padding-left: 15px;

						dt {
							font-size: 12px;
						}
						dd {
							padding: 0 0 0 15px;
						}
					}
				}
			}
		}
	}
}

#section05 {
	padding: 145px 0 120px;
	background-color: #fbfbed;
	border-top: 8px solid #200605;

	.box {
		h2 {
			top: -71px;
			margin-left: -471px;
			width: 942px; height: 113px;
			background: url(../img/sec04_tit.png) no-repeat 50%;
		}

		i {display: none;}

		dl {
			dd {
				font-size: 20px; font-weight: normal;

				.anwser {
					margin-top: 10px;
					color: #e99d1a;

					a {color: #e99d1a;}
					.diff_txt {color: #b87401;}
				}
			}
		}
	}

	@media screen and (max-width: 1280px) {
		position: relative;
		padding: 125px 0 120px;
		
		.box {

			i {
				display: block;
				position: absolute;

				&.m_icn01 {
					left: -10px; top: -85px;
					width: 86.5px; height: 43px;
					background: url(../img/mobile/sec05_icn01.png) no-repeat;
					background-size: contain;
				}
				&.m_icn02 {
					left: -17px; top: -16px;
					width: 30px; height: 33px;
					background: url(../img/mobile/sec05_icn02.png) no-repeat;
					background-size: contain;
				}
				&.m_icn03 {
					top: -59px; right: 4px;
					width: 15px; height: 15px;
					background: url(../img/mobile/sec05_icn03.png) no-repeat;
					background-size: contain;
				}
				&.m_icn04 {
					right: -27px; top: 1px;
					width: 12.5px; height: 17px;
					background: url(../img/mobile/sec05_icn04.png) no-repeat;
					background-size: contain;
				}
			}

			h2 {
				top: -63px;
				margin-left: -150px;
				width: 300px; height: 85px;
				background: url(../img/mobile/sec04_tit.png) no-repeat 50%;
				background-size: contain;
			}

			dl {
				dd {
					font-size: 12px;
					.anwser {
						margin-top: 5px;
					}
				}
			}
		}
	}
}


/* 퀵메뉴 */
.floating {
	position: fixed; right: 10%; bottom: 10%;
	width: 80px;
	z-index: 10;

	dl {
		padding: 4px 15px;
		background-color: #fff;
		border: 4px solid #242020;	
		box-sizing: border-box;

		dt {
			padding: 10px 0;
			font-size: 12px; font-weight: bold;
			color: #3d3e3c; text-align: center;
		}
		dd {
			height: 50px;
			border-top: 2px solid #f3f3f3;
			a {
				display: block; width: 100%; height: 100%;
				font-size: 0;

				&.blog {background: url(../img/icn_blog.png) no-repeat 50%;}
				&.facebook {background: url(../img/icn_facebook.png) no-repeat 50%;}
				&.insta {background: url(../img/icn_insta.png) no-repeat 50%;}
				&.yout {background: url(../img/icn_yout.png) no-repeat 50%;}
				&.minasu {background: url(../img/icn_minasu.png) no-repeat center/contain;}
			}
		}
	}
	.btn_top {
		width: 80px; height: 80px;
		font-size: 0;
		background: url(../img/btn_top.png) no-repeat 50%;
		border-top: 1px solid #595653;
		cursor: pointer;
		z-index: 10;
	}

	&.fixed {
		bottom: 40%;
	}
}

@media screen and (max-width: 1280px) {
	.floating {
		position: relative; right: auto; bottom: auto;
		width: 100%; height: 55px;

		dl {
			display: flex;
			padding: 0;
			border: 1px solid #242020; border-left: none; border-right: none;

			dt {
				flex-shrink: 0;
				padding: 16px 0;
				width: 155px; 
				font-size: 15px; 
				border-right: 1px solid #242020;
				box-sizing: border-box;

				br {display: none;}
			}
			dd {
				width: calc((100% - 155px) / 5); height: 55px;
				border-right: 1px solid #242020;

				&:last-child {
					border-right: none;
				}

				a {
					margin: 0 auto;
					width: 50px;
				}
			}
		}

		.btn_top {
			position: fixed; right: 0; bottom: 10%;
			width: 40px; height: 40px;
			border-top: none;
			background-size: contain;
		}

		&.fixed .btn_top {
			bottom: 290px;
		}
	}
}

/* 팝업 */
.popup_overlay {
	position: fixed; left: 0; top: 0; right: 0; bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1000;
	display: none;
}

.popup_container {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	max-width: 90vw; max-height: 90vh;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;

	.popup_content {
		position: relative;
		
		img {
			width: 100%; height: auto;
			max-height: 90vh;
			object-fit: contain;
			display: block;
		}
	}

	.btn_close {
		position: absolute; right: 5px; top: 38px;
		width: 40px; height: 40px;
		font-size: 0;
		cursor: pointer;

		&:before {
			content: '×';
			position: absolute; left: 50%; top: 50%;
			transform: translate(-50%, -50%);
			font-size: 70px;
			color: #000000a9;
		}
	}
}

@media screen and (max-width: 1280px) {
	.popup_container {
		max-width: 95vw; max-height: 95vh;

		.popup_content {
			img {
				width: 90vw;
				max-height: 95vh;
			}
		}

		.btn_close {
			right: 2px; top: 23px;

			&:before {
				font-size: 60px;
			}
		}
	}
}