@charset "utf-8";

:root{
    --header-height:60px;
    --target-width:1400px;
    --inner-padding:20px;
    --full-padding:40px;

    --font-xl:2.5rem;
    --font-lg2:2rem;
    --font-lg:1.4rem;
    --font-md:1.2rem;
    --font-base:1rem;
    --font-sm:.9rem;
    --font-xs:.8rem;
    --line-height:1.4;

    --black:#030303;
    --black-3:#333;
    --gray-8:#878B95;
    --gray-5:#5d5d5d;
    --gray_9:#999;
    --gray-e:#EBEEF3;
    --gray-b:#bebebe;
    --gray-a:#aaa;
    --gray-f:#F2F3F6;
    --blue:#0f83f1;
    --sky:#60a5fa;
    --dark-blue:#081b33;
    --white-05:rgba(255,255,255,.05);
    --white-1:rgba(255,255,255,.1);
    --white-2:rgba(255,255,255,.2);
    --white-5:rgba(255,255,255,.5);
    --white-9:rgba(255,255,255,.9);
    --black-07:rgba(0,0,0,.7);

    --gap-xl:150px;
    --gap-lg:100px;
    --gap-md5:50px;
    --gap-md3:30px;
    --gap-sm:20px;
    --gap-xs:10px;
    --gap-mini:5px;

    --radius:20px;
    --radius-sm:5px;
    --border:1px solid #dfdfdf;
}

