@charset "utf-8";

:root {
  --col01:#6CA0FA;
  --col02:#A2C4FF;
  --col03:#4565A2;
  --col04:#1E2A4A;
  --col05:#8d94a0;
  --lbg:#F4F5F7;
  --border:#d9dadc;
  --selection:#f8b033;
  --ic:'Material Symbols Outlined';
  --main-gra:linear-gradient(135deg, #2a5dbd, var(--col03));
}

/* main */
.section.main {background:#2B2E32;}
.section.main .visual {position:relative; width:100%; height:100%; min-height:560px;}
.section.main .visual #visual,
.section.main .visual .slick-slider.slick-initialized .slick-list,
.section.main .visual .slick-slider.slick-initialized .slick-track {height:100%;}
.section.main .visual .bg {width:100%; height:100%; background-size:cover; background-position:center center; position:absolute; left:0; top:0; z-index:0;}
.section.main .visual .vis_txt {color:#fff; position:relative; z-index:1; padding:0 max(20px, calc(50% - 700px)) 100px; position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;}
.section.main .visual .vis_txt .t01 {color:var(--col01); font-weight:600; text-transform:uppercase; margin-bottom:20px;}
.section.main .visual .vis_txt .t02 {color:#fff; font-weight:700; line-height:1.2; font-size:2.5em;}
.section.main .visual .vis_txt .t03 {margin-top:20px;}
.section.main .visual .control {position:absolute; left:max(20px, calc(50% - 700px)); bottom:80px; z-index:2; width:min(calc(100% - 40px), 1400px); display:flex; align-items:center; justify-content:flex-start; gap:10px;}
.section.main .visual .control .dots ul {display:flex; align-items:stretch; gap:10px; height:100%;}
.section.main .visual .control .dots li {display:inline-block; width:12px; height:12px; border-radius:100%; background:#ffffff64; cursor:pointer;}
.section.main .visual .control .dots li.slick-active {background:var(--col02);}
.section.main .visual .control .arr {display:flex; align-items:center; justify-content:center; color:#fff; font-size:2em; font-weight:200; cursor:pointer;}
.section.main .visual .control .arr:after {font-family:var(--ic);}
.section.main .visual .control .arr.prev:after {content:'chevron_left';}
.section.main .visual .control .arr.next:after {content:'chevron_right';}

@media all and (min-width:768px) {
  .section.main .visual {min-height:640px;}
  .section.main .visual .vis_txt .t02 {font-size:3.5em;}
  .section.main .visual .vis_txt .t03 {font-size:1.1em;}
  .section.main .visual .control {bottom:100px;}
}

@media all and (min-width:1200px) {
  .section.main .visual .vis_txt .t01 {font-size:1.1em; margin-bottom:30px;}
  .section.main .visual .vis_txt .t02 {font-size:4em;}
  .section.main .visual .vis_txt .t03 {font-size:1.25em; margin-top:30px;}
  .section.main .visual .control {bottom:160px;}
}


.section {overflow:hidden;}
.section .secwrap {margin:100px auto 80px;}
.section .sectit .t01 {opacity:0.8; margin:0 0 20px; color:var(--col01); font-weight:600;}
.section .sectit .t02 {font-size:2em; display:flex; flex-wrap:wrap; align-items:center; font-weight:700; gap:0.2em; color:#fff;}
.mainWrap #scrolldown {display:none; transform:rotate(90deg); transform-origin:left bottom;}
.mainWrap #scrolldown p {color:#fff; line-height:10px; font-size:0.8em; display:flex; align-items:center; gap:10px;}
.mainWrap #scrolldown span {display:inline-block; width:100px; height:2px; background:#ffffff64; position:relative;}
.mainWrap #scrolldown span:after {content:''; display:inline-block; width:100%; height:100%; background:#fff; position:absolute; left:0; top:0; animation:scroll 2s infinite; transform-origin:left top;}


@media all and (min-width:768px) {
  .section .sectit .t01 {font-size:1.1em;}
  .section .sectit .t02 {font-size:2.5em;}
}

@media all and (min-width:1200px) {
  .section .secwrap {margin:160px auto 120px;}
}

@media all and (min-width:1600px) {
  .mainWrap:not(.fp-responsive) #pager {display:flex; flex-direction:column; gap:20px; position:fixed; top:calc(50% - 65px); left:20px; z-index:99; transition:0.3s;}
  .mainWrap:not(.fp-responsive).fp-viewing-main #pager {top:calc(50% - 145px);}
  .mainWrap:not(.fp-responsive).fp-viewing-main #scrolldown {display:block; position:fixed; bottom:160px; left:30px; z-index:98;}
  .mainWrap:not(.fp-responsive).fp-viewing-main #scrolldown {width:180px; display:flex; align-items:center; justify-content:space-between; gap:20px; position:fixed; bottom:355px; left:30px; z-index:98;}
}


/*기술현황*/
.section.tech {background:url('../img/main/tech_bg.jpg') no-repeat center center / cover;}
.section.tech .pdinner {display:flex; flex-direction:column; gap:30px;}
.section.tech .tab {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px 10px; margin:30px 0 0;}
.section.tech .tab dd {display:flex; align-items:center; justify-content:center; text-align:center; border-radius:8px; background:#ffffff24; backdrop-filter:blur(20px); color:#fff; cursor:pointer; padding:20px;}
.section.tech .tab dd.on {background:var(--col01);}
.section.tech .tcwrap {height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:30px;}
.section.tech .tctop {border-top:2px solid #fff; padding:30px 0 0; color:#fff;}
.section.tech .tctop .t01 {display:flex; align-items:center; justify-content:space-between; gap:30px;}
.section.tech .tctop .t01 p {font-size:1.5em; font-weight:700;}
.section.tech .tctop .t02 {opacity:0.8; margin:20px 0 0;}
.section.tech .tctop .control {display:flex; gap:10px; width:140px;}
.section.tech .tctop .control span,
.section.tech .tctop .control a {display:flex; align-items:center; justify-content:center; color:#fff; width:40px; height:40px; border-radius:100%; background:#ffffff24; backdrop-filter:blur(20px); cursor:pointer;}
.section.tech .tctop .control span:after,
.section.tech .tctop .control a:after {font-family:var(--ic); font-size:1.1em;}
.section.tech .tctop .control .prev:after {content:'chevron_left';}
.section.tech .tctop .control .next:after {content:'chevron_right';}
.section.tech .tctop .control .more:after {content:'add';}
.section.tech .slick-list {margin:0 -10px;}
.section.tech .slick-slide {margin:0 10px;}
.section.tech .tabcontent ul li {background:#fff; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; overflow:hidden;}
.section.tech .tabcontent ul li .img {width:100%; aspect-ratio:7/5; margin:0; overflow:hidden; border-bottom:1px solid var(--border);}
.section.tech .tabcontent ul li .img img {object-fit:cover; width:100%; height:100%;}
.section.tech .tabcontent ul li p {padding:10px; margin:auto; text-align:center;}


@media all and (min-width:768px) {
  .section.tech .tab dd {text-align:left; justify-content:space-between; font-size:1.1em;}
  .section.tech .tab dd.on:after,
  .section.tech .tab dd:hover:after {content:'chevron_right'; font-family:var(--ic); font-size:1.25em;}
  .section.tech .tctop .t01 p {font-size:1.75em;}
  .section.tech .slick-list {margin:0 -20px;}
  .section.tech .slick-slide {margin:0 20px;}
}

@media all and (min-width:1200px) {
  .section.tech .pdinner {flex-direction:row; align-items:stretch; gap:100px; height:580px;}
  .section.tech .tab {grid-template-columns:1fr; margin:auto 0 0;}
  .section.tech .tab dd {height:80px; padding:20px 30px;}
  .section.tech .tctop {margin:calc(2.35em * 1.45 + 20px) 0 auto;}
  .section.tech .tctop .t01 p {font-size:2.25em;}
  .section.tech .sectit {width:calc(30% - 100px); display:flex; flex-direction:column;}
  .section.tech .seccon {width:70%; min-width:0; overflow:hidden;}
  .section.tech .tabcontent {height:100%;}
  .section.tech .tabcontent ul li {height:300px;}
}


/*서비스*/
.section.service {background:url('../img/main/service_bg.jpg') no-repeat center center / cover;}
.section.service .pdinner {display:flex; flex-direction:column; gap:30px;}
.section.service .seccon {color:#fff; display:flex; flex-direction:column; gap:30px;}
.section.service .seccon h5 {font-size:1.25em; font-weight:700;}
.section.service .seccon ul {display:flex; flex-wrap:wrap; text-align:center; align-items:stretch; gap:20px;}
.section.service .seccon ul li {width:calc(50% - 10px);}
.section.service .seccon ul li:last-child {width:100%;}
.section.service .seccon ul li > div,
.section.service .seccon ul li > a {border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; height:100%;}
.section.service .seccon ul li > div {border:1px solid #ffffff96;}
.section.service .seccon ul li > div .tit {color:var(--col02);}
.section.service .seccon ul li > div .num {font-weight:700; font-size:1.5em; line-height:1.1; margin-left:0.25em;}
.section.service .seccon ul li > div .num:after {content:'add'; font-family:var(--ic); font-size:0.6em;}
.section.service .seccon ul li > div .unit {font-size:0.8em;}
.section.service .seccon ul li > a {background:var(--col01); flex-direction:row; justify-content:space-between; gap:10px;}
.section.service .seccon ul li > a p {font-size:1.25em;}
.section.service .seccon ul li > a em {display:flex; align-items:center; gap:0.5em;}
.section.service .seccon ul li > a em:after {content:'chevron_right'; font-family:var(--ic);}
.section.service .btns {display:grid; grid-template-columns:1fr; gap:20px;}
.section.service .btns a {border-radius:8px; background:#ffffff24; backdrop-filter:blur(20px); color:#fff; padding:20px; display:flex; flex-direction:column; justify-content:center; transition:0.3s;}
.section.service .btns a:hover {transform:translateY(-10px);}
.section.service .btns a img {margin-left:auto; width:min(20%, 40px);}
.section.service .btns a p {font-size:1.25em; font-weight:600; margin-bottom:10px;}

@media all and (min-width:768px) {
  .section.service .seccon h5 {font-size:1.5em;}
  .section.service .seccon ul li {width:unset; flex:1;}
  .section.service .seccon ul li > a {flex-direction:column; justify-content:center;}
  .section.service .btns {grid-template-columns:repeat(3, 1fr);}
  .section.service .btns a {padding:30px;}
}

@media all and (min-width:1200px) {
  .section.service .pdinner {flex-direction:row; align-items:stretch; gap:100px; height:580px;}
  .section.service .sectit {width:calc(30% - 100px); display:flex; flex-direction:column;}
  .section.service .seccon {width:70%; min-width:0; overflow:hidden; justify-content:space-between;}
  .section.service .seccon h5 {font-size:1.75em; margin:calc(1.475em / 1.75 * 1.45 + 20px) 0 0;}
  .section.service .seccon ul {height:180px;}
  .section.service .seccon ul li > div .num {font-size:3.5em;}
  .section.service .seccon ul li > a {gap:20px;}
  .section.service .seccon ul li > a p {font-size:1.35em;}
  .section.service .btns {height:190px;}
  .section.service .btns a {padding:0 30px;}
  .section.service .btns a p {font-size:1.35em;}
}


/*홍보센터*/
.section.prcenter {background:#F4F5F7;}
.section.prcenter .sectit {margin-bottom:30px;}
.section.prcenter .sectit .t01 {color:var(--col03);}
.section.prcenter .sectit .t02 {color:unset;}
.section.prcenter .seccon {display:grid; gap:30px 80px; grid-template-columns:1fr;}
.section.prcenter .lcon {display:flex; flex-direction:column; gap:30px;}
.section.prcenter .news {display:flex; flex-wrap:wrap; gap:10px;}
.section.prcenter .news a {border-radius:8px; background:#fff; box-shadow:0 0 30px 0 rgba(0,0,0,0.05); padding:20px; display:flex; flex-direction:column; justify-content:center; gap:10px; width:100%; transition:0.3s;}
.section.prcenter .news a:hover {transform:translateY(-10px);}
.section.prcenter .news a .cat {color:var(--col03); font-size:0.9em; font-weight:600;}
.section.prcenter .news a p {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-weight:600; margin-bottom:auto;}
.section.prcenter .news a .date {font-size:0.8em; color:#888; margin-left:auto;}
.section.prcenter .btns {display:flex; gap:10px;}
.section.prcenter .btns a {border-radius:8px; padding:20px; color:#fff; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:20px;}
.section.prcenter .btns a:nth-child(1) {background:var(--col04);}
.section.prcenter .btns a:nth-child(2) {background:var(--col03);}
.section.prcenter .btns a:nth-child(3) {background:var(--col01);}
.section.prcenter .btns a p {font-size:1.1em;}
.section.prcenter .btns a img {width:min(40%, 50px); margin-left:auto; transition:0.3s;}
.section.prcenter .btns a:hover img {transform:scale(1.1);}
.section.prcenter .video {background:url('../img/main/pr_video_bg.jpg') no-repeat center center / cover; padding:20px; color:#fff; display:flex; flex-direction:column; border-radius:8px; height:100%; transition:0.3s;}
.section.prcenter .video:hover {transform:translateY(-10px);}
.section.prcenter .video .t01 {margin-bottom:30px; display:flex; align-items:center; justify-content:space-between;}
.section.prcenter .video .t01:after {content:'chevron_right'; font-family:var(--ic); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%; background:#ffffff24; backdrop-filter:blur(20px);}
.section.prcenter .video .t01 span {font-weight:600; font-size:1.5em;}

@media all and (min-width:480px) {
  .section.prcenter .news a {width:unset; flex:1;}
}

@media all and (min-width:768px) {
  .section.prcenter .news {gap:20px;}
  .section.prcenter .news a {padding:30px;}
  .section.prcenter .btns a {padding:30px;}
  .section.prcenter .btns a p {font-size:1.25em;}
  .section.prcenter .video {padding:30px;}
}

@media all and (min-width:1200px) {
  .section.prcenter .sectit {text-align:center; margin-bottom:60px;}
  .section.prcenter .sectit .t02 {justify-content:center;}
  .section.prcenter .seccon {grid-template-columns:5fr 2fr;}
  .section.prcenter .news {gap:40px;}
  .section.prcenter .news a {padding:40px; height:200px;}
  .section.prcenter .news a p {font-size:1.1em;}
  .section.prcenter .btns {gap:20px;}
  .section.prcenter .btns a {height:160px;}
  .section.prcenter .btns a p {font-size:1.35em;}
  .section.prcenter .video {padding:60px 40px;}
  .section.prcenter .video .t01 {margin-bottom:auto;}
  .section.prcenter .video .t01 span {font-size:1.75em;}
}


/*주요고객사*/
.section.info .ban {padding:40px 0;}
.section.info .ban .pdinner {display:flex; flex-direction:column; gap:20px;}
.section.info .ban .tit {display:flex; align-items:center; justify-content:space-between;}
.section.info .ban .tit p {font-size:1.25em; font-weight:600;}
.section.info .ban .tit .arr {display:flex; align-items:center;}
.section.info .ban .tit .arr span {cursor:pointer; display:flex; align-items:center;}
.section.info .ban .tit .arr span:before {font-family:var(--ic); font-size:1.1em; padding:0 0.5em; font-weight:300;}
.section.info .ban .tit .arr span.prev:before {content:'chevron_left';}
.section.info .ban .tit .arr span.next:before {content:'chevron_right';}
.section.info .ban .tit .arr span.prev:after {content:''; display:inline-block; width: 
1px; height:16px; background:var(--border);}
.section.info .ban #banLi li img {width:min(80%, 180px);}

@media all and (min-width:768px) {
}

@media all and (min-width:1200px) {
  .section.info .ban {padding:0;}
  .section.info .ban .pdinner {flex-direction:row; align-items:center; gap:0; height:160px;}
  .section.info .ban .tit {width:25%; justify-content:flex-start; gap:1em;}
  .section.info .ban .tit p {font-size:1.5em;}
  .section.info .ban .tit .arr span:before {font-size:1.25em;}
  .section.info .ban .ban_wrap {width:75%;}
}


/*footer*/
#footer {background:#373A3E; color:#fff; padding:40px 0;}
#footer .pdinner {display:flex; flex-direction:column; align-items:flex-start; gap:30px 60px;}
#footer .logo {width:min(30%, 210px);}
#footer .info {display:flex; flex-direction:column; gap:20px;}
#footer ul {display:flex; align-items:center; gap:0 1em;}
#footer ul li a {color:#fff; font-weight:600;}
#footer dl {display:flex; flex-wrap:wrap; gap:0 1em;}
#footer dl dd:nth-of-type(1) {width:100%;}
#footer dl dd b {font-weight:600; margin-right:0.5em;}
#footer .copy {font-size:0.9em; color:#ffffff96; margin-top:20px;}
#pageup {position:fixed; z-index:999; right:max(20px, calc(50% - 700px)); bottom:40px; width:60px; height:60px; background:var(--col01); display:none; cursor:pointer; border-radius:8px;}
#pageup:after {font-family:var(--ic); content:'keyboard_arrow_up'; color:#fff; display:flex; width:100%; height:100%; align-items:center; justify-content:center; font-size:1.25em; font-weight:300;}

@media all and (min-width:768px) {
	#footer {padding:60px 0;}
  #footer .pdinner {flex-direction:row;}
  #footer .info {gap:40px;}
  #pageup {bottom:60px;}
}


/* Common Layout CSS */
.wrap {max-width:2000px; min-width:320px; width:100%; margin:0 auto; position:relative;}
.inner {max-width:1440px; width:100%; position:relative; margin:0 auto;}
.pdinner {max-width:1440px; width:100%; padding:0 20px; position:relative; margin:0 auto;}
.mEnter {display:block;}
.pEnter {display:inline-block;}
.mb {margin-bottom:30px !important}
.bmb {margin-bottom:60px !important}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.pb {padding-bottom:30px !important}
.bpb {padding-bottom:60px !important}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
.fwb {font-weight:600}
.fss {font-size:0.8em}
.fsl {font-size:1.1em}

@media all and (min-width:768px) {
	.mb {margin-bottom:40px !important;}
	.bmb {margin-bottom:80px !important;}
	.pb {padding-bottom:40px !important}
	.bpb {padding-bottom:80px !important}
	.mo_only {display:none;}
	.move_scroll {max-width:100%;}
}

@media all and (min-width:1200px) {
  .mEnter {display:inline-block;}
  .pEnter {display:block;}
  .mb {margin-bottom:50px !important;}
  .bmb {margin-bottom:100px !important;}
  .pb {padding-bottom:50px !important;}
  .bpb {padding-bottom:100px !important;}
}

@media all and (min-width:1600px) {
  body, html {font-size:18px;}
}


.dot_li li {text-align:left; line-height:1.6em; padding-left:0.7em; position:relative;}
.dot_li li:before {content:''; display:inline-block; width:0.2em; height:0.2em; border-radius:50%; background:#aaa; position:absolute; left:0; top:0.7em;}
.img_li {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.img_li li {text-align:center;}
.img_li li img {border:1px solid var(--border); border-radius:8px;}
.img_li li p {margin-top:10px;}
.tit_dot {font-size:1.4em; padding-left:30px; background:url('../img/tit_dot.png') no-repeat left center; font-weight:700;}

@media all and (min-width:768px) {
	.img_li {grid-template-columns:repeat(3, 1fr); gap:40px 20px;}
}

@media all and (min-width:1200px) {
	.img_li {grid-template-columns:repeat(4, 1fr); gap:40px;}
}


/* animation */
@keyframes dot {
		0% {transform:scaleX(0); transform-origin:0 0;}
    100% {transform:scaleX(1); transform-origin:0 0;}
}
@keyframes visbg {
  from {transform:scale(105%);}
  to {transform:scale(100%);}
}
@keyframes anim01 {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1;}
}
@keyframes scroll {
	0% {transform:scaleX(0);}
	100% {transform:scaleX(100%);}
}


/* 서브레이아웃 */
#sub_vis {position:relative; padding:100px 0 60px; background:#eee no-repeat center center / cover; color:#fff; text-align:center;}
#sub_vis h3 {font-size:1.1em; font-weight:600;}
#sub_vis h2 {font-size:1.75em; font-weight:700;}

@media all and (min-width:768px) {
	#sub_vis {padding:120px 0 80px;}
	#sub_vis h2 {font-size:2em;}
}

@media all and (min-width:1200px) {
	#sub_vis {padding:160px 0 80px;}
  #sub_vis h3 {font-size:1.25em;}
  #sub_vis h2 {font-size:2.5em;}
}


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:60px 0 80px; overflow:hidden;}
.subwrap {margin:0 auto;}

@media all and (min-width:768px) {
}

@media all and (min-width:1200px) {
  #sub {min-height:650px; padding:80px 0 100px;}
}


/*서브메뉴*/
#submenu {overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; text-align:center; border-bottom:1px solid var(--border);}
#submenu::-webkit-scrollbar {display:none;}
#submenu .list {display:inline-flex; align-items:center; gap:1em; padding:0 20px;}
#submenu .list a {display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:10px 0; font-weight:600;}
#submenu .list a.on {border-bottom:3px solid var(--col01);}
#submenu .list a:not(.on) {color:#999;}

@media screen and (min-width:960px) {
  #submenu .list {gap:2em;}
  #submenu .list a {padding:15px 0;}
}

@media screen and (min-width:1200px) {
}