@charset "UTF-8";


/* design guide variables */
body {
  --color-text: #333333;
  --color-point: rgba(102, 149, 198, 1);
  --color-border: #e4e8eb;
  --color-blue: rgba(55, 70, 86, 1);
  --color-sky: rgba(102, 149, 198, 1);
  --color-green: rgba(141, 198, 74, 1);
}


/* reset for mobile version */
.pc {display: none !important;}
br.only-pc {content: ''; display: none;}
br.only-pc:after {content: '\00a0';}


/* common */
html {font-family: 'Pretendard Variable', sans-serif; font-weight: 300; font-size: 14px; color: var(--color-text); background: #ffffff; color: #333333;}
#wrapper {overflow: hidden; min-height: 100vh;}
#skip-nav {position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.7); transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}
#main-before {position: fixed; left: -160px; top: 100px; width: 160px; line-height: 30px; text-align: center; font-size: 14px; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); transition: left 0.3s; z-index: 100000;}
#main-before:focus {left: 0;}

/* header */
#header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color: #ffffff; z-index: 10000; transition: all 0.3s; border-bottom: 1px solid var(--color-border);}
#header h1 {position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); width: 140px;}
#header a.menu-gnb {position: absolute; right: 10px; top: 50%; width: 40px; height: 40px; transform: translate(0, -50%); font-size: 26px;}
#header a.menu-gnb i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#header a.menu-gnb i + i {display: none;}
#header.open a.menu-gnb i {display: none;}
#header.open a.menu-gnb i + i {display: block;}

#gnb {position: fixed; right: -110%; top: 60px; width: 100%; height: calc(100vh - 60px); background-color: rgba(255, 255, 255, 0.8); padding: 50px 30px; transition: right 0.3s;}
#header.open #gnb {right: 0;}
#gnb > ul > li + li {margin-top: 30px;}
#gnb > ul > li > a {display: block; font-size: 34px; font-weight: 200;}

#header a.download {position: fixed; right: 20px; bottom: 20px; transform: translate(0, -50%); padding: 6px 28px; border-radius: 100px; background-color: #333333; color: #ffffff; text-align: center; font-size: 13px; transition: background-color 0.3s;}
#header a.download:hover {background-color: #666666;}
#header a.download i {margin-right: 6px;}

/* footer */
#footer {background: #fafbfc; color: #777777; font-size: 13px; border-top: 1px solid #e4e8eb; padding: 30px 15px 80px 15px;}
#footer h2 {width: 120px;}
#footer h2 img {filter: grayscale(1) opacity(0.7);}
#footer ul.link {display: flex; margin-top: 20px; margin-bottom: 20px;}
#footer ul.link li + li::before {content: '|'; margin: 0 20px; font-size: 12px; color: #e4e8eb; position: relative; top: -1px;}
#footer ul.link em {color: #000000; font-weight: 700;}
#footer address {line-height: 1.8em;}
#footer address > span {display: block;}
#footer address span em {color: var(--color-point); font-weight: 700; margin-right: 10px;}
#footer p.copyright {font-size: 12px; margin-top: 15px; color: #999999;}

#system-info {position: relative; padding: 20px; margin-top: 30px; border: 1px solid #999999; border-radius: 10px;}


/* main */
#main {position: relative; min-height: calc(100vh - 230px);}
body.main #main > section + section {border-top: 1px solid var(--color-border); padding: 60px 20px;}
body.main #main > section h2 {font-size: 48px; font-weight: 200; text-align: center; margin-bottom: 60px;}

#main-visual {position: relative; height: 100vh; background-color: #ffffff; overflow: hidden;}
#main-visual ul.visual li.web {position: absolute; left: 0; top: 80px; width: 70vw; opacity: 0; animation: main-visual-effect 20s 0s ease-in-out infinite;}
#main-visual ul.visual li.solution {position: absolute; left: 0; bottom: 200px; width: 70vw; opacity: 0; animation: main-visual-effect 20s 10s ease-in-out infinite;}
#main-visual ul.visual li.education {position: absolute; right: 0; bottom: 0; width: 70vw; opacity: 0; animation: main-visual-effect 20s 5s ease-in-out infinite;}
#main-visual ul.visual li.rnd {position: absolute; right: 0; top: 200px; width: 70vw; opacity: 0; animation: main-visual-effect 20s 15s ease-in-out infinite;}
#main-visual h2 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; text-align: center; z-index: 100;}
#main-visual h2 p.slogan {font-size: 40px; font-weight: 200; color: var(--color-blue);}
#main-visual h2 p.slogan span + span {margin-left: 30px;}
#main-visual h2 p.slogan span.em {font-size: 60px; font-weight: 300;}
#main-visual h2 p.slogan span.sky {color: var(--color-sky);}
#main-visual h2 p.slogan span.green {color: var(--color-green);}
@keyframes main-visual-effect {
  0% {opacity: 0;}
  30% {opacity: 0.5;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}

#main-business {position: relative;}
#main-business ul.business-field {display: grid; grid-template-columns: 1fr; gap: 20px;}
#main-business ul.business-field > li {position: relative; border: 2px solid #e0e0e0; border-radius: 10px; height: 200px; overflow: hidden;}
#main-business ul.business-field > li::before {content: ''; position: absolute; right: 0; bottom: 0; width: 60%; height: 140px; background: #ffffff url(../img/business/business-service-01.jpg) center center no-repeat; background-size: contain; transition: transform 0.3s;}
#main-business ul.business-field > li.web {border-color: var(--color-blue);}
#main-business ul.business-field > li.solution {border-color: var(--color-green);}
#main-business ul.business-field > li.solution::before {background-image: url(../img/business/business-solution-02.jpg);}
#main-business ul.business-field > li.education {border-color: var(--color-sky);}
#main-business ul.business-field > li.education::before {background-image: url(../img/business/business-edu-01.jpg);}
#main-business ul.business-field > li.rnd {border-color: var(--color-blue);}
#main-business ul.business-field > li.rnd::before {background-image: url(../img/business/business-rnd-03.jpg);}
#main-business ul.business-field > li > a {display: block; position: relative; height: 100%; padding: 20px;}
#main-business ul.business-field > li em {display: block; font-size: 26px; margin-bottom: 10px; transition: color 0.3s;}
#main-business ul.business-field > li p {font-size: 16px; color: #666666;}
#main-business ul.business-field > li:hover::before {transform: scale(1.1);}
#main-business ul.business-field > li.web > a:hover em {color: var(--color-blue);}
#main-business ul.business-field > li.solution > a:hover em {color: var(--color-green);}
#main-business ul.business-field > li.education > a:hover em {color: var(--color-sky);}
#main-business ul.business-field > li.rnd > a:hover em {color: var(--color-blue);}


#main-education {position: relative;}
#main-education ul.education-field {display: flex; flex-wrap: wrap; gap: 20px; text-align: center; justify-content: center;}
#main-education ul.education-field > li {padding: 0 20px; font-size: 18px; font-weight: 200; line-height: 40px; border: 1px solid var(--color-border); border-radius: 100px;}
#main-education ul.education-field > li.blue {border-color: var(--color-blue); color: var(--color-blue);}
#main-education ul.education-field > li.sky {border-color: var(--color-sky); color: var(--color-sky);}
#main-education ul.education-field > li.green {border-color: var(--color-green); color: var(--color-green);}
@media (max-width: 1460px) {
  #main-education {padding: 100px 30px;}
}

#main-contact {position: relative;}
#main-contact ul.contact {font-size: 16px; font-weight: 200;}
#main-contact ul.contact > li + li {margin-top: 10px;}
#main-contact ul.contact em {color: var(--color-blue); font-weight: 500; display: inline-block; width: 50px;}
#main-contact ul.contact span {margin-left: 10px;}
#main-contact div.btn-container {margin-top: 60px;}


/* sub(common) */
body.sub #main {padding-top: 100px; padding-bottom: 100px;}
body.sub #main > h2 {font-size: 34px; font-weight: 200; text-align: center; margin-bottom: 30px;}
body.sub #main > section.content {position: relative; font-size: 18px; padding: 20px 20px;}
body.sub #main > section.content + section.content {margin-top: 40px;}
body.sub #main > section.content h3.title {font-size: 26px; font-weight: 300; margin-bottom: 80px; text-align: center;}
body.sub #main > section.content h3.title span {font-size: 28px; color: #777777;}


/* 회사소개 */
div.philosophy {position: relative;}
div.philosophy p.logo img {width: 100%;}
div.philosophy p.slogan {font-size: 40px; color: var(--color-blue); margin-bottom: 10px;}
div.philosophy p.slogan.sub {font-size: 20px;}
div.philosophy p.slogan em.sky {color: var(--color-sky);}
div.philosophy p.slogan em.green {color: var(--color-green);}
div.philosophy p.slogan + p.paragraph {margin-top: 60px;}
div.philosophy p.paragraph + p.paragraph {margin-top: 30px;}
div.philosophy p.paragraph em {color: var(--color-sky); font-weight: 500;}

div.history {position: relative; font-size: 16px;}
div.history > ul {position: relative;}
div.history > ul > li {position: relative; padding-left: 80px; padding-top: 20px;}
div.history > ul > li + li {margin-top: 30px;}
div.history > ul > li em.date {position: absolute; left: 0; top: 0; font-size: 30px; color: var(--color-blue);}
div.history > ul > li > ul > li {position: relative; padding-left: 40px; padding-top: 6px;}
div.history > ul > li > ul > li + li {margin-top: 10px;}
div.history > ul > li > ul > li > * {display: block;}
div.history > ul > li > ul > li em.month {position: absolute; left: 0; top: 0; font-size: 18px; color: var(--color-sky);}
div.history > ul > li > ul > li > span span {font-size: 16px; color: var(--color-green);}
div.history > ul > li > ul > li span.desc {display: block; margin-top: 2px; font-size: 13px; color: #999999;}

ul.contact {max-width: 1000px; margin: 30px auto 0 auto; font-size: 16px; font-weight: 200;}
ul.contact > li + li {margin-top: 10px;}
ul.contact em {color: var(--color-blue); font-weight: 500; display: inline-block; width: 60px;}
ul.contact span {margin-left: 10px;}


/* 사업분야 */
ul.business-category {}
ul.business-category > li {position: relative;}
ul.business-category > li + li {margin-top: 40px;}
ul.business-category > li > div.container {display: grid; grid-template-columns: 140px 1fr;}
ul.business-category > li div.image {width: 120px; height: 120px; border-radius: 200px; overflow: hidden; border: 2px solid var(--color-border);}
ul.business-category > li div.image img {width: 100%; height: 100%; object-fit: cover;}
ul.business-category > li div.content {position: relative; font-size: 14px; color: #777777;}
ul.business-category > li div.content::before {content: ''; position: absolute; left: 0; top: 45px; height: 1px; width: 100%; background-color: var(--color-sky);}
ul.business-category > li div.content::after {content: ''; position: absolute; right: 100%; top: 45px; height: 1px; width: 30px; background-color: var(--color-sky); transform: rotate(-30deg); transform-origin: right center;}
ul.business-category > li div.content em.title {display: block; font-size: 22px; font-weight: 200; color: var(--color-blue); margin-bottom: 20px;}
ul.business-category > li div.content p.desc {margin: 15px 0;}
ul.business-category > li div.content ul.desc {position: relative; margin: 25px 0;}
ul.business-category > li div.content ul.desc > li {position: relative; padding-left: 12px;}
ul.business-category > li div.content ul.desc > li + li {margin-top: 4px;}
ul.business-category > li div.content ul.desc > li::before {content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 4px; background-color: var(--color-sky);}
ul.business-category > li div.content em {font-weight: 500;}


/* 교육분야 */
ul.subject {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 10px; font-size: 13px;}
ul.subject > li {min-width: 0;}
ul.subject > li > a {display: block; position: relative; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; transition: all 0.3s; background-color: #ffffff;}
ul.subject > li > a * {display: block;}
ul.subject > li span.thumb {height: 160px; overflow: hidden; border-bottom: 1px solid var(--color-border);}
ul.subject > li span.thumb img {width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
ul.subject > li span.thumb a.wish {position: absolute; right: 15px; top: 15px; color: #ffffff; font-size: 18px;}
ul.subject > li span.text {padding: 12px 10px; height: 140px;}
ul.subject > li span.text em.title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; margin-bottom: 10px;}
ul.subject > li span.text span.desc {line-height: 1.4em; height: 2.8em; overflow: hidden; color: #777777;}
ul.subject > li > a:hover {border-color: var(--color-sky); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.1);}
ul.subject > li > a:hover span.thumb img {transform: scale(1.1);}
@media (min-width: 720px) {
  ul.subject {grid-template-columns: 1fr 1fr 1fr; gap: 30px 10px;}
}
ul.subject > li span.tag {position: absolute; left: 10px; bottom: 12px; width: calc(100% - 20px); overflow: hidden; display: flex; font-size: 10px; gap: 3px;}
ul.subject > li span.tag > span {border: 1px solid #e0e0e0; border-radius: 20px; line-height: 20px; padding: 0 4px; background-color: #ffffff;}
ul.subject > li span.tag > span.blue {color: var(--color-blue); border-color: var(--color-blue);}
ul.subject > li span.tag > span.sky {color: var(--color-sky); border-color: var(--color-sky);}
ul.subject > li span.tag > span.green {color: var(--color-green); border-color: var(--color-green);}






/* module */
em.blue {color: var(--color-blue);}
em.sky {color: var(--color-sky);}
em.green {color: var(--color-green);}

div.btn-container {text-align: center;}
a.btn {font-size: 20px; font-weight: 200; color: var(--color-blue); display: inline-block; min-width: 8em; height: calc(2em + 6px); background-image: linear-gradient(45deg, var(--color-blue), var(--color-sky), var(--color-green)); border-radius: 3em; padding: 3px; text-align: center;}
a.btn span {display: block; line-height: 2em; background-color: #ffffff; border-radius: 3em; padding: 0 1em; transition: all 0.3s;}
a.btn.small {font-size: 13px; padding: 2px; height: calc(2em + 4px);}
a.btn.medium {font-size: 18px;}
a.btn.large {font-size: 24px;}

div.kakao-map {position: relative; max-width: 100%; margin: 20px 0; border: 1px solid var(--color-border); overflow: hidden;}