@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}

/* header */
#header {position:fixed;left:0;top:0;right:0;z-index:90;transition:.3s;}
#header:after{content:'';position: absolute;left:0;top:100px;width:100%;height:1px;background-color:#ddd;z-index:1;transition:.3s;opacity:0;}
#header .contain{height:100px;max-width:1500px;}
#header .sitelogo {position:absolute; top:27px; left:30px; z-index:2}
#header .sitelogo a {display:block;}
#header .sitelogo a img.on{display: none;}

#gnb>ul {display:flex; justify-content:center;margin:0 -105px;} 
#gnb>ul>li {position:relative; text-align:center; padding:0 105px;}
#gnb>ul>li>a {position:relative; display:inline-block; color:#fff; font-size:18px; line-height:100px; font-weight:500;}

#gnb .submenu {position:absolute; top:100px; left:0; width:100%; height:0; overflow:hidden; z-index:20;}
#gnb .submenu ul {display:block; padding:35px 0;}
#gnb .submenu ul li {text-align:center;margin-bottom:var(--size20);}
#gnb .submenu ul li:last-child {margin-bottom:0;}
#gnb .submenu ul li a {display:inline-block;font-size:16px; line-height:1.4em; position:relative;}
#gnb .submenu ul li a:hover {color:var(--pri);font-weight: 700;}

