@import url("common.css");

/* css 공통 */
.eng-tit{font-family: var(--eng); font-weight: 700; color: var(--sub); line-height: 142%; letter-spacing: 2.8px;}

.title-area{text-align: left; padding: 0 0 70px; display: flex; flex-direction: column; gap:20px;}
.title-area h3{font-weight: 700; color: var(--black); text-wrap: balance;}

section{overflow: hidden;}


/* MAIN QUICK NAV */
#quick-nav { position: fixed; right: 60px; top: 50%; box-sizing: border-box; transform: translateY(-50%); z-index: var(--z-header); display: flex; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; }
#quick-nav.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
#quick-nav .line { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 14px); background-color: var(--border); z-index: 1; }
#quick-nav ul { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: relative; z-index: 2; }
#quick-nav ul li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 21px; padding-left: 20px; pointer-events: none; }
#quick-nav ul li span { font-family: var(--eng); font-weight: 600; font-size: 0.778rem; letter-spacing: 0.1em; color: var(--black); text-transform: uppercase; opacity: 0; transform: translateX(10px); transition: all 0.3s; pointer-events: none; }
#quick-nav ul li a { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 7px; margin: -7px; cursor: pointer; pointer-events: auto; }
#quick-nav ul li a i { display: block; position: relative; width: 7px; height: 7px; background: var(--border); border-radius: 50%; transition: all 0.3s; }
#quick-nav ul li.active a i::after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--sub); animation: dotPulse 1.5s infinite ease-out; }
#quick-nav ul li.active span,
#quick-nav ul li:hover span { opacity: 1; transform: translateX(0); color: var(--sub); }
#quick-nav ul li.active a i,
#quick-nav ul li:hover a i { background: var(--sub); }

@keyframes dotPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(5); opacity: 0; }
}



/* VISUAL */
#visual{position: relative; width: 100%; height: var(--vh); background: var(--bk000); overflow: hidden;}
#visual .visual-swiper{position: relative; width: 100%; height: 100%;}
#visual .visual-swiper .swiper-slide{background: var(--bk000);}
#visual .visual-swiper .swiper-slide.swiper-slide-active{z-index: 99;}
#visual .visual-swiper .swiper-slide .v_txt{text-align: left; position: absolute; left: 50%; top:54%; transform: translate(-50%,-50%); z-index: 99;}
#visual .visual-swiper .swiper-slide .v_txt h2{color:var(--white); line-height: 120%; letter-spacing: 0; opacity: 0; transform: translateY(60px); transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); font-family: var(--eng2);}
#visual .visual-swiper .swiper-slide .v_txt p{padding-top: 30px; color: var(--white); opacity: 0; transform: translateY(60px); transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
#visual .visual-swiper .swiper-slide .v_txt .btn-area{padding-top: 60px; display: flex; justify-content: flex-start;  text-align: left; opacity: 0; transform: translateY(60px); transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}

