.MainWrap{
	position:relative;
	overflow:hidden;
}
/* ======================================MAIN VISUAL ======================================*/
.mainvBox{
	position:relative;
	width:100%;
	/* min-height:100vh; */
	overflow:hidden;
}

.maanibox {
    z-index: 3;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0rem;
    top: 0rem;
    display: flex;
    flex-direction: row;
}
.maani01.loaded {
    transform: translateX(-100%);
}
.maani01{
	transition:all 1.2s;
	background: rgba(0,0,0,0.3);
	width:50%;
	height:100%;
}
.maani02.loaded {
    transform: translateX(100%);
}
.maani02 {
	transition:all 1.2s;
    background: rgba(0,0,0,0.3);
    width: 50%;
    height: 100%;
}



.MainVboxImg {
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../img/main/mainBG.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.mainVcontbox.loaded{
	top:0rem;
	opacity:1;
}
.mainVcontbox {
	opacity:0.2;
	transition:all 1.2s;
	top:8rem;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvcont{
	text-align:center;
	display:block;
}
.mvcont img{
	height:10rem;
	display:inline-block;
}
.mvcont h1{
	margin:4rem 0 0 0;
	display:block;
	color: #FFF;
	text-align: center;
	font-family: Pretendard;
	font-size: 3.4rem;
	font-style: normal;
	font-weight: 600;
	line-height: 4.6rem;
}

.scrollBox {
    transform: translateX(-50%);
    left: 50%;
    display: flex;
    position: absolute;
    bottom: 3.13rem;
    z-index: 10;
    align-items: center;
    flex-direction: column-reverse;
}
.scrollLine {
    width: 2px;
    height: 4rem;
    position: relative;
	border-radius: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.40);
}
.scrollLine span {
    width: 2px;
    height: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
	border-radius: 3px;
    animation-name: scroll;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes scroll {
    0% {
        top: 0;
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}
.scrollTxt {
    margin: 0 0 2rem 0;
    color: #FFF;
    font-family: "Inter", sans-serif;
	font-weight: 700;
    font-size: 1.4rem;
    line-height: 2rem;
	letter-spacing: 1.12px;
    padding-top: 0rem;
}
.mvh1br{display:none;}
@media (max-width: 991px){
	.mvcont h1 {
		margin: 4rem 0 0 0;
		font-size: 3rem;
		line-height: 4rem;
	}
}
@media (max-width: 767px){
	.maanibox {
		z-index: 3;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0rem;
		top: 0rem;
		display: flex;
		flex-direction: column;
	}
	.maani01.loaded {
		transform: translateX(-100%);
		transform: translateY(-100%);
	}
	.maani01{
		transition:all 1.2s;
		background: rgba(0,0,0,0.3);
		width:100%;
		height:50%;
	}
	.maani02.loaded {
		transform: translateX(100%);
		transform: translateY(100%);
	}
	.maani02 {
		transition:all 1.2s;
		background: rgba(0,0,0,0.3);
		width: 100%;
		height: 50%;
	}
	
	.MainVboxImg {
		top: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		position: absolute;
		background-image: url(../img/main/mainBG_mo.webp);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
	}
	.mainVcontbox{
		top:4rem;
	}
	.mvcont img {
		height: 6rem;
	}
	.mvh1br{display:block;}
	.mvcont h1 {
		margin: 3rem 0 0 0;
		font-size: 2.2rem;
		line-height: 3.6rem;
	}
	.scrollBox {
		bottom: 3rem;
	}
	.scrollTxt {
		margin: 0 0 0.4rem 0;
		font-size: 0.9rem;
		line-height: 2.2rem;
		letter-spacing: 0.9px;
	}
	.scrollLine {
		width: 2px;
		height: 2.6rem;
		border-radius: 3px;
	}
	.scrollLine span {
		width: 2px;
		height: 1.1rem;
		border-radius: 3px;
	}
}
/* //media */
/* ======================================// MAIN VISUAL ======================================*/


/* ====================================== MAIN 상품 ======================================*/
.maProductBox{
	position:relative;
	width:100%;
	background:#fff;
}
.maProductSideBox{
	max-width:2600px;
	margin:0 auto;
	position:relative;
}

.maprobox {
    width: 100%;
    position: relative;
    padding: 15.6rem 0rem;
    height: 100%;
}
.maprobox:nth-child(3){
	z-index:10;
}
.maproboxInner{
	width: 100%;
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
}
.leimg{
	flex-direction: row;
}
.riimg{
	flex-direction: row-reverse;
}

.maproimg {
    width: 57.813%;
    position: relative;
    height: 100%;
}

.leimg .maproimg img{
	box-shadow: -200px 150px 100px 0px rgba(0, 0, 0, 0.15);
}
.riimg .maproimg img{
	box-shadow: 200px 150px 100px 0px rgba(0, 0, 0, 0.15);
}
.maprobox.lastpr{
	padding:0;
	border-top:1px solid #E3E3E3;
}
.lastpr .maproimg img{
	box-shadow:none;
}
.maproimg img{
	max-width:100%;
	position:relative;
}

.maprotext {
    padding: 0 12rem;
    width: 42.187%;
    position: relative;
    height: 100%;
}
.maprotextInner{
	display:block;
	text-align:center;
}
.maptext h2 span{
	margin:0 0 2rem 0;
	display:block;
	font-family: "Outfit", sans-serif;
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 700;
	line-height: 1.8rem;
	letter-spacing: 1.08px;
}
.mpcol_01{color: #CB8E62;}
.mpcol_02{color: #AFAFAF;}
.mpcol_03{color: #9D7651;}
.mpcol_04{color: #ED1C24;}
.maptext h2{
	display:block;
	text-align:center;
	color: #111;
	font-family: 'Pretendard-Bold';
	font-size: 4.6rem;
	font-style: normal;
	font-weight: 700;
	line-height:6.6rem;                        
}
.maptext h2 dl {
	margin:1rem 0 0 0;
    display: flex;
    color: #111;
    font-family: 'Pretendard-Medium';
    font-size: 2.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 3.2rem;
    align-items: flex-end;
    justify-content: center;
}
.maptext h2 dl b{
	margin-left:0.4rem;
	display:inline-block;
	color: #111;
	font-family: 'Pretendard-SemiBold';
	font-size:1.8rem;
	font-style: normal;
	font-weight: 600;
	line-height:3rem;
}
.maptext h3{
	margin:4rem 0 4rem 0; 
	display:block;
	color: #666;
	text-align: center;
	font-family: Pretendard;
	font-size: 1.7rem;
	font-style: normal;
	font-weight: 400;
	line-height:3rem;
}
.maptbr{display:none;}

.mapbtnbox {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.mapbtnbox .mapbtn:last-child{
	width:22rem;
}
.mapbtn{
	margin:0 0.5rem;
	width:17rem;
	height:4.6rem;
	position:relative;
}
.mapbtn a {
    height: 100%;
    width: 100%;
    display: flex;
    border-radius: 4px;
    border: 1px solid #111;
    color: #111;
    font-family: 'Pretendard-Medium';
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.4rem;
    align-items: center;
    justify-content: center;
}
.mapbtn a img{
	height:1.8rem;
	margin-right:0.38rem;
	display:inline-block;
}
@media (max-width: 1800px){
	.maprotext {
		padding: 0 5rem;
		width: 42.187%;
	}
}
@media (max-width: 1600px){
	.maprobox {
		padding: 13rem 0rem;
	}
	.maptext h2 {
		font-size: 4rem;
		line-height: 6rem;
	}
}
@media (max-width: 1300px){
	.leimg .maproimg img {
		box-shadow: -200px 100px 100px 0px rgba(0, 0, 0, 0.15);
	}
	.riimg .maproimg img {
		box-shadow: 200px 100px 100px 0px rgba(0, 0, 0, 0.15);
	}
	.maprotext {
		padding: 0 2rem;
		width: 42.187%;
	}
}

@media (max-width: 991px){
	.riimg {
		flex-direction: column-reverse;
	}
	.maproboxInner {
		width: 100%;
		position: relative;
		display: flex;
		height: 100%;
		align-items: center;
		flex-direction: column-reverse;
	}
	.maprobox {
		padding: 10rem 0rem;
	}
	.maprobox.lastpr {
		padding: 0rem 0rem 10rem 0rem;
		border-top: 1px solid #E3E3E3;
	}
	.maprobox.lastpr .riimg {
		flex-direction: column;
	}
	.maprobox.lastpr .riimg .maproimg {
		padding-left: 8rem;
		margin-top: 0rem;
		width: 100%;
		position: relative;
		height: 100%;
	}
	.maprobox.lastpr .maproimg{
		padding: 0rem !important;
	}
	.maprobox.lastpr .maproimg img {
		box-shadow: none;
	}
	
	.maprotext {
		padding: 0 2rem;
		width: 100%;
	}
	.maproimg {
		margin-top: 5rem;
		width: 100%;
		position: relative;
		height: 100%;
	}
	.leimg .maproimg{
		padding: 0 3rem !important;
		padding-right:0rem;
	}
	.riimg .maproimg{
		padding: 0 3rem !important;
		padding-left:0rem;
	}
	.leimg .maproimg img {
		box-shadow: 0px 40px 20px 0px rgba(0, 0, 0, 0.10);
		/* box-shadow: -200px 80px 100px 0px rgba(0, 0, 0, 0.15); */
	}
	.riimg .maproimg img {
		box-shadow: 0px 40px 20px 0px rgba(0, 0, 0, 0.10);
		/* box-shadow: 200px 80px 100px 0px rgba(0, 0, 0, 0.15); */
	}
}
@media (max-width: 767px){
	.maprobox {
		padding: 5rem 0rem;
	}
	.leimg .maproimg{
		padding: 0 1rem !important;
		padding-right:0rem;
	}
	.riimg .maproimg{
		padding: 0 1rem !important;
		padding-left:0rem;
	}
	.leimg .maproimg img {
		box-shadow: 0px 40px 20px 0px rgba(0, 0, 0, 0.10);
	}
	.riimg .maproimg img {
		box-shadow: 0px 40px 20px 0px rgba(0, 0, 0, 0.10);
	}
	
	
	.maprobox.lastpr {
		padding: 0rem 0rem 5rem 0rem;
	}
	.maprobox.lastpr .riimg .maproimg {
		padding-left: 3rem;
	}
	.maprobox.lastpr .maprotext{
		padding:2rem 1rem 0 1rem;
	}
	
	.maprotext {
		padding: 0 1rem;
		width: 100%;
	}
	.maptext h2 span {
		margin: 0 0 1.4rem 0;
		font-size: 1.4rem;
		line-height: 2rem;
		letter-spacing: 0.84px;
	}
	.maptext h2 {
		font-size: 2.6rem;
		line-height: 3.6rem;
	}
	.maptext h2 dl {
		margin: 1rem 0 0 0;
		font-size: 1.8rem;
		line-height: 2.2rem;
	}
	.maptbr{display:block!important;}
	.maptext h3 br{display:none;}
	.maptext h3 {
		margin: 3rem 0 3rem 0;
		font-size: 1.4rem;
		line-height: 2.6rem;
	}
	
	.mapbtnbox {
		display: block;
	}
	.mapbtn {
		margin: 0;
		width: 100%;
		height: 4.2rem;
		position: relative;
	}
	.mapbtnbox .mapbtn:last-child {
		margin-top: 4px;
		width: 100%;
	}
	.mapbtn a {
		border-radius: 3px;
		font-size: 1.5rem;
		line-height: 2rem;
	}
	.mapbtn a img {
		height: 1.6rem;
		margin-right: 0.6rem;
	}
}
/* ======================================// MAIN 상품 ======================================*/