/* 공통 */

.main-cnt {}
.main-cnt .main-tit {font-size: 60px; color: #111; font-weight: bold; font-family: 'Poppins', 'Noto Sans KR', sans-serif; letter-spacing: -0.1px; line-height: 1.1; text-transform: uppercase;  overflow: hidden;}
.main-cnt .main-tit > span {display:block;}
.main-cnt .tit-cnt {}
.main-cnt .tit-cnt > span {display: block; font-size: 18px; color: #666; letter-spacing: -0.1px; margin-top: 38px; line-height: 1.5;}
.main-cnt .more-btn {display: inline-block; font-size: 15px; color: #333; font-weight: 500; font-family: 'Poppins', sans-serif; text-transform: uppercase;}


/* 비쥬얼 */
.m-visual {overflow: hidden;}
.m-visual {position: relative; /* height: 930px; */ height: 100vh;  height: calc(var(--vh, 1vh) * 100);}
.m-visual :root {--vh: 100%;}
.m-visual .slide {width: 100%; height: 100%; position: relative;}
.m-visual .slick-slider .slick-track, .m-visual .slick-slider .slick-list {width: 100%; height: 100%;}
.m-visual .slide .visual-cnt {width: 100%; height: 100%; position: relative; overflow: hidden;}
.m-visual .slide .visual-cnt .bg {top: 0; left: 0; width: 100%; height: 100%; transition:1.4s; }
/*
.m-visual .slide .visual-cnt.vis01 .bg {background: url(/img/main/main-vis01_01.jpg) no-repeat center; background-size: cover;} 
.m-visual .slide .visual-cnt.vis02 .bg {background: url(/img/main/main-vis02.jpg) no-repeat center; background-size: cover;}
.m-visual .slide .visual-cnt.vis03 .bg {background: url(/img/main/main-vis03.jpg) no-repeat center; background-size: cover;}
.m-visual .slide .visual-cnt.vis04 .bg {background: url(/img/main/main-vis04.jpg) no-repeat center; background-size: cover;}
*/
.m-visual .slide .visual-cnt.vis01 .bg {background: url(/img/main/main-vis01_01.jpg) no-repeat center; background-size: cover;} 
.m-visual .slide .visual-cnt.vis02 .bg {background: url(/img/main/main-vis02_n1.jpg) no-repeat center; background-size: cover;}
.m-visual .slide .visual-cnt.vis03 .bg {background: url(/img/main/main-vis03.jpg) no-repeat center; background-size: cover;}
.m-visual .slide .visual-cnt.vis04 .bg {background: url(/img/main/main-vis04_n.jpg) no-repeat center; background-size: cover;}
.m-visual .slide .visual-cnt .txt {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
.m-visual .slide .visual-cnt .txt h2 {color: #fff; letter-spacing: -0.1px; overflow: hidden;}
/*.m-visual .slide .visual-cnt.vis02 .txt { mix-blend-mode: exclusion;} */
.m-visual .slide .visual-cnt.vis02 .txt h2 {}
.m-visual .slide .visual-cnt .txt h2 span {display: block;}
.m-visual .slide .visual-cnt .txt h2 > p {font-size: 85px; font-weight: 600; text-transform: uppercase; line-height: 1.1; overflow: hidden;}
.m-visual .slide .visual-cnt .txt h2 > span {font-size: 20px; font-weight: 300; margin: 30px 0 0 0; display: inline-block;}
.m-visual .next-img {position: absolute; right: 0; bottom: 0; width: 260px; height: 362px; background: #111; cursor: pointer; z-index: 2; display: flex; align-items: center; /* animation: up 0.8s 1.5s both;  */ opacity: 0;} 
.m-visual .next-img .img {width: 100%; height: 100%;}
.m-visual .next-img .img  img {width: 100%; height: 100%;}
.m-visual .control {position: absolute; top: 71.96%; left: 50%; transform: translate(-50%, -50%);}
.m-visual .control .svg-box {width: 162px; height: 162px; position: relative;}
.m-visual .control .svg-box svg {width: calc(100% + 2px); height: calc(100% + 2px); fill: transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.m-visual .control .area {stroke: rgba(255, 255, 255, 0.2);}
.m-visual .control .progress circle {stroke: #fff;  stroke-dasharray: 503; stroke-dashoffset: 503 ; /* animation: stroke 2s ease-out both; */}

.m-visual .controlBox {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; width: 100%; justify-content: center;}
.m-visual .controlBox .page-num {color: #fff; font-family: 'Pretendard'; }
.m-visual .controlBox .page-num .current {font-size: 16px; font-weight: bold; }
.m-visual .controlBox .page-num .total {font-size: 11px; font-weight: 300; opacity: 0.5; }
.m-visual .controlBox .page-num .line {font-size: 11px; opacity: 0.5; }
.m-visual .controlBox .arrow {margin-left: 15px; display: flex; align-items: center;}
.m-visual .controlBox .arrow button {color: #fff; font-size: 16px;}
.m-visual .controlBox .arrow .prev {font-size: 18px;}
.m-visual .controlBox .arrow .pause {margin: 0 2px;}
.m-visual .controlBox .arrow .next {font-size: 18px;}
.m-visual .slide .slick-prev {display: none !important;}
.m-visual .visual-cnt.slick-now .txt h2 > p{animation:fadeRight 1.5s 1s both;}
.m-visual .visual-cnt.slick-now .txt h2 > span {animation:fadeRight 1.5s 1.5s both;}
.m-visual .next-img.on {animation: fadeleft 0.8s 1.5s both;}

/* .m-visual .visual-cnt.slick-now .bg {animation: bg-scale 3.5s both;}
.m-visual .visual-cnt.slick-now .txt h2 > p:nth-child(1) span {animation: up 1s 0.5s both; }
.m-visual .visual-cnt.slick-now .txt h2 > p:nth-child(2) span {animation: up 1s 0.8s both; }
.m-visual .visual-cnt.slick-now .txt h2 > span span {animation: up 1s 1.1s both; } */

@keyframes bg-scale{
	0% {transform: scale(1.05);  }
	100% { transform:scale(1); }
}
@keyframes up {
	0%{transform: translateY(70px); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}
@keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}


@keyframes fadeRight{
	0%{opacity: 0; transform:translateX(-200px);}
	100%{opacity: 1; transform:translateX(0);}
}

@keyframes fadeleft{
	0%{opacity: 0; transform:translateX(80px);}
	100%{opacity: 1; transform:translateX(0);}
}




/* Product */
.m-product {padding: 118px 0 170px; box-sizing: border-box;}
.m-product .dot-cnt {text-align: center;}
.m-product .dot {display: flex; align-items: center; justify-content: space-around;/*  flex-wrap: wrap; */ position: relative;}
.m-product .dot li {padding: 0 40px; box-sizing: border-box; }
.m-product .dot li a {display: inline-block; width: 100%; font-size: 20px; color: #666; font-family: 'Noto Sans KR'; position: relative; }
.m-product .dot li a:after {content: ''; background: var(--color-blue); width: 0; height: 2px; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);}
.m-product .dot li:first-child {padding-left: 20px;}
.m-product .dot li:last-child {padding-right: 20px;}

.m-product .dot li.on a,
.m-product .dot li:hover a {color: var(--color-blue); }
.m-product .dot li.on a:after,
.m-product .dot li:hover a:after {width: calc(100% + 10px); transition: 0.4s;}

/* .m-product .slide {}
.m-product .slide .item {display: flex;}
.m-product .slide .item .img {}
.m-product .slide .item .img img {}
.m-product .slide .item .txt {padding: 50px 0 0 126px; box-sizing: border-box; letter-spacing: -0.1px;}
.m-product .slide .item .txt > span {display: block; font-size: 16px; color: var(--color-blue); font-weight: bold; text-transform: uppercase;}
.m-product .slide .item .txt .main-tit {margin: 15px 0 36px;}
.m-product .slide .item .txt > p {font-size: 18px; color: #666; line-height: 1.7;}
.m-product .slide .item .txt .more-btn {display: block; margin: 53px 0 0 0; }
.m-product .slide .item .txt .more-btn span {display: inline-block; width: 42px; height: 42px; border-radius: 50%; background: none; margin: 0 0 0 38px; text-align: center; transition: 0.4s;}
.m-product .slide .item .txt .more-btn span i {color: #fff; line-height: 42px; font-size: 15px; color: #333;} */

.m-product .slide {display: flex;  margin: 80px 0 0 0; overflow: hidden;}
.m-product .slide .img-slide {width: 50%;}
.m-product .slide .img-slide .item {width: 100%; /* height: 570px; */ background: #eee;}
.m-product .slide .img-slide .item .img {width: 100%; height: 100%; text-align: center; /* line-height: 570px; */ height: auto; padding-bottom: 71.25%; position: relative;}
.m-product .slide .img-slide .item img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.m-product .slide .img-slide .item .img span {display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; }
.m-product .slide .txt-slide {width: 50%; padding: 40px 0 0 126px; box-sizing: border-box;}
.m-product .slide .txt-slide .item {}
.m-product .slide .txt-slide .item .txt {}
.m-product .slide .txt-slide .item .txt { letter-spacing: -0.1px;}
.m-product .slide .txt-slide .item .txt > span {display: block; font-size: 16px; color: var(--color-blue); font-weight: bold; text-transform: uppercase;}
.m-product .slide .txt-slide .item .txt .main-tit {margin: 15px 0 36px; }
.m-product .slide .txt-slide .item .txt .main-tit.line2 {font-size: 52px; margin: 15px 0 26px;}
.m-product .slide .txt-slide .item .txt > p {font-size: 18px; color: #666; line-height: 1.7; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: none;}
.m-product .slide .txt-slide .item .txt .more-btn {display: block; margin: 43px 0 0 0;}
.m-product .slide .txt-slide .item .txt .more-btn span {display: inline-block; width: 42px; height: 42px; border-radius: 50%; background: none; margin: 0 0 0 38px; text-align: center; transition: 0.4s;}
.m-product .slide .txt-slide .item .txt .more-btn span i {color: #fff; line-height: 42px; font-size: 15px; color: #333;}

.m-product .next-slide {/* display: flex; align-items: center;  gap: 0 24px; */ max-width: 674px; width: 100%; position: absolute; right: 0; bottom: 0; overflow: hidden;}
.m-product .next-slide .item {/* width: calc(33.3333% - 24px); */ cursor: pointer;  background:#eee; height: 143px; margin:0 12px; text-align: center; line-height: 143px;}
.m-product .next-slide .item img {width: 100%; height: 100%;}
.m-product .slide .item .txt .more-btn:hover span {background: var(--color-blue); transition: 0.4s; margin: 0 0 0 15px; }
.m-product .slide .item .txt .more-btn:hover span i {color: #fff;}



/* Business Area */
.m-business {position: relative; padding: 0 0 271px; box-sizing: border-box;/*  position: sticky; top: 0; */}
.m-business .b-txt {display: block; overflow: hidden;}
/* .m-business .b-txt {display: block; font-size: 258.82px; font-weight: bold; text-transform: uppercase; letter-spacing: -0.8px;  -webkit-text-stroke: 1px #eaeaea; color: transparent;  line-height: 0.8; font-family: 'Poppins', sans-serif; z-index: 101; width: 100%; max-width:100%; height: auto;  position: relative; z-index:-1; padding: 100px 0; overflow:hidden;}
.m-business .b-txt > span {position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite; top: 0; left: 0;}  */
.m-business .tit-cnt {text-align: center; margin-top: -44px;}
.m-business .tit-cnt .scroll {width: 90px; height: 90px; border: 1px solid rgba(55, 55, 55, 0.2); margin: 0 auto; border-radius: 50%; margin-top: 50px;}
.m-business .tit-cnt .scroll i {color: #333; font-size: 15px; line-height: 90px;}
.m-business .scroll-area { /* padding: 700px 0 100px;  */ margin-top: 550px; box-sizing: border-box;/*  background: url(/img/main/bg_business.jpg)no-repeat; background-attachment: fixed; height: 1025px; */ }
.m-business .scroll-area > .inner1600 {display: flex;}
.m-business .scroll-area .tab {max-width: 60px; width: 100%; margin-bottom: 200px;}
.m-business .scroll-area .tab ul { display: flex; flex-direction: column; gap: 30px 0; overflow: hidden; transition: padding 0.4s; }
.m-business .scroll-area .tab ul li {position: relative; transition: 0.4s;}
.m-business .scroll-area .tab ul li::before {content: ''; display: inline-block; width: 10px; height: 1px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: 0; transition: 0.4s; opacity: 0;}
.m-business .scroll-area .tab ul li > a {display: block; width: 100%; height: 100%;}
.m-business .scroll-area .tab ul li:first-child img {width: 35px; height: 35px;}
.m-business .scroll-area .tab ul li .off {display: block;}
.m-business .scroll-area .tab ul li .on {display: none;}
.m-business .scroll-area .tab ul li.on .off {display: none;}
.m-business .scroll-area .tab ul li.on .on {display: block;}
.m-business .scroll-area .txt-cnt{padding-left: 9.987%; box-sizing: border-box;}
.m-business .scroll-area .txt-cnt .txt {letter-spacing: 0.1px; transition: padding 0.4s; /* opacity: 0; */ display: none;}
.m-business .scroll-area .txt-cnt .txt.on {display: block;}
.m-business .scroll-area .txt p {font-size: 50px; color: #fff; font-weight: bold;}
.m-business .scroll-area .txt > span {font-size: 18px; color: #fff; opacity: 0.7; line-height: 1.7; margin: 39px 0 0 0;display: block; }
.m-business .scroll-area .txt .more-btn {color: #fff; margin: 85px 0 0 0;}
.m-business .scroll-area .txt .more-btn span {display: inline-block; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; vertical-align: middle; text-align: center; margin-left: 38px; transition: 0.4s;}
.m-business .scroll-area .txt-cnt .txt .more-btn span i {color: #fff; line-height: 42px; }
.m-business .scroll-area .content {margin: 0 0 0 auto; width: 50%; z-index: 1;}
.m-business .scroll-area .content .list {margin-bottom: 100px;}
.m-business .scroll-area .content .list:last-child {margin-bottom: 0;}
.m-business .scroll-area .content .list .item {}
.m-business .scroll-area .content .list .item .txt {display: none;}
.m-business .bg span {position: absolute; bottom: 0; left: 0; width: 100%;}

.m-business .scroll-area .txt-cnt .txt .more-btn:hover span {background:  rgba(255, 255, 255, 0.4); margin-left: 20px; }

.m-business .scroll-area .tab ul li.on {padding-left: 20px;}
.m-business .scroll-area .tab ul li.on:before {left: 0; opacity: 1;}

/* .m-business .scroll-area.fix .tab ul, 
.m-business .scroll-area.fix .txt { padding-top: 400px;} */


.m-business .bg { background: url(/img/main/bg_business.jpg) no-repeat; background-size: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; z-index: -1; background-attachment: fixed;}
.m-business .bg:before { content: ""; display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; background: url(/img/main/mask_bg04.png) no-repeat; background-size: var(--maskSize); background-position: bottom; mix-blend-mode: screen; }
.m-business.fix .bg { position: fixed; }
.m-business.fix2 .bg { position: absolute; bottom:0; top:unset; }
.sticky { position: sticky; top: 0; }

.m-business.txt-fix .scroll-area .tab .sticky,
.m-business.txt-fix .scroll-area .txt-cnt .sticky {top: 38%;}

 @keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Quality management */
.m-quality {padding: 145px 0 109px; box-sizing: border-box; z-index: 5; background: #fff;}
.m-quality .tit-cnt {text-align: center;}

.m-quality .list {display: flex; margin-top: 100px;align-items: flex-end;}
.m-quality .list .item {position: relative; width: 33.3333%;/*  height: 530px; */ height: auto; transition: 0.4s; overflow: hidden; padding-bottom: 33.1%;}
.m-quality .list .item > a {display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.m-quality .list .item .img {position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 36px); transition: 0.5s;}
.m-quality .list .item .img:after {content: ''; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(76,76,76, 1) 0%, rgba(76,76,76, 0.5) 100%); position: absolute; bottom: 0; left: 0; mix-blend-mode: multiply; opacity: 0;}
.m-quality .list .item .img img {width: 100%; height: 100%; object-fit: cover;}
.m-quality .list .item .txt {position: relative; text-align: center; position: relative; text-align: center; display: flex; flex-flow: column; justify-content: center; align-items: center; height: 100%; transform: translateY(78px);  transition: 0.4s;/* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;  letter-spacing: -0.1px; */}
.m-quality .list .item .txt .icon {display: block; width: 92px; height: 92px; background: #fff; text-align: center; border-radius: 50%; margin: 0 auto;}
.m-quality .list .item .txt .icon img {line-height: 92px; position: relative; top: 50%; transform: translateY(-50%);}
.m-quality .list .item .txt p {font-size: 23px; color: #fff; font-weight: 500;  margin: 40px 0 0 0;}
.m-quality .list .item .txt .lbox > span {display: inline-block; font-size: 16px; color: #fff; margin: 32px 0 0 0; line-height: 1.8; opacity: 0;}
.m-quality .list .item .txt .more-btn {color: #fff; margin-top: 68px; opacity: 0; display: flex; align-items: center; }
.m-quality .list .item .txt .more-btn .arrow { margin-left: 18px; transition: 0.4s;}

.m-quality .list .item .txt .more-btn:hover span {margin-left: 5px;}

.m-quality .list .item:hover .img {height: 100%;}
.m-quality .list .item:hover .img:after {height: 100%; transition: 0.4s; background:rgba(76,76,76, 1); opacity: 1;}
.m-quality .list .item:hover .txt {transform: translateY(0);}
.m-quality .list .item:hover .txt .lbox > span,
.m-quality .list .item:hover .txt .more-btn {opacity: 1;}