#visual .visual-swiper .swiper-slide-active .v_txt h2{opacity: 1; transform: translateY(0); transition-delay: 0.3s;}
#visual .visual-swiper .swiper-slide-active .v_txt p{opacity: 1; transform: translateY(0); transition-delay: 0.5s;}
#visual .visual-swiper .swiper-slide-active .v_txt .btn-area{opacity: 1; transform: translateY(0); transition-delay: 0.7s;}
#visual .visual-swiper .swiper-slide .v_txt .more_btn{background: var(--white); width: 200px;}
#visual .visual-swiper .swiper-slide .v_txt .more_btn::after{border-color: var(--white);}
#visual .visual-swiper .swiper-slide .v_txt .more_btn:hover::after{border-color: var(--sub);}
#visual .visual-swiper .swiper-slide .v_txt .more_btn i::before{background-image: url('/img/arrow_w.png');}
#visual .visual-swiper .swiper-slide .v_txt .more_btn i::after{background-image: url('/img/arrow.png');}
#visual .visual-swiper .swiper-slide .v_bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; overflow: hidden;}
#visual .visual-swiper .swiper-slide .v_bg .bg{display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; box-sizing: border-box; background-size: cover; background-position: center; background-repeat:no-repeat;}
#visual .visual-swiper .swiper-slide .v_bg img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 0.45s ease-out;}
#visual .visual-swiper .swiper-slide-active .v_bg img{transform: scale(1.08); transition: transform 6.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
#visual .visual-controls { position: absolute; right: 5%; bottom: 40px; z-index: 99; display: flex; gap: 20px; align-items: center; }
#visual .swiper-pagination { display: flex; gap: 20px; align-items: center; position: static;}
#visual .swiper-pagination-bullet { position: relative; display: flex; align-items: center; justify-content: flex-start; font-family: var(--eng); font-weight: 500; font-size: 0.889rem; color: var(--white); opacity: 0.5; cursor: pointer; transition: all 0.3s; background: none; width: auto; height: auto; border-radius: 0; }
#visual .swiper-pagination-bullet-active { opacity: 1; }
#visual .swiper-pagination-bullet-active::after { content: ''; display: block; width: 100px; height: 2px; background-color: rgba(255, 255, 255, 0.1); margin-left: 20px; }
#visual .swiper-pagination-bullet-active::before { content: ''; position: absolute; left: 38px; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background-color: var(--white); z-index: 1; animation: visualProgress 5s linear forwards; }

@keyframes visualProgress {
    0% { width: 0; }
    100% { width: 100px; }
}

#visual .scroll_down { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#visual .scroll_down img { display: block; width: 17px; height: auto; animation: scrollDownAnim 1.5s ease-in-out infinite; }
#visual .scroll_down img:nth-child(2) { animation-delay: 0.15s; margin-top: -5px; }

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


