@charset "utf-8";

/* 플로팅 메뉴 */
.float-tab-menu {position: fixed; left: 50%; transform: translateX(-50%); top: var(--hd-h); transition: all .4s;  display: inline-flex; align-items: center; justify-content: center; padding-top: 24px; z-index: 3;}
.float-tab-menu.scrolling {top: 0; transform: translate(-50%, 0%);}
.float-tab-menu .inner {display: flex; align-items: center; justify-content: center; gap: 30px; color: rgba(255, 255, 255, .3); padding: 17px 32px; border-radius: 100px;  background: #FA5A00;}
.float-tab-menu .tab-btn {font-family: 'silka', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03;}
.float-tab-menu .tab-btn.active {color: #fff;}

/* 서브 페이지 공통 */
.sub-page {word-break: keep-all; box-sizing: border-box; padding-top: var(--hd-h);}
.sub-page .container {width: 100%; max-width: 1200px; padding: 0 40px; margin: 0 auto;}
.sub-page .sub-page-wrap{padding: 200px 0 120px;}

/* 서브 페이지 타이틀 */
.sub-page .page-sub-top .title {font-size: 50px; font-weight: 700; line-height: 1.2; color: #222;} 
.sub-page .page-sub-top .sub-txt {margin-top: 12px; font-size: 24px; line-height: 1.2;} 
.sub-page .page-sub-top {margin-bottom: 80px;}

/* 인사이트 리스트 */
.insight-list { display: grid; grid-auto-flow: dense; gap: 32px; grid-template-columns: repeat(3, 1fr); width: 100%;}
.insight-list .image-wrap { position: relative; margin-bottom: 20px; background: #aaa; width: 100%; overflow: hidden;}
.insight-list .image-wrap img { width: 100%;height: 100%;object-fit: cover;transition: width, height, transform .7s ease;} 
.insight-list li {min-width: 0;}
.insight-list li a:hover .image-wrap img {    transform: scale(1.1);}
.insight-list li .title { display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-size: 20px; font-weight: 700; line-height: 1.5; color: #333;} 
.insight-list li .info {display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap:8px; font-size: 14px; line-height: 1.5; color: #333; margin-top: 12px;}
.insight-list li .info .date {position: relative; font-size: 14px; line-height: 1.5; letter-spacing: 0; color: #999; padding-left: 8px;}
.insight-list li .info .date:before {content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #999;}


/* 인사이트 게시물 상세 */
.sub-page.page-insight-view .container {max-width: 880px;}
.sub-page.page-insight-view .page-sub-top {background: #f8f8f8; text-align: center; padding: 98px 0;}
.sub-page.page-insight-view .page-sub-top .title {font-size: 32px; line-height: 1.5; font-weight: 800; margin: 12px 0; }
.page-insight-view .page-sub-top .info { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap:12px; font-size: 18px; line-height: 1.4; color: #333; }
.page-insight-view .page-sub-top .info .date {position: relative; letter-spacing: 0; padding-left: 12px; }
.page-insight-view .page-sub-top .info .date:before {content: ''; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: #999;}
.page-insight-view .page-sub-top .info .name { font-size: 14px; color: #999; }

.insight-view-content .contents {border-bottom: 1px solid #ccc;}
.insight-view-content .contents .view-detail {padding-bottom: 40px;}
/* .insight-view-content img { margin-bottom: 40px;} */
.insight-view-content p {font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; color: #333;}

/* list-tab-wrap */
.insight-list-wrap {margin-top: 20px;}
.list-tab-btns {margin-bottom: 40px; display: flex; align-items: center; gap: 40px;}
.list-tab-btns a {position: relative; padding-bottom: 6px; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: #999; border-bottom: 2px solid transparent;}
.list-tab-btns a.active {color: #333; border-color: #333;}
.list-tab-btns a.active:hover {border-color: #FA5A00;}
.list-tab-btns a:hover {color: #FA5A00;}

/* page-insight-view TAG*/
.page-insight-view.column .tag-list {display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-bottom: 20px;}
.page-insight-view.column .tag-list a {display: block; padding: 8px 10px; border-radius: 4px; border: 1px solid #ccc; font-size: 12px; line-height: 1.5; letter-spacing: -0.02em; color: #333;}
.page-insight-view.column .tag-list a span {color: #999;}

/* 검색페이지 */
.sub-page.page-search .sub-page-wrap {padding-top: 120px;}
.sub-page.page-search .page-sub-top {margin-bottom: 60px;}
.sub-page.page-search .page-sub-top .title {font-size: 40px; font-weight: 300; line-height: 1.4; letter-spacing: -0.02em; text-align: center;}
.sub-page.page-search .page-sub-top .title .cate {position: relative; display: inline-block; font-weight: 700; line-height: 1.2; color: #FA5A00;}
.sub-page.page-search .page-sub-top .title .cate::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 10px; background: rgba(250, 90, 0, 0.1);}
.sub-page.page-search .page-sub-top .title .num {font-weight: 700; color: #FA5A00;}


@media (max-width: 1023px) {
    .page-insight .mob-view {display: none !important;}
    .page-insight .web-view {display: block !important;}
    .page-insight .tab-view {display: block !important;}
    .page-insight .container {padding: 0 56px;}
    
    .sub-page .page-sub-top {margin-bottom: 40px;}

    
}

@media  (max-width: 719px) {  
    .page-insight .mob-view {display: block !important;}
    .page-insight .web-view {display: none !important;}
    .page-insight .tab-view {display: none !important;}
    
    .sub-page .container {padding: 0 28px;} 

    .float-tab-menu {padding: 0; width: 100%; height: 56px;}
    .float-tab-menu .inner {width: 100%; height: 100%; border-radius: 0; padding: 18px; gap: 28px;}
    .float-tab-menu .tab-btn {font-size: 16px; line-height: 1.2; letter-spacing: -0.03;}
    .sub-page .sub-page-wrap {padding: 72px 0;}

    .sub-page .float-tab-menu + .sub-page-wrap {padding-top: 128px;}    
    
    .sub-page .page-sub-top .title {font-size: 32px; line-height: 1.4; letter-spacing: -0.02em;}
    .sub-page .page-sub-top .sub-txt {font-size: 20px; line-height: 1.5; letter-spacing: -0.02em;}
   
    .sub-page.page-insight-view .page-sub-top {margin-bottom: 72px;}
    

    .insight-list {grid-template-columns: repeat(1, 1fr); gap: 40px;}
    .insight-list .image-wrap {margin-bottom: 10px;}
    .insight-list li .info {margin-top: 8px; font-size: 12px; line-height: 1.2;}

    .list-tab-btns {width: 100%; overflow-x: scroll; overflow-y: clip; height: 100%; gap: 20px;}

    .sub-page.page-insight-view .page-sub-top {padding: 94px 0;}
    .sub-page.page-insight-view .page-sub-top .title {font-size: 20px; line-height: 1.5; letter-spacing: 0; font-weight: 800;}

    /* 검색페이지 */    
    .sub-page.page-search .sub-page-wrap {padding-top: 40px;}
    .sub-page.page-search .page-sub-top {margin-bottom: 40px;} 
    .sub-page.page-search .page-sub-top .title {font-size: 24px;}

}