/*reset*/ *, *::before, *::after { box-sizing: border-box;} body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0;} html, body { height: 100%; font-family: 'Pretendard' !important; letter-spacing:-0.5px; color:#23232A; line-height:1; font-variant-numeric: tabular-nums; scroll-behavior: smooth; background:#fff; overflow-x:hidden;} body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;} img { border-style: none;} input, button, textarea, select { font: inherit; color: inherit; border:none; outline: none;} select {cursor:pointer; outline: none;} button { border: none; background: none; cursor: pointer; padding:0; font-variant-numeric: tabular-nums;} a { display:block; text-decoration: none; color: inherit; line-height:1; font-variant-numeric: tabular-nums;} a:hover {font-weight:inherit;} ul, ol { list-style: none; padding: 0; margin: 0;} table { border-collapse: collapse; border-spacing: 0;} textarea { resize: vertical; font-family: 'Pretendard' !important;} input {border:none; font-family: 'Pretendard' !important; background:#fff;} input + label {display:block; cursor:pointer; font-family: 'Pretendard';} label {display:block; cursor:pointer; font-family: 'Pretendard';} input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} input[type="number"] { -moz-appearance: textfield;} [hidden] { display: none !important;} figure { padding:0; margin:0; } @font-face { font-family: 'gangwonedupower'; font-weight: 100; font-style: normal; src: url('/dsn/_font/gangwonedupower.woff'); font-display: swap; } /*common*/ .img-responsive {width:100%; height:auto; object-fit: cover; object-position:center;} .img-maxponsive {width:100%; height:100%; object-fit: cover; object-position:center;} .img-contain {width:100%; height:100%; object-fit: contain; object-position:center;} .relative {position:relative;} .text-center {text-align:center;} .pc {display:none;} .mobile {display:block;} .mbr {display:block; width:100%; height:1px; } .br {display:none;} .ff-gwedu { font-family: 'gangwonedupower';} .container {margin:0 auto; padding:0 22px; width:100%; max-width:420px;} .bold {font-weight:800;} .fc-b {color:#2D52DE !important;} .fc-p {color:#4B4BEA !important;} .fc-n {color:#2E459D !important;} a.fc-n {color:#2E459D !important;} .fc-y {color:#FFEA00 !important;} .fc-sub {color:#7E8298 !important;} a.fc-sub {color:#7E8298 !important;} .fc-r {color:#C00000 !important;} .fc-gr {color:#00c24e !important; } .swiper-scrollbar {background:#E0E4EB !important;} .swiper-scrollbar-drag {background:#4E5674 !important;} /* 약관 팝업 : 제목은 고정, 본문만 스크롤 ⚠️ termCont 에 max-height:100% 만 주면 안 된다 — 부모(termWrap)가 auto 높이면 % 가 해소되지 않아 스크롤이 생기지 않는다. termWrap 이 팝업 body 높이를 물려받아야 한다 */ .termWrap { background-color:white; border-radius:10px; display:flex; flex-direction:column; height:100%; max-height:100%; overflow:hidden; } .termWrap .termTitle { flex:0 0 auto; padding:10px; font-size:32px; text-align:center; font-weight:bold; } .termWrap .termCont { flex:1 1 auto; min-height:0; overflow:auto; padding:10px; } #main, #prodCar, #board, #page, #term, #fin {margin-top:56px;} /*head*/ #header {width:100%; overflow-x:hidden;} /* #hTop {position:relative; width:101%; top:-1px; left:50%;transform:translate(-50%,0) translateY(0); transition: transform 0.35s ease, opacity 0.3s ease;} #hTop.scroll {position:fixed; background:rgba(255 255 255 / 100%); z-index:99; box-shadow:3px 3px 7px rgba( 0 0 0 / 12%);} */ #hTop .container {height:56px;} #hTop .logo {position:relative; top:9px; left:-5px; width:200px; margin:0 auto; } #hTop .hTopMenuOpen {position:absolute; top:15px; left:15px; width:24px; height:24px; z-index:9;} #hTop .btn {position:absolute; top:50%; right:15px; transform:translate(0,-50%); width:22px; height:22px; z-index:9;} #hTop .btn.naver {top:51%; right:48px;} .hTopWarp { position: fixed; top: 0; left: 0; width: 100%; background:#fff; z-index: 99; box-shadow:3px 5px 7px rgba(0 0 0 / 12%) transform: translateY(0); transition: transform 0.35s ease, opacity 0.3s ease;} .hTopWarp.hide { transform: translateY(-100%); opacity: 0;} #hTopMenu {position:fixed; top:0; left:0; width:101%; height:101vh; background:#fff; z-index:100; transform: translateX(-100%); transition: transform 0.3s ease; pointer-events: none;} #hTopMenu.open { transform: translateX(0); pointer-events: auto;} #hTopMenu .hTopMenuClose {position:absolute; top:15px; right:22px; width:24px; height:24px; z-index:9;} #hTopMenu .hTopMenuCon {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0 50px;} #hTopMenu .menuCar {position:relative; argin:0 auto;border-radius:7px; overflow:hidden;} #hTopMenu .menuCar:after {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1px; height:20px; background:#c8d2e2;} #hTopMenu .menuCar ul {display:flex; align-items:center; } #hTopMenu .menuCar li {width:50%; text-align:center; } #hTopMenu .menuCar li a {padding:14px 0; font-size:18px; font-weight:700; color:#1D2C65; background:#E6EBF3;} #hTopMenu .menuCar li a.active {background:#1D2C65; color:#fff;} #hTopMenu .menuList {margin-top:10px;} #hTopMenu .menuList li a {font-size:18px; padding:18px 0; font-weight:600; text-align:center; } #hTopMenu .menuList li a.active {color:#2D52DE;} #hTopMenu .menuList li.bar {margin:20px auto; display:block; width:100%; height:1px; border-top:1px dotted #aeb6c4;} /*main*/ .mTit {display:flex; flex-direction:column; gap:2px; margin-bottom:20px; padding:0 15px;} .mTit a.mTitCol {display:flex; flex-direction:column; gap:7px;} .mTit h2 {font-size:24px; font-weight:700; letter-spacing:-1px;} .mTit p { font-size:14px; line-height:1.3; font-weight:400; color:#7E8298; } .mTit.dark h2 {color:#fff;} .mTit.dark p {color:#D6D8E3} #mVisual {padding:30px 15px 15px 15px; background:#F2F7FF;} #mVisual .swiper {max-width:420px; margin:0 auto; overflow:hidden;} .mVisualSwiper .list {border-radius:0 25px 0 25px; overflow:hidden;} .mVisualSwiper .container {padding:0;} .mVisualSwiperCon {height:180px;} .mVisualSwiper .swiper-pagination {width:60px !important; left:inherit !important; right:0; bottom:0 !important; padding:7px 0 4px 6px; background:rgba(0 0 0 /50%); backdrop-filter:blur(6px); color:#fff !important; font-size:12px; border-radius:30px 0 0 0;} #mEvent {background:#F2F7FF; padding:10px 0 40px 0;} #mEvent .container {padding:0;} #mEvent .mTit {padding:0 15px 0 30px;} #mEvent .mTit .swiperNavi {position:absolute; top:16px; right:15px; display:flex; align-items:center; gap:5px;} #mEvent .mTit .swiperNavi .navi {width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:#C9D3E4; border-radius:8px; cursor:pointer;} #mEvent .mTit .swiperNavi .navi img {width:15px; height:15px;} #mEvent .mTit .swiperNavi .navi.prev img {transform:scaleX(-1);} #mEvent .mEventSwiper {padding:0 15px;} #mEvent .mEventSwiper .list a {display:flex; align-items:center; justify-content:center; height:140px; overflow:hidden; border-radius:0 25px 0 25px;} #mBest {padding:60px 0; background:#02060c;} #mBest .container {z-index:9;} #mBest .mBestCover {position:absolute; top:0; left:50%; transform:translate(-50% , 0); width: 100%; height: 600px; overflow: hidden; z-index:1; } #mBest .mBestCover video { width: 100%; height: 100%; object-fit: cover;} .mBestList {display:flex; flex-wrap:wrap; gap:12px; } .mBestList .list {width:calc(50% - 6px);} .mBestList a {position:relative; background:#fff; padding:0 15px 20px 15px; border-radius:20px; overflow:hidden; box-shadow:3px 5px 5px rgba(0 0 0 / 30%);} .mBestList a .rank {position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; background:#8896AC; width:35px; height:35px; border-radius:0 0 15px 0; color:#fff; font-size:13px; font-weight:600;} .mBestList a .onair {position:absolute; top:10px; right:10px; display:flex; align-items:center; background:#fff; padding:5px 8px 5px 10px; border-radius:30px; color:#8896AC; font-size:11px; font-weight:400; box-shadow:3px 3px 5px rgba(0 0 0 / 10%);} .mBestList a .onair .dot {display:block; margin-right:5px; width:5px; height:5px; border-radius:100%; background:#001C55;} .mBestList a .onair .big {padding:0 0 0 3px; color:#001C55; font-size:13px; } .mBestList a .con {padding:145px 0 0 0; text-align:center;} .mBestList a .con h3 {font-size:14px; font-weight:700; line-height:1.3; height:55px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .mBestList a .con .won {margin:7px 0 12px 0; display:flex; align-items:center; justify-content:center; gap:3px; font-size:13px; font-weight:500;} .mBestList a .con .won .num {position:relative; top:-1px; margin-left:3px; font-size:20px; font-weight:800;} .mBestList a .con .btn {padding:11px 20px 10px 20px; border-radius:30px; background:#2D52DE; color:#fff; font-size:15px; font-weight:600;} .mBestList a .img {position:absolute; top:55px; left:50%; transform:translate(-50% , 0); width:90%; } .mBestList a .standard {margin-top:10px; display:flex; justify-content:center; gap:10px; font-size:10px; letter-spacing:-1px; color:#8896AC; line-height:1.2;} .mBestList a .standard h4 {position:relative; top:1px; color:#505360; font-weight:600;} #mBn {padding:60px 0;} #mBn .mTit {text-align:center;} .mBnList ul {display:flex; flex-direction:column; gap:12px;} .mBnList li:nth-child(1) a {background:url('/dsn/_img/mbn_1_m.webp') no-repeat center / cover; border-radius:30px 0 0 0;} .mBnList li:nth-child(2) a {background:url('/dsn/_img/mbn_2_m.webp') no-repeat center / cover;} .mBnList li:nth-child(3) a {background:url('/dsn/_img/mbn_3_m.webp') no-repeat center / cover; border-radius:0 0 30px 0;} .mBnList a {position:relative; display:flex; align-items:center; justify-content:space-between; padding:35px 25px; color:#fff;} .mBnList a h3 {font-size:20px;} .mBnList a p {margin-top:8px; font-size:15px;} .mBnList a .btn {display:flex; align-items:center; justify-content:center; width:35px; height:35px; border-radius:100%; background:rgba(255 255 255 / 30%); backdrop-filter:blur(12px);} .mBnList a .btn img {width:20px;} #mReview { padding:60px 0 40px 0;} #mReview .container {padding:0;} #mReview .mTit {text-align:center;} #mReview .mReviewSwiper {/*padding:20px 20px 25px 20px; border-radius:0 20px 0 20px;*/ padding:0 20px 20px 20px;} #mReview .swiper-scrollbar {bottom:25px !important; width:calc(100% - 40px) !important; left:50%; transform:translate(-50%, 0);} .mRvList .thumb {width:100%; height:120px; border-radius:0 20px 0 20px; overflow:hidden;} .mRvList .con {padding:20px 15px;} .mRvList .con h3 {font-size:18px; font-weight:700; line-height:1.3; height:47px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .mRvList .con p {margin:10px 0 15px 0; font-size:14px; font-weight:500; color:#636363; line-height:1.5; height:61px; overflow: hidden; text-overflow: ellipsis;word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .mRvList .con .bottom {display:flex; flex-direction:column;} .mRvList .con .bottom .user {display:flex; align-items:center; gap:8px; font-size:12px; color:#7E8298;} .mRvList .con .bottom .user .ico {display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:100%; background:#E1E5F9;} .mRvList .con .bottom .user .ico img {width:18px; } .mRvList .con .bottom .user .name {position:relative; top:-3px; } .mRvList .con .bottom .star {display:flex; align-items:center; position:relative; top:-8px; left:35px; } .mRvList .con .bottom .star span {width:18px; height:18px; } #mVip {position:relative; padding:60px 0 100px 0; background:#F2F7FF;} #mVip .mVipSwiper {padding:0 22px 30px 22px;} #mVip .swiper-scrollbar { width:calc(100% - 50px) !important; left:50%; transform:translate(-50%, 0);} #mVip .mVipBtn { position:absolute; bottom:40px; left:50%; transform:translate(-50%,0); text-align:center; width:calc(100% - 100px); z-index:9;} #mVip .mVipBtn a {display:flex; align-items:center; justify-content:center; gap:12px; padding:13px 0; border:1px solid #d6dde8; background:#e4ebf6; color:#2f3845; font-size:15px; font-weight:600; border-radius:12px;} #mVip .mVipBtn .img {position:absolute; width:80px; right:-17px; bottom:-24px; } /* #mVip .mVipSwiper .swiper-slide {opacity:0.5;} #mVip .mVipSwiper .swiper-slide.swiper-slide-active {opacity:1;} */ .mVipList a {background:url('/dsn/_img/bg_award_ico.webp') no-repeat; background-size:235px; background-position:center -22px;} .mVipList .thumb {position:relative; margin:0 auto; width:110px; height:110px; border-radius:100%; overflow:hidden; z-index:9;} .mVipList .con {position:relative; top:-20px; margin-bottom:-20px; padding:30px 15px 15px 15px; background:#fff; border-radius:0 20px 0 0; z-index:1;} .mVipList .con .conName {margin-bottom:15px; display:flex; align-items:center; justify-content:space-between;} .mVipList .con .conName .logo {width:55px;} .mVipList .con .conName h3 {display:flex; align-items:center; gap:3px; font-size:14px; font-weight:400; font-weight:400;} .mVipList .con .conName h3 .name {font-size:16px; font-weight:700;} .mVipList .con p {font-size:13px; color:#636363; line-height:1.4; height:34px; overflow: hidden; text-overflow: ellipsis;word-break: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;} .mVipList .btn {padding:12px; text-align:center; color:#fff; font-size:15px; font-weight:700; background:#2E459D; border-radius:0 0 0 20px;} #mLow {position:relative; padding:60px 0 40px 0; background:url('/dsn/_img/low_bg.webp') no-repeat left / cover; overflow:hidden;} #mLow .mTit {margin-bottom:25px;} #mLow .mTit h2 {font-size:28px; line-height:1.3;} #mLow .mTit p {margin-top:7px; font-size:15px; line-height:1.5; color:#fff;} #mLow .mLowCoin {position:absolute; top:-35px; right:0; width:100%; z-index:1;} #mLow .mLowClover {position:absolute; top:116px; right:9px; width:160px; z-index:2; } #mLow .container {position:relative; z-index:9;} #mLow .mLowTit {margin-bottom:25px; color:#fff;} #mLow .mTitList {padding:0 16px; display:flex; flex-direction:column; gap:2px;} #mLow .mTitList li {display:flex; gap:6px; align-items:center; font-size:15px; color:#fff; font-weight:400; } #mLow .mTitList li .ico {width:16px; height:16px;} #mLow .mTitList li .text {width:calc(100% - 36px);} .mLowCounsel {position:relative; padding:0 0 90px 0; border-radius:0 25px 0 25px; background:#fff; overflow:hidden;} .mLowCounsel .formList {margin-bottom:17px; padding:20px; background:#E6EBF3;} .mLowCounsel .formList input {padding:14px 16px; font-size:14px; width:100%; border-radius:8px; background:#fff;} .mLowCounsel .formList input::placeholder {color:#848484;} .mLowCounsel .formList li:nth-child(3) input {padding:14px 16px 14px 97px; } .mLowCounsel .formList li {position:relative; margin-bottom:6px;} .mLowCounsel .formList li:last-child {margin-bottom:0;} .mLowCounsel .formList li label {position:absolute; top:15px; left:15px; font-size:13px; font-weight:600; color:#2a2f44;} .mLowCounsel .formAgree {padding:0 16px;} /* 모바일 하단 상담 폼 버튼 : 2줄 → 2열 (2026-08-27) 좌우 여백 20px + 버튼 사이 10px → 각 calc(50% - 25px) */ .mLowCounsel button.sendBtn {position:absolute; bottom:20px; left:20px; transform:none; padding:12px 0 13px 0; width:calc(50% - 25px); min-height:51px; text-align:center; border-radius:50px; background:#281FA1; color:#fff; font-size:17px; font-weight:700; display:flex; align-items:center; justify-content:center;} .mLowCounsel button.kakaoBtn {position:absolute; bottom:20px; left:auto; right:20px; transform:none; padding:12px 0 13px 0; width:calc(50% - 25px); text-align:center; border-radius:50px; background:#FFEA00; color:#000; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap;} /* 두 버튼 높이를 같게 (폰트·아이콘 크기가 달라 자연 높이가 어긋난다) */ .mLowCounsel button.kakaoBtn {min-height:51px;} .mLowCounsel button.kakaoBtn .ico {width:20px; height:20px; flex-shrink:0;} .mLowCounsel .radioListWarp {margin-top:13px; padding:14px 20px; margin-right:-20px; margin-left:-20px; background:#d9e0ea;} #footer {padding:40px 0 100px 0; } .copyTxt .tit {margin-bottom:20px; display:flex; gap:7px; line-height:30px;} .copyTxt .tit h3 {display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600;} .copyTxt .tit h3 .big {font-size:20px; font-weight:800; letter-spacing:-1px;} #footer p {font-size:13px; font-weight:400; color:#2A2A2A; line-height:1.6;} #footer p.reseved {font-weight:600; opacity:0.5;} #footer .gap {margin:0 7px; opacity:0.5;} #footer .bar {margin:20px 0; display:block; width:100%; height:1px; background:#E6EBF3;} #footer .termList { } #footer .termList a {font-size:13px;} #footer .termThree {display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px;} #footer .termThree a {font-size:13px; font-weight:600; } /* TERMADD-GAP : 항목이 5개로 늘어 3px 간격·27px 높이로는 빽빽했다. 터치 타깃(권장 44px)도 확보하려고 높이와 간격을 함께 넓힘 */ #footer .termAdd {margin:24px 0;} #footer .termAdd li {margin-bottom:6px;} #footer .termAdd li:last-child {margin-bottom:0;} #footer .termAdd a {display:flex; align-items:center; justify-content:center; min-height:38px; padding:8px 12px; background:#E6EBF3; color:#6a7890; border-radius:6px; text-align:center; overflow:hidden; font-size:13px; font-weight:500; line-height:1.35;} #fQuick {position:fixed; bottom:20px; left:50%; transform:translate(-50%, 0); width:100%; z-index:99;} #fQuick .ico {display:block; margin:0 auto; } #fQuick.end .glass-dark {background:transparent; box-shadow:none; border:none; backdrop-filter:none; } #fQuick.end .glass-dark::before {content:none; } #fQuick .container {display:flex; align-items:center; justify-content:space-between; gap:7px; width:95%;} #fQuick .fQuickList {display:flex; align-items:center; justify-content:space-between; width:calc(100% - 124px); padding:0 30px; height:55px; border-radius: 50px; overflow:hidden;} #fQuick .fQuickList a {font-size:11px; font-weight:500; color:#fff;} #fQuick .fQuickList .text {position:relative; display:block; top:2px; } #fQuick .fQuickList .ico {width:20px; height:20px;} #fQuick .fBtn {display:flex; align-items:center; justify-content:center; width:55px; height:55px; border-radius:100%; border-radius:100%; overflow:hidden;} #fQuick .fBtn .ico {width:25px; height:25px;} #fQuick.end {display:none;} #fQuick.end .container {padding:0;} #fQuick.end .fQuickList {padding:0 26px; border-radius:0;} #fQuick.end .fQuickList .ico {width:23px; height:23px;} #fQuick.end .fQuickList .text {display:none;} .glass { position: relative; background: rgba(18, 18, 18, 0.7); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 5px 7px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); } .glass::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 130deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 40%, transparent 60% ); } .glass-white { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(22px) saturate(200%) contrast(105%); -webkit-backdrop-filter: blur(22px) saturate(200%) contrast(105%); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 10px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7); } .glass-white::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 40%, transparent 60% ); pointer-events: none; } .glass-dark { background: rgba(20, 20, 20, 0.5); backdrop-filter: blur(26px) saturate(200%) contrast(110%); -webkit-backdrop-filter: blur(26px) saturate(200%) contrast(110%); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 12px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); } .glass-dark::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04) 40%, transparent 60% ); pointer-events: none; } #fBn {padding:120px 0;} .fBnList {display:flex; align-items:end; gap:25px;} .fBnList li a {position:relative; top:0; width:300px; display:flex; align-items:center; gap:16px; justify-content:center; padding:40px 0; background:#000; border-radius:0 50px; color:#fff; overflow:hidden; min-height: 123px; } .fBnList li a:hover {top:-5px; transition:all 0.3s; box-shadow:3px 3px 5px rgba(0 0 0 /15%); } .fBnList li a .text {width:142px; text-align:center; font-size:23px; font-weight:700; letter-spacing:-0.5px;} .fBnList li a .ico {width:40px;} .fBnList li:nth-child(2) a {background:#2E459D;} .fBnList li:nth-child(3) a {background:#FFE641; color:#381E1E;} .fBnList li:nth-child(4) a {background:#4AD34A;} .fBnList li.call {padding:0 40px 0 0;} .fBnList li.call h5 {display:flex; align-items:end; gap:10px; font-size:18px; font-weight:500; color:#7E8298;} .fBnList li.call h5 .logo {width:120px;} .fBnList li.call h2 {display:flex; align-items:center; gap:4px; font-size:34px; font-weight:700; letter-spacing:-1px;} .fBnList li.call h2 .ico {position:relative; top:3px; width:30px;} #term .title {padding:20px 0; font-size:26px; font-weight:700; border-bottom:1px solid #ececec;} #term .container {display:grid; gap:20px; } #term h2 {position:relative; margin:20px 0 0 0; font-size:23px; color:#121212; } #term h3 {font-size:18px; font-weight:700; color:#323e4e;} #term h4 {font-size:16px; font-weight:600; color:#323e4e;} #term h5 {margin-bottom:-15px; font-size:16px; font-weight:600; color:#323e4e;} #term .policyCon {display:grid; gap:7px; font-size:14px; line-height:1.8; color:#676b72;} #term .tit {color:#323e4e; font-weight:500; } #term .list {display:flex; flex-direction:column; gap:10px; } #term .list li {position:relative; font-size:14px; line-height:1.5; } #term .list.dash li:before {content:'-'; position:absolute; top:-1px; left:0;} #term .list.dash li {padding:0 0 0 12px; } #term .list.column li {display:flex; flex-direction:column; } #term .list.flex li {display:flex; } #term .listBox {margin:10px 0; padding:25px 20px; background:#f4f6f9; border-radius:16px; } #term .listBox .list {gap:7px;} #term .listBox .list li {display:flex; align-items:baseline; gap:6px;} #term .gridBox {width:100%; margin:24px 0; display: grid; grid-template-columns: 25% 50% 25%; font-size:13px; border-bottom:2px solid #ececec;} #term .gridBox .cell { padding: 12px 8px; border: none; position: relative; display:flex; align-items:center; justify-content:center; text-align: center; word-break:break-all;} #term .gridBox .cell::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: #ececec; } #term .gridBox .cell::before {content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #ececec;} #term .gridBox .cell:nth-child(3n)::before { display: none; } #term .gridBox .cell:nth-last-child(-n+3)::after { display: none; } #term .gridBox .cell.gbTop {background:#f4f6f9; color:#121212; font-size:14px; font-weight:700;} @media (min-width:590px) { #mBest .mBestCover {height: 1100px; } } @media (min-width: 1280px) { .pc {display:block;} .mobile {display:none;} .mbr {display:none;} .br {display:block; width:100%; height:1px;} .container {width:1280px; max-width:1280px;} #main, #board, #prodCar, #page, #term, #fin {margin-top:130px; } /*head*/ #hTop .container {height:auto;} #hTop .logo {position:relative; top:-4px; left:-7px; width:300px; margin:0; } .hTopService {padding:17px 0 5px 0;} .hTopService .container {display:flex; aling-items:center; justify-content:space-between;} .hTopService .hTopLeft {display:flex; align-items:center; gap:23px;} .hTopService .searchForm input {padding:11px 27px; width:260px; font-size:14px; border:1px solid #E6EBF3; border-radius:50px; } .hTopService .searchForm input::placeholder {color:#8590A3; letter-spacing:-0.5px;} .hTopService .searchForm button.searchBtn {position:absolute; top:47%; right:25px; transform:translate(0, -50%); width:20px; height:20px;} .hTopService .hTopRight {display:flex; align-items:center; gap:15px;} .hTopService .hTopRight .btn.call {display:flex; align-items:center; gap:9px;} .hTopWarp.hide { transform: translateY(0); opacity: 1; box-shadow:3px 5px 5px rgba(0 0 0 / 15%); } #hTop .btn {position:inherit; transform:none; width:auto; height:auto; } #hTop .btn .ico {width:42px; height:42px; display:flex; align-items:center; justify-content:center; /*border-radius:15px; background:#000;*/} #hTop .btn.call .ico { /*background:#E6EBF3;*/} #hTop .btn.call h3 {font-size:14px; font-weight:400; } #hTop .btn.call h2 {position:relative; top:-1px; font-size:28px; letter-spacing:-0.5px; font-weight:900; } #hTop .btn.kakao .ico { /* background:#FCE13C; */} #hTop .btn .ico a, #hTop .btn .ico img { /*width:20px; height:20px;*/} .hTopMenu .container {display:flex; align-items:center; justify-content:space-between;} .hTopMenu .menuList {display:flex; align-items:center; gap:45px;} .hTopMenu .menuList a {padding:15px 0 22px 0; font-size:17px; font-weight:600;} .hTopMenu .menuList a.active {color:#2D52DE; font-weight:800;} .hTopMenu .menuList.mnLeft {gap:60px;} /*main*/ .mTit {margin-bottom:65px; gap:7px; } .mTit h2 {font-size:42px; letter-spacing:-1px; line-height:1.4;} .mTit p {font-size:24px;} #mVisual {position:relative; padding:0;} #mVisual .swiper {width:100%; max-width:100%; margin:0 auto 0 0; } #mVisual .swiperNavi {position:relative; width:1280px; margin:0 auto; } #mVisual .swiperNavi .navi {position:absolute; top:238px; right:30px; z-index:9;width:50px; height:50px; cursor:pointer; } #mVisual .swiperNavi .navi.prev {transform:scaleX(-1); right:inherit; left:30px;} .mVisualSwiper .container {margin:0 auto; width:100%; max-width:1920px; } .mVisualSwiper .list {border-radius:0 120px 0 0; overflow:hidden;} .mVisualSwiperCon {height:525px; border-radius:0 120px 0 0; overflow:hidden;} .mVisualSwiperCon img.img-responsive {width:100%; height:100%; object-fit:cover; object-position:left;} .mVisualSwiper .swiperPage {position:absolute; width:1280px; bottom:30px; left:50%; transform:translate(-50%, 0); z-index:9;} .mVisualSwiper .swiper-pagination {width:1070px !important; left:0 !important; right:inherit; padding:0; background:transparent; backdrop-filter:blur(0);} .mVisualSwiper .swiper-pagination-bullet {width:12px !important; height:12px !important; background:#fff !important;} #mEvent {position:relative; padding:110px 0; background:#fff;} #mEvent .mTit {padding:0; margin:0;} #mEvent .container {display:flex; align-items: align-items:stretch;} #mEvent .mEventSwiper {position:absolute; top:78px; right:0; padding:0; width:1145px;} #mEvent .mTit .swiperNavi {position:relative; top:0; right:0; margin-top:55px; gap:7px;} #mEvent .mTit .swiperNavi .navi {width:45px; height:45px; border-radius:10px;} #mEvent .mTit .swiperNavi .navi:hover {background:#9BABC5; transition:all 0.3s;} #mEvent .mTit .swiperNavi .navi img {width:18px; height:18px;} #mEvent .mEventSwiper .list a {height:270px; border-radius:0 40px 0 40px;} #mBest {padding:140px 0;} #mBest .mBestCover {height:1116px;} .mBestList {gap:25.5px;} .mBestList .list {width:calc(33% - 17px);} .mBestList a {padding:60px 0 32px 42px; border-radius:20px;} .mBestList a .rank {width:47px; height:47px; font-size:18px; border-radius:20px 0;} .mBestList a .onair {top:18px; right:14px; padding:11px 14px 11px 17px; font-size:12px;} .mBestList a .onair .big {padding:0 2px 0 5px; font-size:16px;} .mBestList a .img {top:85px; left:inherit; right:-130px; width:307px; transform:none;} .mBestList a .con {padding:0; text-align:left; width:200px;} .mBestList a .con h3 {font-size:18px; height:70px;} .mBestList a .con .won {margin:13px 0 30px 0; justify-content:flex-start; font-size:20px; gap:0;} .mBestList a .con .won .num { margin:0 2px 0 7px; font-size:28px;} .mBestList a .con .btn {display:inline-block; padding:15px 23px; font-size:16px;} .mBestList a .standard {position:relative; left:-1px; margin-top:32px; justify-content:flex-start; font-size:12px; gap:5px;} .mBestList a .standard h4 {top:0;} .mBestList a:hover .img {right:-120px; transition:all 0.5s;} .mBestList a:hover .con .btn {box-shadow:3px 4px 5px rgba(0 0 0 / 15%);} #mBn {padding:150px 0;} .mBnList ul {flex-direction:row; gap:25px; justify-content:center;} .mBnList li:nth-child(1) a {background:url('/dsn/_img/mbn_1.webp') no-repeat center / cover; border-radius:80px 0 0 0;} .mBnList li:nth-child(2) a {position:relative; top:44px; background:url('/dsn/_img/mbn_2.webp') no-repeat center / cover;} .mBnList li:nth-child(3) a {background:url('/dsn/_img/mbn_3.webp') no-repeat center / cover; border-radius:0 0 80px 0;} .mBnList a {flex-direction:column; align-items:flex-start; gap:35px; justify-content:flex-start; padding:70px 0 0 40px; width:305px; height:455px;} .mBnList a h3 {font-size:34px;} .mBnList a p {margin:16px 0 0 0; font-size:20px; line-height:1.3; opacity:0.7;} .mBnList a:hover p {opacity:1;} .mBnList a .btn {position:relative; left:0; width:45px; height:45px;} .mBnList a .btn img {width:22px; height:22px;} .mBnList a:hover .btn {left:15px; transition:all 0.3s;} #mReview {padding:150px 0;} #mReview .mReviewSwiper {/*padding:38px; border-radius:0 80px; */} .mRvList a {position:relative; top:0;} .mRvList .thumb {height:220px; border-radius:0 40px;} .mRvList .con h3 {font-size:24px; height:30px; -webkit-line-clamp:1;} .mRvList .con p {margin:25px 0; font-size:18px; font-weight:400; height:92px; line-height:1.6;} .mRvList .con {padding:35px 30px 0 30px;} .mRvList .con .bottom {flex-direction:row; align-items:center; justify-content:space-between;} .mRvList .con .bottom .user {font-size:16px; gap:12px;} .mRvList .con .bottom .user .ico {width:36px; height:36px;} .mRvList .con .bottom .user .ico img {width:22px; } .mRvList .con .bottom .user .name {top:0; } .mRvList .con .bottom .star {top:0; left:0;} .mRvList a:hover {top:-10px; transition:all 0.5s;} .mRvList a:hover .thumb {box-shadow:3px 3px 5px rgba(0 0 0 / 10%);} #mReview .mReviewSwiperWarp .swiperNavi {width:1310px; } .mReviewSwiperWarp {position:relative; } .mReviewSwiperWarp .swiperNavi {width:1248px; } .mReviewSwiperWarp .swiperNavi .navi {position:absolute; top:50%; right:-58px; z-index:9; width:50px; height:50px; cursor:pointer; display:flex; align-items:center; justify-content:center; background:#AFBBCD; border-radius:100%; } .mReviewSwiperWarp .swiperNavi .navi:hover {background:#9BABC5; transition:all 0.3s;} .mReviewSwiperWarp .swiperNavi .navi img {width:35px; height:35px;} .mReviewSwiperWarp .swiperNavi .navi.prev {transform:scaleX(-1); right:inherit; left:-58px;} .mReviewSwiperWarp .swiper-button-lock {display:block;} #mVip {padding:150px 0; min-width:1600px; } #mVip .container {position:relative; } #mVip .mVipSwiper {max-width:1280px; padding:15px 280px 0 0; margin-top:-15px;} #mVip .swiper-scrollbar {width:1280px !Important;} #mVip .mVipSwiper .swiper-slide {opacity:1;} #mVip .mVipBtn {bottom:inherit; left:inherit; transform:none; top:275px; width:fit-content; right:0;} #mVip .mVipBtn .img {position:absolute; bottom:200px; right:-100px; width:260px; filter:drop-shadow(2px 4px 6px rgba(0 0 0 / 15%));} #mVip .mVipBtn a {display:block; padding:40px; width:260px; height:260px; border-radius:0 20px; font-size:30px; line-height:1.3; font-weight:700; text-align:left;} #mVip .mVipBtn a .plus {position:absolute; bottom:40px; right:40px;} #mVip .mVipBtn:hover {transform:translateY(-15px); transition:all 0.5s;} #mVip .mVipBtn:hover a {background:#d6dde8;} .mVipList a {background-size:400px; background-position:center -29px;} .mVipList {position:relative; top:0;} .mVipList:hover {top:-12px; transition:all 0.3s; } .mVipList:hover .btn {background:#24293B;} .mVipList:hover .con {box-shadow:3px 3px 5px rgba(0 0 0 /15%);} .mVipList .thumb {width:150px; height:150px;} .mVipList .con {top:-40px; margin-bottom:-40px; padding:58px 20px 35px 20px;} .mVipList .con .conName {margin-bottom:25px;} .mVipList .con .conName .logo {width:85px;} .mVipList .con .conName h3 {font-size:20px;} .mVipList .con .conName h3 .name {font-size:25px;} .mVipList .con p {height:55px; font-size:18px; line-height:1.5;} .mVipList .btn {padding:20px 0; font-size:20px;} #mLow {padding:85px 0 105px 0; overflow:visible;} #mLow .container {width:1080px; max-width:1080px;} #mLow .mTit {padding:0 0 0 25px;} #mLow .mLowCoin {top:0; width:930px;} #mLow .mLowClover {top:-130px; right:-33px; width:395px;} #mLow .mLowTit {margin-bottom:32px; display:flex; gap:30px;} #mLow .mTit h2 {font-size:40px;} #mLow .mTit p {margin-top:15px; font-size:18px;} #mLow .mTitList {padding:0; width:260px; gap:5px;} #mLow .mTitList li .ico {width:20px; height:20px;} #mLow .mTitList li .text {font-size:20px;} .mLowCounsel {position:relative; border-radius:60px 0; padding:0; box-shadow: 3px 5px 5px rgba(0 0 0 / 20%); z-index:9;} .mLowCounsel .formList {display:flex; align-items:center; width:calc(100% - 190px); margin:0; padding:0; background:#fff;} .mLowCounsel .formList input {padding:35px 25px; font-size:16px; border-radius:0;} .mLowCounsel .formList li label {top:16px;} .mLowCounsel .formList li {width:210px; margin-bottom:0; } .mLowCounsel .formList li:nth-child(1) input {padding:35px 25px 35px 35px;} .mLowCounsel .formList li:nth-child(2) {border-right:1px solid #E0E0E0; border-left:1px solid #E0E0E0;} .mLowCounsel .formList li:nth-child(3) {width:260px;} .mLowCounsel .formList li:nth-child(4) {width:190px;} .mLowCounsel .radioListWarp {margin:0; padding:0 25px 0 0 ; background:none;} .mLowCounsel .radioList { border:1px solid #E0E0E0; border-radius:5px;} /* .mLowCounsel button.sendBtn {bottom:inherit; left:inherit; right:0; top:0; transform:none; padding:0; width:190px; height:94px; display:flex; align-items:center; justify-content:center; font-size:20px;} */ .mLowCounsel button.sendBtn {bottom:inherit; left:inherit; right:180px; top:0; transform:none; padding:0; width:180px; height:94px; border-radius:0; display:flex; align-items:center; justify-content:center; font-size:18px;} .mLowCounsel button.kakaoBtn {bottom:inherit; left:inherit; right:0; top:0; transform:none; padding:0; width:180px; height:94px; border-radius:0; display:flex; align-items:center; justify-content:center; font-size:18px; gap:7px;} .mLowCounsel button.kakaoBtn .ico {width:18px; height:18px;} .mLowCounsel button.sendBtn:hover {background:#23232A; transition:all 0.3s;} .mLowCounsel button.kakaoBtn:hover {background:#f4d81e; transition:all 0.3s;} .mLowCounsel .formAgree {padding:17px 0; border-top:1px solid #e0e0e0;} #mLow .formAgree ul {flex-direction:row; justify-content:center; gap:20px;} #mLow .formAgree .all {margin:0 5px 0 0;} #mLow .formAgree li {gap:15px;} #mLow .formAgree a {position:relative; top:0; opacity:0.7;} #fixCounsel #popup {min-width:auto; min-height:auto; width:100%; height:100%; } #fixCounsel #popup .popupCon {padding:12px 12px 20px 12px; border-radius:0;} #fixCounsel #popup .inContainer {width:100%; max-width:240px; border-radius:0; padding:20px 12px;} #fixCounsel #popup .info .inContainer {padding:18px 24px 15px 26px;} #fixCounsel #popup.counsel .info .tel a {margin-top:0; pointer-events: none; cursor: default;} #fixCounsel #popup .info {margin:0; padding:0; background:transparent; box-shadow:none; border-radius:0;} #fixCounsel #popup.counsel .info .kakao a {width:36px; height:36px;} #fixCounsel #popup.counsel .info .kakao a img { /*width:18px;*/} #fixCounsel #popup.counsel button.sendBtn {padding:12px; font-size:16px; font-weight:600;} #fixCounsel #popup.counsel button.kakaoBtn {margin-top:6px; padding:12px; font-size:16px; font-weight:600;} #fixCounsel #popup.counsel button.kakaoBtn .ico {width:32px; height:32px; } /* FIXCOUNSEL-BTN : 아이콘이 들어가는 카카오 버튼만 높이가 커져 46 vs 53 으로 어긋났다 → 두 버튼 높이를 맞춘다 */ #fixCounsel #popup.counsel button.sendBtn ,#fixCounsel #popup.counsel button.kakaoBtn {display:flex; align-items:center; justify-content:center; padding:0; min-height:48px;} #fixCounsel #popup.counsel button.kakaoBtn .ico {width:22px; height:22px;} #fixCounsel #popup.counsel .formAgree {margin:12px auto;} #fixCounsel .formAgree li {padding:0 10px 0 0;} #fixCounsel .formAgree li.all {padding:0;} #fixCounsel .formAgree .all input + label {font-size:13px; padding:8px 20px 7px 38px;} #fixCounsel .formAgree input + label {padding:0 0 0 32px; font-size:12px;} #fixCounsel .formAgree input + label:before {left:10px; } #fixCounsel .formAgree a {margin:0; font-size:12px;} #fixCounsel {position:fixed; top:137px; right:20px; width:240px; border-radius:45px 45px 0 45px; overflow:hidden; box-shadow:3px 5px 10px rgba(0 0 0 / 12%); transform:scale(0.95); z-index:100;} #fixCounsel .counsel .formList li.inline { border-radius:7px;} #fixCounsel .counsel .formList li.inline input {padding:8px 8px 8px 70px; font-size:13px;} #fixCounsel .counsel .formList li.inline input::placeholder {opacity:0;} #fixCounsel .counsel .formList li.inline label {left:13px;} #fixCounsel .counsel .radioListWarp {padding:11px;} #fixCounsel .counsel .radioListWarp label.tit {position:relative; left:1px; font-size:13px;} #fixCounsel .counsel .radioListWarp .radioList {margin-top:4px;} #fixCounsel .counsel .radioListWarp .radioList input + label {padding:6px; font-size:13px;} #fixCounsel .counsel .info .con {padding:22px 20px 19px 22px; border-radius:0;} #fixCounsel .counsel .info h3 {font-size:14px;} #fixCounsel .counsel .info .tel a {font-size:22px;} #fixCounsel #popup .formWrap {border-radius:0; padding:15px 15px 20px 15px;} #footer {padding:80px 0; background:#E6EBF3;} #footer .gap {display:inline-block;} #footer .copyright .container {display:flex; justify-content:space-between; align-items:stretch; } .copyTxt .tit h3 {font-size:20px;} #footer p {font-size:15px; line-height:2.2;} #footer p.reseved {margin-top:25px;} #footer .termList {width:360px; display:flex; flex-direction:column-reverse; justify-content:space-between;} #footer .termThree {gap:15px 35px; justify-content:end;} #footer .termThree a {font-size:15px; color:#6a7890;} #footer .termAdd {margin:0 0 24px;} #footer .termAdd li {margin-bottom:8px;} #footer .termAdd li:last-child {margin-bottom:0;} #footer .termAdd a {min-height:42px; padding:9px 14px; font-size:14px; background:#d7e0ee;} #footer .ibkMark {position:absolute; bottom:-9px; right:-110px; width:80px;} #term .certificate_img {width:960px; margin:0 auto; } } /* FIXCOUNSEL-BREAKPOINT 우측 고정 상담폼(#fixCounsel)은 1600px 이상에서만 노출한다. 본문 컨테이너가 1236px 고정이라 그보다 좁은 화면에서는 패널이 본문 위로 올라와 차량명·가격·필터·페이지 제목 글자를 덮는다(1400px 실측 : 최대 129px 가림). ※ 1600~1744px 구간에는 전폭 표(마이페이지 결제내역 등)와 최대 70px 정도 겹침이 남는다 → 그쪽은 board.css 의 `body:has(.myMenuWrap) #fixCounsel` 규칙이 따로 막는다 */ @media (max-width: 1599px) { #fixCounsel {display:none;} }