@charset "utf-8";
/* 서브공통 */
.sub-section {padding: var(--space-100) 0 var(--space-120);}
.sub-section:first-child {padding-top: var(--space-120);}
.doc-title {text-align: left;}
.doc-title h2 {position: relative; font-size:var(--font-size-56); font-weight:600; color:#181C2D; line-height:1.25em; letter-spacing:-.02em;}
.doc-title.kor h2 {font-size: var(--font-size-48); line-height: 1.29em; letter-spacing:-.02em;}
.bg-color {background: #FAFAFA;}
.pink-color {color: #FF1C82;}
.color-sub {color: var(--color-sub);}
.doc-txt .tit {font-size: var(--font-size-32); line-height: 1.437em; letter-spacing:-.02em; font-weight: 600; color: var(--color-primary);}
.doc-desc {margin-top: var(--space-40); font-size: var(--font-size-24); line-height: 1.666em; letter-spacing:-.02em; font-weight: 400; color: #676767}
.tit[class*="star"] {display: flex; align-items: start; }
.tit[class*="star"]:before {content: ''; flex-shrink: 0; display: block; width: 28px; height: 28px; margin-top: 8px; background: no-repeat center / contain;}
.tit.star:before {background-image: url("/images/sub/star.svg");}
.tit.star-pink:before {background-image: url("/images/sub/star-pink.svg");}
.tit.star-green:before {background-image: url("/images/sub/star-green.svg");}

.com-process-list {display: flex; flex-wrap: wrap; gap: 24px 0;}
.process-item {flex: 1; position: relative; z-index: 0;}
.process-item:before {content: ''; position: absolute; top: 20px; left: 0; width: 100%; height: 1px; background: #EEE; z-index: -1;}
.process-item:last-child:before {display: none;}
.process-item .step {display: flex; align-items: center; justify-content: center; width: 85px; height: 40px; border-radius: 8px; background: #fff; color: #A8A8A8; border: 1px solid #eee; font-size: var(--font-size-16); font-weight: 700; line-height: 1.5em; letter-spacing:-.02em; transition: .3s;}
.process-item:hover .step {background: #FF1C82; box-shadow: 0 0 16px 0 rgba(255, 28, 130, 0.24); color: #fff;}
.process-tit {margin-top: var(--space-36); padding-right: 20px; font-size: var(--font-size-28); font-weight: 500; line-height: 1.57em; letter-spacing:-.02em; color: #676767; transition: .3s;}
.process-item:hover .campaign-process-tit {color: #2C2C2C;}
.process-desc {padding-right: 20px; margin-top: var(--space-20); font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing:-.02em; color: #A8A8A8; transition: .3s;}
.process-item:hover .process-desc {color: #676767;}

/********************* WAVEMENT *********************/
/* about */
.about-img {width: 47%; max-width: 740px; border-radius: var(--radius-16); overflow: hidden; border: 1px solid #eee;}
.sub-about {align-items: center; gap: var(--space-120);}
.about-desc {margin-top: var(--space-48);}
.about-desc p {margin-bottom: var(--space-20); font-size: var(--font-size-18); line-height: 1.777em; }
.about-desc p:last-child {margin-bottom: 0;}

/* marketing system */
.abt-mkt-box {gap: clamp(150px, calc(320 / var(--inner) * 100vw), 320px);}
.abt-mkt-left {flex: 1 0 22.7%; padding-left: max(var(--space-container), (100% - 1602px) / 2);}
.abt-mkt-left .doc-title { min-width: 281px;}

.abt-mkt-slide {position:relative; width: 60%;}
.abt-mkt-swiper {overflow:hidden;}
.abt-mkt-slide .swiper-wrapper {display:flex;}
.abt-mkt-slide .swiper-slide {width:clamp(230px, calc(400 / var(--inner) * 100vw), 400px); aspect-ratio: 4 / 5;border-radius: var(--radius-16); overflow:hidden; position:relative;}
.abt-mkt-slide .swiper-slide .img {position:relative; padding-bottom:125%; overflow:hidden;}
.abt-mkt-slide .swiper-slide .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:.4s;}
.abt-mkt-slide .swiper-slide a:hover .img img {transform: translateY(-50%) scale(1.05);}
.abt-mkt-slide .swiper-slide .abt-mkt-txt {position:absolute; top: 50%; left: 0; transform: translate(0, -50%); z-index:1; width: 100%; padding: var(--space-28) var(--space-24); font-size:var(--font-size-32); font-weight:600; color:#fff; line-height:1.437em; letter-spacing:-.02em; text-align: center;}
.abt-mkt-txt .tit {font-size: var(--font-size-28); font-weight: 600; line-height: 1.57em; letter-spacing:-.02em;}
.abt-mkt-txt .txt {font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing:-.02em; color: rgba(255, 255, 255, 0.70); margin-top: var(--space-20);}
.abt-mkt-txt .icon {width: 70px; height: 70px; margin: var(--space-55) auto 0;}
lord-icon {width: 100%; height: 100%;}

.abt-slide-nav .btn-wrap {display: flex; align-items: center; justify-content: flex-start; gap: 6px;}
.abt-slide-nav .swiper-button-prev,
.abt-slide-nav .swiper-button-next {flex-shrink: 0; position: static; width:60px; height:60px; margin:0; border-radius: 8px; border: 1px solid #DFDFDF; cursor:pointer; transition:.2s; background:#FFF url("/images/main/slide-arrow.svg") no-repeat center / 8px;}
.abt-slide-nav .swiper-button-prev:hover,
.abt-slide-nav .swiper-button-next:hover {background-color:#FF1C82; background-image: url("/images/main/slide-arrow-active.svg"); background-size: 8px; border-color: #FF1C82;}
.abt-slide-nav .swiper-button-prev:after,
.abt-slide-nav .swiper-button-next:after {display:none;}
.abt-slide-nav .swiper-button-next {transform: rotate(180deg);}

/* why we */
.why-section1 {padding-bottom: var(--space-160);}
.why-section1 .doc-top {gap: var(--space-40);}
.why-section1 .doc-title {flex: 1; padding: 0;}
.why-section1 .doc-txt {flex: 1;}

.free-list {display: flex; flex-wrap: wrap; padding: var(--space-100) 0; background: url("/images/sub/why.jpg") no-repeat center / cover; border-radius: var(--radius-16); overflow: hidden;}
.free-item {flex: 1; padding: 0 var(--space-24); color: #fff; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.16);}
.free-item:last-child {border-right: none;}
.free-item .icon {width: 70px; height: 70px; margin: 0 auto var(--space-20);}
.free-tit {margin-top: var(--space-36); font-size: var(--font-size-28); font-weight: 600; line-height: 1.57em; letter-spacing:-.02em;}
.free-desc {margin-top: var(--space-20); font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing:-.02em;}

.matching-list {display: flex; gap: var(--space-24); flex-wrap: wrap;}
.matching-item {flex: 1; padding: var(--space-24) var(--space-36) var(--space-36) var(--space-36); border-radius: var(--radius-16); background: #FAFAFA; border: 1px solid #eee; transition: all .3s;}
.matching-item:hover {background: #181C2D;}
.matching-item .num {display: block; font-size: var(--font-size-68); font-weight: 600; line-height: 1.2em; letter-spacing:-.02em; color: #EEE; transition: all .3s;}
.matching-item:hover .num {color: rgba(255, 255, 255, 0.16)}
.matching-item .matching-tit {margin-top: var(--space-16); font-size: var(--font-size-28); font-weight: 600; line-height: 1.57em; letter-spacing:-.02em; color: var(--color-primary); transition: all .3s;}
.matching-item:hover .matching-tit {color: #fff;}
.matching-item .matching-desc {margin-top: var(--space-48); font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing:-.02em; color: #676767; transition: all .3s;}
.matching-item:hover .matching-desc {color: rgba(255, 255, 255, 0.80);}

/* campaign */
.campaign-feature-list {display: flex; flex-wrap: wrap; gap: 24px;}
.campaign-feature-item {display: flex; flex-direction: column; justify-content: space-between; flex:1 1 calc(33.3333% - 16px); padding: var(--space-36); border-radius: var(--radius-16); background: #FAFAFA; border: 1px solid #eee;}
.campaign-feature-item .key {display: block; font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; letter-spacing:-.02em; color: #FF1C82;}
.campaign-feature-item .tit {margin-top: 10px; font-size: var(--font-size-28); font-weight: 600; line-height: 1.57em; letter-spacing:-.02em; color: var(--color-sub);}
.campaign-feature-item .desc {margin-top: var(--space-20); font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing:-.02em; color: #676767;}
.campaign-feature-item .icon {width: 70px; height: 70px; margin-left: auto;}

.campaign-effect-item {display: flex; align-items: center; padding: var(--space-24) 0; border-bottom: 1px solid #eee;}
.campaign-effect-item:first-child {padding-top: 0;}
.campaign-effect-item .tit {flex: 0 0 33.8%; gap: var(--space-16); font-size: var(--font-size-28); font-weight: 600; line-height: 1.57em; letter-spacing:-.02em; color: var(--color-sub);}
.campaign-effect-item .desc {flex: 1; font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing:-.02em; color: #676767;}

/********************* ARTIST *********************/
.sns-tab {display: flex; align-items: center; justify-content: center; gap: var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-80);}
.sns-tab li a {display: block; padding: 8px var(--space-24); border-radius: 4px; background: #fff; border: 1px solid #eee; font-size: var(--font-size-18); font-weight: 500; line-height: 1.666em; letter-spacing:-.02em; color: rgba(168, 168, 168, 0.50); transition: all .3s;}
.sns-tab li.active a,
.sns-tab li a:hover {background: #FF1C82; border-color: #FF1C82; color: #fff;}

.artist-list {display: flex; flex-wrap: wrap; margin:0 -16px;}
.artist-item {width: 25%; padding: 0 16px; margin-bottom: 64px; display: none;}
.artist-item .img {position:relative; padding-bottom:100%; margin-bottom:24px; border-radius: var(--radius-16); overflow:hidden;}
.artist-item .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.artist-item .sns-list {display: flex; align-items: center; justify-content: center; gap: 8px; position: absolute; bottom: var(--space-24); right: var(--space-24);}
.artist-item .sns-list li a {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 100%; background: #181C2D; border: 1px solid #181C2D;}
.artist-item .sns-list li a .icon {display: block; width: 24px; height: 24px; background: no-repeat center / contain;}
.artist-item .sns-list li a.youtube .icon {background-image: url("/images/sub/youtube-icon.svg");}
.artist-item .sns-list li a.instagram .icon {background-image: url("/images/sub/insta-icon.svg");}
.artist-item .sns-list li a.tiktok .icon {background-image: url("/images/sub/tiktok-icon.svg");}
.artist-item .tit {align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing:-.02em; color: var(--color-primary);}
.artist-item .tit.star:before {margin-top: 0;}
.artist-item .tit .id {font-size: 14px; font-weight: 400; line-height: 1.14em; letter-spacing:-.02em; color: #A8A8A8;}
.artist-btn-wrap {margin-top: var(--space-80); text-align: center;}
.artist-btn-wrap .more {display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-16) var(--space-24); border-radius: 4px; background: #fff; color: #FF1C82; border: 1px solid #FF1C82; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; letter-spacing:-.02em; transition: all .3s;}
.artist-btn-wrap .more:after {content: ""; width: 16px; height: 16px; background: url("/images/sub/plus-icon.svg") no-repeat center / contain; transition: all .3s;}

/********************* ADS *********************/
.strategy-list {display: flex; gap: 24px; flex-wrap: wrap;}
.strategy-item {flex: 1; padding: var(--space-36) var(--space-48) var(--space-36) var(--space-40); border-radius: var(--radius-16); background: #fff; border: 1px solid #eee; border-left: 8px solid #FF1C82;}
.strategy-item .tit-wrap {padding-bottom: var(--space-24); border-bottom: 1px solid #eee;}
.strategy-item .tit {display: block; margin-top: var(--space-24); font-size: var(--font-size-28); font-weight: 600; line-height: 1.57em; letter-spacing:-.02em; color: var(--color-sub);}
.strategy-item .strategy-desc {display: flex; flex-direction: column; gap: 10px; padding-top: var(--space-24); font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing:-.02em; color: #676767;}
.strategy-item .strategy-desc li {display: flex; align-items: start; gap: 10px;}
.strategy-item .strategy-desc li:before {content: ''; flex-shrink: 0; width: 4px; height: 4px; background: #FF1C82; border-radius: 100%; margin-top: 14px;}

.com-process-list.ads-process-list .process-item {flex: 1;}

.swiper-slide[class*="mkt-slide"] {padding: var(--space-48) var(--space-48) var(--space-100) var(--space-48); background: no-repeat center / cover; border-radius: var(--radius-16); overflow: hidden; color: #fff;}
.swiper-slide.mkt-slide1 {background-image: url("/images/sub/ads-marketing1.jpg");}
.swiper-slide.mkt-slide2 {background-image: url("/images/sub/ads-marketing2.jpg");}
.swiper-slide.mkt-slide3 {background-image: url("/images/sub/ads-marketing3.jpg");}
.swiper-slide.mkt-slide4 {background-image: url("/images/sub/ads-marketing4.jpg");}
.mtk-list-wrap {margin-bottom: 24px; }
.mtk-list {gap: 10px; width: 40%; max-width: 600px; padding: var(--space-24); background: rgba(255, 255, 255, 0.16); border-radius: var(--radius-16); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px);}
.mtk-list li {display: flex; align-items: flex-start; gap: 10px; font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing:-.02em;}
.mtk-list li:before {content: ''; width: 4px; height: 4px; background: #FF1C82; border-radius: 100%; margin-top: 14px;}
.mkt-txt .tit {font-size: var(--font-size-42); font-weight: 600; line-height: 1.33em; letter-spacing:-.02em;}
.mkt-txt .txt {margin-top: var(--space-20); font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing:-.02em; color: rgba(255, 255, 255, 0.80);}
.mkt-btn-wrap {position: absolute; bottom: var(--space-48); left: var(--space-48);}
.mkt-btn-wrap .box{display: flex; align-items: center; justify-content: center; gap: 14px;}
.mkt-btn-wrap .swiper-button-next, 
.mkt-btn-wrap .swiper-button-prev {display: flex; align-items: center; justify-content: center; position: static; width: 14px; height: 14px; margin-top: 0;}
.mkt-btn-wrap svg {stroke: #ffffff40; transition: .3s;}
.mkt-btn-wrap [class*="mkt-btn"]:hover svg {stroke: #fff;}
.swiper-pagination.mkt-pagination {position: static; color: #ffffff40; font-size: 14px; font-weight: 600; line-height: 1.14em; letter-spacing:-.02em;}
.mkt-pagination .swiper-pagination-current {color: #fff;}


/********************* PROJECT *********************/
.sub-section.project-section {padding-top: 0;}
.board-search.type2 {display: flex; align-items: center; justify-content: space-between; margin-bottom: 0;}
.board-search.type2:after {display: none;}
.board-search.type2 .input {height: 48px;}
.board-search.type2 .input.search-input {height: 100%; width: 326px; padding: 0; border: none; border-radius: 0;}
.board-search.type2 select.input {padding:12px 137px 12px 24px; background-position: right 30px center; background-image: url("/images/common/search-arrow.svg"); border-radius: 4px; border-color: #eee; color: var(--color-sub);}
.board-search.type2 .search {display: flex; align-items: center; gap: 10px;}
.board-search.type2 .cate {float: unset; margin-left: 0; font-size: 16px; font-weight: 500; line-height: 1.5em;}
.input-wrap {gap: 20px; height: 48px; padding: 12px 24px; background: #fff; border-radius: 4px; border: 1px solid #eee; }
.submit-btn {width: 24px; height: 24px; background: url(../images/common/search-icon.svg) no-repeat center / contain; border: none; flex-shrink: 0;}

.project-list {padding:80px 0 0 0;}
.project-list ul {display:flex; flex-wrap:wrap; margin:0 -16px;}
.project-list ul li {width:33.333%; padding:0 16px; margin-bottom:40px; text-align:center;}
.project-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.project-list ul li a {display:block; position: relative; border-radius: var(--radius-16); overflow: hidden;}
.project-list ul li .thumb {position:relative; padding-bottom:100%; overflow:hidden;}
.project-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.project-list ul li .thumb:before {content: ""; position: absolute; top: 16px; right: 16px; width: 72px; height: 72px; background: url(../images/main/artist-arrow.png) no-repeat center / contain; z-index: 2; opacity: 0; transition: .3s;}
.project-list ul li .thumb:hover:before {opacity: 1;}
.project-list ul li .thumb:after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.48); transition: .3s; z-index: 0;}
.project-list ul li .thumb:hover:after {background: linear-gradient(180deg, rgba(24, 28, 45, 0.80) 0%, rgba(24, 28, 45, 0.00) 25%, rgba(24, 28, 45, 0.00) 75%, rgba(24, 28, 45, 0.80) 100%), transparent 0px -28.761px / 100% 149.982% no-repeat;}
.project-list ul li .tit {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center; color:#fff; font-size:var(--font-size-20); font-weight: 600; line-height:1.7em; z-index: 1;}
.project-list ul li a:hover .tit {top: unset; bottom: var(--space-32); left: var(--space-32); text-align: left; transform: translateY(0); font-size: var(--font-size-32); line-height: 1.43em;}

/* 상세페이지 */
.project-view {padding-top: var(--space-120);}
.project-view-top {display: flex; align-items: center; gap: var(--space-140); margin-bottom: var(--space-80);}
.project-slide-wrap { width: clamp(400px, calc(720 / var(--inner) * 100vw), 720px);}
.pj-swiper .thumb {position: relative; padding-bottom: 100%; display: block; border-radius: var(--radius-16); overflow: hidden; background: #fff;}
.pj-swiper .thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain ; transform: translate(-50%, -50% );}
.pj-swiper { width: 100%; margin-bottom: 16px; }
.pj-thumb-swiper { width: 100%; }
.pj-thumb-swiper .swiper-slide { cursor: pointer;}
.pj-thumb-swiper .thumb {position: relative; padding-bottom: 100%; display: block; border-radius: 8px; overflow: hidden; background: #fff;}
.pj-thumb-swiper .thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain ; max-width: 100%; max-height: 100%; transform: translate(-50%, -50% );}
.pj-thumb-swiper .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.pj-btn.swiper-button-next,
.pj-btn.swiper-button-prev {width:56px; height: 56px; background:rgba(255, 255, 255, 0.16) url(../images/sub/arrow.svg) no-repeat center center / 11px; border-radius: 4px;}
.pj-btn.swiper-button-next {right: var(--space-24);}
.pj-btn.swiper-button-prev {left: var(--space-24); transform: rotate(180deg);}
.pj-btn.swiper-button-next:after, 
.pj-btn.swiper-button-prev:after {display: none;}
.swiper-pagination.pj-pagination {bottom: var(--space-24) !important;}
.pj-pagination .swiper-pagination-bullet {background: #ccc; opacity: 1;}
.pj-pagination .swiper-pagination-bullet-active {background: #FF1C82;}

.project-view-info {flex: 1;}
.project-view-info .cate {display: block; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing:-.02em; color: #A8A8A8;}
.project-view-info .tit {margin-top: var(--space-16); font-size: var(--font-size-36); font-weight: 600; color: #181C2D; line-height: 1.388em;}
.project-view-info .desc-txt {margin-top: var(--space-48); font-size: var(--font-size-20); color: #676767; line-height: 1.7em; }
.hash-tag-list {margin-top: var(--space-48); display: flex; align-items: center; flex-wrap: wrap; gap: 8px;}
.hash-tag-item {padding: 8px 16px; border-radius: 4px; background: #fff; border: 1px solid var(--color-primary); font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; letter-spacing:-.02em; color: var(--color-primary);}

.project-btn-wrap {display: flex; align-items: center; justify-content: center; gap: 10px;}
.project-btn {display: inline-flex; align-items: center; justify-content: center; min-width: 107px; height: 56px; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; border-radius: 4px; background: #fff; color: #FF1C82; border: 1px solid #FF1C82; transition: all .3s;}
.project-btn:hover {background: #FF1C82; color: #fff;}

/********************* CONTACT *********************/


/********************* NOTICE *********************/