@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

#sub #wrapper{padding-top:100px;position:relative;}
#sub #header{position: fixed;}
/* header */
#header {position:absolute; top:0; left:0; right:0; z-index:90;transition:.3s;}
#header:after{content:'';width:100%;height:1px;background-color: #ddd;position: absolute;left:0;top:100px;opacity:0;transition:.3s;}
#header .contain{height:100px;max-width:1780px;}
#header .sitelogo {position:absolute; top:34px; left:30px; z-index:2}
#header .sitelogo a {display:block;text-align:left;}
#header .sitelogo img{width:217px;height:31px;}
#header .sitelogo a img.on{display:none;}

#gnb>ul {display:flex; justify-content:center;gap:120px;} 
#gnb>ul>li {position:relative;}
#gnb>ul>li>a {position:relative; display: inline-block;line-height:100px; color:#fff; font-size:18px; font-weight:700;transition:.3s;}
#gnb>ul>li>a:after{content:'';width:16px;height:3px;background-color:var(--pri);position: absolute;left:50%;bottom:23px;transform:translateX(-50%);opacity:0;transition:.3s;}
/* #gnb>ul>li:first-child .submenu {left:0; transform:none;}
#gnb>ul>li:last-child .submenu {left:auto; right:0; transform:none;} */
#gnb .submenu {display:none; position:absolute; left:50%;z-index:1;transform:translateX(-50%);}
#gnb .submenu>ul {display:flex;gap:var(--size50)}
#gnb .submenu>ul>li>a {display:block; padding:20px 0; color:#878787; font-size:16px; line-height:1.33em; white-space:nowrap;letter-spacing:-.04em;}
#gnb .submenu>ul>li>a:hover{color:var(--snd);font-weight:700;}
.submenu-bg {display:none; position:absolute; width:100%; left:0; background:#fff;}

#gnb>ul>li:hover>a{color:var(--pri) !important;}
#gnb>ul>li:hover>a:after{opacity:1;}

.lang{position: absolute;right:90px;top:50%;transform:translateY(-50%);}
.lang ul{display: flex;gap:16px;}
.lang ul li a{display: flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:50%;background-color: #878787;color: #fff;line-height:1.2em;font-size:var(--fz15);font-weight:500;}
.lang ul li.on a{background-color: var(--pri);}

#header:hover{background-color: #fff;}
#header:hover:after{opacity:1;}
#header:hover .sitelogo a img.on{display:block;}
#header:hover .sitelogo a img.off{display:none;}
#header:hover #gnb>ul>li>a{color:var(--dark);}

#sub #header{background-color: #fff;}
#sub #header:after{opacity:1;}
#sub #header .sitelogo a img.on{display:block;}
#sub #header .sitelogo a img.off{display:none;}
#sub #header #gnb>ul>li>a{color:var(--dark);}

#sub #header .btn-m-menu span,
#sub #header .btn-m-menu span:before,
#sub #header .btn-m-menu span:after{background-color:var(--dark);}

#sub #header.header-up{transform:translateY(-100%);}

.fp-viewing-TECHNOLOGY #header,
.fp-viewing-RESOURCES #header,
.fp-viewing-NEWS #header,
.fp-viewing-Footered #header{background-color: #fff;}
.fp-viewing-TECHNOLOGY #header:after,
.fp-viewing-RESOURCES #header:after,
.fp-viewing-NEWS #header:after,
.fp-viewing-Footered #header:after{opacity:1;}
.fp-viewing-TECHNOLOGY #header .sitelogo a img.on,
.fp-viewing-RESOURCES #header .sitelogo a img.on,
.fp-viewing-NEWS #header .sitelogo a img.on,
.fp-viewing-Footered #header .sitelogo a img.on{display:block;}
.fp-viewing-TECHNOLOGY #header .sitelogo a img.off,
.fp-viewing-RESOURCES #header .sitelogo a img.off,
.fp-viewing-NEWS #header .sitelogo a img.off,
.fp-viewing-Footered #header .sitelogo a img.off{display:none;}
.fp-viewing-TECHNOLOGY #header #gnb>ul>li>a,
.fp-viewing-RESOURCES #header #gnb>ul>li>a,
.fp-viewing-NEWS #header #gnb>ul>li>a,
.fp-viewing-Footered #header #gnb>ul>li>a{color:var(--dark);}

#header:hover .btn-m-menu span,
#header:hover .btn-m-menu span:before,
#header:hover .btn-m-menu span:after{background-color:var(--dark);}

.fp-viewing-TECHNOLOGY #header .btn-m-menu span,
.fp-viewing-RESOURCES #header .btn-m-menu span,
.fp-viewing-NEWS #header .btn-m-menu span,
.fp-viewing-Footered #header .btn-m-menu span,
.fp-viewing-TECHNOLOGY #header .btn-m-menu span:before,
.fp-viewing-RESOURCES #header .btn-m-menu span:before,
.fp-viewing-NEWS #header .btn-m-menu span:before,
.fp-viewing-Footered #header .btn-m-menu span:before,
.fp-viewing-TECHNOLOGY #header .btn-m-menu span:after,
.fp-viewing-RESOURCES #header .btn-m-menu span:after,
.fp-viewing-NEWS #header .btn-m-menu span:after,
.fp-viewing-Footered #header .btn-m-menu span:after{background-color:var(--dark);}


.contain {position:relative; max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;width:100%;}
#contArea {max-width:1260px; padding-left:30px; padding-right:30px; margin:0 auto;width:100%;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

/* main */ 
.main-visual {position:relative; overflow:hidden;}
.main-visual .item {position:relative; height:100vh;}
.main-visual .bg {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; -ms-transform:scale(1.1); -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-transition:all 0.9s; -ms-transition:all 0.9s; transition:all 0.9s; -webkit-transition-timing-function:ease; transition-timing-function:ease;}
.main-visual .active .bg{-ms-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); -webkit-transition:all 10s; -ms-transition:all 10s; transition:all 10s; -webkit-transition-timing-function:ease; transition-timing-function:ease;}
.main-visual .contain{max-width:1460px;}
.main-visual .tt-wrap{position: absolute;left:50%;top:32.6530%;transform:translateX(-50%);z-index:1;color: #fff;pointer-events: none;}
.main-visual .tt-wrap .tit{font-size:var(--fz54);font-weight:800;line-height:1.19em;}
.main-visual .tt-wrap .tt{margin-top:var(--size20);font-size:var(--fz24);font-weight:500;line-height:1.6em;}
.main-visual .btm-wrap{position: absolute;left:50%;bottom:var(--size80);transform:translateX(-50%);z-index:1;pointer-events: none;}
.main-visual .scroll{position:relative;display:inline-block;pointer-events: auto;border-radius:100%;}
.main-visual .scroll .border{animation: rotate-ani 30s linear infinite;}
.main-visual .scroll .arr{position: absolute;left:0;top:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;transition:.3s;}
.main-visual .scroll:hover .arr{animation: move_up_down 1.5s linear infinite;}

@keyframes rotate-ani{
	100% {
    	transform: rotate(360deg);
    }
}

@keyframes move_up_down { 
    0%,100%{ 
      transform:translateY(-5px); 
    } 
    50% { 
      transform:translateY(5px); 
    } 
}

/* 풀페이지 */
.sec1 .fp-tableCell,
.sec2 .fp-tableCell,
.sec3 .fp-tableCell,
.sec4 .fp-tableCell,
.sec5 .fp-tableCell,
.sec6 .fp-tableCell{padding-top:100px;}

.section .contain{max-width:1460px;}
.main-tech{display: flex;align-items:center;padding:0 80px;}
.main-tech .img{margin-right:var(--size80);border-radius:var(--bd50) var(--bd50) 0 var(--bd50);overflow:hidden;border:1px solid #ddd;}
.main-tech .tt-wrap{min-width:0;width:1%;flex:1 1 auto;}
.sec-tit .eng{margin-bottom:var(--size25);line-height:1.4em;color:var(--pri);font-weight:700;}
.sec-tit .tit{font-size:var(--fz46);font-weight:700;color:var(--dark);line-height:1.2em;}
.sec-tit .tt18{margin-top:var(--size30);}

[lang=en] .sec1 .sec-tit .tit{font-size:var(--fz32);}
.tt18{font-size:var(--fz18);line-height:1.78em;letter-spacing:-.04em;}
.tt18 strong{font-weight:600;}
.btn-more{margin-top:var(--size60);display:inline-flex;align-items:center;height:64px;border-radius:64px;padding:0 var(--size40);border:1px solid #878787;justify-content:center;transition:.3s;}
.btn-more span{font-size:var(--fz18);line-height:1.2em;color:#878787;position:relative;display:block;padding-right:28px;transition:.3s;}
.btn-more span:after{content: '';width:14px;height:14px;background:url('/images/main/btn-arr.png')no-repeat 50% 50%/contain;position: absolute;right:0;top:50%;margin-top:-7px;transition:.3s;}
.btn-more:hover{background-color:var(--pri);border-color:var(--pri);}
.btn-more:hover span{color: #fff;}
.btn-more:hover span:after{background-image: url('/images/main/btn-arr-on.png');}

.sec2{background:url('/images/main/sec2-bg.jpg') no-repeat 100% 100%/cover;}
.sec-tit.center{text-align:center;margin-bottom:var(--size70);}
.main-resource{position:relative;}
.main-resource .slick-list{margin:-15px;}
.main-resource .item{padding:15px;}
.md-box{display: block;border-radius:var(--bd50) var(--bd50) 0 var(--bd50);overflow:hidden;box-shadow:5px 5px 13px rgba(0,0,0,.1);}
.md-box .pic {position:relative; height:0; padding-bottom:58.168%; overflow:hidden;}
.md-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.md-box .tt-wrap{background-color: #fff;padding:var(--size35) var(--size30);line-height:1.3em;position:relative;}
.md-box .tt-wrap .tit{font-size:var(--fz24);font-weight:600;color:var(--dark);line-height:1.3em;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width:100%;}
.md-box .tt-wrap .tt{margin-top:var(--size10);line-height:1.5em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.md-box .tt-wrap .btn{position: absolute;right:var(--size30);top:-22px;display: inline-flex;align-items:center;padding:0 20px;height:44px;border-radius:22px;line-height:1.2em;color: #fff;background-color:var(--pri);opacity:0;transition:.3s;}
.md-box:hover .tt-wrap .btn{opacity:1;}

.main-resource .slick-arrow{display: block;width:50px;height:50px;position: absolute;top:50%;transform:translateY(-50%);border-radius:50%;background-color: #fff;background-repeat:no-repeat;background-size:12px;background-position:50% 50%;border:1px solid #ddd;font-size:0;transition:.3s;}
.main-resource .slick-prev{left:-100px;background-image: url('/images/main/sld-prev.png');}
.main-resource .slick-next{right:-100px;background-image: url('/images/main/sld-next.png');}
.main-resource .slick-arrow:hover{background-color:var(--pri);border-color:var(--pri);}
.main-resource .slick-prev:hover{background-image: url('/images/main/sld-prev-on.png');}
.main-resource .slick-next:hover{background-image: url('/images/main/sld-next-on.png');}

.sec3 .contain{display: flex;}
.sec3 .sec-tit{display: flex;flex-direction:column;justify-content:space-between;margin-right:clamp(2.5rem, 0.1974rem + 9.2105vw, 11.25rem);;}
.sec3 .sec-tit .more{display: inline-block;position:relative;color: #878787;font-weight:500;line-height:1.2em;padding-right:20px;transition:.3s;margin-top:30px;}
.sec3 .sec-tit .more:after{content: '';width:6px;height:9px;position: absolute;right:0;top:50%;margin-top:-4.5px;background: url('/images/main/more-arr.png')no-repeat 100% 50%/contain;transition:.3s;}
.sec3 .sec-tit .more:hover{color:var(--pri);}
.sec3 .sec-tit .more:hover:after{background-image: url('/images/main/more-arr-on.png');}
.sec3 .sec-tit .logo{margin-top:20px;}

.main-news{min-width:0;width:1%;flex:1 1 auto;}
.main-news ul li{border-bottom: 1px solid #ddd;padding:var(--size35) 0;}
.main-news ul li:first-child{padding-top:0;}
.main-news ul li a{display: flex;align-items:center;}
.main-news ul li .date-wrap{text-align:center;margin-right:var(--size45);letter-spacing:-.04em}
.main-news ul li .date-wrap .day{font-size:var(--fz36);font-weight:700;line-height:1em;}
.main-news ul li .date-wrap .date{margin-top:5px;font-size:12px;font-weight:500;line-height:1.2em;}
.main-news ul li .tt-wrap{min-width:0;width:1%;flex:1 1 auto;line-height:1.3em;margin-right:var(--size60);padding-top:var(--size10);}
.main-news ul li .tt-wrap .tit{font-size:var(--fz20);font-weight: 500;color:var(--dark);line-height:1.3em;transition:.3s;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;}
.main-news ul li .tt-wrap .tt{margin-top:5px;line-height:1.3em;transition:.3s;display: inline-block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;}
.main-news ul li .btn{display: flex;justify-content:center;align-items:center;width:50px;height:50px;background-color: #f3f3f3;border-radius:100%;transition:.3s;font-size:var(--fz18);font-weight:700;color: #878787;}
.main-news ul li a:hover .tt-wrap .tit{color:var(--pri);}
.main-news ul li a:hover .btn{background-color:var(--pri);color: #fff;}


/* sub page */
.sub-visual {position:relative; height:460px; z-index:10;overflow:hidden;}
.sub-visual .tit{position: absolute;left:0;top:50%;width:100%;transform:translateY(-50%);width:100%;font-size:var(--fz48);font-weight:700;line-height:1.2em;color: #fff;z-index:1;text-align:center;}
.sub-visual .background {
	position:absolute; 
	top:0; 
	left:0;
	width:100%; height:100%;	
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	transform:scale(1.09);
    -ms-transform:scale(1.09); /* IE 9 */
    -moz-transform:scale(1.09); /* Firefox */
    -webkit-transform:scale(1.09); /* Safari and Chrome */
    -o-transform:scale(1.09); /* Opera */
	transition: all 2s ease-out 0s;
	transition-delay: 0.1s;
	z-index:0;
}
.sub-visual.load .background {
	transform:scale(1);
    -ms-transform:scale(1); /* IE 9 */
    -moz-transform:scale(1); /* Firefox */
    -webkit-transform:scale(1); /* Safari and Chrome */
    -o-transform:scale(1); /* Opera */
}

.lnb{background-color: #fff;position:relative;}
.lnb:after{content: '';width:100%;height:1px;background-color: #ddd;position: absolute;left:0;bottom:0;}
.lnb .inner{max-width:1200px;width:100%;margin:0 auto;}
.lnb .inner ul{display: flex;}
.lnb .inner ul li{width:auto;flex:1;}
.lnb .inner ul li a{display: flex;justify-content:center;align-items:center;text-align:center;height:60px;border-right: 1px solid #ddd;font-size:var(--fz20);font-weight:500;color:var(--dark);line-height:1.3em;text-align:center;}
.lnb .inner ul li:first-child{border-left: 1px solid #ddd;}
.lnb .inner ul li.active a{color:#fff;background-color:var(--pri);border-color:var(--pri);}

.real-cont {padding:var(--size100) 0 var(--size120);}
.real-cont.none{padding-bottom:0;}

/* footer */
#footer {background-color: #121212;padding:var(--size60) 0;font-size:var(--fz15);line-height:1.4em;color: #878787;}
#footer .contain{max-width:1780px;}
#footer .foot-menu{padding-bottom:var(--size25);margin-bottom:var(--size30);position:relative;}
#footer .foot-menu:after{content:'';max-width:calc(1780px - 60px);width:100%;height:1px;background-color: #4b4b4b;position: absolute;left:50%;bottom:0;transform: translateX(-50%);}
#footer .foot-menu ul{display: flex;gap:30px;}
#footer .foot-menu ul>li>a{font-size:12px;color: #fff;line-height:1.2em;display: block;}
#footer .foot-info .logo{margin-bottom:var(--size45);}
#footer .foot-info .logo img{width:160px;height:23px;}
#footer .foot-info address {font-style:normal;display: flex;flex-wrap:wrap;gap:10px 34px;max-width:580px;}
#footer .foot-info address p:first-child{width:100%;}
#footer .foot-info address p strong{font-weight:700;color: #fff;}
#footer .foot-info .copy{margin-top:15px;font-size:12px;line-height:1.3em;}
#footer .foot-info .copy .bar{margin:0 12px;}
#footer .foot-info .copy a{display: inline-block;}

.scroll-top{position:absolute;right:30px;bottom:30px;width:46px;height:46px;background-color:var(--pri);color: #fff;font-size:17px;font-weight:700;z-index:100;display: flex;justify-content:center;align-items:center;border-radius:100%;}

.fp-viewing-HOME .scroll-top{display: none;}


/* for mobile */
.only-mobile {display:none;}
.btn-m-menu {display:block; position:absolute; top:50%; margin-top:-11px; right:30px; width:30px; height:22px;  text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out;}
.btn-m-menu span {position:absolute; right:0; top:50%; margin-top:-1px; height:2px; width:23px;background:#fff;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; right:0; width:30px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.btn-m-menu span:before {top:-10px; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-10px; transition-property:bottom, transform;}
.mobile-navigation {position:fixed; top:0; right:0; width:100%; height:100vh; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:url('/images/common/menu-bg.jpg') no-repeat 100% 100%/cover; z-index:202;}
.mobile-navigation .head{position:relative;}
.mobile-navigation .head .contain{display: flex;align-items:center;justify-content:space-between;height:100px;max-width:1780px;}
.mobile-navigation .head .logo img{width:217px;height:31px;}
.mobile-navigation .head .close{display: block;width:23px;height:23px;background:url('/images/common/menu-close.png') no-repeat 50% 50%/contain;font-size:0;}
.mobile-navigation .content{height:calc(100vh - 100px);overflow:hidden;display: flex;align-items:center;}
.mobile-navigation .content .contain{max-width:1460px;}
.mobile-navigation .nav-menu{position:relative;padding:0 20px;}
.mobile-navigation .nav-menu:before{content:'';position: absolute;left:50%;top:60px;width:100vw;height:1px;background-color:#ddd;z-index: -1;transform: translateX(-50%);}
.mobile-navigation .nav-menu>ul{display: flex;justify-content:space-between;gap:20px;}
.mobile-navigation .nav-menu>ul>li>a{font-size:30px;font-weight:700;color:var(--dark);line-height:1.2em;height:60px;position:relative;display: inline-block;}
.mobile-navigation .nav-menu>ul>li>a:after{content:'';width:8px;height:8px;background-color:var(--pri);position: absolute;left:0;bottom:-4px;transform:translateX(-50%);opacity:0;transition:.1s;}
.mobile-navigation .nav-menu>ul>li:hover>a:after{opacity:1;}
.mobile-navigation .nav-menu>ul>li .submenu{margin-top:45px;}
.mobile-navigation .nav-menu>ul>li .submenu>ul>li{margin-bottom:15px;}
.mobile-navigation .nav-menu>ul>li .submenu>ul>li:last-child{margin-bottom:0;}
.mobile-navigation .nav-menu>ul>li .submenu>ul>li>a{display: inline-block;position:relative;font-size:var(--fz18);color: #878787;line-height:1.3em;font-weight:600;}
.mobile-navigation .nav-menu>ul>li .submenu>ul>li>a:after{content:'';width:0;left:50%;height:1px;background-color:var(--pri);bottom:0;position: absolute;opacity:0;transition:.3s;}
.mobile-navigation .nav-menu>ul>li .submenu>ul>li>a:hover{font-weight:600;color:var(--pri);}
.mobile-navigation .nav-menu>ul>li .submenu>ul>li>a:hover:after{opacity:1;width:100%;left:0;}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:201;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0); }
html.menu-opened .mobile-overlay {display:block;}