/* MAIN COMMON */
.slider-header { display: flex; align-items: flex-end; justify-content: space-between; gap:30px 60px; flex-wrap: wrap; width: 100%; padding:  0 0 60px;}
.slider-header .tit-area { display: flex; flex-direction: column; gap: 20px; }
.slider-header h3 { color: var(--black); line-height: 128%; }
.filter-tabs { display: flex; gap: 30px; align-items: flex-start; }
.filter-tabs li a { display: flex; gap: 3px; align-items: flex-start; color: var(--green); opacity: 0.3; transition: opacity 0.3s; font-family: var(--eng); font-weight: 600; font-size: 1.667rem; line-height: 133%; }
.filter-tabs li.active a, .filter-tabs li a:hover { opacity: 1; }
.filter-tabs li a .count { font-family: var(--eng); font-weight: 400; font-size: 0.778rem; line-height: 166%; }
.slider-wrap { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.slider-controls { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 40px; width: 100%; }
.slider-arrow {display: flex; align-items: center; gap: 40px; position: relative;}
.slider-arrow::after{content: ''; display: block; width: 1px; height: 100%; background: var(--border); position: absolute; left: 50%; top:0;}
.swiper-arrow-button { width: 20px; height: 20px; background: none; border: 0; padding: 0; cursor: pointer; display: block; background: url('/img/arrow.png') no-repeat center/contain; opacity: 0.3; transition: all .3s;}
.swiper-arrow-button:hover {opacity: 1; transition: all .3s linear;}
.swiper-arrow-button.swiper-arrow-button-prev {transform: rotate(180deg);}
.swiper-arrow-button.swiper-button-lock{display: none;}


/* Philosophy & Strategy */
.philosophy-wrap { display: flex; gap: 30px; margin-bottom: 100px; }
.philosophy-wrap > div{box-sizing: border-box; width: calc(50% - 15px);}
.philosophy-visual { flex-shrink: 0;  overflow: hidden; }
.philosophy-img-swiper {display: block; aspect-ratio: 885/600; width: 100%; height: 100%; overflow: hidden; border-radius: var(--borderR20); }
.philosophy-img-swiper .swiper-wrapper{gap:0;}
.philosophy-img-swiper .swiper-slide { width: 100%; height: 100%; margin: 0 !important;}
.philosophy-img-swiper .img-box {display: block; width: 100%; height: 100%; aspect-ratio: 885/600; overflow: hidden; border-radius: var(--borderR20);}
.philosophy-img-swiper .img-box img { width: 100%; height: 100%; object-fit: cover; }
.philosophy-cont {display: flex; flex-direction: column; gap:70px; justify-content: space-between; padding: 80px 0 40px 50px; box-sizing: border-box; min-width: 0; }
.philosophy-head { display: flex; flex-direction: column; gap: 20px; }
.philosophy-label { font-family: var(--eng); font-weight: 700; font-size: 0.889rem; line-height: 142.86%; letter-spacing: 2.8px; text-transform: uppercase; color: var(--sub); }
.philosophy-head .fs50 { color: var(--black); }
.philosophy-txt-swiper { width: 100%; }
.philosophy-txt { display: flex; flex-direction: column;  gap: 20px; align-items: flex-start;}
.point-badge { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 50px; background-color: var(--green); color: var(--white); font-family: var(--eng); font-weight: 700; font-size: 0.889rem; line-height: 142.86%; letter-spacing: 2.8px; text-transform: uppercase; }
.philosophy-txt .fs27 { color: var(--black); }
.philosophy-txt .fs18 { color: var(--basic); }
.philosophy-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.philosophy-fraction { display: flex; align-items: center; gap: 10px; font-family: var(--eng); font-weight: 500; font-size: 0.889rem; line-height: 171.43%; }
.philosophy-fraction .current { color: var(--green); }
.philosophy-fraction .slash, .philosophy-fraction .total { color: var(--black); opacity: 0.3; }


.forest-numbers { display: flex; gap: 30px; justify-content: center; align-items: center; width: 100%; }
.forest-numbers li { flex: 1; height: 400px; perspective: 1000px; }
.forest-numbers .flipper { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; }
.forest-numbers li:hover .flipper { transform: rotateY(180deg); }
.forest-numbers .front, .forest-numbers .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--borderR20); padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.forest-numbers .front { background-color: var(--greenBg); transform: rotateY(0deg); }
.forest-numbers .back { background-color: var(--green); transform: rotateY(180deg); }
.forest-numbers .icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.forest-numbers .icon img, .forest-numbers .icon svg { width: 100%; height: 100%; object-fit: contain; }
.forest-numbers .icon-back { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.forest-numbers .icon-back img, .forest-numbers .icon-back svg { width: 100%; height: 100%; object-fit: contain; }
.forest-numbers .icon-back path{fill: var(--white);}
.forest-numbers .txt-area { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.forest-numbers .front .txt-area { align-items: flex-start; }
.forest-numbers .back .txt-area { align-items: flex-start; }
.forest-numbers .txt-area p:first-child { font-family: var(--kor); font-weight: 300; font-size: 3.333rem; line-height: 116%; display: flex; align-items: baseline; gap: 5px; }
.forest-numbers .front .txt-area p:first-child { color: var(--green); }
.forest-numbers .back .txt-area p:first-child { color: var(--white); }
.forest-numbers .txt-area p:first-child small { font-size: 1.111rem; line-height: 166%; letter-spacing: var(--letter-spacing-default); font-weight: 400; }
.forest-numbers .txt-area p:first-child span { line-height: 116%; }
.forest-numbers .txt-area p.fs14 { font-family: var(--kor); font-weight: 500; font-size: 0.889rem; line-height: 171%; }
.forest-numbers .front .txt-area p.fs14 { color: var(--basic); }
.forest-numbers .back .txt-area p.fs14 { color: var(--white); opacity: 0.7; }



/* LEADERSHIP */
.leadership-util { display: flex; align-items: center; gap: 30px; flex-shrink: 0; position: absolute; right: 0; top:-110px;}
.leadership-util .more_btn{background: var(--white);}

.leadership-wrap{position: relative;}
.leadership-swiper { overflow: hidden; }
.leadership-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
.leadership-swiper .swiper-slide{height: auto;}

.leader-card { display: flex; position: relative; width: 100%; height: 100%; box-sizing: border-box; background-color: var(--white); border-radius: var(--borderR20); overflow: hidden; }
.leader-photo {width: 475px; aspect-ratio: 475/500; overflow: hidden; pointer-events: none; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.leader-card:hover .leader-photo img { transform: scale(1.05); }
.leader-cont { position: relative; width: calc(100% - 475px); height: 100%; display: flex; flex-direction: column; gap:70px; justify-content: space-between; padding: 80px 30px 80px 20px; box-sizing: border-box; }
.leader-cont .arrow_btn { position: absolute; top: 30px; right: 30px; width: 60px; height: 60px; background-color: var(--greenBg); }
.leader-cont .arrow_btn i { width: 14px; height: 14px; }
.leader-cont .arrow_btn i::before { transform: translate(-14px, 14px); }
.leader-card:hover .leader-cont .arrow_btn i::before { transform: translate(0, 0); }
.leader-card:hover .leader-cont .arrow_btn i::after { transform: translate(14px, -14px); }
.leader-top { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.leader-name { display: flex; flex-direction: column; gap: 10px; }
.leader-name .fs40 { color: var(--black); }
.leader-name .fsE18 { color: var(--green); }
.leader-dot-list { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.leader-dot-list li { position: relative; padding-left: 8px; font-family: var(--eng); font-size: 1rem; line-height: 162.5%; color: rgba(10,10,10,.6); letter-spacing: 0;}
.leader-dot-list li::before { content: ''; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius: 5px; background:rgba(119,119,119,.6); }
.leader-quote { display: flex; flex-direction: column; gap: 20px; }
.leader-quote .quote-mark {display: block; font-size:0; width: 21px; height: 21px; background: url('/img/quote-mark.png') no-repeat center/contain; }
.leader-quote .fs18 { color: var(--black); opacity: 0.6; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }


/* PORTFOLIO */
#portfolio { overflow: hidden; }
#portfolio .portfolio-swiper {overflow: hidden; }
#portfolio .portfolio-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
#portfolio .portfolio-swiper .swiper-slide a { display: flex; flex-direction: column; background-color: var(--greenBg); border-radius:var(--borderR20); box-sizing: border-box; height: 100%; overflow: hidden; transition: all 0.3s; }
#portfolio .portfolio-swiper .swiper-slide a:hover { box-shadow: var(--shadow); background-color: var(--green); }
#portfolio .portfolio-swiper .swiper-slide .thumb { position: relative; background-color: var(--black); border-radius: var(--borderR20); overflow: hidden; aspect-ratio: 580/340; display:flex; align-items:center; justify-content:center;}
#portfolio .portfolio-swiper .swiper-slide .portfolio-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#portfolio .portfolio-swiper .swiper-slide .portfolio-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
#portfolio .portfolio-swiper .swiper-slide a:hover .portfolio-img img { transform: scale(1.1); }
#portfolio .portfolio-swiper .swiper-slide .portfolio-logo { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; max-width: 369px; width: 90%; aspect-ratio: 369/100; overflow: hidden; }
#portfolio .portfolio-swiper .swiper-slide .portfolio-logo img {display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
#portfolio .portfolio-swiper .swiper-slide .desc { display: flex; flex-direction: column; justify-content: space-between; padding: 45px 50px; box-sizing: border-box; }
#portfolio .portfolio-swiper .swiper-slide h4 { color: var(--black); line-height: 120%; text-align: left; margin-bottom: 12px; transition: color 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#portfolio .portfolio-swiper .swiper-slide a:hover h4 { color: var(--white); }
#portfolio .portfolio-swiper .swiper-slide .text-box { color: var(--basic); line-height: 1.6em; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 4.8em; transition: color 0.3s, opacity 0.3s; }
#portfolio .portfolio-swiper .swiper-slide a:hover .text-box { color: var(--white); opacity: 0.7; }
#portfolio .portfolio-swiper .swiper-slide .arrow_btn{margin-top: 46px;}
#portfolio .portfolio-swiper .swiper-slide:hover .arrow_btn i::before { transform: translate(0, 0); }
#portfolio .portfolio-swiper .swiper-slide:hover .arrow_btn i::after { transform: translate(10px, -10px); }




/* THE LATEST NEWS */
#news .title-area{display: flex; flex-direction: row;  align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap:50px;}
#news .title-area .txt-box{display: flex; flex-direction: column; gap: 20px;}
#news .leadership-util .more_btn{background: var(--white);}

.news-list { display: flex; gap: 30px; min-width: 0; }
.news-featured,
.news-grid{width: calc((100% - 30px)/2); min-width: 0;}
.news-featured { position: relative; height: 450px; flex-shrink: 0; border-radius: var(--borderR20); overflow: hidden; padding: 50px; box-sizing: border-box; display: block; }
.news-featured .news-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.news-featured .news-bg img { width: 100%; height: 100%; object-fit: cover; }
.news-featured .arrow_btn { position: absolute; top: 30px; right: 30px; width: 60px; height: 60px; background-color: var(--greenBg); z-index: 2; }
.news-featured .arrow_btn i { width: 14px; height: 14px; }
.news-featured .arrow_btn i::before { transform: translate(-14px, 14px); }
.news-featured:hover .arrow_btn i::before { transform: translate(0, 0); }
.news-featured:hover .arrow_btn i::after { transform: translate(14px, -14px); }

.news-featured-in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap:30px; height: 100%; color: var(--white); }
.news-featured-in .news-top { display: flex; flex-direction: column; gap: 17px; }
.news-featured-in .news-meta { display: flex; align-items: center; gap: 10px; }
.news-featured-in .news-meta .cate { font-family: var(--eng); font-weight: 600; font-size: 1rem; line-height: 150%; }
.news-featured-in .news-meta .date { font-family: var(--eng); font-weight: 400; font-size: 1rem; line-height: 162.5%; opacity: 0.7; }
.news-featured-in .fs28 { color: var(--white); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-featured-in .fs16 { color: var(--white); line-height: 162.5%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:30px; min-width: 0; }
.news-grid li { min-width: 0; }
.news-item { display: flex; flex-direction: column; justify-content: space-between; gap:30px; padding: 30px 40px; box-sizing: border-box; border-radius: var(--borderR20); background-color: var(--white); backdrop-filter: blur(4px); width: 100%; min-width: 0; height: 100%; transition: background-color 0.3s ease; }
.news-item:hover { background-color: var(--main); }
.news-item .news-meta { display: flex; align-items: center; gap:5px 10px; flex-wrap: wrap;}
.news-item .news-meta .cate { font-family: var(--eng); font-weight: 600; font-size: 0.889rem; line-height: 142.86%; color: var(--green); transition: color 0.3s ease; }
.news-item .news-meta .date { font-size: 0.889rem; line-height: 171.43%; color: var(--basic); transition: color 0.3s ease; }
.news-item .news-tit { font-family: var(--kor); font-weight: 600; font-size: 1.111rem; line-height: 150%; color: var(--black); min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color 0.3s ease; }
.news-item:hover .news-meta .cate, .news-item:hover .news-meta .date, .news-item:hover .news-tit { color: var(--white); }



/*******************************************************************************
    @media 1950px
*******************************************************************************/
@media all and (max-width:1950px){



/* LEADERSHIP */
.leader-photo {width: 50%;}
.leader-cont { width: 50%; gap:40px; padding: 50px 30px 50px 20px; }

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/* MAIN QUICK NAV */
#quick-nav{display: none;}



/* LEADERSHIP */
.leader-card {flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
.leader-photo {width: 100%;}
.leader-photo img{object-fit: contain;}
.leader-cont { width: 100%; height: auto; padding: 50px 40px;}


/* THE LATEST NEWS */
.news-featured { height: 620px; }

.news-grid { grid-template-columns: repeat(1, 1fr); grid-gap:10px; min-width: 0; }
.news-item .news-tit { min-width: 0; max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; -webkit-box-orient: unset; }




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){


/* Philosophy & Strategy */
.philosophy-cont {padding: 30px 0 30px 20px; gap:30px;}

.forest-numbers {flex-wrap: wrap; gap: 30px;}
.forest-numbers li { flex: auto; width: calc((100% - 30px)/2); height: 350px; }



}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* css 공통 */
.title-area{padding: 0 0 40px; gap:15px;}



/* VISUAL */
#visual .visual-swiper .swiper-slide .v_txt p{padding-top: 20px;}
#visual .visual-swiper .swiper-slide .v_txt .btn-area{padding-top: 40px;}

#visual .visual-controls {right:50%; transform: translateX(50%); bottom: 80px;}
#visual .scroll_down { bottom: 30px;}





/* Philosophy & Strategy */
.philosophy-wrap {gap: 40px; margin-bottom: 80px; flex-wrap: wrap; flex-direction: column-reverse;}
.philosophy-wrap > div{width: 100%;}
.philosophy-cont {padding: 0; gap:25px;}
.philosophy-head { gap: 15px; }
.philosophy-txt { gap: 15px;}
.point-badge { height: 35px; font-size: 0.778rem;}


.forest-numbers {gap: 20px;}
.forest-numbers li { width: calc((100% - 20px)/2); height: 300px; }
.forest-numbers .front, .forest-numbers .back { padding: 30px; }
.forest-numbers .icon { width: 50px; height: 50px;}
.forest-numbers .icon-back { width: 50px; height: 50px;  }
.forest-numbers .txt-area { gap: 10px; }
.forest-numbers .txt-area p:first-child { font-size: 2.778rem;}


/* MAIN COMMON */
.slider-header {gap:20px 60px; padding:  0 0 40px;}
.slider-header .tit-area { gap: 15px; }
.filter-tabs { gap: 20px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tabs li { flex-shrink: 0; }
.filter-tabs li a { font-size: 1.444rem; }
.slider-wrap {gap: 30px; }
.slider-controls { padding-top: 30px; }
.slider-arrow {gap: 30px;}



/* LEADERSHIP */
.leadership-wrap{}
.leadership-util {margin: 30px 0 0; justify-content: space-between; gap: 20px; position: relative; right: auto; top: auto;}
.leadership-swiper { overflow: visible; }
.leader-card { flex-wrap: wrap; align-items: flex-start; align-content: flex-start;}
.leader-photo {width: 100%;}
.leader-photo img{object-fit: contain;}
.leader-cont { width: 100%; height: auto; gap:20px; padding: 30px; }
.leader-cont .arrow_btn { top: 20px; right: 20px; width: 40px; height: 40px; }
.leader-cont .arrow_btn i { width: 10px; height: 10px; }
.leader-cont .arrow_btn i::before { transform: translate(-10px, 10px); }
.leader-card:hover .leader-cont .arrow_btn i::after { transform: translate(10px, -10px); }
.leader-top { gap: 10px; }
.leader-name {gap: 6px; }
.leader-dot-list {}
.leader-dot-list li { padding-left: 8px;}
.leader-dot-list li::before { top: 12px;}
.leader-quote { gap: 10px; }
.leader-quote .quote-mark {width: 16px; height: 16px; }




/* PORTFOLIO */
#portfolio .portfolio-swiper .swiper-slide .desc {padding: 35px 40px; }
#portfolio .portfolio-swiper .swiper-slide .arrow_btn{margin-top: 30px;}



/* THE LATEST NEWS */
#news .title-area{gap:30px;}
#news .title-area .txt-box{gap: 15px;}

.news-list {gap: 10px; flex-wrap: wrap;}
.news-featured,
.news-grid{width: 100%;}
.news-featured { height: auto; padding:80px 30px; }
.news-featured .arrow_btn { top: 20px; right: 20px; width: 40px; height: 40px; }
.news-featured .arrow_btn i { width: 10px; height: 10px; }
.news-featured .arrow_btn i::before { transform: translate(-10px, 10px); }
.news-featured:hover .arrow_btn i::before { transform: translate(0, 0); }
.news-featured:hover .arrow_btn i::after { transform: translate(10px, -10px); }

.news-featured-in { gap:20px; }
.news-featured-in .news-top { gap: 10px; }
.news-item { gap:15px; padding: 25px 30px;}
.news-item .news-tit { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* css 공통 */
.title-area{padding: 0 0 30px; gap:10px;}

/* VISUAL */
#visual .visual-swiper .swiper-slide .v_txt{text-align: center;}
#visual .visual-swiper .swiper-slide .v_txt p{padding-top: 15px; text-wrap: balance;}
#visual .visual-swiper .swiper-slide .v_txt .btn-area{padding-top: 30px; justify-content: center;}
#visual .visual-swiper .swiper-slide .v_txt .more_btn{width: 180px;}

#visual .visual-controls {bottom: 80px; gap:10px;}
#visual .swiper-pagination { gap: 10px; }
#visual .swiper-pagination-bullet-active::after {width: 30px; margin-left: 10px; }
#visual .swiper-pagination-bullet-active::before { left: 28px; }

#visual .scroll_down { bottom: 30px;}
#visual .scroll_down img{ width: 13px; height: auto;}

@keyframes visualProgress {
    0% { width: 0; }
    100% { width: 30px; }
}


/* Philosophy & Strategy */
.philosophy-wrap {gap: 30px; margin-bottom: 60px;}
.philosophy-visual { border-radius: var(--borderR10); }
.philosophy-head { gap: 10px; }
.philosophy-txt { gap: 10px;}
.point-badge { height: 30px; padding: 0 15px; font-size: 0.667rem;}
.philosophy-fraction { gap: 5px; }


.forest-numbers {gap: 5px;}
.forest-numbers li { width: calc((100% - 5px)/2); height: 185px; }
.forest-numbers .front, .forest-numbers .back { border-radius: var(--borderR10); padding: 15px; }
.forest-numbers .icon { width: 40px; height: 40px;}
.forest-numbers .icon-back { width: 40px; height: 40px;  }
.forest-numbers .txt-area { gap: 5px; }
.forest-numbers .txt-area p:first-child { font-size: 2.222rem; }

/* MAIN COMMON */
.slider-header {padding:  0 0 30px;}
.slider-header .tit-area { gap: 10px; }
.filter-tabs { gap: 15px; }
.filter-tabs li a { font-size: 1.222rem; }
.slider-wrap {gap: 20px; }
.slider-controls { padding-top: 20px; }
.swiper-arrow-button { width: 16px; height: 16px; }



/* LEADERSHIP */
.leader-card { border-radius: var(--borderR10); background: none;}
.leader-photo{background: var(--white);}
.leader-cont { gap:0; padding: 20px; background-color: var(--main);}
.leader-cont .arrow_btn { top: 20px; right: 20px; width: 34px; height: 34px; }
.leader-cont .arrow_btn i { width: 8px; height: 8px; }
.leader-cont .arrow_btn i::before { transform: translate(-8px, 8px); }
.leader-card:hover .leader-cont .arrow_btn i::after { transform: translate(8px, -8px); }
.leader-dot-list {display: none;}
.leader-quote { display: none;}
.leader-name .fs40{color: var(--white);}
.leader-name .fsE18{color: var(--white);}
.leader-card{background: var(--main);}

/* PORTFOLIO */
#portfolio .portfolio-swiper {overflow: visible; }
#portfolio .portfolio-swiper .swiper-slide a { border-radius:var(--borderR10); }
#portfolio .portfolio-swiper .swiper-slide .thumb{border-radius:var(--borderR10); }
#portfolio .portfolio-swiper .swiper-slide .desc {padding: 25px; }
#portfolio .portfolio-swiper .swiper-slide h4 { margin-bottom: 5px; }
#portfolio .portfolio-swiper .swiper-slide .arrow_btn{margin-top: 20px;}
#portfolio .portfolio-swiper .swiper-slide:hover .arrow_btn i::after { transform: translate(8px, -8px); }


/* THE LATEST NEWS */
#news .title-area{gap:25px;}
#news .title-area .txt-box{gap: 10px;}

.news-featured { height: auto; padding:60px 25px; border-radius: var(--borderR10);}
.news-featured .arrow_btn {width: 34px; height: 34px; }
.news-featured .arrow_btn i { width: 8px; height: 8px; }
.news-featured .arrow_btn i::before { transform: translate(-8px, 8px); }
.news-featured:hover .arrow_btn i::before { transform: translate(0, 0); }
.news-featured:hover .arrow_btn i::after { transform: translate(8px, -8px); }

.news-item {gap:15px; padding: 25px; border-radius: var(--borderR10); }
.news-item .news-meta { gap: 6px; }

}