@charset "utf-8";

/* mVisual */
#mVisual{width: 100%; height: 100vh;  overflow:hidden ;}
#mVisual .mv{background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; height: 100%; position:relative}
#mVisual .mv:before {content:''; width:100%; height:100%;background-image: url('/petit/images/main/mv3.webp'); background-size:cover; 
								animation: introBg 5s ease-in-out; position:absolute; left:0; top:0; background-position:center center; }
#mVisual .mv.mv1 .inner{position:relative; width:100%}
/* #mVisual .mv.mv1 .inner:after {content:''; width:960px; height:100%;background: url('/petit/images/main/mv1-after.webp') no-repeat; background-size:100% auto;
								background-position:left top; position:absolute; left:0; top:0 ; animation: mv1bg 3s ease-in-out; filter: blur(0);  -webkit-filter: blur(3px);} */
/* #mVisual .mv.mv1 .inner:before {content:''; width:960px; height:100%;background: url('/petit/images/main/mv1-before.webp') no-repeat; background-size:100% auto;
								background-position:right top; position:absolute; right:0; top:0; animation: mv1bg 3s ease-in-out; filter: blur(0);  -webkit-filter: blur(3px);} */
#mVisual .mv.mv1 .img {position:absolute; right:0; bottom:0}
#mVisual .mv.mv1 .img img {width:100%; max-width:195px}
#mVisual .mv .inner{height: 100%; display:flex; justify-content:center; align-items: center}
#mVisual .mv .inner .txt {/*padding-bottom:10%;*/ color:#FFF; text-align:center}
#mVisual .mv .inner .txt dl {   text-shadow:0 0 8px rgba(0,0,0,0.1);  }
#mVisual .mv .inner .txt dl dt {font-family: 'GowunDodum'; font-size:10.0rem; line-height:1.6em; }
#mVisual .mv .inner .txt dl dd {font-family: 'Marcellus', serif; font-size:10.0rem;  line-height:1em; }
#mVisual .mv .inner .txt .t1 {padding:0 5%; margin-top:1em; font-size:1.8rem; /*color:#b69992*/}

@keyframes introBg {
	0%{transform: scale(1.2);}
	100%{transform: scale(1);}
}
@keyframes mv1bg {
	0%{filter: blur(0);  -webkit-filter: blur(0); }
	100%{filter: blur(3px);  -webkit-filter: blur(3px); }
}

@media all and (max-width:1599px){
	#mVisual .mv.mv1 .inner:after,
	#mVisual .mv.mv1 .inner:before {width:800px }
}
@media all and (max-width:1280px){
	#mVisual .mv.mv1 .inner:after,
	#mVisual .mv.mv1 .inner:before {width:650px }

	#mVisual .mv .inner .txt dl dt { font-size:8.0rem;  line-height:1em;  }
	#mVisual .mv .inner .txt dl dd { font-size:8.0rem;  line-height:1em;}

	#mVisual .mv.mv1 .img {width:160px}

}
@media all and (max-width:767px){
	#mVisual .mv.mv1 .inner:after,
	#mVisual .mv.mv1 .inner:before {width:100% }

	#mVisual .mv .inner .txt dl dt { font-size:6.0rem;  line-height:1em;  }
	#mVisual .mv .inner .txt dl dd { font-size:6.0rem;  line-height:1em;}

	#mVisual .mv.mv1 .img {display:none}
}
@media all and (max-width:480px){
	#mVisual .mv .inner .txt dl dt { font-size:12vw; }
	#mVisual .mv .inner .txt dl dd { font-size:11vw; }
}





.mImages img {width:100%}

#mSection2  { display:flex; flex-wrap:wrap; padding: 135px 0 240px;}
#mSection2 .title { width:41.66%; position:sticky; top:100px; max-height:960px; z-index:2 }
#mSection2 .cont { width:58.33%; position: relative;}

