@charset "utf-8";
/* 
	main.css : 메인페이지 정의
*/


/******************************************************************************
메인 {******************************************************************************* */	
	/* 공통 */
		.main__contents__wr{position:relative;}
		.main__contents__inbox{position:relative;}
		.main__title__wr .main__title{font-size:160px; line-height: 150px; font-weight:400; font-family:'ClashDisplay-Variable'; position:relative;}
		.main__title__wr .main__title01{}
		.main__title__wr .main__title02{}
		.main__title__wr .main__title03{}

		.main__text__wr{}
		.main__text__wr .main__sub__text{position:relative; font-size:24px; font-weight:400; color:var(--color__sub);}
		.main__text__wr .main__sub__text .overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:var(--color__white);}



	/* 비주얼 */
		/* .main__visual__box{position:relative; padding:14% 0 12%; height:100vh;} */
		.main__visual__box{position:relative; padding: 15% 0 10%;}
		.main__visual__inner{position:relative;}
		.main__visual__box .btn__box__st01{position:absolute; top:50%; right:0; transform:translateY(-50%);}
		.main__visual__box .btn__box__st01 .btn__box__a .underline{width:0;}
		.visual__title__wr{position:relative;}
		.visual__title__wr .visual__tit__overlay{overflow:hidden;}
		.visual__title__wr .main__title01{transform: translateY(100%); opacity:0;}
		.visual__title__wr .main__title02{text-align:center; transform: translateX(-100px) translateY(100%); opacity:0;}
		.visual__title__wr .main__title03{text-align:right; transform: translateX(-100px) translateY(100%); opacity:0;}
		.visual__text__wr{position:absolute; left:0; bottom:0;}


    
		.main__scroll__wr{
			position:absolute; left:50%; bottom:50px;
			transform:translateX(-50%) translateY(100%);
			font-family:'ClashDisplay-Variable';
			font-size:16px;
			opacity:0;
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:center;
			gap:12px;
		}

		/* scroll 유도 아이콘 애니메이션 */
		.main__scroll__wr .scroll__icon{
			width:1px;
			height:40px;
			position:relative;
			display:block;
			overflow:hidden;
		}
		.main__scroll__wr .scroll__icon__track{
			position:absolute;
			inset:0;
			background:rgba(0, 0, 0, 0.18);
		}
		.main__scroll__wr .scroll__icon__line{
			position:absolute;
			left:0;
			top:0;
			width:1px;
			height:40px;
			background:#e04004;
			transform-origin:top;
			transform:scaleY(0);
			opacity:0;
			animation: scrollFill 1.8s ease-in-out infinite;
		}
		@keyframes scrollFill{
			0%{ transform:scaleY(0); opacity:0; }
			10%{ opacity:1; }
			70%{ transform:scaleY(1); opacity:1; }
			100%{ transform:scaleY(1); opacity:0; }
		}

	/* 영상 프레임 */	
		.sequence-section {position: relative; height: 100vh;}
		.main__videoflame__box{transform: translateY(10%); width: 100%; height: 100%;}
		#sequence-canvas {width: 90%; max-width:1800px; height: 100%; display: block; border-radius: 50px; overflow: hidden; margin:0 auto;}
		.flame__text{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:90px; font-weight:900; text-align:center; color:#fff;}
		.flame__text span {
			display: block;
		}
		.cover-overlay {position: absolute; inset: 0; background: #fff; mix-blend-mode: saturation; /* 🔥 핵심 */ pointer-events: none; z-index: 5;}
		.circle-overlay {position: fixed; top: 50%; left: 50%; width: 100vmax; height: 100vmax;	background: #fff; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transform-origin: center center; pointer-events: none; z-index: 10; filter: blur(100px); opacity: 1;}

	/* DOES */
     #main__does__wr{padding-bottom: 160px;}
		.main__does__box{position:relative;  padding:12% 0 2%; height:100vh;}
		.main__does__inner{position:relative; height:100%;}
		.main__does__box .btn__box__st01{position:absolute; bottom:0%; right:0;}
		.main__does__box .btn__box__st01 .btn__box__a .underline{width:0;}
		.dose__title__wr{position:relative; padding-top:0px; z-index:1;}
		.dose__title__wr .dose__tit__overlay{overflow:hidden;}
		.dose__title__wr .main__title01{transform: translateY(100%); opacity:0; padding-left:15%;}
		.dose__title__wr .main__title02{text-align:left; transform: translateX(-100px) translateY(100%); opacity:0; ; padding-left:31%;}
		.dose__text__wr{position:relative; padding-left:31%; margin-top:80px;}
		.dose__text__wr	.main__sub__text{ transform: translateY(100%); opacity:1;}

		.dose__clock__wr{position:absolute; left:0; bottom:0px; transform: translateY(50%) rotate(45deg); opacity:0;}
		.dose__clock__wr .clock-wrap {}
		.dose__clock__wr .clock {position: relative; width: 432px; height: 432px;}
		.dose__clock__wr .clock-bg {width: 100%; height: 100%;}
		.dose__clock__wr .hand {position: absolute; top: 50%; left: 50%; transform-origin: 50% 100%; transform: translate(-50%, -100%) rotate(0deg);}
		.dose__clock__wr .hour {width: 8px; height: 100px; background: var(--color__main); border-radius: 4px;}
		.dose__clock__wr .minute {width: 4px; height: 120px; background: var(--color__main); border-radius: 4px;}
		.dose__clock__wr .digital-clock {position:absolute; bottom:60px; left:50%; transform:translateX(-50%); font-size: 16px; font-weight: 400; color: var(--color__main); font-family:'ClashDisplay-Variable';}


	/* WORK */
	/* YOU GET */
	/* TESTIMONIALS */
	/* SERVICES */
	
	/* NEWS */
    .news {padding: 130px 0 160px;}
    .news .main__title{color:#fff;}
		.news .template_swiper_carousel{width: 100%;}
		.news .template_swiper.news_swiper .swiper-slide{background:none !important; border-radius:0;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner{padding:0;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_header{display:flex; flex-direction:column; gap:10px;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_header .slide_content_date{font-size: 16px; color:#fff;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_header .slide_content_tags{display:flex; align-items:center; gap:10px; font-size: 16px;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_header .slide_content_tags span{padding: 5px 10px; border-radius: 20px; background-color: #707070; font-size: 14px; font-weight: 500; color: #ffffff;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_header .slide_content_tags span:first-child{background-color: #fff;color: #e04004;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_pic{width: 100%;height: 400px;overflow: hidden;border-radius: 20px;margin-top: 20px;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_pic img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_title{margin-top: 20px;display:flex;flex-direction:column;gap:10px;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_title .slide_content_title_text{font-size: 24px;font-weight: 500; color: #fff;}
		.news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_title .slide_content_sub_text{font-size: 16px;color: #fff; opacity: 60%;}

    .news .main__btn__wr{text-align:center; transform: translateX(100px) translateY(100%); opacity:0;}
    .news .main__btn__wr .btn__box__a{color:#fff;}

    .news .js_template_swiper_indicator{color:#fff;}
		.news .template_swiper__bar_thumb {background: #fff;}
		.news .template_swiper__bar_rail {background: #717171;}

		.main__title__wr .left__tab{display:none;}

/* DH */

.whowework, .whatyouget {
  padding: 150px 0 160px;
}
.testimonials{
  padding: 250px 0 160px;
} 
.services {
  padding: 150px 0 200px;
}

.whatyouget{
  padding-bottom:0px !important;
}

.container {
  max-width: 1800px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.section_title {
  text-transform: uppercase;
  font-size: 160px;
  font-weight: 500;
  margin: 0 0 1.5rem;
  line-height: .9;
}

.section_title span {
  display: block;
}

#workwith_title_wr {
  background-color: #F4F5F7;
}

.slide__title__wr{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.work__title__wr .main__title01{transform: translateY(50%); opacity:0;}
.work__title__wr .main__title02{text-align:left; transform: translateX(-80px) translateY(50%); opacity:0; ;}

.section_title__template_swiper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.template_swiper__slide_nav {
  flex-shrink: 0;
}

.template_swiper__slide_fraction {
  font-size: 16px; font-family: 'ClashDisplay-Variable';
}

/* template_swiper 공통: 상단 숫자 페이지네이션 (Swiper pagination + renderBullet, news_swiper 제외) */
.template_swiper__slide_nav--numeric .js_template_swiper_numeric_pagination.swiper-pagination {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: auto;
  max-width: 100%;
  transform: none;
  margin: 0;
}

.template_swiper__slide_nav--numeric .js_template_swiper_numeric_pagination .swiper-pagination-bullet {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 1;
  font-size: 16px;
  font-family: 'ClashDisplay-Variable', sans-serif;
  font-weight: 400;
  color: #b0b0b0;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.template_swiper__slide_nav--numeric .js_template_swiper_numeric_pagination .swiper-pagination-bullet-active {
  color: #000;
  font-weight: 700;
}

/* Testimonials: 빨간 배경 구간 — 숫자는 밝은 톤 */
.testimonials .template_swiper__slide_nav--numeric .js_template_swiper_numeric_pagination .swiper-pagination-bullet {
  color: rgba(255, 255, 255, 0.45);
}
.testimonials .template_swiper__slide_nav--numeric .js_template_swiper_numeric_pagination .swiper-pagination-bullet-active {
  color: #fff;
}

.template_swiper .swiper-wrapper .slide_content {
  width: 100%;
  height: 100%;
}
.template_swiper .swiper-wrapper .slide_content_inner {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 60px;
  color: #000;
  font-family:'ClashDisplay-Variable';
}

.template_swiper.whowework_swiper .swiper-slide {
  transition: background-color 0.45s ease;
}



.template_swiper.whowework_swiper .swiper-slide:hover {
  /*background-color: #e04004;*/
}

.template_swiper.whowework_swiper .swiper-slide:hover .slide_content_title {
  /*display: none;*/
}

.template_swiper.whowework_swiper .swiper-slide:hover .slide_content_text {
  transform: translateY(00%);
}
.template_swiper.whowework_swiper .swiper-slide:hover .slide_content_icon img {
  filter: brightness(0) invert(1);
}

.template_swiper.whowework_swiper .swiper-slide:hover .slide_content_text::after {
  /*display: block;*/
}

/* WHO WE WORK WITH: 기본 타이틀만 — active는 건드리지 않고 호버 시에만 주황+본문 */
.whowework_swiper .swiper-wrapper .slide_content_title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.whowework_swiper .swiper-wrapper .slide_content_title .slide_content_no {
  font-size: 16px;
}

.whowework_swiper .swiper-wrapper .slide_content_title .slide_content_title_text {
  font-size: 48px;
}

.whowework_swiper .swiper-wrapper .slide_content_text {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    padding: 60px;
	background:#e04004;
	transform:translateY(100%);
	transition: all .2s;
}
.whowework_swiper .swiper-wrapper .slide_content_icon {
  position: absolute;
    bottom: 60px;
    right: 60px;
}

.whowework_swiper .swiper-wrapper .slide_content_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.whowework_swiper .swiper-wrapper .slide_content_text::after {
  /*content: 'png.ex';*/
  /*display: block;*/
  /*width: 120px;*/
  /*height: 120px;*/
  /*background: #000;*/
  /*position: absolute;*/
  /*bottom: 0px;*/
  /*right: 0;*/
}


/* testimonials */

.testimonials .template_swiper .swiper-slide.swiper-slide-active {
}

/* vw 브레이크아웃으로 문서 가로 스크롤이 생기는 것만, 파트너 섹션 범위에서만 잘라냄 */
.main__contents__wr:has(.template_swiper_carousel) {
  overflow-x: clip;
}

.template_swiper_carousel {
  margin-top: 80px;
  overflow: visible;
}
.template_swiper {
  width: 100%;
  padding-bottom: 2.5rem;
  box-sizing: border-box;
  overflow:visible;
}

.template_swiper .swiper-slide {
  min-height: 480px;
  background-color: #f0f0f0;
  border-radius: 40px;
  overflow:hidden;
  font-weight: 400;
  color: #333;
  height: auto;
  box-sizing: border-box;
  transition: background-color 0.45s ease;
}

.template_swiper .swiper-slide.swiper-slide-active {
  /*background-color: #e04004;*/
}


.template_swiper.whowework_swiper .swiper-slide.swiper-slide-active:not(:hover) {
  background-color: #f0f0f0;
}

.template_swiper .swiper-button-prev,
.template_swiper .swiper-button-next {
  color: #111;
  top: calc(50% - 1.25rem);
}

.template_swiper .swiper-pagination-bullet-active {
  background: #111;
}

.template_swiper__bar_pagination {
  width: 100%;
  margin-top: 0.25rem;
}

.template_swiper__bar_track {
  position: relative;
  --template_swiper_total: 5;
  --template_swiper_index: 0;
  padding: 14px 0;
}

.template_swiper__bar_rail {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: #e8e8e8;
  overflow: hidden;
}

.template_swiper__bar_thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(100% / var(--template_swiper_total));
  border-radius: inherit;
  background: #e04004;
  transform: translateX(calc(var(--template_swiper_index) * 100%));
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.template_swiper__bar_hits {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(var(--template_swiper_total), minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
}

.template_swiper__bar_hit {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 2px;
}

.template_swiper__bar_hit:focus-visible {
  outline: 2px solid #e04004;
  outline-offset: 2px;
}

/* —— WhatYouGet (SVG + scroll line) —— */
/* stroke가 viewBox 밖으로 살짝 나가도 잘리지 않도록(상단·좌측 미세 클립 방지) */
.whatyouget {
  position: relative;
  overflow-x: visible;
  overflow-y: visible;
}


.whatyouget_inner {
  position: relative;
}




.section_title span {
  display: block;
}
.whatyouget_scroll{
  overflow-x: visible;
  overflow-y: visible;
}
.whatyouget_main {
  flex: 1;
  width: 100%;
}

.whatyouget_inner > .whatyouget_main > .main__title__wr {
  position: absolute ;
}
.whatyouget__title__wr .main__title01{transform: translateY(50%); opacity:0;}
.whatyouget__title__wr .main__title02{text-align:left; transform: translateX(-80px) translateY(50%); opacity:0; ;}

.whatyouget_svg_wr{
  position: relative;
  overflow: visible;
}

.whatyouget_svg_stage {
  position: relative;
  overflow: visible;
}

.whatyouget_svg_stage--narrow {
  display: none;
}

.whatyouget_svg {
  position: relative;
  margin-top: 240px;
  left: 700px;
  width: min(1445.54px, 100vw - 570px);
  height: auto;
  pointer-events: none;
  overflow: visible;
}

.whatyouget_svg_stage--narrow .whatyouget_svg {
  position: relative;
  left: 283px;
  margin-top: clamp(72px, 14vw, 130px);
  width: min(1000px, 92vw);
  max-width: 100%;
}

.whatyouget_svg_stage--narrow .whatyouget_path {
  stroke-width: 10;
}

.whatyouget_svg_stage--narrow .whatyouget_path_progress {
  stroke: url(#progressGradientNarrow);
}

.whatyouget_path {
  fill: none;
  stroke-width: 24;
}

.whatyouget_path_track {
  stroke: #f4f5f7;
}

.whatyouget_path_progress {
  stroke: url(#progressGradient);
}
.whatyouget_item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  justify-self: start;
  font-weight: 500;
  line-height: 1.35;
  color: #b5b5b5;
  transition: color 0.45s ease;
  position: absolute;

}

.whatyouget_item[data-wyg-index="0"] {
  top: 21%;
  left: 37%;
}
.whatyouget_item[data-wyg-index="1"] {
  top: 44%;
  left: 54%;
}
.whatyouget_item[data-wyg-index="2"] {
  top: 60%;
  left: 21%;
}
.whatyouget_item[data-wyg-index="3"] {
  top: 74%;
  left: 58%;
}


.whatyouget_item_active {
  color: #e04004;
}

.whatyouget_text {
  display: block;
  font-family:'ClashDisplay-Variable';
  font-size: clamp(24px, 2.6vw, 48px);
  font-weight: 300;
}

.whatyouget_char {
  color: #cfcfcf;
  transition: color 0.16s linear;
}

.whatyouget_char.is_filled {
  color: #e04004;
}

.whatyouget_text::before {
  content: '';
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;

  width: clamp(24px, calc(42 / 1800 * 100vw), 42px);
  height: clamp(24px, calc(42 / 1800 * 100vw), 42px);

  margin-bottom: clamp(5px, calc(24 / 1800 * 100vw), 24px);

  background: url('/images/icon_check.png') no-repeat top center / cover;
}

.whatyouget_item_active .whatyouget_text::before {
  opacity: 1;
}

.services_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.services {
}

.services_is_pinned {
  position: relative;
  z-index: 2;
}

.services_is_pinned .services_item {
  background: #fff;
}

.services_list {
    display: flex;
    flex-direction: column;
	border-top:1px solid #eee;
	margin-top:80px;
}

.services_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
	border-bottom:1px solid #eee;
	min-height:180px;
	
}

.service_card {
  display: contents;
}

.services_item_trigger {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.services_item_title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family:'ClashDisplay-Variable';
    font-size: 48px;
    font-weight: 400;
    margin: 0;
    transition: color 0.45s ease;
}

.services_item_tags a {
  color: inherit;
  text-decoration: none;
}

.services_item_tags a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 1025px) {
  .services_item_chevron {
    display: none !important;
  }

  .services_item_trigger {
    display: contents;
    cursor: default;
    pointer-events: none;
  }

  .services_item_panel {
    display: contents;
  }
}

.services_inner > .services_main > .main__title__wr {
  position: absolute ;
}

/* .services__title__wr .main__title01{transform: translateY(50%); opacity:0;} */

.services__title__wr .main__title01{text-align:center; transform: translateX(-100px) translateY(100%); opacity:0;}
.services_header .main__btn__wr{text-align:center; transform: translateX(100px) translateY(100%); opacity:0;}

.services_item_no {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.services_item.active .services_item_title {
    color: #e04004;
}

.service_media {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
	position: absolute;
    right: 33%;
}

.service_media img{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

.services_item.active .service_media {
    opacity: 1;
    transform: scale(1);
}

.services_item_tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    color: #e04004;
    transition: opacity 0.45s ease, transform 0.45s ease;
    font-size:18px;
    text-align:right;
}


.services_item.active .services_item_tags {
    opacity: 1;
    transform: translateY(0);
}

.testimonials {
}

.testimonials .section_title {
  color: #fff;
}

.testimonials .template_swiper .swiper-slide.swiper-slide-active {
    background-color: #fff;
}

.testimonials .template_swiper__bar_rail {
  background: rgba(255, 255, 255, 0.28);
}

.testimonials .template_swiper__bar_thumb {
  background: #fff;
}

.testimonials__title__wr{color:#fff;}
.testimonials__title__wr .main__title {transform: translateY(50%); opacity:0;}

.testimonials_title_wr .template_swiper__slide_nav{color:#fff;}
.testimonials_title_wr .slide_content_title_text{font-size:24px; font-weight:500;}
.testimonials_title_wr .slide_content_title_text_sub{font-size:16px; font-weight:400; margin-top:8px; color:#999999}
.testimonials_title_wr .slide_content_text {
  font-size: 18px;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 500;
  margin-top: 40px;
  color: #333333;
}

.news__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.news__title__wr .main__title01{text-align:center; transform: translateX(-100px) translateY(100%); opacity:0;}




/* } 메인 *****************************************************************************
***************************************************************************************/

/* =========================================================================
   [반응형 브레이크포인트] (JS gsap.matchMedia 구간과 동일하게 매칭)
========================================================================= */


@media screen  and (max-width: 1800px) {
    .main__title__wr .main__title { font-size: 120px; line-height: 110px; }
    .main__text__wr .main__sub__text { font-size: 20px; line-height: 32px; }
    .flame__text { font-size: 70px; }

	.dose__clock__wr {
		margin-top: 30px;
		position: static;
	}

	.dose__clock__wr .clock {
		position: relative;
		width: 322px;
		height: 322px;
	}

	#main__does__wr {
		padding-bottom: 400px;
	}

	.services_header{
		flex-direction: column;
    align-items: flex-start;
	}

	.services_header .main__btn__wr {
    align-self: flex-end;
	}
  
    .main__visual__inner .main__btn__wr,
    .main__does__inner .main__btn__wr {
        text-align: right;
        margin-top: 20px;
    }

	.service_media img {
		width: 200px;
		height: 200px;
	}

	.services_item_tags {
		width: 280px;
		font-size: 16px;
	}

    .dose__text__wr { padding-left: 10%; }
    .services_item_title { font-size: 40px; }
    .whowework, .services, .testimonials, .news { padding: 120px 0; }
    .slide_content_title_text { font-size: 28px; }
    .slide_content_text { font-size: 18px; }

	.visual__text__wr {
		position: static;
		margin-top: 24px;
	}
	.main__visual__box .btn__box__st01 {
		position: static;
		top: auto;
		right: auto;
		transform: none;
	}
}

@media screen and (max-width: 1600px) {

	.main__does__box .btn__box__st01 {
		position: static;
	}

}

@media screen and (max-width: 1300px) {

	.service_media img {
		display: none;
	}

}

@media screen and (max-width: 1024px) {
	#main__does__wr {
        padding-bottom: 250px;
    }

    .main__title__wr .main__title { font-size: 90px; line-height: 86px; }
    .main__text__wr .main__sub__text { font-size: 18px; line-height: 28px; }
    .flame__text { font-size: 55px; }

    .dose__text__wr { padding-left: 0; margin-top: 60px; }
    .services_item_title { font-size: 32px; line-height: 1.2; }
    .whowework, .services, .testimonials, .news { padding: 100px 0; }
    .main__video, #sequence-canvas { width: 90%; max-width: 1800px; border-radius: 30px; margin: 0 auto; }
    .services_list { margin-top: 50px; }
    .slide_content_title_text { font-size: 24px; }
    .slide_content_text { font-size: 16px; }

    /* Services: 아코디언 (스크롤 active 대신 클릭) */
    .service_card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      gap: 0;
    }

    .services_item {
      flex-direction: column;
      align-items: stretch;
      padding: 20px 0;
      min-height: auto;
      gap: 0;
    }

    .services_item_trigger {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      pointer-events: auto;
      cursor: pointer;
    }

    .services_item_trigger .services_item_title {
      flex: 1;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
    }

    .services_item_chevron {
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.25s ease;
      margin-bottom: 4px;
      opacity: 0.6;
    }

    .services_item--open .services_item_chevron {
      transform: rotate(-135deg);
      margin-top: 6px;
      margin-bottom: 0;
    }

    .services_item--open .services_item_trigger .services_item_title {
      color: #e04004;
    }

    /* 닫힐 때도 열릴 때와 동일한 주축 순서 유지: column-reverse는 --open에만 두면
       클래스 제거 순간 레이아웃이 block + 일반 흐름으로 바뀌며 태그/이미지 순서가 뒤집혀 보임 */
    .services_item_panel {
      display: flex;
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 24px;
      max-height: 0;
      overflow: hidden;
      margin-top: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      pointer-events: none;
      transition:
        max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 0.35s ease,
        opacity 0.4s ease,
        padding-top 0.35s ease,
        padding-bottom 0.35s ease;
    }

    .services_item--open .services_item_panel {
      max-height: 1600px;
      opacity: 1;
      margin-top: 16px;
      padding-top: 4px;
      padding-bottom: 4px;
      pointer-events: auto;
    }

    .services_item_panel .service_media {
      position: relative;
      right: auto;
      opacity: 1;
      transform: none;
      width: 106px;
      height: 106px;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 0;
      flex-shrink: 0;
    }

    .services_item_panel .service_media img {
      display: block !important;
      position: static !important;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: none !important;
    }

    .services_item_panel .services_item_tags {
      display: flex;
      flex-direction: column;
      opacity: 1;
      transform: none;
      text-align: left;
      width: 100%;
      gap: 8px;
    }

    .services_item:not(.services_item--open) .services_item_panel .services_item_tags {
      pointer-events: none;
    }
}

@media screen and (max-width: 820px) {

  /* WHO WE WORK WITH: 820 이하에서는 hover 없이 기본 활성 상태로 표시 */
  .whowework_swiper .swiper-wrapper .slide_content_inner {
    background: #e04004;
    color: #fff;
  }
  .whowework_swiper .swiper-wrapper .slide_content_title .slide_content_no,
  .whowework_swiper .swiper-wrapper .slide_content_title .slide_content_title_text {
    color: #fff;
  }
  
  .whowework_swiper .swiper-wrapper .slide_content_title .slide_content_title_text {
    font-size: 32px;
    height: 120px;  
  }

  .whowework_swiper .swiper-wrapper .slide_content_text {
    position: static;
    transform: none;
    background: transparent;
    color: #fff;
    padding: 24px 0 0;
    height: 130px;
    line-height: 1.5;
  }
  .whowework_swiper .swiper-wrapper .slide_content_icon img {
    filter: brightness(0) invert(1);
  }

  .whowework_swiper .swiper-wrapper .slide_content_icon{
    position: static;
    width: 72px;
    height: 72px;
  }

	.main__visual__box {
    position: relative;
    padding: 20% 0 45%;
    height: auto;
	}

    .main__title__wr .main__title { font-size: 72px; line-height: 70px; }
    .main__text__wr .main__sub__text { font-size: 16px; line-height: 26px; }
    .flame__text { font-size: 44px; }

	#main__does__wr {
        padding-bottom: 100px;
	}

	.dose__clock__wr .clock {
        position: relative;
        width: 322px;
        height: 322px;
    }

    
	#workwith_title_wr .template_swiper .swiper-wrapper .slide_content_inner {
    display: flex;
    flex-direction: column;
	}

  #workwith_title_wr .slide_content_icon{
    align-self: flex-end;
  }

	.template_swiper .swiper-wrapper .slide_content_inner {
    padding: 30px;
	}

	.template_swiper_carousel {
		margin-top: 20px;
	}

	.testimonials_title_wr .slide_content_text {
		margin-top: 20px;
	}

	
    .visual__title__wr .main__title02{
        text-align: right;
    }

    .visual__title__wr .main__title03 {
        text-align: center;
    }

    .dose__text__wr { padding-left: 0; margin-top: 40px; }
    .services_item_title { font-size: 28px; line-height: 1.3; }
    
    .whowework, .services, .testimonials, .news { padding: 80px 0; }
    
    .slide__title__wr, .services_header, .news__header { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
    .slide__title__wr .main__btn__wr, .services_header .main__btn__wr, .news__header .main__btn__wr { align-self: flex-end; }
    .services_list { margin-top: 40px; }

    .template_swiper .swiper-slide { min-height: 320px; }
    .whowework_swiper .swiper-wrapper .slide_content_title_text { font-size: 22px; }
    .whowework_swiper .swiper-wrapper .slide_content_text{ font-size: 16px; }

    #main__does__wr {
      padding: 50% 0;
    }
    .whowework, .services, .testimonials, .news { padding: 200px 0; }
}

/* 5. 소형 모바일 (569px 이하) */
@media screen and (max-width: 570px) {

  .main__visual__box {
    position: relative;
    padding: 30% 0 35%;
	}

	.dose__clock__wr .clock {
		scale: 0.7;
        left: -25%;
    }


    
    .main__title__wr .main__title { font-size: 42px; line-height: 56px; }
    .main__text__wr .main__sub__text { font-size: 16px; line-height: 24px;}
    .main__does__box .main__text__wr .main__sub__text { font-size: 16px; line-height: 24px; padding-left: 31%;}
    .main__scroll__wr { bottom: 20px; }
    .flame__text { font-size: 34px; }


    /* .dose__title__wr .main__title01, .dose__title__wr .main__title02 { padding-left: 0; } */
    .dose__text__wr { padding-left: 0; margin-top: 30px; }
    .services_item_title { font-size: 24px; line-height: 1.4; }
    
    
    .slide__title__wr, .services_header, .news__header { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
    .slide__title__wr .main__btn__wr, .services_header .main__btn__wr, .news__header .main__btn__wr { align-self: flex-end; }
    .services_list { margin-top: 30px; }

    .services_item_panel .services_item_tags {
      font-size: 14px;
    }
    
    .template_swiper .swiper-slide { min-height: 380px; }
    .whowework_swiper .swiper-wrapper .slide_content_title .slide_content_title_text {
      height: 120px;
      font-size: 24px;
    }

    .whowework_swiper .swiper-wrapper .slide_content_text { font-size: 14px; line-height: 1.4; height: 190px; }

    .testimonials_title_wr .slide_content_text {
      font-size: 14px;
    }

    .news .template_swiper.news_swiper .slide_content .slide_content_inner .slide_content_header .slide_content_tags span {
      font-size: 12px;
  }
}

/* =========================================================================
   [WHAT YOU GET 전용 반응형 — (그 외 섹션과 별도, max-width: 1400px)
========================================================================= */
@media screen and (max-width: 1800px) {
  .whatyouget_svg {
    margin-top: 170px;
}

  .whatyouget_item[data-wyg-index="0"] {
    top: 21%;
    left: 37%;
  }
  .whatyouget_item[data-wyg-index="1"] {
    top: 46%;
    left: 58%;
  }
  .whatyouget_item[data-wyg-index="2"] {
    top: 60%;
    left: 21%;
  }
  .whatyouget_item[data-wyg-index="3"] {
    top: 74%;
    left: 58%;
  }

  .whatyouget_text {
    font-size: clamp(20px, 2.6vw, 32px);
  }

  .whatyouget_text::before {
    width: clamp(20px, calc(42 / 1800 * 100vw), 30px);
    height: clamp(20px, calc(42 / 1800 * 100vw), 30px);
    margin-bottom: clamp(5px, calc(20 / 1800 * 100vw), 20px);
}

}

@media screen and (max-width: 1400px) {

  .whatyouget_text {
    font-size: clamp(30px, 2.6vw, 48px);
  }

  .whatyouget_svg_stage--desktop {
    display: none;
  }

  .whatyouget_svg_stage--narrow {
    display: block;
  }

  .whatyouget_item[data-wyg-index="0"] {
    top: 24%;
    left: 32%;
  }

  .whatyouget_item[data-wyg-index="1"] {
    top: 45%;
    left: 44%;
  }

  .whatyouget_item[data-wyg-index="2"] {
    top: 58%;
    left: 6%;
  }

  .whatyouget_item[data-wyg-index="3"] {
    top: 81%;
    left: 47%;
  }

}


@media screen and (max-width: 820px) {

  .whatyouget_svg_stage--narrow .whatyouget_svg {
    position: relative;
    left: 80px;
    margin-top: 20px;
    width: min(1000px, 92vw);
    max-width: 100%;
}


  .whatyouget_text {
    font-size: clamp(18px, 4vw, 28px);
  }

  .whatyouget_svg_stage--desktop {
    display: none;
  }

  .whatyouget_svg_stage--narrow {
    display: block;
  }

  .whatyouget_item[data-wyg-index="0"] {
    top: 16%;
    left: 32%;
  }

  .whatyouget_item[data-wyg-index="1"] {
    top: 45%;
    left: 44%;
  }

  .whatyouget_item[data-wyg-index="2"] {
    top: 58%;
    left: 6%;
  }

  .whatyouget_item[data-wyg-index="3"] {
    top: 81%;
    left: 33%;
  }
}

@media screen and (max-width: 570px) {
  .whatyouget_item[data-wyg-index="0"] {
    top: 18%;
    left: 32%;
}
  .whatyouget_text {
    font-size: clamp(13px, 3.5vw, 18px);
  }

}