@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Noto+Sans+KR&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;}

/* Layout */
/* 폰트 - 3종류 */ 
body {font-family: 'Noto Sans KR', sans-serif; font-size: 14px; color: #333;} /* 한글 폰트 */
.en {font-family: 'handel gothic', sans-serif;}  /* 메인 텍스트 영어폰트 */
.en_s {font-family: 'Dancing Script', cursive;} /* 필기체폰트 */
.wrap {position: relative; margin: 0 auto; width: 100%;}

/* header */
.innerHeader {max-width: 1720px; height: 110px; line-height: 110px; margin: auto;}
.innerHeader .logo {float: left;}
.innerHeader .logo a {display: block; width: 100%; height: 100%;}
/* gnb + sns */
.innerHeader .mainMenu {float: right; overflow: hidden; position: relative;} /* span.bar 때문에 포지션줌 */
span.bar {position: absolute; left: 0; bottom:40px; width: 0; height: 3px; background: #e7e7e7; transition: all 0.4s;} /* 오버 밑줄 - 제이쿼리 적용 전엔 안보임 */
/* gnb */
.innerHeader .gnb {float: left; }
.innerHeader .gnb li{float: left; margin: 0 20px;}
.innerHeader .gnb li a {display: block; width: 100%; height: 100%;  color: #555;}
/* sns */
.innerHeader .sns {float: left; margin-left: 300px}
.innerHeader .sns li {float: left;}
.innerHeader .sns li a {display: block; width: 100%; height: 100%; padding: 0 10px;}
/*--- js파일: 1번 작성 ---*/

/* 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 .txt {padding: 50px 0px 0 70px;}

/* 타이틀/텍스트/더보기 버튼 공통 클래스 */
.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;}
.tit span.gray {color: #ccc;}
.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: #333; position: absolute; left: 0; top: 54%;}
.moreBtn:hover, .moreBtn:focus { transform:skewX(0) translateX(0);transition: all 0.3s; font-weight: bold;}  /* 호버했을때 기울기 준거 세우도록 */

/* section.Journal */
section.Journal {position: relative; padding: 190px 0 120px;}
section.Journal .scroll {text-transform: uppercase; letter-spacing: 5px; font-size: 10px;position: absolute; left: 50%; top:-20px; padding-top: 90px; transform: translateX(-50%);writing-mode: vertical-rl; line-height: 1.2;}
section.Journal .scroll:before {content: ''; position: absolute; height: 75px; width: 1px; background: #333; left: 6px; top: 0;}


/* section 안에  .inner(공통 넓이 가이드)  .box(플로트) */
section .inner {width: 1320px; margin: auto;overflow: hidden;} 
section .inner .box {float: left; width: 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; overflow: hidden}
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 {clear: both; margin-left: 22%}

/* section.service */
section.service {padding: 190px 0;}
section.service .inner {/*background: red;*/} /* 영역 확인하면서 작업하기 */
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.customer */
section.customer {padding: 160px; text-align: center; background: url(../img/img_04.jpg) no-repeat center/cover;}
section.customer .tit {color: #fff; font-size: 40px; margin-bottom: 10px;}
section.customer .txt {color: #777;}

/* section.team */
section.team {padding: 190px 0; 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 0;}

/* footer */
footer {width: 1320px; margin: 0 auto;}
footer .top .tit {color: #e6e6e6; font-size: 62px; text-align:center; padding-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%;}
footer .bottom ul li:nth-child(1) { width: 31%;font-size: 28px; color: #000;line-height: 1.1;}
footer .bottom ul li {line-height: 2; color: #aaa; font-size: 12px;}
footer .bottom ul li b {color: #333; font-weight: normal}
footer .bottom ul li b:nth-child(1) {display: inline-block;margin-bottom: 12px; color: #333; font-size: 14px;}

/* circleBox SVG */
/*---1. index파일: 일러스트파일 열어서 SVG 확장자로 저장 ---*/
/*---2. js파일: 2번 작성 ---*/
.circleBox {display: block; transform: rotate(-90deg);}
.circleBox .svgAni path {fill:none; stroke:#F5F5F5; stroke-width:25; 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; top: -50px; left: 20%; z-index: -1;}

/* 설명 

https://ny-kim.tistory.com/4 - 참고링크

stroke-dasharray: 1564; 
-> stroke-dasharray라는 속성을 주면 선이 대쉬 형태가 된다 값을 준만큼 간격을 가지게되기 때문에 스크립트로 구한 path 길이그대로 적어줌

stroke-dashoffset: 0;
-> dasharray의 시작되는 위치를 설정하는 속성  (path 길이와 같게 적용하면 path는 보이지 않게 된다

결론!  
-> 애니메이션 줄때  dashoffset을 path 길이와 똑같이 설정한 다음 0으로 줄이면 라인이 따라 그려지는 효과

*/


/*---  js파일: 3번 작성 (scrolla.jquery.min.js 링크걸기) ---*/
/* .motion (스크롤 애니메이션) */

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



/* 공통 .tit 애니메이션  */
/* 1. index파일: 모든 .tit -->  <h2 class="tit en animate" data-animate="motion"> 걸어줌 */
/* 2. .tit.motion span{color: red;} <-- 스크립트 작성후 컬러레드로 체크 */
.tit.motion span { transform:  translate3d(0,0,0) skewY(0deg); overflow: hidden;}
.tit.motion span b {overflow: hidden; 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;}
}

/* .visual .txt 텍스트 애니 */
/* 3. <div class="txt animate" data-animate="motion"> 걸어줌 */
.txt.motion p {transform:  translate3d(0,0,0) skewY(0deg); overflow: hidden;}
.txt.motion p b{font-weight: normal;overflow: hidden; display: block; animation-name: textAni; animation-duration: 2s;}

/* 이미지 애니메이션 */
/* index파일: 모든 .img -->  <p class="img animate" data-animate="motion"> 걸어줌 */
.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: #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;} /* 서클애니때문에 지워줌 */

/*---  js파일: 4번 작성 ---*/
/* 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.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: #f5f5f5; position: absolute; right: -100px; top:0; z-index: -1; transition: 0.5s;}
.menuOpen button.open:hover:before,.menuOpen button.open:focus:before {right: 0;cursor: pointer}


/*.menuOpen button.contact {right: 20px; bottom: 20px; width: 75px; height: 75px; background: #f5f5f5; border-radius: 100%;}*/
.menuOpen .menuWrap {width: 100%; height: 100vh; position: fixed; top: 0; right: 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 {margin-bottom: 20px; display: inline-block; position: relative; transition: all 0.3s;}
.menuOpen .menuWrap .tit li a:hover,.menuOpen .menuWrap .tit li a:focus {transform: translateX(30px); color: #333;}
.menuOpen .menuWrap .tit li a:after {content: ''; width: 0%; height: 2px; background: #333; position: absolute; bottom: -5px; transition: all 0.3s;}
.menuOpen .menuWrap .tit li a:hover:after,.menuOpen .menuWrap .tit li a:focus:after {width: 100%;}
.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}

/* .menuWrap 열기 */
/*---  js파일: 5번 작성 햄버거 메뉴 ---*/
.menuOpen .menuWrap {width: 0; transition: 0s; overflow: hidden; transform: skewY(40deg); opacity: 0;}
.menuOpen .menuWrap.on {width: 100%; right: 0;  transform: skewY(0deg); transition: 0.5s; opacity: 1;}
.menuOpen .menuWrap ul {display: none} /* 메뉴 열었을때 애니 진행위해서 없애줌 */
.menuOpen .menuWrap.on ul {display: block}
/* 메뉴열었을때 동그라미 */
.menuOpen .menuWrap.on:before {content: ''; width: 700px; height: 700px; background: #fff; position: absolute; top: 50%; left: 30%; transform: translateY(-50%); border-radius: 100%}
.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);}
}


/* 반응형 */
/* pc */
/* 1720px ~ 1025px */
@media screen and (max-width: 1720px){  
    .innerHeader {max-width: 100%; padding: 0 30px; box-sizing: border-box;}
    .innerHeader .sns {margin-left: 200px;}
    section.visual {max-width: 100%; padding: 0 30px; box-sizing: border-box;}
    section.visual .mainTxt {margin-top: 100px;}
    section.visual .mainTxt .tit {font-size: 53px;}
    section.visual .mainTxt .txt {padding: 20px 0px 0px 0px;}
    section.Journal .scroll {display: none;}
}
    
@media screen and (max-width:1400px) { /*1024px~1400px*/
    section.visual .mainTxt .tit {font-size: 46px;}
    section .inner {width: 100%; padding: 0 30px; box-sizing: border-box;}
    .img img {width: 100%;}
    section.Journal {overflow: hidden;}
    section.Journal .circleBox {right:-10%; top:0;}
    section.Journal .inner .box .img {width: 90%;}
    section.customer {padding: 160px 0;}
    section.team .circleBox {left: -1%;}
    footer {width: 100%; padding: 0 30px; box-sizing: border-box;}
}

/* 1024이하 */
@media screen and (max-width:1000px) { /*768px~1000px*/
    .innerHeader {height: 80px; line-height: 80px;}
    .innerHeader .mainMenu {width: 0; height: 0; 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 img {height: 50px; width: auto;}
    .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 {width: 100%; float: none;}
    section.Journal {padding: 80px 0; overflow: hidden;}
    section.Journal .circleBox {top:200px; right:-10%;}
    section.Journal .inner .box .img {padding: 0; width: 80%; margin: 0 auto 50px;}
    section.service {padding: 80px 0;}
    section.service .txt {margin-top: 20PX;}
    section.service .inner .box .img {width: 90%; margin: 50px auto 0;}
    section.service .inner .box.design {width: 100%; margin-top: 50px;}
    section.service .inner .box.design .tit {font-size: 35px;}
    section.service .inner .box.design .img {width: 70%; margin: 50px 0 0;}
    section.service .inner .box.design .img.motion:after {background: #fff;}
    section.customer {padding: 120px 0;}
    section.customer .tit {font-size: 30px;}
    section.team {padding: 80px 0; 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  {margin:50px auto ; width: 100%;}
    section.team .inner .box .tit {margin-top: 0; clear: both;}
    footer .bottom ul li {width: 33.3333%;}
    footer .bottom ul li:nth-child(1) {width: 100%; margin-bottom: 30px;}
    
}
/* 모바일 모드 */
@media screen and (max-width:767px) { /*767px~321px*/
    body {font-size: 13px;} 
    .innerHeader {height: 80px; line-height: 80px; padding: 0 20px;}
    .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.en {display: none;}
    .menuOpen .menuWrap .close:nth-child(1) {top: 20px; left: 20px; transform: none;}
    .menuOpen .menuWrap.on:before {left: 20%;}
    section.visual {padding: 0 20px;}
    .tit {font-size: 30px;}
    .tit span.en_s {font-size: 18px;}
    .txt {text-align: justify;}
    .moreBtn {font-size: 12px;}
    section.visual .mainTxt .tit {font-size: 31px;}
    section .inner {padding: 0 20px;}
    section.Journal {padding: 50px 0;}
    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 {width: 100%; font-size: 12px;}
    section.Journal .inner .box .moreBtn {margin-left: 0;}

    section.service {padding: 50px 0;}
    section .inner .box .img {width: 100%; margin-top: 30px;}
    section .inner .box.design .img.img.motion::after {background: #e8fcff;}
    section.service .inner .box.design .img {width: 100%; margin-top: 30px;}
    section.service .inner .box.design .tit {font-size: 25px; margin-bottom: 10px;}
    section.customer {padding: 80px 20px;}
    section.customer .tit {font-size: 25px;}
    section.team {padding: 50px 0;}
    section.team .circleBox {left: 4%;}
    section.team .inner .box .txt {margin: 30px 0 10px;}
    section.team .inner .box .img {margin-top: 30px;}
    section.team .inner .box .moreBtn {float: right;}
    section .inner .box:nth-child(2) .img {margin: 30px 0;}
    footer {padding: 0 20px; }
    footer .top .tit {font-size: 31px;}
    footer .bottom {padding: 30px 0 50px;}
    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) {margin-bottom: 0; font-size: 13px;}
}

/* 모바일 모드 320해상도 */
@media screen and (max-width:320px) { /*320px*/
    body {font-size: 12px;}
    .tit span.en_s {font-size: 16px;}
    .txt {text-align: justify;}
    .moreBtn {font-size: 12px;}
    section.visual .mainTxt .tit, .tit,footer .top .tit {font-size: 27px;}
    .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;}
    footer .bottom ul li:nth-child(1) {font-size: 20px;}
    .moreBtn {font-size: 11px;}
}