#mSection2 .title #mTitle dt{font-size: 7.0rem; line-height: 1.0em;}
#mSection2 .title #mTitle dd{margin-top: 1.6em; font-size: 1.8rem; line-height: 1.8em;}
#mSection2 .title .bg{position: absolute; left: -170px; top: 35%;}
#mSection2 .title a{margin-top: 60%; margin-left: 10%; width: 94px; height: 94px; display: inline-flex; justify-content: center; align-items: center; position: relative;}
#mSection2 .title a::after{content: ''; background: url(/petit/images/main/msignature-more.png) no-repeat center center / 100% auto; width: 100%; height: 100%;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation:rotates 8s linear infinite;}
@keyframes rotates{
	0%{transform: translate(-50%, -50%) rotate(0)}
	100%{transform: translate(-50%, -50%) rotate(360deg)}
}
#mSection2 .cont .bg2{position: absolute; right: 0; bottom: -5%;}
#mSection2 .cont ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
#mSection2 .cont ul > li{width: 57%; margin-left: -10%;}
#mSection2 .cont ul > li a{display: flex; justify-content: flex-end;}
#mSection2 .cont ul > li:nth-child(2n-1){margin-left: -13%;}
#mSection2 .cont ul > li:nth-child(2n){margin-top: 100px;}
#mSection2 .cont ul > li .txt{width: 40px; flex:0 0 auto; padding-top: 120px; padding-right: 120px;}
#mSection2 .cont ul > li .txt span{position:absolute; width: 200px; transform: rotate(90deg); font-family: 'Marcellus', serif; font-size: 1.6rem; color: #6f678e; white-space: nowrap; text-transform: uppercase;}
#mSection2 .cont ul > li .img{position: relative;}
#mSection2 .cont ul > li .img img{max-width: 100%;}
#mSection2 .cont ul > li .img p{position: absolute; left: 10px; bottom: 10px; padding-left: 0.6em; background-color: #6f678e; color: #fff; width: 170px; line-height: 50px; font-family: 'gmarketsans'; font-weight: 500; font-size: 2.0rem;}
#mSection2 .cont ul > li .img .link{position: absolute; left: 10px; bottom: 15px; display: flex; align-items: center; padding-left: 50px; gap: 15px; color: #fff; height: 100px; font-size: 2.4rem; font-family: 'gmarketsans'; font-weight: 500; line-height: 1.3; transition: all .35s ease;}
#mSection2 .cont ul > li .img:hover .link{transform: translateY(-10px);}
#mSection2 .cont ul > li .img .link:before{content: ''; position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; border:1px solid #ffffff60; border-radius: 50%;}
#mSection2 .cont ul > li .img .link small{display: block; color: #fff; line-height: 1.2; font-size: 1.2rem; font-family: 'gmarketsans'; font-weight: 300; letter-spacing: 0.05em;}

#mTitle dt{font-family: 'Marcellus', serif; font-size: 5.0rem; color: #222;}
@media all and (max-width:1440px){
    #mSection2 .cont ul > li .img .link{height: 70px; padding-left: 25px; font-size:1.8rem;;}
    #mSection2 .cont ul > li .img .link:before{width: 70px ;height: 70px;}
    #mSection2 .cont ul > li .img .link img{height: 15px;}
    #mSection2 .cont ul > li .img .link small{font-size: 1.0rem;}
}
@media all and (max-width:976px){
    #mTitle dt{font-size: 4.0rem;}

    #mSection2{flex-direction: column;}
    #mSection2 .title{position: relative; top: 0; width: 100%; padding: 0 3%;}
    #mSection2 .title a{display: none;}
    #mSection2 .title .bg{right: -50px; top: 0; left: auto; transform: scaleX(-1); z-index: -2; width:55vw;}
    #mSection2 .title .bg img{max-width: 100%;}
    #mSection2 .cont{width: 100%; padding: 5% 0% 5% 3%;}
}
@media all and (max-width:767px){
    #mSection2 {padding: 80px 0 110px;}
    #mSection2 .title {}
    #mSection2 .title #mTitle dt{font-size: 4.4rem;}
    #mSection2 .title .bg{display: none;}
    #mSection2 .cont ul > li{margin-left: -7%;}
    #mSection2 .cont ul > li:nth-child(2n-1){margin-left: -10%;}
    #mSection2 .cont ul > li .img{max-width: 300px;}
    #mSection2 .cont ul > li .img p{width: 80%; max-width: 170px; font-size: 1.5rem; line-height: 36px;}
    #mSection2 .cont ul > li .txt{padding-right: 65px; padding-top: 65px;}
    #mSection2 .cont ul > li .txt span{font-size: 1.4rem; width: 100px;}
    #mSection2 .cont ul > li:nth-child(2n){margin-top: 30px;}
    #mSection2 .cont .bg2{bottom: -5%; right: 10%;}
    #mSection2 .cont .bg2 img{max-width: 45vw;}
    #mSection2 .cont ul > li .img .link{left: 0.3em; bottom: 0.3em;}
    #mSection2 .cont ul > li .img .link img{display: none;}
}
@media all and (max-width:380px){
    #mSection2 .cont ul > li:nth-child(2n-1){margin-left: -13%;}
    #mSection2 .cont ul > li .img .link{height: 50px; padding-left: 15px; font-size: 1.4rem;}
    #mSection2 .cont ul > li .img .link:before{width: 50px ;height: 50px;}
    #mSection2 .cont ul > li .img .link small{font-size: 0.8rem;}

}

