@charset "UTF-8";

@import url("fonts.css");
@import url("animate.css");

/* common */
* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none;margin:0;padding:0;}
html, body {font-family:"backvill", sans-serif, 'Noto Sans KR'; font-size:16px;line-height:1.3; font-weight:100;color:#212121;background-color:#fff9f2}
h1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%}
strong {font-weight:700;}
img {height:auto; vertical-align:middle; border-style:none;}
em, address {font-style:normal}
a {text-decoration:none; background-color:transparent; vertical-align:top; -webkit-text-decoration-skip:objects; color:#212121; word-break: break-word}
a:hover, a:active, a:focus {text-decoration:none}
menu,li {list-style:none}
hr {display:none}
i,em,address{font-style:normal}
label {cursor:pointer}
table {width:100%; border-spacing:0; border-collapse:0; color:#000; table-layout:fixed}
table td {word-wrap: break-word;}
button {border:0; background-color:transparent;}

html.active {overflow:hidden}
.hide{display:block;position:absolute;width:0;height:0;text-indent:-9999999px;overflow:hidden;}
.pc_view {display:block !important}
.mobile_view {display:none !important}
#headerPc {display:block !important}
#headerMobile {display:none !important}

/*header*/
#header {position:fixed;top:0;left:0;width:100%;height:100px;padding:0 50px;z-index:1;transition:all 0.5s ease}
#header #headerPc > .inner {display:flex;align-items:center;justify-content: space-between;height:100px}
#header h1 a {display:block;width:245px;height:21px;background:url(../img/logo_w.png) no-repeat 0 0/100%;font-size:0}
#headerPc > .inner .gnb ul {display:flex;gap:65px}
#headerPc > .inner .gnb ul li a {font-size:14px;color:#fff9f2;letter-spacing:0.75px}
#header.fixed {z-index:1000;background-color:#fff9f2}
#header.fixed h1 a {background-image:url(../img/logo_b.png)}
#header #headerMobile.active h1 {position:relative;z-index:9999}
#header #headerMobile.active h1 a {background-image:url(../img/logo_b.png)}
#header.fixed #headerPc > .inner .gnb ul li a {color:#212121}
.mHeader {display:flex;align-items:center;justify-content: space-between;height:100px}
#gnbM {position:fixed;top:0;left:0;width:100%;height:calc(var(--vh, 1vh) * 100);background-color:#fff9f2;z-index:9998;transition:transform 0.5s ease;transform:translateX(-100%)}
#gnbM.active {transform:translateX(0)}
#gnbM .gnbM {display:flex;width:100%;height:100%;align-items:center;justify-content: flex-end;padding-right: 40px;}
#gnbM .gnbM ul {opacity:0;transform:translateX(1500px);transition:all .3s ease;}
#gnbM.active .gnbM ul {opacity:1;transform:translateX(0);transition:all .5s .3s ease;}
#gnbM .gnbM ul li {line-height:2;text-align:right}
#gnbM .gnbM ul li a {font-size:36px;letter-spacing:0.5px;display:block}

#header.subHeader {z-index:1000;background-color:#fff9f2;border-bottom:1px solid #ccc;position:fixed}
#header.subHeader h1 a {background-image:url(../img/logo_b.png)}
#header.subHeader #headerPc > .inner .gnb ul li a {color:#212121}

/*floating menu*/
.floatingMenu {position:fixed;bottom:35px;right:50px;transition:all 0.5s ease}
.floatingMenu.bottom {bottom:355px}
.floatingMenu li + li {margin-top:12px}
.floatingMenu li a {display:flex;align-items:center;justify-content: center;width:50px;height:50px;background-color:#212121;border-radius:50%}
.floatingMenu li a img {width:21px}

/*footer*/
footer {background-color:#212121}
footer > .inner {padding:50px 50px 40px;display:flex;justify-content: space-between;position:relative;height:320px}
footer > .inner .infoBox li em {display:inline-block;margin-right:10px;font-size:13px;text-transform: uppercase;color:#e2e0db;letter-spacing:1px;font-weight:400;font-family:'Noto Sans KR'}
footer > .inner .infoBox li span {display:inline-block;font-size:13px;color:#e2e0db;font-weight:200;font-family:'Noto Sans KR';letter-spacing:1px;}
footer > .inner .infoBox li a {color:#e2e0db}
footer > .inner .copyright {position:absolute;left:50px;bottom:50px;font-size:13px;color:#7a776f;font-weight:200;font-family:'Noto Sans KR';letter-spacing:1px;}
footer > .inner .copyright em {font-weight:500}
footer > .inner .shopList dt {margin-bottom:30px;font-size:13px;color:#e2e0db;letter-spacing:1px;font-weight:500;font-family:'Noto Sans KR'}
footer > .inner .shopList dd {line-height:1.84}
footer > .inner .shopList dd a {font-size:13px;color:#7a776f;letter-spacing:1px;font-weight:300;font-family:'Noto Sans KR';transition:all 0.5s ease}
footer > .inner .shopList dd a:hover {color:#e2e0db;text-decoration:underline}

/*모바일 버튼*/
#mobileBtn {position:relative;width:35px;height:19px;background-color:transparent;box-sizing:border-box;z-index:999999;cursor:pointer}
#mobileBtn span {display:inline-block;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;-ms-transition-duration:0.5s;transition-duration:0.5s;box-sizing:border-box;}
#mobileBtn span {position: absolute;left: 0;width: 100%;height: 3px;background-color: #fff9f2;}
#header.fixed #mobileBtn span {background-color: #212121;}
#header.subHeader #mobileBtn span {background-color: #212121;}
#mobileBtn span.mid1 {top:0;}
#mobileBtn span.mid2 {top:9px;}
#mobileBtn span.mid3 {bottom:0;}
#mobileBtn span.mid1 {-webkit-animation:design .75s forwards;animation:design .75s forwards;}
@-webkit-keyframes design {
	0% {-webkit-transform:translateY(20px) rotate(45deg);}
	50% {-webkit-transform:translateY(20px) rotate(0);}
	100% {-webkit-transform:translateY(0) rotate(0);}
}
@keyframes design {
	0% {transform:translateY(20px) rotate(45deg);}
	50% {transform:translateY(20px) rotate(0);}
	100% {transform:translateY(0) rotate(0);}
}
#mobileBtn span.mid2 {transition:all .25s .25s;opacity:1;}
#mobileBtn span.mid3 {-webkit-animation:design2 .75s forwards;animation:design2 .75s forwards;}
@-webkit-keyframes design2 {
	0% {-webkit-transform:translateY(-20px) rotate(-45deg);}
	50% {-webkit-transform:translateY(-20px) rotate(0);}
	100% {-webkit-transform:translateY(0) rotate(0);}
}
@keyframes design2 {0% {
		transform:translateY(-20px) rotate(-45deg);}
	50% {transform:translateY(-20px) rotate(0);}
	100% {transform:translateY(0) rotate(0);}
}
#mobileBtn.active span {background-color:#333;}
#mobileBtn.active span.mid1 {top:-13px;-webkit-animation:active-design .75s forwards;animation:active-design .75s forwards;}
@-webkit-keyframes active-design {
	0% {-webkit-transform:translateY(0) rotate(0);}
	50% {-webkit-transform:translateY(20px) rotate(0);}
	100% {-webkit-transform:translateY(20px) rotate(45deg);}
}
@keyframes active-design {
	0% {transform:translateY(0) rotate(0);}
	50% {transform:translateY(20px) rotate(0);}
	100% {transform:translateY(20px) rotate(45deg);}
}
#mobileBtn.active span.mid2 {opacity:0;}
#mobileBtn.active span.mid3 {bottom:-11px;-webkit-animation:active-design2 .75s forwards;animation:active-design2 .75s forwards;}
@-webkit-keyframes active-design2 {
	0% {-webkit-transform:translateY(0) rotate(0);}
	50% {-webkit-transform:translateY(-20px) rotate(0);}
	100% {-webkit-transform:translateY(-20px) rotate(-45deg);}
}
@keyframes active-design2 {
	0% {transform:translateY(0) rotate(0);}
	50% {transform:translateY(-20px) rotate(0);}
	100% {transform:translateY(-20px) rotate(-45deg);}
}


   @-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
} 

  @keyframes slideInUp {
  0% {
    height: 100%;
  }

  100% {
    height:0;
  }
} 

 @-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
} 

@keyframes width {
  0% {
    width: 100%;
  }

  100% {
    width:0;
  }
} 
 
 @keyframes bg {
  0% {
    background-size:auto 1000px;
  }

  100% {
    background-size:cover;
  }
} 
 
 @keyframes scale {
  0% {
    transform:scale(1.3);
  }

  100% {
    transform:scale(1);
  }
} 
 
    @-webkit-keyframes updown {
    0%{
        transform:translate(-50%,0)
    }
    50%{
        transform:translate(-50%,-20px)
    }
    100%{
        transform:translate(-50%,0)
    }
}

@keyframes active {
	0% {-webkit-transform: scale(1.1,1.1);-ms-transform: scale(1.1,1.1);-moz-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}
	100% {-webkit-transform: scale(1);-ms-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
}
   .delay1 {transition-delay:0.1s !important}
  .delay2 {transition-delay:0.2s !important}
  .delay3 {transition-delay:0.3s !important}
  .delay4 {transition-delay:0.4s !important}
  .delay5 {transition-delay:0.5s !important}
  .delay6 {transition-delay:0.6s !important}
  .delay7 {transition-delay:0.7s !important}
  .delay8 {transition-delay:0.8s !important}
  .delay9 {transition-delay:0.9s !important}
  .delay10 {transition-delay:1s !important}
  .delay15 {transition-delay:1.5s !important}

.subContainer {padding-top:100px}

/*about*/
.subContainer .aboutBox {width:100%;max-height:800px;overflow-x:hidden}
.subContainer .aboutBox > .inner {display:flex;width:100%;}
.subContainer .aboutBox > .inner > div {flex:1 0 50%;position:relative}
.subContainer .aboutBox > .inner > .imgBox {position:relative;width:100%;height:800px;background:#080705 url(../img/about_img.jpg) no-repeat top right/cover;animation:bg 1s both}
.subContainer .aboutBox > .inner > .imgBox:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff9f2;animation:slideInUp 1.5s both}
.subContainer .aboutBox > .inner > .imgBox img {position:relative;}
.subContainer .aboutBox > .inner > .imgBox strong {position:absolute;top:175px;left:50%;font-size:64px;font-weight:100;letter-spacing:0.5px;text-align:right;/* display: block; */width:100%;transform: translateX(calc(-50% + 270px));animation: fadeIn 2s cubic-bezier(.5,.8,.2,1) 0.5s both;}
.subContainer .aboutBox > .inner > .imgBox strong > span:first-child {color:#fff9f2;display:inline-block;margin-right:40px}
.subContainer .aboutBox > .inner > .txtBox {padding:400px 0 0 100px;animation: slideInRight 1.5s cubic-bezier(.5,.8,.2,1) 1s both;}
.subContainer .aboutBox > .inner > .txtBox em {font-size:22px;letter-spacing:0.75px;line-height:1.5}
.subContainer .aboutBox > .inner > .txtBox p {margin-top:20px;font-size:18px;letter-spacing:0.75px;line-height:1.6}

.collectionBox > .inner {position:relative;display:flex;}
.collectionBox > .inner .listBox {padding-left:200px;flex: 1}
.collectionBox > .inner .listBox ul {height:800px;display: flex;flex-direction: column;justify-content: center;}
.collectionBox > .inner .listBox li {transition:all 0.5s ease}
.collectionBox > .inner .listBox li + li {margin-top:25px}
.collectionBox > .inner .listBox li a {position:relative;display:inline-block;font-size:18px;letter-spacing:1px;font-family:'Noto Sans KR';font-weight: 300;overflow:hidden;line-height:1.5}
.collectionBox > .inner .listBox li a:before {content:'';display:block;position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#212121;transition:all 0.5s ease;transform:translateX(-100%)}
.collectionBox > .inner .listBox li a:hover:before,
.collectionBox > .inner .listBox li.on a:before {transform:translateX(0)}
.collectionBox > .inner .listCon {width:1125px;height:800px;position:relative;flex-shrink: 0;background:#212121 url(../img/logo_w.png) no-repeat 50% 50%/50%;overflow:hidden}
.collectionBox > .inner .listCon .thumBox {width:100%;height:100%;position:absolute;top:0;right:0;transform:translateX(100%);transition:all 0.5s ease}
.collectionBox > .inner .listCon .thumBox.on {transform:translateX(0);transition:all 1s cubic-bezier(.5,.8,.2,1)}
.collectionBox > .inner .listCon .thumBox img {object-fit:cover}
.collectionBox > .inner .listCon .thumBox .infoBox {position:absolute;left:100px;bottom:100px}
.collectionBox > .inner .listCon .thumBox .infoBox p {font-size:18px;color:#fff9f2;letter-spacing:0.75px}
.collectionBox > .inner .listCon .thumBox .infoBox strong {display:block;font-size:64px;color:#fff9f2;letter-spacing:0.5px;margin:20px 0;font-weight:100}
.collectionBox .listCon .infoBox > a {display:block;width:150px;height:40px;text-align:center;border:1px solid #98918c;line-height:38px;font-size:16px;font-weight:400;letter-spacing:1px;font-family:'Noto Sans KR';color:#fff9f2;transition:all 0.3s ease}
.collectionBox .listCon .infoBox > a > span {position:relative;padding-right:20px}
.collectionBox .listCon .infoBox > a > span:before {content:'';display:block;position:absolute;top:50%;right:0;width:10px;height:2px;background-color:#fff9f2;transform:translateY(-50%);transition:all .5s ease}
.collectionBox .listCon .infoBox > a > span:after {content:'';display:block;position:absolute;top:50%;right:4px;width:2px;height:10px;background-color:#fff9f2;transform:translateY(-50%);transition:all .5s ease}
.collectionBox .listCon .infoBox > a:hover > span:before {transform:translateY(-50%) rotate(90deg)}
.collectionBox .listCon .infoBox > a:hover > span:after {transform:translateY(-50%) rotate(90deg)}

.subContainer .subBanner {display:flex;border-bottom: 1px solid #ccc;position:relative;overflow:hidden}
.subContainer .subBanner .txtBox {padding-left:200px;flex: 1;height: 600px;display: flex;flex-direction: column;justify-content: center;gap: 10px;;overflow:hidden}
.subContainer .subBanner .txtBox em {display:block;font-size:48px;letter-spacing:0.75px;line-height:1.2}
.subContainer .subBanner .txtBox p {font-size:16px;letter-spacing:0.75px;line-height:1.5}
.subContainer .subBanner .imgBox {width:1125px;height:600px;position:relative;flex-shrink: 0;overflow:hidden}
.subContainer .subBanner .imgBox:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff9f2;animation:width 1.5s both}
.subContainer .subBanner .imgBox img {object-fit:cover;animation:scale 1s both}

.galleryBox {width:100%;max-width:1400px;margin:0 auto;padding:100px 0}
.galleryBox ul {display:flex;gap:25px;flex-wrap: wrap;}
.galleryBox ul li {flex:0 0 calc(100%/3 - 50px/3)}
.galleryBox ul li img {width:100%}
.slbCloseBtn {position:fixed;width:36px;height:38px;top:50px;right:50px;font-size:0;background:url(../img/btn_close.png) no-repeat 0 0/100%}
.slbArrow {margin:0;top:50%;width:27px;height:51px;opacity:1;transform:translateY(-50%)}
.slbArrow.next {right:50px;background: url(../img/arrow_next2.png) no-repeat 0 0 / 100%;}
.slbArrow.prev {left:50px;background: url(../img/arrow_prev2.png) no-repeat 0 0 / 100%;}
.slbArrow:before {display:none}
.slbOverlay {background-color:#131514}
.animate1 {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: all 2s;
}
.animate1.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.contactBox {max-width:1400px;margin:0 auto;}
.contactBox .hBox {height:245px;display:flex;align-items:center;border-bottom:1px solid #ccc;justify-content: center;}
.contactBox .hBox h3 {font-size:64px;letter-spacing:1px;animation: slideInDown 0.5s ease both;}
.contactBox .offLineBox .Box {display:flex;padding:100px 0}
.contactBox .offLineBox .Box:nth-child(even) {flex-direction: row-reverse;}
.contactBox .offLineBox .Box + .Box {border-top:1px solid #ccc;}
.contactBox .offLineBox .Box .mapBox {flex:1 0 50%;position:relative;height:600px;}
.contactBox .offLineBox .Box .mapBox iframe {position:absolute;height:100%;width:100%;top:0;left:0}
.contactBox .offLineBox .Box .infoBox {flex:1 0 50%;padding-left:90px;display:flex;align-items: flex-start;height:600px;flex-direction: column;justify-content: center;}
.contactBox .offLineBox .Box .infoBox h4 {font-size:48px;letter-spacing:0.75px;margin-bottom: 30px;}
.contactBox .offLineBox .Box .infoBox dl dt {font-size:16px;letter-spacing:0.75px;font-weight:400;font-family:'Noto Sans KR';line-height: 1.5;}
.contactBox .offLineBox .Box .infoBox dl dd {font-size:16px;letter-spacing:0.75px;font-weight: 200;font-family:'Noto Sans KR';line-height: 1.5;}
.contactBox .offLineBox .Box .infoBox dl dd + dt {margin-top:30px}
.contactBox .offLineBox .Box .infoBox dl dd .iinsta {display:inline-block;position:relative;padding-left:22px;background: url(../img/ico_insta2.png) no-repeat top 5px left/15px;}

.videoBox {position:relative;width:100%;height:0;padding-bottom:125%}
.videoBox > iframe {position:absolute;width:100%;height:100%;top:0;left:0}
.galleryBox.film {padding-bottom:0}
.galleryBox .titleBox {padding:30px 0 70px}
.galleryBox .titleBox em {font-size:24px;letter-spacing:0.75px}
.galleryBox .titleBox p {margin-top:10px;font-size:16px;letter-spacing:0.75px;font-weight: 200;font-family:'Noto Sans KR';}

.eventBox {padding:100px 0}
.eventBox ul {display:flex;flex-wrap: wrap;gap: 25px;}
.eventBox ul li {flex:0 0 calc(100%/3 - 50px/3)}
.eventBox ul li a {display:block}
.eventBox ul li a .imgBox {width:100%;overflow:hidden}
.eventBox ul li a .imgBox img {width:100%;transition:all .5s ease}
.eventBox ul li a .imgBox:hover img {transform:scale(1.1)}
.eventBox ul li a .txtBox {margin-top:20px}
.eventBox ul li a .txtBox strong {display:block;font-size:20px;letter-spacing:0.5px;font-weight:500;font-family:'Noto Sans KR'}
.eventBox ul li a .txtBox em {display:block;font-size:16px;letter-spacing:0.5px;font-weight:300;font-family:'Noto Sans KR'}
.eventBox ul li a .txtBox span {margin-top:25px;display:block;text-align:center;width:140px;height:35px;line-height:34px;font-size:13px;font-weight:300;font-family:'Noto Sans KR';border:1px solid #212121}

/* intro */
.introContainer {position:relative;width:100%;height:100vh;animation-duration: 2000ms;animation-name: zoom;}
.introContainer .bgBox {position:relative;display:inline-block;float:left;width:50%;height:100%;background:url(../img/intro/intro_bg_kenneth.jpg) no-repeat center 0;background-size:cover;transition:all 0.5s ease}
.introContainer .bgBox:hover {background-image:url(../img/intro/intro_bg_kenneth_on.jpg)}
.introContainer .bgBox.rightCon:hover {background-image:url(../img/intro/intro_bg_bonita_on.jpg)}
.introContainer .rightCon {background-image:url(../img/intro/intro_bg_bonita.jpg)}
.introContainer .logoBox {position:absolute;top:50%;left:50%;width:460px;transform:translate(-50%,-50%)}
.introContainer .logoBox img {width:100%}
.introContainer .rightCon .logoBox {width:260px}
.introContainer .visitBtn {position:absolute;margin-top:4rem;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:all .5s ease}
.introContainer .bgBox:hover .visitBtn {opacity:1}
.introContainer .visitBtn a {display:block;font-size:13px;font-weight:400;color:#000;line-height:30px;padding: 0;background-color: #fff;width:100px;text-align: center;height:30px;font-family:'Noto Sans KR'}
@keyframes opacity {
  from {
  	
    opacity:0.6;
  }

  to {
    opacity:1;
  }
}
/************************************************************************************
                                    Media Query
*************************************************************************************/
@media (max-width: 1800px) {
.subContainer .subBanner .txtBox {padding-left:100px}
}


@media (max-width: 1600px) {
.collectionBox > .inner .listBox {padding-left:100px}
.subContainer .subBanner .imgBox {width:900px;}
}

@media (max-width: 1400px) {

.subContainer .aboutBox > .inner > .imgBox {background-position:top right -100px}
/*.subContainer .aboutBox > .inner > .imgBox strong {top:100px;}
.subContainer .aboutBox > .inner > .txtBox {padding-top:350px}*/
.collectionBox > .inner .listCon {width:900px;}
.subContainer .subBanner .imgBox {width:700px}
.subContainer .subBanner .txtBox {padding-left:50px}


}

@media (max-width: 1200px) {

/*.subContainer .aboutBox > .inner > .imgBox {min-height:calc(100vh - 355px);background-size:auto 100%}*/
.subContainer .aboutBox > .inner > .imgBox strong {width:max-content;}
.collectionBox > .inner .listBox {padding-left:50px}
.collectionBox > .inner .listCon {width:800px;}
.subContainer .subBanner .imgBox {height: 510px;width: 100%;}
.subContainer .subBanner .txtBox {position:absolute;left:40px;bottom:40px;z-index: 1;height: auto;padding: 0;}
.subContainer .subBanner .txtBox em {color:#fff9f2}
.subContainer .subBanner .txtBox p {color:#fff9f2}
.contactBox .offLineBox .Box .infoBox {height:500px;padding-left:40px}
.contactBox .offLineBox .Box .mapBox {height:500px;}



}

@media (max-width: 1024px) {
    .pc_view {display:none !important}
	.mobile_view {display:block !important}
	#headerPc {display:none !important}
	#headerMobile {display:block !important}
	#header {height:13.89vw;padding:0 5.56vw}
	#header h1 a {width:34.03vw;height:2.92vw;}
	.mHeader {height:13.89vw}
	#gnbM .gnbM {padding-right: 5.56vw;}
	#gnbM .gnbM ul li a {font-size:5.00vw;letter-spacing:0.07vw}

	/*모바일 버튼*/
	#mobileBtn {width:4.86vw;height:2.64vw}
	#mobileBtn span {height: 0.42vw}
	#mobileBtn span.mid2 {top:1.25vw;}
	#mobileBtn span.mid1 {-webkit-animation:design .75s forwards;animation:design .75s forwards;}
	@-webkit-keyframes design {
		0% {-webkit-transform:translateY(2.78vw) rotate(45deg);}
		50% {-webkit-transform:translateY(2.78vw) rotate(0);}
		100% {-webkit-transform:translateY(0) rotate(0);}
	}
	@keyframes design {
		0% {transform:translateY(2.78vw) rotate(45deg);}
		50% {transform:translateY(2.78vw) rotate(0);}
		100% {transform:translateY(0) rotate(0);}
	}
	#mobileBtn span.mid2 {transition:all .25s .25s;opacity:1;}
	#mobileBtn span.mid3 {-webkit-animation:design2 .75s forwards;animation:design2 .75s forwards;}
	@-webkit-keyframes design2 {
		0% {-webkit-transform:translateY(-2.78vw) rotate(-45deg);}
		50% {-webkit-transform:translateY(-2.78vw) rotate(0);}
		100% {-webkit-transform:translateY(0) rotate(0);}
	}
	@keyframes design2 {0% {
			transform:translateY(-2.78vw) rotate(-45deg);}
		50% {transform:translateY(-2.78vw) rotate(0);}
		100% {transform:translateY(0) rotate(0);}
	}
	#mobileBtn.active span.mid1 {top:-1.81vw;-webkit-animation:active-design .75s forwards;animation:active-design .75s forwards;}
	@-webkit-keyframes active-design {
		0% {-webkit-transform:translateY(0) rotate(0);}
		50% {-webkit-transform:translateY(2.78vw) rotate(0);}
		100% {-webkit-transform:translateY(2.78vw) rotate(45deg);}
	}
	@keyframes active-design {
		0% {transform:translateY(0) rotate(0);}
		50% {transform:translateY(2.78vw) rotate(0);}
		100% {transform:translateY(2.78vw) rotate(45deg);}
	}
	#mobileBtn.active span.mid3 {bottom:-1.6vw;-webkit-animation:active-design2 .75s forwards;animation:active-design2 .75s forwards;}
	@-webkit-keyframes active-design2 {
		0% {-webkit-transform:translateY(0) rotate(0);}
		50% {-webkit-transform:translateY(-2.78vw) rotate(0);}
		100% {-webkit-transform:translateY(-2.78vw) rotate(-45deg);}
	}
	@keyframes active-design2 {
		0% {transform:translateY(0) rotate(0);}
		50% {transform:translateY(-2.78vw) rotate(0);}
		100% {transform:translateY(-2.78vw) rotate(-45deg);}
	}

	/*floating menu*/
	.floatingMenu {bottom: 5.56vw;right: 5.56vw}
	.floatingMenu.bottom {bottom:45.56vw}
	.floatingMenu li + li {margin-top:1.67vw}
	.floatingMenu li a {width:6.94vw;height:6.94vw}
	.floatingMenu li a img {width:2.92vw}

	footer > .inner {padding: 6.94vw 5.56vw 13.89vw;flex-direction: column;height:40vw}
	footer > .inner .infoBox li em {margin-right:1.39vw;font-size:1.94vw;letter-spacing:0.14vw}
	footer > .inner .infoBox li span {font-size:1.94vw;letter-spacing:0.14vw;}
	footer > .inner .copyright {left:5.56vw;bottom:6.94vw;font-size:1.94vw;letter-spacing:0.14vw;}
	footer > .inner .rightBox {margin-top:5.56vw}
	footer > .inner .shopList dl {display:flex;gap:2.78vw}
	footer > .inner .shopList dt {margin-bottom: 0;font-size:1.94vw;letter-spacing:0.14vw;line-height:1}
	footer > .inner .shopList dd {line-height:1}
	footer > .inner .shopList dd a {font-size:1.94vw;letter-spacing:0.14vw;}

	.subContainer {padding-top:13.89vw}
	.subContainer .aboutBox {max-height:100%;}
	.subContainer .aboutBox > .inner {display:block;position:relative}
	.subContainer .aboutBox > .inner > div {flex:none}
	.subContainer .aboutBox > .inner > .imgBox {width:100%;height: calc(100vh - 53.89vw);min-height:150vw;background-size:100%;background-position:center bottom;background-image:url(../img/about_img_m.jpg)}
	.subContainer .aboutBox > .inner > .imgBox strong {top:auto;bottom:62.50vw;left:5.56vw;font-size:2.50vw;letter-spacing:0.07vw;text-align: left;transform:none;color: #fff9f2;}
	.subContainer .aboutBox > .inner > .imgBox strong > span:first-child {color:#fff9f2;margin-right: 1.39vw;}
	.subContainer .aboutBox > .inner > .imgBox strong > span.type2 {font-size:8.89vw}
	.subContainer .aboutBox > .inner > .txtBox {position:absolute;left:5.56vw;bottom: 13.50vw;padding:0}
	.subContainer .aboutBox > .inner > .txtBox em {font-size:3.06vw;letter-spacing:0.10vw;color:#fff9f2;line-height:2.1}
	.subContainer .aboutBox > .inner > .txtBox p {margin-top:2.78vw;font-size:2.78vw;color:#fff9f2;line-height:2.1}

	.collectionBox > .inner .listBox {display:none}
	.collectionBox > .inner .listCon {width:100%;height:100%;background:none}
	.collectionBox > .inner .listCon .thumBox {position:relative;transform:translateX(0);width:100%;height:71.11vw}
	.collectionBox > .inner .listCon .thumBox + .thumBox {margin-top:1.39vw}
	.collectionBox > .inner .listCon .thumBox img {height: 100%;}
	.collectionBox > .inner .listCon .thumBox .infoBox {left:5.56vw;bottom:5.56vw}
	.collectionBox > .inner .listCon .thumBox .infoBox em {font-size:6.67vw;color:#fff9f2;letter-spacing:0.10vw}
	.collectionBox .listCon .infoBox > a {width:20.83vw;height:5.56vw;border:0.14vw solid #98918c;line-height:5.28vw;font-size:2.22vw;letter-spacing:0.14vw;}
	.collectionBox .listCon .infoBox > a > span {padding-right:2.78vw}
	.collectionBox .listCon .infoBox > a > span:before {width:1.39vw;height:0.28vw;}
	.collectionBox .listCon .infoBox > a > span:after {right:0.56vw;width:0.28vw;height:1.39vw;}

	.subContainer .subBanner .imgBox {height: 70.83vw;}
	.subContainer .subBanner .imgBox img {height:100%}
	.subContainer .subBanner .txtBox {left:5.56vw;bottom:5.56vw}
	.subContainer .subBanner .txtBox em {font-size:6.67vw;letter-spacing:0.10vw}
	.subContainer .subBanner .txtBox p {font-size:2.22vw;letter-spacing:0.10vw}
	.galleryBox {max-width:100%;padding:13.89vw 5.56vw}
	.galleryBox ul {gap:2.78vw;}
	.galleryBox ul li {flex:0 0 calc(100%/2 - 1.39vw)}
	.galleryBox ul li a {display:block}
	.slbCloseBtn {width:5.00vw;height:5.28vw;top:6.94vw;right:6.94vw;}
	.slbArrow {width:3.75vw;height:7.08vw}
	.slbArrow.next {right:6.94vw;}
	.slbArrow.prev {left:6.94vw}

	.contactBox {max-width:100%}
	.contactBox .hBox {height:34.03vw;border-bottom:0.14vw solid #ccc}
	.contactBox .hBox h3 {font-size:8.89vw;letter-spacing:0.14vw;}
	.contactBox .offLineBox {padding:0 5.56vw}
	.contactBox .offLineBox .Box {padding: 6.94vw 0;flex-direction: column;}
	.contactBox .offLineBox .Box:nth-child(even) {flex-direction: column}
	.contactBox .offLineBox .Box + .Box {border-top:0.14vw solid #ccc;}
	.contactBox .offLineBox .Box .mapBox {flex: none;height: 76.39vw;}
	.contactBox .offLineBox .Box .infoBox {flex: none;padding-left:0;align-items: flex-start;height:100%;flex-direction: column;justify-content: center;margin-top: 5.56vw;}
	.contactBox .offLineBox .Box .infoBox h4 {font-size:6.67vw;letter-spacing:0.10vw;margin-bottom: 4.17vw;}
	.contactBox .offLineBox .Box .infoBox dl dt {font-size:2.22vw;letter-spacing:0.10vw}
	.contactBox .offLineBox .Box .infoBox dl dd {font-size:2.22vw;letter-spacing:0.10vw}
	.contactBox .offLineBox .Box .infoBox dl dd + dt {margin-top:4.17vw}
	.contactBox .offLineBox .Box .infoBox dl dd .iinsta {padding-left:3.06vw;background: url(../img/ico_insta2.png) no-repeat top 0.69vw left/2.08vw;}

	.galleryBox.film {padding-bottom:0}
	.galleryBox .titleBox {padding:4.17vw 0 9.72vw}
	.galleryBox .titleBox em {font-size:3.33vw;letter-spacing:0.10vw}
	.galleryBox .titleBox p {margin-top:1.39vw;font-size:2.22vw;letter-spacing:0.10vw}

	.eventBox {padding:13.89vw 5.56vw}
	.eventBox ul {gap: 3.47vw;}
	.eventBox ul li {flex:0 0 calc(100%/2 - 3.47vw/2)}
	.eventBox ul li a .txtBox {margin-top:2.78vw}
	.eventBox ul li a .txtBox strong {font-size:2.78vw;letter-spacing:0.07vw;}
	.eventBox ul li a .txtBox em {font-size:2.22vw;letter-spacing:0.07vw;}
	.eventBox ul li a .txtBox span {margin-top:3.47vw;width:19.44vw;height:4.86vw;line-height:4.72vw;font-size:1.81vw;border:0.14vw solid #212121}

 @keyframes bg {
  0% {
    background-size:auto 1000px;
  }

  100% {
    background-size:cover;
  }
}
}

@media (max-width: 768px) {

#gnbM .gnbM ul li {line-height:3}
	.introContainer .logoBox {width:40vw !important}
	.introContainer .rightCon .logoBox  {width:30vw !important}


}

@media (max-width: 570px) {
	footer > .inner .infoBox li {line-height:1}
	footer > .inner {height:200px}
	.subContainer .aboutBox > .inner > .imgBox {height: calc(100vh - 200px + 13.89vw)}
	.floatingMenu.bottom {bottom:calc(200px + 5.56vw)}

} 

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