/* Generated 390px mobile baseline; rebuild with build-mobile-rem.py. */
:root{--white: #FFFFFF; --gray: #F5F6F8; --blue-light: #EAF0FF; --black: #111318; --text-gray: #6B7280; --blue: #2F6BFF; --blue-dark: #1F52D6; --line: #E5E7EB; --navy: #0D1730; --container: 82.5rem;}
*{box-sizing: border-box; margin: 0; padding: 0;}
html{scroll-behavior: smooth;}
body{font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--black); background: var(--white); letter-spacing: -0.01em; line-height: 1.5; -webkit-font-smoothing: antialiased;}
a{color: inherit; text-decoration: none;}
img{display: block; max-width: 100%;}
ul{list-style: none;}
.wrap{max-width: var(--container); margin: 0 auto; padding: 0 1.25rem;}
.btn{display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 3.5rem; padding: 0 2rem; border-radius: 1.75rem; font-weight: 700; font-size: max(13px,1.0625rem); white-space: nowrap; transition: transform 0.15s, background 0.15s;}
.btn:hover{transform: translateY(-1px);}
.btn-blue{background: var(--blue); color: rgb(255, 255, 255);}
.btn-blue:hover{background: var(--blue-dark);}
.btn-white{background: rgb(255, 255, 255); color: var(--blue);}
.btn-ghost{border: 0.09375rem solid rgba(255, 255, 255, 0.6); color: rgb(255, 255, 255);}
.btn-sm{height: 3rem; padding: 0 1.5rem; font-size: max(13px,0.9375rem);}
.link{display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; font-size: max(13px,0.9375rem); color: var(--black);}
.link:hover{color: var(--blue);}
.sec{padding: 6.875rem 0;}
.sec-gray{background: var(--gray);}
.head{display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 3rem;}
.head .eb{font-size: max(13px,0.9375rem); font-weight: 700; color: var(--blue); margin-bottom: 0.75rem; letter-spacing: 0.02em;}
.head h2{font-size: 3.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2;}
.head p{font-size: max(13px,1.125rem); color: var(--text-gray); margin-top: 0.75rem;}
.card{background: rgb(255, 255, 255); border-radius: 1rem; box-shadow: rgba(18, 33, 77, 0.06) 0 0.375rem 1.125rem;}
.tag{display: inline-block; padding: 0.25rem 0.625rem; border-radius: 0.375rem; background: var(--blue-light); color: var(--blue); font-size: max(10px,0.75rem); font-weight: 700;}
.ico{width: 1.5rem; height: 1.5rem; stroke: currentcolor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.util{background: var(--gray); height: 2.25rem; font-size: max(10px,0.8125rem);}
.util .wrap{display: flex; justify-content: space-between; align-items: center; height: 100%;}
.util b{color: var(--blue); margin-right: 0.625rem;}
.util .l span{margin-right: 0.625rem;}
.util .l i{color: var(--text-gray); font-style: normal; margin-right: 0.625rem;}
.util .r a{margin-left: 1.125rem; color: var(--text-gray); font-weight: 500;}
.util .r a.tel{color: var(--black); font-weight: 700;}
.hd{position: sticky; top: 0; z-index: 100; background: rgb(255, 255, 255); border-bottom: 1px solid var(--line); height: 4.5rem;}
.hd .wrap{display: flex; justify-content: space-between; align-items: center; height: 100%;}
.logo{font-size: max(13px,1.25rem); font-weight: 700; letter-spacing: -0.02em;}
.logo span{color: var(--blue); margin-left: 0.375rem;}
.gnb{display: flex; align-self: stretch; gap: 1.75rem;}
.gnb-item{position: relative; display: flex; align-items: center;}
.gnb-link{position: relative; display: flex; align-items: center; gap: 0.4375rem; height: 100%; font-size: max(13px,0.9375rem); font-weight: 600; white-space: nowrap; transition: color 0.2s;}
.gnb-link::before{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.1875rem; border-radius: 0.1875rem 0.1875rem 0 0; background: var(--blue); opacity: 0; transform: scaleX(0.45); transition: opacity 0.2s, transform 0.2s;}
.submenu{position: absolute; left: 50%; top: calc(100% - 1px); z-index: 2; min-width: 14rem; padding: 0.75rem 0; border: 1px solid rgb(231, 235, 242); border-radius: 0 0 0.875rem 0.875rem; background: rgb(255, 255, 255); box-shadow: rgba(22, 38, 76, 0.14) 0 1rem 2.25rem; opacity: 0; visibility: hidden; transform: translate(-50%, 0.5625rem); transition: opacity 0.2s, visibility 0.2s, transform 0.2s;}
.submenu a{display: block; padding: 0.5625rem 1.125rem; color: rgb(79, 88, 104); font-size: max(13px,0.875rem); font-weight: 500; line-height: 1.45; white-space: nowrap; transition: color 0.16s, background 0.16s, padding-left 0.16s;}
.submenu a:hover, .submenu a:focus-visible{padding-left: 1.375rem; background: rgb(243, 246, 252); color: var(--blue); outline: none;}
.header-actions{display: flex; align-items: center; gap: 0.625rem;}
.menu-toggle{display: none; width: 2.625rem; height: 2.625rem; padding: 0; border: 0; border-radius: 50%; background: rgb(243, 245, 248); align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; cursor: pointer;}
.menu-toggle span{width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; background: rgb(27, 35, 51); transition: transform 0.22s, opacity 0.22s;}

.hd .cta{height: 2.75rem; padding: 0 1.375rem; border-radius: 1.375rem; background: var(--blue); color: rgb(255, 255, 255); font-weight: 700; font-size: max(13px,0.9375rem); display: inline-flex; align-items: center;}
body.menu-locked{overflow: hidden;}
.util{display: none;}
.hd{height: 4rem;}
.hd .wrap{gap: 0.875rem;}
.gnb{position: absolute; left: 0; right: 0; top: 100%; display: block; height: calc(-4rem + 100vh); padding: 0.5rem 1.25rem 2.125rem; overflow-y: auto; background: rgb(255, 255, 255); box-shadow: rgba(22, 38, 76, 0.13) 0 1.125rem 2.125rem; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.2s, visibility 0.2s, transform 0.2s;}
.hd.menu-open .gnb{opacity: 1; visibility: visible; transform: none;}
.gnb-item{display: block; border-bottom: 1px solid rgb(237, 240, 245);}
.gnb-link{justify-content: space-between; width: 100%; height: 3.625rem; font-size: max(13px,1.0625rem);}
.gnb-item.is-open > .gnb-link{color: var(--blue);}
.submenu{position: static; min-width: 0; max-height: 0; padding: 0; border: 0; border-radius: 0.625rem; background: rgb(246, 248, 252); box-shadow: none; opacity: 1; visibility: hidden; overflow: hidden; transform: none; transition: max-height 0.28s, padding 0.28s;}
.gnb-item.is-open > .submenu{max-height: 32.5rem; padding: 0.5rem 0; visibility: visible;}
.submenu a{padding: 0.5625rem 1rem; font-size: max(13px,0.875rem);}
.submenu a:hover, .submenu a:focus-visible{padding-left: 1.25rem;}
.menu-toggle{display: flex;}
.hd.menu-open .menu-toggle span:nth-child(1){transform: translateY(0.375rem) rotate(45deg);}
.hd.menu-open .menu-toggle span:nth-child(2){opacity: 0;}
.hd.menu-open .menu-toggle span:nth-child(3){transform: translateY(-0.375rem) rotate(-45deg);}
.logo{font-size: max(13px,1.0625rem);}
.hd .cta{height: 2.375rem; padding: 0 0.875rem; font-size: max(10px,0.8125rem);}
.menu-toggle{width: 2.5rem; height: 2.5rem;}
.hd .wrap{gap: 0.5rem;}
.gnb{padding-left: 1.25rem; padding-right: 1.25rem;}
.hero{position: relative; height: 45rem; overflow: hidden; color: rgb(255, 255, 255); background: linear-gradient(112deg, rgb(31, 82, 214) 0%, rgb(47, 107, 255) 100%);}
.hero .ring{position: absolute; border: 0.09375rem solid rgba(255, 255, 255, 0.16); border-radius: 50%;}
.hero .ring.a{width: 45rem; height: 45rem; right: -2.5rem; top: 2.5rem;}
.hero .ring.b{width: 32.5rem; height: 32.5rem; right: 3.75rem; top: 8.75rem; border-color: rgba(255, 255, 255, 0.11);}
.hero .glow{position: absolute; width: 56.25rem; height: 56.25rem; right: -7.5rem; top: -7.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); filter: blur(7.5rem);}
.hero .dash{position: absolute; left: 56%; bottom: 6.875rem; width: 35rem; border-top: 1px dashed rgba(255, 255, 255, 0.28); transform: rotate(-18deg); transform-origin: left center;}
.hero .wrap{position: relative; height: 100%; display: flex; align-items: center;}
.hero .copy{max-width: 47.5rem; padding-bottom: 1.5rem;}
.hero .chip{display: inline-block; padding: 0.375rem 0.75rem; border-radius: 62.4375rem; background: rgba(255, 255, 255, 0.16); font-size: max(10px,0.8125rem); font-weight: 700; margin-bottom: 1.5rem;}
.hero h1{font-size: 7rem; line-height: 1; letter-spacing: -0.03em; font-weight: 700;}
.hero h1 small{display: block; font-size: 2.75rem; font-weight: 500; opacity: 0.9; letter-spacing: -0.01em; margin-top: 0.25rem;}
.hero ol{margin: 1.75rem 0 2.25rem; display: flex; flex-direction: column; gap: 0.625rem;}
.hero ol li{display: flex; align-items: center; gap: 0.875rem;}
.hero ol .n{width: 2.125rem; height: 2.125rem; border-radius: 50%; background: rgb(255, 255, 255); color: var(--blue); font-weight: 700; font-size: max(10px,0.8125rem); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.hero ol b{font-size: max(13px,1.25rem); font-weight: 700;}
.hero ol span{font-size: max(13px,0.9375rem); opacity: 0.8; margin-left: 0.625rem;}
.hero .btns{display: flex; gap: 0.875rem;}
.hero .person{position: absolute; right: 3.75rem; bottom: 0; height: 39.0625rem; width: 31.25rem; object-fit: contain; object-position: center bottom;}
.hero .nav{position: absolute; left: 1.25rem; bottom: 4.5rem; z-index: 2; display: flex; align-items: center; gap: 1rem; height: 2.75rem; font-size: max(10px,0.75rem); font-weight: 600; color: rgb(255, 255, 255);}
.hero .nav .count{display: flex; align-items: baseline; gap: 0.25rem; min-width: 2.875rem; font-variant-numeric: tabular-nums;}
.hero .nav .current{font-size: max(13px,0.9375rem); font-weight: 700;}
.hero .nav .total{opacity: 0.6;}
.hero .nav .title{flex: 0 0 11.25rem; width: 11.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.02em;}
.hero .nav .progress{position: relative; width: 11.25rem; height: 0.125rem; background: rgba(255, 255, 255, 0.28); overflow: hidden;}
.hero .nav .progress i{position: absolute; left: 0; top: 0; width: 8.333%; height: 100%; background: rgb(255, 255, 255);}
.hero .nav .controls{display: flex; gap: 0.375rem;}
.hero .nav button{display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-size: max(13px,1.1875rem); cursor: pointer;}
.hero .nav button:hover{background: rgb(255, 255, 255); color: var(--blue);}
.quick{position: relative; z-index: 2; margin-top: -2.75rem; margin-bottom: 0; height: 2.75rem;}
.quick .box{display: flex; background: rgb(255, 255, 255); border-radius: 1.25rem; padding: 1.625rem 0.75rem; box-shadow: rgba(18, 33, 77, 0.12) 0 0.75rem 2rem, rgba(18, 33, 77, 0.04) 0 0.125rem 0.25rem;}
.quick a{flex: 1 1 0%; display: flex; align-items: center; gap: 0.875rem; padding: 0 1.125rem 0 1.375rem; border-left: 1px solid var(--line);}
.quick a:first-child{border-left: 0;}
.quick .ic{width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--blue); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;}
.quick .ic .ico{width: 1.625rem; height: 1.625rem;}
.quick b{font-size: max(13px,1.0625rem); font-weight: 700; display: block;}
.quick small{display: block; font-size: max(10px,0.8125rem); color: var(--text-gray);}
.quick .arr{margin-left: auto; color: var(--text-gray); font-size: max(13px,1.25rem);}
.pass .head{margin-bottom: 2.75rem;}
.pass .tools{display: flex; align-items: center; gap: 0.5rem;}
.pass .tools .all-link{display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; margin: 0; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: 1.375rem; background: rgb(255, 255, 255); font-size: max(13px,0.875rem); font-weight: 700; white-space: nowrap;}
.pass .tools .all-link:hover{border-color: var(--blue); color: var(--blue);}
.arrows{display: flex; gap: 0.5rem;}
.arrows button{width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: rgb(255, 255, 255); font-size: max(13px,1.25rem); cursor: pointer; color: var(--black);}
.arrows button:hover{border-color: var(--blue); color: var(--blue);}
.pass .grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;}
.pass .card{padding: 1.75rem 1.75rem 1.625rem; display: flex; flex-direction: column; min-height: 18.75rem;}
.pass .av{width: 4rem; height: 4rem; border-radius: 50%; background: var(--blue-light); overflow: hidden; margin-bottom: 0.75rem;}
.pass .av img{width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.pass .meta{display: flex; align-items: center; gap: 0.5rem; font-size: max(10px,0.75rem); color: var(--text-gray); margin-bottom: 0.75rem;}
.pass h3{font-size: max(13px,1.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; margin-bottom: 0.5rem;}
.pass p{font-size: max(13px,0.875rem); color: var(--text-gray); line-height: 1.55;}
.pass .link{margin-top: auto; padding-top: 0.875rem; font-size: max(13px,0.875rem);}
.prog{background: linear-gradient(rgb(255, 255, 255) 0%, rgb(247, 249, 255) 100%);}
.prog .head{margin-bottom: 2.625rem;}
.prog .program-feature{display: grid; grid-template-columns: minmax(0, 60%) minmax(22.5rem, 40%); min-height: 33.75rem; border: 1px solid rgb(228, 234, 251); border-radius: 1.625rem; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(25, 52, 110, 0.09) 0 1.125rem 2.75rem;}
.prog .program-visual{order: 2; position: relative; min-height: 33.75rem; overflow: hidden; background: rgb(223, 231, 244);}
.prog .program-visual::after{content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18, 39, 82, 0.02) 35%, rgba(18, 39, 82, 0.28) 100%); pointer-events: none;}
.prog .program-visual img{width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.58) contrast(0.91) brightness(0.96); transition: transform 0.5s, filter 0.35s;}
.prog .program-feature:hover .program-visual img{transform: scale(1.018); filter: saturate(0.68) contrast(0.94) brightness(0.98);}
.prog .program-copy{order: 1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 2.75rem 2.875rem 2.625rem; background: rgb(255, 255, 255);}
.prog .program-copy::before{content: ""; position: absolute; right: 0; top: 0; width: 0.3125rem; height: 100%; background: linear-gradient(180deg,var(--blue),#83a7ff);}
.prog .program-copy .sub{font-size: max(10px,0.75rem); font-weight: 800; color: var(--blue); letter-spacing: 0.09em; margin-bottom: 0.625rem;}
.prog .program-copy h3{font-size: 2.375rem; line-height: 1.2; letter-spacing: -0.035em; margin-bottom: 0.75rem;}
.prog .program-copy > p{font-size: max(13px,1rem); line-height: 1.7; color: var(--text-gray); margin-bottom: 1.5625rem;}
.prog .process{position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.625rem;}
.prog .process::before{content: ""; position: absolute; left: 10%; right: 10%; top: 1.125rem; height: 0.125rem; background: rgb(223, 231, 247);}
.prog .process .step{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; text-align: center; color: rgb(82, 98, 125);}
.prog .process .step i{display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 0.3125rem solid rgb(255, 255, 255); border-radius: 50%; background: rgb(234, 240, 255); color: var(--blue); box-shadow: rgb(217, 227, 248) 0 0 0 1px; font-style: normal; font-size: max(10px,0.6875rem); font-weight: 800;}
.prog .process .step:last-child i{background: var(--blue); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px var(--blue);}
.prog .process .step b{font-size: max(10px,0.75rem); white-space: nowrap;}
.prog .course-list{display: flex; flex-direction: column; gap: 0.5625rem;}
.prog .course-item{--course: var(--blue); --tint: #eef3ff; display: grid; grid-template-columns: 6.25rem 1fr 1.375rem; align-items: center; gap: 0.875rem; padding: 0.8125rem 0.9375rem; border: 1px solid rgb(229, 234, 244); border-radius: 0.875rem; background: rgb(255, 255, 255); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;}
.prog .course-item.short{--course: #089a9a; --tint: #eaf8f7;}
.prog .course-item.private{--course: #7759d6; --tint: #f1edff;}
.prog .course-item:hover{border-color: var(--course); transform: translateX(0.25rem); box-shadow: rgba(25, 52, 110, 0.07) 0 0.4375rem 1.125rem;}
.prog .course-item .course-tag{display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; border-radius: 0.5rem; background: var(--tint); color: var(--course); font-size: max(10px,0.6875rem); font-weight: 800; letter-spacing: 0.03em;}
.prog .course-item div{display: flex; align-items: baseline; gap: 0.75rem; min-width: 0;}
.prog .course-item strong{font-size: max(13px,0.9375rem); white-space: nowrap;}
.prog .course-item small{font-size: max(10px,0.8125rem); line-height: 1.45; color: var(--text-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.prog .course-item > b{font-size: max(13px,1.25rem); color: var(--course); text-align: right;}
.prog .program-actions{display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem;}
.prog .program-actions .btn{height: 2.875rem; padding: 0 1.3125rem; font-size: max(13px,0.875rem);}
.prog .program-actions .link{font-size: max(13px,0.875rem);}
.prog .sub-programs{display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; margin-top: 1.5rem;}
.prog .sub-card{position: relative; display: flex; align-items: center; min-height: 9.375rem; padding: 1.75rem 1.875rem 1.75rem 2.125rem; border: 1px solid rgb(216, 228, 251); border-radius: 1.25rem; background: linear-gradient(110deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 58%, rgb(237, 244, 255) 100%); box-shadow: rgba(25, 52, 110, 0.08) 0 0.5625rem 1.5rem; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;}
.prog .sub-card.secretary{border-color: rgb(225, 218, 248); background: linear-gradient(110deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 58%, rgb(242, 239, 253) 100%);}
.prog .sub-card:hover{transform: translateY(-0.25rem); border-color: rgb(175, 199, 247); box-shadow: rgba(18, 33, 77, 0.12) 0 0.9375rem 1.875rem;}
.prog .sub-card .sub{font-size: max(10px,0.75rem); font-weight: 800; color: var(--blue); letter-spacing: 0.06em; margin-bottom: 0.375rem;}
.prog .sub-card.secretary .sub{color: rgb(119, 89, 214);}
.prog .sub-card h3{font-size: 1.5rem; letter-spacing: -0.025em; margin-bottom: 0.375rem;}
.prog .sub-card p{font-size: max(13px,0.875rem); color: var(--text-gray);}
.prog .sub-card .arr{margin-left: auto; position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); color: var(--blue); font-size: max(13px,1.25rem); box-shadow: rgba(25, 52, 110, 0.08) 0 0.375rem 0.875rem;}
.prog .sub-card.secretary .arr{color: rgb(119, 89, 214);}
.prog .sub-card > div{position: relative; z-index: 1;}
.prog .sub-card .sub-icon{position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; margin-left: auto; border-radius: 50%; color: var(--blue); opacity: 0.3; transition: opacity 0.3s;}
.prog .sub-card:hover .sub-icon{opacity: 0.5;}
.prog .sub-card.secretary .sub-icon{color: rgb(119, 89, 214);}
.prog .sub-card .sub-icon .ico{width: 100%; height: 100%;}
.prog .sub-card .sub-icon + .arr{margin-left: 0.75rem;}
.prog .sub-card::after{content: ""; position: absolute; right: 3.375rem; width: 7.75rem; height: 7.75rem; border: 1px solid rgba(47, 107, 255, 0.1); border-radius: 50%;}
.prog .program-feature{grid-template-columns: 58% 42%;}
.prog .program-copy{padding: 2.375rem 2rem;}
.prog .course-item div{display: block;}
.prog .course-item small{display: block; margin-top: 0.125rem;}
.prog .program-feature{grid-template-columns: 1fr;}
.prog .program-visual{order: 1; min-height: 22.5rem;}
.prog .program-copy{order: 2; padding: 2.375rem 1.875rem;}
.prog .sub-programs{grid-template-columns: 1fr;}
.prog .program-visual{min-height: 18.125rem;}
.prog .program-copy{padding: 1.875rem 1.375rem 1.875rem 1.625rem;}
.prog .program-copy h3{font-size: 1.875rem;}
.prog .course-item{grid-template-columns: 5.125rem 1fr 1.125rem; gap: 0.625rem;}
.prog .course-item small{white-space: normal;}
.prog .program-actions{align-items: flex-start; flex-direction: column; gap: 0.8125rem;}
.prog .process .step b{font-size: max(10px,0.6875rem);}
.special{position: relative; min-height: 40.625rem; padding: 4.875rem 0; display: flex; align-items: center; color: rgb(255, 255, 255); overflow: hidden; background: rgb(7, 26, 67);}
.special .bg{position: absolute; inset: 0; background: url("/cimg/gbabc/renew/special-cabin-classroom-bg-v1.webp") center center / cover no-repeat; transform: scale(1.01);}
.special .bg::before{content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 59% 40%, rgba(54, 153, 255, 0.2), transparent 32%), linear-gradient(rgba(29, 86, 202, 0.04), rgba(3, 15, 45, 0.17));}
.special .bg::after{content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 20, 55, 0.76) 0%, rgba(7, 30, 74, 0.5) 45%, rgba(5, 22, 57, 0.42) 100%);}
.special .wrap{position: relative; display: grid; grid-template-columns: minmax(24.375rem, 0.86fr) minmax(33.75rem, 1.14fr); gap: 4.5rem; align-items: center; width: 100%;}
.special .l{max-width: 35rem;}
.special .l, .special .r, .special .box{min-width: 0;}
.special .eb{font-size: max(10px,0.8125rem); font-weight: 800; letter-spacing: 0.08em; color: rgb(159, 220, 255); margin-bottom: 0.9375rem;}
.special h2{font-size: 3.125rem; line-height: 1.2; letter-spacing: -0.035em; font-weight: 750;}
.special .lead{margin-top: 1.25rem; font-size: max(13px,1.0625rem); line-height: 1.72; color: rgba(255, 255, 255, 0.8);}
.special .r{display: flex; flex-direction: column; gap: 0.875rem;}
.special .box{--accent: #79ddff; overflow: hidden; position: relative; display: block; min-height: 11.625rem; padding: 1.6875rem 1.875rem 1.5rem 2.125rem; border: 1px solid rgba(190, 226, 255, 0.3); border-radius: 1.125rem 0 0 1.125rem; background: linear-gradient(120deg, rgba(22, 61, 119, 0.64), rgba(255, 255, 255, 0.1)); box-shadow: rgba(0, 13, 45, 0.18) 0 0.875rem 2.125rem; backdrop-filter: blur(0.6875rem); transition: transform 0.25s, border-color 0.25s, background 0.25s;}
.special .box.lecture{--accent: #ffd58b;}
.special .box::before{content: ""; position: absolute; right: 0; top: 0; bottom: 1.75rem; width: 0.1875rem; height: 100%; background: var(--accent);}
.special .box:hover{transform: translateY(-0.1875rem); border-color: rgba(255, 255, 255, 0.48); background: linear-gradient(120deg, rgba(30, 73, 136, 0.73), rgba(255, 255, 255, 0.14));}
.special .box .eb{font-size: max(10px,0.6875rem); margin-bottom: 0.3125rem; color: var(--accent);}
.special .box h3{font-size: 1.5625rem; font-weight: 750; letter-spacing: -0.025em; line-height: 1.3;}
.special .box p{max-width: 38.125rem; margin-top: 0.5625rem; font-size: max(13px,0.9375rem); line-height: 1.62; color: rgba(255, 255, 255, 0.78);}
.special .box .link{margin-top: 1.0625rem; color: rgb(255, 255, 255); font-size: max(13px,0.875rem); font-weight: 700;}
.special .box .link span{display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; margin-left: 0.1875rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); transition: transform 0.2s, background 0.2s;}
.special .box:hover .link span{transform: translateX(0.1875rem); background: var(--accent); color: rgb(10, 37, 84);}
.special{padding: 4.625rem 0;}
.special .wrap{grid-template-columns: minmax(0, 1fr); gap: 2.375rem;}
.special .l{max-width: 47.5rem;}
.special .r{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
.special .box{min-height: 13.625rem;}
.special{width: 100vw; max-width: 100vw; padding: 4rem 0; min-height: 0;}
.special .bg{background-position: 60% center;}
.special .bg::after{background: linear-gradient(rgba(5, 22, 59, 0.72), rgba(5, 24, 62, 0.56));}
.special .wrap{gap: 1.875rem;}
.special h2{font-size: 2.125rem;}
.special .lead{font-size: max(13px,0.9375rem);}
.special .r{grid-template-columns: minmax(0, 1fr);}
.special .box{width: 100%; max-width: 100%; min-height: 0; padding: 1.5625rem 1.375rem 1.4375rem 1.6875rem;}
.special .box h3{font-size: 1.375rem;}
.special .box p{font-size: max(13px,0.875rem);}
.teach .grid{display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem;}
.teach .card{position: relative; display: block; overflow: hidden; border: 1px solid transparent; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;}
.teach .ph{height: 18.75rem; background: var(--blue-light);}
.teach .ph img{width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.45s, filter 0.3s;}
.teach .tx{padding: 1.125rem 1.25rem 1.375rem;}
.teach .nm{font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; transition: color 0.3s;}
.teach .nm small{font-size: max(10px,0.8125rem); color: var(--blue); font-weight: 500; margin-left: 0.375rem;}
.teach .cr{margin: 0.25rem 0; overflow: hidden; color: var(--text-gray); font-size: max(10px,0.8125rem); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap;}
.teach .fd{font-size: max(10px,0.8125rem); font-weight: 500;}
.teach .card:hover{transform: translateY(-0.375rem); border-color: rgb(219, 228, 251); box-shadow: rgba(18, 33, 77, 0.12) 0 1rem 2.125rem;}
.teach .card:hover .ph img{transform: scale(1.035); filter: saturate(1.04) brightness(1.02);}
.teach .card:hover .nm{color: var(--blue);}
.teach .card:focus-visible{outline: rgba(47, 107, 255, 0.3) solid 0.1875rem; outline-offset: 0.1875rem;}
.image-check{position: relative; overflow: hidden; background: linear-gradient(105deg, rgb(225, 230, 238) 0%, rgb(232, 237, 245) 56%, rgb(238, 243, 250) 100%); color: var(--black);}
.image-check::before{content: ""; position: absolute; right: 1%; top: -15.3125rem; width: 31.875rem; height: 31.875rem; border-radius: 50%; background: rgba(255, 255, 255, 0.46);}
.image-check::after{content: ""; position: absolute; right: 11%; bottom: -16.25rem; width: 26.875rem; height: 26.875rem; border-radius: 50%; background: rgba(47, 107, 255, 0.09); filter: blur(0.375rem);}
.image-check .wrap{position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2.125rem; min-height: 13rem;}
.image-check .copy{min-width: 0;}
.image-check .eyebrow{margin-bottom: 0.5625rem; color: var(--blue); font-size: max(10px,0.75rem); font-weight: 800; letter-spacing: 0.13em;}
.image-check h2{font-size: 2.25rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.035em; word-break: keep-all;}
.image-check h2 strong{color: var(--blue); font-weight: 750;}
.image-check p{margin-top: 0.5625rem; color: var(--text-gray); font-size: max(13px,0.9375rem); word-break: keep-all;}
.image-check .art{position: relative; display: flex; align-items: center; justify-content: center; width: 13.125rem; height: 13rem; flex: 0 0 auto;}
.image-check .art img{width: auto; height: 12.75rem; max-width: none; object-fit: contain; transform: scaleX(-1); filter: drop-shadow(rgba(37, 65, 117, 0.16) 0 1rem 1.25rem); transition: transform 0.38s, filter 0.38s;}
.image-check:hover .art img{transform: translateY(-0.1875rem) scaleX(-1) scale(1.025); filter: drop-shadow(rgba(37, 65, 117, 0.2) 0 1.1875rem 1.5rem);}
.image-check .cta{display: inline-flex; align-items: center; justify-content: center; gap: 0.9375rem; min-width: 11.875rem; height: 3.5rem; padding: 0 1.5rem; border-radius: 1.75rem; background: var(--blue); color: rgb(255, 255, 255); font-size: max(13px,0.9375rem); font-weight: 750; white-space: nowrap; box-shadow: rgba(47, 107, 255, 0.2) 0 0.5625rem 1.375rem; transition: transform 0.2s, box-shadow 0.2s, background 0.2s;}
.image-check .cta span{display: inline-flex; align-items: center; justify-content: center; width: 1.5625rem; height: 1.5625rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); font-size: max(13px,1.0625rem); transition: transform 0.2s, background 0.2s;}
.image-check .cta:hover{transform: translateY(-0.125rem); background: var(--blue-dark); box-shadow: rgba(47, 107, 255, 0.25) 0 0.75rem 1.625rem;}
.image-check .cta:hover span{transform: translateX(0.1875rem); background: rgba(255, 255, 255, 0.24);}
.image-check .cta:focus-visible{outline: rgba(47, 107, 255, 0.28) solid 0.1875rem; outline-offset: 0.25rem;}
.image-check .wrap{grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem; min-height: 11.875rem;}
.image-check .art{display: none;}
.image-check h2{font-size: 1.875rem;}
.image-check .wrap{display: flex; min-height: 0; padding-top: 2.625rem; padding-bottom: 2.625rem; flex-direction: column; align-items: flex-start; gap: 1.5625rem;}
.image-check::before{right: -11.25rem; top: -11.875rem;}
.image-check::after{right: -8.75rem; bottom: -16.25rem;}
.image-check h2{max-width: 20.625rem; font-size: 1.6875rem;}
.image-check p{max-width: 20.625rem; font-size: max(13px,0.875rem); line-height: 1.65;}
.image-check .cta{align-self: stretch; width: auto; height: 3.375rem;}
.yt .row{display: flex; gap: 1.25rem;}
.yt .big{position: relative; flex: 0 0 43.75rem; height: 24.625rem; border-radius: 1.25rem; overflow: hidden; background: var(--line);}
.yt .big img{width: 100%; height: 100%; object-fit: cover;}
.yt .play{position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 1.375rem;}
.yt .cap{position: absolute; left: 1.25rem; bottom: 1.25rem; padding: 0.5rem 0.875rem; border-radius: 0.625rem; background: rgba(0, 0, 0, 0.55); color: rgb(255, 255, 255); font-size: max(13px,0.9375rem); font-weight: 500;}
.yt .list{flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;}
.yt .list a{display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.5rem; border: 1px solid transparent; border-radius: 0.875rem; transition: background 0.2s, border-color 0.2s, transform 0.2s;}
.yt .list a:hover{background: rgb(247, 249, 253); border-color: rgb(231, 236, 246); transform: translateX(0.1875rem);}
.yt .th{width: 11.5rem; aspect-ratio: 16 / 9; border-radius: 0.6875rem; overflow: hidden; background: var(--line);}
.yt .th img{width: 100%; height: 100%; object-fit: cover;}
.yt .info{display: block; min-width: 0;}
.yt .info small{display: block; margin-bottom: 0.375rem; color: var(--blue); font-size: max(10px,0.6875rem); font-weight: 800; letter-spacing: 0.06em;}
.yt .list b{font-size: max(13px,1rem); font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.yt .row{flex-direction: column; gap: 1.5rem;}
.yt .big{flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9;}
.yt .list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem;}
.yt .list a{display: block; padding: 0; border-color: var(--line); overflow: hidden;}
.yt .list a:hover{transform: translateY(-0.1875rem);}
.yt .th{display: block; width: 100%; border-radius: 0;}
.yt .info{padding: 0.875rem 0.9375rem 1rem;}
.yt{padding: 4.875rem 0;}
.yt .head{margin-bottom: 2rem;}
.yt .big{border-radius: 1rem;}
.yt .play{width: 3.625rem; height: 3.625rem; margin: -1.8125rem 0 0 -1.8125rem;}
.yt .cap{left: 0.875rem; right: 0.875rem; bottom: 0.875rem; padding: 0.4375rem 0.6875rem; font-size: max(10px,0.8125rem);}
.yt .list{display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; border-top: 1px solid var(--line);}
.yt .list a{display: grid; grid-template-columns: 7.625rem minmax(0, 1fr); gap: 0.8125rem; align-items: center; padding: 0.8125rem 0; border-top: 0; border-right: 0; border-left: 0; border-image: initial; border-bottom: 1px solid var(--line); border-radius: 0;}
.yt .list a:hover{background: transparent; transform: none;}
.yt .th{width: 7.625rem; border-radius: 0.625rem;}
.yt .info{padding: 0;}
.yt .info small{margin-bottom: 0.25rem; font-size: 0.625rem;}
.yt .list b{font-size: max(13px,0.875rem); line-height: 1.4;}
.rev .head{margin-bottom: 2.5rem;}
.rev .head .link{justify-content: center; height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: 1.375rem; background: rgb(255, 255, 255); font-size: max(13px,0.875rem); font-weight: 700; white-space: nowrap; transition: border-color 0.2s, color 0.2s, transform 0.2s;}
.rev .head .link:hover{border-color: var(--blue); color: var(--blue); transform: translateY(-1px);}
.rev .grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;}
.rev .review-card{position: relative; display: flex; flex-direction: column; min-height: 19.375rem; padding: 1.875rem 1.875rem 1.625rem; border: 1px solid rgb(232, 236, 243); overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;}
.rev .review-card::before{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0.1875rem; background: linear-gradient(90deg,var(--blue),#8eb0ff); opacity: 0; transition: opacity 0.25s;}
.rev .review-card:hover{transform: translateY(-0.3125rem); border-color: rgb(207, 219, 251); box-shadow: rgba(18, 33, 77, 0.1) 0 0.9375rem 2rem;}
.rev .review-card:hover::before{opacity: 1;}
.rev .review-meta{display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; margin-bottom: 1.375rem;}
.rev .stars{color: rgb(243, 167, 18); font-size: max(13px,0.875rem); line-height: 1; letter-spacing: 0.125rem; white-space: nowrap;}
.rev .source{display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.625rem; border-radius: 62.4375rem; background: rgb(238, 243, 255); color: var(--blue); font-size: max(10px,0.75rem); font-weight: 700; white-space: nowrap;}
.rev .q{height: 1.5rem; color: var(--blue); font-family: Georgia, serif; font-size: 2.25rem; font-weight: 700; line-height: 1;}
.rev .review-card p{display: -webkit-box; min-height: 7.125rem; margin: 0.625rem 0 1.375rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: max(13px,1.0625rem); font-weight: 500; line-height: 1.68; word-break: keep-all;}
.rev .review-foot{display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1.0625rem; border-top: 1px solid rgb(237, 240, 245); color: var(--text-gray); font-size: max(10px,0.8125rem);}
.rev .review-foot b{color: var(--black); font-size: max(10px,0.8125rem); font-weight: 700; white-space: nowrap;}
.rev .review-foot i{margin-left: 0.1875rem; color: var(--blue); font-style: normal; transition: transform 0.2s;}
.rev .review-card:hover .review-foot i{display: inline-block; transform: translateX(0.1875rem);}
.rev .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.rev .review-card:last-child{grid-column: 1 / -1; width: calc(50% - 0.625rem); justify-self: center;}
.rev{padding: 4.875rem 0;}
.rev .head{align-items: flex-start; flex-direction: column; gap: 1.25rem; margin-bottom: 1.875rem;}
.rev .head h2{font-size: 2.125rem; white-space: nowrap;}
.rev .head p{font-size: max(13px,0.9375rem); line-height: 1.6;}
.rev .grid{grid-template-columns: minmax(0, 1fr); gap: 0.875rem;}
.rev .review-card, .rev .review-card:last-child{grid-column: auto; width: 100%; min-height: 17.375rem; padding: 1.5625rem 1.4375rem 1.375rem;}
.rev .review-meta{margin-bottom: 1.125rem;}
.rev .review-card p{min-height: auto; margin-bottom: 1.25rem; font-size: max(13px,1rem); line-height: 1.65; -webkit-line-clamp: 4;}
.ig .head{margin-bottom: 2.5rem;}
.ig .follow{justify-content: center; height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: 1.375rem; background: rgb(255, 255, 255); font-size: max(13px,0.875rem); font-weight: 700; white-space: nowrap; transition: border-color 0.2s, color 0.2s, transform 0.2s;}
.ig .follow .ico{width: 1.0625rem; height: 1.0625rem;}
.ig .follow i{font-style: normal;}
.ig .follow:hover{border-color: var(--blue); color: var(--blue); transform: translateY(-1px);}
.ig .grid{display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem;}
.ig .ig-card{position: relative; aspect-ratio: 1 / 1; border-radius: 0.875rem; overflow: hidden; background: var(--gray); box-shadow: rgba(18, 33, 77, 0.05) 0 0.3125rem 1rem;}
.ig .ig-card img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s, filter 0.35s;}
.ig .ig-card::after{content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(7, 17, 39, 0.72)); opacity: 0; transition: opacity 0.3s;}
.ig .ig-caption{position: absolute; left: 1rem; right: 1rem; bottom: 0.875rem; z-index: 1; display: flex; align-items: center; gap: 0.5rem; color: rgb(255, 255, 255); font-size: max(10px,0.8125rem); font-weight: 700; opacity: 0; transform: translateY(0.625rem); transition: opacity 0.3s, transform 0.3s;}
.ig .ig-caption .ico{width: 1.125rem; height: 1.125rem; flex: 0 0 auto;}
.ig .ig-card:hover img{transform: scale(1.045); filter: saturate(1.04);}
.ig .ig-card:hover::after, .ig .ig-card:hover .ig-caption{opacity: 1;}
.ig .ig-card:hover .ig-caption{transform: translateY(0);}
.ig .ig-card:focus-visible{outline: rgba(47, 107, 255, 0.3) solid 0.1875rem; outline-offset: 0.1875rem;}
.ig .grid{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem;}
.ig{padding: 4.875rem 0;}
.ig .head{align-items: flex-start; flex-direction: column; gap: 1.25rem; margin-bottom: 1.875rem;}
.ig .head h2{font-size: 2.625rem;}
.ig .head p{font-size: max(13px,0.9375rem); line-height: 1.6;}
.ig .grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;}
.ig .ig-card{border-radius: 0.75rem;}
.ig .ig-card::after{opacity: 1; background: linear-gradient(transparent 55%, rgba(7, 17, 39, 0.68));}
.ig .ig-caption{left: 0.75rem; right: 0.75rem; bottom: 0.6875rem; font-size: max(10px,0.75rem); opacity: 1; transform: none;}
.poss{position: relative; padding: 5.625rem 0; overflow: hidden; background: linear-gradient(125deg, rgb(13, 33, 78) 0%, rgb(23, 78, 169) 54%, rgb(47, 107, 255) 100%);}
.poss::before, .poss::after{content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 50%; pointer-events: none;}
.poss::before{right: 36%; bottom: -20.625rem; width: 45rem; height: 45rem;}
.poss::after{left: -11.25rem; top: -20rem; width: 38.75rem; height: 38.75rem;}
.poss .wrap{position: relative; z-index: 1;}
.poss-panel{position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(30rem, 1.08fr); gap: 4.375rem; align-items: center; min-height: 31.25rem;}
.poss-copy, .poss-card{position: relative; z-index: 1;}
.poss .eb{margin-bottom: 0.875rem; color: rgb(143, 179, 255); font-size: max(10px,0.8125rem); font-weight: 800; letter-spacing: 0.1em;}
.poss h2{color: rgb(255, 255, 255); font-size: 3rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.04em;}
.poss-copy > p{max-width: 29.375rem; margin-top: 1.25rem; color: rgba(255, 255, 255, 0.76); font-size: max(13px,1.0625rem); line-height: 1.7; word-break: keep-all;}
.poss-start{display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; height: 3.375rem; margin-top: 1.875rem; padding: 0 1.5rem; border: 0; border-radius: 1.6875rem; background: rgb(255, 255, 255); color: rgb(21, 60, 134); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: max(13px,0.9375rem); font-weight: 800; cursor: pointer; box-shadow: rgba(2, 16, 49, 0.16) 0 0.625rem 1.5625rem; transition: transform 0.2s, box-shadow 0.2s;}
.poss-start:hover{transform: translateY(-0.125rem); box-shadow: rgba(2, 16, 49, 0.24) 0 0.875rem 1.875rem;}
.poss-start span{font-size: max(13px,1.125rem);}
.poss-disclaimer{display: flex; align-items: flex-start; gap: 0.5rem; max-width: 28.75rem; margin-top: 1.125rem; color: rgba(255, 255, 255, 0.62); font-size: max(10px,0.75rem); line-height: 1.55;}
.poss-disclaimer i{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; font-style: normal; font-weight: 700;}
.poss-card{min-height: 27.875rem; padding: 1.875rem 2rem 1.75rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 1.625rem; background: rgb(255, 255, 255); color: var(--black); box-shadow: rgba(2, 16, 49, 0.24) 0 1.25rem 2.875rem;}
.poss-card:focus{outline: none;}
.poss-card-head{margin-bottom: 1.75rem;}
.poss-card-head > div:first-child{display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 0.8125rem;}
.poss-card-head small{color: var(--blue); font-size: max(10px,0.6875rem); font-weight: 800; letter-spacing: 0.1em;}
.poss-step-label{color: rgb(60, 75, 102); font-size: max(10px,0.8125rem); font-variant-numeric: tabular-nums;}
.poss-progress{height: 0.25rem; border-radius: 0.125rem; overflow: hidden; background: rgb(233, 238, 248);}
.poss-progress i{display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#80a6ff); transition: width 0.3s;}
.poss-step{display: none; border: 0;}
.poss-step.is-active{display: block; animation: 0.3s ease 0s 1 normal none running possFade;}
@keyframes possFade { 
  0% { opacity: 0; transform: translateX(0.625rem); }
  100% { opacity: 1; transform: translateX(0); }
}
.poss-step legend{width: 100%; font-size: 1.5625rem; font-weight: 750; line-height: 1.35; letter-spacing: -0.035em; word-break: keep-all;}
.poss-step > .desc{margin-top: 0.4375rem; color: var(--text-gray); font-size: max(13px,0.875rem);}
.poss-options{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-top: 1.5rem;}
.poss-option{position: relative; display: block; cursor: pointer;}
.poss-option input{position: absolute; width: 1px; height: 1px; opacity: 0;}
.poss-option span{display: flex; align-items: center; min-height: 3.25rem; padding: 0 0.9375rem; border: 1px solid rgb(223, 229, 239); border-radius: 0.8125rem; background: rgb(255, 255, 255); color: rgb(52, 64, 86); font-size: max(13px,0.875rem); font-weight: 650; transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;}
.poss-option span::before{content: ""; flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; margin-right: 0.625rem; border: 0.09375rem solid rgb(185, 195, 212); border-radius: 50%; box-shadow: rgb(255, 255, 255) 0 0 0 0.25rem inset; transition: background 0.2s, border-color 0.2s;}
.poss-option:hover span{border-color: rgb(169, 189, 236); background: rgb(248, 250, 255);}
.poss-option input:checked + span{border-color: var(--blue); background: rgb(238, 243, 255); color: rgb(31, 82, 214); box-shadow: rgba(47, 107, 255, 0.1) 0 0.3125rem 0.875rem;}
.poss-option input:checked + span::before{border-color: var(--blue); background: var(--blue);}
.poss-option input:focus-visible + span{outline: rgba(47, 107, 255, 0.22) solid 0.1875rem; outline-offset: 0.125rem;}
.poss-actions{display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.75rem;}
.poss-next, .poss-prev, .poss-submit, .poss-reset{height: 2.75rem; padding: 0 1.125rem; border-radius: 1.375rem; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: max(13px,0.875rem); font-weight: 750; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;}
.poss-next, .poss-submit{margin-left: auto; border: 1px solid var(--blue); background: var(--blue); color: rgb(255, 255, 255);}
.poss-next:hover, .poss-submit:hover{background: var(--blue-dark); transform: translateY(-1px);}
.poss-next:disabled{border-color: rgb(215, 220, 229); background: rgb(215, 220, 229); cursor: not-allowed; transform: none;}
.poss-prev, .poss-reset{border: 1px solid var(--line); background: rgb(255, 255, 255); color: rgb(82, 96, 120);}
.poss-prev:hover, .poss-reset:hover{border-color: rgb(156, 171, 194); color: var(--black);}
.poss-summary{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 1.125rem; padding: 0.75rem; border-radius: 0.8125rem; background: rgb(245, 247, 251);}
.poss-summary div{min-width: 0;}
.poss-summary dt{color: rgb(133, 144, 163); font-size: 0.625rem; font-weight: 700;}
.poss-summary dd{margin-top: 0.125rem; overflow: hidden; color: rgb(52, 64, 86); font-size: max(10px,0.75rem); font-weight: 700; text-overflow: ellipsis; white-space: nowrap;}
.poss-contact{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-top: 1.125rem;}
.poss-contact label{display: block; color: rgb(72, 86, 110); font-size: max(10px,0.75rem); font-weight: 700;}
.poss-contact input{width: 100%; height: 3rem; margin-top: 0.375rem; padding: 0 0.875rem; border: 1px solid rgb(223, 229, 239); border-radius: 0.6875rem; background: rgb(255, 255, 255); color: var(--black); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: max(13px,0.875rem); outline: none; transition: border-color 0.2s, box-shadow 0.2s;}
.poss-contact input:focus{border-color: var(--blue); box-shadow: rgba(47, 107, 255, 0.12) 0 0 0 0.1875rem;}
.poss-consent{display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.875rem; color: rgb(105, 117, 138); font-size: max(10px,0.75rem); line-height: 1.5;}
.poss-consent input{flex: 0 0 1rem; width: 1rem; height: 1rem; margin-top: 1px; accent-color: var(--blue);}
.poss-consent a{color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 0.125rem;}
.poss-success{display: none; min-height: 20.3125rem; align-items: center; justify-content: center; text-align: center;}
.poss-success.is-active{display: flex;}
.poss-success-mark{display: flex; align-items: center; justify-content: center; width: 3.875rem; height: 3.875rem; margin: 0 auto 1.25rem; border-radius: 50%; background: rgb(234, 240, 255); color: var(--blue); font-size: 1.75rem; font-weight: 800;}
.poss-success h3{font-size: 1.75rem; letter-spacing: -0.035em;}
.poss-success p{max-width: 24.375rem; margin: 0.75rem auto 0; color: var(--text-gray); font-size: max(13px,0.9375rem); line-height: 1.7; word-break: keep-all;}
.poss-success .poss-reset{margin-top: 1.5rem;}
.poss-panel{grid-template-columns: minmax(0, 1fr); gap: 2.625rem;}
.poss-copy{max-width: 42.5rem;}
.poss-card{width: 100%; max-width: 42.5rem;}
.poss{padding: 4rem 0;}
.poss .wrap{padding: 0 1.25rem;}
.poss-panel{gap: 2.125rem; min-height: 0;}
.poss h2{font-size: 2.125rem;}
.poss-copy > p{font-size: max(13px,0.9375rem);}
.poss-start{width: 100%; height: 3.25rem; margin-top: 1.5rem;}
.poss-card{min-height: 0; padding: 1.5rem 1.125rem 1.375rem; border-radius: 1.25rem;}
.poss-step legend{font-size: 1.375rem;}
.poss-options{grid-template-columns: minmax(0, 1fr); gap: 0.5rem;}
.poss-option span{min-height: 3rem;}
.poss-summary{grid-template-columns: minmax(0, 1fr); gap: 0.4375rem;}
.poss-summary div{display: flex; justify-content: space-between; gap: 0.75rem;}
.poss-summary dd{margin-top: 0;}
.poss-contact{grid-template-columns: minmax(0, 1fr);}
.poss-actions{margin-top: 1.375rem;}
.poss-success{min-height: 21.875rem;}
.photo-gallery{background: rgb(255, 255, 255);}
.photo-gallery .community-head{display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.375rem;}
.photo-gallery .community-head .eb{margin-bottom: 0.6875rem; color: var(--blue); font-size: max(10px,0.8125rem); font-weight: 800; letter-spacing: 0.08em;}
.photo-gallery .community-head h2{font-size: 3rem; line-height: 1.15; letter-spacing: -0.035em;}
.photo-gallery .gallery-more{display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--line); border-radius: 1.375rem; background: rgb(255, 255, 255); font-size: max(13px,0.875rem); font-weight: 700; white-space: nowrap; transition: border-color 0.2s, color 0.2s, transform 0.2s;}
.photo-gallery .gallery-more:hover{border-color: var(--blue); color: var(--blue); transform: translateY(-1px);}
.photo-gallery .gallery-grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem;}
.photo-gallery .gallery-item{position: relative; aspect-ratio: 1.5 / 1; overflow: hidden; border-radius: 1rem; background: var(--gray); isolation: isolate;}
.photo-gallery .gallery-item::after{content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(8, 18, 41, 0.76)); z-index: 1; pointer-events: none;}
.photo-gallery .gallery-item img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, filter 0.35s;}
.photo-gallery .gallery-item:hover img{transform: scale(1.045); filter: saturate(1.05);}
.photo-gallery .gallery-item figcaption{position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.0625rem; z-index: 2; color: rgb(255, 255, 255);}
.photo-gallery .gallery-item figcaption span{display: block; margin-bottom: 0.1875rem; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; opacity: 0.72;}
.photo-gallery .gallery-item figcaption strong{display: block; font-size: max(13px,1rem); font-weight: 700; letter-spacing: -0.02em;}
.photo-gallery{padding: 4.875rem 0;}
.photo-gallery .community-head{margin-bottom: 1.75rem;}
.photo-gallery .community-head h2{font-size: 2.25rem;}
.photo-gallery .gallery-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem;}
.photo-gallery .gallery-item{aspect-ratio: 1 / 1; border-radius: 0.75rem;}
.photo-gallery .gallery-item figcaption{left: 0.75rem; right: 0.625rem; bottom: 0.6875rem;}
.photo-gallery .gallery-item figcaption strong{font-size: max(10px,0.8125rem);}
.quick-consult{position: relative; overflow: hidden; padding: 2.875rem 0; background: linear-gradient(115deg, rgb(20, 59, 139) 0%, rgb(47, 107, 255) 78%, rgb(78, 130, 255) 100%); color: rgb(255, 255, 255);}
.quick-consult::after{content: ""; position: absolute; right: -7.5rem; top: -15rem; width: 32.5rem; height: 32.5rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; pointer-events: none;}
.quick-consult .wrap{position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2.625rem;}
.quick-consult .eb{margin-bottom: 0.4375rem; color: rgb(185, 208, 255); font-size: max(10px,0.6875rem); font-weight: 800; letter-spacing: 0.1em;}
.quick-consult h2{font-size: 2rem; line-height: 1.25; letter-spacing: -0.035em;}
.quick-consult p{margin-top: 0.5rem; color: rgba(255, 255, 255, 0.72); font-size: max(13px,0.875rem);}
.quick-consult p a{color: rgb(255, 255, 255); font-weight: 750;}
.quick-consult p span{margin: 0 0.3125rem; opacity: 0.52;}
.quick-consult .actions{display: flex; align-items: stretch; gap: 0.625rem; flex: 0 0 auto;}
.quick-consult .action{display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3.5rem; padding: 0 1.3125rem; border-radius: 0.8125rem; font-size: max(13px,0.875rem); font-weight: 750; white-space: nowrap; transition: transform 0.2s, background 0.2s, border-color 0.2s;}
.quick-consult .action:hover{transform: translateY(-0.125rem);}
.quick-consult .secondary{min-width: 7.375rem; border: 1px solid rgba(8, 31, 81, 0.55); background: rgb(14, 52, 127); color: rgb(255, 255, 255); box-shadow: rgba(7, 30, 78, 0.2) 0 0.5rem 1.125rem;}
.quick-consult .secondary:hover{border-color: rgb(8, 44, 112); background: rgb(10, 43, 108);}
.quick-consult .secondary .ico{width: 1.125rem; height: 1.125rem;}
.quick-consult .primary{min-width: 11rem; background: rgb(255, 255, 255); color: var(--blue); box-shadow: rgba(11, 44, 119, 0.15) 0 0.5rem 1.25rem;}
.quick-consult .wrap{align-items: flex-start; flex-direction: column; gap: 1.625rem;}
.quick-consult .actions{width: 100%;}
.quick-consult .actions > *{flex: 1 1 0%;}
.quick-consult{padding: 2.75rem 0;}
.quick-consult h2{font-size: 1.8125rem;}
.quick-consult p{line-height: 1.6;}
.quick-consult .actions{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;}
.quick-consult .actions > *{min-width: 0; width: 100%; height: 3.375rem;}
.quick-consult .primary{grid-column: 1 / -1;}
.quick-consult .action{padding: 0 0.75rem;}
.camp{background: rgb(247, 248, 251);}
.camp .row{display: flex; gap: 1.25rem;}
.camp .ph{flex: 1 1 0%; height: 13.75rem; border-radius: 1rem; overflow: hidden; background: var(--gray);}
.camp .ph img{width: 100%; height: 100%; object-fit: cover;}
.camp .map{flex: 0 0 27.5rem; height: 13.75rem; border-radius: 1rem; background: var(--blue-light); padding: 1.5rem;}
.camp .map .eb{font-size: max(10px,0.8125rem); font-weight: 700; color: var(--blue); margin-bottom: 0.375rem;}
.camp .map h3{font-size: max(13px,1.125rem); font-weight: 700; margin-bottom: 0.375rem;}
.camp .map p{font-size: max(13px,0.875rem); color: var(--text-gray); margin-bottom: 0.75rem;}
.camp .map .btn{height: 2.5rem; padding: 0 1.25rem; font-size: max(13px,0.875rem); border-radius: 1.25rem;}
.camp .map .links{margin-top: 0.625rem; font-size: max(10px,0.8125rem); color: var(--text-gray); display: flex; gap: 0.75rem;}
.camp .br{margin-top: 1.25rem; display: flex; gap: 0.625rem;}
.camp .br a{padding: 0.5rem 1rem; border-radius: 62.4375rem; background: rgb(255, 255, 255); font-size: max(13px,0.875rem); color: var(--text-gray); font-weight: 500;}
.camp .row{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;}
.camp .ph{height: 10.625rem;}
.camp .map{grid-column: 1 / -1; width: auto; height: auto; min-height: 13.75rem;}
.camp{padding: 4.875rem 0;}
.camp .head{align-items: flex-start; flex-direction: column; gap: 1.125rem; margin-bottom: 1.875rem;}
.camp .head h2{font-size: 2.125rem;}
.camp .head p{font-size: max(13px,0.875rem);}
.camp .row{gap: 0.5rem;}
.camp .ph{height: 7.5rem; border-radius: 0.625rem;}
.camp .map{min-height: 0; padding: 1.375rem 1.25rem; border-radius: 0.875rem;}
.camp .br{overflow-x: auto; padding-bottom: 0.3125rem;}
.camp .br a{flex: 0 0 auto;}
.ft{background: rgb(12, 16, 24); color: rgb(255, 255, 255); padding: 3.875rem 0 1.875rem;}
.ft .footer-main{display: grid; grid-template-columns: minmax(20rem, 0.9fr) minmax(35rem, 1.1fr); gap: 5.625rem; padding-bottom: 2.625rem;}
.ft .footer-logo{display: inline-block; font-size: max(13px,1.25rem); font-weight: 750; letter-spacing: -0.025em;}
.ft .footer-logo span{margin-left: 0.3125rem; color: rgb(127, 164, 255);}
.ft .footer-tel{display: block; width: max-content; margin-top: 1.5rem; font-size: 1.875rem; font-weight: 750; letter-spacing: -0.025em;}
.ft address{margin-top: 0.75rem; color: rgb(157, 167, 184); font-size: max(10px,0.8125rem); font-style: normal; line-height: 1.75;}
.ft address a{display: block; color: rgb(184, 193, 207);}
.ft address a:hover{color: rgb(255, 255, 255);}
.ft address span{display: block;}
.ft .footer-nav{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem;}
.ft .footer-group h5{margin-bottom: 0.9375rem; color: rgb(255, 255, 255); font-size: max(10px,0.8125rem); font-weight: 750;}
.ft .footer-links{display: flex; flex-direction: column; gap: 0.625rem;}
.ft .footer-links a{width: max-content; max-width: 100%; color: rgb(146, 156, 173); font-size: max(10px,0.8125rem); transition: color 0.2s, transform 0.2s;}
.ft .footer-links a:hover{color: rgb(255, 255, 255); transform: translateX(0.125rem);}
.ft .footer-meta{display: flex; align-items: flex-start; justify-content: space-between; gap: 1.875rem; padding-top: 1.625rem; border-top: 1px solid rgba(255, 255, 255, 0.09);}
.ft .footer-legal{display: flex; flex-wrap: wrap; max-width: 53.75rem; gap: 0.4375rem 1.125rem;}
.ft .footer-legal span{color: rgb(115, 127, 146); font-size: max(10px,0.6875rem); line-height: 1.5;}
.ft .footer-policy{display: flex; gap: 1rem; white-space: nowrap;}
.ft .footer-policy a{color: rgb(157, 167, 184); font-size: max(10px,0.75rem);}
.ft .footer-policy a.privacy{color: rgb(255, 255, 255); font-weight: 700;}
.ft .footer-copy{margin-top: 1.375rem; color: rgb(105, 116, 135); font-size: max(10px,0.6875rem);}
.ft .footer-main{grid-template-columns: minmax(0, 1fr); gap: 2.375rem;}
.ft .footer-nav{gap: 2rem;}
.ft .footer-meta{align-items: flex-start; flex-direction: column;}
.ft{padding: 3rem 0 1.625rem;}
.ft .footer-main{gap: 2.125rem; padding-bottom: 2.125rem;}
.ft .footer-tel{margin-top: 1.125rem; font-size: 1.6875rem;}
.ft .footer-nav{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.875rem 1.5rem;}
.ft .footer-group.channels{grid-column: 1 / -1;}
.ft .footer-group.channels .footer-links{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 1.5rem;}
.ft .footer-legal{display: grid; gap: 0.4375rem;}
.ft .footer-policy{flex-wrap: wrap; gap: 0.625rem 1rem;}
.ft .footer-copy{line-height: 1.5;}
.fab{position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 60; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 1rem; box-shadow: rgba(0, 0, 0, 0.08) 0 0.375rem 1.25rem; overflow: hidden;}
.fab a{display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 5.5rem; padding: 0.875rem 0; border-top: 1px solid var(--line); font-size: max(10px,0.75rem); font-weight: 700; white-space: nowrap;}
.fab a:first-child{border-top: 0;}
.fab a small{font-size: max(10px,0.6875rem); color: var(--text-gray); font-weight: 400;}
.fab .single{white-space: nowrap;}
.fab .ic{width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center;}
.fab .ic .ico{width: 1.125rem; height: 1.125rem;}
.yt, .ig{position: relative; isolation: isolate; overflow: hidden;}
.yt .wrap, .ig .wrap{position: relative; z-index: 1;}
.yt .head{position: relative; z-index: 1;}
.yt h2{display: flex; align-items: center; gap: 1.125rem;}
.yt-mark{display: inline-block; width: 3.625rem; height: 2.625rem; flex: 0 0 auto; color: rgb(255, 0, 51); fill: currentcolor;}
.yt .channel-link{height: 2.75rem; padding: 0 1.125rem; gap: 0.625rem; border: 1px solid var(--line); border-radius: 1.5rem; background: rgb(255, 255, 255); white-space: nowrap; font-size: max(13px,0.875rem); font-weight: 700; transition: border-color 0.2s;}
.yt .channel-link .yt-mark{width: 1.3125rem; height: 1rem;}
.yt .channel-link:hover{border-color: rgb(255, 0, 51); color: var(--black);}
.yt .row{position: relative; isolation: isolate;}
.yt .row::before{content: ""; position: absolute; inset: -1.5rem; z-index: -1; border-radius: 1.875rem; background: linear-gradient(125deg, rgb(243, 245, 248), rgb(248, 249, 251) 70%, rgb(243, 245, 248)); pointer-events: none;}
.yt .channel-watermark{position: absolute; width: 16.25rem; height: 11.875rem; right: 2.8125rem; top: -5.9375rem; transform: rotate(-13deg); color: rgb(230, 233, 238); opacity: 0.4; pointer-events: none;}
.ig::before{content: ""; position: absolute; inset: 8.125rem 0 0; z-index: 0; background: radial-gradient(at 15% 75%, rgba(157, 77, 229, 0.09), transparent 43%), radial-gradient(at 60% 85%, rgba(230, 69, 142, 0.07), transparent 47%), radial-gradient(at 91% 75%, rgba(245, 170, 74, 0.1), transparent 40%); pointer-events: none;}
.ig h2{display: flex; align-items: center; gap: 1.0625rem;}
.ig .profile-ring{display: flex; align-items: center; justify-content: center; width: 3.875rem; height: 3.875rem; padding: 0.1875rem; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(from 215deg, rgb(245, 181, 75), rgb(237, 99, 112), rgb(194, 73, 185), rgb(119, 91, 231), rgb(237, 99, 112), rgb(245, 181, 75));}
.ig .profile-ring > span{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0.25rem solid rgb(255, 255, 255); border-radius: 50%; background: rgb(255, 255, 255);}
.ig .profile-ring .ico{width: 1.625rem; height: 1.625rem; color: rgb(180, 73, 161);}
.ig .channel-actions{display: flex; align-items: center; gap: 1rem;}
.ig .scroll-controls{display: flex; gap: 0.5rem;}
.ig .scroll-controls[hidden]{display: none;}
.ig .scroll-controls button{display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgb(220, 225, 233); border-radius: 50%; background: rgb(255, 255, 255); color: rgb(38, 51, 76); font-size: 1.4375rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s;}
.ig .scroll-controls button:hover:not(:disabled){background: rgb(249, 243, 251); border-color: rgb(203, 155, 207); color: rgb(147, 69, 152);}
.ig .scroll-controls button:disabled{opacity: 0.3; cursor: default;}
.ig .ig-viewport{position: relative; margin: -0.375rem; padding: 0.375rem;}
.ig .ig-viewport::before, .ig .ig-viewport::after{content: ""; position: absolute; z-index: 2; top: 0.375rem; bottom: 0.375rem; width: 1.625rem; opacity: 0; pointer-events: none; transition: opacity 0.2s;}
.ig .ig-viewport::before{left: 0.375rem; background: linear-gradient(90deg, rgb(250, 247, 252), transparent);}
.ig .ig-viewport::after{right: 0.375rem; background: linear-gradient(270deg, rgb(253, 248, 245), transparent);}
.ig .ig-viewport.can-prev::before, .ig .ig-viewport.can-next::after{opacity: 1;}
.ig .grid{display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.25rem 0 0.75rem; overscroll-behavior-x: contain;}
.ig .grid::-webkit-scrollbar{display: none;}
.ig .ig-card{flex: 0 0 calc(16.6667% - 0.8333312rem); scroll-snap-align: start;}
.ig .ig-card::after{display: none;}
.ig .grid:focus-visible, .ig .scroll-controls button:focus-visible, .yt .channel-link:focus-visible{outline: rgb(83, 127, 231) solid 0.1875rem; outline-offset: 0.1875rem;}
.yt .row::before{inset: -1.125rem;}
.yt .channel-watermark{width: 11.875rem; right: 0.625rem; top: -3.75rem;}
.ig .grid{gap: 0.875rem;}
.ig .ig-card{flex-basis: calc(33.3333% - 0.5833331rem);}
.ig .head{align-items: flex-start; flex-wrap: wrap;}
.yt .head{align-items: flex-start; flex-direction: column; gap: 1.25rem;}
.yt h2{font-size: 2.375rem; gap: 0.75rem;}
.yt h2 .yt-mark{width: 2.625rem; height: 1.875rem;}
.yt .channel-watermark{width: 9.375rem; right: 0.25rem; top: -1.875rem;}
.yt .row::before{inset: -0.875rem; border-radius: 1.375rem;}
.ig .grid{gap: 0.75rem;}
.ig .ig-card{flex-basis: calc(50% - 0.375rem);}
.ig .head h2{font-size: 2.125rem; gap: 0.75rem;}
.ig .profile-ring{width: 2.875rem; height: 2.875rem;}
.ig .profile-ring .ico{width: 1.375rem; height: 1.375rem;}
.ig .channel-actions{width: 100%; justify-content: space-between; gap: 0.5rem;}
.ig .follow{padding: 0 0.8125rem; font-size: max(10px,0.8125rem);}
.ig .scroll-controls{gap: 0.375rem;}
.ig::before{inset: 10rem 0 0;}
@media (prefers-reduced-motion: reduce){.ig .ig-card img, .ig .scroll-controls button, .ig .ig-viewport::before, .ig .ig-viewport::after{transition: none;}}