@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    /* point - color */
	--color-point:#32A9E6; 
	--color-point-sub:#0060ac;
	--color-point-font:#222;
}

html, body {
    font-family: 'Pretendard', 'Poppins', sans-serif;
}

/* style */
html, body {
    font-size: 62.5%;
    font-weight: 400;
    font-style: normal;

    -webkit-text-size-adjust: none;
    -ms-text-size-adjust : none;  
    -moz-text-size-adjust : none;  
    -o-text-size-adjust : none;  
    text-size-adjust: none
}
body > * {
    font-size: 1.6rem
}
@media screen and (max-width:992px) {
    html, body {
        font-size: 50%
    }
    body > * {
        font-size: 1.750rem
    }
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

body::-webkit-scrollbar-thumb {
    background: var(--color-point);
    border: 1px solid #fff;
    border-radius: 10px
}

body::-webkit-scrollbar-track {
    background: 0 0;
    border: 1px solid transparent;
    border-radius: 10px
}

body::-webkit-scrollbar-corner {
    background: 0 0
}

/* scrollLock */
.scrollLock {touch-action:none;-webkit-overflow-scrolling:none;overflow:hidden;overscroll-behavior:none;}

/* hide */
.hide {
    display:none;
    opacity:0
}

/* cover */
.cover {
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:cover
}

/* header */
header {width:100%;height:86px;position:fixed;top:0;z-index:1000;box-sizing:border-box;transition:.6s;background-color:#fff;box-shadow:0 4px 4px 0 rgba(119,119,119,0.06);}
header::before {content:"";display:block;width:100%;height:0;position:absolute;left:0;top:0;background-color:transparent;transition:background-color 0s;z-index:-1;}
header .hd-wrap {width:100%;height:100%;background-color:#fff;position:relative;display:flex;justify-content:center;align-items:center;transition:.6s;}
header .logo {position:absolute;top:50%;transform:translate(0,-50%);}
header .logo1 {left:30px;}
header .logo2 {right:30px;}
header .logo a {display:block;}
header .logo a img {display:block;height:56px;}
header .logo2 a img {height:34px;margin-top:20px;}
header .menu {display:none;position:absolute;right:30px;top:50%;transform:translate(0,-50%);}
header .menu-btn {width:24px;height:24px;position:relative;}
header .menu-btn > div {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
header .menu-btn > div i {font-size:24px;}
header .menu-btn .open {display:block;}
header .menu-btn .close {display:none;}
header .pc-nav {width:100%;height:100%;}
header .pc-nav::after {content:"";display:block;width:100%;height:1px;background-color:transparent;position:absolute;left:0;bottom:0;transition:.4s;}
header .pc-nav > ul {width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
header .pc-nav > ul > li {width:160px;height:100%;}
header .pc-nav > ul > li > a {width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:500;color:var(--color-point-font);box-sizing:border-box;border-bottom:2px solid transparent;transition:.4s;}
header .nav-box {width:100%;position:absolute;left:0;top:86px;transform:translate(0,-100%);z-index:-1;}
header .box {width:100%;height:220px;background-color:#fff;height:0;overflow:hidden;transition:height 0s;}
header .box .frame {width:100%;max-width:1500px;padding:0 30px;box-sizing:border-box;margin:0 auto;display:flex;flex-wrap:wrap;}
header .box .nav-img .img {width:420px;height:220px;position:relative;opacity:0;transition:opacity 0, transform 0;}
header .box .nav-img .img .cover {width:100%;height:100%;position:absolute;}
header .box .nav {width:calc(100% - 420px);display:flex;}
header .box .nav > li {width:100%;}
header .box .nav > li > a {width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
header .box .nav > li > a span {display:block;font-size:16px;font-weight:400;line-height:1.4;position:relative;color:var(--color-point-font);opacity:0;transition:color .4s, opacity 0s;}
header .box .nav > li > a span::after {content:"";display:block;width:100%;height:1px;background-color:transparent;position:absolute;left:0;bottom:0;transition:.4s;}
header .box .nav.sub {width:calc((100% - 420px) / 2);flex-direction:column;align-items:center;padding-top:25px;box-sizing:border-box;}
header .box .nav.sub > a {display:block;font-size:16px;font-weight:500;line-height:1;color:var(--color-point-font);margin-bottom:20px;opacity:0;transition:color .4s, opacity 0s;}
header .box .nav.sub > li {margin-bottom:6px;}
header .box .nav.sub > li:last-child {margin-bottom:0;}
header .box .nav.sub > li > a span {font-size:14px;color:#777;}
header .mo-nav {width:100%;height:calc(100dvh - 86px);position:absolute;left:0;top:86px;z-index:-1;background-color:#fff;transform:translateY(-100%);opacity:0;transition:transform .6s, opacity 0s .6s;}
header .mo-nav > ul {width:100%;height:calc(100% - 57px);padding-top:20px;box-sizing:border-box;overflow-y:auto;}
header .mo-nav > ul::-webkit-scrollbar {width:8px;height:8px;}
header .mo-nav > ul::-webkit-scrollbar-thumb {background:var(--color-point);border:1px solid #fff;border-radius:10px}
header .mo-nav > ul::-webkit-scrollbar-track {background:0 0;border:1px solid transparent;border-radius:10px}
header .mo-nav > ul::-webkit-scrollbar-corner {background: 0 0}
header .mo-nav > ul > li {width:100%;}
header .mo-nav > ul > li > a {width:100%;padding:20px 30px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:500;line-height:1;color:var(--color-point-font);transition:.4s;}
header .mo-nav > ul > li > a i {font-size:20px;color:rgba(34,34,34,.6);transition:color .4s;}
header .mo-box {width:100%;display:none;}
header .mo-box .frame {width:100%;display:flex;flex-wrap:wrap;}
header .mo-box .frame > ul {width:50%;padding:30px;box-sizing:border-box;display:flex;justify-content: center;flex-direction:column;gap:20px;background-color:#F6F6F6;min-height:142px;}
header .mo-box .frame > ul.sub {width:100%;}
header .mo-box .frame > ul.sub:first-child {padding-bottom:15px;}
header .mo-box .frame > ul.sub:last-child {padding-top:15px;}
header .mo-box .frame > ul.sub > a {display:block;font-size:16px;font-weight:500;line-height:1;color:var(--color-point-font);}
header .mo-box .frame > ul > li > a {display:block;font-size:14px;font-weight:400;line-height:1;color:rgba(34,34,34,.6);}
header .mo-box .mo-img {width:50%;}
header .mo-box .mo-img .img {width:100%;height:100%;position:relative;}
header .mo-box .mo-img .img .cover {width:100%;height:100%;position:absolute;}
header .mo-logo {width:100%;padding:12px 30px;box-sizing:border-box;border-top:1px solid #D9D9D9;}
header .mo-logo a {display:block;}
header .mo-logo a img {display:block;height:32px;}

/* on */
header.on::before {height:100dvh;transition:background-color .6s;background-color:rgba(17,17,17,0.7);}
header .menu-btn.on .open {display:none;}
header .menu-btn.on .close {display:block;}
header .pc-nav > ul > li.on > a {border-color:var(--color-point);}
header .pc-nav > ul > li.on .nav-box {transform:translate(0,0);}
header .pc-nav > ul > li.on .box {height:220px;overflow:visible;transition:height .8s;}
header .pc-nav > ul > li.on .box .nav-img .img {transform:translate(0,20px);opacity:1;transition:opacity .6s .4s, transform .6s .4s;}
header .pc-nav > ul > li.on .box .nav > li > a span {opacity:1;transition:color .4s, opacity .6s .4s;}
header .pc-nav > ul > li.on .box .nav.sub > a {opacity:1;transition:color .4s, opacity .6s .4s;}
header .mo-nav.on {transform:translateY(0);opacity:1;transition:transform .6s, opacity 0s;}
header .mo-nav > ul > li > a.on {color:var(--color-point);}
header .mo-nav > ul > li > a.on i {transform:rotate(180deg);color:var(--color-point);}
@media (hover: hover) and (pointer: fine) {
    header:hover .pc-nav::after {background-color:#CCC;}
    header .pc-nav > ul > li > a:hover {color:var(--color-point);border-color:var(--color-point);}
    header .box .nav > li > a:hover span {color:var(--color-point);}
    header .box .nav > li > a:hover span::after {background-color:var(--color-point);}
    header .box .nav.sub > a:hover {color:var(--color-point);}
}
@media screen and (max-width:1200px) {
    header .pc-nav > ul > li {width:140px;}
}
@media screen and (max-width:992px) {
    header::before {display:none;}
    header .logo2 {display:none;}
    header .pc-nav {display:none;}
    header .menu { display:block;}
}
@media screen and (max-width:768px) {
    header {height:64px;}
    header .logo a img {height:40px;}
    header .logo1 {left:15px;}
    header .menu {right:15px;}
    header .mo-nav {height:calc(100dvh - 64px);top:64px;}
    header .mo-nav > ul > li > a {padding:20px 15px;}           
    header .mo-box .frame > ul {padding:30px 15px;}
    header .mo-logo {padding:12px 15px;}
}

/* footer */
footer {width:100%;padding:80px 30px;box-sizing:border-box;overflow:hidden;position:relative;background-color:#1E3343;}
footer .frame {width:100%;max-width:1680px;margin:0 auto;}
footer .footer-top {width:100%;display:flex;justify-content:space-between;}
footer .footer-top .logo a {display:block;}
footer .footer-top .logo a img {display:block;height:79px;}
footer .footer-nav > ul {display:flex;gap:80px;}
footer .footer-nav > ul > li > a {display:block;font-size:18px;font-weight:500;line-height:1;color:rgba(255,255,255,.9);margin-bottom:20px;}
footer .footer-nav > ul > li > ul {display:flex;flex-direction:column;}
footer .footer-nav > ul > li > ul.sub {margin-bottom:20px;}
footer .footer-nav > ul > li > ul > a {display:block;font-size:14px;font-weight:500;line-height:26px;color:rgba(255,255,255,.9);}
footer .footer-nav > ul > li > ul > li > a {display:flex;align-items:center;font-size:14px;font-weight:400;line-height:24px;color:rgba(204,204,204,.9);transition:.4s;}
footer .footer-nav > ul > li > ul > li > a .disc {width:3px;height:3px;border-radius:50%;background-color:rgba(204,204,204,.9);display:block;margin:0 10px 0 9px;}
footer .footer-bottom {width:100%;display:flex;justify-content:space-between;align-items:flex-end;}
footer .footer-logo {display:flex;gap:30px;margin-bottom:60px;}
footer .footer-logo img {display:block;height:80px;}
footer .footer-address {display:flex;flex-direction:column;margin-bottom:40px;}
footer .footer-address .line {font-size:16px;font-weight:400;line-height:26px;color:rgba(255,255,255,.5)}
footer address {font-style:normal;font-size:16px;font-weight:400;line-height:1;color:rgba(255,255,255,.3);}
footer .footer-shortcut {display:flex;align-items:center;gap:24px;}
footer .footer-shortcut a {display:block;font-size:24px;line-height:1;color:rgba(255,255,255,.9);transition:.4s;}
@media (hover: hover) and (pointer: fine) {
    footer .footer-nav > ul > li > ul > li > a:hover {color:#fff;}
    footer .footer-shortcut a:hover {color:var(--color-point);}
}
@media screen and (max-width:1200px) {
    footer .footer-nav > ul {gap:40px;}
}
@media screen and (max-width:1024px) {
    footer .footer-top {flex-wrap:wrap;justify-content:unset;margin-bottom:60px;}
    footer .footer-top .logo {width:100%;margin-bottom:60px;}
    footer .footer-nav {margin-left:auto;}
}
@media screen and (max-width:768px) {
    footer {padding:60px 15px;}
    footer .footer-top {margin-bottom:40px;}
    footer .footer-top .logo {margin-bottom:0;display:flex;justify-content:center;}
    footer .footer-top .logo a img {height:50px;}
    footer .footer-nav {display:none;}
    footer .footer-bottom {flex-wrap:wrap;justify-content:unset;align-items:unset;gap:40px;}
    footer .footer-info {width:100%;}
    footer .footer-logo {width:100%;max-width:336px;flex-wrap:wrap;justify-content:center;margin:0 auto 40px;}
    footer .footer-logo img {height:60px;}
    footer .footer-address {align-items:center;text-align:center;margin-bottom:20px;}
    footer .footer-address .line {font-size:14px;}
    footer address {font-size:14px;text-align:center;}
    footer .footer-shortcut {width:100%;justify-content:center;gap:30px;}
    footer .footer-shortcut a {font-size:20px;}
}

/* fixed-icons */
.fixed-icons {position:fixed;bottom:40px;right:30px;display:flex;flex-direction:column;gap:6px;z-index:999;}
.fixed-icons {transform:translateY(40px);opacity:0;visibility:hidden;transition:.4s;}
.fixed-icons.active {transform:translateY(0);opacity:1;visibility:visible;}
.fixed-icons .fix-icon {width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;background-color:#fff;color:var(--color-point-font);box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);transition:.4s;}
.fixed-icons .fix-icon i {font-size:18px;}
.fixed-icons .fix-icon svg {display:block;width:18px;}
.fixed-icons .fix-icon svg path {fill:var(--color-point-font);}
@media (hover: hover) and (pointer: fine) {
    .fixed-icons .fix-icon:hover {background-color:var(--color-point);color:#fff;}
    .fixed-icons .fix-icon:hover svg path {fill:#fff;}
}
@media screen and (max-width:768px) {
    .fixed-icons {bottom:20px;right:15px;}
}
@media screen and (max-width:480px) {
    .fixed-icons {bottom:8px;right:8px;transform:translateY(36px);}
    .fixed-icons .fix-icon {width:36px;height:36px;}
    .fixed-icons .fix-icon i {font-size:16px;}
    .fixed-icons .fix-icon svg {width:16px;}
}

/* banner-top-semyung(about, industry, product, support) */
.banner-top-semyung {width:100%;height:660px;overflow:hidden;}
.banner-top-semyung .wrap {width:100%;height:100%;position:relative;}
.banner-top-semyung .bg {width:100%;height:100%;position:relative;background-color:#111;}
.banner-top-semyung .bg .cover {width:100%;height:100%;position:absolute;opacity:.6;}
.banner-top-semyung .title {width:100%;padding:0 30px;box-sizing:border-box;position:absolute;top:50%;transform:translate3d(0,-50%,0);z-index:10;user-select:none;}
.banner-top-semyung .ttl {text-align:center;opacity:0;transform:translateY(20px);animation:fadeIn 2s forwards;}
.banner-top-semyung .ttl h2 {font-size:62px;font-weight:700;line-height:1;margin-bottom:20px;color:#fff;}
.banner-top-semyung .ttl h3 {font-size:20px;font-weight:400;line-height:1;font-family:'Poppins'; color:rgba(255,255,255,.6);text-shadow: 0 0 10px rgba(0, 0, 0, 0.10);}
@keyframes fadeIn {
    0% {opacity:0;transform:translateY(20px);}
    100% {opacity:1;transform:translateY(0);}
}
@media screen and (max-width:768px) {
    .banner-top-semyung {height:480px;}
    .banner-top-semyung .title {padding:0 15px;}
    .banner-top-semyung .ttl h2 {font-size:40px;margin-bottom:10px;}
    .banner-top-semyung .ttl h3 {font-size:18px;}
}

/* banner-fixed-semyung(index, about) */
.banner-fixed-semyung {width:100%;position:relative;overflow:hidden;}
.banner-fixed-semyung .bg {width:100%;height:660px;position:relative;}
.banner-fixed-semyung .bg .cover {position:absolute;width:100%;height:100%;background-attachment:fixed;}
@media screen and (max-width:768px) {
    .banner-fixed-semyung .bg {height:440px;}
    .banner-fixed-semyung .bg .cover {background-attachment: scroll !important;}
}