@charset "utf-8";
.pcbr{display:block;}
.tbbr{display:none;}
.mbbr{display:none;}
.mobile{display:none;}
.dn{display:none;}


/* page common */
#wrap{overflow:hidden;}
.subVisual{
	overflow:hidden;
	position:relative;
	width:100%;height:100vh;
	background:#f5f3ee;
}
.subVisual video{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.subVisual .title{position:absolute;left:5%;bottom:130px;}
.subVisual .title .en{font-size:184px;color:#fff;}
.subVisual .title .kr{font-family:"Pretendard";padding-left:3px;font-size:23px;color:#fff;}
.subVisual .title span{display:inline-block;}
.page{padding:180px 0 0;background:#f5f3ee;}
.innerwrap{padding:0 5%;}

.subTabs{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:80px;
	background:#eeeae2;
}
.subTabs>ul{display:flex;}
.subTabs>ul>li{}
.subTabs>ul>li>a{
	display:block;
	position:relative;
	padding:0 35px;
	font-size:18px;color:#333;text-align:center;
}
.subTabs>ul>li>a:after{
	display:block;content:"";
	width:1px;height:14px;
	background:#a6a39e;
	position:absolute;right:0;top:50%;
	margin-top:-7px;
}
.subTabs>ul>li:last-child>a:after{display:none;}
.subTabs>ul>li.on>a{color:#000;font-weight:500;}




/* m11 */
.m11{}
.m11 .introTxts{
	display:flex;flex-wrap:wrap;align-items:flex-end;
	position:relative;z-index:100;
	box-sizing:border-box;
	padding:0 0 180px 0;
}
.m11 .introTxts .title{width:42.666%;perspective: 800px;}
.m11 .introTxts .title>div{overflow:hidden;}
.m11 .introTxts .title>div>span{
	display:block;
	font-size:76px;color:#000;font-weight:500;
}
.m11 .introTxts .title>div>span>.imp{
	display:inline-block;
	position:relative;
	/*text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);*/
	color: #000;
}
.m11 .introTxts .title.on>div>span>.imp{	
	background: linear-gradient(
	135deg,
	#333 0%,
	#8a8a8a 40%,
	#d6d6d6 50%,
	#8a8a8a 60%,
	#333 100%
	);
	background-size: 400% 400%;
	-webkit-background-clip: text;
	animation: metallic-shine 4.7s ease infinite alternate;	
}
@keyframes metallic-shine {
  0% {
  	color: transparent;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
    background-position: 0% 50%;
  }
  50% {
  	color: transparent;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
    background-position: 100% 50%;
  }
  100% {
  	color: transparent;
	text-shadow:2px 2px 0px rgba(0, 0, 0, 0.2);
    background-position: 0% 50%;
  }
}

.imp::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: shine-effect 3s infinite;
}

@keyframes shine-effect {
  0% {
    transform: translateX(-100%) skewX(-45deg);
  }
  15% {
    transform: translateX(100%) skewX(-45deg);
  }
  100% {
    transform: translateX(100%) skewX(-45deg);
  }
}

/* 제목이 나타난 후에 효과 시작 */
.title:not(.on) .imp {
  animation: none;
}
.title:not(.on) .imp::after {
  animation: none;
}
.m11 .introTxts .txts{
	box-sizing:border-box;
	width:calc(100% - 42.666%);
}
.m11 .introTxts .txts p{font-family:"Pretendard";font-size:18px;color:#555;line-height:1.7em;}

.m11 .philosophy{
	display:flex;flex-wrap:wrap;align-items:center;
	padding:0 0 100px;
}
.m11 .philosophy .txtarea{width:42.666%;}
.m11 .philosophy .txtarea h3{font-family:"Pretendard";font-size:23px;color:#111;}
.m11 .philosophy .txtarea h4{margin:40px 0 30px;font-size:54px;color:#111;}
.m11 .philosophy .txtarea p{font-family:"Pretendard";font-size:18px;color:#555;line-height:1.7em;}
.m11 .philosophy .imgarea{
	display:flex;justify-content:space-between;
	width:calc(100% - 42.666%);
}
.m11 .philosophy .imgarea img{width:47%}

.m11 .vyor{
	box-sizing:border-box;
	display:flex;flex-wrap:wrap;
	width:100%;height:100vh;
	padding:4% 0;
}
.m11 .vyor .imgarea{
	overflow:hidden;
	position:relative;
	width:50%;height:100%;
}
.m11 .vyor .imgarea>div{position:absolute;left:0;top:0;width:90%;height:100%;}
.m11 .vyor .imgarea>div:nth-child(1){background:url(/images/page/m11_vyor_bg1.jpg) no-repeat center;background-size:cover;}
.m11 .vyor .imgarea>div:nth-child(2){background:url(/images/page/m11_vyor_bg2.jpg) no-repeat center;background-size:cover;}
.m11 .vyor .imgarea>div:nth-child(3){background:url(/images/page/m11_vyor_bg3.jpg) no-repeat center;background-size:cover;}
.m11 .vyor .imgarea>div:nth-child(4){background:url(/images/page/m11_vyor_bg4.jpg) no-repeat center;background-size:cover;}
.m11 .vyor .conarea{
	overflow:hidden;
	display:flex;align-items:center;
	box-sizing:border-box;
	width:50%;
	padding:0 5% 0 1%;
}
.m11 .vyor .conarea ul{width:100%;}
.m11 .vyor .conarea ul li{
	border-top:1px solid #c4c2be;
}
.m11 .vyor .conarea ul li .front{
	display:flex;justify-content:space-between;
	padding:40px 0;
}
.m11 .vyor .conarea ul li .front .tit1{font-size:40px;color:#cbc8c5;font-weight:600;}
.m11 .vyor .conarea ul li .front .tit1 span{color:#000;}
.m11 .vyor .conarea ul li .front .tit2{width:206px;font-size:54px;color:#111;font-weight:600;}
.m11 .vyor .conarea ul li .hidden{
	height:0;transform:scaleY(0);
	transition:all 0.6s;
}
.m11 .vyor .conarea ul li .hidden .tit3{font-size:23px;color:#111;opacity:0;transform:translateY(40px);}
.m11 .vyor .conarea ul li .hidden .txt{margin-top:10px;font-size:17px;color:#666;opacity:0;transform:translateY(40px);}

.m11 .vyor .conarea ul li.open .hidden{padding:40px 0 40px;height:auto;transform:scaleY(1);}
.m11 .vyor .conarea ul li.open .hidden .tit3{opacity:1;transform:translateY(0);transition:all 0.6s 0.2s;}
.m11 .vyor .conarea ul li.open .hidden .txt{opacity:1;transform:translateY(0);transition:all 0.6s 0.4s;}
.m11 .vyor .conarea ul li.open .front .tit1 span{animation:spanAni 0.6s infinite alternate;}

@keyframes spanAni{
	0%{color:#000;}
	100%{color:#cbc8c5;}
}

.m11 .strory{
	display:flex;align-items:center;justify-content:space-between;
	padding:150px 0;
}
.m11 .strory .txtarea{
	box-sizing:border-box;
	width:50%;
	padding-right:5%;
}
.m11 .strory .txtarea h3{font-family:"Pretendard";font-size:23px;color:#111;}
.m11 .strory .txtarea h4{margin:40px 0 30px;font-size:54px;color:#111;}
.m11 .strory .txtarea p{font-family:"Pretendard";font-size:18px;color:#555;line-height:1.7em;}
.m11 .strory .imgarea{	
	overflow:hidden;
	display:flex;align-items:center;justify-content:center;
	position:relative;
	width:50%;height:87.06vh;
}
.m11 .strory .imgarea .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/page/m11_story_bg.jpg) no-repeat;
	background-size:cover;
}
.m11 .strory .imgarea .bg + div{position:relative;z-index:10;text-align:center;}
.m11 .strory .imgarea .bg + div>div{
	margin-bottom:20px;
	font-size:39px;color:#fff;
}
.m11 .strory .imgarea .bg + div>div:nth-child(1){margin-bottom:40px;font-size:54px;}
.m11 .strory .imgarea .bg + div>div:nth-child(4){margin-top:40px;}
.m11 .strory .imgarea .bg + div>div:last-child{margin-bottom:0;}
.m11 .strory .imgarea .bg + div>div.dot{
	width:3px;height:3px;
	margin:12px auto;
	background:#fff;
}

.m11 .notes{}
.m11 .notes h3{margin-bottom:40px;font-family:"Pretendard";font-size:23px;color:#111;}
.m11 .notes .boxwrap{
	display:flex;justify-content:space-between;flex-wrap:wrap;
	width:100%;
	padding:40px 0;
	border-bottom:1px solid #c4c2be;
}
.m11 .notes .boxwrap:first-child{border-top:1px solid #c4c2be;}
.m11 .notes .boxwrap:first-child .title{display:block;font-family:"Pretendard";font-size:18px;color:#111;font-weight:500;}
.m11 .notes .boxwrap .title{
	display:flex;align-items:center;justify-content:center;
	position:relative;
	width:207px;
}
.m11 .notes .boxwrap .title .tit{
	position:absolute;left:0;top:50%;z-index:10;
	transform:translateY(-50%);
	width:100%;
	font-family:"Pretendard";font-size:18px;color:#fff;font-weight:500;text-align:center;
}
.m11 .notes .boxwrap .ingredient{
	width:185px;
	font-family:"Pretendard";font-size:18px;color:#555;line-height:1.8em;
}
.m11 .notes .boxwrap .exp{width:860px;}
.m11 .notes .boxwrap .exp .tit{font-size:18px;color:#111;}
.m11 .notes .boxwrap .exp .txt{margin-top:40px;font-size:18px;color:#555;line-height:1.7em;}

@media(max-width:1500px){

	.m11 .notes .boxwrap .exp{width:100%;margin-top:40px;}

}


.m11 .btmVisual{padding:200px 0;}
.m11 .btmVisual .con{
	display:flex;align-items:center;justify-content:center;
	width:90%;height:660px;
	margin:0 auto;
	background:url(/images/page/m11_btmVisual_bg.jpg) no-repeat center;
	background-size:cover;
	background-attachment:fixed;
}
.m11 .btmVisual .con>div{}





/* m12 */
.m12{}
.m12 h3{font-family:"Pretendard";font-size:23px;color:#111;font-weight:500;}
.m12 .sec1{padding:0 0 200px;background:#f5f3ee;}
.m12 .sec1 .con{margin:55px 0 0;}
.m12 .sec1 .con .boxwrap{display:flex;align-items:center;margin-bottom:200px;}
.m12 .sec1 .con .boxwrap:nth-child(even){flex-direction:row-reverse;}
.m12 .sec1 .con .boxwrap:last-child{margin-bottom:0;}
.m12 .sec1 .con .boxwrap>div{width:50%;}
.m12 .sec1 .con .boxwrap>div.imgarea{height:100vh;}
.m12 .sec1 .con .boxwrap>div.imgarea>div{width:100%;height:100%;}
.m12 .sec1 .con .boxwrap:nth-child(1)>div.imgarea>div{
	background:url(/images/page/m12_sec1_img1.jpg) no-repeat center;
	background-size:cover;
}
.m12 .sec1 .con .boxwrap:nth-child(2)>div.imgarea>div{
	background:url(/images/page/m12_sec1_img2.jpg) no-repeat center;
	background-size:cover;
}
.m12 .sec1 .con .boxwrap>div.infoarea{
	box-sizing:border-box;
	padding:0 5%;
}
.m12 .sec1 .con .boxwrap>div.infoarea h4{}
.m12 .sec1 .con .boxwrap>div.infoarea h4 .en{font-size:54px;color:#111;font-weight:600;}
.m12 .sec1 .con .boxwrap>div.infoarea h4 .kr{margin:45px 0 30px;font-family:"Pretendard";font-size:23px;color:#111;}
.m12 .sec1 .con .boxwrap>div.infoarea h4 + p{font-family:"Pretendard";font-size:17px;color:#666;line-height:1.7em;}
.m12 .sec1 .con .boxwrap>div.infoarea ul{
	margin-top:35px;padding-top:90px;
	border-top:1px solid #c4c2be;
}
.m12 .sec1 .con .boxwrap>div.infoarea ul li{
	box-sizing:border-box;
	margin-bottom:40px;padding:0 35px 30px;
	border-left:1px solid #c4c2be;border-bottom:1px solid #c4c2be;
}
.m12 .sec1 .con .boxwrap>div.infoarea ul li:last-child{margin-bottom:0;}
.m12 .sec1 .con .boxwrap>div.infoarea ul li .num{font-family:"Pretendard";font-size:13px;color:#666;}
.m12 .sec1 .con .boxwrap>div.infoarea ul li .style{margin-top:50px;font-size:90px;font-weight:500;color:#111;}
.m12 .sec1 .con .boxwrap>div.infoarea ul li .style.font1{font-family:"Playfair Display";}
.m12 .sec1 .con .boxwrap>div.infoarea ul li .style.font2{font-family:"GFS Didot";}
.m12 .sec1 .con .boxwrap>div.infoarea ul li .style.font3{font-family:"Libre Baskerville";}
.m12 .sec2{
	padding:200px 0;
	background:#fff;
}
.m12 .sec2 h3{font-family:"Cormorant Garamond";font-size:51px;}
.m12 .sec2 ul{
	display:flex;flex-wrap:wrap;justify-content:space-between;
	margin:120px 0 0;
}
.m12 .sec2 ul li{
	box-sizing:border-box;
	display:flex;
	width:48%;
	padding:40px 0;
	border-top:1px solid #ccc;border-bottom:1px solid #ccc;
}
.m12 .sec2 ul li .color{
	display:flex;align-items:center;justify-content:center;
	width:207px;height:207px;
	font-size:20px;font-weight:500;
}
.m12 .sec2 ul li .color.black{background:#1a1a1a;color:#fff;}
.m12 .sec2 ul li .color.cream{background:#f5f3ee;color:#111;}
.m12 .sec2 ul li .info{
	box-sizing:border-box;
	width:calc(100% - 207px);
	padding:0 60px;
}
.m12 .sec2 ul li .info .code{
	margin-bottom:45px;
	font-family:"Pretendard";font-size:19px;color:#111;font-weight:500;
}
.m12 .sec2 ul li .info dl{
	display:flex;
	margin-bottom:10px;
}
.m12 .sec2 ul li .info dl dt{width:120px;font-family:"Pretendard";font-size:17px;color:#666;}
.m12 .sec2 ul li .info dl dd{width:calc(100% - 120px);font-family:"Pretendard";font-size:17px;color:#666;}
.m12 .sec2 .tonenManner{
	position:relative;
	display:flex;align-items:center;justify-content:center;
	height:572px;
	margin:200px 0 0;
	text-align:center;
}
.m12 .sec2 .tonenManner .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/page/m12_sec2_tm_bg.jpg) no-repeat center;
	background-size:cover;
}
.m12 .sec2 .tonenManner .txts{position:relative;z-index:10;}
.m12 .sec2 .tonenManner .txts h3{color:#fff;}
.m12 .sec2 .tonenManner .txts h3 + p{margin:60px 0 0;font-family:"Pretendard";font-size:17px;color:#fff;line-height:1.7em;}






/* m21 */
.m21{padding-bottom:200px;}
.m21 .productsIntro{}
.m21 .productsIntro .cate0{
	position: relative;box-sizing:border-box;
	height:100vh;
}
.m21 .productsIntro .cate0 .img{
	position:absolute;left:0;top:0;
	width:59%;height:calc(100vh - 0px);
	background:url(/images/page/m21_cate0_img1.jpg) no-repeat center;
	background-size:cover;
}
.m21 .productsIntro .cate0 .txts{
	box-sizing:border-box;
	position:absolute;right:0;bottom:0;
	width:41%;
	padding:0 0 0 10vh;
}
.m21 .productsIntro .cate0 .txts .txt1{
	position: relative;z-index: 10;
	transform:translate(calc(-10vh + -175px), 0);
}
.m21 .productsIntro .cate0 .txts .txt1>div{	
	position:relative;
	margin-top:50px;
	font-size:54px;color:#fff;font-weight:500;
    background: linear-gradient(to right, #fff 175px, #000 175px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
	mix-blend-mode: difference;
}
.m21 .productsIntro .cate0 .txts .txt2{
	margin-top:80px;
	font-family:"Pretendard";font-size:17px;color:#555;line-height:1.7em;
}
.m21 .productsIntro .cate0 .txts .txt2 strong{
	display:block;
	margin-bottom:30px;
	font-size:23px;color:#111;font-weight:500;
}

.m21 .productsIntro .cate1{display:flex;align-items:center;}
.m21 .productsIntro .cate1 .img{width:50%;}
.m21 .productsIntro .cate1 .img img{width:100%;}
.m21 .productsIntro .cate1 .txts{
	width:50%;
	text-align:center;
}
.m21 .productsIntro .cate1 .txts .txt1{font-size:23px;color:#000;}
.m21 .productsIntro .cate1 .txts .line{
	width:1px;height:35px;
	margin:25px auto;
	background:#abaaa6;
}
.m21 .productsIntro .cate1 .txts .txt2{font-family:"Pretendard";font-size:17px;color:#666;line-height:1.7em;}

.m21 .prdList{margin-top:120px;}
.m21 .prdList ul{
	display:flex;flex-wrap:wrap;
	padding-top:120px;
	border-top:1px solid #ccc;
}
.m21 .prdList ul li{
	width:32%;
	margin:0 2% 70px 0;
}
.m21 .prdList ul li:nth-child(3n){margin-right:0;}
.m21 .prdList ul li .thumb{}
.m21 .prdList ul li .thumb img{width:100%;}
.m21 .prdList ul li .tit{
	margin:30px 0 10px;
	font-family:"Pretendard";font-size:23px;color:#000;font-weight:500;text-align:center;
}
.m21 .prdList ul li .info{
	display:flex;align-items:center;justify-content:center;
	font-family:"Pretendard";font-size:17px;color:#555;
}
.m21 .prdList ul li .info .bar{
	display:inline-block;
	width:1px;height:12px;
	margin:0 10px;
	background:#ccc;
}




/* productView */
.m21 .productView{}
.m21 .productView>div{display:flex;flex-wrap:wrap;}
.m21 .productView>div .prdImg{width:50%;}
.m21 .productView>div .prdImg .gall{position:relative;}
.m21 .productView>div .prdImg .gall .swiper-slide img{width:100%;}
.m21 .productView>div .prdImg .gall .ctr{
	display:flex;align-items:center;justify-content:center;
	position:absolute;left:0;bottom:40px;z-index:10;
	width:100%;
}
.m21 .productView>div .prdImg .gall .ctr .swiper-pagination{
	position: static;
	width: auto;
	display:flex;align-items:center;
	margin:0 25px;
	font-family:"Pretendard";font-size:15px;color:#666;
}
.m21 .productView>div .prdImg .gall .ctr .swiper-pagination > span{
	margin: 0 5px;
	color: #000;
}
.m21 .productView>div .prdImg .gall .ctr .number .this{color:#000;}
.m21 .productView>div .prdImg .gall .ctr .number span{display:inline-block;margin:0 5px;}
.m21 .productView>div .prdImg .gall .ctr .number .total{}
.m21 .productView>div .prdImg .gall .ctr .m21Prev{cursor:pointer;}
.m21 .productView>div .prdImg .gall .ctr .m21Next{cursor:pointer;}
.m21 .productView>div .prdInfo{
	box-sizing:border-box;
	position:relative;
	width:50%;
	padding:46px 0 0 10%;
}
.m21 .productView>div .prdInfo .tag{display:flex;flex-wrap:wrap;}
.m21 .productView>div .prdInfo .tag span{
	position:relative;
	padding-right:12px;margin-right:10px;margin-bottom:10px;
	font-family:"Pretendard";font-size:17px;color:#666;
}
.m21 .productView>div .prdInfo .tag span:after{
	display:block;content:"";
	width:1px;height:12px;
	background:#aaa;
	position:absolute;right:0;top:4px;
}
.m21 .productView>div .prdInfo .tag span:last-child:after{display:none;}
.m21 .productView>div .prdInfo .titlearea{margin:10px 0 0;}
.m21 .productView>div .prdInfo .titlearea .tit{font-family:"Pretendard";font-size:39px;color:#000;font-weight:500;}
.m21 .productView>div .prdInfo .titlearea .volume{font-family:"Pretendard";font-size:17px;color:#666;}
.m21 .productView>div .prdInfo .price{margin:30px 0 70px;font-family:"Pretendard";font-size:29px;color:#000;font-weight:500;}
.m21 .productView>div .prdInfo .feature{}
.m21 .productView>div .prdInfo .feature .tit{font-size:19px;color:#000;font-weight:500;}
.m21 .productView>div .prdInfo .feature ul{margin:20px 0 0;border-top:2px solid #000;}
.m21 .productView>div .prdInfo .feature ul li{
	padding:30px 0;
	border-bottom:1px solid #ccc;
	font-family:"Pretendard";font-size:17px;color:#000;font-weight:500;
}
.m21 .productView>div .prdInfo .btnInquiry{
	display:block;
	width:100%;height:70px;
	margin:40px 0 0;
	background:#333;
	font-size:21px;color:#fff;text-align:center;line-height:70px;
}
.m21 .productView>div .prdInfo .btnList{
	display:inline-flex;align-items:center;
	position:absolute;right:0;top:0;
	font-size:17px;color:#333;font-weight:600;
}
.m21 .productView>div .prdInfo .btnList i{
	display:block;
	width:46px;height:46px;
	margin-left:10px;
	box-sizing:border-box;
	background:url(/images/page/m21_view_more.png) no-repeat center;
	border:1px solid #333;border-radius:50%;
}





/* m31 */
.m31{padding-bottom:200px;}
.m31 .intro{
	overflow:hidden;
	position:relative;
	display:flex;align-items:center;justify-content:center;
	width:100%;height:500px;
}
.m31 .intro .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/page/m31_intro_bg.jpg) no-repeat center;
	background-size:cover;
	background-attachment:fixed;
}
.m31 .intro .txt{
	position:relative;z-index:10;
	font-size:23px;color:#fff;text-align:center;
}
.m31 .con{margin:200px 0 0;background:#eeeae2;}
.m31 .con .boxwrap{
	overflow:hidden;
	display:flex;flex-wrap:wrap;
	width:100%;height:100vh;
}
.m31 .con .boxwrap:nth-child(even){flex-direction:row-reverse;}
.m31 .con .boxwrap>div{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
	position:relative;
	width:50%;height:100%;
	text-align:center;
}
.m31 .con .boxwrap>div.titlearea{}
.m31 .con .boxwrap>div.titlearea .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
}
.m31 .con .boxwrap:nth-child(1)>div.titlearea .bg{
	background:url(/images/page/m31_bg1.jpg) no-repeat center;
	background-size:cover;
}
.m31 .con .boxwrap:nth-child(2)>div.titlearea .bg{
	background:url(/images/page/m31_bg2.jpg) no-repeat center;
	background-size:cover;
}
.m31 .con .boxwrap>div.titlearea .inner{
	display:flex;align-items:center;justify-content:center;
	box-sizing:border-box;
	position:relative;z-index:10;
	width:100%;height:100%;
	padding:5%;
}
.m31 .con .boxwrap:nth-child(1)>div.titlearea .inner{
	background:url(/images/page/m31_bg1_1.png) no-repeat center;
	background-size:cover;
}
.m31 .con .boxwrap:nth-child(2)>div.titlearea .inner{
	background:url(/images/page/m31_bg2_1.png) no-repeat center;
	background-size:cover;
}
.m31 .con .boxwrap>div.titlearea .inner h3{font-family:"Pretendard";font-size:23px;color:#fff;}
.m31 .con .boxwrap>div.titlearea .inner h4{margin:30px 0;}
.m31 .con .boxwrap>div.titlearea .inner h4 .en{font-family:"Cormorant Garamond";font-size:54px;color:#fff;font-weight:500;}
.m31 .con .boxwrap>div.titlearea .inner h4 .kr{margin-top:10px;font-family:"Pretendard";font-size:33px;color:#fff;font-weight:500;}
.m31 .con .boxwrap>div.titlearea .inner .line{
	width:1px;height:35px;
	margin:0 auto 30px;
	background:#cfd0c8;
}
.m31 .con .boxwrap>div.titlearea .inner p{font-family:"Pretendard";font-size:17px;color:#f5f3ee;line-height:1.7em;}
.m31 .con .boxwrap>div.conarea{
	box-sizing:border-box;
	width:50%;
	padding:5%;
}
.m31 .con .boxwrap>div.conarea>div{width:100%;}
.m31 .con .boxwrap:nth-child(1)>div.conarea{padding:7%;}
.m31 .con .boxwrap:nth-child(1)>div.conarea dl{
	width:100%;
	padding:45px 0;
	border-bottom:1px solid #ccc;
	text-align:left;
}
.m31 .con .boxwrap:nth-child(1)>div.conarea dl:first-child{border-top:1px solid #ccc;}
.m31 .con .boxwrap:nth-child(1)>div.conarea dl dt{font-family:"Pretendard";font-size:23px;color:#111;font-weight:500;}
.m31 .con .boxwrap:nth-child(1)>div.conarea dl dd{
	margin-top:15px;
	font-family:"Pretendard";font-size:17px;color:#666;
}

.m31 .con .boxwrap:nth-child(2)>div.conarea{align-content:space-between;}
.m31 .con .boxwrap:nth-child(2)>div.conarea>div{	
	display:flex;align-items:center;justify-content:center;
	box-sizing:border-box;
	width:100%;
	padding:10%;
}
.m31 .con .boxwrap:nth-child(2)>div.conarea>div>div{width:100%;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea{
	width:100%;height:56vh;
	background:url(/images/page/m31_bg3.jpg)	no-repeat center;
	background-size:cover;
	text-align:left;
}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea h4{
	padding-bottom:35px;
	font-family:"Pretendard";font-size:23px;color:#fff;font-weight:500;
	border-bottom:1px solid rgba(255,255,255,0.2);
}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea h4 span{display:block;margin-top:10px;font-size:19px}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea dl{margin-bottom:20px;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea dl:nth-child(2){margin-top:10vh;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea dl:last-child{margin-bottom:0;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea dl dt{font-family:"Pretendard";font-size:17px;color:#fff;font-weight:500;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .toparea dl dd{margin-top:5px;font-family:"Pretendard";font-size:17px;color:#fff;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .btmarea{
	justify-content:flex-start;
	height:22vh;
	background:url(/images/page/m31_bg4.jpg)	no-repeat center;
	background-size:cover;
	text-align:left;
}
.m31 .con .boxwrap:nth-child(2)>div.conarea .btmarea>div>div{width:100%;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .btmarea h4{font-family:"Pretendard";font-size:23px;color:#fff;font-weight:500;}
.m31 .con .boxwrap:nth-child(2)>div.conarea .btmarea h4 span{display:block;margin-top:10px;font-size:19px;}





/* m32 */
.m32{}
.m32 .sec1{padding:0 5% 200px;}
.m32 .sec1 .philosophy{
	padding:115px 5% 100px;
	background:url(/images/page/m32_phil_bg.jpg) no-repeat center;
	background-size:cover;
	text-align:center;
}
.m32 .sec1 .philosophy h3{font-family:"Pretendard";font-size:23px;color:#fff;font-weight:500;}
.m32 .sec1 .philosophy h3 + div{
	display:flex;flex-wrap:wrap;justify-content:space-between;
	margin-top:55px;
}
.m32 .sec1 .philosophy dl{
	overflow:hidden;
	position:relative;
	box-sizing:border-box;
	width:32.5%;
	padding:45px 50px;
	text-align:left;
}
.m32 .sec1 .philosophy dl:before{
	display:block;content:"";
	width:100%;height:100%;
	background:rgba(255,255,255,0.3);
	backdrop-filter: blur(10px);
	position:absolute;left:0;top:0;
}
.m32 .sec1 .philosophy dl dt{
	position:relative;z-index:10;
	padding-bottom:30px;margin-bottom:55px;
	border-bottom:1px solid rgba(255,255,255,0.3);
	font-family:"Pretendard";font-size:23px;color:#fff;font-weight:500;
}
.m32 .sec1 .philosophy dl dd{
	position:relative;z-index:10;
	font-family:"Pretendard";font-size:17px;color:#fff;line-height:1.7em;
}
.m32 .sec1 .design{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-top:200px;}
.m32 .sec1 .design .titarea{
	width:44.2%;min-height:686px;
	background:url(/images/page/m32_design_bg.jpg) no-repeat center;
	background-size:cover;
}
.m32 .sec1 .design .conarea{box-sizing:border-box;width:44.2%;}
.m32 .sec1 .design .conarea dl{
	width:100%;
	padding:45px 0;
	border-bottom:1px solid #ccc;
	text-align:left;
}
.m32 .sec1 .design .conarea dl:first-child{border-top:1px solid #ccc;}
.m32 .sec1 .design .conarea dl dt{font-family:"Pretendard";font-size:23px;color:#111;font-weight:500;}
.m32 .sec1 .design .conarea dl dd{
	margin-top:15px;
	font-family:"Pretendard";font-size:17px;color:#666;
}
.m32 .sec2{padding:200px 5%;background:#eeeae2;}
.m32 .sec2 h3{font-family:"Pretendard";font-size:23px;color:#111;font-weight:500;}
.m32 .sec2 h3 + p{margin-top:15px;font-family:"Pretendard";font-size:17px;color:#555;line-height:1.7em;}
.m32 .sec2 ul{display:flex;flex-wrap:wrap;justify-content:center;margin-top:55px;}
.m32 .sec2 ul li{
	box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;
	min-width:215px;width:12.5%;height:202px;
	border:1px solid #ccc;
	font-family:"Pretendard";font-size:19px;color:#666;text-align:center;
}
.m32 .sec2 ul li .icon{}
.m32 .sec2 ul li .tit{margin-top:25px;}





/* m33 */
.m33{}
.m33 .sec1{padding:0 0 200px;}
.m33 .sec1 .area1{display:flex;align-items:center;}
.m33 .sec1 .area1>div{width:50%;}
.m33 .sec1 .area1 .imgarea{text-align:right;}
.m33 .sec1 .area1 .imgarea .img1{
	width:100%;height:62vh;
	background:url(/images/page/m33_img1.jpg) no-repeat center;
	background-size:cover;
}
.m33 .sec1 .area1 .imgarea .img2{
	display:inline-block;
	width:90%;height:32vh;
	margin-top:50px;
	background:url(/images/page/m33_img2.jpg) no-repeat center;
	background-size:cover;
}
.m33 .sec1 .area1 .conarea{
	box-sizing:border-box;
	padding:0 0 0 7%;
}
.m33 .sec1 .area1 .conarea dl{
	padding:95px 0;
	border-bottom:1px solid #ccc;
}
.m33 .sec1 .area1 .conarea dl:last-child{border-bottom:0;}
.m33 .sec1 .area1 .conarea dl dt{font-family:"Pretendard";font-size:23px;color:#111;font-weight:500;}
.m33 .sec1 .area1 .conarea dl dd{
	margin-top:30px;
	font-family:"Pretendard";font-size:17px;color:#555;line-height:1.7em;
}
.m33 .sec1 .area1 .conarea dl dd strong{
	display:block;
	margin-bottom:15px;
	font-size:19px;font-weight:500;color:#111;
}
.m33 .sec1 .area2{
	display:flex;flex-wrap:wrap;flex-direction:row-reverse;align-items:center;
	margin:200px 0 0;
}
.m33 .sec1 .area2 .imgarea{
	width:50%;min-height:100vh;
	background:url(/images/page/m33_img3.jpg) no-repeat;
	background-size:cover;
}
.m33 .sec1 .area2 .conarea{
	box-sizing:border-box;
	width:50%;
	padding:0 7% 0 5%;
}
.m33 .sec1 .area2 .conarea ul{border-top:1px solid #ccc;}
.m33 .sec1 .area2 .conarea ul li{
	padding:45px 0;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}
.m33 .sec1 .area2 .conarea ul li .titlearea{display:flex;align-items:center;}
.m33 .sec1 .area2 .conarea ul li .titlearea .num{
	width:100px;
	margin:-12px 0 0;
	font-family:"Cormorant Garamond";font-size:36px;color:#111;font-weight:500;line-height:1em;
}
.m33 .sec1 .area2 .conarea ul li .titlearea .tit{
	width:calc(100% - 100px);
	font-family:"Pretendard";font-size:23px;color:#111;font-weight:500;
}
.m33 .sec1 .area2 .conarea ul li .exp{
	display:none;
	padding:70px 0 0;
	font-family:"Pretendard";font-size:17px;color:#555;line-height:1.7em;
}
.m33 .sec1 .area2 .conarea ul li.on .exp{display:block;}






/* bbs */
.bbs{padding-bottom:200px;}
.bbs .bbsList1{
	display:flex;flex-wrap:wrap;
}
.bbs .bbsList1 li{
	overflow:hidden;
	width:calc((100% - 5%) / 3);
	margin:0 2.5% 100px 0;padding-bottom:45px;
	border-bottom:1px solid #c4c2be;
}
.bbs .bbsList1 li:nth-child(3n){margin-right:0;}
.bbs .bbsList1 li .thumb{overflow:hidden;position:relative;transition:all 0.6s;background:#000}
.bbs .bbsList1 li .thumb img{width:100%;transition:all 0.4s;}
.bbs .bbsList1 li:hover .thumb img{transform:scale(0.96);}
.bbs .bbsList1 li .tit{
	overflow: hidden;
	text-overflow: ellipsis;
	margin:45px 0 20px;
	font-family:"Pretendard";font-size:23px;color:#000;
}
.bbs .bbsList1 li .txt{
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin:0 0 25px;
	font-family:"Pretendard";font-size:18px;color:#666;line-height:1.7em;
}
.bbs .bbsList1 li .date{font-family:"Pretendard";font-size:18px;color:#666;}





/* paging */
.paging{
	text-align:center;
}
.paging a{
	display:inline-block;vertical-align:top;box-sizing:border-box;
	width:48px;height:48px;
	font-family:"Pretendard";color:#666;font-size:20px;line-height:48px;
}
.paging strong{
	display:inline-block;vertical-align:top;box-sizing:border-box;
	position:relative;
	width:48px;height:48px;
	font-family:"Pretendard";color:#000;font-size:20px;line-height:48px;font-weight:600;
}
.paging strong:after{
	display:block;content:"";
	width:12px;height:2px;
	background:#000;
	position:absolute;left:50%;bottom:8px;
	margin-left:-6px;
}
.paging .page_begin{
	width:48px;height:48px;
	background:url(/images/common/page_begin.png) no-repeat center;
	border:0;
}
.paging .page_prev{
	width:48px;height:48px;
	background:url(/images/common/page_prev.png) no-repeat center;
	border:0;margin-right:20px;
}
.paging .page_next{
	width:48px;height:48px;
	background:url(/images/common/page_next.png) no-repeat center;
	border:0;margin-left:20px;
}
.paging .page_end{
	width:48px;height:48px;
	background:url(/images/common/page_end.png) no-repeat center;
	border:0;
}




/* bbsView */
.bbsView{padding-bottom:200px;}
.bbsView .titlearea{
	padding:50px 5%;
	border-top:1px solid #c4c2be;border-bottom:1px solid #c4c2be;
	text-align:center;
}
.bbsView .titlearea .tit{font-family:"Pretendard";color:#000;font-size:40px;}
.bbsView .titlearea .date{margin-top:30px;font-family:"Pretendard";color:#666;font-size:18px;}
.bbsView .file{
	padding:20px 5%;
	border-bottom:1px solid #c4c2be;
	text-align:center;
}
.bbsView .file dl{display:inline-flex;flex-wrap:wrap;}
.bbsView .file dl dt{
	position:relative;
	font-family:"Pretendard";font-size:18px;color:#555;
	padding-right:12px;margin-right:12px;
}
.bbsView .file dl dt:after{
	display:block;content:"";
	width:1px;height:12px;
	background:#ccc;
	position:absolute;right:0;top:6px;
}
.bbsView .file dl dd{}
.bbsView .file dl dd a{
	display:block;
	padding-right:25px;
	background:url(/images/page/icon_file.png) no-repeat right top;
	font-family:"Pretendard";font-size:18px;color:#000;
}
.bbsView .viewCon{
	padding:100px 5%;
	border-bottom:1px solid #c4c2be;
}
.bbsView .btns{margin:80px 0 0;}
.btns .btnList{
	display:block;
	width:70px;height:70px;
	margin:0 auto;padding:27px 25px;
	box-sizing:border-box;
	background:#333;
}
.btns .btnList>div{
	width:100%;height:2px;
	margin-bottom:7px;
	background:#fff;
}
.btns .btnList>div:last-child{margin-bottom:0;}





/* m51 */
.m51{padding-bottom:200px;}
.m51 .conwrap{display:flex;flex-wrap:wrap;justify-content:space-between;}
.m51 .conwrap .img{
	overflow:hidden;
	position:relative;
	display:flex;align-items:center;justify-content:center;
	width:47%;
}
.m51 .conwrap .img .bg{
	position:absolute;left:0;top:0;
	width:100%;height:100%;
	background:url(/images/page/m51_img.jpg) no-repeat center bottom;
	background-size:cover;
}
.m51 .conwrap .img .txts{
	position:relative;z-index:10;
	font-size:23px;color:#fff;text-align:center;
}
.m51 .conwrap .img .txts>div:nth-child(2){margin-top:45px;}
.m51 .conwrap .formwrap{width:47%;}
.m51 .conwrap .formwrap .form{margin-bottom:50px;border-bottom:1px solid #ccc;}
.m51 .conwrap .formwrap .form dl{margin-bottom:45px;}
.m51 .conwrap .formwrap .form dl{}
.m51 .conwrap .formwrap .form dl dt{font-size:23px;color:#111;}
.m51 .conwrap .formwrap .form dl dd{margin-top:20px;}
.m51 .conwrap .formwrap .form dl dd input{
	box-sizing:border-box;
	width:100%;height:60px;
	border:1px solid #ccc;background:0;outline:0;
	padding:0 25px;
	transition:all 0.4s;
	font-family:"Pretendard";font-size:17px;
}
.m51 .conwrap .formwrap .form dl dd input:focus{border:1px solid #000;background:#fff;}
.m51 .conwrap .formwrap .form dl dd textarea{
	box-sizing:border-box;
	width:100%;height:300px;
	border:1px solid #ccc;background:0;outline:0;resize:none;
	padding:25px;
	transition:all 0.4s;
	font-family:"Pretendard";font-size:17px;
}
.m51 .conwrap .formwrap .form dl dd textarea:focus{border:1px solid #000;background:#fff;}
.m51 .conwrap .formwrap .btnMore{justify-content:center;}





/* animation */
.subVisual .title .en{opacity:0;transform:translateY(60px);}
.subVisual .title .kr{opacity:0;transform:translateY(60px);}
.subVisual.active .title .en{opacity:1;transform:translateY(0);transition:all 1s;}
.subVisual.active .title .kr{opacity:1;transform:translateY(0);transition:all 1s .1s;}