ul{font-size:inherit;}
.button{transition:all .3s ease;}
.button.lg{height:50px; border-radius:100px; padding:0 20px; border:1px solid #ddd; font-weight:600;}
.bd_white{border-color:#fff; color:#fff;}
.bd_white:hover{background-color:#fff; color:var(--black)}

.weight600{font-weight:600;}
.hoverimg img{transition:all .5s ease;}
.hoverimg:hover img{transform:scale(1.05);}
.video{position:relative; aspect-ratio:16 / 9; border-radius:var(--radius); overflow:hidden;}
.video video, .video iframe{position:absolute; width:100%; height:100%;}
.img{position:relative; border-radius:var(--radius); overflow:hidden} /* aspect-ratio:1 / 1; 제거 */
.img img{position:absolute; width:100%; height:100%;}


a:focus { outline:none; }
button:focus { outline:none; }


/* ========================================================================
    Main Header
======================================================================== */
.header_r{position:sticky; top:0; width:100%; background:#fff; z-index:20;}
.header_r h1{position:absolute; top:50%; transform:translateY(-50%); left:var(--inner-padding)}
.header_r h1 a{display:flex; align-items:center; justify-content:center; width:72px}
.header_r .inner_r{display:flex; align-items:center; justify-content:center; position:relative; height:var(--header-height)}
.gnb_r{display:flex; gap:50px; font-size:var(--font-xs); font-weight:500;}
.gnb_r .depth1{color:var(--black); position:relative;}
.gnb_r .depth1::before{content:''; position:absolute; bottom:-5px;
left:0; width:0; height:2px; border-radius:100px; background:var(--blue); transition:width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.gnb_r .depth1.active::before, .gnb_r .depth1:hover::before{width:100%;}
.gnb_r .depth2{position:absolute; top:var(--header-height); left:calc(50% - 50.7dvw); width:100dvw; background:var(--white-9); opacity:0; visibility:hidden; z-index:-1; transform:translateY(-10px); transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; gap:50px; padding:20px 0;}
.gnb_r > li:hover .depth2{opacity:1; visibility:visible; transform:translateY(0);}
.gnb_r .depth2 a{color:var(--gray-8)}
.gnb_r .depth2 li:hover a, .gnb_r .depth2 li.acitve a{color:var(--black)}
.header_r .right{position:absolute; top:50%; transform:translateY(-50%); right:var(--inner-padding); display:flex; gap:10px;}
.sns_r button{font-size:var(--font-xs); font-weight:500; background:var(--gray-e); border-radius:100%; transition:all .3s ease; width:30px; height:30px; display:flex; align-items:center; justify-content:center;}
.sns_r svg{width:16px; height:16px;}
.sns_r button:hover{background:var(--gray-b);}
.sns_r .lang{border-radius:var(--radius); padding:0 10px; width:auto}

.header_r .mo_gnb{display:none;}


/* ========================================================================
    Main Footer
======================================================================== */
.footer_r{background:var(--gray-f); padding:var(--gap-md5) 0; margin-top:var(--gap-xl); font-size:var(--font-sm);}
.footer_r .inner_r{display:flex; flex-direction:column; gap:var(--gap-md3);}
.footer_r h1{width:90px}
.footer_r .txt_area{display:flex; justify-content:space-between;}
.footer_r .info{display:flex; flex-direction:column; gap:var(--gap-xs);}
.footer_r .info .item{display:grid; grid-template-columns:100px auto;}
.footer_r .sitemap{display:flex; gap:var(--gap-md5);}
.footer_r .sitemap > li > a{font-weight:var(--font-md); font-weight:600;}
.footer_r .depth2{display:flex; flex-direction:column; gap:var(--gap-xs); margin-top:var(--gap-sm);}
.footer_r .mark_area{padding-top:var(--gap-md3); margin-top:var(--gap-md3); border-top:1px solid rgba(48, 48, 48, 0.1); display:flex; justify-content:space-between;}
.footer_r .f_link{display:flex; flex-direction:column; gap:var(--gap-xs);}
.footer_r .link{display:flex; gap:var(--gap-sm);}
.footer_r .copy{font-size:var(--font-xs); color:var(--gray_5)}
.footer_r .mark{display:flex; gap:var(--gap-xs); margin-right:70px;}
.footer_r .mark img{width:44px; filter:grayscale();}


/* ========================================================================
    메인 검색 
======================================================================== */
.main_r{display:flex; flex-direction:column;}
.inner_r{width:100%; max-width:1440px; margin:0 auto; padding-left:var(--inner-padding); padding-right:var(--inner-padding); position:relative}

.sticky-wrapper{height:150vh; position:relative;}
.search_area{position:sticky; top:var(--header-height); width:100%; height:calc(100dvh - var(--header-height) * 2); margin:0 auto; background:var(--dark-blue); display:flex; align-items:center; justify-content:center; overflow:hidden; transition: border-radius 0.2s ease-out, margin-top 0.2s ease-out; will-change:width, border-radius, margin-top;}
.video_back::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); z-index:1;}
.video_back video{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}

.ai_search{width:100%; max-width:1000px; padding:20px; color:#fff; transition:transform 0.3s ease-out; display:flex; flex-direction:column; gap:var(--gap-md5); z-index:2;}
.ai_search .tit{font-size:var(--font-lg2); font-weight:700; text-align:center;}
.input_area{position:relative; background:var(--white-2); border-radius:var(--radius); padding:var(--gap-md3); backdrop-filter:blur(10px); transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1); will-change:transform; backface-visibility:hidden; transform:translateZ(0);}
.input_area:focus-within{transform:scale(1.05);}
#ai-textarea{background:none; border:none; color:#fff; padding:0;}
.ai_btn{display:block; margin:10px 0 0 auto; background:var(--blue); border-radius:100%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; transition:all .3s cubic-bezier(0.34, 1.56, 0.64, 1)}
.ai_btn:hover{transform:scale(1.1);}
.placeholder_rolling{position:absolute; top:var(--gap-md3); left:var(--gap-md3); height:24px; overflow:hidden; pointer-events:none; color:var(--gray-e)}
.placeholder_list li{line-height:24px; height:24px}
.search_list{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;}
.search_list button{background:var(--white-2); border:1px solid var(--white-2); padding:0 20px; height:40px; display:flex; gap:var(--gap-mini); align-items:center; border-radius:100px; font-size:var(--font-xs); transition:all .2s; color:#fff}
.search_list button:hover{background:var(--white-05)}
.search_list .plus{background:var(--blue); border-color:var(--blue);}


/* ========================================================================
    main_area
======================================================================== */
.title_wrap{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--gap-md5);}
.title_wrap div{display:flex; flex-direction:column; gap:var(--gap-xs);}
.title_wrap small{font-weight:600;}
.title_wrap h2{line-height:1; font-size:var(--font-lg2);}
.title_wrap a{font-size:var(--font-xs); font-weight:600;}

.main_area_track{height:200vh; position:relative;}
.main_area_sticky{position:sticky; top:0; height:100dvh; display:flex; align-items:center; overflow:hidden;}
.main_area .item{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; gap:var(--gap-lg); opacity:0; visibility:hidden; transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1); width:100%; height:calc(100dvh - var(--header-height) * 2);}
.main_area .item.active{opacity:1; visibility:visible;}
.main_area .item.exit{opacity:0; transform:translate(-50%, -60%);}
.main_area .txt_area{display:flex; flex-direction:column; gap:var(--gap-md5);  position:relative; z-index:2; height:100%; justify-content:center; padding-left:var(--gap-lg);}
.main_area .tit{font-size:var(--font-lg2); color:#fff; font-weight:700; line-height:var(--line-height);}
.main_area .img_area{border-radius:var(--radius); position:absolute; top:0; width:100%; height:100%}
.main_area .img_area::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:var(--black-07); z-index:1;}
.main_area .txt{color:var(--white-5); font-size:var(--font-sm);}
.main_area .img_area > *{object-fit:cover;}


/* ========================================================================
    사업 소개
======================================================================== */
.business_area{margin-top:var(--gap-lg);}
.business_area_scroll{position:relative; width:100%; height:350vh;}
.business_area_sticky{position:sticky; top:calc(var(--header-height) + var(--gap-sm)); width:100%; display:flex; flex-direction:column; overflow:hidden;}
.business_area_list{display:flex; gap:var(--gap-md3); will-change:transform; padding-left:max(var(--inner-padding), calc((100% - 1440px) / 2 + var(--inner-padding))); transition:none}
.business_area_list .item{flex-shrink:0; opacity:0; transform:translateY(60px) scale(0.98); transition:opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1); width:calc((100% - (var(--inner-padding) * 2) - (var(--gap-md3) * 2)) / 3); max-width:calc((1440px - (var(--inner-padding) * 2) - (var(--gap-md3) * 2)) / 3); display:flex; flex-direction:column; gap:var(--gap-sm);}
.business_area_list .item.video_item{width:calc(((100% - (var(--inner-padding) * 2) - (var(--gap-md3) * 2)) / 3) * 2 + var(--gap-md3)); max-width:calc(((1440px - (var(--inner-padding) * 2) - (var(--gap-md3) * 2)) / 3) * 2 + var(--gap-md3));}
.business_area_list .item.visible{opacity:1; transform:translateY(0) scale(1);}
.business_area_list .info{display:flex; flex-direction:column; gap:var(--gap-xs);}
.business_area_list .tit{font-size:var(--font-xs); color:var(--gray-8)}
.business_area_list .txt{display:flex; flex-direction:column; gap:var(--gap-mini);}
.business_area_list .txt p{font-weight:600;}
.business_area_list .txt span{font-size:var(--font-xs);}
.business_area_list .img{aspect-ratio:1/1;}


/* ========================================================================
    최신 뉴스
======================================================================== */
.main_gap{margin-top:var(--gap-xl);}

.recent_news_wrap{display:grid; grid-template-columns:1fr 2fr; align-items:flex-start;}
.recent_news_wrap .title_wrap{flex-direction:column; gap:var(--gap-md5); align-items:flex-start; position:sticky; top:calc(var(--header-height) + var(--gap-md3))}
.recent_news{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--gap-md5) var(--gap-md3);}
.recent_news .item{display:flex; flex-direction:column; gap:var(--gap-sm); transform: translateY(0); will-change: transform; transition: none !important;}
.recent_news .txt_area{display:flex; flex-direction:column; gap:var(--gap-mini);}
.recent_news .cate{font-size:var(--font-xs); font-weight:600;}
.recent_news .date{font-size:var(--font-xs); color:var(--gray-8)}
.recent_news .img{aspect-ratio:1/1;}


