@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Noto+Sans+KR:wght@300;400&family=Playfair+Display:wght@400;700;900&display=swap');

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

/* layout */
body {width: 100%; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; color: #2e2e2e;}
.en {font-family: 'Playfair Display', serif;}
.wrap {width: 100%; margin: 0 auto; overflow: hidden; position: relative;}
.en_b {font-family: 'DM Serif Display', serif; font-weight: normal;}



/* header -------------------------------------------------------------------------- */
header {width: 100%;  position: fixed; z-index: 100;}
header .innerHeader {max-width: 1800px; padding: 30px 20px; margin: 0 auto; overflow: hidden;}
header .innerHeader h1.logo {float: left; width: 100px; }
header .innerHeader h1.logo a {display: block; width: 100%; height: 100%;}
header .innerHeader h1.logo img {width: 100%; }
header .innerHeader h1.logo img img {width: 100%;}
header .innerHeader a.menu {float: right; font-size: 26px; transition: all 0.4s;}
header .innerHeader a.menu:hover,header .innerHeader a.menu:focus {transform: translateX(0px); color: #d4c8be; transition: all 0.3s; }
header .innerHeader a.menu::after {content: ''; width: 0%; height: 1px; background: #d4c8be; position: absolute; bottom: -5px; left: 0; transition: all 0.3s;}
header .innerHeader a.menu:hover::after,header .innerHeader a.menu:focus::after {width: 100%; }



/* menuOpen ------------------------------------------------------------------------------------ */
.menuOpen {background: #947C6B; display: block; width: 700px; position: absolute; top: 0; right: -150%; color: #eee; height: 100vh; font-size: 30px; text-align: center; padding: 30px; box-sizing: border-box; float: right;  z-index: 200; transition: all 0.8s;} 
.menuOpen a.close {display: block; font-size: 35px; color: #eee; float: right; margin-right: 20px; transition: all ease 0.3s;}
.menuOpen a.close:hover,.menuOpen a.close:focus {transform: rotate(181deg); transition: all ease 0.3s; color: #d4c8be }
.menuOpen ul {margin-top: 170px;}
.menuOpen ul li a {display: inline-block; margin-bottom: 130px; transition: all 0.3s;}
.menuOpen ul li a.sub {font-size: 20px; display: block; width: 9%; padding: 0; margin-top: -120px; margin-left: 270px;}
.menuOpen ul li a:hover,.menuOpen ul li a:focus {transform: translateX(0px); color: #d4c8be; transition: all 0.3s;}
.menuOpen ul li a::after {content: ''; width: 0%; height: 1px; background: #d4c8be; position: absolute; bottom: -5px; left: 0; transition: all 0.3s;}
.menuOpen ul li a:hover::after,.menuOpen ul li a:focus::after {width: 100%;}
.menuOpen.on {right: 0; transition: all 0.8s;}

/* visual ------------------------------------------------------------------------------------ */
article {max-width: 100%; position: relative;} 
article.visual {max-width: 100%; position: relative;} 
article.visual p.img {width: 100%;  position: absolute; z-index: -1;}
article.visual p.img img {width: 100%;  }

.en_b.up {font-size: 128px; width: 100%;  position: absolute; top: 120px; left: 50%; transform: translateX(-50%); text-align: center; font-weight: normal; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); cursor: default; }
.en_b.down {font-size: 128px; width: 100%;  position: absolute; top: 747px; left: 50%; transform: translateX(-50%); text-align: center; font-weight: normal; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); cursor: default;}

.en_b.up.motion.splitting .char {display: inline-block; animation: slide-down 0.4s cubic-bezier(.6, 0, .5, 1) both; animation-delay: calc(30ms * var(--char-index));
}
@keyframes slide-down {
0% {transform: translateY(-90px); opacity: 0;}
30% {transform: translateY(-90px); opacity: 0;}
}

.en_b.down.motion.splitting .char {display: inline-block; animation: slide-up 0.4s cubic-bezier(.5, 0, .5, 1) both; animation-delay: calc(30ms * var(--char-index));
}
@keyframes slide-up {
0% {transform: translateY(90px); opacity: 0;}
80% {transform: translateY(90px); opacity: 0;}
}



/* text-1, text-2 공통요소 ------------------------------------------------------------------------------------ */
section.txet {width: 100%;}
section.txet .txtBox.motion {width: 970px; margin: 300px auto; text-align: center; }

section.txet .txtBox .en {font-size: 55px; font-weight: normal; margin-bottom: 20px;  }
section.txet .txtBox .ko { margin-bottom: 100px;}
section.txet .txtBox .en_s {font-size: 25px; font-family: 'Playfair Display', serif;}

section.txet .txtBox.motion .splitting .char {display: inline-block; animation: slide-up 0.4s cubic-bezier(.5, 0, .5, 1) both; animation-delay: calc(10ms * var(--char-index));
}
@keyframes slide-up {
0% {transform: translateY(20px); opacity: 0;}
80% {transform: translateY(20px); opacity: 0;}
}

/* section.about ------------------------------------------------------------------------------------ */
/* left */
section.about {width: 100%; overflow: hidden;}
section.about .left {width: 50%; height: 964px; position: relative; z-index: -2; float: left; background: #F5F1ED; display: inline;}
section.about .left p.img {width: 460px; margin: 20% auto; }
section.about .left p.img:before {z-index: -1; content: ''; width: 460px; height: 593px;  background: #B7AAA1;  position: absolute; transform: rotate(8deg);}
section.about .left p.img.motion {animation-name: pop; animation-duration: 0.5s;}
section.about .left p.motion.img:before {animation-name: pop; animation-duration: 0.8s;}
@keyframes pop {
  0%{transform: scale(0.5); opacity: 0;}
  30%{transform: scale(1.2); opacity: 0;}
}

/* right */
section.about .right {width: 50%; height: 964px;  float: right; background: #B09582; margin: 0 auto; text-align: left; color: #fff; position: relative; overflow: hidden;}
section.about .right .txtBox {width: 451px;  margin: 26% auto; overflow: hidden;}
section.about .right .txtBox h2 {font-size: 50px; margin-bottom: 63px; }
section.about .right .txtBox .tit span b{font-weight: normal; }
section.about .right .txtBox p.ko {font-size: 16px; margin-bottom: 47px; line-height: 1.8;}
section.about .right .txtBox .btn.about {font-size: 20px; float: right; }
section.about .right .txtBox .btn.about a {transition: all 0.3s;  display: inline-block; }
section.about .right .txtBox .btn.about a span {margin-left: 10px; font-size: 18px; transition: all 0.3s; display: inline-block; transform: rotate(45deg);}
section.about .right .txtBox .btn.about a:hover span,section.about .right .txtBox .btn a:focus span {transform: rotate(226deg); display: inline-block; transition: all ease 0.3s; color: #d4c8be }
section.about .right .txtBox .btn.about a:hover,section.about .right .txtBox .btn a:focus {transform: translateX(0px); color: #d4c8be; transition: all 0.3s;}
section.about .right .txtBox .btn.about a::after {content: ''; width: 0%; height: 1px; background: #d4c8be; position: absolute; bottom:0px; left: 0px; transition: all 0.3s;}
section.about .right .txtBox.motion .btn.about a:hover::after,section.about .right .txtBox .btn a:focus::after {width: 100%; transition: all 0.3s;}
section.about .right .txtBox.motion .tit.en_b {animation-name: txt-slide; animation-duration: 0.6s;}
section.about .right .txtBox.motion p.ko {animation-name: txt-slide; animation-duration: 0.9s;}
section.about .right .txtBox.motion .btn {animation-name: txt-slide; animation-duration: 1.1s;}
@keyframes txt-slide {
  0% {transform: translateY(100px);}
  20% {opacity: 0; bottom: 30%;}
  100% {opacity: 1; bottom: 50%;}
}

/* marquee */
section.about .right .marquee {font-size: 20px; width: 100%;  position: absolute; left: 0px; bottom: 30px; }
section.about .right .marquee .inner {overflow: hidden; font-size: 18px;  }
section.about .right .marquee .inner .en {position: relative; display: flex; width: 200%; }
section.about .right .marquee .inner .en:nth-child(1) {animation: marquee 9s linear infinite;}
section.about .right .marquee .inner .en span {width: 50%; }
@keyframes marquee {
  0% {left: 0;}
  100% {left: -100%;}
}

/* text-2 ------------------------------------------------------------------------------------ */
section.txet .txtBox {width: 806px; margin: 180px auto; text-align: center; }

/* section.gallery ------------------------------------------------------------------------------------ */
section.gallery {width: 100%; background: #F5F1ED; padding-bottom: 80px;}
section.gallery .txt {margin: 0 125px ; padding-top: 125px; margin-bottom: 300px; }
section.gallery .txt h2.en_b {font-size: 65px; font-weight: normal;}
section.gallery .txt p.ko {font-size: 15px;}
section.gallery .txt.motion {animation-name: slide-left; animation-duration: 0.5s;}
@keyframes slide-left {
  0%{transform: translateX(-200px); opacity: 0;}
  30%{transform: translateX(-200px); opacity: 0;}
}

/* gallery-coding */
section.gallery h2.en_b.tit {font-size: 55px; text-align: center; font-weight: normal; margin-bottom: 170px;}

section.gallery ul {overflow: hidden; width: 100%; }
section.gallery ul li .coding {overflow: hidden; width: 100%; margin: 0; position: relative;}
section.gallery ul li .coding a p.img img {transition: all 0.3s; }
section.gallery ul li .coding p.en span {font-size: 18px;}

section.gallery ul li .coding.imgRight a p.img {float: right; width: 50%; overflow: hidden;}
section.gallery ul li .coding.imgRight p.en {float: left; display: block; position: absolute; bottom: 50%; left: 21%; text-align: center; font-size: 50px; transition: all 0.3s; line-height: 0.8;}
section.gallery ul li:nth-child(3) .coding.imgRight p.en {position: absolute; bottom: 45%; left: 19%;}

section.gallery ul li .coding.imgLeft a p.img {float: left; width: 50%; overflow: hidden;  }
section.gallery ul li .coding.imgLeft p.en {float: right; display: block; position: absolute; bottom: 50%; right: 18%; text-align: center; font-size: 50px; transition: all 0.3s; line-height: 0.8;}
section.gallery h2.en_b.tit.motion {animation-name: slide-left; animation-duration: 0.5s;}

section.gallery ul li .coding p.en.motion {animation-name: li-txt; animation-duration: 1s;}
@keyframes li-txt {
  0% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 1; }
}

/* gallery-coding-hover */
section.gallery ul li .coding a p.en:hover {color: #aaa; transition: all 0.2s;}
section.gallery ul li .coding a:hover p.img img > .coding a p.en {color: #aaa; transition: all 0.3s;}

section.gallery ul li .coding a:hover p.img img {transform: scale(1.1) ; transition: all 0.3s;}
section.gallery ul li .coding a p.en:hover > p.img img {transform: scale(1.1) ; transition: all 0.3s;}

/* gallery-design */
section.gallery .galleryDesign p.img.design {width: 100%; overflow: hidden; position: relative; }
section.gallery .galleryDesign p.img.design img { transition: all 0.3s; width: 100%;}
section.gallery .galleryDesign p.img.design.left {float: left; width: 50%; }
section.gallery .galleryDesign p.img.design.left img {width: 100%;  }

section.gallery .galleryDesign p.img.design.right {float: right;width: 50%; }
section.gallery .galleryDesign p.img.design.right img {width: 100%;}

section.gallery .galleryDesign a:hover p.img:after, section.global ul li a:hover .img:after {opacity: 1; transition: all 0.3s;}
section.gallery .galleryDesign a:hover p.img::after {content: 'MORE'; font-family: 'Playfair Display', serif; text-align: center; width: 100%; height: 100%; background: rgba(44,35,28,0.2); position: absolute; left: 0; top: 0; font-size: 30px; color: #d4d4d4; padding-top: 45%; box-sizing: border-box; opacity: 0; transition: all 1s;}

section.gallery .galleryDesign a:hover p.img.design::after {transform: scale(1.1); opacity: 1; transition: all 0.3s;}
section.gallery .galleryDesign a:hover p.img.design img {transform: scale(1.1); transition: all 0.3s;}
section.gallery .galleryDesign p.img.design.left.motion {animation: imgAni 0.5s; }
section.gallery .galleryDesign p.img.design.right.motion {animation: imgAni 0.5s;  }
@keyframes imgAni {
  0% {opacity: 0; transform: translate(0px) scale(1.2); }
  30% {opacity: 0; transform: translate(0px) scale(1.2);}
}



/* 공통요소 more btn */
section.gallery .btn.more {margin-bottom: 200px; text-align: center; font-size: 20px; }
section.gallery .btn.more a {transition: all 0.3s;  display: inline-block; margin-top: 80px;}
section.gallery .btn.more a span {margin-left: 5px; font-size: 18px; transition: all 0.3s; display: inline-block; transform: rotate(45deg);}
section.gallery .btn.more a:hover span,section.about .right .txtBox .btn a:focus span {transform: rotate(226deg); display: inline-block; transition: all ease 0.3s; color: #777 }
section.gallery .btn.more a:hover,section.about .right .txtBox .btn a:focus {transform: translateX(0px); color: #777; transition: all 0.3s;}
section.gallery .btn.more a::after {content: ''; width: 0%; height: 1px; background: #777; position: absolute; bottom:0px; left: 0px; transition: all 0.3s;}
section.gallery .btn.more a:hover::after,section.about .right .txtBox .btn a:focus::after {width: 100%; transition: all 0.3s;}
section.gallery .btn.more.motion {animation-name: txt-slide; animation-duration: 1.2s;}


/* section.portfolio ------------------------------------------------------------------------------------ */
section.portfolio {width: 100%; margin: 300px 0; position: relative;}  
section.portfolio p.img {width: 100%; }
section.portfolio p.img:before {z-index: -1; content: ''; margin-top: 50px; width: 1125px; height: 600px;  background: #B7AAA1; position: absolute; }
section.portfolio .txtBox {width: 520px; position: absolute; bottom: 120px; right: 510px; text-align: left;}
section.portfolio .txtBox .en_b {font-size: 90px; font-weight: normal; margin-bottom: 20px;}
section.portfolio .txtBox p.ko {margin-bottom: 55px;}
section.portfolio .btn.more {font-size: 20px; text-align: right;}
section.portfolio .btn.more a {display: inline-block; transition: all 0.3s; }
section.portfolio .btn.more a span {margin-left: 5px; font-size: 18px; transition: all 0.3s; display: inline-block; transform: rotate(45deg);}
section.portfolio .btn.more a:hover span,section.about .right .txtBox .btn a:focus span {transform: rotate(226deg); display: inline-block; transition: all ease 0.3s; color: #777 }
section.portfolio .btn.more a:hover,section.about .right .txtBox .btn a:focus {transform: translateX(0px); color: #777; transition: all 0.3s;}
section.portfolio .btn.more a::after {content: ''; width: 0%; height: 1px; background: #777; position: absolute; bottom:0px; left: 0px; transition: all 0.3s;}
section.portfolio .btn.more a:hover::after,section.about .right .txtBox .btn a:focus::after {width: 100%; transition: all 0.3s;}
section.portfolio p.img.motion {animation-name: img; animation-duration: 0.3s;}
section.portfolio p.img.motion:before {animation-name: img; animation-duration: 0.6s;}
@keyframes img {
  0%{transform: translateX(-200px); opacity: 0;}
  30%{transform: translateX(-200px); opacity: 0;}
}
section.portfolio .txtBox.motion .en_b {animation-name: txt-slide; animation-duration: 0.5s;}
section.portfolio .txtBox.motion p.ko {animation-name: txt-slide; animation-duration: 0.8s;}
section.portfolio .txtBox.motion .btn.more {animation-name: txt-slide; animation-duration: 1s;}



/* footer ------------------------------------------------------------------------------------ */
/* contact */
footer {width: 100%; overflow: hidden; position: relative;}
footer .contact {width: 50%; float: left; background: #B09582; overflow: hidden; height: 962px; position: relative;}
footer .contact .left {width: 478px; margin: 0 auto; }
footer .contact .left p.en {color: #eee; font-size: 20px; letter-spacing: 1px; text-align: center; margin-top: 150px; z-index: 1;}
footer .contact .left .mail {margin-top: 150px;}
footer .contact .left .mail p.img {display: block; margin: 0 20%; transform: rotate(8deg); transition: all 0.2s; z-index: -1;} 
footer .contact .left .mail p.en.mail {font-size: 50px; font-weight: normal; position: absolute; bottom: 43%;}

footer .contact .left .mail p.en.mail::after {content: ''; width: 0%; height: 1px; background: #eee; position: absolute; bottom:-5px; left: 0px; transition: all 0.2s;}

footer .contact .left .mail p.en.mail:hover::after {width: 100%; transition: all 0.2s; }
footer .contact .left .mail a:hover + p.img{transform: rotate(0deg); transition: all 0.2s;}
footer .contact .left .mail p.img.motion {animation-name: pop-up; animation-duration: 0.8s;}
@keyframes pop-up {
  0%{transform: scale(0.5); opacity: 0;}
  30%{transform: scale(1.2); opacity: 1;}
}

/* info ------------------------------------------------------------------------------------ */
footer .info  {width: 50%; float: right; background: #EDE7E3; height: 962px; }
footer .info .right {width: 100%; }
footer .info .right .txtBox {width: 689px; margin: 0 auto; border-bottom: 1px solid #2e2e2e; padding-bottom: 50px;}

footer .info .right h1.logo {width: 100px; margin-top: 176px; margin-bottom: 100px;}
footer .info .right h1.logo a {display: block; width: 100%; height: 100%;}
footer .info .right h1.logo img {width: 100%;}
footer .info .right h1.logo img img {width: 100%;}

footer .info .right p.ko {font-size: 25px; margin-bottom: 35px;}
footer .info .right p.ko span.en {font-size: 18px;}
footer .info .right p.tel {margin-bottom: 40px; font-size: 18px;}

footer .info .right .txtBox .btn.en {font-size: 30px; text-align: right;}
footer .info .right .txtBox .btn.en a {display: inline-block; transition: all 0.3s; }
footer .info .right .txtBox .btn.en span {margin-left: 5px; font-size: 26px; transition: all 0.3s; display: inline-block; transform: rotate(45deg);}
footer .info .right .txtBox .btn.en a:hover span,footer .info .right .txtBox .btn.en a:focus span {transform: rotate(226deg); display: inline-block; transition: all ease 0.3s; color: #777 }
footer .info .right .txtBox .btn.en a:hover,footer .info .right .txtBox .btn.en a:focus {transform: translateX(0px); color: #777; transition: all 0.3s;}
footer .info .right .txtBox .btn.en a::after {content: ''; width: 0%; height: 1px; background: #777; position: absolute; bottom:0px; left: 0px; transition: all 0.3s;}
footer .info .right .txtBox .btn.en a:hover::after,footer .info .right .txtBox .btn.en a:focus::after {width: 100%; transition: all 0.3s;}

footer .info .right p.copy {font-size: 18px; margin-top: 200px; text-align: center;}
footer .info .right p.txt {font-size: 14px; text-align: center; color: #555; margin-top: 10px;}


/* gotop btn */
footer .goTop {position: absolute; color: #eee; bottom: -45px; right: -80px; width: 180px; height: 100px; background: #806D60; font-size: 18px; transform: rotate(-45deg); padding-top: 13px; display: block; text-align: center; transition: all 0.3s; }
footer .goTop:hover {transition: all 0.3s; color: #d4c8be;}


@media screen and (max-width: 1890px) {
  img {max-width: 1890px;} 
}

@media screen and (max-width: 1810px) {
  img {max-width: 1810px;}
  .en_b.up {font-size: 122px; top: 110px;}
  .en_b.down {font-size: 122px; top: 708px;} 
}

@media screen and (max-width: 1786px) {
  img {max-width: 1786px;}
  .en_b.up {font-size: 122px; top: 110px;}
  .en_b.down {font-size: 122px; top: 690px;}
  section.portfolio .txtBox {right: 400px;}
}

@media screen and (max-width: 1776px) {
  img {max-width: 1776px;}
  .en_b.up {font-size: 122px; top: 110px;}
  .en_b.down {font-size: 122px; top: 690px;}
}

@media screen and (max-width: 1672px) {
  img {max-width: 1672px;}
  .en_b.up {font-size: 122px; top: 90px;}
  .en_b.down {font-size: 122px; top: 650px;}
  section.portfolio .txtBox {right: 290px;}
}

@media screen and (max-width: 1665px) {
  img {max-width: 1665px;} 
  .en_b.up {font-size: 118px; top: 100px;}
  .en_b.down {font-size: 118px; top: 650px;}
}

@media screen and (max-width: 1620px) {
  img {max-width: 1620px;}
  .en_b.up {font-size: 122px; top: 90px;}
  .en_b.down {font-size: 122px; top: 625px;} 
  section.portfolio .txtBox {right: 230px;}
}

@media screen and (max-width: 1573px) {
  img {max-width: 1573px;} 
  .en_b.up {font-size: 120px; top: 90px;}
  .en_b.down {font-size: 120px; top: 610px;}
  section.portfolio .txtBox {right: 190px;}
}

@media screen and (max-width: 1536px) {
  img {max-width: 1536px;} 
  .en_b.up {font-size: 118px; top: 85px;}
  .en_b.down {font-size: 118px; top: 590px;}
  section.portfolio .txtBox {right: 150px;}
}

@media screen and (max-width: 1517px) {
  img {max-width: 1517px;} 
  .en_b.up {font-size: 118px; top: 85px;}
  .en_b.down {font-size: 118px; top: 580px;}
  section.portfolio .txtBox {right: 130px;}
}