@charset "UTF-8";

/* MAIN */
.main-visual { position:relative; height:var(--vh-100); max-height:78rem; margin:0 calc(var(--size-wrap-pd) * -1) 10.2rem; overflow: hidden; background-color:#154a86; }
.main-visual .swiper-wrapper, .main-visual .swiper-slide { height:100%; }
.main-visual .item { position:relative; padding-top:20%; 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:6/13; transform:translate(-50%, -50%) scale(1.001); opacity:0.6; }
.main-visual .text { position:relative; z-index:2; max-width:100%; margin:0 auto; padding:0 var(--size-wrap-pd); font-size:3.2rem; line-height:1.3125; color:var(--fontC5); }
.main-visual .nextcont { position:absolute; left:50%; bottom:19%; z-index:3; width:3rem; height:3rem; 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:1.4rem; aspect-ratio:1/1; border:0 solid var(--contC6); border-width:0 0.3rem 0.3rem 0; border-radius:0 0 0.15rem 0; transform:translate(-50%, -75%) rotate(45deg); }
.main-visual .swiper-controls { position:absolute; left:var(--size-wrap-pd); right:var(--size-wrap-pd); bottom:3rem; z-index:2; display:flex; align-items:center;
	--swiper-dot-width:100%;
	--swiper-dot-active-width:100%;
	--swiper-dot-margin:0.6rem;
	--swiper-dot-color:var(--contC6); --swiper-dot-active-color:var(--contC6);
	--swiper-auto-size:0; --swiper-auto-color:var(--contC6);
}
.main-visual .swiper-controls .swiper-pagination { display:flex; flex:1; }
.main-visual .swiper-button-autoplay { display:none; }
.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); padding:0; font-size:1.4rem; font-weight:var(--fontWg3); line-height:1.57143; }
.main-section.main-cleanenergy { --theme-color:#0BB15E; }
.main-section .swiper-controls { margin-top:3.4rem; margin-bottom:2rem; }
.main-section .swiper-button-autoplay { display:none; }
.main-section + .main-section { margin-top:20rem; }
.main-section + .main-marine,
.main-section + .main-cleanenergy { margin-top:10rem; }
.main-section .sec-head { margin-bottom:3.8rem; }
.main-section .sec-head .title { font-size:2.4rem; font-weight:var(--fontWg4); line-height:1.41667; }
.main-section .sec-head .point { color:var(--theme-color, var(--pointC1)); }
.main-section .category { display:block; margin-bottom:1rem; color:var(--theme-color); font-size:1.6rem; font-weight:var(--fontWg7); text-transform:none; }
.main-section .sec-head.ty-visual::after { content:''; display:block; margin:4rem calc(var(--size-wrap-pd) * -1); aspect-ratio:9/6; background:var(--img) center center/100% auto no-repeat; }
.main-section.main-compressor .sec-head.ty-visual::after { aspect-ratio:1400/615; }
.main-section .sec-head.ty-visual.full::after { display:none; }
.main-section .sec-head.ty-visual.full { display:flex; flex-direction:column; justify-content:end; aspect-ratio:36/39.1; color:#fff; padding:0 var(--size-wrap-pd) 2.7rem; margin-left:var(--size-wrap-pd-m); margin-right:var(--size-wrap-pd-m); background:var(--img) center center/100% auto no-repeat; }
.main-section .sec-head .text-ty { margin-top:0.8rem; font-size:1.4rem; font-weight:var(--fontWg4); }
.main-section .subj { margin-bottom:1.2rem; font-size:1.2rem; font-weight:var(--fontWg7); line-height:1.57143; }
.main-section .subj.mgt { margin-top:4rem; }
.main-section .text-ty2 { margin-top:0.8rem; color:var(--fontC3); font-size:2.4rem; font-weight:var(--fontWg4); line-height:1.41667; }

.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(2, 1fr); }
.main-grid .case1, .main-grid .case2 { grid-column:span 2; padding:0; }
.main-grid .grid + .case1, .main-grid .grid + .case2 { margin-top:4rem; }
.main-grid .case1.line-col { margin-top:0; padding-top:4rem; grid-row-gap:0; }
.main-grid .case1 + .case2.line-col { margin-top:4rem; padding-top:4rem; grid-row-gap:0; }
.main-grid .case1.line-col { margin-top:4rem; padding-top:1.8rem; grid-row-gap:0; }
.main-grid .case1.line-col + .case1.line-col { margin-top:6.8rem; }
.main-grid2 { display:flex; flex-direction:column; }
.grid-flex { display:flex; width:100%; text-align:center; }
.grid-flex.mgt { margin-top:4rem; }
.grid-flex .fx-item { position:relative; flex:1; padding:0; }
.grid-flex img { max-width:100%; }
.grid-flex .caption { display:block; margin-top:0.8rem; }
.grid-flex.col2 { flex-wrap:wrap; }
.grid-flex.col2 .fx-item { flex:none; width:50%; }

.main-section .groups { display:flex; justify-content:space-between; }
.main-section .groups > .col:not(.none) { flex:1; display:flex; flex-direction:column; }
.main-section .groups > .col:not(.none) > div:last-child { margin-top:auto; }
.main-section .groups > .col.size-s { flex:0.89; }
.main-section .groups.line-col > .col { padding-top:4rem; }
.main-section .auto-top { margin-top:auto; }
.main-section .auto-bottom { margin-bottom:auto; }

.main-section [data-swiper] .item { background-color:#fff; }

.main-section .main-go { display:block; width:10rem; margin:7rem auto 0; text-align:center; font-size:2rem; font-weight:var(--fontWg4); line-height:1.2; }
.main-section .main-go::before { content:''; display:block; width:10rem; aspect-ratio:1/1; background:url('../img/main/icon-go.svg') center center / contain no-repeat; }
.main-section .main-go .in { display:block; margin-top:2rem; }
.main-section .text-ty + .img-ty { margin-top:4rem; }

.main-product-list { --swiper-dot-active-width:2.4rem; margin-bottom:2rem; }
.main-product-list .caption { display:block; text-align:center; font-size:16px; text-transform:none; }
.main-product-list .swiper-controls { margin:1rem 0 0; --swiper-dot-active-color:var(--theme-color); }
.main-product-list2 { overflow:hidden; padding-top:21.6rem; margin:8.3rem var(--size-wrap-pd-m) 0; }
.main-product-list2 .item { position:relative; width:23.6rem; padding:0 1.4rem; aspect-ratio:1/1.06; background-color:transparent !important; }
.main-product-list2 .item > a { display:block; text-align:center; }
.main-product-list2 .item.swiper-slide-active img { transform:scale(1.08); }
.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:-3%; right:-3%; top:0; bottom:6rem; padding:0 2rem; font-size:1.4rem; font-weight:var(--fontWg4); text-align:left; opacity:0; background:#EFEFEF; transition:top var(--time-ani-base), opacity var(--time-ani-base); }
.main-product-list2 .swiper-slide-active .hover-text { top:-20rem; opacity:1; }
.main-product-list2 .i-more2::after { position:absolute; left:50%; top:0; transform:translate(-50%, -50%); }
.main-product-list2 .hover-text::before { content:''; display:block; height:3rem; margin:0 -2rem; border-top:0.2rem solid var(--pointC1); }
.main-product-list2 .hover-text dt { margin-bottom:3.2rem; font-size:2rem; }
.main-product-list2 .hover-text dd { display:flex; text-transform:none; }
.main-product-list2 .hover-text dd .name { flex:none; }
.main-product-list2 .hover-text dd .val { flex:1; margin-left:1.6rem; }
.main-product-list2 .hover-text dd + dd { margin-top:1.6rem; }
.main-product-list2 .swiper-controls { margin:0; }

/* 페이지별 */
.main-section.main-compressor .main-grid .case3 { padding-bottom:0; }
.main-section.main-marine  .sec-head.ty-visual.full { text-align:right; }
.main-section.main-marine .grid-flex { font-size:1.2rem; }
.main-section.main-marine .grid-flex .fx-item { padding:3.2rem 0.6rem 2.2rem; }
.main-section.main-cleanenergy .grid-flex { flex:none; justify-content:space-around; white-space:nowrap; margin-top:2.8rem; }
.main-section.main-cleanenergy .grid-flex .fx-item { flex:none; }
.main-section.main-cleanenergy .grid-flex .caption { margin-top:0.2rem; }
.main-section.main-cleanenergy img[src*=".svg"] { height:6.4rem; }

.main-section.main-introduce { margin-top:20rem; }
.main-section.main-introduce .name { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1.6/1; margin-bottom:2rem; font-size:6rem; font-weight:var(--fontWg4); color:var(--fontC5); }
.main-section.main-introduce .name::before { content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; border-radius:0.8rem; background:var(--img) center center / 100% auto no-repeat; }
.main-section.main-introduce .msg { display:flex; flex-direction:column; font-size:1.4rem; font-weight:var(--fontWg4); line-height:1.57143; }
.main-section.main-introduce .msg dt { margin-bottom:4rem; font-size:2.4rem; font-weight:var(--fontWg4); line-height:1.41667; }
.main-section.main-introduce > a { display:block; position:relative; margin-bottom:9rem; }
.main-section.main-introduce > a .main-go { position:absolute; left:50%; bottom:0; margin-left:-5rem; transform:translateY(50%); }

.main-section.main-press img { width:100%; }
.main-section .press-list .item > a { display:flex; flex-direction:column; padding:3.2rem 0 2.4rem; }
.main-section .press-list .item-thumb { margin-top:2rem; text-align:center; }
.main-section .press-list .item-info { font-size:1.6rem; font-weight:var(--fontWg3); line-height:1.625; }
.main-section .press-list .item-info .item-subj { display:block; font-size:2.4rem; line-height:1.41667; font-weight:var(--fontWg4); }
.main-section .press-list .item-info .item-body { display:block; margin-top:2rem; max-height:3.25em; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; word-break:break-all; -webkit-line-clamp:2; }
.main-section.main-press .press-more::before { content:''; display:block; width:1px; height:5rem; margin:0 auto; background-color:#000; }
.main-section.main-press .main-go { margin-top:0; }

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

/* effect */
.main-section.main-introduce .name { transition:all var(--time-ani-base-slow) 400ms; }
.main-section.main-introduce .name::before { transition:all 1500ms; }
.main-section.main-introduce:not(.visible-ani) .name { opacity:0; }
.main-section.main-introduce:not(.visible-ani) .name::before { background-size:200% auto;}
.main-section.main-introduce .main-go,
.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; }
.main-section.main-introduce .main-go { --delay:2; }
.main-section.main-introduce:not(.visible-ani) .main-go,
.main-section.main-introduce:not(.visible-ani) .msg dt,
.main-section.main-introduce:not(.visible-ani) .msg dd { opacity:0; transform:translateY(var(--fadeup-gap)); }

/* Main Animation */
.main-section { --fadeup-gap:3rem; }
.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(calc(100% - 0.8rem)); }
}
@keyframes ani-circle2 {
	0%, 5%, 95%, 100% { transform:translateX(0); }
	45%, 55% { transform:translateX(calc(-100% + 0.8rem)); }
}