.submenu-bg {background-color:#fff;}

#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);}
#header:hover .btn-m-menu{background-image:url('/images/common/menu-on.png');}

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

.header-fixed #header{background-color:#fff;}
.header-fixed #header:after{opacity:1;}
.header-fixed #header .sitelogo a img.on{display:block;}
.header-fixed #header .sitelogo a img.off{display:none;}
.header-fixed #header #gnb>ul>li>a{color:var(--dark);}
.header-fixed #header .btn-m-menu{background-image:url('/images/common/menu-on.png');}


.contain {position:relative; max-width:1500px; padding-left:30px; padding-right:30px; margin:0 auto;width:100%;}
#contArea {max-width:1500px; 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:1500px;}
.main-visual .tt-wrap{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;color: #fff;pointer-events: none;}
.main-visual .tt-wrap .tit{font-size:var(--fz64);font-weight:600;line-height:1.28em;}
.main-visual .tt-wrap .tt{margin-top:var(--size10);font-size:var(--fz24);line-height:1.5em;} 
.main-visual .btm-wrap{position: absolute;left:50%;bottom:var(--size90);transform:translateX(-50%);z-index:1;pointer-events: none;display: flex;justify-content:space-between;align-items:flex-end;;}
.main-visual .btm-wrap .scroll{display: flex;align-items:flex-end;gap:2px;}
.main-visual .btm-wrap .scroll .ic{animation:move_up_down 2s linear infinite;}
.main-visual .btm-wrap .scroll p{line-height:1.2em;color: #fff;padding-bottom:15px;}
.main-visual .btm-wrap .controls{display: flex;align-items:center;gap:var(--size40);}
.main-visual .btm-wrap .controls .paging li{color:rgba(255,255,255,.5); line-height:1.2em; display:none;}
.main-visual .btm-wrap .controls .paging li.slick-active {display: block;}
.main-visual .btm-wrap .controls .paging li .wrap{display: flex;align-items:center;}
.main-visual .btm-wrap .controls .paging li .current{color: #fff;font-size:var(--fz20);font-weight:800;}
.main-visual .btm-wrap .controls .paging li .bar{margin:0 10px;}
.main-visual .btm-wrap .controls .arrs{display: flex;gap:12px;}
.main-visual .btm-wrap .controls .arrs .slick-arrow{display: block;width:70px;height:70px;background-color:transparent;border-radius: 50%;background-repeat:no-repeat;background-position:50% 50%;background-size:17px;transition:.3s;border: 1px solid #fff;font-size:0;pointer-events:auto;}
.main-visual .btm-wrap .controls .arrs .slick-prev{background-image: url('/images/main/vis-prev.png');}
.main-visual .btm-wrap .controls .arrs .slick-next{background-image: url('/images/main/vis-next.png');}
.main-visual .btm-wrap .controls .arrs .slick-arrow:hover{background-color:rgba(255,255,255,.4);border-color: rgba(255,255,255,.4);}

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

.section .contain{max-width:1500px;}

.sec1{background:url('/images/main/sec1-bg.jpg') no-repeat center center / cover;height:100vh;display: flex;justify-content:center;align-items:center;}
.sec1 .tt-wrap{text-align:center;padding-top:var(--size50);}
.sec1 .tt-wrap .tit{font-size:var(--fz42);font-family:var(--mont);line-height:1.1em;color:var(--dark);margin-bottom:var(--size45);}
.tt18{font-size:var(--fz18);line-height:1.44em;}
.doc-btn{display:inline-flex;justify-content:center;align-items:center;margin-top:var(--size70);height:58px;padding:0 30px;font-size:var(--fz18);line-height:1.2em;color: #fff;font-weight:700;background-color:var(--pri);border-radius:30px;}

.sec2{padding:var(--size140) 0;background-color: #f5f5f5;text-align:center;}
.sec2 .sec-tit{text-align:center;margin-bottom:var(--size70);}
.main-product{position:relative;padding:0 70px;}
.main-product .slick-list{margin:-34px -17px;}
.main-product .item{padding:34px 17px;}
.main-product .item .box{display: block;box-shadow: 6px 10px 20px 0 #D5D5D5;border-radius:var(--bd24);overflow:hidden;position:relative;background-color: #fff;}
.main-product .item .box .img{padding:10px;}
.main-product .item .box .pic{position:relative; padding-bottom:100%; overflow:hidden;}
.main-product .item .box .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.main-product .item .box .tit{display: flex;justify-content:center;align-items:center;min-height:60px;padding:10px 20px;background-color: #3F3F3F;color: #fff;font-size:var(--fz24);font-weight:600;line-height:1.3em;letter-spacing:-.04em;transition:.3s;}
.main-product .item .box .hover{position: absolute;left:0;top:0;width:100%;height:100%;background-color: rgba(0, 152, 245, 0.60);z-index:1;display: flex;justify-content:center;align-items:center;font-size:var(--fz32);font-weight:700;line-height:1.3em;color: #fff;transition:.3s;opacity:0;}
.main-product .item .box:hover .tit{opacity:0;}
.main-product .item .box:hover .hover{opacity:1;}
.main-product .slick-arrow{display: block;width:13px;height:24px;background-color:transparent;border:none;font-size:0;background-size:contain;position:absolute;top:50%;transform:translateY(-50%);z-index:1;}
.main-product .slick-prev{left:-70px;background-image: url('/images/main/sld-prev2.png');background-position:0 50%;}
.main-product .slick-next{right:-70px;background-image: url('/images/main/sld-next2.png');background-position:100% 50%;}

.sec3{background-color: #F2F7F9;padding:var(--size200) 0;overflow:hidden;}
.sec3 .contain{display: flex;align-items:center;}
.sec-tit .eng{margin-bottom:var(--size10);color:var(--pri);line-height:1.2em;font-family:var(--mont);font-weight:600;}
.sec-tit .tit{font-size:var(--fz40);line-height:1.2em;color:var(--dark);font-weight:700;}
.sec-tit .tt18{margin-top:var(--size35);}
.sec3 .sec-tit{padding-right:var(--size150);position:relative;z-index:1;}
.sec3 .sec-tit:after{content:'';width:100vw;height:calc(100% + 300px);background-color: #F2F7F9;position: absolute;right:0;top:50%;transform:translateY(-50%);z-index:-1;}
.sec3 .controls{display: flex;align-items:center;gap:var(--size35);margin-top:var(--size130);}
.sec3 .progress {display: block;min-width:0;width:1%;flex:1 1 auto;height:3px;overflow: hidden;background-color:#E6E6E6;background-image: linear-gradient(to right, var(--pri), var(--pri));background-repeat: no-repeat;background-size: 0 100%;transition: background-size .4s ease-in-out;z-index:1;}
.sec3 .progress .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: var(--pri);border: 0;}
.sec3 .arrs{display: flex;gap:var(--size35);}
.sec3 .arrs .slick-arrow{width:13px;height:24px;background-color:transparent;border:none;font-size:0;background-size:contain;display: block;background-repeat:no-repeat;}
.sec3 .arrs .slick-prev{background-image: url('/images/main/sld-prev.png');background-position:0 50%;}
.sec3 .arrs .slick-next{background-image: url('/images/main/sld-next.png');background-position:100% 50%;}
.main-busi{min-width:0;width:1%;flex:1 1 auto;position:relative;}
.main-busi .slick-list{margin:-34px -17px;overflow:visible;}
.main-busi .item{padding:34px 17px;}
.main-busi .item .box{display: block;border-radius:var(--bd24);box-shadow: 6px 10px 20px 0 #C2D3DB;overflow:hidden;min-height:490px;background-color: #fff;}
.main-busi .item .box .pic img{width:100%;}
.main-busi .item .box .tt-wrap{background-color: #fff;padding:var(--size40);}
.main-busi .item .box .tt-wrap .tit{font-size:var(--fz22);color:var(--dark);line-height:1.3em;letter-spacing:-0.04em;}
.main-busi .item .box .tt-wrap .tt{margin-top:var(--size15);line-height:1.44em;}

[lang=en] .main-busi .item .box{min-height:564px;}
[lang=en] .main-busi .item .box .tt-wrap .tit{font-size:var(--fz18);}
[lang=en] .main-busi .item .box .tt-wrap .tt{margin-top:var(--size10);font-size:var(--fz15);}

.sec4{background:url('/images/main/sec4-bg.jpg') no-repeat center center / cover;padding:var(--size140) 0;}
.sec4 .sec-tit{text-align:center;margin-bottom:var(--size120);}
.sec4 .sec-tit .tit,
.sec4 .sec-tit .tt18{color: #fff;}
.sec4 .con{display: flex;align-items:center;max-width:834px;margin:0 auto;width:100%;}
.sec4 .con ul{display: flex;margin:0 -17px;width:calc(100% + 34px);}
.sec4 .con ul li{padding:0 17px;width:50%;}
.sec4 .con ul li .box{background-color: #fff;border-radius:var(--bd24);text-align:center;height:100%;padding:var(--size80) 20px;display: block;}
.sec4 .con ul li .box .ic{margin-bottom:var(--size30);}
.sec4 .con ul li .box .tit{font-size:var(--fz24);font-weight:500;line-height:1.2em;color:rgba(69,69,69,.7);}
.sec4 .con ul li .box .tt{margin-top:var(--size15);font-size:var(--fz26);font-weight:700;line-height:1.2em;}

/* sub page */
.sub-visual {position:relative; height:540px; z-index:10;overflow:hidden;}
.sub-visual .tit-wrap{position: absolute;left:0;top:50%;width:100%;transform:translateY(-50%);z-index:1;color: #fff;text-align:center;}
.sub-visual .tit-wrap .tit{font-size:var(--fz60);line-height:1.2em;font-weight:700;}
.sub-visual .tit-wrap .eng{margin-top:var(--size15);font-size:var(--fz18);line-height:1.2em;}
.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 */
}

/* path 메뉴 */
.path-wrap {position:relative; z-index:50;max-width:1440px; margin:-70px auto 0;width:100%;background-color: #fff;}
.path-wrap:before{content:'';width:100%;height:1px;background-color: #ccc;position:absolute;left:0;bottom:0;}
.path-wrap .inner {display:flex;}
.path-wrap .home a {position:relative;display:block; width:70px; height:70px; background:var(--pri) url("/images/common/home.png") 50% 50% no-repeat; background-size:24px; text-indent:-999em; overflow:hidden;}
.path-wrap .part {position:relative; min-width:310px; z-index:50;}
.path-wrap .part:after{content:'';width:1px;height:100%;background-color: #ccc;position: absolute;right:0;top:50%;transform:translateY(-50%);}
.path-wrap .part > a {display:flex; align-items:center; position:relative; height:70px; color:#333; font-size:18px; font-weight:500; line-height:1.3em; padding:0 70px 0 35px;z-index:51;}
.path-wrap .part > a:after {content:""; position:absolute; top:50%; right:35px; margin-top:-4px; width:16px; height:9px; background:url("/images/common/lnb-arr.png") 50% 50% no-repeat;}
.path-wrap .part ul {display:none; position:absolute; left:-1px; right:-1px;top:70px;background:#fff; border:1px solid #ddd; z-index:50;border-top:none;}
.path-wrap .part ul li {border-bottom: 1px solid #ccc;}
.path-wrap .part ul li:last-child {border-bottom:none;}
.path-wrap .part ul li a{position:relative;display:flex;align-items:center;height:70px;padding:0 35px;font-size:var(--fz18);font-weight: 500;color: #333;line-height:1.3em;transition:.3s;}
.path-wrap .part ul li a:hover{color:#fff;background-color:var(--pri);}

@media (max-width: 1230px) {
    .path-wrap{margin-top:0;}
	.path-wrap .home a {width:50px; height:50px; background-size:16px auto;}
	.path-wrap .part > a {font-size:16px; height:50px;padding:0 50px 0 15px;}
	.path-wrap .part > a:after{right:15px;}
    .path-wrap .part ul{top:50px;}
	.path-wrap .part ul li a{padding:0 15px;height:50px;}
}
@media (max-width: 768px) {
    .path-wrap:before{display: none;}
	.path-wrap .home{display:none;}
	.path-wrap .home a {border-left:0;}
	.path-wrap .home a {height:44px; width:44px; background-size:14px auto;}
    .path-wrap .inner{display: block;}
	.path-wrap .part {min-width:100%; width:100%;border-bottom: 1px solid #ddd;}
    .path-wrap .part:after{display: none;}
	.path-wrap .part > a {height:44px; padding:0 25px 0 10px; font-size:14px;}
	.path-wrap .part > a:after {right:10px; height:6px;margin-top:-3px;background-size:contain;}
	.path-wrap .part:last-child:after{display:none;}
	.path-wrap .part:last-child {border-right:0;}
	.path-wrap .part ul {top:44px;border-top: 1px solid #ddd;}
	.path-wrap .part ul li a {font-size:14px;right:0;}
    .path-wrap .part.active{z-index: 51;}
}

.lang{position: absolute;right:110px;top:50%;transform:translateY(-50%);}
.lang ul{display: flex;gap:24px;}
.lang ul li{position:relative;}
.lang ul li:after{content: '';width:1px;height:14px;background-color:rgba(255,255,255,.7);position: absolute;right:-12px;top:50%;transform:translateY(-50%);transition:.3s;}
.lang ul li:last-child:after{display: none;}
.lang ul li a{display: block;font-size:15px;color:rgba(255,255,255,.4);line-height:1.2em;font-weight:600;transition:.3s;}
.lang ul li.on a{color:#fff;}

#header:hover .lang ul li:after{background-color:rgba(36,36,36,.7);}
#header:hover .lang ul li a{color:rgba(36,36,36,.4);}
#header:hover .lang ul li.on a{color:#242424;}

.header-fixed .lang ul li:after{background-color:rgba(36,36,36,.7);}
.header-fixed .lang ul li a{color:rgba(36,36,36,.4);}
.header-fixed .lang ul li.on a{color:#242424;}

.sub-title{margin:var(--size120) 0 var(--size100);text-align:center;}
.sub-title h1{font-size:var(--fz48);line-height:1.2em;color:var(--dark);font-weight:700;}

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

/* footer */
#footer {background-color: #1f1f1f;padding:40px 0;color: #C0C0C0;font-size:var(--fz15);line-height:1.3em;}
#footer .contain{max-width:1500px;display: flex;}
#footer .foot-logo{margin-right:var(--size100);}
#footer .foot-info{min-width:0;width:1%;flex:1 1 auto;display: flex;}
#footer .foot-info .wrap{min-width:0;width:1%;flex:1 1 auto;margin-right:40px;}
#footer .foot-info .wrap .tit{font-weight:600;margin-bottom:var(--size20);}
#footer .foot-info address{font-style:normal;display: flex;flex-wrap:wrap;gap:10px var(--size40);max-width:600px;}
#footer .foot-info .copy{margin-top:20px;}
#footer .foot-info .copy a{display: inline-block;}
#footer .foot-menu ul{display: flex;gap:var(--size40);}
#footer .foot-menu ul li a{color: #FFF;font-weight:600;}

.scroll-top{display: flex;justify-content:center;align-items:center;position: fixed;right:30px;bottom:30px;width:70px;height:70px;background:url('/images/common/top.png') no-repeat 50% 50%/contain;border-radius: 50%;box-shadow:6px 6px 16px rgba(0, 0, 0, 0.25);z-index:100;font-size:0;}

/* for mobile */
.only-mobile {display:none;}
.btn-m-menu {display:block; position:absolute; top:50%; margin-top:-9px; right:30px; width:26px; height:18px;  text-align:center; text-indent:-9999em; z-index:99; transition:all 0.5s ease-in-out;background:url('/images/common/menu.png') no-repeat 50% 50%/contain;transition:.3s;}
.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:400px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:202;}
.mobile-navigation .home {margin-bottom:20px; padding-left:15px;}
.mobile-navigation .home img {height:23px;}
.mobile-navigation .nav-menu>ul{margin-top:30px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #dfdfdf;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:12px 15px; display:block; color:#454545; font-size:18px; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li a:after{content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c;}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--pri);}
.mobile-navigation .nav-menu>ul>li.active>a:after {transform:translateY(-35%) rotate(-135deg); border-color:var(--pri);}
.mobile-navigation .nav-menu .submenu {display:none; margin:-1px 0 0 0; padding:0 15px 15px;}
.mobile-navigation .nav-menu .submenu>ul:after {content:"";display:block;clear:both;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 15px; color:#454545; font-size:16px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:after {display:block; content:"";position:absolute; top:14px; left:5px; width:4px; height:4px; background:#dfdfdf; border-radius:50%; transition:.3s ease-in-out;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover{color:var(--pri);}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:var(--pri);}
.mobile-navigation .close {position:absolute; top:20px; right:15px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#2c2c2c;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}

.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;}