#mPromotion{padding: 115px 0;}
#mPromotion .promolist{margin-top: 50px; display: flex; gap: 20px; flex-wrap: wrap;}
#mPromotion .promolist > li{width: calc((100% - 60px)/4); overflow: hidden;}
#mPromotion .promolist > li img{max-width: 100%; transition:all .7s;}
#mPromotion .promolist > li:hover img{transform: scale(1.05);}
@media all and (max-width:976px){
    #mPromotion{padding: 80px 0;}
    #mPromotion .promolist{gap: 10px;}
    #mPromotion .promolist > li{width: calc((100% - 30px)/4);}
}
@media all and (max-width:767px){
    #mPromotion .promolist{margin-top: 5%;}
    #mPromotion .promolist > li{width: calc((100% - 10px)/2);}
}


#mBeauty{background:url('/petit/images/main/mbeauty-bg.png'); background-size:cover; background-position:left top; padding-left: 28%; padding-block: 95px;}
#mBeauty .title{padding-left: 120px;}
#mBeauty .title dl{display: flex; align-items: flex-end; gap: 40px;}
#mBeauty .title dl dt{font-size: 6.0rem; color: #fff; font-weight: 200; font-family: 'gmarketsans'; line-height: 1.2em; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);}
#mBeauty .title dl dt .fw-m{font-weight: 500;}
#mBeauty .title dl dd{color: #fff; font-size: 1.8rem; margin-bottom: 20px;}
#mBeauty .cont{margin-top: 40px;}
/* #mBeauty .cont ul{display: flex; gap: 20px;} */
#mBeauty .slick-track{display: flex; gap: 20px;}
#mBeauty .cont ul li{background-color: #fff; padding: 15px;}
#mBeauty .cont ul li dl{position: relative; margin-left: 18px; padding-left: 18px; padding-block: 30px;}
#mBeauty .cont ul li dl:before{content: ''; position: absolute; left: 0; bottom: 20%; width: 1px; height: 110%; background-color: #5e5389;}
#mBeauty .cont ul li dl dt{font-family: 'gmarketsans'; font-weight: 500; font-size: 2.2rem; color: #5e5389;}
#mBeauty .cont ul li dl dd{font-size: 1.6rem;}
@media all and (max-width:1480px){
    #mBeauty{padding-left: 8%;}
}
@media all and (max-width:1150px){
    #mBeauty .title{padding-left: 0;}
}
@media all and (max-width:976px){
    #mBeauty{padding-block: 80px;}
    #mBeauty .title dl{flex-direction: column; align-items: flex-start; gap: 20px;}
    #mBeauty .title dl dt{font-size: 5.0rem;}
    #mBeauty .cont ul li img{max-width: 430px; width: 100%;}
}
@media all and (max-width:767px){
    #mBeauty .cont ul li img{max-width: 380px;}
}
@media all and (max-width:567px){
    #mBeauty .cont ul li{max-width: 300px;}
}
@media all and (max-width:480px){
#mBeauty .cont{margin-top: 15px;}
#mBeauty .cont ul li{max-width: 260px;}
}

