@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 60px;}
.title-area .eng-tit{padding-bottom: 20px;}
.title-area h3{font-weight: 700; color: var(--black);}
.title-area .fs20{padding-top: 40px;}





/* 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: center; 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: 110%; 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: center; 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);}
#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); }
}



/* FOREST BY THE NUMBERS */
#forest{overflow: hidden;}
.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; }




/* WHO WE ARE */
#who { position: relative; background-color: var(--bk000);}
#who .who-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#who .who-bg .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: cover; opacity: 0; transition: opacity 0.5s ease-in-out; }
#who .who-bg .bg::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); mix-blend-mode: soft-light; }
#who .who-bg .bg.on { opacity: 0.7; }
#who .who_in { position: relative; z-index: 1; display: flex; gap: 30px; justify-content: space-between; }
#who .who_in > div{box-sizing: border-box; width: calc((100% - 30px)/2);}
#who .title-sticky{position: sticky; top:110px; transition: all .4s;}
#who .title-area .eng-tit{color:var(--white); opacity: 0.6;}
#who .title-area h3{color:var(--white);}
#who .title-area p{color:var(--white);}

#who .who-list { display: flex; flex-direction: column; gap: 10px; }
#who .who-list li a { display: flex; flex-direction: column; justify-content: center; min-height: 240px; border-radius: var(--borderR20); background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(7.5px); padding: 50px; box-sizing: border-box; transition: all 0.3s; position: relative; overflow: hidden; }
#who .who-list li a dl { display: flex; align-items: center; height: 100%; position: relative; }
#who .who-list li a dt { position: absolute; left: 0; top: 50%; width: 140px; height: 140px; border-radius: var(--borderR10); overflow: hidden; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); transition: transform 0.4s ease, opacity 0.4s ease; transform: translateY(-50%) translateX(-20px); opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none; }
#who .who-list li a dt img {display: block; width: 100%; height: 100%; object-fit: cover; }
#who .who-list li a dd { width: 100%; box-sizing: border-box; padding: 0; display: flex; flex-direction: column; gap: 15px; color: var(--white); position: relative; transition: transform 0.4s ease; transform: translateX(0); z-index: 1; }
#who .who-list li.on a dd { width: calc(100% - 167px); padding: 0 50px 0 0;}
#who .who-list li a dd h4 { font-family: var(--eng); font-weight: 600; line-height: 130%; letter-spacing: 0;}
#who .who-list li a dd p { font-family: var(--kor); font-weight: 400; line-height: 162%; opacity: 0.7; word-break: keep-all; }
#who .who-list li a::after { content: ''; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background:url('/img/who-arrow.png') no-repeat center/contain; opacity: 0; transition: all 0.3s; z-index: 3; }

#who .who-list li.on a { background-color: rgba(32, 88, 64, 0.95); border-color: transparent; }
#who .who-list li.on a dt { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
#who .who-list li.on a dd { transform: translateX(167px); }
#who .who-list li.on a::after { opacity: 1; }



/* 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;}



/* PORTFOLIO */
#portfolio { overflow: hidden; }
#portfolio .portfolio-swiper {overflow: hidden; }
#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%; opacity: 0.5; }
#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; width:43.137%; max-width:330px; height:20%; max-height:90px; }
#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: 10px; transition: color 0.3s; }
#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); }



/* NEWS */
#news { background-color: var(--greenBg); overflow: hidden;}
#news .slider-header { flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 0 0 60px; }
#news .slider-header .tit-area { align-items: center; text-align: center; }
#news .filter-tabs-swiper { width: 100%; }
#news .news-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); }
#news .filter-tabs-swiper .swiper-slide { width: auto; height: auto; }
#news .filter-tabs-swiper .swiper-slide 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%; white-space: nowrap; }
#news .filter-tabs-swiper .swiper-slide.active a, #news .filter-tabs-swiper .swiper-slide a:hover { opacity: 1; }
#news .filter-tabs-swiper .swiper-slide a .count { font-family: var(--eng); font-weight: 400; font-size: 0.778rem; line-height: 166%; }
#news .news-swiper {overflow: hidden; }
#news .news-swiper .swiper-slide a { display: flex; flex-direction: column; gap: 15px; padding: 50px; background-color: var(--white); backdrop-filter: blur(4px); border-radius: var(--borderR20); box-sizing: border-box; height: 100%; transition: all 0.3s; border: 1px solid transparent; }
#news .news-swiper .swiper-slide a:hover { background-color: var(--green); box-shadow: var(--shadow); border-color: rgba(0,0,0,0.05); }
#news .news-swiper .swiper-slide dl { display: flex; gap: 10px; align-items: center; }
#news .news-swiper .swiper-slide dt { color: var(--green); font-family: var(--eng); font-weight: 600; font-size: 0.889rem; line-height: 150%; transition: color 0.3s; }
#news .news-swiper .swiper-slide[data-category="Notice"] dt { color: var(--basic); }
#news .news-swiper .swiper-slide a:hover dt { color: var(--white); }
#news .news-swiper .swiper-slide dd { color: var(--basic); font-family: var(--kor); font-weight: 400; font-size: 0.889rem; line-height: 150%; transition: color 0.3s, opacity 0.3s; }
#news .news-swiper .swiper-slide a:hover dd { color: var(--white); opacity: 0.7; }
#news .news-swiper .swiper-slide h4 { color: var(--black); line-height: 1.4em; height: 2.8em; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color 0.3s; }
#news .news-swiper .swiper-slide a:hover h4 { color: var(--white); }
#news .news-swiper .swiper-slide .text-box { color: var(--basic); line-height: 1.8em; height: 5.4em; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition: color 0.3s, opacity 0.3s;}
#news .news-swiper .swiper-slide a:hover .text-box { color: var(--white); opacity: 0.7; }
#news .news-swiper .swiper-slide .arrow_btn{background:var(--grayBg); margin-top: 15px;}
#news .news-swiper .swiper-slide:hover .arrow_btn i::before { transform: translate(0, 0); }
#news .news-swiper .swiper-slide:hover .arrow_btn i::after { transform: translate(10px, -10px); }




