@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 pc version */
.mobile {display: none !important;}
br.only-m {content: ''; display: none;}
br.only-m:after {content: '\00a0';}


/* common */
html {font-family: 'Pretendard Variable', sans-serif; font-weight: 300; font-size: 13px; 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: 80px; background-color: #ffffff; z-index: 10000;}
#header div.container {position: relative; max-width: 1400px; height: 100%; margin: 0 auto;}
#header h1 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%);}
#header h1 a {display: block;}
#header h1 a img {height: 30px; display: block;}

#gnb {position: absolute; left: 300px; top: 50%; transform: translate(0, -50%); font-size: 16px;}
#gnb > ul {display: flex; column-gap: 50px;}

#header a.download {position: absolute; right: 0; top: 50%; 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; height: 220px; border-top: 1px solid #e4e8eb;}
#footer > div.container {position: relative; max-width: 1400px; height: 100%; margin: 0 auto; padding: 30px 0 0 300px;}
#footer h2 {position: absolute; left: 0; top: 30px; width: 160px; height: 50px;}
#footer h2 img {height: 30px; filter: grayscale(1) opacity(0.7);}
#footer ul.link {display: flex; 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 + span:not(.address, .phone)::before {content: '|'; position: relative; top: -2px; margin: 0 15px; font-size: 0.9em; color: #e4e8eb;}
#footer address > span.address {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;}
@media (max-width: 1460px) {
  #header h1 {left: 30px;}
  #header a.download {right: 30px;}
  #footer h2 {left: 30px;}
}

#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);}
body.main #main > section > div.container {position: relative; max-width: 1460px; margin: 0 auto; padding: 100px 30px;}
body.main #main > section > div.container.small {max-width: 1260px;}
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: 40vw; opacity: 0; animation: main-visual-effect 20s 0s ease-in-out infinite;}
#main-visual ul.visual li.solution {position: absolute; left: 0; bottom: 0px; width: 40vw; 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: 60vw; opacity: 0; animation: main-visual-effect 20s 5s ease-in-out infinite;}
#main-visual ul.visual li.rnd {position: absolute; right: 0; top: 80px; width: 40vw; 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: 70px; 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: 110px; 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 1fr 1fr 1fr; gap: 30px;}
#main-business ul.business-field > li {position: relative; border: 2px solid #e0e0e0; border-radius: 10px; height: 260px; 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: 30px;}
#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);}
@media (max-width: 1460px) {
  #main-business {padding: 100px 30px;}
}
@media (max-width: 1260px) {
  #main-business ul.business-field {grid-template-columns: 1fr 1fr;}
}

#main-education {position: relative;}
#main-education ul.education-field {display: flex; flex-wrap: wrap; gap: 30px; text-align: center; justify-content: center;}
#main-education ul.education-field > li {padding: 0 30px; font-size: 24px; font-weight: 200; line-height: 50px; 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 {max-width: 1000px; margin: 0 auto; font-size: 24px; 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: 100px;}
#main-contact ul.contact span {margin-left: 20px;}
#main-contact div.map {max-width: 1000px; height: 500px; margin: 0 auto; margin-top: 60px; border: 1px solid var(--color-border);}
#main-contact div.btn-container {margin-top: 60px;}



/* sub(common) */
body.sub #main {padding-top: 120px; padding-bottom: 150px;}
body.sub #main > h2 {font-size: 50px; font-weight: 200; text-align: center; margin-bottom: 100px;}
body.sub #main > section.content {position: relative; font-size: 20px;}
body.sub #main > section.content + section.content {margin-top: 200px;}
body.sub #main > section.content > div.container {position: relative; max-width: 1260px; margin: 0 auto; padding: 0 30px;}
body.sub #main > section.content h3.title {font-size: 38px; font-weight: 300; margin-bottom: 80px; text-align: center;}
body.sub #main > section.content h3.title span {font-size: 28px; color: #777777;}


/* 회사소개 */
div.philosophy {display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 50px;}
div.philosophy p.logo img {width: 100%;}
div.philosophy p.slogan {font-size: 54px; color: var(--color-blue); margin-bottom: 10px;}
div.philosophy p.slogan.sub {font-size: 24px;}
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: 20px;}
div.history > ul {position: relative;}
div.history > ul > li {position: relative; padding-left: 140px; 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: 40px; color: var(--color-blue);}
div.history > ul > li > ul > li {position: relative; padding-left: 50px; 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: 28px; 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: 15px; color: #999999;}

div.map {position: relative; max-width: 1000px; margin: 0 auto; height: 500px; border: 1px solid var(--color-border);}
ul.contact {max-width: 1000px; margin: 30px auto 0 auto; font-size: 24px; font-weight: 200;}
ul.contact > li + li {margin-top: 10px;}
ul.contact em {color: var(--color-blue); font-weight: 500; display: inline-block; width: 100px;}
ul.contact span {margin-left: 20px;}


/* 사업분야 */
ul.business-category {display: grid; grid-template-columns: 1fr 1fr; gap: 80px 60px;}
ul.business-category > li {position: relative;}
ul.business-category > li.full {grid-column: 1 / -1;}
ul.business-category > li > div.container {display: grid; grid-template-columns: 260px 1fr;}
ul.business-category > li.full > div.container {width: 50%; margin: 0 auto;}
ul.business-category > li div.image {width: 220px; height: 220px; 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: 15px; 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: 60px; background-color: var(--color-sky); transform: rotate(-30deg); transform-origin: right center;}
ul.business-category > li div.content em.title {display: block; font-size: 28px; 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: 15px 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 1fr 1fr; gap: 40px; font-size: 14px;}
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 16px; height: 140px;}
ul.subject > li span.text em.title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20px; 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 (max-width: 1100px) {
  ul.subject {grid-template-columns: 1fr 1fr 1fr; gap: 30px;}
}
ul.subject > li span.tag {position: absolute; left: 10px; bottom: 12px; width: calc(100% - 20px); overflow: hidden; display: flex; font-size: 12px; gap: 3px;}
ul.subject > li span.tag > span {border: 1px solid #e0e0e0; border-radius: 20px; line-height: 20px; padding: 0 6px; 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: 30px; 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:hover span {opacity: 0.8;}
a.btn.small {font-size: 16px; padding: 2px; height: calc(2em + 4px);}
a.btn.medium {font-size: 24px;}
a.btn.large {font-size: 30px;}