/* 모든 스타일은 css 충돌방지를 위해 .676867을 기준으로 작성 하시면 됩니다. 예) .676867 .box {} */
  .676867{}
  
.h-hero__section {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	 height:90vh;  
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
	    margin-bottom: 14em;
}
.h-hero__slider-container {
	position:relative;
	overflow:hidden;
	width:100%;
	height:90vh;
	background-color:#1c1c1c
}
.h-hero__bottom-bar {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	height:10vh;
	padding-left:7vw;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center
}
.h-hero__collection-container {
	position:static;
	width:100%;
	height:100%
}
.h-hero__collection-wrapper {
	position:relative;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	width:100%;
	height:100%
}
.h-hero__collection-item {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	overflow:hidden;
	width:100vw;
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	-webkit-transition:opacity 1s ease-in-out;
	transition:opacity 1s ease-in-out
}
.bg-image__container {
	width:100%;
	height:100%
}
.objectfitfallback {
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover
}
.h-hero__slider-overlay {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:10;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	padding:150px 7vw 100px;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:start;
	-webkit-align-items:flex-start;
	-ms-flex-align:start;
	align-items:flex-start;
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.71)),to(rgba(28,28,28,0)));
	background-image:linear-gradient(90deg,rgba(0,0,0,.71),rgba(28,28,28,0));
	color:#fff
}
.h-hero__slider-overlay .button2 {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	height:52px;
	margin-top:0;
	margin-right:0;
	margin-left:0;
	padding-right:30px;
	padding-left:30px;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	border-style:none;
	border-radius:200px;
	background-color:#c45757;
	-webkit-transition:.2s cubic-bezier(.456,-.233,.193,1.714);
	transition:.2s cubic-bezier(.456,-.233,.193,1.714);
	color:#fff;
	text-decoration:none
}

.utility__scroll__copy {
	display:block;
	color:#969696;
	font-size:14px;
	line-height:20px;
	font-weight:300;
	letter-spacing:0
}
.h-hero__name-container {
	position:absolute;
	left:auto;
	top:33%;
	right:0;
	bottom:0;
	z-index:20;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	width:50vw;
	height:220px;
	padding-right:7vw;
	padding-left:7vw;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:stretch;
	-webkit-align-items:stretch;
	-ms-flex-align:stretch;
	align-items:stretch;
	background-color:#f4f5f6;
	-webkit-transition:background-color .2s;
	transition:background-color .2s
}
.button__copy {
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;
	font-family:Gordita,sans-serif;
	font-size:16px;
	font-weight:700;
	white-space:nowrap
}
.h-hero__index-container {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	margin-bottom:-10px
}
.h-hero__index {
	margin-right:5px;
	color:#969696;
	font-size:12px;
	letter-spacing:0
}
.h-hero__link-container {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	width:100%;
	-webkit-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-box-align:end;
	-webkit-align-items:flex-end;
	-ms-flex-align:end;
	align-items:flex-end;
	color:#1c1c1c;
	font-size:30px;
	line-height:45px;
	font-weight:300;
	text-decoration:none
}
.h-hero__progress-bar {
	position:relative;
	width:100%;
	height:1px;
	margin-right:20px;
	background-color:rgba(28,28,28,.2)
}
.h-hero__progress-container {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	margin-top:10px;
	margin-right:-20px;
	-webkit-box-pack:start;
	-webkit-justify-content:flex-start;
	-ms-flex-pack:start;
	justify-content:flex-start
}
.h-hero__progress-indicator {
	position:absolute;
	left:0;
	width:0%;
	height:1px;
	background-color:#1c1c1c
}
.h-hero__index__heading {
	font-size:30px
}
.button__icon {
	position:relative;
	bottom:0;
	display:block;
	margin-right:10px;
	-webkit-box-flex:0;
	-webkit-flex:0 0 auto;
	-ms-flex:0 0 auto;
	flex:0 0 auto;

	filter: invert(100%);
}
.utility__scroll__img {
	position:relative;
	bottom:2px;
	margin-right:6px
}
.h-hero__heading {
margin-bottom: 50px;
    font-size: 56px;
    font-weight: 600;
    line-height: 60px;
}
.utility__hidden {
	display:none
}
.h-hero__index__arrow {
	padding-top:19px;
	padding-bottom:15px;
	cursor:pointer
}
.utillity__scroll__link {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	padding-top:3px;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-filter:brightness(100%);
	filter:brightness(100%);
	-webkit-transition:-webkit-filter .2s;
	transition:filter .2s;
	transition:filter .2s,-webkit-filter .2s;
	text-decoration:none;
	cursor:pointer
}
.utillity__scroll__link:hover {
	-webkit-filter:brightness(0%);
	filter:brightness(0%)
}
.h-hero__bg-image__gradient {
	display:none
}
.h-hero__link-block {
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	color:#1c1c1c;
	text-decoration:none
}
@media screen and (max-width:991px) {
	h1 {
		font-size:30px
	}
	.h-hero__name-container {
		height:200px;
		    top: 35%;
	}
	.button__copy {
		white-space:nowrap
	}
	.h-hero__index__heading {
		font-size:22px
	}
	.h-hero__heading {
		font-size:50px
	}
	.h-hero__index__arrow {
		font-size:22px;
		line-height:1.3
	}
}
@media screen and (max-width:767px) {
	.h-hero__slider-overlay {
		
   
	}
}

