#contents { overflow:hidden; } 
.main_service { position:relative; padding:40px 0 80px; } 
.main_service::before, .main_service::after { position:absolute; z-index:0; width:700px; height:475px; background:url("/vitnaming/img/main_brush.webp") center/contain no-repeat; content:""; opacity:.06; pointer-events:none; } 
.main_service::before { top: -40px; left: -15px; transform: scale(-1, 1); width: 405px; height: 275px; } 
.main_service::after { right: -85px; bottom: -130px; } 
.service_inner { position:relative; z-index:1; display:flex; width:calc(100% - 40px); max-width:1680px; gap:20px; margin:0 auto; } 
.service_column { display:flex; min-width:0; flex:1; flex-direction:column; gap:20px; } 
.service_card { position:relative; display:block; overflow:hidden; border-radius:10px; } 
.service_primary { flex:2.05; } 
.service_card > img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } 
.service_dim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .8) 100%); } 
.service_content { position:absolute; right:25px; bottom:25px; left:25px; display:flex; align-items:center; flex-wrap:wrap; color:#fff; } 
.service_content strong { font-family:"Shilla Culture", serif; font-size:30px; line-height:1.25; } 
.service_content > i { position:absolute; right:0; bottom:0; } 
.service_content > span { display:block; width:100%; max-height:0; overflow:hidden; margin-top:0; font-size: 18px; font-weight:400; line-height:1.7; opacity:0; transform:translateY(10px); } 
.service_baby { height:580px; } 
.service_baby .service_content { right:50px; bottom:40px; left:50px; } 
.service_baby .service_content strong { font-size:40px; } 
.service_rename, .service_fortune, .service_business { height:280px; } 
.service_date, .service_match { height:130px; } 
.service_rename img { object-position:center 45%; } 
.service_fortune img { object-position:center 54%; } 
.service_business img { object-position:center 52%; } 
.main_consult { position:relative; padding:70px 0; background:#dfeff2; } 
.main_consult::before { position:absolute; inset:0; background:url("/vitnaming/img/main_consult_bg.webp") center 46%/cover no-repeat; content:""; opacity:.28; mix-blend-mode:multiply; } 
.consult_inner { position:relative; z-index:1; display:flex; width:calc(100% - 40px); padding-left: 50px; max-width: 1680px; align-items:center; justify-content: flex-start; gap: 100px; margin:0 auto; } 
.consult_title { display:flex; align-items:center; gap: 30px; flex:none; } 
.consult_title strong { font-family:"Shilla Culture", serif; font-size:40px; line-height:1.25; } 
.consult_text { font-size:18px; line-height:1.7; } 
.consult_pen { position:absolute; right: 0; top: -131px; width: 220px; height: 255px; pointer-events:none; z-index: -1; } 
.pen_body { position:absolute; z-index:2; width: 100%; height: auto; top:0; max-width:none; transform-origin:center; } 
.pen_shadow { position:absolute; right:0; bottom:0; width:95px; opacity:.55; } 
.main_certificate { position:relative; overflow:hidden; padding:80px 0; background:#fff; } 
.main_certificate::before, .main_certificate::after { position:absolute; z-index:2; top:0; bottom:0; width:120px; content:""; pointer-events:none; } 
.main_certificate::before { left:0; background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); } 
.main_certificate::after { right:0; background:linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); } 
.certificate_swiper { overflow:visible; } 
.certificate_track { display:flex; } 
.certificate_item { width:204px; height:280px; flex:none; overflow:hidden; box-shadow:0 3px 15px rgba(0, 0, 0, .08); } 
.certificate_item img { width:100%; height:100%; object-fit:cover; } 
@media (hover: hover) and (pointer:fine) { 
 .service_card:hover > img { transform:scale(1.04); } 
 .service_card .service_dim { transition:background .35s ease; } 
 .service_content > span { transition:max-height .35s ease, margin-top .35s ease, opacity .25s ease, transform .35s ease; } 
 .service_card:hover .service_content > span { max-height: 55px; margin-top:4px; opacity:1; transform:translateY(0); } 
 .service_inner > .service_card:first-of-type:hover .service_content > span { margin-top: 16px; } 
 .consult_title > i { position:relative; } 
 } 
@media (max-width:1024px) { 
 .main_service { padding:20px 20px 40px; } 
 .main_service::before, .main_service::after { width:420px; height:285px; } 
 .service_inner { width:100%; flex-direction:column; gap:10px; } 
 .service_column { display:contents; } 
 .service_card { width:100%; flex:none; } 
 .service_baby { height:320px; order:1; } 
 .service_rename { height:180px; order:2; } 
 .service_date { height:120px; order:3; } 
 .service_match { height:120px; order:4; } 
 .service_fortune { height:180px; order:5; } 
 .service_business { height:180px; order:6; } 
 .service_content, .service_baby .service_content { right:20px; bottom:20px; left:20px; flex-wrap:wrap; justify-content:flex-start; } 
 .service_content strong, .service_baby .service_content strong { font-size:30px; } 
 .service_content > i { position:static; margin-left:12px; } 
 .service_content > span { max-height:none; margin-top: 8px; opacity:1; transform:none; font-size: 15px; } 
 .service_baby > img { object-position:58% center; } 
 .service_date > img, .service_match > img { object-position:center 55%; } 
 .main_consult { padding:40px 20px 35px; } 
 .consult_inner { width:100%; align-items:center; flex-direction:column; gap: 15px; padding: 0; } 
 .consult_title { gap:12px; } 
 .consult_title strong { font-size:30px; } 
 .consult_text { padding-right:0; font-size:15px; line-height:1.7; text-align:center; } 
 .consult_pen { top: -135px; right: -25px; width: 108px; height: 130px; } 
 .pen_body { right: 0; width: 100%; height: auto; } 
 .pen_shadow { width:55px; } 
 .main_certificate { padding:40px 0; } 
 .main_certificate::before, .main_certificate::after { width: 40px; } 
 .certificate_item { width:146px; height:200px; } 
 }