/* LEADERSHIP */
.leadership-list { display: flex; gap: 30px; }
.leadership-list .list {width: calc((100% - 60px)/3); background-color: var(--greenBg); border-radius: var(--borderR20); position: relative; overflow: hidden;}
.leadership-list .list a { display: block; width: 100%; height: 100%; aspect-ratio: 580/800;}
.leadership-list .list .thumb { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
.leadership-list .list .thumb img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; transition: transform 0.5s ease; }
.leadership-list .list:hover .thumb img { transform: scale(1.05); }
.leadership-list .list .desc { position: absolute; left: 30px; bottom: 30px; width: calc(100% - 60px); padding: 30px 30px; box-sizing: border-box; z-index: 2; color: var(--white); transition: all 0.4s ease; transform: translateY(0); background-color: var(--green); border-radius:0 0 var(--borderR20) var(--borderR20);}
.leadership-list .list .desc::before{content: ''; -webkit-mask: url("/img/leadership-bg.svg") no-repeat 50% top; mask: url("/img/leadership-bg.svg") no-repeat 50% top; background-color: var(--green); -webkit-mask-size: 100% auto;  mask-size: 100% auto; height: 100%; width: 100%; position:absolute; top:-50%; left:0;}
.leadership-list .list .desc > *{position: relative; z-index: 2;}
.leadership-list .list .desc .arrow_btn{width: 60px; height: 60px; position: absolute; right: 10px; top:-50%; margin-top: 10px;}
.leadership-list .list .desc .arrow_btn i{width: 14px; height: 14px;}
.leadership-list .list .desc .arrow_btn i::before { transform: translate(-14px, 14px); }
.leadership-list .list:hover .desc .arrow_btn i::before { transform: translate(0, 0); }
.leadership-list .list:hover .desc .arrow_btn i::after { transform: translate(14px, -14px);}
.leadership-list .list .desc h4 { font-family: var(--kor); font-weight: 700; line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.leadership-list .list .desc p { font-family: var(--eng); font-weight: 600; letter-spacing: 0; line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; margin-top: 10px;}

.leadership-list .list .dot-list-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.leadership-list .list:hover .dot-list-wrap { grid-template-rows: 1fr; }
.leadership-list .list .dot-list { margin-top: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s ease, margin-top 0.4s ease; min-height: 0; }
.leadership-list .list:hover .dot-list { margin-top: 16px; opacity: 1; transition-delay: 0.1s; }

.leadership-list .list .dot-list li { position: relative; padding-left: 8px; font-family: var(--eng); font-size: 1rem; line-height: 160%; color: rgba(255, 255, 255, 0.7); }
.leadership-list .list .dot-list li ~ li{margin-top: 6px;}
.leadership-list .list .dot-list li:nth-child(n+3){display:none;}
.leadership-list .list .dot-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; background-color: #D9D9D9; border-radius: 50%; }


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






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


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

/* WHO WE ARE */
#who .title-area h3 br{display: none;}




/* LEADERSHIP */
.leadership-list .list .desc::before{top:-40%;}
.leadership-list .list .desc .arrow_btn{top:-40%;}




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


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



/* WHO WE ARE */
#who .who_in {flex-wrap: wrap; gap: 0;}
#who .who_in > div{width: 100%;}
#who .who-list li a { min-height: 200px; padding: 40px;}

/* NEWS */
#news .slider-header { gap: 30px; padding: 0 0 50px; }
#news .news-swiper .swiper-slide a { padding: 40px; }

/* LEADERSHIP */
#leadership .title-area{width: 90%; margin: 0 auto;}
#leadership .basic_in{width: 100%;}
.leadership-list {box-sizing: border-box; padding: 0 5%; gap: 30px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;}
.leadership-list::-webkit-scrollbar { display: none; }
.leadership-list .list {flex: 0 0 350px; width: 350px;}
.leadership-list .list .desc {}
.leadership-list .list .desc::before{top:-30%;}
.leadership-list .list .desc .arrow_btn{width: 50px; height: 50px; top:-30%;}


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

/* css 공통 */
.title-area{padding: 0 0 40px;}
.title-area .eng-tit{padding-bottom: 10px;}
.title-area .fs20{padding-top: 20px;}



/* 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;}



/* FOREST BY THE NUMBERS */
.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;}


