@charset "utf-8";

#header {position: fixed;left: 0;width: 100%;height: 130px;}
#header > .inner {display: flex;justify-content: space-between;width: 100%;height:80px;max-width: 1500px;margin: 0 auto;}
#header h1 > a {display:block}
#header h1 img {width:105px}
.mHeader {position:sticky;background-color:#f1f1f1}
.mHeader h1 {margin:0;position:absolute;top:5.56vw;left:5.56vw;}
.mHeader h1 a {display:block;}
.mHeader h1 a img {width:14.58vw;}

.subContainer {max-width:1500px;width:100%;margin:0 auto !important}

.aboutBox > .inner {display:flex;height: 100vh;align-items: center;min-height:950px}
.aboutBox > .inner .txtBox {flex:1}
.aboutBox > .inner .txtBox strong {display:flex;gap: 10px;align-items: center;}
.aboutBox > .inner .txtBox strong .logo {width:75px;}
.aboutBox > .inner .txtBox strong .logo img {width:100%}
.aboutBox > .inner .txtBox strong span {font-size: 30px;letter-spacing:0.25px;line-height:1;font-weight: 500;-webkit-text-stroke: 0.1px #000;}
.aboutBox > .inner .txtBox strong + .pBox {margin-top:65px}
.aboutBox > .inner .txtBox .pBox + .pBox {margin-top:30px}
.aboutBox > .inner .txtBox .pBox em {display:block;font-size:16px;font-weight: 600;letter-spacing:0;font-family:'Pretendard'}
.aboutBox > .inner .txtBox .pBox p {margin-top:30px;font-size:16px;font-weight: 300;letter-spacing:0;font-family:'Pretendard';line-height:1.75}
.aboutBox > .inner .imgBox {flex:1;text-align:right}
.aboutBox > .inner .imgBox img {width:532px}

.contactBox > .inner {height: 100vh;padding-top:180px;min-height:950px;max-width:1000px;margin:0 auto}
.contactBox > .inner .mapBox {position:relative;width:100%;height:480px}
.contactBox > .inner .mapBox iframe {position:absolute;width:100%;height:100%;top:0;left:0}
.contactBox > .inner .infoBox {margin-top:55px}
.contactBox > .inner .infoBox .addBox {display:flex;width:100%;justify-content: space-between}
.contactBox > .inner .infoBox .telBox {margin-top:20px}
.contactBox > .inner .infoBox .addBox .naverBtn {display:block;position:relative;padding-right:27px;font-size:16px;font-weight:600;font-family:'Pretendard';line-height: 1.875;letter-spacing:-0.25px}
.contactBox > .inner .infoBox .addBox .naverBtn:before {content:'';display:block;position:absolute;top: 12px;right:0;width:17px;height:10px;background:url(../img/ico_arrow.png) no-repeat 0 0/100%}
.contactBox > .inner .infoBox em {display:block;position:relative;padding-left:35px;font-size:16px;font-weight:600;font-family:'Pretendard';line-height:1.875;letter-spacing:0.25px}
.contactBox > .inner .infoBox span {display:block;padding-left:35px;font-size:16px;font-weight:300;font-family:'Pretendard';line-height:1.875;letter-spacing:0.5px}
.contactBox > .inner .infoBox em:before {content:'';display:block;position:absolute;top: 5px;left:0;width: 15px;height: 21px;background:url(../img/ico_map.png) no-repeat 0 0/100%}
.contactBox > .inner .infoBox em.tel:before {width:18px;height:18px;background-image:url(../img/ico_tel.png);top: 7px;}

.portfolioBox > .inner {padding:180px 0}
.portfolioBox > .inner .titBox h3 {display:flex;gap: 10px;align-items: center;justify-content: center;}
.portfolioBox > .inner .titBox h3 .logo {width:75px;}
.portfolioBox > .inner .titBox h3 .logo img {width:100%}
.portfolioBox > .inner .titBox h3 span {font-size: 30px;letter-spacing:0.25px;line-height:1;font-weight: 500;-webkit-text-stroke: 0.1px #000;}
.portfolioBox > .inner .titBox p {margin-top:40px;font-size: 16px;letter-spacing:0.1px;line-height:1;font-weight: 300;font-family:'Pretendard';text-align:center}
.portfolioBox > .inner .listBox {margin-top:100px}
.portfolioBox > .inner .listBox ul {display:flex;gap:80px 30px;flex-wrap: wrap;}
.portfolioBox > .inner .listBox ul li {flex:0 1 calc(100%/3 - 20px);filter: grayscale(1);transition:all .8s ease-out}
.portfolioBox > .inner .listBox ul li:hover {filter:none}
.portfolioBox > .inner .listBox ul li img {width:100%}
.portfolioBox > .inner .listBox ul li .name {display:block;margin-top:20px;line-height:1;font-size:16px;font-weight:300;letter-spacing:0}

.dressBox > .inner {padding:180px 0}
.dressBox > .inner .listBox ul {display:flex;gap:80px 30px;flex-wrap: wrap;}
.dressBox > .inner .listBox ul li {position:relative;flex:0 1 calc(100%/3 - 20px);filter: grayscale(1);transition:all .8s ease-out}
.dressBox > .inner .listBox ul li .nameBox {display:flex;gap:10px;position:absolute;bottom:-35px;left:0;transform:translateY(20px);opacity:0;transition:all .3s ease-out}
.dressBox > .inner .listBox ul li .nameBox em {line-height:1;font-size:16px;font-weight:300;font-family:'Pretendard';}
.dressBox > .inner .listBox ul li .nameBox span {line-height:1;font-size:16px;font-weight:100;font-family:'Pretendard';}
.dressBox > .inner .listBox ul li:hover {filter:none}
.dressBox > .inner .listBox ul li:hover .nameBox {transform:translateY(0);opacity:1}
.dressBox > .inner .listBox ul li img {width:100%}

.customBox > .inner {padding:180px 0}
.customBox > .inner .titBox h3 {display:flex;gap: 10px;align-items: center;justify-content: center;}
.customBox > .inner .titBox h3 span {font-size: 30px;letter-spacing:0.25px;line-height:1;font-weight: 500;-webkit-text-stroke: 0.1px #000;}
.customBox > .inner .titBox p {margin-top:40px;font-size: 16px;letter-spacing:0.1px;line-height:1.75;font-weight: 200;font-family:'Pretendard';text-align:center}
.customBox > .inner .listBox {margin-top:100px}
.customBox > .inner .listBox ul {display:flex;gap:80px 30px;flex-wrap: wrap;}
.customBox > .inner .listBox ul li {flex:0 1 calc(100%/3 - 20px);filter: grayscale(1);transition:all .8s ease-out}
.customBox > .inner .listBox ul li:hover {filter:none}
.customBox > .inner .listBox ul li img {width:100%}

.reservTxt {padding:40px;width:100%;max-width:660px;margin:80px auto 0;background-color:#ebebeb}
.reservTxt dt {font-size:16px;font-weight:600;font-family:'Pretendard';}
.reservTxt dd {margin-top:25px;font-size:14px;font-weight:200;font-family:'Pretendard';line-height:1.7}
.reservTxt dd + dt {margin-top:25px}
#wpcf7-f52-p53-o1 {width:100%;max-width:660px;margin:0 auto !important;padding-bottom:180px}
#wpcf7-f52-p53-o1 label {display:block;font-size: 16px;font-weight: 500;font-family:'Pretendard'}
#wpcf7-f52-p53-o1 .label {margin-top:35px}
/*#wpcf7-f52-p53-o1 label + label {margin-top:20px}*/
input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    background: transparent;
}
#label1, #privacy {margin-top:35px}
#label1 > span {margin-top:10px}
#wpcf7-f52-p53-o1 .desc {font-size:14px;color:#777;font-weight:300;margin-top:10px}
.wpcf7-form-control.wpcf7-radio {display: flex;justify-content: space-between;}
.wpcf7-list-item {margin:10px 0 0 0}
.wpcf7-list-item label span {font-size:16px;font-weight:300}
textarea {border-color:#ccc;height:100px;background: transparent}
.wpcf7-form-control.wpcf7-submit.has-spinner {display:block;margin:80px auto 0;width:320px;height:60px;background-color:#231916;color:#f1f1f1;font-size:18px;font-weight: 500;font-family:'Pretendard';border-color:#231916;border-radius:0}
.wpcf7-form-control.agree1 {display:block;text-align:center}
.privacyBox {margin:10px 0 30px;width:100%;height:100px;overflow-y:auto;border:1px solid #ccc;padding: 15px 20px;font-size:14px;font-family:'Pretendard';font-weight: 200;}
.privacyBox p {line-height:1.5}
.wpcf7-form-control.wpcf7-acceptance.optional {display:block;text-align:center;}
.wpcf7-form-control.wpcf7-acceptance.optional span {font-size:16px;font-weight:300;font-family:'Pretendard'}

/* 팝업 */
.listBox .thumBox {display: none;}
body.modal-open {overflow: hidden !important;}
.modal-overlay {position: fixed;top: 0; left: 0;width: 100%; height: 100%;background-color:rgba(255,255,255,.9);z-index: 10000;display: none;align-items: center;justify-content: center;}
.main-slider {width: 100%;height: 100vh;}
.main-slider .slick-slide img {height: 100vh;width: auto !important;max-width: 100vw;margin: 0 auto;object-fit: contain;display: block;max-height: 100vh !important}
.main-slider, .slick-list, .slick-track, .main-slider .slick-slide > div {height: 100vh !important;}
.slick-arrow {position: absolute;top: 50%;transform: translateY(-50%);cursor: pointer;border: none;background: none;font-size: 0;z-index:1}
.slick-prev:before, .slick-next:before {content: '';display: block;width: 20px;height: 20px;border-top: 1px solid #333;border-left: 1px solid #333;}
.slick-prev {left: 40px;}
.slick-next {right: 40px;}
.slick-prev:before {transform: rotate(-45deg);}
.slick-next:before {transform: rotate(135deg);}
.main-slider .slick-slide {display: flex !important;justify-content: center;align-items: center;outline: none;}
.img-container {display: inline-block;position: relative;max-width: 100%;}
.modal-title-in-slide {position: absolute;right: -180px;bottom: 80px;color: #000;font-size: 16px;line-height:1;z-index: 10;font-family:'Pretendard';letter-spacing:0.25px;}
.close-modal {position:absolute; top:40px; right:40px; font-size:20px; cursor:pointer; z-index:11000;}

footer {position:fixed;left:0;bottom:50px;width:100%;}
footer .inner {width:100%;max-width: 1500px;margin: 0 auto;}
#site-header.site-header, .page-header {display:none !important}

@media all and (max-width : 1500px) {

#header > .inner {padding:0 50px}
.portfolioBox > .inner,
.dressBox > .inner,
.customBox > .inner {padding:180px 50px}
}

@media all and (max-width : 1200px) {


.modal-title-in-slide {right:auto;bottom: 80px;left: 50%;transform: translateX(-50%);}


}


@media all and (max-height : 950px) {

footer {position:relative;}


}



@media all and (max-width : 1024px) {

.aboutBox > .inner {height:100%;justify-content: flex-start;align-items: flex-start;flex-direction: column;gap: 15.28vw;padding: 8.31vw 5.56vw 23.61vw;}
.aboutBox > .inner .txtBox {flex:none}
.aboutBox > .inner .txtBox strong {gap: 1.39vw;}
.aboutBox > .inner .txtBox strong .logo {width: 13.89vw;}
.aboutBox > .inner .txtBox strong span {font-size: 5.56vw;letter-spacing:0.03vw;-webkit-text-stroke: 0.01vw #000;}
.aboutBox > .inner .txtBox strong + .pBox {margin-top:12.50vw}
.aboutBox > .inner .txtBox .pBox + .pBox {margin-top:5.56vw}
.aboutBox > .inner .txtBox .pBox em {font-size: 2.50vw;line-height:2}
.aboutBox > .inner .txtBox .pBox p {margin-top:5.56vw;font-size: 2.50vw;line-height:2}
.aboutBox > .inner .imgBox {padding-right:4.17vw;width:100%}
.aboutBox > .inner .imgBox img {width:73.89vw}

.contactBox > .inner {height: calc(100vh - 20vw);padding-top:25.00vw;min-height: auto;max-width:100%;padding: 9.7vw 5.56vw 0;}
.contactBox > .inner .mapBox {height:66.67vw}
.contactBox > .inner .infoBox {margin-top:7.64vw}
.contactBox > .inner .infoBox .telBox {margin-top:2.78vw}
.contactBox > .inner .infoBox .addBox .naverBtn {padding-right:3.75vw;font-size:2.50vw;letter-spacing:-0.03vw}
.contactBox > .inner .infoBox .addBox .naverBtn:before {top: 1.67vw;width:2.36vw;height:1.39vw;}
.contactBox > .inner .infoBox em {padding-left:4.86vw;font-size:2.50vw;letter-spacing:0.03vw}
.contactBox > .inner .infoBox em > a {font-size:2.50vw;letter-spacing:0.03vw}
.contactBox > .inner .infoBox span {padding-left:4.86vw;font-size:2.50vw;letter-spacing:0.07vw}
.contactBox > .inner .infoBox em:before {top: 0.69vw;width: 2.08vw;height: 2.92vw;}
.contactBox > .inner .infoBox em.tel:before {width:2.50vw;height:2.50vw;top: 0.97vw;}

.portfolioBox > .inner {padding:8.31vw 5.56vw 25.00vw}
.portfolioBox > .inner .titBox h3 {gap: 1.39vw;}
.portfolioBox > .inner .titBox h3 .logo {width: 13.89vw;}
.portfolioBox > .inner .titBox h3 span {font-size: 5.56vw;letter-spacing:0.03vw;-webkit-text-stroke: 0.01vw #000;}
.portfolioBox > .inner .titBox p {margin-top: 5.56vw;font-size:2.5vw}
.portfolioBox > .inner .listBox {margin-top:13.89vw}
.portfolioBox > .inner .listBox ul {gap:11.11vw 0}
.portfolioBox > .inner .listBox ul li {flex:0 1 100%;filter:none}

.dressBox > .inner {padding:8.31vw 5.56vw 25.00vw}
.dressBox > .inner .listBox ul {gap:11.11vw 0}
.dressBox > .inner .listBox ul li {flex:0 1 100%;filter:none}
.dressBox > .inner .listBox ul li .nameBox {gap:1.39vw;bottom:-4.86vw;transform:translateY(0);opacity:1}
.dressBox > .inner .listBox ul li .nameBox em,
.dressBox > .inner .listBox ul li .nameBox span {font-size:2.5vw}

.customBox > .inner {padding:8.31vw 5.56vw 25.00vw}
.customBox > .inner .titBox h3 span {font-size: 5.56vw;letter-spacing:0.03vw;-webkit-text-stroke: 0.01vw #000;}
.customBox > .inner .titBox p {margin-top: 5.56vw;font-size:2.5vw}
.customBox > .inner .listBox {margin-top:13.89vw}
.customBox > .inner .listBox ul {gap:11.11vw 0}
.customBox > .inner .listBox ul li {flex:0 1 100%;filter:none}
.slick-prev:before, .slick-next:before {width: 15px;height: 15px;}
.slick-prev {left:5.56vw}
.slick-next {right:5.56vw}
.close-modal {top:5.56vw;right:5.56vw}
.modal-title-in-slide {right: auto;bottom:10vw;}
.main-slider, .slick-list, .slick-track, .main-slider .slick-slide > div, .main-slider .slick-slide img {height: fit-content !important;}


footer {bottom:5.56vw}

 
}  


@media (max-width : 1024px) and (min-width : 768px) {


}



 @media (max-width: 767px) {

.reservTxt {padding:5.56vw;max-width:100%;margin:11.11vw auto 0}
.reservTxt dt {font-size:2.22vw}
.reservTxt dd {margin-top:3.47vw;font-size:1.94vw}
.reservTxt dd > em {font-size:1.94vw}
.reservTxt dd + dt {margin-top:3.47vw}

#wpcf7-f52-p53-o1 {max-width:91.67vw;padding:0 5.56vw 25.00vw}
#wpcf7-f52-p53-o1 label {font-size:12px}
#wpcf7-f52-p53-o1 .label {margin-top:4.86vw}
#label1, #privacy {margin-top:4.86vw}
#label1 > span {margin-top:1.39vw}
#wpcf7-f52-p53-o1 .desc p {font-size:10px;margin-top:1.39vw}
.wpcf7-list-item {margin:1.39vw 0 0 0;flex: 0 1 calc(100%/5);}
.wpcf7-list-item label span {font-size:2.22vw}
textarea {border-color:#ccc;height:13.89vw}
.wpcf7-form-control.wpcf7-submit.has-spinner {margin:11.11vw auto 0;width:44.44vw;height:8.33vw;font-size:2.50vw;}
.wpcf7-form-control.agree1 {display:block;text-align:center}
.privacyBox {margin:1.39vw 0 4.17vw;height:13.89vw;border:0.14vw solid #ccc;padding: 2.08vw 2.78vw;font-size:1.94vw}
.privacyBox p {font-size:10px}
.wpcf7-form-control.wpcf7-acceptance.optional span {font-size:2.22vw}
.wpcf7-form-control.wpcf7-radio {justify-content: flex-start;flex-wrap: wrap;}


}

@media (max-width: 768px) {


}

  @media (max-width: 580px) {
.site-header {display:none !important}
}

@media (max-width: 480px) {

}  
  
@media (max-width: 320px) {

}