@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

* {
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    width: 100%;
    font-size:18px;
    letter-spacing: -0.04rem;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul {
    list-style:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color: inherit;
    display: block;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

button {
  border:none;
  background: none;
  font-size: 1.6rem;
  cursor: pointer;
}

p {
  word-break: keep-all;
}

/*========== layout ==========*/
.container { width: 1440px; margin:0 auto;}
.main {margin-top:800px; border-radius: 150px 150px 0px 0px; overflow: hidden; background: #fff; box-shadow: 0px 0px 43px 0px rgb(0 0 0 / 20%);  transition: 0.5s;}
.main.sub {margin-top:400px; }
.main.scroll {border-radius: 0px; transition: 0.5s;}
section {padding: 150px 0; position:relative;}
.d-flex { display: flex; justify-content: space-evenly;}
.deco {width:36px; height: 5px; background: #111; display: block; margin-top: 2rem; margin-bottom: 4rem;}
.clear:after {content:""; display: block; clear:both;}
/*========== color ==========*/
.white {color: #fff;}
.dark {color: #111;}
.blue {color:#3870ff;}
.green {color:#00b0c6;}
.lavender {color:#8e4fc9;}
.bg-skyblue {background: #f0f2ff;}
.bg-blue {background: #687ef8; color:#fff;}
.bg-lightGreen {background: #e7f3f5; }
.bg-green {background: #45c2da; color:#fff; }
.bg-lightLavender {background: #f0ebff;}
.bg-lavender {background: #a188e8; color:#fff;}

/*========== font ==========*/
.t-left {text-align: left;}
.t-center {text-align: center;}
h1 {font-size: 5.4rem; font-weight: 900; padding-bottom:1.6rem;}
h2 {font-size: 2.5rem; font-weight: 600; padding-bottom:3rem; text-align: center; line-height: 1.3;}
h3 {font-size:  1.8rem; font-weight: 500; padding-bottom:2rem;}
p { line-height: 1.4;}
.sub-title {font-size: 1.3rem; padding-bottom:2.5rem;}
/*========== button ==========*/
.btn-go {position: relative; height:50px;}
.btn-go:after {content:""; display: block; width: 0%; height: 1px; background:#111; transition: 0.3s;}
.btn-go:hover:after{width:100%; transition: 0.3s;}
.btn-go span {display:block; width: 2.3rem; height: 1.6rem; background: url(../images/arrow.svg) no-repeat center; background-size: 100%; position: absolute; right:-50px; top:10px; animation:arrowAni linear 0.7s infinite;}
.btn-go span.arrow-w {background: url(../images/arrow_w.svg) no-repeat center;}
@keyframes arrowAni {
  0%{right:-44px;}
  50%{right:-50px;}
  100%{right:-44px;}
}

.btn-go-img {padding:15px 70px; border-radius: 30px; background:#c8dfe3;}
/*========== header ==========*/
.header {width:100%; position: fixed; top:0; z-index: 100; color:#fff; border-bottom:1px solid #fff; transition: 0.5s;}
.header.on {background: #fff; color:#111; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.1); transition: 0.5s;}
.header.scroll {top:-80px; transition: 0.5s;}
.nav {display: flex; justify-content: center;  }
.nav a {margin:0 30px;}
.nav li {float:left; padding: 24px 40px; font-weight: 500;}
.nav li:hover {color:#3870ff;}
.version {position:absolute; top:30px; right:20px; font-size: 14px;}

/*========== circle-box ==========*/
/* .circle-box {position: fixed; top:0; left:0;} */
.circle-box > div {border-radius: 50%; position:fixed; z-index: -1;}

.circle1 {background: #fffa7c; opacity: 0; width: 30px; height: 30px; top:20%; left:8%; animation: circleAni 0.8s ease-in-out 1s ;}
.circle2 { background: #fff; opacity: 0; width: 40px; height: 40px; top:73%; left:16%;  animation: circleAni 0.8s ease-in-out 0.8s ;}
.circle3 { background: #4a65ff; opacity: 0; width: 30px; height: 30px;  top:32%; right:28%;  animation: circleAni 0.8s ease-in-out 1.2s ;}
.circle4 { background: #ad4aff; opacity: 0; width: 50px; height: 50px;  top:85%; right:13%; animation: circleAni 0.8s ease-in-out 0.9s ;}

@keyframes circleAni {
  0%{transform: scale(0); opacity: 0;}
  60%{ opacity: 0.1;}
  100%{transform: scale(30); opacity: 0;}
}

/*========== top-title-area ==========*/
.top-title-area {position:fixed; top:0; left:0; z-index: -1; width: 100%; height: 700px; color:#fff; text-align: center; text-shadow: 0px 0px 11px rgb(0 0 0 / 50%); animation: titleAni 1.5s; user-select: none;}
.top-title-area::before {content:""; display: block; width:1000px; height:1000px; background: url(../images/main-item-1.svg)  no-repeat center / cover; position:absolute; top: -400px;
left:-400px; opacity: 0.08; }
.top-title-area::after {content:""; display: block; width:1000px; height:1000px; background: url(../images/main-item-1.svg)  no-repeat center / cover; position:absolute; bottom: -180px;
right:-400px; opacity: 0.08; }
.top-title-area.main-page {padding-top:350px; background: url(../images/main_01.jpg) no-repeat center top; background-size: cover;}
.main-page .title {padding-top:250px}
.main-page span {padding: 0 45px;}

.top-title-area.project-page {padding-top:170px; background: #4ecfdf url(../images/main_02.jpg) no-repeat center top; background-size: revert;}
.project-page .title {padding-top:250px}
.project-page span {padding: 0 45px;}

.top-title-area.about-page {padding-top:170px; background: #4ecfdf url(../images/main_03.jpg) no-repeat center top; background-size: revert;}
.about-page .title {padding-top:250px}
.about-page span {padding: 0 45px;}

@keyframes titleAni {
  0%{ color:inherit; text-shadow: 0px 0px 0px rgb(0 0 0 / 0%); }
  90%{color:inherit; text-shadow: 0px 0px 0px rgb(0 0 0 / 0%); }
  100%{color: #fff; text-shadow: 0px 0px 30px rgb(0 0 0/ 30%);}
}

/*========== footer ==========*/
.footer { background: #777; padding: 30px 0 50px; text-align: center; color:#fff;}
.footer p {font-size: 1rem;padding-bottom: 20px;}
.footer small {font-size: 0.9rem;}

/*==================== 1440px ====================*/
@media screen and (max-width:1440px){
  .container { width: 100%;}
}

/*==================== 1024px ====================*/
@media screen and (max-width:1024px){
body {font-size: 16px;}
.img-box .img-pc {width: 100%;}
.mobile-area .content-box {justify-content: space-around;}
.content-box img:nth-child(2) {display: none;}
.content-box img:nth-child(3) {display: none;}
.content-box img:nth-child(4) {display: none;}
}
/*========== end ==========*/