@charset "utf-8";
@import url(font.css);
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');

.topBtn { position: fixed;right: 30px;bottom: 50px;border: 10px solid rgba(243, 211, 213, 0.3);border-radius: 100%;z-index: 1000;}
.topBtn a { width: 35px;height: 35px;line-height: 35px;font-size: 13px; background: #F3D3D5;display: inline-block;border-radius: 100%;color: #674e4f;text-align: center;border: 1px solid rgba(255,255,255,0.7);}

/* Main */
#main {position: relative;}
.sec01 { position: relative;}
.mVisual .mV-posi { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center;width: 100%;z-index: 1000;}
.mVisual .mV-posi > div { color: #fff;line-height: 110%;}
.mVisual .mV-maintxt { font-family: 'SchoolSafetyFoundation';font-size: 90px;font-weight: 700;}
.mVisual .mV-subtxt { font-family: 'SchoolSafetyFoundation';font-size: 90px;}
.mVisual .mV-subtxt i { font-family: 'SchoolSafetyFoundation';font-weight: 700;}
.mVisual .mV-kortxt { font-size: 20px;font-weight: 300;margin-top: 30px;}
.mVisual { height: 900px; overflow: hidden; width: 100%;position: relative;}
.mVisual video { scale: calc(2.1);object-fit: cover;/* margin-top: -60%;*/ position: absolute;left: 100%; top: 100%;transform: translate(-50%, -50%);}
.mainRes-posi { position: absolute; left: 50%; top: 78%; transform: translate(-50%, -50%);width: 100%; z-index: 100;}
.mainRes-posi .container { display: flex;width: 100%;background: rgba(255,255,255,0.2);border: 1px solid rgba(255,255,255,0.5);backdrop-filter: blur(6px);border-radius: 3px;align-items: stretch; }
.mainRes-posi .container .main-res { flex: 1 1 0; min-width: 0;padding: 30px;border-right: 1px solid rgba(255,255,255,0.5);color: #fff;display: flex; flex-direction: column; justify-content: center;}
.main-res p:nth-child(1) { font-size: 18px;line-height: 150%;}
.main-res p:nth-child(2) { font-size: 14px;font-weight: 200;}
.mreservation-btn { flex: none; width: 200px;text-align: center;font-size: 20px;font-weight: 600;display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s;color: #fff;}
.mrbr-right { border-right: 1px solid rgba(255,255,255,0.8);}
.mreservation-btn:hover { background: rgba(255,255,255,0.3); }
select.mres-sel { background: none;border: none;width: 100%;}
.sel-wrapper { position: relative; width: 100%;}
.sel-wrapper::after { content: ''; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); width: 18px; height: 18px; background: url('../img/white-sel.png') no-repeat center; background-size: contain; pointer-events: none;}
select.mres-sel { width: 100%;padding: 10px 40px 10px 0; background: transparent; color: #fff; border: none; outline: none; font-size: 15px; cursor: pointer; -webkit-appearance: none;   -moz-appearance: none; appearance: none;}
select.mres-sel::-ms-expand { display: none;}

/*공통 타이틀*/
.main-title { font-size: 40px;color: #181818;font-family: 'SchoolSafetyFoundation';font-weight: 700;line-height: 150%;}
.sub-title { font-size: 16px;color: #6A6A6A;font-weight: 400;line-height: 120%;padding-bottom: 30px;}

/*sec03 About*/
.sec02 { clear: both;padding: 120px 0;background: #FDF9F9;}
.sec02 .sec-flex { display: flex;gap: 30px;align-items: stretch;padding-top: 20px;}
.sec02 .sec-flex .mabout-left { width: 40%;aspect-ratio: 9 / 14;position: relative; z-index: 100;overflow: hidden;}
.sec02 .sec-flex .mabout-left img { width: 100%;aspect-ratio: 9 / 14;object-fit: cover;height: 100%;}
.sec02 .sec-flex .mabout-right { width: 60%;flex: 1; display: flex; flex-direction: column; justify-content: space-between;}

.maboutR-txt { position: relative;}
.maboutR-txt::before { content: '';position: absolute;left: 0;top: 0; width: 150px;height: 180px;background: #F3D3D5;z-index: 1;}
.maboutR-txt p { position: relative;z-index: 12;padding-left: 30px;}
.maboutR-txt p:first-child {padding-top: 20px;}
.maboutR-txt p i { font-size: 68px;font-family: 'SchoolSafetyFoundation';font-weight: 400;letter-spacing: -1px;}
.maboutR-txt p:nth-child(2) { color: rgba(24,24,24,0.5);padding-left: 50px;}

.maboutR-conts { display: flex;margin-top: 50px;}
.maboutRC-copy { width: 50%;margin-right: 5%;padding-top: 70px;}
.maboutRC-img { width: 45%;aspect-ratio: 9 / 14;overflow: hidden;}
.maboutRC-img img { width: 100%;aspect-ratio: 9 / 14;object-fit: cover;height: 100%;}
.maboutRC-time { position: relative;height: 100px;margin-bottom: 50px;font-weight: 600;padding-top: 35px;}
.maboutRC-time::before { content: 'MOMENT'; position: absolute;font-family: 'SchoolSafetyFoundation';left: -60px;top: 0;font-size: 90px;color: rgba(243,211,213,0.3);}
.maboutRC-beauty p { line-height: 150%;}
.maboutRC-beauty p:first-child { padding-bottom: 50px;}

/*sec03 New Dress*/
.sec03 { clear: both;padding: 120px 0;background: #fff;}
#macy-container { width: 100%; max-width: 1200px; margin: 0 auto;}
.macy-item { margin-bottom: 20px;}
.macy-item img,
.macy-item video { width: 100%; display: block; border-radius: 4px; }
.macy-item .item-img.circle img { border-radius: 180px;}
.item-info { padding: 15px 0;}
.item-info h3 { font-weight: 400;margin: 0 0 5px 0;font-size: 20px;}
.item-info p { color: #999;}
.more-btn-wrap { text-align: center; margin-top: 40px;}
.more-btn { padding: 12px 45px; border: 1px solid #333; background: #fff; border-radius: 25px; cursor: pointer; transition: 0.3s;}
.more-btn:hover { background: #333; color: #fff;}
.more-btn-wrap { display: flex; justify-content: center; margin-top: 50px;}
.more-btn { padding: 10px 40px; border: 1px solid #333; border-radius: 30px; background: none; cursor: pointer;}
.mainBann .swiper-pagination { width: 50px;background: #181818;border-radius: 30px;text-align: center;color: rgba(255,255,255,0.8);display: inline;font-size: 14px;padding: 1px 0 2px;font-weight: 100;right: 18%;left: auto;bottom: 15px;}
.mainBann .swiper-pagination .swiper-pagination-current { color: rgba(255,255,255,1);}

/* 비디오를 감싸는 컨테이너 */
.macy-item .video-container { width: 100%; padding-top: 95%; position: relative; overflow: hidden; border-radius: 4px;padding-bottom: 150px;}
.macy-item .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: center;}

/*sec04*/
.mbann-back1 { background: #F3D3D5;}
.mbann-back1 .container { background: url(../img/kakao-bann1.png) left center no-repeat;height: 160px;display: flex;align-items: center;}
.mbann-back2 { background: #FFCC00;}
.mbann-back2 .container { background: url(../img/kakao-bann2.png) 20% center no-repeat;height: 160px;display: flex;align-items: center;}
.bannslide-txt { padding-left: 50%;}
.banns-ttl { font-size: 25px;color: #181818;font-weight: 800;padding-bottom: 10px;}
.banns-txt { font-size: 14px;color: #6A6A6A;}

/*sec05 collection-main*/
.sec05 { clear: both;padding: 120px 0;background: #fff;position: relative;margin: 120px 0 60px;}
.sec05 .collection-main { position: absolute;right: 0;top: 0;aspect-ratio: 1; }
.sec05 .collection-main video { aspect-ratio: 1;width: 100%;height: 100%;object-fit: cover;}
.collection-swiper { position: relative;width: 70%;}
.collection-swiper .swiper-slide img { width: 100%;background-size: cover;}
.collection-nav { position: absolute;left: -10px;top: 108%;}
.collection-nav .swiper-button-prev { width: 40px;height: 40px;background: url(../img/collection-left.png) center no-repeat;}
.collection-nav .swiper-button-next { width: 40px;height: 40px;background: url(../img/collection-right.png) center no-repeat;right: -100px;}
.collection-btmtxt { position: absolute;left: -50px;top: 85%;}
.collection-btmtxt i { font-family: 'SchoolSafetyFoundation';top: 0;font-size: 150px;color: rgba(243,211,213,0.3);font-weight: 800;}
.collection-title { font-size: 40px;font-family: 'SchoolSafetyFoundation';font-weight: 600;position: relative; z-index: 10;}
.collection-title span { font-family: 'SchoolSafetyFoundation';font-weight: 400;}
.collection-title i { font-family: 'SchoolSafetyFoundation';font-weight: 600;}
.collection-txt { padding: 10px 0 30px;position: relative; z-index: 10;}
.collection-ttlwrap { position: absolute;left: 35%;top: 60%;z-index: 1000; }
.collection-ttlwrap .collection-mainttl { color: #fff; font-size: 24px;font-weight: 700;}
.collection-ttlwrap .collection-maintxt { color: #fff; font-size: 16px;font-weight: 200;line-height: 130%;margin-top: 20px;}
.collection-ttlwrap .collection-maintxt span { display: block;}

.mInstagram-thum { clear: both;}
.mInstagram-thum span { aspect-ratio: 1;display: inline-block;flex: 0 0 calc((100% - 4 * 5px) / 5);gap: 5px;}
.mInstagram-thum span img { border-radius: 4px;width: 100%;}


/*sec06 Instagram*/
.sec06 { clear: both;position: relative;background:linear-gradient(to right, #FFF6F4, #FBE8E9);padding: 120px 0;}
.mInstagram-thum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; max-width: 1200px; margin: 0 auto; align-items: start;margin-bottom: 5px;}
.mInstagram-thum span { display: block; width: 100%; overflow: hidden; border-radius: 4px; }
.mInstagram-thum span img { width: 100%; height: 100%; object-fit: cover; display: block;}
.Instagram-two { position: relative;}
.insta-text { width: 40%;position: absolute;left: 60%;top: 50%;text-align: center; }
.insta-displex { position: absolute; left: 50%;  top: 50%;  transform: translate(-50%, -50%);}
.insta-text p { font-size: 20px; margin-bottom: 15px;}
.insta-btn { display: inline-block; padding: 10px 25px; background: #000; color: #fff; border-radius: 30px; text-decoration: none; font-size: 14px;}
.insta-btn:hover { background: #F3D3D5;color: #181818;}
.main-Instagram { font-size: 40px;font-family: 'SchoolSafetyFoundation';font-weight: 600;padding-bottom: 30px;}

/*sec07*/
.sec07 { position: relative;clear: both;padding: 120px 0;}
.online-backimg { background: url(../img/naver-form.png) center center / cover no-repeat fixed;width: 100%;min-height: 270px;background-size: cover;border-radius: 4px;text-align: center;display: flex; justify-content: center; align-items:center;}
.online-backimg > div {color: #fff;}
.online-title { font-size: 28px;font-weight: 600;}
.online-txt { padding: 10px 0 30px;font-weight: 200;}
a.online-btn { color: #fff; }
.online-btn { background: rgba(255,255,255,0.2);display: inline-block;border-radius: 30px;padding: 10px 25px;border: 1px solid #fff;}
.online-btn:hover { background: rgba(255,255,255,0.7);color: rgba(0,0,0,0.5);}
.naverform-btn { background: rgba(255,255,255,0.9);display: inline-block;border-radius: 30px;padding: 10px 25px;border: 1px solid rgba(255,255,255,0.7);}
.naverform-btn:hover { background: rgba(255,255,255,0.2);color: rgba(0,0,0,0.5);color: #fff;border: 1px solid #fff;}


/* 반응형 설정 */
@media (max-width: 1024px) {
    #macy-container { padding: 10px; }
    .item-info h3 { font-size: 16px; }
}

@media (max-width: 640px) {
    #macy-container { padding: 5px; }
    .item-info { padding: 10px 0; }
    .item-info h3 { font-size: 15px; }
    
    /* 모바일에서는 버튼을 좀 더 넓게 */
    .more-btn { width: 100%; }
}




/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/

@media (max-width:1600px) {	
    
    .sec05 .collection-main { right: -10%;}

}


@media (max-width:1200px) {	

    .mVisual .mV-maintxt,
    .mVisual .mV-subtxt { font-size: 50px;}
    .mVisual .mV-kortxt { margin-top: 15px;}
    .mVisual .mV-kortxt span { display: block;line-height: 150%;}
    .mainRes-posi { width: 90%;}

    /*about*/
    .maboutR-txt p i { font-size: 60px;}

    .sec05 .collection-main { right: -40%;}
    .collection-ttlwrap {left: 30px;top: 75%; }

}


@media (max-width:1024px) {	

    .mInstagram-thum { grid-template-columns: repeat(3, 1fr);}
    .mInstagram-thum span:nth-child(2),
    .mInstagram-thum span:nth-child(5) {   margin-top: 0; }
    .mVisual video { scale: calc(1.7);top: 70%;}
    
    .mVisual { height: 700px;}
    .mainRes-posi .container { display: block;padding: 0;}
    .mreservation-btn { width: 50%;height: 50px;line-height: 50px;float: left;}
    .mainRes-posi .container .main-res { border-right: none;border-bottom: 1px solid rgba(255, 255, 255, 0.5);padding: 15px 30px;}

    /*about*/
    .maboutR-txt p i { font-size: 45px;}
    .maboutR-txt::before { width: 120px;height: 140px;}
    .sec02 .sec-flex { gap: 15px;}
    .maboutRC-time::before { font-size: 70px;}
    .maboutRC-copy { width: 53%; margin-right: 2%;}

    /*sec04*/
    .mbann-back2 .container { background: url(../img/kakao-bann2.png) 0 center no-repeat;height: 160px;display: flex;align-items: center;}
    .mbann-back2 .bannslide-txt { padding-left: 40%;}

    .sec05 .collection-main { right: -50%;}

}


@media (max-width:768px) {	

    .mInstagram-thum { grid-template-columns: repeat(2, 1fr); gap: 10px;}
    .insta-text {grid-column: span 2; align-items: center; text-align: center; padding: 40px 0;}
    .mVisual .mV-maintxt,
    .mVisual .mV-subtxt { font-size: 32px;}
    .mVisual .mV-kortxt { font-size: 16px;}

    .mVisual video { scale: calc(1.5);top: 60%;}

    /*about*/
    .sec02 .sec-flex { display: block;}
    .sec02 .sec-flex .mabout-left { width: 100%;height: 300px;}
    .sec02 .sec-flex .mabout-right { width: 100%;margin-top: -140px; z-index: 1000; position: relative;}
    .maboutRC-img { height: 400px;}

    /*sec04*/
    .mbann-back1 .container,
    .mbann-back2 .container { text-align: center;}
    .mbann-back1 .bannslide-txt,
    .mbann-back2 .bannslide-txt { padding-left: 0%;width: 100%;}
    .banns-ttl { font-size: 20px;}
    .mbann-back2 .container { background: url(../img/kakao-bann2.png) -160px center no-repeat;height: 160px;display: flex;align-items: center;}

    .mInstagram-thum span.mInst-none { display: none;}
    .insta-text { position: relative;left: 30%;}
    .insta-displex { width: 250px;margin: 0 auto;}

    .collection-swiper { width: 100%;}
    .collection-ttlwrap .collection-mainttl,
    .collection-ttlwrap .collection-maintxt { display: none;}
    
    .collection-btmtxt i { font-size: 50px;}

}

@media (max-width:480px) {	
    
    .mVisual video { scale: calc(1.2);top: 50%;}
    .maboutR-txt p i { font-size: 32px;}
    .maboutR-txt::before { height: 120px;}
    .sec02 .sec-flex .mabout-right { margin-top: -120px;}
    .maboutR-conts { display: block;}
    .maboutRC-copy { width: 100%;margin-right: 0;margin-bottom: 15px;padding-top: 40px;}
    .maboutRC-img { width: 100%;height: 300px;}

    /*sec04*/
    .mbann-back2 .container { background: url(../img/kakao-bann2.png) -350px center no-repeat;height: 160px;display: flex;align-items: center;}

    .online-txt { font-size: 14px;}

    .collection-title { font-size: 30px;}
    
}


@media (max-width:360px) {	
	
    .maboutR-txt p i { font-size: 26px;}
    .maboutR-txt::before { height: 90px;}
    .sec02 .sec-flex .mabout-right { margin-top: -90px;}

    .collection-title { font-size: 24px;}
	
}