@charset "UTF-8";

/* 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: 'Open Sans','NanumBarunGothic', sans-serif;font-size:16px !important;font-weight:100;line-height:1.3;color:#000}
html.active {overflow:hidden}
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:#000; 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;}
ul:after,
ol:after {display:block; content:''; clear:both;}

.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}
.dim {display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;background-color:rgba(0,0,0,0.5);z-index:3}
.dim.active {display:block}
.wrap {position:relative}

/* header */
#header {position:absolute;width:100%;height:100%;background:transparent;}
#header.subHeader {height:auto;}
header .logoBox {position:fixed;top:100px;right:50px;}
header .logoBox a {display:block;width:120px;height:76px;font-size:0;background:url(../img/logo3.png) no-repeat 0 0/100%}
header .linkList {position:fixed;bottom:50px;right:50px}
header .linkList ul {float:right}
header .linkList li {float:left;}
header .linkList li + li {margin-left:1.5rem}
header .linkList li a {display:block;width:1.3125rem;height:1.3125rem;text-indent:-9999px;font-size:0;background:url(../img/ico_insta2.png) no-repeat 0 0;background-size:100%}
header .linkList li:nth-child(2) {margin-top:1px}
header .linkList li:nth-child(2) a {width:1.5rem;height:1.0625rem;background-image:url(../img/ico_youtube.png)}
header .linkList li:nth-child(3) a {width:0.6875rem;height:1.25rem;background-image:url(../img/ico_facebook.png)}
header .linkList li:nth-child(4) a {width:1.375rem;height:1.1875rem;background-image:url(../img/ico_blog.png)}
header .copyright {clear:both;float:right;text-align:right;font-size:0.75rem;color:#000;letter-spacing:0.5px;margin-top:8px}
header .copyright a {color:#000}
#headerMobile {width:100%}
#headerMobile h1 a {display:block;width:170px}
#headerMobile h1 a img {width:100%}
#header.subHeader #headerMobile {height:95px;position: fixed;background-color: #fff;z-index: 1;}
#header.subHeader .mHeader.sub {height:100%;display:flex;align-items:center;width: 100%;margin: 0 auto;justify-content: space-between;padding: 0 40px;}
#gnbM {position:fixed;width: 100%;height: 100%;top: 0;right:0;z-index: 10;background-color:#e5e5e5;transform:translateX(200%);transition:all 0.5s ease}
#gnbM.active {transform:translateX(0)}
#gnbM .gnbM {display:table;width: 100%;height: 100%;}
#gnbM .gnbM .mobileMenu {position:relative;display:table-cell;width:100%;height:auto;top:0;text-align:center;}
#gnbM .gnbM .mobileMenu > ul {width:100%;text-align:right;position:fixed;top:50%;right:50px;transform:translateY(-120px)}
#gnbM .gnbM .mobileMenu > ul > li {line-height:48px}
#gnbM .gnbM .mobileMenu > ul > li > a {position:relative;font-size:20px;font-weight:400;color:#000;letter-spacing:0.7px;overflow:hidden}
#gnbM .gnbM .mobileMenu > ul > li > ul {display:none;padding:1rem 0}
#gnbM .gnbM .mobileMenu > ul > li > ul > li {line-height:36px}
#gnbM .gnbM .mobileMenu > ul > li > ul > li > a {font-size:16px;color:#666;letter-spacing:0.5px;font-weight:400}
#gnbM .gnbM .mobileMenu > ul > li > ul > li > a:hover {color:#000}
#gnbM .gnbM .mobileMenu .subnav {display:none;height:auto;padding:0 0 10px 0}
.top_btn {position: fixed;z-index:100;bottom: 20px;right: 20px;width:2.4375rem;height:1.3125rem;background:url(../img/arrow_up.png) no-repeat 0 0;background-size:100%}
.top_btn > a {display: block;width:100%;height:100%;text-indent:-99999px;font-size:0}

@keyframes active {
  from {
  	
    left:100%;
  }

  to {
    left:0;
  }
}
@keyframes opacity {
  from {
  	
    opacity:0;
  }

  to {
    opacity:1;
  }
}

.logoBox {position: absolute;right: calc(25% - 236px);top: 50%;width: 473px;transform: translateY(-50%);}
.logoBox img {width:100%}


/*archive*/
.subContainer {width:100%;padding-top: 95px}
.subContainer .topBox {width:100%;height: 160px;}
.subContainer .topBox p {position:relative;top:50%;left:0;transform:translateY(-50%)}
.subContainer .topBox p img {width:100px}
.subContainer .topBox .hBox {width:100%;text-align:center;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.subContainer .topBox h2 {font-size: 18px;color: #000;letter-spacing:0.5px;font-weight: 300;}
.subContainer .topBox h3 {font-size: 30px;color: #000;letter-spacing:0;font-weight: 700;}
.archiveBox {width:100%;max-width:1200px;margin:0 auto;padding-bottom:200px;}
.galleryBox {margin-top: 50px;}
.galleryBox ul {display:flex;gap: 12px;flex-wrap: wrap;}
.galleryBox li {width: calc(25% - 36px / 4);}
.galleryBox li.type2 {width: calc(50% - 12px / 2);}
.galleryBox li img {width:100%;height:100%;object-fit:cover}
.galleryBox li > a {position:relative;display:block;width:100%;height:100%;overflow:hidden}
.galleryBox li > a:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.4) url(../img/ico_over.png) no-repeat center center;transform:translateY(-100%);transition:all 0.5s ease}
.galleryBox li > a:hover:after {transform:translateY(0)}
.slbImageWrap:after {display:none}
.slbOverlay {background:rgba(255,255,255,0.95);}
.slbCloseBtn {position:fixed;font-size:0;top:30px;right: calc(50% - 780px);margin-right:0;width:1rem;height:0.9375rem;background:url(../img/btn_close.png) no-repeat 0 0;background-size:100%}
.slbArrows {transform: translateY(-50%);-webkit-transform: translateY(-50%);margin-top: -1.5rem;}
.slbArrow.prev {font-size:0;left: calc(50% - 780px);width:0.9375rem;height:1.8125rem;background:url(../img/ico_arrow.png) no-repeat 0 0;background-size:100%;}
.slbArrow.next {font-size:0;right: calc(50% - 780px);width:0.9375rem;height:1.8125rem;background:url(../img/ico_arrow.png) no-repeat 0 0;background-size:100%;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)}

/*about*/
.aboutBox {width:100%;max-width:1200px;margin:0 auto;}
.aboutBox > .inner {display:flex;min-height:calc(100vh - 95px);height:100%;align-items: center;}
.aboutBox > .inner > div {flex:1}
.aboutBox > .inner .imgBox {display:flex;gap: 30px;justify-content: flex-end;}
.aboutBox > .inner .imgBox .Box {position:relative}
.aboutBox > .inner .imgBox .Box:first-child {margin-top:-100px}
.aboutBox > .inner .imgBox .Box .img {width:250px}
.aboutBox > .inner .imgBox .Box .img img {width:100%}
.aboutBox > .inner .imgBox .Box .txt {position:absolute;top:25px;right:-125px}
.aboutBox > .inner .imgBox .Box:last-child .txt {top: auto;bottom: 30px;right: auto;left: -130px;text-align: right;}
.aboutBox > .inner .imgBox .Box .txt:before {content:'';display:block;position:absolute;left:-100px;bottom:7px;width:80px;height:2px;background-color:#000}
.aboutBox > .inner .imgBox .Box:last-child .txt:before {content:'';display:block;position:absolute;r: -40px;bottom:7px;left: auto;right: -105px;}
.aboutBox > .inner .imgBox .Box .txt span {display:block;font-size:14px;color:#777;font-weight:400}
.aboutBox > .inner .imgBox .Box .txt em {display:block;font-size:18px;color:#000;font-weight:700}
.aboutBox > .inner .txtBox > .inner {padding-left:90px}
.aboutBox > .inner .txtBox > .inner h3 {font-size:26px;color:#000;letter-spacing:0.5px;font-weight:700;margin-bottom:50px}
.aboutBox > .inner .txtBox > .inner p {font-size:14px;color:#777;line-height:1.7;font-weight:300}
.aboutBox > .inner .txtBox > .inner p > strong {display:block;font-size:20px;color:#000;letter-spacing:0.5px;font-weight:700}
.aboutBox > .inner .txtBox > .inner p > em {font-size:16px;color:#000;letter-spacing:0.5px;font-weight:500}
.aboutBox > .inner .txtBox > .inner p + p {margin-top:30px}
.aboutBox > .inner .txtBox > .inner a {margin-top:50px;position:relative;display:inline-block;padding-left:25px;font-size:16px;color:#000;font-weight:700}
.aboutBox > .inner .txtBox > .inner a:before {content:'';display:block;position:absolute;top:3px;left:0;width:17px;height:14px;background:url(../img/ico_arrow2.png) no-repeat 0 0/100%}

/*contact*/
.subContainer.contact {padding-top:0}
.contactBox {width:100%;background-color:#000}
.contactBox .contactCon {margin:0 auto;width:100%;min-height:100vh;height:100%;max-width:1300px;display:flex;align-items:center;flex-wrap: wrap;flex-direction: row-reverse;}
.contactBox .contactCon > div {flex:1 0 50%}
.contactBox .contactCon .contactInfo {padding-left:80px}
.contactBox .contactCon .contactInfo h3 {font-size:20px;color:#fff;font-weight:700;letter-spacing:1px;line-height:1.5}
.contactBox .contactCon .contactInfo h3 > span {display:block;font-size:14px;color:#fff;font-weight:400;letter-spacing:1px;line-height:1.5}
.contactBox .contactCon .contactInfo .add {margin-top:45px;font-size:14px;color:#fff;font-weight:400;letter-spacing:1px;line-height:1.5}
.contactBox .contactCon .contactInfo .telBox {margin-top:45px;}
.contactBox .contactCon .contactInfo .telBox ul li {line-height:1.5}
.contactBox .contactCon .contactInfo .telBox ul li > a {font-size:14px;color:#fff;font-weight:400;letter-spacing:1px;line-height:1.5}
.contactBox .contactCon .contactInfo .linkBtn {margin-top:45px;display:block;font-size:0;width:20px;height:21px;background:url(../img/ico_kakao.png) no-repeat 0 0/100%;filter: invert(96%) sepia(100%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);}
.contactBox .contactCon .mapBox #map {position:relative;width:100%;height:460px}
.contactBox .contactCon .mapBox #map iframe {position:absolute;width:100%;height:100%;top:0;left:0}

/*studio*/
.studioBox {min-height:calc(100vh - 95px)}
.studioBox > .inner {display:flex;height:315px;align-items: center;max-width: 1300px;margin: 0 auto;width: 100%;}
.studioBox > .inner > div {flex: 1 1 50%;}
.studioBox > .inner .titBox {justify-content: center;padding-left: 155px;}
.studioBox > .inner .titBox span {font-size: 20px;color: #000;letter-spacing: 1px;}
.studioBox > .inner .titBox strong {display: block;text-align: left;font-size: 26px;letter-spacing: 1px;}
.studioBox > .inner .descBox p {font-size: 14px;color: #777;line-height: 1.5;letter-spacing: 0.5px;font-weight: 300;word-break: keep-all;}
.studioBox > .inner .descBox p strong {color: #000;font-size: 16px;font-weight: 500;}
.studioBox > .inner .descBox p + p {margin-top: 20px;}
.sliderBox {position:relative;width:100%;margin:50px auto 0;display:flex;align-items:center;z-index:0} 
.sliderBox .swiper-slide img {width:100%} 
.swiper-slide {opacity:0.5;transition:all .5s ease;
  
  &.swiper-slide-active{
    opacity:1;
	z-index:1;
  }
}
.swiper-button-next {right:29%}
.swiper-button-prev {left:29%}

/*footer*/
footer {width:100%;position:absolute;right:1.875rem;bottom:1.875rem;z-index:10;}
html.active footer {position:fixed}
footer .linkBox {display: flex;justify-content: flex-end;}
footer .linkBox li + li {margin-top:13px}
footer .linkBox li a {font-size:0;display:block;width:20px;height:20px;background:url(../img/ico_insta.png) no-repeat 0 0/100%}
footer .linkBox li.kakao a {height:21px;background-image:url(../img/ico_kakao.png)}
footer .copyright {margin-top:13px;text-align: right;line-height: 1;font-size:0.75rem;color:#000;font-weight:400}

/*모바일 버튼*/
#mobileBtn {position:fixed;padding-left:64px;top:50px;right:40px;width:14px;height:9px;background-color:transparent;box-sizing:border-box;z-index:999999;cursor:pointer}
.mHeader.sub #mobileBtn {position: relative;right: auto;top: auto}
#mobileBtn p {position:absolute;top:0;left:0;font-size:1rem;color:#000;line-height:0.5rem;font-weight:100}
#mobileBtn.active p {color:#000}
#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;
	right: 0;
	width: 14px;
	height: 1px;
	background-color: #000;
	border-radius: 4px;
}
#mobileBtn span.mid1 {top:0;}
#mobileBtn span.mid2 {top:4px;}
#mobileBtn span.mid3 {bottom:0;}
#mobileBtn span.mid1 {-webkit-animation:design .75s forwards;animation:design .75s forwards;}
@-webkit-keyframes design {
	0% {-webkit-transform:translateY(14px) rotate(45deg);}
	50% {-webkit-transform:translateY(14px) rotate(0);}
	100% {-webkit-transform:translateY(0) rotate(0);}
}
@keyframes design {
	0% {transform:translateY(14px) rotate(45deg);}
	50% {transform:translateY(14px) 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(-14px) rotate(-45deg);}
	50% {-webkit-transform:translateY(-14px) rotate(0);}
	100% {-webkit-transform:translateY(0) rotate(0);}
}
@keyframes design2 {0% {
		transform:translateY(-14px) rotate(-45deg);}
	50% {transform:translateY(-14px) rotate(0);}
	100% {transform:translateY(0) rotate(0);}
}
#mobileBtn.active span {background-color:#000;}
#mobileBtn.active span.mid1 {top:-11px;-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(14px) rotate(0);}
	100% {-webkit-transform:translateY(14px) rotate(45deg);}
}
@keyframes active-design {
	0% {transform:translateY(0) rotate(0);}
	50% {transform:translateY(14px) rotate(0);}
	100% {transform:translateY(14px) rotate(45deg);}
}
#mobileBtn.active span.mid2 {opacity:0;}
#mobileBtn.active span.mid3 {bottom:-9px;-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(-14px) rotate(0);}
	100% {-webkit-transform:translateY(-14px) rotate(-45deg);}
}
@keyframes active-design2 {
	0% {transform:translateY(0) rotate(0);}
	50% {transform:translateY(-14px) rotate(0);}
	100% {transform:translateY(-14px) rotate(-45deg);}
}



/************************************************************************************
                                    Media Query
*************************************************************************************/
@media (max-width: 1560px) {
	.slbCloseBtn {right: 1.5rem}
	.slbArrow.prev {left:1.25rem;}
	.slbArrow.next {right:1.25rem;}
	.mHeader.sub #mobileBtn {right:0}
}

@media (max-width: 1200px) {
	.subContainer .galleryBox {padding:0 40px}
}

@media (max-width: 1024px) {
	.subContainer {width:100%;max-width:1560px;margin:0 auto}
	.subContainer .galleryBox {padding:0 5.56vw}
	.contactBox .contactCon {flex-direction: column;min-height: calc((var(--vh, 1vh) * 100) - 15.28vw);padding: 0 12.5vw;justify-content: center;align-items: flex-start;}
.contactBox .contactCon > div {flex:none}
.contactBox .contactCon .contactInfo {padding-left:0}
.contactBox .contactCon .contactInfo h3 {font-size:3.06vw;letter-spacing:0.14vw}
.contactBox .contactCon .contactInfo h3 > span {font-size:2.22vw;letter-spacing:0.14vw}
.contactBox .contactCon .contactInfo .add {margin-top:6.25vw;font-size:2.22vw;letter-spacing:0.14vw}
.contactBox .contactCon .contactInfo .telBox {margin-top:6.25vw;}
.contactBox .contactCon .contactInfo .telBox ul li > a {font-size:2.22vw;letter-spacing:0.14vw}
.contactBox .contactCon .contactInfo .linkBtn {margin-top:6.25vw;width:2.78vw;height:2.92vw;}
.contactBox .contactCon .mapBox {margin-top:13.19vw;width:100%;}
.contactBox .contactCon .mapBox #map {height:52.78vw}
.aboutBox > .inner {flex-direction: column;min-height: calc((var(--vh, 1vh) * 100) - 15.28vw);padding: 27.78vw 0 13.28vw 12.5vw;align-items: flex-start;justify-content: center;}
.aboutBox > .inner .imgBox {gap: 4.17vw;}
.aboutBox > .inner > div {flex: none;}
.aboutBox > .inner .imgBox .Box:first-child {margin-top:-13.89vw}
.aboutBox > .inner .imgBox .Box .img {width:34.72vw}
.aboutBox > .inner .imgBox .Box .txt {top:3.47vw;right:-17.36vw}
.aboutBox > .inner .imgBox .Box:last-child .txt {bottom: 4.17vw;left: -18.06vw}
.aboutBox > .inner .imgBox .Box .txt:before {left:-13.89vw;bottom:0.97vw;width:11.11vw;height:0.28vw}
.aboutBox > .inner .imgBox .Box:last-child .txt:before {bottom:0.97vw;left: auto;right: -14.58vw;}
.aboutBox > .inner .imgBox .Box .txt span {font-size:1.94vw}
.aboutBox > .inner .imgBox .Box .txt em {font-size:2.50vw}
.aboutBox > .inner .txtBox {margin-top:12vw}
.aboutBox > .inner .txtBox > .inner {padding-left:0}
.aboutBox > .inner .txtBox > .inner h3 {font-size:3.61vw;letter-spacing:0.07vw;margin-bottom:6.94vw}
.aboutBox > .inner .txtBox > .inner p {font-size:1.94vw;}
.aboutBox > .inner .txtBox > .inner p > strong {font-size:2.78vw;letter-spacing:0.07vw}
.aboutBox > .inner .txtBox > .inner p > em {font-size:2.22vw;letter-spacing:0.07vw}
.aboutBox > .inner .txtBox > .inner p + p {margin-top:4.17vw}
.aboutBox > .inner .txtBox > .inner a {margin-top:6.94vw;padding-left:3.47vw;font-size:2.22vw;}
.aboutBox > .inner .txtBox > .inner a:before {top:0.42vw;width:2.36vw;height:1.94vw;}
	.studioBox {min-height: calc((var(--vh, 1vh) * 100) - 15.28vw);}
.studioBox > .inner {flex-direction: column;align-items: flex-start;padding:13.89vw 12.50vw 0;height: 100%;}
.studioBox > .inner .titBox {padding-left:0}
.studioBox > .inner .descBox {margin-top:1.39vw}
.studioBox > .inner .descBox p strong {display: block;margin-bottom: 5.56vw;font-size:2.50vw}
.studioBox > .inner .titBox span {font-size: 3.06vw;}
.studioBox > .inner .titBox strong {font-size: 4.17vw;}
.studioBox > .inner .descBox p {font-size: 2.22vw;}
  .sliderBox {margin:12.50vw 0 15vw;} 

	}
@media (max-width: 1023px) {
	html, body{
        font-size: 12px !important;
    }
    .pc_view {display:none !important}
	.mobile_view {display:block !important}
	#gnbM .gnbM .mobileMenu > ul > li {line-height:3.3;}
	#gnbM .gnbM .mobileMenu > ul > li > a {font-size: 4.17vw;letter-spacing: 0.5vw;}
	#gnbM .gnbM .mobileMenu > ul > li > a:after {bottom:-0.14vw;height:0.14vw}
	#gnbM .gnbM .mobileMenu > ul > li > ul {padding:0}
	#gnbM .gnbM .mobileMenu > ul > li > ul > li {line-height: 2.3;}
	#gnbM .gnbM .mobileMenu > ul > li > ul > li > a {font-size: 3.33vw;letter-spacing: 0.4vw;}

	.subContainer {padding-top:15.28vw}
	.swiper-button-next {right:15.28vw}
	.swiper-button-prev {left:15.28vw}
	.swiper-button-prev:after, .swiper-button-next:after {font-size:6.11vw}
	.mHeader {position: fixed;width: 100%;height:80px;z-index: 4;background:transparent}
	#headerMobile h1 a {width: 32.64vw;}
	.mHeader h1 img {vertical-align:top}
	#header.subHeader #headerMobile {height: 15.28vw}
	#header.subHeader .mHeader.sub {height: 15.28vw;padding: 0 5.56vw;}
	.maintxt {position:absolute;width:100%;height:66px;padding:0 30px;left:0;bottom:0;right:auto;top:auto;transform:none}
	.maintxt span {font-size:22px;letter-spacing:1px;font-weight:500;line-height:60px}
	.maintxt .instai {position:absolute;margin:0;top:50%;right:30px;width:20px;height:20px;transform:translateY(-50%)}
	#gnbM {left:auto;right:0;width:72.22vw}
	#gnbM .gnbM .mobileMenu > ul,
	header .linkList, header .logoBox {right:30px}
	.slbImageWrap {margin:0 3rem !important}
	.galleryBox {padding: 0 5.56vw;margin-top:0;}
	.galleryBox ul {gap:2.08vw}
	.galleryBox li {width: calc(50% - 2.08vw / 2);}
	.galleryBox li.type2 {width:100%}
	.subContainer .topBox {position:relative}
	.topBox p {display:none}
	footer .linkBox li + li {margin-top:2.50vw}
	footer .linkBox li a {width:4.17vw;height:4.17vw}
	footer .linkBox li.kakao a {height:4.31vw}
	footer .copyright {margin-top:2.50vw;font-size:2.08vw}
	.logoBox {right:auto;left:50%;top: 50%;width:80.56vw;transform: translate(-50%,-50%);z-index:1;filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(63deg) brightness(101%) contrast(101%);}
	.subContainer .topBox h2 {font-size: 2.50vw;letter-spacing:0.07vw}
	.subContainer .topBox h3 {font-size: 4.17vw;}
	.subContainer .topBox {height: 22.22vw;}

	/*모바일 버튼*/
	#mobileBtn {position:absolute;top:4.17vw !important;right:2.78vw !important;width: 4.86vw;height: 4.17vw;padding:0;background-color:transparent;box-sizing:border-box;z-index:999999;cursor:pointer}
	.mHeader.sub #mobileBtn {right: 0 !important;top: auto !important;}
	#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: 0.28vw;
		border-radius: 0.56vw;
	}
	#mobileBtn span.mid1 {top:0;}
	#mobileBtn span.mid2 {top: 1.94vw;}
	#mobileBtn span.mid3 {bottom:0;}
	#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 {}
	#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.mid2 {opacity:0;}
	#mobileBtn.active span.mid3 {bottom:-1.25vw;-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);}
	}




}

@media (max-width: 767px) {

	.aboutBox > .inner {padding:0 0 0 12.5vw}
#mobileBtn.active span.mid3 {bottom: 0.2vw;}

}
@media (max-width: 500px) {
    html, body{
        font-size: 10px !important;
    }

}