@media screen and (max-width:767px) {
	.h-hero__section {
		position:relative;
		height:auto;
		-webkit-box-pack:start;
		-webkit-justify-content:flex-start;
		-ms-flex-pack:start;
		justify-content:flex-start
	}
	.h-hero__slider-container {
		height:auto;
		background-color:transparent
	}
	.h-hero__bottom-bar {
		display:none;
		padding-left:8vw
	}
	.h-hero__collection-container {
		height:80vw;
		background-color:#1c1c1c
	}
	.bg-image__container {
		position:relative;
		z-index:0
	}
	.h-hero__slider-overlay {
		position:relative;
		padding:160px 8vw 50px;
		background-image:none
	
	}
	.button.hero-button {
		display:none;
		background-color:#f4f5f6
	}
	.h-hero__name-container {
		left:0;
		top:auto;
		right:0;
		bottom:0;
		width:100%;
		height:auto;
		padding-right:8vw;
		padding-bottom:10vw;
		padding-left:8vw;
		background-color:transparent
	}
	.h-hero__index-container {
		margin-bottom:0
	}
	.h-hero__link-container {
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex
	}
	.h-hero__progress-bar {
		background-color:hsla(0,0%,100%,.4)
	}
	.h-hero__progress-container {
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		margin-top:10px
	}
	.h-hero__progress-indicator {
		background-color:#fff
	}
	.h-hero__index__heading {
		margin-top:0;
		color:#fff;
		font-size:30px
	}
	.h-hero__heading {
		margin-bottom:0;
		color:#1c1c1c;
		font-size:55px
	}
	.h-hero__index__arrow {
		padding-top:0;
		color:#fff
	}
	.h-hero__bg-image__gradient {
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		z-index:10;
		display:block;
		background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.01)),to(rgba(0,0,0,.71)));
		background-image:linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.71))
	}
	.h-hero__link-block {
		padding-top:0;
		padding-right:20px;
		padding-bottom:10px
	}
}
@media screen and (max-width:479px) {
	h1 {
		font-size:20px
	}
	.h-hero__section {
		height:100vh
	}
	.h-hero__slider-container {
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		height:100%;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		-webkit-flex-direction:column;
		-ms-flex-direction:column;
		flex-direction:column;
		-webkit-box-align:start;
		-webkit-align-items:flex-start;
		-ms-flex-align:start;
		align-items:flex-start
	}
	.h-hero__bottom-bar {
		display:none
	}
	.h-hero__collection-container {
		-webkit-box-flex:1;
		-webkit-flex:1;
		-ms-flex:1;
		flex:1
	}
	.h-hero__name-container {
		padding-bottom:12vw;
		-webkit-box-pack:end;
		-webkit-justify-content:flex-end;
		-ms-flex-pack:end;
		justify-content:flex-end
	}
	.h-hero__link-container {
		padding-top:14px;
		padding-bottom:10px
	}
	.h-hero__heading {
		font-size:10.5vw;
		line-height:1.2
	}
	.h-hero__bg-image__gradient {
		background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.01)),to(rgba(0,0,0,.71)));
		background-image:linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.71))
	}
}