/* WHO WE ARE */
#who .who-list li a { min-height: 160px; padding: 30px;}
#who .who-list li a dt { width: 100px; height: 100px; }
#who .who-list li a dd { gap: 10px; }
#who .who-list li.on a dd { width: calc(100% - 130px);}
#who .who-list li a::after { right: 30px;  }
#who .who-list li.on a dd {transform: translateX(130px);}

/* MAIN COMMON */
.slider-header {gap:20px 60px; padding:  0 0 40px;}
.slider-header .tit-area { gap: 15px; }
.filter-tabs { gap: 20px; 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;}


/* PORTFOLIO */
#portfolio .portfolio-swiper .swiper-slide .desc {padding: 35px 40px; }
#portfolio .portfolio-swiper .swiper-slide .arrow_btn{margin-top: 30px;}
#portfolio .portfolio-swiper .swiper-slide .portfolio-logo{transform:scale(0.88);}


/* NEWS */
#news .slider-header { gap: 20px; padding: 0 0 40px; }
#news .filter-tabs-swiper .swiper-slide a { font-size: 1.444rem; }
#news .news-swiper .swiper-slide a { padding: 30px; }


/* LEADERSHIP */
.leadership-list {gap: 20px;}
.leadership-list .list {flex: 0 0 300px; width: 300px;}
.leadership-list .list .desc { left: 20px; bottom: 20px; width: calc(100% - 40px); padding: 20px;}
.leadership-list .list .desc::before{top:-40%;}
.leadership-list .list .desc .arrow_btn{width: 40px; height: 40px; right: 5px; top:-40%; margin-top: 5px;}
.leadership-list .list .desc .arrow_btn i{width: 10px; height: 10px;}
.leadership-list .list .desc .arrow_btn i::before { transform: translate(-10px, 10px); }
.leadership-list .list:hover .desc .arrow_btn i::before { transform: translate(0, 0); }
.leadership-list .list:hover .desc .arrow_btn i::after { transform: translate(10px, -10px);}
.leadership-list .list .dot-list li::before { top: 8px; }



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


/* css 공통 */
.title-area{padding: 0 0 30px;}
.title-area .eng-tit{padding-bottom: 6px;}
.title-area .fs20{padding-top: 10px;}




/* VISUAL */
#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;}

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




/* FOREST BY THE NUMBERS */
.forest-numbers {gap: 10px;}
.forest-numbers li {width: calc((100% - 10px)/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; }



/* WHO WE ARE */
#who .who-list li a { min-height: 60px; padding: 15px; border-radius: var(--borderR10);}
#who .who-list li.on a{min-height:110px;}
#who .who-list li a dt { width: 80px; height: 80px; }
#who .who-list li a dd { gap: 5px; }
#who .who-list li.on a dd { width: calc(100% - 100px); padding: 0 30px 0 0;}
#who .who-list li a::after { right: 15px; width: 24px; height: 24px;}
#who .who-list li.on a dd {transform: translateX(100px);}
#who .who-list li a dd p{display: none;}



/* 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; }


/* 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); }

#portfolio .portfolio-swiper .swiper-slide .portfolio-logo{transform:scale(0.72);}

/* NEWS */
#news .slider-header { gap: 15px; padding: 0 0 30px; }
#news .filter-tabs-swiper .swiper-slide a { font-size: 1.222rem; }
#news .news-swiper {overflow: visible; }
#news .news-swiper .swiper-slide a { gap: 10px; padding: 25px; border-radius: var(--borderR10); }
#news .news-swiper .swiper-slide dl { gap: 5px; }
#news .news-swiper .swiper-slide .arrow_btn{ margin-top: 10px;}
#news .news-swiper .swiper-slide:hover .arrow_btn i::after { transform: translate(8px, -8px); }


/* LEADERSHIP */
.leadership-list {gap: 10px;}
.leadership-list .list {border-radius: var(--borderR10);}
.leadership-list .list .desc { left: 10px; bottom: 10px; width: calc(100% - 20px); padding: 15px; border-radius:0 0 var(--borderR10) var(--borderR10);}
.leadership-list .list .desc::before{top:-50%;}
.leadership-list .list .desc .arrow_btn{width: 34px; height: 34px; top:-50%;}
.leadership-list .list .desc .arrow_btn i{width: 8px; height: 8px;}
.leadership-list .list .desc .arrow_btn i::before { transform: translate(-8px, 8px); }
.leadership-list .list:hover .desc .arrow_btn i::before { transform: translate(0, 0); }
.leadership-list .list:hover .desc .arrow_btn i::after { transform: translate(8px, -8px);}
.leadership-list .list .desc p {margin-top: 5px;}
.leadership-list .list:hover .dot-list { margin-top: 10px;}
.leadership-list .list .dot-list li ~ li{margin-top: 4px;}


}