.information .inner .r_cont .box.t p{font-size: 1.8rem;  word-break: keep-all;}
.information .inner .r_cont .box.t p br.br480 {display:none}
.information .inner .r_cont .box.m{margin-top: 60px; margin-bottom: 40px;}
.information .inner .r_cont .box.b{}
.information .inner .r_cont .box.b ul{display: flex; gap:0 10px; margin-top: 20px;}
.information .inner .r_cont .box .tel{margin-top: 12px;display: flex; gap:0 12px; align-items: center;}
.information .inner .r_cont .box .tel h3{}
.information .inner .r_cont .box .tel h3 a{color: #6f678e; font-size: 28px; font-weight: 800;}
.information .inner .r_cont .box .tel ul{display: flex; gap:0 3px;}
.information .inner .r_cont .box .tel ul li{ background-color: #524978; border-radius: 50%;}
.information .inner .r_cont .box .tel ul li a{}
.information .inner .r_cont .box .tel ul li a img{}
.information .inner .r_cont .box .cont{display: flex;}
.information .inner .r_cont .box .cont:nth-child(1){display: none;}
.information .inner .r_cont .box .cont+.cont{margin-top: 30px;}
.information .inner .r_cont .box .lcont{font-size:1.8rem; font-weight: 600; width: 100px;}
.information .inner .r_cont .box .rcont{ width: calc(100% - 100px);}
.information .inner .r_cont .box .rcont dl{display: flex;}
.information .inner .r_cont .box .rcont dl+dl{margin-top: 10px;}
.information .inner .r_cont .box .rcont dl dt{width: 80px; font-size: 16px;}
.information .inner .r_cont .box .rcont dl dd{width: calc(100% - 80px); font-family: 'Roboto', 'SUIT', sans-serif; font-size: 16px;}
.information .inner .r_cont .box .rcont p {font-size: 16px;}
.information .inner .r_cont .box .rcont p br.br480 {display:none}
.information .inner .r_cont .box .rcont p+p{margin-top: 10px;}
.information .inner .r_cont .box .rcont ul{display: flex; gap:0 30px;}
.information .inner .r_cont .box .rcont ul li{}
.information .inner .r_cont .box .rcont ul li a{}
.information .inner .r_cont .box .rcont ul li a img{}
.information .inner .r_cont .b.box > div{font-size: 17px; font-weight: 600; cursor: pointer;}


/* information */
.sub_info{padding: 100px 0;}
.sub_info .inner{width:1400px; margin:0 auto; display: flex; align-items: center;}
.sub_info .inner .r_cont{width: 540px; padding-left: 80px;}
.sub_info .inner .map_box{width: calc(100% - 540px);}
.sub_info .inner .map_box .wrap_controllers{display: none;}
.sub_info .inner .r_cont .tit{font-size: 5.0rem; color:#222; font-family: 'Marcellus', serif; font-weight: 400; margin-bottom: 40px;}
.information.sub_info .inner .r_cont .cont:nth-child(1){display: flex}
.sub_info .inner .r_cont .cont:nth-child(4){display: none}
.sub_info .inner .r_cont .b.box{display: none}

@media all and (max-width:1399px){
	.sub_info .inner{width:90%;}
	.sub_info .inner .r_cont{padding-left: 5%;}
}
@media all and (max-width:1280px){
	.sub_info{padding: 80px 0;}
	.sub_info .root_daum_roughmap .wrap_map{height: 480px !important;}
	.information .inner .r_cont .box .cont+.cont{margin-top: 25px;}
	.information .inner .r_cont .box.m{margin-top: 40px;}

	.sub_info .inner .r_cont .tit{font-size: 4.0rem;}
	.sub_info .inner .r_cont{width: 540px; }
	.sub_info .inner .map_box{width: calc(100% - 540px);}
	.information .inner .r_cont .box .lcont { width:90px;}
}
@media all and (max-width:976px){
	.sub_info .inner{ flex-wrap:wrap; }
	.sub_info .inner .r_cont{width:fit-content; padding:0; margin:8% auto 0}
	.sub_info .inner .map_box{width: 100%}
	.sub_info .root_daum_roughmap .wrap_map{height: 400px !important;}
	.sub_info .inner .r_cont .tit {text-align:center }
}
@media all and (max-width:640px){
}
@media all and (max-width:480px){
	.sub_info .root_daum_roughmap .wrap_map{height: 350px !important;}

	.sub_info .inner .r_cont {width:96%; margin:0 auto; margin-top:8%}
	.information .inner .r_cont .box.t p br.br480 {display:block}
	.information .inner .r_cont .box .rcont p br.br480 {display:block}

	.information .inner .r_cont .box .rcont dl dt{width: 70px;}
	.information .inner .r_cont .box .lcont { width:80px;}
}