@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Sans+KR:wght@100..900&display=swap');
@font-face {
 font-family: 'handel gothic';
 src: url(/font/handel\ gothic.ttf) format('truetype');
}
@font-face {
    font-family: 'SeoulNotice';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2505-1@1.0/SeoulAlrimTTF-Heavy.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: 'Yeongwol';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/YeongwolTTF-Regular.woff2') format('woff2');
    font-weight: normal;
    font-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;}
button {border: none; background: transparent;}

/* layout */
body {font-family: "Noto Sans KR", sans-serif; font-size: 14px; color: #979e7a; cursor: default;}
.en {font-family: 'SeoulNotice';}
.en_s{font-family: "Dancing Script", cursive;}
em {color: #e3a851;}
.sign {font-family: 'Yeongwol';}

/* Header */
.innerHeader {max-width: 1720px; margin: auto; padding: 20px 0; display: flex; align-items: center; justify-content: space-between;}
.innerHeader .logo img {max-height: 70px; width: auto; display: block;}
/* gnb + sns */
.innerHeader .mainMenu {display: flex; align-items: center; position: relative;}
span.bar {position: absolute; left: 0; bottom: -10px; left: 0; height: 3px; background: #e7e7e7; transition: all 0.4s;}
/* gnb */
.innerHeader .mainMenu .gnb {display: flex;}
.innerHeader .mainMenu .gnb li {margin: 0 20px;}
.innerHeader .mainMenu .gnb li a {display: block; width: 100%; height: 100%; color: #555;}
/* sns */
.innerHeader .mainMenu .sns {display: flex; margin-left: 60px;}
.innerHeader .mainMenu .sns li a {padding: 0 20px;}

/* 타이틀, 텍스트, 더보기 버튼 공통 클래스 */
.tit {font-size: 50px; line-height: 1.2; font-weight: normal;}
.tit span {display: block;}
.tit span b {font-weight: normal;}
.tit span.en_s {font-size: 22px; font-weight: normal;}
.txt p {color: #888; line-height: 1.6; margin-bottom: 10px;}
.txt p b {font-weight: normal;}
.moreBtn {display: inline-block; color: #333; position: relative; padding-left: 45px; margin-top: 20px; transform: skewX(-15deg) translateX(5px); transition: all 0.15s;}
.moreBtn::before {content: ''; width: 42px; height: 1px; background-color: #333; position: absolute; left: 0; top: 54%;}
.moreBtn:hover, .moreBtn:focus { transform: skewX(0deg) translateX(0px); font-weight: bold; transition: all 0.3s;}

/* section .inner (공통 넓이 가이드) .box(플루트) */
section .inner {width: 1320px; margin: auto; overflow: hidden;}
section .inner .box {float: left; width: 50%;}

/* section.visual */
section.visual {max-width: 1720px; margin: auto; overflow: hidden;}
section.visual .mainImg {float: left; width: 50%;}
section.visual .mainImg img {width: 90%;}
section.visual .mainTxt {float: left; width: 50%; margin-top: 180px;}
section.visual .mainTxt .tit {font-size: 72px;}
section.visual .mainTxt .tit span.en_s {margin-bottom: 10px;}
section.visual .mainTxt .tit .gray {color: #ccc;}
section.visual .mainTxt .txt {padding: 50px 0px 0px 70px;}

/* section.journal */
section.journal {position: relative; padding: 190px 0px 120px;}
section.journal .scroll {text-transform: uppercase; position: absolute; left: 50%; top: -20px;
    font-size: 10px; letter-spacing: 5px; writing-mode: vertical-rl; padding-top: 90px;}
section.journal .scroll::before {content: ''; position: absolute; height: 75px; width: 1px; background-color: #333;
top: 0; left: 50%; transform: translateX(-50%);}
section.journal .inner .box .img {padding-top: 100px;}
section.journal .inner .box .tit {margin-bottom: 40px;}
section.journal .inner .box ul {border-top: 1px solid #e6e6e6; padding-top: 40px;}
section.journal .inner .box ul li {margin-bottom: 30px; overflow: hidden;}
section.journal .inner .box ul li h3 {float: left; width: 22%; font-size: 15px; font-weight: bold;}
section.journal .inner .box ul li p {float: left; width: 78%; color: #888;}
section.journal .inner .box .moreBtn {margin-left: 22%; clear: both; cursor: pointer;}
section.journal .inner .box ul li.more h3 {height: 45px;}
section.journal .inner .box ul li.more {display: none;}


/* section.service */
section.service {padding: 190px 0px;}
section.service .inner .box .img {margin-top: 60px;}
section.service .inner .box.design {width: 45%; margin-top: -40%; padding-top: 60px; border-top: 1px solid #c4e5ea;}
section.service .inner .box.design .tit {font-size: 30px; line-height: 1.4; margin-bottom: 20px;}
section.service .inner .box .txt {font-size: 14px;}
section.service .inner .box .txt .signBox {height: 50px;} 
section.service .inner .box .txt .signBox p {float: left;}
section.service .inner .box .txt .sign1 {text-align: right; margin-right: 10px; margin-bottom: 0; line-height: 1.2;}
section.service .inner .box .txt .sign2 {font-size: 35px; margin-bottom: 0; line-height: 50px;}
section.service .inner .box div.more {display: none;}

/* section.customer */
section.customer {padding: 160px; text-align: center; background: url(../img/img_04.jpg) no-repeat center/cover;}
section.customer .tit {color: white; font-size: 40px; margin-bottom: 10px;}
section.customer .txt {color: #fff;}
.txt-m {display: none;}

/* section.team */
section.team {padding: 190px 0px; position: relative;}
section.team .inner .box.left {text-align: right; padding-right: 80px; box-sizing: border-box;}
section.team .inner .box .tit {margin-top: 40px;}
section.team .inner .box .img {margin-top: 100px;}
section.team .inner .box .txt {margin: 30px 0px; font-size: 14px;}

/* footer */
footer {width: 1320px; margin: auto;}
footer .top .tit {color: #e6e6e6; font-size: 62px; text-align: center; margin-bottom: 40px;}
footer .bottom {border-top: 1px solid #e6e6e6; padding: 40px 0 100px;}
footer .bottom ul {overflow: hidden;}
footer .bottom ul li {float: left; width: 23%; color: #aaa; font-size: 12px; line-height: 2;}
footer .bottom ul li:nth-child(1) {width: 31%; font-size: 28px; color: #333; line-height: 1.1;}
footer .bottom ul li b {color: #333; font-weight: normal;}
footer .bottom ul li b:nth-child(1) {display: inline-block; margin-bottom: 12px; font-size: 14px;}

/* 복사하기 버튼 */
.copyBtn {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copyBtn:hover {
  background: #f5f5f5;
}

.copyBtn.copied {
  background: #4caf50;
  color: #fff;
}

/* 섬기는 이들 */
section.contact div.cont {width: 100%; margin: 50px 0px; text-align: center;}
section.contact div.cont img {width: 100%;}

/* circleBox SVG */
.circleBox {display: block; transform: rotate(-90deg);}
.circleBox .svgAni path {fill: none; stroke: #979e7a; stroke-width: 25; opacity: 0.1;
    stroke-dasharray: 1564; stroke-dashoffset: 0;}
section.journal .circleBox {width: 700px; position: absolute; right: 13%; top: 100px; z-index: -1;}
section.team .circleBox {width: 700px; position: absolute; left: 20%; top: -50px; z-index: -1;}

/* SVG 애니메이션 */
.circleBox.motion .svgAni path {
    animation-name: dash;
    animation-duration: 1.5s;
}
@keyframes dash {
    0%{stroke-dashoffset: 1564;}
    100%{stroke-dashoffset: 0;}
}

/* 공통 타이틀 애니메이션 */
.tit.motion span {transform: translate3d(0,0,0)skewY(0); overflow: hidden;}
.tit.motion span b {display: block; animation-name: textAni; animation-duration: 1.3s;}
@keyframes textAni {
    0%{opacity: 0;}
    30%{opacity: 0; transform: translate3d(0, 40px, 0)skewY(8deg); transform-origin: top left;}
}

/* visula .txt 애니메이션 */
.txt.motion p {transform: translate3d(0,0,0)skewY(0); overflow: hidden;}
.txt.motion p b {display: block; animation-name: textAni; animation-duration: 2s;}

/* 이미지 애니메이션 */
.img.motion {position: relative; animation-name: imgAni; animation-duration: 1s;}
@keyframes imgAni{
    0%{transform: translateY(50px);}
}
.img.motion::after {content: ''; width: 100%; height: 0%; background-color: #fff; position: absolute; top: 0; left: 0;
animation-name: mask; animation-duration: 1.2s;}
@keyframes mask {
    0% {height: 90%;}
}

section.team .img.motion::after {display: none;}

/* section .service 배경색 애니 */
body {transition: all 0.4s;}
body.on {background: #e8fcff; transition: all 0.4s;}
section.service .img.motion::after {background: #e8fcff;}

/* menuOpen */
.menuOpen button:focus {outline: none;}
.menuOpen button.open {background: none; border: none; position: fixed; 
    z-index: 100; right: 0; top: 50%; transform: translateY(-50%); padding: 30px 22px;
    box-sizing: border-box;}
.menuOpen button.open::before {content: ''; width: 100%; height: 100%; background: #efefef;
    position: absolute; right: -100px; top: 0; z-index: -1; transition: all .5s;}
.menuOpen button.open:hover::before, .menuOpen button.open:focus::before {
    right: 0; cursor: pointer;
}
.menuOpen .menuWrap {width: 100%; height: 100vh; position: fixed; right: 0; top: 0; z-index: 100; background: #eee;}
.menuOpen .menuWrap .tit {color: #ccc; position: absolute; top: 50%; left: 25%; transform: translateY(-50%); font-size: 60px;}
.menuOpen .menuWrap .tit li a {display: inline-block; margin-bottom: 20px; position: relative; transition: all .3s;}
.menuOpen .menuWrap .tit li a:hover, .menuOpen .menuWrap .tit li a:focus{
    transform: translateX(30px); color: #979e7a;
}
.menuOpen .menuWrap .tit li a::after {content: ''; width: 0%; height: 2px;
    background-color: #979e7a; position: absolute; left: 0; bottom: -5px; 
    transition: all .3s;
}
.menuOpen .menuWrap .tit li a:hover::after, .menuOpen .menuWrap .tit li a:focus::after {width: 100%;}

/* close */
.menuOpen .menuWrap .close:nth-child(1) {position: absolute; top: 50%; transform: translateY(-50%); left: 30px;}
.menuOpen .menuWrap .close.en {position: absolute; right: 50px; top: 50px; font-size: 25px;
    border-bottom: 1px solid #888; color: #888;
}
.menuOpen .menuWrap .close.en:hover, .menuOpen .menuWrap .close.en:focus {color: #979e7a; transition: all .4s;}

/* 메뉴 on */
.menuOpen .menuWrap {width: 0%; transition: all 0s; transform: skewY(40deg); opacity: 0;}
.menuOpen .menuWrap.on {width: 100%; transform: skewY(0deg); transition: all .5s; opacity: 1;}

/* ul 애니 */
.menuOpen .menuWrap ul {display: none;}
.menuOpen .menuWrap.on ul {display: block;}

/* 메뉴열었을때 동그라미 */
.menuOpen .menuWrap.on::before {content: ''; width: 700px; height: 700px; background-color: #fff;
    position: absolute; top: 50%; transform: translateY(-50%); border-radius: 100%; left: 30%;
}
.menuOpen .menuWrap.on::before {animation-name: menuWrap2; animation-duration: 1.8s;}
@keyframes menuWrap2{
    0% {opacity: 0;}
    40% {opacity: 0; transform: translateY(-50%) scale(0.5);}

}

/* 반응형 웹제작 */
@media screen and (max-width:1720px) { /* 1720px~1401 사이 */
    .innerHeader {max-width: 100%; padding: 20px 30px; box-sizing: border-box;}
    .innerHeader .mainMenu .sns {margin-left: 50px;}
    section.visual {max-width: 100%; padding: 0 30px; box-sizing: border-box;}
    section.visual .mainTxt {margin-top: 150px;}
    section.visual .mainTxt .tit {font-size: 62px;}
}

/* 1024 태블릿모드 */
@media screen and (max-width:1400px) { /* 1400~1025px 사이 */
    section.visual .mainTxt {margin-top: 100px;}
    section.visual .mainTxt .tit {font-size: 46px;}
    section.visual .mainTxt .txt {padding: 20px 0px 0px 0px;}
    section .inner {width: 100%; padding: 0 30px; box-sizing: border-box;}
    .img img {width: 100%;}
    section.journal .scroll {display: none;}
    section.journal .circleBox {right: -10%; top: 0;}
    section.journal .inner .box .img {width: 90%;}
    section.customer {padding: 160px 0px;}
    footer {width: 100%; padding: 0 30px; box-sizing: border-box;}
}

/* 1024 이하 태블릿 */
@media screen and (max-width:1000px) { /* 768px까지 */
    .innerHeader {height: 80px; line-height: 80px;}
    .innerHeader .mainMenu {width: 0px; height: 0px; opacity: 0; display: none;}
    .menuOpen button.open {position: absolute; top: 0; transform: none; width: 70px; height: 80px; padding: 0; line-height: 80px;}
    .menuOpen button.open::before {display: none;}
    section.visual .mainImg {width: 100%; float: none;}
    section.visual .mainImg img {width: 100%;}
    section.visual .mainTxt {width: 100%; float: none; margin-top: 50px;}
    section .inner .box {float: none; width: 100%;}
    section.journal {padding: 80px 0px; overflow: hidden;}
    section.journal .circleBox {top: 200px;}
    section.journal .inner .box .img {margin: 0 auto 50px; padding-top: 0; width: 80%;}
    section.service {padding: 80px 0px;}
    section.service .txt {margin-top: 20px;}
    section.service .inner .box.design {margin-top: 50px; width: 100%;}
    section.service .inner .box .img {margin: 50px auto 0px; width: 90%;}
    section.service .inner .box.design .img {width: 70%; margin: 50px 0px 0px;}
    section.service .img.motion::after {background-color: #fff;}
    section.service .inner .box.design .tit {font-size: 35px;}
    section.customer {padding: 120px 0px;}
    section.customer .tit {font-size: 30px;}
    section.team {padding: 80px 0px; overflow: hidden;}
    section.team .circleBox {left: 15%;}
    section.team .inner .box.left {padding-right: 0; overflow: hidden;}
    section.team .inner .box .img {margin-top: 50px; width: 70%; float: right; clear: both;}
    section.team .inner .box:nth-child(2) .img {width: 100%; margin: 50px 0px;}
    section.team .inner .box .tit {margin-top: 0; clear: both;}
    section.team .inner .box.left .moreBtn {float: right; margin-right: 5px;}
    footer .bottom ul li:nth-child(1) {width: 100%; margin-bottom: 30px;}
    footer .bottom ul li {width: 33.3333%;}
}

/* 모바일 해상도 320px */
@media screen and (max-width:767px) {
    body {font-size: 13px;}
    .innerHeader {padding: 0 20px;}
    .innerHeader .logo img {max-height: 45px;}
    section.visual {overflow: hidden;}
    .menuOpen button.open {height: 60px; line-height: 60px; width: 52px;}
    .menuOpen button.open img {height: 38px;}
    .menuOpen .menuWrap .tit {font-size: 35px; left: 20px;}
    .menuOpen .menuWrap .close:nth-child(1) {top: 20px; left: 20px; transform: none; width: 25px;}
    .menuOpen .menuWrap .close.en {display: none;}
    .menuOpen .menuWrap.on::before {left: 20%;}
    section.visual {padding: 0 20px;}
    .tit {font-size: 30px;}
    section.visual .mainTxt .tit {font-size: 31px;}
    .tit span.en_s {font-size: 18px;}
    .txt {text-align: justify;}
    .moreBtn {font-size: 12px;}
    section .inner {padding: 0 20px;}
    section.journal {padding: 50px 0px;}
    section.journal .circleBox {top: 15%; right: -4%;}
    section.journal .inner .box .img {width: 100%; margin-bottom: 30px;}
    section.journal .inner .box .tit {margin-bottom: 20px;}
    section.journal .inner .box ul {padding-top: 20px;}
    section.journal .inner .box ul li {margin-bottom: 20px;}
    section.journal .inner .box ul li h3 {width: 100%; margin-bottom: 10px;}
    section.journal .inner .box ul li p {font-size: 12px; width: 100%;}
    section.journal .inner .box .moreBtn {margin-left: 0;}
    section.journal .inner .box ul li.more h3 {height: 20px;}
    section.service {padding: 50px 0;}
    section.service .inner .box .img {width: 100%; margin-top: 30px;}
    section.service .inner .box.design .img {width: 100%;}
    section.service .img.motion::after {background-color: #e8fcff;}
    section.service .inner .box.design {padding-top: 50px;}
    section.service .inner .box.design .tit {font-size: 25px; margin-bottom: 10px;}
    section.service .inner .box .txt .sign {font-size: 20px;}
    section.customer {padding: 80px 20px;}
    section.customer .tit {font-size: 25px;}
    .txt-c {display: none;}
    .txt-m {display: block; text-align: center;}
    section.team .txt-m {text-align: left;}
    section.team {padding: 50px 0px;}
    section.team .circleBox {left: 4%;}
    section.team .inner .box .txt {margin: 30px 0px 10px;}
    section.team .inner .box .img {margin-top: 30px;}
    section.team .inner .box:nth-child(2) .img {margin: 30px 0px;}
    footer {padding: 0 20px;}
    footer .top .tit {font-size: 31px; padding-bottom: 30px;}
    footer .bottom ul li:nth-child(1) {font-size: 20px;}
    footer .bottom ul li {width: 100%; margin-bottom: 12px;}
    footer .bottom ul li b:nth-child(1) {font-size: 13px;}
}

/* 320 모바일 */
@media screen and (max-width:320px){
    body {font-size: 12px;}
    .tit span.en_s {font-size: 16px;}
    section.visual .mainTxt .tit, .tit, footer .top .tit, .menuOpen .menuWrap .tit {font-size: 27px;}
    section.journal .inner .box ul li h3 {font-size: 14px;}
    section.service .inner .box.design .tit {font-size: 22px;}
    .moreBtn {font-size: 11px;}
}