@charset "utf-8";
/*** WEBCOACH 메인 ***/
.mo_br{display:none;}

/* 공통 타이틀 */
.wc_tit{text-align:center; margin:0 0 60px;}
.wc_tit p{font-size:15px; font-weight:700; letter-spacing:3px; color:var(--main); margin:0 0 14px;}
.wc_tit h3{font-size:44px; font-weight:800; color:var(--black); line-height:1.3; letter-spacing:-1.5px;}
.wc_tit span{display:block; margin:18px 0 0; font-size:18px; color:var(--basic); line-height:1.7;}

/* 버튼 */
.wc_btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.wc_btn{display:inline-flex; align-items:center; justify-content:center; height:60px; padding:0 34px; border-radius:60px; font-size:17px; font-weight:700; transition:all .3s;}
.wc_btn_red{background:var(--main); color:#fff; box-shadow:0 10px 30px rgba(224,36,36,.35);}
.wc_btn_red:hover{background:var(--mainDark); transform:translateY(-2px);}
.wc_btn_line{border:1px solid rgba(255,255,255,.5); color:#fff;}
.wc_btn_line:hover{background:#fff; color:var(--black);}
.wc_btn_white{background:#fff; color:var(--main);}
.wc_btn_white:hover{background:var(--black); color:#fff;}

/* Visual */
#wc_visual{position:relative; height:var(--vh); min-height:720px; overflow:hidden; display:flex; align-items:center;
	background:radial-gradient(circle at 80% 20%, rgba(224,36,36,.55) 0, rgba(224,36,36,0) 45%), radial-gradient(circle at 10% 90%, rgba(255,90,95,.25) 0, rgba(255,90,95,0) 40%), #15090a;}
#wc_visual .wc_vis_swiper{position:absolute; inset:0; z-index:1;}
#wc_visual .wc_vis_slide{display:flex; align-items:center; height:100%; overflow:hidden;}
#wc_visual .wc_vis_bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.12); transition:transform 6s linear;}
#wc_visual .swiper-slide-active .wc_vis_bg{transform:scale(1);}
#wc_visual .wc_vis_bg:after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(21,9,10,.88) 0, rgba(21,9,10,.72) 50%, rgba(21,9,10,.62) 100%), radial-gradient(circle at 80% 20%, rgba(224,36,36,.45) 0, rgba(224,36,36,0) 50%);}
#wc_visual .wc_visual_in{position:relative; z-index:2; width:100%; text-align:center; padding-top:90px;}
#wc_visual .wc_vis_slide .wc_eyebrow, #wc_visual .wc_vis_slide .wc_headline, #wc_visual .wc_vis_slide .wc_lead, #wc_visual .wc_vis_slide .wc_btns{opacity:0; transform:translateY(30px);}
#wc_visual .swiper-slide-active .wc_eyebrow, #wc_visual .swiper-slide-active .wc_headline, #wc_visual .swiper-slide-active .wc_lead, #wc_visual .swiper-slide-active .wc_btns{opacity:1; transform:none; transition:opacity .8s, transform .8s;}
#wc_visual .swiper-slide-active .wc_headline{transition-delay:.15s;}
#wc_visual .swiper-slide-active .wc_lead{transition-delay:.3s;}
#wc_visual .swiper-slide-active .wc_btns{transition-delay:.45s;}
#wc_visual .wc_vis_ctrl{position:absolute; left:50%; bottom:110px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:18px;}
#wc_visual .wc_vis_pager{display:flex; gap:14px; position:static; width:auto;}
#wc_visual .wc_vis_pager button{display:flex; align-items:center; gap:10px; width:auto; height:auto; margin:0 !important; padding:0; background:none; border:0; border-radius:0; opacity:1; cursor:pointer; color:rgba(255,255,255,.5); font-family:var(--eng); font-size:14px; font-weight:600;}
#wc_visual .wc_vis_pager button em{font-style:normal;}
#wc_visual .wc_vis_pager button i{display:block; width:40px; height:2px; background:rgba(255,255,255,.25); position:relative; overflow:hidden;}
#wc_visual .wc_vis_pager button i:after{content:''; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--main);}
#wc_visual .wc_vis_pager button.swiper-pagination-bullet-active{color:#fff;}
#wc_visual .wc_vis_pager button.swiper-pagination-bullet-active i:after{animation:wc_vis_bar 5s linear forwards;}
#wc_visual.paused .wc_vis_pager button.swiper-pagination-bullet-active i:after{animation:none; width:100%;}
@keyframes wc_vis_bar{from{width:0;} to{width:100%;}}
#wc_visual .wc_vis_toggle{width:26px; height:26px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:none; position:relative; cursor:pointer;}
#wc_visual .wc_vis_toggle span:before, #wc_visual .wc_vis_toggle span:after{content:''; position:absolute; top:8px; width:2px; height:8px; background:#fff;}
#wc_visual .wc_vis_toggle span:before{left:9px;} #wc_visual .wc_vis_toggle span:after{right:9px;}
#wc_visual .wc_vis_toggle.paused span:before{left:10px; top:7px; width:0; height:0; background:none; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff;}
#wc_visual .wc_vis_toggle.paused span:after{display:none;}
#wc_visual .wc_visual_deco{position:absolute; inset:0; z-index:2; pointer-events:none;}
#wc_visual .wc_eyebrow{display:inline-block; font-size:15px; font-weight:600; letter-spacing:4px; color:#ff8a8d; padding:9px 20px; border:1px solid rgba(255,138,141,.4); border-radius:40px; margin:0 0 34px;}
#wc_visual .wc_headline{font-size:84px; font-weight:900; color:#fff; line-height:1.18; letter-spacing:-3px;}
#wc_visual .wc_headline em{font-style:normal; color:var(--main); position:relative;}
#wc_visual .wc_headline em:after{content:''; position:absolute; left:0; right:0; bottom:6px; height:10px; background:rgba(224,36,36,.25); z-index:-1;}
#wc_visual .wc_lead{margin:30px 0 48px; font-size:22px; color:rgba(255,255,255,.8); line-height:1.7;}
#wc_visual .wc_visual_deco span{position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08);}
#wc_visual .wc_visual_deco .d1{width:900px; height:900px; right:-300px; top:-300px;}
#wc_visual .wc_visual_deco .d2{width:600px; height:600px; right:-150px; top:-150px; border-color:rgba(224,36,36,.3);}
#wc_visual .wc_visual_deco .d3{width:500px; height:500px; left:-200px; bottom:-250px;}
#wc_visual .scroll_down{display:inline-block; font-size:13px; font-weight:500; color:#fff; font-family:var(--eng); text-align:center; position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:3;}
#wc_visual .scroll_down span{display:block; width:20px; height:30px; border-radius:20px; box-sizing:border-box; border:1px solid rgba(255,255,255,.5); position:relative; margin:12px auto 0;}
#wc_visual .scroll_down span:after{content:''; display:block; width:2px; height:5px; background:#fff; border-radius:2px; position:absolute; left:50%; top:8px; margin-left:-1px; animation:scroll_down 1s linear infinite;}

/* 템플릿 비교 */
.wc_compare{display:flex; gap:30px; max-width:1100px; margin:0 auto;}
.wc_compare dl{flex:1; border-radius:24px; padding:46px 44px; box-sizing:border-box;}
.wc_compare dl dt{font-size:24px; font-weight:800; margin:0 0 26px; letter-spacing:-.5px;}
.wc_compare dl dd{position:relative; padding:14px 0 14px 34px; font-size:18px; border-top:1px solid rgba(0,0,0,.08); line-height:1.5;}
.wc_compare dl dd:before{font-family:var(--icon); position:absolute; left:0; top:13px; font-size:22px;}
.wc_compare .other{background:#f4f4f5; color:#888;}
.wc_compare .other dt{color:#666;}
.wc_compare .other dd:before{content:'close'; color:#bbb;}
.wc_compare .wc{background:var(--main); color:#fff; box-shadow:0 20px 50px rgba(224,36,36,.3);}
.wc_compare .wc dd{border-color:rgba(255,255,255,.2); font-weight:500;}
.wc_compare .wc dd:before{content:'check_circle'; color:#fff;}

/* 특징 카드 */
#wc_point{background:#fbf6f6;}
.wc_cards{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.wc_cards li{position:relative; background:#fff; border-radius:24px; padding:44px 34px; box-sizing:border-box; box-shadow:0 10px 30px rgba(0,0,0,.04); transition:all .3s;}
.wc_cards li:hover{transform:translateY(-6px); box-shadow:0 20px 40px rgba(224,36,36,.15);}
.wc_cards .num{position:absolute; right:30px; top:28px; font-size:15px; font-weight:700; color:#e5d4d4;}
.wc_cards .ico{display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:18px; background:rgba(224,36,36,.1); color:var(--main); font-size:32px; margin:0 0 28px;}
.wc_cards h4{font-size:21px; font-weight:800; color:var(--black); margin:0 0 12px;}
.wc_cards p{font-size:16px; color:var(--basic); line-height:1.7;}

/* 신뢰 지표 */
#wc_trust{background:#15090a; padding:70px 0;}
.wc_stats{display:grid; grid-template-columns:repeat(4,1fr);}
.wc_stats li{text-align:center; border-left:1px solid rgba(255,255,255,.12);}
.wc_stats li:first-child{border-left:0;}
.wc_stats strong{display:block; font-size:54px; font-weight:800; color:#fff; line-height:1.1;}
.wc_stats strong small{font-size:22px; margin-left:4px; color:var(--main); font-family:var(--kor);}
.wc_stats span{display:block; margin:10px 0 0; font-size:16px; color:rgba(255,255,255,.6);}

/* 과정 */
.wc_steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:none;}
.wc_steps li{position:relative; text-align:center; padding:36px 18px; border:1px solid var(--border); border-radius:20px; transition:all .3s;}
.wc_steps li:hover{border-color:var(--main);}
.wc_steps li:not(:last-child):after{content:'chevron_right'; font-family:var(--icon); position:absolute; right:-17px; top:50%; transform:translateY(-50%); width:18px; font-size:22px; color:var(--main); z-index:2;}
.wc_steps span{display:inline-block; font-size:13px; font-weight:700; color:var(--main); letter-spacing:1px; margin:0 0 14px;}
.wc_steps h4{font-size:20px; font-weight:800; color:var(--black); margin:0 0 10px;}
.wc_steps p{font-size:15px; color:var(--basic); line-height:1.6;}

/* 후기 */
#wc_review{background:#fbf6f6;}
.wc_reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.wc_reviews li{background:#fff; border-radius:24px; padding:40px 36px; display:flex; flex-direction:column;}
.wc_reviews .star{color:var(--main); font-size:17px; letter-spacing:2px; margin:0 0 18px;}
.wc_reviews .star b{color:var(--black); margin-left:6px; letter-spacing:0;}
.wc_reviews .txt{flex:1; font-size:17px; color:#444; line-height:1.8; word-break:keep-all;}
.wc_reviews .who{margin:24px 0 0; padding:18px 0 0; border-top:1px solid var(--border); font-size:16px; font-weight:700; color:var(--black);}

/* 공지 */
#notice .wc_tit{margin-bottom:50px;}

/* CTA */
#wc_cta{background:linear-gradient(120deg, var(--main) 0%, #b3141a 100%); padding:110px 0; text-align:center;}
#wc_cta p{font-size:15px; font-weight:700; letter-spacing:4px; color:rgba(255,255,255,.7); margin:0 0 18px;}
#wc_cta h3{font-size:46px; font-weight:800; color:#fff; line-height:1.35; letter-spacing:-1.5px; margin:0 0 44px;}

/* 반응형 */
@media all and (max-width:1200px){
	.wc_cards{grid-template-columns:repeat(2,1fr);}
	.wc_steps{grid-template-columns:repeat(3,1fr); gap:24px;}
	.wc_steps li:after{display:none;}
}
@media all and (max-width:1024px){
	#wc_visual .wc_headline{font-size:62px;}
	.wc_tit h3{font-size:36px;}
	.wc_reviews{grid-template-columns:1fr;}
	.wc_stats{grid-template-columns:repeat(2,1fr); row-gap:40px;}
	.wc_stats li:nth-child(3){border-left:0;}
}
@media all and (max-width:768px){
	.mo_br{display:block;}
	#wc_visual{min-height:600px;}
	#wc_visual .wc_visual_in{padding-top:60px;}
	#wc_visual .wc_eyebrow{font-size:12px; letter-spacing:2px; margin-bottom:24px;}
	#wc_visual .wc_headline{font-size:40px; letter-spacing:-1.5px;}
	#wc_visual .wc_lead{font-size:16px; margin:22px 0 34px;}
	#wc_visual .wc_vis_ctrl{bottom:96px;}
	#wc_visual .wc_vis_pager button i{width:26px;}
	.wc_btn{height:52px; padding:0 26px; font-size:15px;}
	.wc_tit{margin-bottom:40px;}
	.wc_tit h3{font-size:28px;}
	.wc_tit span{font-size:15px;}
	.wc_tit span br{display:none;}
	.wc_compare{flex-direction:column; gap:20px;}
	.wc_compare dl{padding:32px 26px;}
	.wc_compare dl dt{font-size:20px;}
	.wc_compare dl dd{font-size:16px;}
	.wc_cards{grid-template-columns:1fr;}
	.wc_cards li{padding:34px 28px;}
	.wc_steps{grid-template-columns:1fr 1fr; gap:14px;}
	.wc_steps li{padding:26px 14px;}
	.wc_steps li:last-child{grid-column:1 / -1;}
	.wc_stats strong{font-size:40px;}
	.wc_stats span{font-size:14px;}
	#wc_trust{padding:50px 0;}
	#wc_cta{padding:80px 0;}
	#wc_cta h3{font-size:28px;}
}

/*** WEBCOACH 서브페이지 (2026-11-10) ***/
#visual .v_bg .bg.wc_subbg{background:radial-gradient(circle at 80% 20%, rgba(224,36,36,.55) 0, rgba(224,36,36,0) 45%), linear-gradient(135deg,#1a0a0b 0%,#2b0e10 55%,#7a1418 100%) !important;}
.wc_sub{padding:0 0 0;}
.wc_sub_intro{text-align:center; padding:20px 0 70px;}
.wc_sub_intro p{font-size:15px; font-weight:700; letter-spacing:3px; color:var(--main); margin:0 0 16px;}
.wc_sub_intro h4{font-size:46px; font-weight:800; color:var(--black); line-height:1.3; letter-spacing:-1.5px;}
.wc_sub_intro span{display:block; margin:22px 0 0; font-size:18px; color:var(--basic); line-height:1.75;}
.wc_sub_sec{padding:90px 0;}
.wc_sub_sec.gray{background:#f7f5f5; border-radius:24px;}
.wc_sub_h{font-size:32px; font-weight:800; color:var(--black); letter-spacing:-1px; margin:0 0 40px; text-align:center;}
.wc_sub_h:after{content:''; display:block; width:36px; height:3px; background:var(--main); margin:18px auto 0;}
.wc_sub_desc{text-align:center; font-size:17px; color:var(--basic); margin:-20px 0 40px; line-height:1.7;}
.wc_sub_center{text-align:center;}
.wc_sub_center .material-symbols-outlined{font-size:20px; margin-left:6px;}
.wc_sub_cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.wc_sub_cards.col4{grid-template-columns:repeat(4,1fr);}
.wc_sub_cards li{background:#fff; border:1px solid #eee; border-radius:20px; padding:38px 32px; transition:all .3s;}
.wc_sub_cards li:hover{border-color:var(--main); box-shadow:0 16px 40px rgba(224,36,36,.12); transform:translateY(-4px);}
.wc_sub_cards .ico{display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:16px; background:rgba(224,36,36,.08); color:var(--main); font-size:30px; margin:0 0 24px;}
.wc_sub_cards strong{display:block; font-size:21px; font-weight:700; color:var(--black); margin:0 0 12px; letter-spacing:-.5px;}
.wc_sub_cards p{font-size:16px; color:var(--basic); line-height:1.7; word-break:keep-all;}
.wc_sub_check{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; max-width:1000px;}
.wc_sub_check li{position:relative; padding:18px 22px 18px 58px; background:#fff; border-radius:14px; font-size:17px; color:var(--black); line-height:1.6; word-break:keep-all;}
.wc_sub_check li:before{content:'check'; font-family:'Material Symbols Outlined'; position:absolute; left:20px; top:50%; transform:translateY(-50%); width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:var(--main); color:#fff; font-size:17px;}
.wc_sub_sec:not(.gray) .wc_sub_check li{background:#f7f5f5;}
.wc_sub_steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:none;}
.wc_sub_steps li{background:#fff; border-radius:20px; padding:34px 30px; border-top:4px solid var(--main);}
.wc_sub_sec:not(.gray) .wc_sub_steps li{background:#f7f5f5;}
.wc_sub_steps em{display:block; font-style:normal; font-size:14px; font-weight:700; color:var(--main); letter-spacing:2px; margin:0 0 12px;}
.wc_sub_steps strong{display:block; font-size:21px; font-weight:700; color:var(--black); margin:0 0 10px;}
.wc_sub_steps p{font-size:16px; color:var(--basic); line-height:1.7; word-break:keep-all;}
.wc_sub_faq{max-width:1000px;}
.wc_sub_faq details{border-bottom:1px solid #e5e5e5; background:#fff;}
.wc_sub_faq summary{list-style:none; cursor:pointer; position:relative; padding:26px 60px 26px 56px; font-size:18px; font-weight:600; color:var(--black);}
.wc_sub_faq summary::-webkit-details-marker{display:none;}
.wc_sub_faq summary:before{content:'Q'; position:absolute; left:16px; top:24px; font-family:var(--eng); font-weight:800; font-size:20px; color:var(--main);}
.wc_sub_faq summary:after{content:'add'; font-family:'Material Symbols Outlined'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:24px; color:#999;}
.wc_sub_faq details[open] summary:after{content:'remove'; color:var(--main);}
.wc_sub_faq details p{padding:0 30px 28px 56px; font-size:16px; color:var(--basic); line-height:1.8; word-break:keep-all;}
.wc_sub_table{max-width:1000px;}
.wc_sub_table table{width:100%; border-collapse:collapse; border-top:2px solid var(--black); background:#fff;}
.wc_sub_table th{padding:18px 20px; font-size:16px; font-weight:700; background:#fafafa; border-bottom:1px solid #ddd;}
.wc_sub_table td{padding:20px; font-size:16px; color:var(--basic); border-bottom:1px solid #eee; line-height:1.6; word-break:keep-all;}
.wc_sub_table td:first-child{width:24%; font-weight:700; color:var(--black); text-align:center;}
.wc_sub_note{display:flex; align-items:center; gap:10px; max-width:1000px; margin:0 auto 90px; padding:20px 26px; border-radius:14px; background:rgba(224,36,36,.06); color:var(--mainDark); font-size:16px; line-height:1.6;}
.wc_sub_note .material-symbols-outlined{font-size:24px; flex-shrink:0;}
.wc_sub_cta{padding:90px 0; border-radius:24px; overflow:hidden; background:linear-gradient(135deg,var(--mainDark),var(--main)); text-align:center; color:#fff;}
.wc_sub_cta h5{font-size:36px; font-weight:800; letter-spacing:-1px;}
.wc_sub_cta p{font-size:18px; opacity:.85; margin:16px 0 36px;}
@media all and (max-width:1200px){
	.wc_sub_cards.col4{grid-template-columns:repeat(2,1fr);}
}
@media all and (max-width:1024px){
	.wc_sub_cards{grid-template-columns:repeat(2,1fr);}
	.wc_sub_steps{grid-template-columns:repeat(2,1fr);}
	.wc_sub_intro h4{font-size:38px;}
}
@media all and (max-width:768px){
	.wc_sub_intro{padding:0 0 50px;}
	.wc_sub_intro h4{font-size:28px;}
	.wc_sub_intro span{font-size:15px;}
	.wc_sub_intro span br{display:none;}
	.wc_sub_sec{padding:60px 0;}
	.wc_sub_h{font-size:24px; margin-bottom:30px;}
	.wc_sub_desc{font-size:15px;}
	.wc_sub_cards, .wc_sub_cards.col4, .wc_sub_steps, .wc_sub_check{grid-template-columns:1fr; gap:14px;}
	.wc_sub_cards li{padding:28px 24px;}
	.wc_sub_check li{font-size:15px;}
	.wc_sub_faq summary{font-size:16px; padding:20px 44px 20px 44px;}
	.wc_sub_faq summary:before{left:10px; top:18px;}
	.wc_sub_faq details p{padding:0 16px 22px 44px; font-size:15px;}
	.wc_sub_table td, .wc_sub_table th{padding:14px 10px; font-size:14px;}
	.wc_sub_note{margin-bottom:60px; font-size:14px; align-items:flex-start;}
	.wc_sub_cta{padding:60px 0;}
	.wc_sub_cta h5{font-size:24px; padding:0 16px;}
	.wc_sub_cta p{font-size:15px; padding:0 16px;}
}

/* 게시판 분류 탭 모바일 가로 넘침 방지 */
.cate_tab.swiper-container{overflow:hidden;}
@media all and (min-width:1025px){
	.wc_sub_steps:has(> li:nth-child(4):last-child){grid-template-columns:repeat(4,1fr);}
}
.wc_sub_sec.gray + .wc_sub_cta{margin-top:40px;}