@charset "UTF-8";

/* MAIN */
.main-visual { position:relative; width:100%; height:var(--vh-100); margin-bottom:190px; background-color:#154a86; }
.main-visual .swiper-wrapper, .main-visual .swiper-slide { height:100%; }
.main-visual .item { position:relative; padding-bottom:36px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#000; }
.main-visual .item video { position:absolute; left:50%; top:50%; min-width:100%; min-height:100%; aspect-ratio:16/9; transform:translate(-50%, -50%) scale(1.001); opacity:0.6; }
.main-visual .text { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 40px; font-size:48px; line-height:60px; color:var(--fontC5); }
.main-visual .nextcont { position:absolute; left:50%; bottom:80px; z-index:3; width:40px; height:40px; transform:translateX(-50%); font-size:1px; color:transparent; white-space:nowrap; overflow:hidden; text-indent:-999px; }
.main-visual .nextcont::before { content:''; position:absolute; left:50%; top:50%; width:16px; aspect-ratio:1/1; border:0 solid var(--contC6); border-width:0 5px 5px 0; border-radius:0 0 3px 0; transform:translate(-50%, -75%) rotate(45deg); }
.main-visual .swiper-controls { position:absolute; left:140px; right:140px; bottom:24px; z-index:2; display:flex; align-items:center;
	--swiper-dot-width:100%;
	--swiper-dot-active-width:100%;
	--swiper-dot-margin:8px;
	--swiper-dot-color:var(--contC6); --swiper-dot-active-color:var(--contC6);
	--swiper-auto-size:20px; --swiper-auto-color:var(--contC6);
}
.main-visual .swiper-controls .swiper-pagination { display:flex; flex:1; }
.main-visual .swiper-controls .swiper-pagination-bullet { position:relative; background-color:rgba(185,185,185,.5); overflow:hidden; }
.main-visual .swiper-controls .swiper-pagination-bullet::before { content:''; position:absolute; left:0; top:0; width:0; height:100%; background-color:var(--swiper-dot-active-color); border-radius:var(--swiper-dot-radius); }
.main-visual.swiper-ani .swiper-controls .swiper-pagination-bullet-active::before { width:calc((1 - var(--per)) * 100%); }

.main-section {
	--theme-color:var(--pointC1); width:100%; max-width:calc(1640px + (var(--size-wrap-pd) * 2)); padding:0 var(--size-wrap-pd); margin-left:auto; margin-right:auto; font-size:24px; font-weight:var(--fontWg3); line-height:1.41667;
	--bg-gap1:calc( (max(var(--vw-100), (1640px + (var(--size-wrap-pd) * 2))) - 1640px) / -2 );
	--bg-gap2:calc(var(--size-wrap-pd) * -1);
}
.main-section.main-product { overflow:hidden; }
.main-section.main-cleanenergy { --theme-color:#0BB15E; }
.main-section + .main-section { margin-top:200px; }
.main-section + .main-section:is(.main-introduce, .main-press) { margin-top:300px; }
.main-section .sec-head { margin-bottom:clamp(116px, 12.963vh, 140px); }
.main-section .sec-head .title { font-size:clamp(53px, 3.71vw, 72px); font-weight:var(--fontWg4); line-height:1.13889; }
.main-section .sec-head .category { display:block; margin-bottom:32px; font-size:24px; font-weight:var(--fontWg7); line-height:normal; }
.main-section .sec-head .point { color:var(--theme-color, var(--pointC1)); }
.main-section .sec-head.ty-visual { position:relative; aspect-ratio:280/104.75; display:flex; flex-direction:column; margin-bottom:0; text-align:right; }
.main-section .sec-head.ty-visual .title { margin-top:auto; margin-bottom:auto; padding-top:48px; }
.main-section .sec-head.ty-visual::after { content:''; position:absolute; top:0; left:min(min(var(--bg-gap1), var(--bg-gap2)), 0px); right:23.2%; bottom:-1px; z-index:-1; background-size:auto 100%; background-position:left center; background-repeat:no-repeat;  background-image:var(--img, none); }
.main-section .sec-head.ty-visual.reverse { text-align:left; padding-right:clamp(328px, 22.784vw, 442px); }
.main-section .sec-head.ty-visual.reverse::after { right:min(min(var(--bg-gap1), var(--bg-gap2)), 0px); left:14.63%; background-position:right center; }
.main-section .sec-head.ty-visual.full { aspect-ratio:1648/689; }
.main-section .sec-head.ty-visual.full::after {
	background-size:cover; background-position:center center;
	right:min(var(--bg-gap1), var(--bg-gap2));
	left:min(var(--bg-gap1), var(--bg-gap2));
}

.main-section .sec-head .text-ty { margin-top:40px; font-size:20px; font-weight:var(--fontWg3); }
.main-section .subj { margin-bottom:20px; font-size:16px; font-weight:var(--fontWg7); line-height:normal; }
.main-section .subj.mgt { margin-top:80px; }
.main-section .text-ty2 { color:var(--fontC3); font-size:clamp(53px, 3.71vw, 72px); font-weight:var(--fontWg4); line-height:1.13889; letter-spacing:-0.036em; }

.main-section .line-col, .main-section .line-col-bottom, .main-section .line-row, .main-section .line-row-right { position:relative; }
.main-section .line-col::before,
.main-section .line-col-bottom::after { content:''; position:absolute; left:0; right:0; top:0; height:1px; background-color:var(--contC1); }
.main-section .line-col-bottom::after { top:auto; bottom:0; }
.main-section .line-row::after,
.main-section .line-row-right::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background-color:var(--contC1); }
.main-section .line-row-right::before { left:auto; right:0; }

.main-grid { display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(190px, auto); gap:70px 0; }
.main-grid .case-full { grid-column:span 4; padding-left:0 !important; padding-right:0 !important; }
.main-grid .case1 { grid-column:span 2; grid-row:span 2; }
.main-grid .case2 { grid-column:span 2; }
.main-grid .grid.case3 { padding-top:0; }
.main-grid .grid { padding:40px 40px 0 40px; display:flex; flex-direction:column; }
.main-grid .grid.case1:first-child,
.main-grid .grid.case2:first-child,
.main-section.main-cleanenergy .main-grid .grid.case2:first-child + .grid.case3 { padding-left:0; }
.main-grid .grid.case1:first-child + .grid.case2,
.main-grid .grid.case2:last-child,
.main-grid .grid.case3:last-child,
.main-grid .grid.case1:last-child { padding-right:0; }
.main-grid2 { display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:minmax(190px, auto); }
.main-grid3 { display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(190px, auto); }
.main-grid3 .grid { padding:60px; display:flex; flex-direction:column; }
.main-grid3 .grid:nth-child(2n-1) { padding-left:0; }
.main-grid3 .grid:nth-child(2n) { padding-right:0; }
.grid-flex { display:flex; width:100%; text-align:center; }
.grid-flex.mgt { margin-top:60px; }
.grid-flex .fx-item { position:relative; flex:1; padding:24px 10px 22px; }
.grid-flex img { max-width:100%; }
.grid-flex .caption { display:block; margin-top:21px; }

.main-section .groups { display:flex; justify-content:space-between; }
.main-section .groups > .col:not(.none) { flex:1; }
.main-section .auto-top { margin-top:auto; }
.main-section .auto-bottom { margin-bottom:auto; }

.main-section [data-swiper] { position:relative; width:100%; text-align:center; }
.main-section [data-swiper] img { max-width:100%; }
.main-section [data-swiper] .item { display:flex; flex-direction:column; justify-content:center; background-color:#fff; }
.main-section .swiper-controls { position:absolute; left:0; right:0; bottom:3px; z-index:10; }
.main-section .swiper-button-autoplay { display:none; }
.main-section:not(.main-marine) [data-swiper].main-product-list { min-height:382px; }

.main-section .main-go { display:inline-block; text-align:center; font-size:20px; font-weight:var(--fontWg4); line-height:1.2; }
.main-section .main-go::before { content:''; display:block; width:clamp(148px, 10.309vw, 200px); aspect-ratio:1/1; border-radius:100%; background:#F37321 url('../img/main/icon-go.svg') center center / contain no-repeat; }
.main-section .main-go .in { display:block; margin-top:20px; }
.main-section .img-ty { display:block; position:relative; margin:auto 0; }
.main-section .text-ty + .img-ty { margin-top:40px; }
.main-section .img-ty img { width:100%; }

.main-product-list { padding-bottom:25px; }
.main-product-list .item img { width:fit-content; aspect-ratio:58/30; }
.main-product-list .caption { display:block; text-align:center; font-size:21px; text-transform:none; }
.main-product-list .swiper-controls { bottom:16px; --swiper-dot-active-color:var(--theme-color); }
.main-product-list2 { overflow:visible; padding-top:181px; margin-top:46px; }
.main-product-list2 .item { position:relative; width:520px; padding:50px; aspect-ratio:1/1; }
.main-product-list2 .item > a { display:block; text-align:center; }
.main-product-list2 .item > a::before { display:block; position:relative; z-index:2; margin:0 auto -40px; transform:translate(var(--gap), var(--gap2)); transition:opacity var(--time-ani-base); }
.main-product-list2 .item { --gap:0px; --gap2:-50px; }
.main-product-list2 .item:not(.swiper-slide-active) { --gap:-50px; }
.main-product-list2 .item.swiper-slide-active ~ .item { --gap:50px; }
.main-product-list2 .item img { transform:translateX(var(--gap)); }
.main-product-list2 .item.swiper-slide-active img { transform:scale(1.238); }
.main-product-list2 .item img { position:relative; z-index:2; max-width:100%; transition:transform var(--time-ani-base); }
.main-product-list2 .hover-text { position:absolute; left:calc(90px + var(--gap)); width:360px; top:0; bottom:100px; padding:0 40px; font-size:16px; font-weight:var(--fontWg3); text-align:left; opacity:0; background:#EFEFEF; overflow:hidden; pointer-events:none; transition:top var(--time-ani-base), opacity var(--time-ani-base); }
.main-product-list2 a:hover .hover-text, .main-product-list2 a:focus .hover-text { top:-181px; opacity:1; }
.main-product-list2 a:hover::before, .main-product-list2 a:focus::before { opacity:0; }
.main-product-list2 .hover-text::before { content:''; display:block; height:36px; margin:0 -40px; border-top:2px solid var(--pointC1); }
.main-product-list2 .hover-text dt { margin-bottom:20px; font-size:24px; font-weight:var(--fontWg4); }
.main-product-list2 .hover-text dd { display:flex; }
.main-product-list2 .hover-text dd .name { flex:none; }
.main-product-list2 .hover-text dd .val { flex:1; margin-left:16px; }
.main-product-list2 .hover-text dd + dd { margin-top:14px; }

/* 페이지별 */
.main-section.main-compressor .main-grid { gap:0; }
.main-section.main-compressor [data-swiper].main-product-list { min-height:420px; margin-top:auto; }
.main-section.main-cleanenergy .main-grid .case2 { order:-1; }
.main-section.main-cleanenergy .main-grid .case1 { order:-1; }
.main-section.main-cleanenergy img[src*=".svg"] { height:110px; }
.main-section.main-marine .grid-flex { font-size:16px; }
.main-section.main-marine img[src*=".svg"] { height:160px; }

.main-section.main-introduce > a { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:2.5625/1; padding-bottom:2.8%; margin-bottom:160px; font-size:clamp(148px, 10.3vw, 200px); font-weight:var(--fontWg7); color:var(--fontC5); }
.main-section.main-introduce > a::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; border-radius:40px; background:var(--img) center center / 100% auto no-repeat; }
.main-section.main-introduce .main-go { position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%); }
.main-section.main-introduce .msg { display:flex; gap:56px; padding-left:4.878%; font-size:24px; font-weight:var(--fontWg3); line-height:1.41667; }
.main-section.main-introduce .msg dt { flex:1; margin-top:auto; font-size:clamp(41px, 2.88vw, 56px); font-weight:var(--fontWg4); line-height:1.17857; white-space:nowrap; }
.main-section.main-introduce .msg dd { flex:1; }
.main-section.main-introduce .msg dt + dd::before { content:''; display:block; width:clamp(83px, 5.825vw, 113px); aspect-ratio:1/1; margin-bottom:24px; background:url('../img/common/symbol.svg') center center / contain no-repeat; }
/* effect */
.main-section.main-introduce > a .name { transition:all var(--time-ani-base-slow) 400ms; }
.main-section.main-introduce > a .main-go { transition:all var(--time-ani-base-slow) 600ms; }
.main-section.main-introduce > a::before { transition:all 1500ms; }
.main-section.main-introduce > a:not(.visible-ani) .name { opacity:0.1; }
.main-section.main-introduce > a:not(.visible-ani) .main-go { opacity:0; }
.main-section.main-introduce > a:not(.visible-ani)::before { background-size:200% auto;}
.main-section.main-introduce > .msg dt,
.main-section.main-introduce > .msg dd { transition:opacity var(--time-ani-base) calc(var(--time-ani-base) * var(--delay, 0)), transform var(--time-ani-base-slow) calc(var(--time-ani-base) * var(--delay, 0)); }
.main-section.main-introduce > .msg dd { --delay:1; max-width:810px; }
.main-section.main-introduce > .msg:not(.visible-ani) dt,
.main-section.main-introduce > .msg:not(.visible-ani) dd { opacity:0; transform:translateY(var(--fadeup-gap)); }

.main-section.main-product { padding-left:8.34%; }
.main-section.main-product .category { display:block; margin-bottom:30px; padding-left:10px; font-size:24px; color:var(--pointC1); font-weight:var(--fontWg7); }
.main-section.main-product .text-ty2 .block:last-child { text-align:right; }

.main-section.main-press .sec-head { margin-bottom:80px; }
.main-section.main-press .sec-head .title { font-size:clamp(71px, 5vw, 96px); }
.main-section.main-press img { max-width:100%; }
.main-section .press-list .item > a { display:flex; align-items:center; justify-content:space-between; padding:40px 0; }
.main-section .press-list .item-thumb { flex:none; width:320px; margin-left:20px; }
.main-section .press-list .item-info { min-width:0; font-size:16px; font-weight:var(--fontWg3); line-height:1.625; }
.main-section .press-list .item-info .item-subj { display:block; font-size:24px; line-height:1.41667; font-weight:var(--fontWg4); }
.main-section .press-list .item-info .item-body { display:block; margin-top:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.main-section .press-more { text-align:center; }
.main-section .press-more::before { content:''; display:block; width:1px; height:80px; margin:0 auto; background-color:var(--contC1); }

/* 대소문자 구분 예외 */
.text-ty, .main-section.main-introduce > .msg dd, .main-section .press-list { text-transform:none; }

/* Main Animation */
.main-section { --fadeup-gap:100px; }
.main-section[data-scrolleff]:not([class*="line-"]) > *,
.main-section [data-scrolleff]:not([class*="line-"]) > * { transition:opacity var(--time-ani-base) calc(var(--time-ani-base) * var(--delay, 0)), transform var(--time-ani-base) calc(var(--time-ani-base) * var(--delay, 0)); }

.main-section[data-scrolleff]:not(.visible-ani) > *,
.main-section [data-scrolleff]:not(.visible-ani) > * { opacity:0; transform:translateY(var(--fadeup-gap)); transition-delay:0ms, 0ms; }
.main-section [data-scrolleff].sec-head.ty-visual::after { transition:clip-path var(--time-ani-base-slow); clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
.main-section [data-scrolleff].sec-head.ty-visual:not(.visible-ani)::after { clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); }
.main-section [class*="line-"]::before,
.main-section [class*="line-"]::after { transition:all var(--time-ani-base-slow) calc(var(--delay-line, 0) * 100ms); }
.main-section [class*="line-"] > * { transition:opacity var(--time-ani-base); }

.main-section [data-scrolleff][class*="line-"]:not(.visible-ani) > *,
.main-section [data-scrolleff]:not(.visible-ani) [class*="line-"] > *,
.main-section[data-scrolleff]:not(.visible-ani) [class*="line-"] > * { opacity:0; }
.main-section [data-scrolleff]:not(.visible-ani).line-col::before,
.main-section [data-scrolleff]:not(.visible-ani).line-col-bottom::after,
.main-section [data-scrolleff]:not(.visible-ani) .line-col::before,
.main-section [data-scrolleff]:not(.visible-ani) .line-col-bottom::after,
.main-section[data-scrolleff]:not(.visible-ani) .line-col::before,
.main-section[data-scrolleff]:not(.visible-ani) .line-col-bottom::after { left:50%; right:50%; }
.main-section [data-scrolleff]:not(.visible-ani).line-row::after,
.main-section [data-scrolleff]:not(.visible-ani).line-row-right::before,
.main-section [data-scrolleff]:not(.visible-ani) .line-row::after,
.main-section [data-scrolleff]:not(.visible-ani) .line-row-right::before,
.main-section[data-scrolleff]:not(.visible-ani) .line-row::after,
.main-section[data-scrolleff]:not(.visible-ani) .line-row-right::before { bottom:100%; }

@keyframes ani-circle {
	0%, 5%, 95%, 100% { transform:translateX(0); }
	45%, 55% { transform:translateX(80px); }
}
@keyframes ani-circle2 {
	0%, 5%, 95%, 100% { transform:translateX(0); }
	45%, 55% { transform:translateX(-80px); }
}