/* 홈 중간 7섹션(R3) — 원본 banner.css / aa-section-styles.css / tab-image.css 값 기준 (rem=10px → px) */
.tkh-mid-banner,.tkh-mid-rt,.tkh-mid-tabs{--tkh-rate:((100vw - 575px) / (1600 - 575));font-family:Roboto,"Pretendard","Noto Sans KR",sans-serif}

/* 공통 버튼 (.btn-primary) */
.tkh-mid-btn{display:inline-flex;align-items:center;padding:14px 36px;font-size:16px;font-weight:600;letter-spacing:-.024em;line-height:1.2;text-decoration:none;border:1px solid var(--b);background:var(--b);color:var(--c);transition:background .3s,color .3s,border-color .3s}
.tkh-mid-banner .tkh-mid-btn{--b:#fff;--c:#111;margin-bottom:24px}
.tkh-mid-banner .tkh-mid-btn:hover{--b:#3456e6;--c:#fff}
.tkh-mid-rt .tkh-mid-btn{--b:#3456e6;--c:#fff}
.tkh-mid-rt .tkh-mid-btn:hover{--c:#000}

/* 이미지/영상 오버레이 배너 (.sec__iwto) */
.tkh-mid-banner{background:#fff;color:#fff}
.tkh-mid-banner__inner{position:relative;overflow:hidden;display:flex;--ar:1.6}
.tkh-mid-banner__inner::before{content:"";width:0;padding-top:calc(100% / var(--ar))}
.tkh-mid-banner__media{position:absolute;inset:0;display:block}
.tkh-mid-banner__media::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--ov,0);pointer-events:none}
.tkh-mid-banner__media img,.tkh-mid-banner__media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* 원본 h-adapt: 비율이 최소 높이, 글이 길면 배너가 늘어남 */
.tkh-mid-banner__content{position:relative;z-index:1;display:flex;flex:0 0 90%;max-width:1230px;margin:0 auto;align-items:center;justify-content:flex-start;text-align:left}
.tkh-mid-banner__box{max-width:60%;padding:clamp(32px,calc(32px + 18 * var(--tkh-rate)),50px) clamp(15px,calc(15px + 35 * var(--tkh-rate)),50px)}
.tkh-mid-banner__sub{margin:0;font-size:14px;font-weight:500;line-height:1.714}
.tkh-mid-banner__title{--fs:62;margin:0;color:inherit;font-weight:600;letter-spacing:-.034em;line-height:1.21;font-size:clamp(calc(var(--fs) * .64px),calc(var(--fs) * .64px + var(--fs) * .36 * var(--tkh-rate)),calc(var(--fs) * 1px))}
.tkh-mid-banner__desc{margin:0 0 15px;font-size:14px;line-height:1.714}
.tkh-mid-banner__desc strong{font-weight:600}
.tkh-mid-label{display:inline-block;margin-bottom:5px;padding:0 12px;border-radius:30px;background:#3456e6;color:#fff;font-size:14px;line-height:1.714}
.tkh-mid-click{cursor:pointer;transition:opacity .3s ease}
.tkh-mid-click:hover{opacity:.95}

/* X1 Meeting: 상단 가운데, 75% 폭, 제목 76 */
.tkh-mid-banner--x1m .tkh-mid-banner__content{align-items:flex-start;justify-content:center;text-align:center}
.tkh-mid-banner--x1m .tkh-mid-banner__box{max-width:75%}
.tkh-mid-banner--x1m .tkh-mid-banner__title{--fs:76}
.tkh-mid-banner--x1m .tkh-mid-banner__desc{margin-bottom:10px}
/* W4 영상: 16:9 */
.tkh-mid-banner--w4 .tkh-mid-banner__inner{--ar:1.7778}
/* 커뮤니티: 2.1333, 오버레이 15%, 제목 72 */
.tkh-mid-banner--community .tkh-mid-banner__inner{--ar:2.1333}
.tkh-mid-banner--community .tkh-mid-banner__media{--ov:.15}
.tkh-mid-banner--community .tkh-mid-banner__title{--fs:72}
.tkh-mid-banner--community .tkh-mid-banner__desc{margin-bottom:12px}

.tkh-mid-mute{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer}
.tkh-mid-mute .tkh-mid-mute__on,.tkh-mid-mute[aria-pressed=true] .tkh-mid-mute__off{display:none}
.tkh-mid-mute[aria-pressed=true] .tkh-mid-mute__on{display:inline}

@media (max-width:768px){
  .tkh-mid-banner__content{flex-basis:100%;align-items:flex-start}
  .tkh-mid-banner__box{max-width:100%}
}
@media (max-width:767px){
  .tkh-mid-banner--x1m .tkh-mid-banner__inner{--ar:.6466}
  .tkh-mid-banner--community .tkh-mid-banner__inner{--ar:.6466}
  .tkh-mid-btn{padding:10px 30px}
}

/* 2단 리치 텍스트 (.two-column-text) — 컬러 스킴: 글자·제목 #3456e6 */
.tkh-mid-rt{background:#fff;color:#3456e6;padding:clamp(30px,calc(30px + 10 * var(--tkh-rate)),40px) 0}
.tkh-mid-rt--pb0{padding-bottom:0}
.tkh-mid-rt__container{display:flex;gap:40px;width:90%;max-width:1230px;margin:0 auto 30px;padding:0 15px;box-sizing:border-box}
.tkh-mid-rt__left{flex:0 0 50%;font-weight:600}
.tkh-mid-rt__right{flex:1;font-size:16px;line-height:1.714;font-weight:400}
.tkh-mid-rt__right p{margin:0}
.tkh-mid-rt__right .tkh-mid-btn{margin-top:20px}
.tkh-mid-rt__right strong{font-weight:600}
.tkh-mid-rt__sub{margin:0 0 10px;font-size:14px;font-weight:500;line-height:1.4;color:#3456e6}
.tkh-mid-rt__title{margin:0;font-size:50px;font-weight:600;line-height:1.21;letter-spacing:-.034em;color:#3456e6}
@media (max-width:768px){
  .tkh-mid-rt__container{flex-direction:column;gap:0}
  .tkh-mid-rt__sub{margin-bottom:8px}
  .tkh-mid-rt__title{margin-bottom:20px}
  .tkh-mid-rt__left,.tkh-mid-rt__right{flex:0 0 100%;width:100%}
}
@media (max-width:1024px){.tkh-mid-rt__container{width:100%}}

/* W4 Pro 탭 이미지 (.tab-image) */
.tkh-mid-tabs{background:#fff;color:#111}
.tkh-mid-tabs__wrap{position:relative;width:100%;overflow:hidden}
.tkh-mid-tabs__nav{position:absolute;top:30px;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:4px;width:fit-content;margin:auto;padding:5px 7px;background:#fff;border-radius:30px;opacity:0;transform:scale(.6);transition:all .8s cubic-bezier(.4,0,.2,1)}
.tkh-mid-tabs__nav.is-visible{opacity:1;transform:scale(1)}
.tkh-mid-tabs__tab{position:relative;padding:14px 16px;border:0;border-radius:30px;background:transparent;color:#333;font:inherit;font-size:17px;line-height:1.2;cursor:pointer;transition:color .3s ease;white-space:nowrap}
.tkh-mid-tabs__tab:hover{color:#767272}
.tkh-mid-tabs__tab.is-active{color:#fff}
.tkh-mid-tabs__bg{position:absolute;inset:0;z-index:1;background:#3456e6;border-radius:30px;opacity:0;transition:all .3s ease}
.tkh-mid-tabs__tab.is-active .tkh-mid-tabs__bg{opacity:1;transform:scale(1.02)}
.tkh-mid-tabs__text{position:relative;z-index:2}
.tkh-mid-tabs__stage{position:relative;width:100%;height:700px}
.tkh-mid-tabs__stage::after{content:"";position:absolute;inset:0;background:#000;opacity:.2;pointer-events:none}
.tkh-mid-tabs__panel{position:absolute;inset:0;opacity:0;pointer-events:none;transition:all .5s cubic-bezier(.4,0,.2,1)}
.tkh-mid-tabs__panel.is-active{opacity:1;pointer-events:auto}
.tkh-mid-tabs__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.tkh-mid-tabs__media{display:block;width:100%;height:100%}
.tkh-mid-tabs__panel.is-active .tkh-mid-tabs__media img{transform:scale(1.02)}
.tkh-mid-tabs__list{position:absolute;right:0;bottom:0;z-index:1;box-sizing:border-box;width:80%;max-width:500px;margin:20px 0 0;padding:20px;list-style:none}
.tkh-mid-tabs__list li{display:flex;align-items:flex-start;gap:10px;margin:10px 0;color:#fff;font-size:26px;line-height:1.4;text-align:left}
.tkh-mid-tabs__list li:first-child{margin-top:0}
.tkh-mid-tabs__list img{flex-shrink:0;width:30px;height:30px;margin-top:6px;border-radius:50%}
@media (max-width:749px){
  .tkh-mid-tabs__stage{height:550px}
  .tkh-mid-tabs__nav{max-width:calc(100% - 20px)}
  .tkh-mid-tabs__tab{padding:12px 12px;font-size:15px}
  .tkh-mid-tabs__list{left:0;bottom:20px;width:100%;max-width:none;transform:translateY(20px);background:linear-gradient(0deg,#000000b3,#0000)}
  .tkh-mid-tabs__list li{font-size:18px}
  .tkh-mid-tabs__list img{width:20px;height:20px;margin-top:2px}
}