/* ========================================================================
    Feed
======================================================================== */
.feed_list{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--gap-md5) var(--gap-md3)}
.feed_list .item{display:flex; flex-direction:column; gap:var(--gap-sm);}
.cate_blt{display:flex; gap:var(--gap-xs);}
.cate_blt label{display:flex; align-items:center; justify-content:center; padding:0 20px; height:40px; border-radius:100px; background:var(--gray-e); color:var(--gray-8); font-size:var(--font-xs);}
.feed_list .img{aspect-ratio:1/1;}

/* ========================================================================
    Gallery
======================================================================== */
.gallery_list{column-count:3; column-gap:var(--gap-md3); margin-bottom:var(--gap-xl);}
.gallery_list .item{display:block; break-inside:avoid; display:flex; flex-direction:column; gap:var(--gap-sm); margin-bottom:var(--gap-md3);}
.gallery_list .img{height:auto; width:100%; aspect-ratio:inherit; position:relative;}
.gallery_list .img::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0)); z-index:1;}
.gallery_list .img img{position:relative;}
.gallery_list .tit{position:absolute; top:var(--gap-md3); left:var(--gap-md3); color:#fff; font-size:var(--font-sm); font-weight:600; z-index:2;}


/* ========================================================================
    사이트 바로가기
======================================================================== */
.site_area{position:sticky; top:var(--header-height); width:100%; height:80dvh; margin:0 auto; background:var(--black); display:flex; align-items:center; justify-content:center; overflow:hidden; transition: border-radius 0.2s ease-out, margin-top 0.2s ease-out; will-change:width, border-radius, margin-top;}
.site_area .txt_area{display:flex; flex-direction:column; gap:var(--gap-md3); align-items:center; z-index:2;}
.site_area .tit{font-size:var(--font-lg2); color:#fff; font-weight:700;}

/* ========================================================================
    인사이트 상세페이지
======================================================================== */
.insight_cont{max-width:800px; padding:var(--gap-xl) var(--inner-padding) 0; margin:0 auto; display:flex; flex-direction:column; gap:var(--gap-lg);}
.insight_tit{display:flex; flex-direction:column; gap:var(--gap-md3); align-items:center; text-align:center;}
.insight_tit .tit{font-size:var(--font-xl);}
.insight_tit .info{font-size:var(--font-sm); display:flex; align-items:center; gap:var(--gap-xs);}
.insight_tit .info span{color:var(--gray-8)}
.insight_tit button{display:flex; align-items:center; gap:var(--gap-xs); font-size:var(--font-xs); border:var(--border); border-radius:var(--radius); height:40px; padding:0 15px}
.insight_tit button:hover{background-color:var(--gray-e)}
.insight_txt{display:flex; flex-direction:column; gap:var(--gap-md5);}
.insight_txt .item{display:flex; flex-direction:column; gap:var(--gap-sm); font-size:var(--font-sm);}
.insight_txt .tit{font-weight:700; font-size:var(--font-md); color:var(--black)}
.insight_cont .feed_list .cate_blt{gap:var(--gap-mini);}
.insight_cont .feed_list .cate_blt label{height:30px; font-size:12px; padding:0 10px}

@media (max-width: 1024px) {
    .footer_r .txt_area{flex-direction:column; gap:var(--gap-md3);}
}


@media (max-width: 767px) {
    :root{
        --inner-padding: 15px;
        --gap-xl:100px;
        --gap-md5:30px;
        --gap-sm:10px;
        --gap-xs:5px;

        --radius:10px;
    }

    .gnb_r{display:none}
    .header_r .inner_r{justify-content:space-between;}
    .header_r .right{display:none;}
    .header_r h1{position:relative; top:0; left:0; transform:none;}
    
    .header_r .mo_gnb{display:flex; gap:var(--gap-mini);}
    .header_r .mo_gnb .btn{width:36px; height:36px; padding:0; border-radius:var(--radius-sm); background:var(--gray-e); display:flex; align-items:center; justify-content:center; color:var(--black) !important; font-weight:600;}
    .header_r .mo_gnb .bar{background-color:var(--black); width:20px;}
    .header_r .mo_gnb .bar + .bar{margin-top:4px;}
    .header_r .mo_gnb .btn.on .top{transform:translateY(6px) rotateZ(45deg);}
    .header_r .mo_gnb .btn.on .bottom{transform:translateY(-6px) rotateZ(-45deg);}

    .mo_gnb_wrap{position:fixed; left:0; top:var(--header-height); width:100%; height:calc(100dvh - var(--header-height)); padding-top:var(--gap-md5); background:#fff; z-index:10; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:all .3s ease;}
    .mo_gnb_wrap.active{opacity:1; visibility:visible;}
    .mo_gnb_r{flex-grow:1;}
    .mo_gnb_r a{padding:0;}
    .mo_gnb_r .depth1{display:flex; flex-direction:column; gap:var(--gap-md3); padding:0 var(--inner-padding)}
    .mo_gnb_r .depth1 > li > a{font-size:var(--font-md); font-weight:600; padding-left:var(--gap-sm); position:relative;}
    .mo_gnb_r .active > a::before{content:''; position:absolute; top:11px; left:0; width:var(--gap-xs); height:var(--gap-xs); background:var(--blue); border-radius:2px;}
    .mo_gnb_r .depth2{display:flex; flex-direction:column; gap:var(--gap-sm); padding:0 var(--gap-md3); background:var(--gray-f); font-weight:500; height:0; overflow:hidden; opacity:0; visibility:hidden; transition:height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;}
    .mo_gnb_wrap.active .active .depth2{height:auto; opacity:1; visibility:visible; margin:var(--gap-sm) calc(var(--inner-padding) * -1) 0; padding:var(--gap-md3);}

    .mo_gnb_wrap .gnb_b{display:flex; justify-content:space-between; padding:var(--gap-xs) var(--inner-padding); border-top:var(--border);}
    .site_mo button{display:flex; align-items:center; gap:5px; font-weight:500; font-size:var(--font-sm);}
    .site_mo{display:contents; position:relative;}
    .sns_r{display:flex; align-items:center; justify-content:center; gap:var(--gap-mini);}
    .sns_r button{width:36px; height:36px; border-radius:var(--radius-sm);}

    .site_pop{position:fixed; top:0; left:0; width:100%; height:100dvh; background:#fff; z-index:11; opacity:0; visibility:hidden; transition:all .3s ease;}
    .site_pop.active{opacity:1; visibility:visible;}
    .site_pop .tit{height:var(--header-height); display:flex; align-items:center; justify-content:space-between; padding:0 var(--inner-padding); font-weight:600; border-bottom:var(--border); font-size:var(--font-md);} 
    .site_pop ul{display:flex; flex-direction:column; gap:var(--gap-xs); padding:var(--gap-md3) var(--inner-padding);}
    .site_pop ul a{display:flex; align-items:center; justify-content:space-between; background:var(--gray-e); border-radius:var(--radius-sm); padding:var(--inner-padding); font-weight:600;}


    .footer_r .info .item{grid-template-columns:1fr;} 
    .footer_r .sitemap{display:none;}
    .footer_r .mark_area{flex-direction:column; gap:var(--gap-md3); margin-top:0;}
    .footer_r .mark{order:1;}
    .footer_r .f_link{order:2;}
    

    .video_back video{object-fit:fill;}
    .input_area{padding:var(--gap-sm)}
    .placeholder_rolling{top:var(--gap-sm); left:var(--gap-sm)}
    .ai_btn{width:35px; height:35px;}
    .ai_btn svg{width:15px; height:15px;}
    .ai_search{gap:var(--gap-md3);}
    .search_list button{height:35px;}

    /* .main_area_sticky{top:var(--header-height); height:calc(100dvh - var(--header-height))} */
    .main_area_track{padding:0;}
    .main_area .img_area{border-radius:0;}
    /* .main_area .item{height:100%} */
    .main_area .txt_area{padding:0 var(--inner-padding)}

    
    .business_area_scroll{height:auto;}
    .business_area_list{display:grid; grid-template-columns:repeat(2, 1fr); padding:0 var(--inner-padding); gap:var(--gap-md3) var(--gap-sm);}
    .business_area_list .item.video_item{width:100%; grid-column:1 / 3;}
    .business_area_list .item{opacity:1; width:100%; transform:none;}

    
    .recent_news_wrap{grid-template-columns:1fr;}
    .recent_news_wrap .title_wrap{flex-direction:row; align-items:flex-end; position:relative; top:0;}
    .recent_news{gap:var(--gap-md3) var(--gap-sm);}

    
    .feed_list{grid-template-columns:repeat(2, 1fr); gap:var(--gap-md3) var(--gap-sm);}
    .cate_blt label{padding:0 12px; height:30px;}
    

    .gallery_list{column-count:2; gap:var(--gap-sm);}
    .gallery_list .item{margin-bottom:var(--gap-sm);}
    .gallery_list .tit{top:var(--gap-sm); left:var(--gap-sm)}


    .site_area .txt_area{padding:0 var(--inner-padding)}
}