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

/* tab */
.tab-content {position: absolute; top: 0;left: 0;width: 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: none;}
.tab-content.active {opacity: 1; pointer-events: auto; position: relative; display: block;}


/* page-tech 공통 */
.page-adtech {word-break: keep-all; box-sizing: border-box;}
.page-adtech .text-blue {color: #2851FF;}
.page-adtech .text-white {color: #fff !important;}
.page-adtech .bg-gray {background: #EDF0F8;}
.page-adtech .bg-blue {background: #2851FF;}

.page-adtech .container {width: 100%; max-width: 1200px; padding: 0 40px; margin: 0 auto;}
.page-adtech section {overflow: hidden;}
.page-adtech section:not(.sect-kv) {padding: 110px 0;}

.page-adtech .swiper-pagination {display: none;}

.page-adtech .sect-kv {padding-top: var(--hd-h); background: #00003F; color: #fff;}
.page-adtech .sect-kv .container {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height:calc(100vh - var(--hd-h));}

.page-adtech .sect-kv .top-tit {font-weight: 700; font-size: 20px; line-height: 1.5; color: #eee;}
.page-adtech .sect-kv .title {margin: 5px 0 12px; font-size: 50px; line-height: 1.2; font-weight: 700; color: #2851FF;}
.page-adtech .sect-kv .sub {font-size: 28px; line-height: 1.4; color: #aaa;}
.page-adtech .sect-kv .award {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; text-align: center; margin-top: 24px; font-size: 20px; font-weight: 400; line-height: 1.4; color: #ddd;}
.page-adtech .sect-kv .award i {width: 24px; height: 24px; background-image: url("../images/sub/adtech/emoji-medal.png");}


.page-adtech .sect-kv .scroll-down {position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); text-align: center; font-weight: 700; font-size: 14px; line-height: 1.5;}
.page-adtech .sect-kv .scroll-down .arrow {animation: floating 2.5s infinite ease-in-out;}
.page-adtech .sect-kv .scroll-down .arrow img{margin:16px auto 0;}

.page-adtech [class^=icon-] {display: inline-block;background-size: contain;background-repeat: no-repeat;text-indent: -9999px;vertical-align: middle;}
.page-adtech .kv-side {flex: 0 0 auto;}
.page-adtech .sect-title-wrap {margin-bottom: 36px;}
.page-adtech .sect-title-wrap .tit{font-size: 50px; line-height: 1.2; font-weight: 700;}
.page-adtech .sect-title-wrap .sub {margin-top: 14px; font-size: 20px; line-height: 1.2; font-weight: 700; color: #999999;}
.swiper-btn-wrap {display: flex; align-items: center; gap: 10px; justify-content: center;}
.page-adtech .sect-title-wrap.d-flex {display: flex; width: 100%; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;}
.page-adtech .btn-icon {display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; position: relative; padding-bottom: 12px; color: #999; font-size: 20px; line-height: 1.2; font-weight: 700;}
.page-adtech .btn-icon::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #999;}
.page-adtech .btn-icon i {width: 16px; height: 12px; background-image: url("../images/sub/adtech/more-arrow.png");}
.page-adtech .btn-icon.wh {color: #fff;}
.page-adtech .btn-icon.wh i {background-image: url("../images/sub/adtech/more-arrow_wh.png");}
.page-adtech .btn-icon.wh::after {background-color: #fff;}

.page-adtech [class^="swiper-button-"] {position: relative; left: 0; right: 0;display: inline-block;  width: 56px; height: 56px; margin: 0; padding: 0; background: url("../images/sub/adtech/tech-swiper-arrow.png") no-repeat center / 100% auto; opacity: 1 !important; z-index: 2;}

.page-adtech .swiper-button-prev {transform: rotate(180deg);}
.page-adtech [class^="swiper-button-"]:hover {cursor: pointer; background-image: url("../images/sub/adtech/tech-swiper-arrow_bk.png");}
.page-adtech [class^="swiper-button-"]:after {display: none;}

.page-adtech section.sect-inquiry {position: relative; color: #fff; background: #2851FF url("../images/sub/adtech/inquiry-bg.png") no-repeat center bottom; padding-bottom: 210px;}
.page-adtech .sect-inquiry .sect-title-wrap {margin-bottom: 0;}
.page-adtech .sect-inquiry .sect-title-wrap .sub {margin-top: 0; color: #fff; margin-bottom: 16px;}

/* tab-ai */
.tab-ai .icon-keyword {width: 56px; height: 56px; background-image: url("../images/sub/adtech/icon-keyword-doc.png");}
.tab-ai .icon-keyword.write {background-image: url("../images/sub/adtech/icon-keyword-write.png");}
.tab-ai .icon-keyword.control {background-image: url("../images/sub/adtech/icon-keyword-control.png");}
.tab-ai .icon-keyword.star {background-image: url("../images/sub/adtech/icon-keyword-star.png");}
.tab-ai .icon-keyword.graph {background-image: url("../images/sub/adtech/icon-keyword-graph.png");}
.tab-ai .icon-keyword.radar {background-image: url("../images/sub/adtech/icon-keyword-radar.png");}

.tab-ai .kv-side {height: 428px;}
.tab-ai .rolling {background: #fff; color: #111;}
.tab-ai .rolling-swiper {height: 424px; width: 416px; overflow: hidden;}
.tab-ai .rolling-swiper .swiper-slide {position: relative; opacity: 0.1; transition: transform 0.8s cubic-bezier(0.25,1,0.5,1), opacity 0.8s, color 0.8s;}
.tab-ai .rolling-swiper .swiper-slide-active {opacity: 1;}
.tab-ai .rolling-swiper .swiper-slide .rolling-box {width: 416px;height: 128px;border-radius: 100px;}
.tab-ai .rolling-swiper .swiper-slide .rolling {border-radius: 100px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 34px; line-height: 1.4; font-weight: 700; color: #111;}


.sect-tech-tool .sect-title-wrap {display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
.marketing-tool-wrap {display: flex; align-items: center;  flex-wrap: wrap; gap: 60px;}
.marketing-tool-swiper {flex: 1;}
.marketing-tool-swiper img {width: 100%;}
.marketing-tool-swiper .swiper-slide {display: flex;justify-content: center;align-items: center;color: #fff;font-size: 20px;}
.marketing-tool-wrap {position: relative;}
.marketing-tool-wrap .thumb-list {width: 420px; flex: 0 0 auto; display: flex;flex-direction: column;gap: 20px;}
.marketing-tool-wrap .thumb-list .thumb-btn {cursor: pointer;text-align: left;transition: all 0.4s ease; color: #B1BBD4;}
.marketing-tool-wrap .thumb-list .thumb-btn.active {color: #333;}
.marketing-tool-wrap .thumb-list .thumb-btn .para {height: 0; display: none; opacity: 0; font-size: 16px; line-height: 1.4; color: #777;}
.marketing-tool-wrap .thumb-list .thumb-btn.active .para {display: block; height: auto; margin-top: 18px; opacity: 1;}

.sect-tech-tool .swiper-btn-wrap {display: inline-flex; align-items: center; justify-content: flex-end;}
.sect-tech-tool .swiper-button-next,
.sect-tech-tool .swiper-button-prev {position: relative; left: 0; right: 0; z-index: 4;}

.marketing-tool-wrap .thumb-txt {display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 1.2; font-weight: 700;}
.marketing-tool-wrap .thumb-txt .num {display: flex;align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; background: #B1BBD4; width: 40px; height: 40px; border-radius: 100%;}
.marketing-tool-wrap .active .thumb-txt .num {background: #333;}
.marketing-tool-wrap .active .thumb-txt .tit {font-size: 24px;}

.page-adtech .tech-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
.page-adtech .tech-list li >div {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-radius: 6px; background: #f5f5f5; padding: 44px 32px; font-size: 16px; line-height: 1.4; color: #999; height: 100%;}
.page-adtech .tech-list .text {flex: 1;}
.page-adtech .tech-list .text .bold {font-size: 20px; line-height: 1.4; font-weight: 700; color: #333;}


/* tab-allstation */
.page-adtech .sect-tech-station {background: #1D1F27;}
.page-adtech .station-swiper {position: relative; overflow: visible;}
.page-adtech .station-swiper::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; right:100%; z-index: 2; background: #fff;}
.page-adtech section.bg-gray .station-swiper::before {background-color: #EDF0F8;} 
.page-adtech .station-swiper .swiper-slide {opacity: .5;}
.page-adtech .station-swiper .swiper-slide-active {opacity: 1;}
.page-adtech .station-swiper img {width: 100%;}

.page-adtech .station-box {display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #f5f5f5; color: #999; padding: 60px 72px; border-radius: 8px;}
.page-adtech section.bg-gray .station-box {background: #fff;}
.page-adtech .station-box .left {flex: 1;}
.page-adtech .station-box .tag {display: inline-block; padding: 10px 20px; border-radius: 100px; border: 1px solid #ddd; font-size: 18px; line-height: 1.4; font-weight: 700; background: #fff;}
.page-adtech .station-box .tit {margin-top: 14px; font-size: 32px; line-height: 1.4; font-weight: 700; color: #333;}
.page-adtech .station-box .para {margin-top: 16px; font-size: 20px; line-height: 1.4; font-weight: 400; color: #999;}

@keyframes floating {
  0% { transform: translateY(0); }
  50% { transform: translateY(100%); }
  0% { transform: translateY(0%); }
}

@media ( max-width: 1280px ) {
}
.page-adtech .tab-view {display: none !important;}

@media (max-width: 1023px) {
    .page-adtech .container {padding: 0 56px;}
}

@media (min-width: 720px) and (max-width: 840px) {
    .sect-tech-station .kv-side {flex: 1 !important;}
    .sect-tech-station .kv-side img {margin: 0 auto !important;}

    .page-adtech .station-box {flex-direction: column; align-items: flex-start;}
    
    .page-adtech .tab-ai .sect-tech-tool .sect-title-wrap .tit {flex: 1;}
}
@media (min-width: 720px) and (max-width: 1023px) {  
    .page-adtech .mob-view {display: none !important;}
    .page-adtech .web-view {display: block !important;}
    .page-adtech .tab-view {display: block !important;}

    .tab-ai .rolling-swiper {height: 380px; width: 320px;}
    .tab-ai .rolling-swiper .swiper-slide .rolling {font-size: 28px; gap: 10px;}
    .tab-ai .rolling-swiper .swiper-slide .rolling-box {width: 320px; height: 110px;}

    .marketing-tool-wrap {gap: 20px;}
    .marketing-tool-wrap img {flex: 0 0 auto;}
    .marketing-tool-wrap .thumb-list {flex: 0; min-width: 300px;}


    .marketing-tool-wrap .thumb-list .thumb-btn.active .para br {display: none !important;}

    .page-adtech .station-box .para br {display: none;}
}

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

    .page-adtech .swiper-btn-wrap {display: none;}
    .page-adtech .swiper {padding-bottom: 34px;}
    .page-adtech .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 7px; background: #B4BDD3; opacity: 1 !important;}
    .page-adtech .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 32px; border-radius: 10px; background: #2851FF;}
    .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;}

    .page-adtech .sect-kv .scroll-down{font-size: 12px; line-height: 1.5;}
    .page-adtech .sect-kv .scroll-down .arrow img {width: 12px; height: 8px; margin-top: 8px;}
    .page-adtech section:not(.sect-kv) {padding: 72px 0;}
    .page-adtech .sect-kv .container {flex-direction: column; justify-content: center; align-items: flex-start;}

    .page-adtech .sect-title-wrap {margin-bottom: 32px;}
    .page-adtech .sect-title-wrap.d-flex {display: block;}
    .page-adtech .sect-title-wrap .sub {font-size: 18px; margin-top: 10px;}
    .page-adtech .btn-icon {display: inline-block; margin-top: 28px; font-size: 16px; line-height: 1.2;} 
     .page-adtech .btn-icon i {margin-left: 10px; width: 16px; height: 12px;}

    .page-adtech .sect-kv .title {margin: 4px 0 12px; font-size: 36px; line-height: 1.2;} 
    .page-adtech .sect-kv .sub {font-size: 18px; line-height: 1.5;}
 

    .tab-ai .sect-kv .container {padding: 0;}
    .tab-ai .sect-kv .title-wrap{padding: 0 28px;}

    .tab-ai .kv-side {width: 100%; height: 90px; padding: 0 30px; margin-top: 64px;}
    .tab-ai .rolling-swiper {width: 100%; height: 90px; overflow: visible;}
    .tab-ai .rolling-swiper .swiper-slide .rolling {font-size: 22px; line-height: 1.5; gap:12px}
    .tab-ai .rolling-swiper .swiper-slide .rolling-box {width: 100%; height:90px}
    .tab-ai .icon-keyword {width: 36px; height: 36px;}
    /* .tab-ai .rolling-swiper {height: 90px; width: 100%;}
    .tab-ai .rolling-swiper .swiper-slide .rolling-box {width: 100%; height: 90px;} */

    .page-adtech .sect-title-wrap .tit {font-size: 32px; line-height: 1.4;}
    
    .marketing-tool-swiper .swiper-slide {display: block;}
    .page-adtech .sect-tech-tool .thumb-list {display: none;}
    .marketing-tool-wrap .swiper-slide .text-wrap {margin-top: 24px;}
    .marketing-tool-wrap .thumb-txt .num {background: #333;}
    .marketing-tool-wrap .thumb-txt .tit {color: #333; font-size: 22px; line-height: 1.2;}
    .marketing-tool-swiper .swiper-slide .para {margin-top: 18px; font-size: 16px; line-height: 1.4; color: #777; font-weight: 400; display: block !important;}

    .page-adtech .tech-list {grid-template-columns:repeat(1, 1fr); gap: 14px;}
    .page-adtech .tech-list li >div {padding: 32px 24px; font-size: 14px;}
    .page-adtech .tech-list .text .bold {font-size: 18px;}

    .page-adtech .sect-inquiry .sect-title-wrap .sub {font-size: 16px; margin-bottom: 10px;}
    .page-adtech .sect-inquiry .btn-icon {margin-top: 40px;}
    .page-adtech section.sect-inquiry {padding-bottom: 142px !important; background: #2851FF url("../images/sub/adtech/inquiry-bg_mo.png") no-repeat center bottom / auto 96px;}


    /* all-station 페이지*/
    .tab-allstation .kv-side {margin-top: 40px;}
    .tab-allstation .sect-kv .award {font-size: 14px; line-height: 1.4; gap: 4px;}  

    .page-adtech .station-box {display: block; padding: 24px;}
    .page-adtech .station-box .tag {padding: 8px 16px; font-size: 12px;}
    .page-adtech .station-box .tit {font-size: 22px; line-height: 1.4;}
    .page-adtech .station-box .para {font-size: 14px;}
    .page-adtech .station-box .img {margin-top: 28px;}
}