:root { --primary-color: #FF2C2E; --white-color: #FFF; --color-0: #000; --color-2: #222; --color-6: #666; --color-7: #777; --color-9: #999; --color-46: #464646; --color-99: #ccc; } .layerFull {left:inherit; transform:none;} #cousultpage #consultpop .hdTit {transform:translate(-173px, 0);} .winLayWrap .winLayContainer .btnTopWrap {transform:translate(-173px, 0);} /********/ .pc {display:block;} .mobile {display:none;} .br {display:block; width:100%; height:1px;} .mbr {display:none;} .container {margin:0 auto; width:1080px;} /* [TextGNB] 네이트 공통 GNB 2026-08-10 네이트 CSS 가 #textGNB 에 position:absolute; left:0; top:0; width:100% 를 주기 때문에 그대로 두면 뷰포트 전체 폭으로 퍼지고 헤더 위에 겹친다. 래퍼(.container)에 position:relative 를 줘서 absolute 기준을 1080px 컨테이너로 가둔다. */ #nateGnbWrap {position:relative; width:100%; background:#fff;} #nateGnbWrap > .container {position:relative; height:36px;} #nateGnbWrap #textGNB {position:absolute; left:0; top:0; width:100%;} .gapSm {margin:30px auto;} .gapMd {margin:60px auto;} .gapLg {margin:90px auto;} .hTop .container {display:flex; align-items:center; justify-content:space-between; height:75px;} .hTop .logo {position:relative; top:-1px;} .hTop .logo {display:flex; align-items:center; gap:10px; font-size:30px; font-weight:500; color:var(--color-0);} .hTop .logo a img {width:57px;} .hTop .hTopRight {display:flex; align-items:center; gap:70px;} .hTop .hRank {position:relative; width:200px;} .hTop .hRank .hRankDrop {position:absolute; top:0; right:0; width:20px; z-index:9;} .hSearch {position:relative; width:250px; } .hSearch input { width:100%; padding:11px 40px 11px 12px; font-size:13px; font-weight:400; border:1px solid #ddd; border-radius:1px 10px 1px 1px; transition:border-color .15s ease;} /* [검색창] 기본 회색 → 마우스오버/입력(focus) 시 빨강 활성화. 2026-07-29 */ .hSearch:hover input, .hSearch:focus-within input { border-color:#FF2C2E; outline:none;} /* [검색 돋보기 아이콘] 기본 회색(grayscale) → hover/입력 시 원본 빨강(#FF2C2E) 복원, 테두리와 동기화. 2026-07-29 */ .hSearch button img { filter:grayscale(1); transition:filter .15s ease;} .hSearch:hover button img, .hSearch:focus-within button img { filter:none;} .hSearch input::placeholder {color:var(--color-99);} .hSearch button {position:absolute; top:49%; right:10px; transform:translate(0, -50%); width:24px;} .hGnb {height:55px; border-top:1px solid #eeeff0; border-bottom:1px solid var(--color-9);} .hGnbList {display:flex; align-items:center; gap:24px;} .hGnbList a {position:relative; display:block; line-height:55px; font-size:15px; color:var(--color-0); font-weight:400; } .hGnbList a.on {color:#FF2C2E; font-weight:700;} .hGnbList a.on:after {content:''; position:absolute; bottom:1px; left:50%; transform:translate(-50%,0); width:calc(100% + 26px); height:2px; background:#FF2C2E;} .mTit {margin-bottom:40px; display:flex; align-items:center; justify-content:space-between; } .mTit h2 {font-size:24px; font-weight:700; color:var(--color-0); } .mTit a.more {display:flex; align-items:center; gap:4px; font-size:14px; font-weight:400; color:var(--color-9);} .mTit a.more .arrow {width:14px; height:14px;} #adWide a {margin:0 auto; } #detailAd {padding:20px;} #basicAd {margin:48px 0;} #sideLeftAd {position:absolute; top:162px; left: calc(50% - 540px - 20px - 160px); width:160px; z-index:19;} #sideRightAd {position:absolute; top:162px; left: calc(50% + 540px + 24px); width:160px; z-index:19;} .ad a {display:block;} .nTabContent {display:none;} .nTabContent.active {display:block;} .nTabWrap { padding:0 0 25px 0; border-bottom:1px solid #ddd; .nTabBtn {margin-bottom:20px; display:flex; align-items:center; gap:24px; border-bottom:1px solid #E5E5E5;} .nTabBtn .nTab {padding:0 0 14px 0; font-size:16px; font-weight:500; color:#999; border-bottom:2px solid #fff;} .nTabBtn .nTab .pc {display:inline-block;} .nTabBtn .nTab.active {font-weight:700; color:#111; border-bottom:2px solid #111;} } .mNewsContent { .topList {margin-bottom:40px; display:grid; grid-template-columns: 710px 345px; justify-content: space-between;} .topList .big a {display:block; border:1px solid #ddd;} .topList .big .img {height:400px; overflow:hidden;} .topList .big .con {padding:30px 20px;} .topList .big .con h2 {margin-bottom:44px; font-size:24px; font-weight:700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topList .big .con p {font-size:14px; font-weight:400; line-height:1.5; color:#676767; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .sideList .list {border-bottom:1px solid #EDEDED;} .sideList .list:last-child {border-bottom:none;} .sideList .list a {display:grid; grid-template-columns: 1fr 70px; gap:16px; padding:13px 0;} .sideList .list .img {height:70px;} .sideList .list h2 {margin-bottom:8px; font-size:15px; font-weight:400; color:#111; line-height:1.4; overflow: hidden; text-overflow: ellipsis; word-break: break-word; height:42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .sideList .list p {display:none;} .sideList .list .date {font-size:13px; font-weight:400; color:#9d9d9d;} .sideList .list:first-child a {padding:0 0 13px 0; display:flex; flex-direction:column-reverse;} .sideList .list:first-child .img {height:206px;} .sideList .list:first-child h2 {margin-bottom:12px; font-size:18px; font-weight:700; height:51px;} .sideList .list:first-child p {display:block; margin-bottom:8px; font-size:14px; font-weight:400; line-height:20px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} } .basicContent{ .basicList {display:grid; grid-template-columns: repeat(4, 1fr); gap:21px;} .basicList .img {margin-bottom:12px; height:172px;} .basicList h2 {font-size:15px; font-weight:400; line-height:20px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} } /* 최상단 배너 = 이벤트(siteEvent, displayNateMainYN=Y). 2026-08-11 ※ 슬라이더 레이아웃(PC 3노출: 큰1+작은2)은 기존 차량 슬라이더 규격을 그대로 유지한다. 여기서는 배너 문구 스타일만 조정. */ #carHero.heroEvent .swiper-slide .con h2 {font-size:20px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #carHero.heroEvent .swiper-slide.swiper-slide-active .con h2 {font-size:24px;} @media (max-width:960px){ #carHero.heroEvent .swiper-slide .con h2, #carHero.heroEvent .swiper-slide.swiper-slide-active .con h2 {font-size:16px;} } #carHero { margin-top:32px; .swiper {padding:0 10px 10px 10px; margin-right:-10px; margin-left:-10px;} .swiper-slide { width: calc((100% - 48px) / 5);} .swiper-slide.swiper-slide-active { width: calc((100% - 48px) / 5 * 3); /*transition:width .2s ease*/;} .swiper-slide a {position:relative; display:block;} .swiper-slide .img {position:relative; height:420px; overflow:hidden; z-index:2;} .swiper-slide .con {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; padding:20px; color:var(--white-color); z-index:9; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);} .swiper-slide .con h3 {font-size:20px; font-weight:500; line-height:1.4;} .swiper-slide .con h2 {font-size:20px; font-weight:500; line-height:1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .swiper-slide .con .tag {display:none;} .swiper-slide.swiper-slide-active .con {padding:32px;} .swiper-slide.swiper-slide-active .con h3 {font-size:32px; font-weight:600; line-height:1.3;} .swiper-slide.swiper-slide-active .con h2 {font-size:32px; font-weight:600; line-height:1.3;} .swiper-slide.swiper-slide-active .con .tag {display:block; margin-bottom:16px; width:137px; } .control {position:relative; margin-top:24px;} .control .navi {display:flex; align-items:center; gap:12px;} .control .navi .btn {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:100%; box-shadow: 0px 2px 6px 0px #0000000D; cursor:pointer;} .control .navi .btn:hover {box-shadow: 0px 2px 6px 5px #0000000D;} .control .navi .btn img {width:18px;} .control .navi .btn.prev {transform:scaleX(-1);} .control .center {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 300px); display:flex; align-items:center; justify-content:center; gap:40px;} .control .swiper-pagination {position:relative !important; width:fit-content !important; top:0; line-height:0;} .control .swiper-pagination-bullet {background:#d2d2d2; opacity:1;} .control .swiper-pagination-bullet-active {width:24px; background:#FF2C2E; border-radius:20px;} .control .swiper-fraction {font-size:14px; font-weight:500; color:#999; opacity:1;} .control .swiper-fraction .current {font-weight:700; color:#FF2C2E;} } .mPopularList { display:flex; flex-direction:column; gap:12px; .list a {display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:120px; border:1px solid #ddd; color:#1a1a1a;} .list .front {display:flex; align-items:center; width:calc(100% - 310px); } .list .back {display:flex; align-items:center; gap:40px;} .list .img {margin:0 30px; width:140px; height:80px;} .list .rank {width:30px; font-size:24px; font-weight:800;} .list .name h3 {margin-bottom:4px; font-size:18px; font-weight:700; } .list .name p {font-size:14px; font-weight:400; color:#999;} .price {width:115px; } .price p {margin-bottom:4px; font-size:12px; font-weight:400; color:#999;} .price h3 {font-size:20px; font-weight:800;} .btn {display:inline-block; padding:11.5px 24px; font-size:14px; font-weight:600; color:var(--white-color); background:#000;} .list a:hover {border:1px solid #FF2C2E;} .list a:hover .rank {color: #FF2C2E;} .list a:hover .btn {background:#FF2C2E;} } #mEvent { padding:60px 0; background:#F5F5F5;} .eventNone {margin:60px 0; padding:100px 0; text-align:center; border:1px solid #e5e5e5; h2 {margin-bottom:22px; font-size:22px; font-weight:700; color:var(--text-color-2);} a {display:inline-block; padding:12px 32px; color:var(--primary-color); border:1px solid var(--primary-color); font-size:14px; font-weight:600; } a:hover {background:var(--primary-color); color:var(--white-color);} } .mEventList {display:flex; gap:24px; flex-wrap:wrap; /*display:grid; grid-template-columns: repeat(3, 1fr);*/ .list {width:calc(33.33% - 16px);} .thumb {position:relative; aspect-ratio: 1.5 / 1; overflow:hidden;} .tit {margin:16px 0;} .tit h2 {margin-bottom:8px; font-size:18px; font-weight:700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .tit .date {font-size:12px; font-weight:400; color:#999;} .btn {width:100%; padding:13.5px 0; text-align:center; font-size:14px; font-weight:600; color:var(--white-color); background:#000;} .list:hover .btn {background:#FF2C2E;} .list.eventEnd {pointer-events: none; cursor: default; text-decoration: none;} .list.eventEnd .thumb:after {position:absolute; top:0; display: flex; justify-content: center; align-items: center; content:'이벤트 종료'; width:100%; height:100%; color: #fff; background:rgba(0 0 0 / 80%); font-size: 22px;font-weight: 600; } .list.eventEnd .tit {opacity:0.5;} .list.eventEnd .btn {opacity:0.5;} } #board { .mEventList .list .btn {background:#fff; border:1px solid #1A1A1A; color:#1A1A1A;} .mEventList .list:hover .btn {background:#FF2C2E; border:1px solid #FF2C2E; color:var(--white-color);} } #mCounsel { .container {display:grid; grid-template-columns: 1fr 436px; gap:24px;} .formDivide {margin:0 0 60px 0; } .formDivide ul {display:flex; align-items:center;} .formDivide li {width:50%;} .formDivide input {display:none; appearance:none; } .formDivide input + label {display:block; cursor:pointer; padding:32px 0; text-align:center; font-size:20px; line-height:1.4; color:var(--color-9); border:1px solid #EDEDED;} .formDivide input:checked + label {background:#1A1A1A; border:1px solid #1A1A1A; color:var(--white-color);} .formList {gap:30px;} .formList li {gap:0;} .formList label {font-size:20px;} .formList input {padding:24px 12px; border:none; border-bottom:2.5px solid #E5E5E5; border-radius:0; font-size:24px;} .formList input:focus {border-bottom:2.5px solid #1a1a1a;} .form .submitBtn button{padding:18px 0; width:100%; text-align:center; font-size:20px; font-weight:600; transition:all 0.3s;} .formAgree {margin:32px 0 16px 0;} .formAgree ul {flex-direction:row; flex-wrap:wrap; gap:12px 24px;} .formAgree li {gap:8px;} .formAgree a {width:fit-content; padding:3px 8px; font-size:12px; color:#737373; border-radius:4px; background:#F5F5F5;} .formAgree input + label {padding:0 0 0 24px; color:#404040;} .formAgree input + label:before {left:0; background:#fff; border:1px solid #aaa;} .formAgree input:checked + label:before {background:url('/_img/check_black.png') no-repeat center; background-size:cover; } .operate {margin:0 0 30px 0;} } /*footer*/ #footer { padding:40px 0 65px 0; background:#F8F8F8; .logo {width:75px;} .term {margin:20px 0 26px 0; display:flex; align-items:center; color:#838589; } .term h3 {margin-right:27px; font-size:13px; font-weight:700; } .term a {position:relative; padding:0 8px; font-size:12px; line-height:16px; font-weight:400; } .term a.bold {font-weight:700;} .term a:after {content:''; position:absolute; top:2px; right:0; width:1px; height:10px; background:#E1E1E1;} .term a:last-child:after {content:none;} .copy {font-size:12px; line-height:1.5; color:#838589; font-weight:400;} .copyright {margin-top:30px; font-size:12px; line-height:1.5; color:#666; font-weight:400;} } .subGridBg {background:#f5f1f1;} .subGridWrap {width:840px; margin:0 auto; padding:0 0 30px 0; display: flex; justify-content: space-between; align-items: flex-start;} #subGridCon {margin-bottom:-30px; width:500px; background:#fff; box-shadow:3px 3px 15px rgba(0 0 0 / 10%);} #subGridCon .container {width:100%;} #sub.carDetail {background:#f5f1f1;} #sub.carDetail .carDetailWrap {width:840px; margin:0 auto; padding:0 0 30px 0; display: flex; justify-content: space-between; align-items: flex-start;} #carDetailCon {margin-bottom:-30px; width:500px; box-shadow:3px 3px 15px rgba(0 0 0 / 10%);} #carDetailCon .container {width:100%;} #carDetailTop {height:64px; display:flex; align-items:center; background:#fff;} #carDetailTop .logo {position:relative; top:-1px;} #carDetailTop .logo {display:flex; align-items:center; gap:10px; justify-content:center; font-size:30px; font-weight:500; color:#222;} #carDetailTop .logo a img {width:57px;} #fixAd { /*position:fixed; bottom:24px; right:50%; transform:translate(-200px,0);*/ position:sticky; bottom:30px; align-self:flex-end; width:320px; z-index:9;} #fixAd .logo {width:95px; } #fixAd .text h2 {margin:16px 0; font-size:32px; font-weight:400; color:#000; line-height:1.5;} #fixAd .text li {display:flex; align-items:center; gap:4px; font-size:16px; font-weight:300; } #fixAd .text li:first-child {margin-bottom:8px;} #fixAd .text li .point {color:#FF2C2E;} #fixAd .fixAdLink {display:none; margin:40px 0 28px 0;} #fixAd .fixAdLink h3 {margin-bottom:6px; font-size:15px; font-weight:500; color:#919396;} #fixAd .fixAdLink .link {display:flex; align-items:center; gap:14px; } #fixAd .fixAdLink .link li {width:50%; } #fixAd .fixAdLink .link a {display:flex; align-items:center; justify-content:center; width:100%; height:42px; border-radius:4px; border:1px solid #000;} #fixAd .fixVideo {margin-top:40px; width:320px; aspect-ratio: 9 / 16; border-radius:16px; overflow:hidden;} #fixAd .fixVideo video {width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block;} #verify { width:100%; height:100vh; } #verify .container { width:100%; display:flex; align-items:center; justify-content:center; padding:0 20px;} .verifyBox {margin-top:160px; text-align:center; } .verifyBox .ico {margin:0 auto; width:75px;} .verifyBox h2 {margin:40px 0 16px 0; font-size:36px; font-weight:600; line-height:1.3; letter-spacing:-1px; } .verifyBox h4 {font-size:15px; font-weight:500; color:#979797; line-height:1.4; } .verifyBox h5 {font-size:15px; font-weight:500; color:#979797; } .verifyFinCon .btn {position:absolute; bottom:16px; left:50%; transform:translate(-50%,0); width:100%; padding:0 16px; } .verifyFinCon .btn button {width:100%; padding:18px 0; font-size:20px; font-weight:700; color:var(--white-color); background:var(--primary-color); border-radius:8px; } #verify .submitBtn {margin-top:40px;} #verify .submitBtn button {display:block; width:100%; padding:18px 0; font-size:20px; font-weight:700; border-radius:8px;} #verify.verifyConsult .container {position:relative; top:0; left:0; transform:none; display:block;} #verify.verifyConsult .tit {margin:40px 0 24px 0;} #verify.verifyConsult .tit h2 {font-size:30px; font-weight:600; line-height:1.3; letter-spacing:-1px;} #verify.verifyConsult .tit p {margin-top:16px; font-size:14px; font-weight:500; color:#979797;} #verify .formList {margin-right:-20px; margin-left:-20px; margin-bottom:0; padding:20px 20px 30px 20px; /*background:#F0F2F5;*/} #verify #subGridCon {position:relative; height:100vh;} .formList {margin:0 0 30px 0; display:flex; flex-direction:column; gap:16px;} .formList li {display:flex; flex-direction:column; gap:8px;} .formList label {font-size:16px; font-weight:600;} .formList input {width:100%; padding:16px; background:#fff; border:1px solid #D2D2D2; font-size:18px;} .formList p {width:100%; padding:16px; background:#dfdfdf; border:1px solid #d2d2d2; color:#aaa; font-size:18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .formList input::placeholder {color:#b7b7b7;} .formList input:disabled {background:#DFDFDF; color:#A3A3A3;} .formAgree {} .formAgree input {display:none; appearance:none;} .formAgree ul {display:flex; flex-direction:column; gap:7px;} .formAgree li {display:flex; align-items:center; justify-content:space-between;} .formAgree input + label {position:relative; display:block; cursor:pointer; width:100%; padding:0 0 0 48px; font-size:14px; font-weight:400; color:#878787; letter-spacing:0;} .formAgree input + label:before {content:''; position:absolute; top:0; left:18px; width:16px; height:16px; background:url('/_img/check_black.png') no-repeat; background-size:cover; opacity:0.3;} .formAgree input:checked + label:before {opacity:1;} .formAgree input + label .es {color:#171717;} .formAgree .all input + label {display:flex; align-items:end; gap:4px; padding:16px 16px 16px 48px; background:#F5F5F5; border-radius:0;} .formAgree .all input + label .big { font-size:16px; font-weight:600; color:#171717;} .formAgree .all input + label .sm {position:relative; top:-1px;} .formAgree .all input + label:before {content:''; position:absolute; top:13px; left:16px; width:24px; height:24px; border-radius:0; opacity:1; background:url('/_img/check_white.png') no-repeat center; background-color:#DFDFDF; background-size:16px;} .formAgree .all input:checked + label:before {background-color:#171717;} .formAgree:has(.agreement[required]:not(:checked)) ~ .submitBtn button { pointer-events: none; background: #ccc;} .formAgree:not(:has(.agreement[required]:not(:checked))) ~ .submitBtn button { pointer-events: auto; background: #FF2C2E;} .formAgree:not(:has(.agreement[required]:not(:checked))) ~ .submitBtn button:hover { background: #000; transition: all 0.3s;} .submitBtn button{ pointer-events: none; background:#ccc; color:var(--white-color);} .formAgree a {width:24px;} .operate {margin:12px 0; font-size:14px; font-weight:400; color:#aaa;} #verify.verifyConsult .btn {position:absolute; bottom:0; left:0; transform:none; padding:0 24px 24px 24px; background:#fff;} #verify.verifyConsult .formAgree {margin:24px 0 12px 0; padding:0 5px;} /*boardCounsel*/ .boardKcm {position:relative; margin:160px auto 0 auto; width:1080px; padding:64px 60px 45px 60px; background:#1e53f2; .kcm {position:absolute; top:-92px; right:60px; width:335px;} .tit {margin-bottom:40px; color:var(--white-color);} .tit h3 {margin-bottom:12px; font-size:22px; font-weight:500; } .tit h2 {font-size:36px; font-weight:400;} .formlist ul {display:flex; align-items:stretch; gap:16px;} .formlist ul li {width:25%;} .formlist input {width:100%; padding:17.5px 22px; background:#fff; font-size:18px;} form {position:relative;} .submitBtn {position:absolute; top:0; right:0; width:192px; height:56px; } .submitBtn button {width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;} .formAgree:not(:has(.agreement[required]:not(:checked))) ~ .submitBtn button {background:#00254E;} .formAgree {margin-top:22px;} .formAgree ul {flex-direction:row; gap:15px; justify-content:end;} .formAgree li {gap:15px;} .formAgree input + label {padding:0 0 0 22px; font-size:13px; color:var(--white-color);} .formAgree .fc-r {color:#9DDEFF !important;} .formAgree input + label:before {left:0; width:14px; height:14px; background:transparent; border:1px solid #fff;} .formAgree input:checked + label:before {background:url('/_img/ico_check.png') no-repeat center; background-size:cover;} .formAgree a {width:fit-content; padding:3px 8px; font-size:12px; color:var(--white-color); border-radius:4px; background:#1B45C2;} .operate {margin:12px 0 0 0; text-align:right; color:var(--white-color);} } /*termPop*/ .termPop .cover {position:fixed; top:0; left:50%; transform:translate(-50%,0); background:rgba(0 0 0 / 50%); z-index:999; width:100%; height:100vh; backdrop-filter: blur(10px);} .termPopCon {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; z-index:999; max-width:800px; width:80%; height:80%; overflow-y:scroll;} .termPop .closeBtn {position:sticky; top:0; display: flex; justify-content: flex-end; z-index:9;} .termPop .closeBtn button {position:relative; top:15px; right:7px; width:40px;} #termClear {padding:0 20px 40px 20px;} #termClear .title {margin-bottom:40px; padding:16px; font-size:28px; font-weight:600; color:var(--color-2);} #termClear .termCon {padding:0 16px; font-size:14px; color:var(--color-46); font-weight:400; line-height:22px; display:flex; flex-direction:column; gap:24px;} #termClear .termCon h3 { font-size:20px; font-weight:500; color:var(--color-2); line-height:1.5;} #termClear .termCon h3.underline {display:flex; align-items:baseline; gap:5px; padding: 0 0 16px 0; border-bottom:1px solid #e5e5e5;} #termClear .termCon h4 {font-size:14px; font-weight:700;} #termClear .termCon p {margin-bottom:12px; word-break:break-all;} #termClear .listBox {margin-bottom:12px; padding:16px; background:#fafafa; color:var(--color-7); border-radius:16px; line-height:20px;} #termClear .listBox .list {display:flex; flex-direction:column; gap:12px; } #termClear .listBox .list li {position:relative; display:flex; align-items:baseline; gap:3px;} #termClear .listBox .tit {font-weight:700; color:var(--color-46); } #termClear .listBox .num {/*position:relative; top:-2px; margin:0 4px;*/ font-weight:700; color:var(--color-46); } #termClear .listBox .list.column {gap:12px;} #termClear .listBox .list.column li {flex-direction:column; gap:6px;} #termClear .listBox .list.dot .text {position:relative; padding:0 0 0 15px;} #termClear .listBox .list.dot .circle {position:absolute; top:9px; left:4px; display:block; width:4px; height:4px; border-radius:100%; background:var(--color-7);} #termClear .gridBox {margin-bottom:24px; display: grid; grid-template-columns: 25% 50% 25%; width: 100%;} #termClear .gridBox .cell { padding: 16px; border: none; position: relative; display:flex; align-items:center; justify-content:center; text-align: center; word-break:break-all;} #termClear .gridBox .cell::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: #ccc; } #termClear .gridBox .cell::before {content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #ccc;} #termClear .gridBox .cell:nth-child(3n)::before { display: none; } #termClear .gridBox .cell:nth-last-child(-n+3)::after { display: none; } #termClear .gridBox .cell.gbTop {background:#f5f5f5; color:var(--color-2); font-size:16px; font-weight:700; border-top:2px solid #000;} /*carDetail*/ #sub.carDetail {/*padding:0 0 15px 0;*/} #sub.carDetail .container {padding:0 16px;} .carviewtopLogo {position:fixed; top:0; /*left:50%; transform:translate(-50%, 0);*/ z-index:99; height:72px; width:100%; max-width:500px; background:#fff; display:flex; align-items:center; justify-content:center; } .carviewtopLogo .logo {width:185px; } .nvBar {display:block; width:100%; height:18.18px; background:#F0F2F5;} .nvBar.mgWide {width:calc(100% + 40px); position:relative; left:-20px;} #cdTop {background: linear-gradient(180deg, #F5F5F5 0%, #FFF 56.53%, #FFF 62.92%, #F9F9F9 86.54%, #F5F5F5 100%);} #cdTop .container {padding:0 !important;} #cdTop .name {padding:14px 16px; background:#fff; font-size:18px; font-weight:700; color:#000; text-align:center;} #cdTop .carPic {position:relative; width:100%; height:260px; display:flex; align-items:end; justify-content:center;} #cdTop .carPic .img {height:80%;} #cdTop .carPic .brand {position:absolute; top:16px; left:16px; width:76px;} #cdContract {margin:16px 0; background:#F0F2F5; padding:24px 0;} #cdContract .container {display:grid; gap:24px;} #cdContract .box .tit {margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;} #cdContract .box .tit .select {display:flex; align-items:center; cursor:pointer;} #cdContract .box .tit .select .ico {width:24px;} #cdContract .box .tit h4 {font-size:16px; font-weight:700;} #cdContract .box .tit .deposit {display:flex; align-items:center; gap:4px;} #cdContract .box .tit .deposit .ico {width:16px;} #cdContract .box .tit .deposit .num {width:font-size:14px; font-weight:500; color:#000;} .inputList {display:flex; gap:8px; align-items:center; justify-content:center;} .inputList .list {width:25%;} .inputList.dv2 .list {width:50%;} .inputList.dv3 .list {width:33.33%;} .inputList input {display:none; appearance:none;} .inputList input + label {display:block; cursor:pointer; padding:14px 0; text-align:center; font-size:16px; font-weight:600; background:#fff; border-radius:8px; border: 1px solid #E5E5E5; color:#737373; } .inputList input:checked + label { border-color: #FF2C2E; box-shadow: inset 0 0 0 1px #FF2C2E; color:#FF2C2E;} #cdPrice {padding:16px 0; background:#fff;} #cdPrice .container {display:flex; align-items:center; justify-content:space-between;} #cdPrice .capital {height:30px;} #cdPrice .price {text-align:right; } #cdPrice .price h5 {margin:0 0 2px 0; font-size:12px; font-weight:500; color:#A3A3A3; } #cdPrice .price h2 {display:flex; align-items:center; gap:3px; font-size:14px; color:#000; font-weight:400;} #cdPrice .price h2 .num {font-size:24px; font-weight:900; letter-spacing:-1px;} #cdBtn {background:#fff;} #cdBtn {padding:16px 0;} #cdBtn button {display:block; width:100%; padding:18px 0; border-radius:8px; font-size:20px; font-weight:700; background:#000; color:var(--white-color); text-align:center;} #cdBtn button.next {background:#FF2C2E;} #cdBtn button.next:hover {background:#000; transition:all 0.5s;} #cdModel {margin:16px 0;} #cdModel .cdModelBox {padding:16px 24px; background:#FAFAFA; border-radius:8px; border:1px solid #E5E5E5; } #cdModel .cdModelBox .cdModelText {margin-top:16px; font-size:14px; font-weight:500; color:#737373; line-height:1.4;} #cdModel .cdModelBox .cdModelSelect {padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border-radius:8px; border:1px solid #e5e5e5; cursor:pointer;} #cdModel .cdModelBox .cdModelSelect .gradeText {width:calc(100% - 34px); font-size:14px; font-weight:700; line-height:1.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cdModel .cdModelBox .cdModelSelect .arrow {width:24px;} #cdSelectPop {position:fixed; bottom:0; left:50%; transform: translate(-50%, 100%); width:100%; height:100vh; z-index:29; } #cdSelectPop.show { transform: translate(-50%, 0);} #cdSelectPop .cover {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; height:100vh; background:rgba(0 0 0 / 40%);} #cdSelectPop .cdSelectPopCon {position:absolute; bottom:0; left:50%; transform: translate(-50%, 100%); transition: transform .3s ease; width:100%; max-width:500px; height:78vh; padding:40px 16px; background:#fff; border-radius:16px 16px 0 0;} #cdSelectPop.show .cdSelectPopCon { transform: translate(-50%, 0);} #cdSelectPop .cdSelectPopCon .closeBar {position:absolute; top:12px; left:50%; transform:translate(-50%,0); width:60px; height:4px; border-radius:50px; background:#d9d9d9; cursor:pointer;} #cdSelectPop .cdSelectPopCon .tit {margin-bottom:24px; } #cdSelectPop .cdSelectPopCon .tit h2 {font-size:24px; font-weight:700;} #cdSelectPop .fuelTabs {margin-bottom:24px; } #cdSelectPop .fuelTabs ul {display:flex; align-items:center; flex-wrap:wrap; gap:4px;} #cdSelectPop .fuelTabs .list input {display:none; appearance:none;} #cdSelectPop .fuelTabs .list input + label {display:inline-block; padding:11px 16px; font-size:12px; font-weight:500; color:#404040; border:1px solid #E5E5E5; border-radius:50px; letter-spacing:0; cursor:pointer; } #cdSelectPop .fuelTabs .list input:checked + label {background:#000; color:var(--white-color); font-weight:700; border:1px solid #000;} #cdSelectPop .tabsCon {width:100%; height:calc(100% - 115px); overflow-y:scroll;} #cdSelectPop .tabsCon::-webkit-scrollbar { width: 3px;} #cdSelectPop .tabsCon::-webkit-scrollbar-track { background:#f1f1f1; border-radius: 10px;} #cdSelectPop .tabsCon::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px;} #cdSelectPop .gradeCon {margin-bottom:8px;} #cdSelectPop .gradeTit {display:flex; justify-content: space-between; align-items: center; gap:10px; padding: 14px 12px; cursor: pointer; background:#FAFAFA; border:1px solid #E5E5E5; border-radius:8px;} #cdSelectPop .gradeTit h3 { width:calc(100% - 34px); font-size:14px; line-height:1.3; font-weight: 700; color:#171717;} #cdSelectPop .gradeTit .arrow {width:24px; transform: rotate(0); transition: transform .3s ease;} #cdSelectPop .gradeList { display: none; padding: 16px 8px 40px 8px;} #cdSelectPop .gradeList .list {margin-bottom:16px;} #cdSelectPop .gradeList .list:last-child {margin-bottom:0;} #cdSelectPop .gradeList input {display:none; appearance:none;} #cdSelectPop .gradeList input + label {position:relative; display:flex; align-items:baseline; justify-content:space-between; padding:0 0 0 24px; cursor:pointer;} #cdSelectPop .gradeList input + label h3 {font-size:14px; font-weight:500; width:calc(100% - 124px);} #cdSelectPop .gradeList input + label .won {font-size:12px; font-weight:500; color:#737373;} #cdSelectPop .gradeList input + label:before {content:''; position:absolute; top:0; left:0; width:16px; height:16px; border-radius:100%; border:1px solid #A3A3A3; background:#fff;} #cdSelectPop .gradeList input:checked + label:before {content:''; position:absolute; top:0; left:0; width:16px; height:16px; border-radius:100%; border:1px solid #FF2C2E; background:#FF2C2E;} #cdSelectPop .gradeList input:checked + label:after {content:''; position:absolute; top:6px; left:6px; width:6px; height:6px; border-radius:100%; background:#fff;} #cdSelectPop .gradeCon.active .gradeTit {border:1px solid #171717; } #cdSelectPop .gradeCon.active .gradeTit .arrow { transform: rotate(-180deg); } #cdSelectPop .gradeCon.active .gradeList {display: block;} @media (min-width: 960px) { #header.scroll {transform:translate(-173px, 0); } #cdSelectPop .cdSelectPopCon {transform:translate(-50%, 100%) translateX(170px);} #cdSelectPop.show .cdSelectPopCon {transform:translate(-50%, 0) translateX(170px);} } /*news*/ #moreView { /* 카드뉴스 썸네일 2026-08-10 원본이 600x750 세로형인데다 제목이 이미지 안에 인쇄돼 있다. 고정 height:150px + object-fit:cover 조합이면 하단 53%가 잘려 문구 둘째 줄이 사라진다. → 원본 비율(4:5)을 유지해 전체가 보이게 한다. */ .basicList .img {height:auto; aspect-ratio:600 / 750;} .basicList .img img {width:100%; height:100%;} /* 이미지 안 문구와 하단 제목이 완전히 같은 내용이라 중복이다. 썸네일 쪽 문구는 원본 이미지라 뺄 수 없으므로 하단 제목을 숨긴다. (제목 텍스트는 img alt 로 제공 → 접근성·검색 유지) */ .basicList h2 {display:none;} } #realTimeTrand { background:#333333; .container {display:flex; align-items:center; gap:40px; } .tit {font-size:15px; color:var(--white-color);} .realTimeSwiper {width:calc(100% - 120px);} .realTimeTrandList {height:56px;} .realTimeTrandList a { display:flex; align-items:center; gap:8px; height:56px; color:var(--white-color);} .realTimeTrandList a .con {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } .includeCarList { .listWarp {display:flex; align-items:center; gap:24px;} .listWarp .list {width:33.33%;} .list a {display:block; border:1px solid #E5E5E5;} .list .car {display:flex; align-items:center; justify-content:center; height:180px; background:#F8F8F8;} .list .con {padding:20px; } .list .tag {margin-bottom:12px; display:inline-block; padding:5px 8px; border:1px solid #e5e5e5; font-size:12px; font-weight:600; border-radius:4px;} .list .subject {font-size:18px; font-weight:600; line-height:1.5; height:55px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .list .bar {margin:12px 0; width:100%; height:1px; background:#E5E5E5;} .list .name h4 {margin-bottom:5px; font-size:13px; font-weight:400; color:#666;} .list .name .price {font-size:18px; font-weight:600; color:#1A1A1A;} .list .btn {margin-top:12px; width:100%; padding:13px 0 15px 0; border:1px solid #E5E5E5; text-align:center; font-size:14px; font-weight:600;} .list:hover a {border:1px solid #FF2C2E;} .list:hover .btn {border:1px solid #FF2C2E; background:#FF2C2E; color:var(--white-color);} } .includeCarBtn a { margin-top:40px; padding:21.5px 24px; display:flex; align-items:center; justify-content:space-between; background:#F5F5F5; border:1px solid #F5F5F5;} .includeCarBtn a .text {font-size:16px; font-weight:600; color:#333;} .includeCarBtn a .btn {display:inline-block; padding:10px 16px; font-size:14px; font-weight:600; color:var(--white-color); background:#FF2C2E;} .includeCarBtn a:hover .btn {background:#000;} .includeCarBtn a:hover {border:1px solid #000;} #pageNewsTop { .container {display:grid; grid-template-columns: 1fr 480px;} .big a {position:relative; color:var(--white-color);} .big .thumb {height:421px;} .big .con {position:absolute; bottom:0; left:50%; transform:translate(-50%, 0); width:100%; height:200px; padding:32px 40px; display:flex; flex-direction:column; justify-content:end; gap:10px; background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);} .big .con h2 {font-size:28px; font-weight:700; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .big .con .date {display:none;} .sideList .list {background:#1a1a1a;} .sideList .list a {position:relative; color:var(--white-color); opacity:0.3;} .sideList .list.active a {opacity:1;} .sideList .list:hover a {opacity:1;} .sideList .list a .thumb {height:105px; overflow:hidden;} .sideList .list a .con {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; padding:12px 16px; display:flex; align-items:end; justify-content:space-between; overflow:hidden; background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);} .sideList .list a .con .num {position:relative; top:18px; left:-11px; font-size:60px; font-weight:700; opacity:0.6; font-style: italic;} .sideList .list a .con .text {width:325px;} .sideList .list a .con .text h2 {font-size:18px; font-weight:600; line-height:1.4; text-align:right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .sideList .list a .con .text p {font-size:18px; font-weight:600; line-height:1.4; text-align:right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } #mNewsTab{ .nTabBtn {margin:0;} .nTabWrap {padding:0; border:none;} .sideCon {padding:30px 20px; border-left:1px solid #E7E7E7;} .majorCon {padding:30px 30px 0 0;} .majorCon .tit {padding:0 0 18px 0; margin-bottom:18px; font-size:14px; font-weight:700; color:#222; border-bottom:1px solid #E7E7E7;} } #newsContentGrid {display:grid; grid-template-columns: 710px 340px; gap:30px;} #newsSearchResult .sideCon {padding:0;} .sideCon {padding:30px 0; /* border-left:1px solid #E7E7E7; position: sticky; top: 0; align-self: start;*/ } .sideCon .bar {display:block; width:100%; height:1px; background:#EEEEEE;} .sideCon .ad {margin:40px 0;} .surgeCar { .title {margin-bottom:18px; font-size:14px; font-weight:700; color:#222;} .surgeList {margin-bottom:40px;} } .surgeList { .listWrap {display:flex; flex-direction:column; gap:10px;} .list a {display:flex; align-items:center; gap:6px; font-size:14px; color:#222; font-weight:400;} .list:first-child a {font-weight:700;} .list:first-child a .num {color:#367DFF;} .list:nth-child(6) {margin-top:16px;} .list a .num {width:20px; text-align:center; font-weight:700;} .list a .text {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .list a .rank {display:flex; align-items:center; gap:2px; justify-content:center; width:24px; font-size:11px; font-weight:400; } .list a .rank .ico {width:10px; height:10px; background:url('/_img/surge_ico.png') no-repeat; background-position:0 -20px;} .list a .rank.up .ico {background-position:1px -10px;} .list a .rank.down .ico {background-position:1px 2px;} .list a .rank.new .ico {background-position:2px -31px;} } #surgeCarUp { .title {margin-bottom:20px; font-size:22px; font-weight:700;} .surgeList {padding:16px 20px; background:#F8F8F8; .listWrap {gap:0;} .list a {border-bottom:1px solid #d2d2d2; padding:12px 8px; font-size:15px;} .list a .rank {display:none;} .list:nth-child(6) {margin-top:0;} .list:nth-child(-n+5) a .num { color:#FF2C2E ;} } } .majorConGrid {margin-bottom:60px; display:grid; grid-template-columns:370px 290px; gap:18px;} .majorListBasic { .listWrap {display:flex; flex-direction:column; gap:21px;} .list .con h2 {font-size:15px; font-weight:700; color:#222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .list .con p {display:none;} .list .con h5 {display:none;} .list:first-child {padding:3px 0 0 0; margin-bottom:18px;} .list:first-child .con h2 {font-size:20px; font-weight:700; } .list:first-child .con p {margin:9px 0 15px 0; display:block; font-size:14px; font-weight:400; color:#777; line-height:1.5; height:63px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;} .list:first-child .con h5 {display:block; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; color:#999;} } .majorListThumb { .listWrap {display:flex; flex-direction:column; gap:24px;} .list a {display:grid; grid-template-columns:136px 1fr; gap:15px; align-items:center;} .list .img {height:87px;} .list .con h2 {margin-bottom:5px; font-size:14px; line-height:1.4; font-weight:700; color:#222; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} .list .con p {font-size:13px; font-weight:400; color:#777; line-height:1.4; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} } .basicRowContent { .listWrap {display:grid; gap:20px;} .list a {display:grid; grid-template-columns:143px 1fr; gap:15px;} .list .img {height:90px;} .list .con {width:537px;} .list .con h2 {font-size:16px; font-weight:700; color:#222; line-height:1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .list .con p {margin:5px 0 13px 0; font-size:14px; font-weight:400; color:#777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .list .con h5 {display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; color:#999;} } #pageNewsViewGrid { .container {display:grid; grid-template-columns:1fr 330px; gap:32px;} } .sidePopularCar .title {margin-bottom:15px; font-size:17px; font-weight:700; } .sidePopularCar .popularCarList {margin-bottom:40px;} .popularCarList { .listWrap {display:flex; flex-direction:column; gap:18px;} .list a {position:relative; padding:16px 20px; background:#FAFAFA; display:grid; grid-template-columns:112px 1fr; align-items:center; } .list a .rank {position:absolute; top:16px; left:20px; font-size:18px; font-weight:600; color:#1a1a1a; z-index:2; } .list a .thumb {position:relative; left:-10px;} .list a .con .name {font-size:15px; font-weight:400; line-height:1.4; overflow: hidden; text-overflow: ellipsis; word-break: break-word; height:43px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .list a .con .price {margin:4px 0 12px 0; font-size:15px; font-weight:600;} .list a .con .btn {width:100%; padding:8px 0; text-align:center; font-size:12px; font-weight:400; color:var(--white-color); background:#666;} .list a:hover .btn {background:#FF2C2E;} } .detailCon {padding:30px 0;} .detailCon .pdSm {padding:20px;} #detailPriceCar .title {margin-bottom:12px; font-size:22px; font-weight:700;} .priceCarList { .tabList {margin-bottom:24px; display:flex; align-items:center; border-bottom:1px solid #F5F5F5;} .tabList .list {width:25%;} .tabList .list input {display:none; appearance:none;} .tabList .list input + label {display:block; padding:16px 0; font-size:15px; border-bottom:2px solid #fff; font-weight:500; text-align:center; cursor:pointer;} .tabList .list input:checked + label {font-weight:700; border-bottom:2px solid #222;} .tabList .list input + label:hover {font-weight:700;} .carListWarp {display:flex; flex-wrap:wrap; gap:24px 12px; height:430px; overflow:hidden;} .carListWarp .carList {width:calc(33.33% - 8px);} .carList .thumb {display:flex; align-items:center; justify-content:center; height:140px; background:#F8F8F8;} .carList .con {padding:12px 4px; } .carList .con h3 {margin-bottom:6px; font-size:17px; font-weight:600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList .con .price {display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#333;} .ppinfo {margin:20px 0 0 0; padding:12px 16px; background:#F8F8F8;} } #detailHighContent .title {margin-bottom:15px; font-size:22px; font-weight:700;} .highContent { .listWarp {display:flex; flex-wrap: wrap; justify-content:space-between;} .list {width:100%;} .list a {display:block; padding:11px 0; border-bottom:1px solid #F5F5F5;} .list .img {display:none;} .list .con { display:flex; align-items:center; gap:12px; } .list .con .num {width:15px; font-size:22px; font-weight:700; text-align:center;} .list .con h3 {font-size:15px; font-weight:500; line-height:1.6; word-break:break-all;} .list:nth-child(-n+2) { width: calc((100% - 20px) / 2);} .list:nth-child(-n+2) a {padding:0 0 11px 0;} .list:nth-child(-n+2) .con {align-items:flex-start;} .list:nth-child(-n+2) .img {display:block; margin-bottom:10px; height:210px; overflow:hidden;} .list:nth-child(-n+2) .num {color:#FF2C2E;} } #newsArticle { .tit {padding:0 0 20px 0; margin-bottom:20px; border-bottom:1px solid #F5F5F5;} .tit .subject {margin-bottom:10px; font-size:22px; line-height:1.5; font-weight:700; } .tit .info {display:flex; align-items:center; font-size:12px; font-weight:400; color:#999;} .tit .info .bar {display:inline-block; margin:0 8px; width:1px; height:10px; background:#999;} .text {margin:20px 0; } .text h3 {font-size:22px; font-weight:700; } .text p {margin:20px 0; font-size:18px; line-height:1.4; font-weight:400;} .ad {margin:40px 0; } .ad a {display:block; margin:0 auto; width:670px;} .newsEndBy {border-top:1px solid #D2D2D2; padding:14px; display:flex; align-items:center; justify-content:end;} .newsEndBy .logo {width:fit-content; height:12px;} p { text-align: justify; font-size: initial; line-height: 1.5em; margin-bottom: 1.5em; } img { margin-bottom: 1.5em; } } .relativeNews { margin:46px 0 26px 0; .listWrap {display:flex; flex-direction:column; gap:10px;} .list a {position:relative; padding:0 0 0 8px; font-size:15px; font-weight:400; color:#116BF1; } .list a:before {content:''; position:absolute; top:7px; left:0; width:4px; height:4px; border-radius:100%; background:#116BF1; border-radius:100%; } .list a:hover {text-decoration:underline;} } .pageNewsResult #newsContentGrid {margin:50px 0 0 0;} .pageNewsResult #newsContentGrid .sideCon {padding:0 0 30px 0;} .resultContent { .tit {padding:0 0 25px 0; margin:0 0 40px 0; border-bottom:1px solid #D6D6D6;} .tit h2 {font-size:17px; font-weight:500;} #ad {margin:40px 0;} .pgWrap {margin:70px 0 30px 0; display:flex; align-items:center; justify-content:space-between;} .pgWrap .pgAll {font-size:12px; font-weight:400; color:#666; letter-spacing:0;} .pagination button.active {background:#FF2C2E; border:1px solid #FF2C2E;} .pagination button {color:#666;} } #newsSearchResult { .mTit {padding:0 0 25px 0; border-bottom:1px solid #D6D6D6;} .mTit h2 {font-size:17px; font-weight:400;} } .resultList { margin-top:20px; a {display:grid; grid-template-columns:143px 1fr; gap:15px;} .img {height:90px;} .con {width:537px;} .con h2 {font-size:16px; font-weight:700; color:#222; line-height:1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .con p {margin:5px 0 13px 0; font-size:14px; font-weight:400; color:#777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .con h5 {display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; color:#999;} } .result-con { display:flex; flex-direction:column; gap:17px; .list {position:relative; display:flex; align-items:flex-direction; border:1px solid #E5E5E5; } .list .img {width:274px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #E5E5E5 0%, #FFFFFF 100%);} .list .img img {position:relative; top:10px;} .list .list-wrap {width:436px; padding:18px;} .list-wrap h3 {margin-bottom:4px; display:flex; align-items:center; gap:6px; } .list-wrap h3 .brand img {height:24px;} .list-wrap p {display:flex; font-size:13px; font-weight:400; color:#333;} .list-wrap p .bar {position:relative; top:2px; margin:0 6px; display:inline-block; width:1.5px; height:10px; background:#E5E5E5; } .list-wrap .info {margin:12px 0;} .list-wrap .info p {color:#686868; line-height:1.4;} .price {display:flex; flex-direction:column; gap:6px;} .price li {list-style:none; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:500; color:#4D4D4D; } .price .capital_img img {position:relative; top:2px; width:fit-content; height:10px;} .price .subject {display:flex; align-items:center; gap:6px;} .price .won { display:flex; align-items:baseline; gap:3px; color:var(--color-0);} .price .won .num {font-size:17px; font-weight:700;} .disbtn .btn {margin-top:12px;display:flex; align-items:center; gap:6px; } .disbtn .btn a {width:50%; padding:12px 0; text-align:center; border:1px solid #DADADA; color:#686868; font-size:14px; font-weight:500;} .disbtn .btn a:hover {border:1px solid var(--primary-color); background:var(--primary-color); color:var(--white-color); } .ab-icon {position:absolute; top:11px; left:11px;display:flex; align-items:center; gap:5px; } .ab-icon span {display:inline-block; padding:6px 9px 6px 9px; font-size:11px; line-height:1; font-weight:500; color:var(--white-color); background:var(--color-2); border-radius:30px;} .ab-icon span.pm {background:var(--primary-color);} .ab-right {position:absolute; top:15px; left:226px;display:flex; align-items:center; gap:5px; } .ab-right .ev {width:30px;} } .newsSearchNone { padding:100px 0; border:1px solid #E5E5E5; text-align:center; .ico {margin:0 auto 24px auto; display:flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:100%; background:#F9F9FA; } .ico img {width:36px;} h2 {margin-bottom:12px; font-size:22px; font-weight:700; color:var(--color-2);} p {font-size:14px; font-weight:400; line-height:1.4; color:var(--color-7);} .btn {margin-top:24px;} .btn a {display:inline-block; padding:12px 32px; color:var(--primary-color); border:1px solid var(--primary-color); font-size:14px; font-weight:600; } .btn a:hover {background:var(--primary-color); color:var(--white-color);} } #carIndexTop {padding:40px 0;} #carIndexTop .container {display: grid; grid-template-columns: 756px 300px; justify-content:space-between; } .carIndexHero { position:relative; .swiper-slide a {position:relative;} .swiper-slide .img {position:relative; height:400px; overflow:hidden; z-index:2;} .swiper-slide .con {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; padding:40px; color:var(--white-color); z-index:9;} .swiper-slide .con h3 {font-size:32px; font-weight:600; line-height:1.3;} .swiper-slide .con h2 {margin:0 0 12px 0; font-size:32px; font-weight:600; line-height:1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .swiper-slide .con p {font-size:18px; font-weight:400;} .swiper-slide .num {position:absolute; top:20px; left:20px; font-size:120px; color:var(--white-color); opacity:12%; font-style:italic; font-weight:600; z-index:9;} .btrnWrap {position:absolute; bottom:34px; right:32px; width:84px; display:flex; align-items:center; justify-content:space-between; z-index:19;} .btrnWrap .btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:100%; cursor:pointer; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);} .btrnWrap .btn img {width:17px;} .btrnWrap .btn.prev {transform:scaleX(-1)} .btrnWrap .btn:hover {background: rgba(0, 0, 0, 0.5);} } .carIndexYoutube .con { padding:16px; background:#f8f8f8; .logoWrap {display:flex; align-items:center; gap:12px;} .logoWrap .logo {width:32px; height:32px; border-radius:100%; overflow:hidden;} .logoWrap h2 {font-size:20px; font-weight:600; color:#171717;} p {margin:12px 0 44px 0; font-size:14px; font-weight:500; line-height:1.4; color:#404040;} .tagWrap {display:flex; align-items:center; gap:8px;} .tagWrap .tag {display:inline-block; padding:8px 16px; border-radius:30px; background:#fff; border:1px solid #E5E5E5; color:#404040; font-size:12px; font-weight:500; } } .carTpye { .listWarp {display:flex; align-items:center; gap:32px; border-top:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5; } .list input {display:none; appearance:none;} .list input + label {display:block; cursor:pointer; padding:23px 0; font-size:15px; font-weight:600; color:#666; border-bottom:2px solid #fff; letter-spacing:0;} .list input:checked + label {color:#FF2C2E; border-bottom:2px solid #FF2C2E;} } .popularResult {position:relative;} .resultSum {position:absolute; top:-43px; right:0; display:flex; align-items:center; gap:24px; width:166px; justify-content:space-between; .total {font-size:14px; font-weight:500; color:#666;} .resultSelect {position:relative;} .resultSelect::after {content:''; position:absolute; top:50%; right:0; transform:translate(0, -50%); width:20px; height:20px; background:url('/_img/select_arrow.png') no-repeat center; background-size:cover;} .resultSelect select { padding:0 20px 0 0; width:90px; font-size:14px; font-weight:500; color:#1a1a1a; cursor:pointer;} } .popularResultCon { .list a {position:relative; padding:32px 12px; display:flex; align-items:center; gap:24px; justify-content:space-between; border-bottom:1px solid #E5E5E5;} .list .rank {position:absolute; top:60px; left:0; font-size:100px; font-weight:600; color:#f5f5f5; font-style: italic; z-index:1;} .list .car {position:relative; width:334px; height:224px; overflow:hidden; z-index:2;} .list .car img {position:absolute; left:-15px; width:auto; height:224px;} .list .con {display:grid; grid-template-columns: 1fr 200px; width:688px; } .list .con .tit { display:flex; align-items:center; gap:8px;} .list .con .tit h3 {font-size:15px; font-weight:500; color:#666;} .list .con .tit .mark {display:inline-block; padding:4px 8px; font-size:12px; font-weight:600; color:#FF5252; border:1px solid #E5E5E5; border-radius:4px;} .list .con .name {margin:14px 0; font-size:28px; font-weight:700; color:#1a1a1a;} .list .con .info { display:flex; align-items:center; gap:12px;} .list .con .info .month {display:flex; align-items:center; gap:4px;} .list .con .info .month span {display:inline-block; padding:6px 8px; font-size:12px; font-weight:500; color:#333; background:#F5F5F5; } .list .con .info p {display:flex; align-items:center; font-size:13px; font-weight:500; color:#666;} .list .con .info .bar {margin:0 6px; display:inline-block; width:1px; height:12px; background:#666; opacity:0.5;} .list .price {position:relative; top:16px; text-align:right;} .list .price .del {font-size:14px; font-weight:500; color:#aaa;} .list .price h2 {margin:4px 0 14px 0; display:flex; align-items:center; justify-content:end; font-size:28px; font-weight:700; color:#1a1a1a;} .list .price h2 .num {margin:0 0 0 4px;} .list .price .btn {display:inline-block; padding:12px 20px; font-size:14px; font-weight:600; color:var(--white-color); border-radius:4px; background:#1A1A1A; letter-spacing:0;} .list a:hover .price .btn {background:#FF2C2E;} } #MeritFourBn { background:url('/_img/four_bn_bg.png') no-repeat center; background-size:cover; .listWrap {display:flex; align-items:center; gap:16px; justify-content:end;} .list {width:190px; height:180px; display:flex; align-items:center; gap:8px; flex-direction:column; justify-content:center; color:var(--white-color); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3);} .list h5 {font-size:16px; font-weight:500;} .list h2 {font-size:32px; font-weight:500; line-height:1; letter-spacing:0;} } /*event*/ #svEvent {margin:32px 0;} #board.event .tabs ul { margin:0 0 20px 0; padding:0; border-bottom:1px solid #ddd; justify-content:flex-start; gap:40px; .list a {display:block; padding:16px 0; font-size:16px; font-weight:500; color:#999; border-bottom:2px solid #fff;} .list.active a {font-weight:700; color:#FF2C2E; border-bottom:2px solid #FF2C2E;} } .borderBottom {display:block; width:100%; height:1px; background:#aaa;} @media (max-width:960px){ .pc {display:none;} .mobile {display:block;} .br {display:none; } .mbr {display:block; width:100%; height:1px;} .container {padding:0 16px; width:100%;} .gapSm {margin:24px 0;} .gapMd {margin:32px 0;} .mTit {margin-bottom:16px; } .mTit h2 {font-size:20px; } .mTit p {margin-top:5px; font-size:13px; font-weight:400; color:var(--color-7);} .mTit a.more { font-size:13px;} .mTit a.more .arrow {width:13px; height:13px;} .operate {font-size:13px;} #adWide a {width:100%;} #adWide .container {padding:0; overflow:hidden;} #detailAd {margin:20px 0; padding:0;} #adWide.gapLg {margin:24px 0;} #basicAd {margin:24px 0;} #verify.verifyConsult .container {padding: 0 16px;} #verify .submitBtn {margin:0; padding:20px 0; } #verify .submitBtn button {border-radius:0;} .verifyFinCon {height:calc(100vh - 82px);} .verifyBox {margin-top:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; padding:0 16px;} .verifyBox .ico { width:45px;} .verifyBox h2 {margin:22px 0 12px 0; font-size:22px; } .verifyBox h4 {font-size:16px; line-height:1.3; } .verifyBox h5 {font-size:16px; } .verifyFinCon .btn button { border-radius:0; } .formAgree input + label {padding:0 0 0 40px; font-size:13px;} .formAgree input + label:before {width:14px; height:14px;} .hTop .container {height:58px;} .hTop .logo a img {width:20px;} .hTop .logo a {gap:12px; font-size:25px;} .hSearchLink {cursor:pointer; width:26px; } .hSearchWrap {position:fixed; top:0; left:0; width:100%; } .hSearch {width:100%; background:#fff; height:59px; border-bottom:1px solid #FF2C2E;display:flex; align-items:center; gap:10px; padding:0 20px; } .hSearch form {width:calc(100% - 36px);} .hSearch input {padding:10px 0; width:calc(100% - 36px); font-size:20px; border:none;} .hSearch button {width:26px; right:20px;} .hSearch .back {width:26px;} .hGnb {height:48px;} .hGnbList a {font-size:17px; line-height:48px;} #carHero.gapSm {margin:0;} #carHero { margin:0; overflow-x:hidden; .container {padding:0;} .swiper {padding:0 10px;} .swiper-slide .img {height:220px;} .swiper-slide.swiper-slide-active .con {padding:20px 16px;} .swiper-slide.swiper-slide-active .con h3 {font-size:22px; line-height:1.3;} .swiper-slide.swiper-slide-active .con h2 {font-size:22px; line-height:1.3;} .swiper-slide.swiper-slide-active .con p {position:relative; left:1px; margin-top:7px; font-size:14px; font-weight:400;} .control {margin-top:12px; display:block; height:4px;} .control .navi {display:none;} .control .swiper-fraction {display:none;} .control .center {width:100%;} .control .swiper-pagination-bullet.swiper-pagination-bullet-active {width:20px;} .control .swiper-pagination-bullet {margin:0 3px; width:4px; height:4px;} } .mPopularList {gap:8px; .list a { position:relative; padding:0 24px; height:92px; } .list .front { width:100%; gap:16px; } .list .back {display:none;} .list .img {margin:0; width:120px; height:60px;} .list .rank {position:absolute; top:0; left:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--color-0); color:var(--white-color); font-size:14px;} .list .name {width:calc(100% - 116px); } .list .name h3 {margin:0; font-size:16px; } .list .name p {margin:4px 0; font-size:13px;} .price {width:100%; } .price h3 {font-size:17px;} } .nTabWrap { padding:0; border-bottom:none; .nTabBtn {margin-bottom:16px; gap:0; justify-content:space-between; border-bottom:1.5px solid #E5E5E5;} .nTabBtn .nTab {padding:0 4px 8px 4px; font-size:15px; white-space:nowrap;} .nTabBtn .nTab .pc {display:none;} } .mNewsContent { .topList {margin-bottom:0; display:block; } .topList .big {display:none;} .basicContent {display:none;} .sideList .list:first-child .img {height:180px;} .sideList .list:first-child .date {display:none;} .sideList .list:first-child p {font-size:15px;} .sideList .list a {grid-template-columns:1fr 100px; gap:12px;} .sideList .list h2 {font-size:16px;} .sideList .list .date {font-size:14px;} } #mEvent { padding:30px 0; background:#F9FAFB;} #mEvent.gapMd {margin:30px 0 0 0;} .mEventList {flex-direction:column; gap:48px; .list {width:100%;} .tit {margin:16px 0;} .tit h2 {margin-bottom:5px; font-size:20px; } .tit .date {font-size:14px;} .thumb {aspect-ratio:1.64 / 1;} .btn { padding:15.5px 0; color:var(--color-2); border:1px solid var(--color-2); background:transparent;} .list:hover .btn {color:var(--primary-color); border:1px solid var(--primary-color); background:transparent;} } #mCounselMobile a {display:block; margin:24px 0;} #mCounsel.gapLg {margin:0; padding:30px 0;} #mCounsel {background:#FAFAFA; border-top:1px solid #EDEDED; border-bottom:1px solid #EDEDED; .container {display:block;} .img {display:none;} .mTit {flex-direction:column; align-items: flex-start;} .formDivide {margin:0 0 24px 0; } .formDivide input + label { padding:17px 0; font-size:13px; background:#fff;} .formList {margin-bottom:0; gap:12px;} .formList label {display:none;} .formList input {padding:12px; border:1px solid #E5E5E5; font-size:14px;} .formList input:focus {border:1px solid #1a1a1a;} .form .submitBtn button{padding:14px 0; font-size:15px; } .formAgree {margin:16px 0; padding:0 2px;} .formAgree ul {flex-direction:column; gap:7px;} .formAgree li {gap:8px;} .formAgree a { font-size:11px;} .formAgree input + label {padding:0 0 0 24px; } .operate {margin:0 0 20px 0;} } #footer {} #footer {padding:34px 0 36px 0 ; .container {padding:0 24px;} .logo {margin-bottom:23px; width:97px; opacity:0.5;} .term {margin:20px 0 30px 0; display:flex; align-items:center; } .copyTit {display:flex; align-items:center; gap:2px; font-size:12px; color:#888;} .copyTit .arrow {width:12px; height:12px;} .copyTit.on .arrow {transform:scaleY(-1);} .copyCon {margin-top:12px; font-size:12px; line-height:1.5; color:#888; font-weight:500;} .copyCon h3 {margin-bottom:6px; font-weight:600;} .term a:first-child {padding:0 8px 0 0; } .line {display:block; width:100%; height:1px; background:#EDEDED;} .copyright {margin-top:30px; text-align:center;} .copyright p {margin-bottom:5px;} } .termPopCon {position:fixed; top:0; left:50%; transform:translate(-50%,0); background:#fff; z-index:999; width:100%; height:100%; max-width:500px;} .termPop #termClear {padding: 0;} .termPop #termClear .title {position:fixed; top:0; left:0; width:100%; margin:0; padding:18px 0; font-size:24px; font-weight:700; text-align:center; background:#fff; box-shadow:3px 3px 5px rgba(0 0 0 / 15%); z-index:99;} .termPopInner {position:relative; top:65px; width: 100%; height: calc(100% - 169px); overflow:auto; background:#fff; padding:30px 0 0 0;} .termPop .closeBtn {position:fixed; top:calc(100% - 100px); left:0; width:100%; padding:24px; text-align:center; background:#fff; height:100px;} .termPop .closeBtn button {top:0; right:0; padding:16px 0; width:100%; font-size:20px; font-weight:700; color:var(--white-color); background:#FF2C2E; border-radius:8px;} #termClear {padding:55px 0 25px 0;} #fixAd {display:none;} #carDetailTop .logo a {gap:12px; font-size:25px;} #carDetailTop .logo a img {width:20px;} .subGridWrap {width:100%; display:block; overflow-x:hidden;} #subGridCon {width:100%;} #verify #subGridCon {height:fit-content;} #verify.verifyConsult .btn {position:relative; padding:20px;} #pageNewsTop.gapSm {margin:0 auto 20px auto;} #pageNewsTop { .container {grid-template-columns: 1fr; padding:0;} .big a {position:relative; color:var(--color-0);} .big .thumb {height:200px;} .big .con {position:relative; padding:12px 16px; height:fit-content; background:#fff; gap:8px;} .big .con h2 {font-size:20px; } .big .con .date {display:block; font-size:14px; font-weight:400; color:var(--color-7);} .sideList {padding:0 16px;} .sideList .list { background:transparent;} .sideList .list a {position:relative; color:var(--color-2); opacity:1; } .sideList .list a .thumb {display:none;} .sideList .list a .con {position:relative; top:0; left:0; transform:none; align-items:flex-start; gap:0; padding:12px 0; border-bottom:1px solid #E5E5E5; background:transparent;} .sideList .list a .con .num {top:8px; left:0; font-size:28px; color:var(--color-7); opacity:0.6; width:35px;} .sideList .list a .con .text {width:calc(100% - 55px);} .sideList .list a .con .text h2 {display:none;} .sideList .list a .con .text p {font-size:17px; font-weight:400; line-height:1.5; text-align:left; white-space:normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:51px;} .sideList .list:nth-child(1) a .con {border-top:1px solid #e5e5e5;} .sideList .list:nth-child(1) a .con .num {letter-spacing:2px;} } #newsContentGrid {display:block;} #mNewsTab.gapMd {margin:40px 0;} #mNewsTab .sideCon, #mNewsTab .majorConGrid {display:none;} #mNewsTab .majorCon {padding:0;} .basicRowContent { .listWrap {margin-top:10px; display:flex; flex-direction:column; gap:0; } .list a {display:flex; gap:12px; flex-direction:row-reverse; padding:11px 0; border-bottom:1px solid #e5e5e5;} .list .img {width:100px; height:70px;} .list .con {width:calc(100% - 112px);} .list .con h2 { margin-bottom:5px; font-weight:400; white-space: normal; word-break: break-word; height:45px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} .list .con p {display:none;} } #newsHomeSurgeCar { background:#FAFAFA; padding:24px 0; .surgeCar .title {margin-bottom:12px; font-size:18px;} .surgeList {margin-bottom:0;} } .surgeList { .listWrap {gap:0;} .list a { gap:12px; padding:10px 0; font-size:16px; border-bottom:1px solid #e5e5e5;} .list:first-child a {font-weight:700;} .list:first-child a .num {color:#FF2C2E;} .list:nth-child(6) {margin-top:0;} .list a .text {width:calc(100% - 68px);} } #includeCar.gapLg {margin:16px 0;} #includeCar { .mTit {margin-bottom:24px;} .mTit h2 {font-size:22px;} } .includeCarList { .listWarp {flex-direction:column; } .listWarp .list {width:100%; gap:24px;} .list .car { height:160px;} .list .car img {margin:0 auto; width:80%;} .list .con {padding:16px; } .list .subject {font-size:16px; height:55px;} .list .name h4 { font-size:12px; } .list .btn {margin-top:12px;padding:13px 0 15px 0; border:1px solid #1A1A1A; font-size:14px;} } .includeCarBtn a {margin-top:24px; padding:16px; gap:40px;} .includeCarBtn a .text {margin:0 !important; font-size:14px; font-weight:500; line-height:1.5;} .includeCarBtn a .btn .mobile {white-space:nowrap;} .boardKcm {margin:16px auto; width:100%; padding:16px; background:#fff; .boardKcmCon {position:relative; padding:32px 16px; background:#1e53f2;} .kcm {top:38px; right:16px; width:120px;} .tit {margin-bottom:28px; color:var(--white-color);} .tit h3 {margin-bottom:8px; font-size:14px; font-weight:400; } .tit h2 {font-size:22px; font-weight:700;} .formlist ul {display:flex;flex-direction:column; gap:9px;} .formlist ul li {width:100%;} .formlist input {width:100%; padding:13px 12px; font-size:14px;} .submitBtn {position:absolute; top:158px; right:0; width:100%; height:48px; } .submitBtn button {font-size:15px; font-weight:700;} .formAgree {margin-top:88px;} .formAgree ul {flex-direction:column; gap:6px; justify-content:flex-start;} .formAgree li {gap:10px; align-items:baseline;} .formAgree input + label {padding:0 0 0 22px; font-size:12px; letter-spacing:-0.5px;} .formAgree a {font-size:10px;} .operate {text-align:left; font-size:12px; font-weight:400;} } #moreView.gapLg {margin:16px 0;} #moreView { .mTit h2 {font-size:18px;} /* PC 와 동일 : 세로형 원본이라 고정높이면 잘린다. 하단 제목은 중복이라 숨김. 2026-08-10 */ .basicList h2 {display:none;} .basicList .img {margin-bottom:8px; height:auto; aspect-ratio:600 / 750;} .basicList .list {display:none;} .basicList .list:nth-child(1), .basicList .list:nth-child(2) {display:block;} } .basicContent{ .basicList {display:flex; flex-wrap:wrap; gap:12px;} .basicList .list {width:calc(50% - 6px);} .basicList .img {margin-bottom:8px; height:90px;} } #realTimeTrand { .container { gap:20px; } .tit {font-size:14px; } .realTimeSwiper {width:calc(100% - 100px);} .realTimeTrandList {height:46px;} .realTimeTrandList a { height:46px; font-size:14px;} .realTimeTrandList a .num {font-weight:700;} } #newsArticle { .tit {padding:20px; margin-left:-16px; margin-right:-16px;}.. .tit .subject {margin-bottom:8px; font-size:26px; line-height:1.4; font-weight:400; } .text {margin:20px 0; } .text h3 {font-size:22px; font-weight:700; } .text p {margin:20px 0; font-size:18px; line-height:1.4; font-weight:400;} .ad {margin:40px 0; } .ad a {width:100%;} .newsEndBy { padding:14px; display:flex; align-items:center; justify-content:end;} .newsEndBy .logo {width:fit-content; height:12px;} } #newsArticle #includeCar, #newsArticle .relativeNews, #newsArticle .newsEndBy {display:none;} #newsArticleTag { margin:24px 0; .tagWrap {display:flex; flex-wrap:wrap; gap:8px; } .tag {display:inline-block; padding: 6px 12px; border-radius:4px; background:#fafafa; border:1px solid #e5e5e5; font-size:12px; font-weight:400; color:var(--color-6);} } .detailCon {padding:0;} .detailCon .pdSm {padding:0; margin-left:-16px; margin-right:-16px;} #surgeCarUp {padding:24px 16px; background:#F8F8F8; margin-left:-16px; margin-right:-16px; .title {margin-bottom:16px; font-size:18px; font-weight:600;} .surgeList {padding:0; background:transparent; .listWrap {gap:12px;} .list a {border-bottom:none; padding:0; gap:7px; font-weight:400;} .list a .text {width:calc(100% - 40px); } .list:nth-child(n+6) {display:none;} } } .popularCarBest { margin:24px 0; .titleWrap {margin-bottom:16px; display:flex; align-items:center; justify-content:space-between;} .titleWrap .title {font-size:18px; font-weight:600; } .titleWrap a {font-size:15px; font-weight:400; color:var(--color-6);} .popularCarList { .listWrap {gap:12px;} .list a {grid-template-columns:100px 1fr; gap:12px; padding:12px; background:#fff; border:1px solid #E5E5E5;} .list a .rank {display:none;} .list a .thumb {width:100px; left:0;} .list a .con .btn {display:none;} .list a .con .name {font-size:16px; font-weight:400; height:23px; -webkit-line-clamp:1; white-space:nowrap;} .list a .con .price {margin:0; font-size:17px; font-weight:600;} } } .popularCarSoon { margin:24px 0; .title {margin-bottom:16px; font-size:18px; font-weight:600; } } .popularCarSoonList { .listWrap {display:flex; align-items:center; gap:8px;} .list a {display:flex; flex-direction:column; align-items:center; justify-content:center; } .list a .thumb {height:60px;} .list a .con .name {margin:8px 0 5px 0; font-size:13px; font-weight:500; color:var(--color-6)} .list a .con .price {font-size:16px; font-weight:700;} } #carIndexTop {padding:0;} #carIndexTop .container {display:flex; flex-direction:column; justify-content:flex-start; gap:20px;} .carIndexHero { margin-left:-16px; margin-right:-16px; padding:20px; background:#1A1A1A; .swiper {padding:0 0 20px 0;} .swiper-slide .img {height:fit-content;} .swiper-slide .con {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; padding:40px; color:var(--white-color); z-index:9;} .swiper-pagination {bottom:0 !important; line-height:0;} .swiper-pagination-bullet {margin:0 3px !important; width:4px; height:4px; background:#D2D2D2; opacity:1 !important; } .swiper-pagination-bullet.swiper-pagination-bullet-active {width:20px; height:4px; background:var(--primary-color); border-radius:10px;} } .carIndexYoutube .con { padding:10px 0 20px 0; background:#fff; p {margin:12px 0 0 0; font-size:15px; font-weight:400; line-height:1.5; } .tagWrap {display:none;} } .carTpye { .listWarp {gap:11px; border-top:none; border-bottom:1px solid #E5E5E5; } .list input + label {padding:8px 4px; border-bottom:2px solid #fff; letter-spacing:0;} .list input:checked + label {color:#222222; border-bottom:2px solid #222222;} } .resultSum {position:relative; top:0; left:0; right:inherit; display:flex; align-items:center; gap:0; width:100%; justify-content:space-between; padding:16px 0; .resultSelect {position:relative;} .resultSelect::after {content:''; position:absolute; top:50%; right:0; transform:translate(0, -50%); width:20px; height:20px; background:url('/_img/select_arrow.png') no-repeat center; background-size:cover;} .resultSelect select { padding:0 20px 0 0; width:90px; font-size:14px; font-weight:500; color:#1a1a1a; cursor:pointer;} } .popularResultCon { .list a {padding:24px 0; flex-direction:column; justify-content:flex-start; gap:12px;} .list .rank {top:20px; left:0; font-size:32px; font-weight:400; color:#d2d2d2; font-style: normal; z-index:1;} .list .price .btn {position:absolute; top:20px; right:0; padding:8px 12px; font-size:12px;color:var(--color-0); border-radius:0; background:#fff; border:1px solid var(--color-0); } .list a:hover .price .btn {background:#fff; border:1px solid var(--primary-color); color:var(--primary-color);} .list .car {margin-top:27px; width:100%; height:180px; } .list .car img {left:55px; width:auto; height:180px;} .list .con {display:flex; flex-direction:column; width:100%; } .list .con .name {margin:0; display:flex; gap:4px; flex-wrap:wrap; font-size:20px; } .list .con .info {margin:8px 0;} .list .con .info .month {display:none;} .list .con .info p { font-size:14px; font-weight:400; color:#aaa;} .list .con .info .bar {margin:0 5px; height:13px; background:#aaa; opacity:0.5;} .list .price {position:inherit; top:0; text-align:left;} .list .price .del {display:none;} .list .price h2 {margin:0; justify-content:flex-start; font-size:20px; } .list .price h2 .num {margin:0 0 0 2px;} } .pageMoreBtn { margin:24px 0; text-align:center; button {display:inline-block; padding:12px 24px; border:1px solid #e5e5e5; font-size:14px; font-weight:500; color:var(--color-6);} } #MeritFourBn { margin-top:24px; padding:40px 0 90px 0; background:url('/_img/four_bn_bg_m.png') no-repeat ; background-position:center 85%; .listWrap {flex-wrap:wrap; gap:8px; justify-content:flex-start;} .list {width:calc(50% - 4px); height:140px;} .list h5 {font-size:14px; } .list h2 {font-size:28px; } } #svEvent {margin:0 0 30px 0;} #svEvent .container {padding:0;} #board.event .tabs ul { margin:0 0 20px 0; gap:0; justify-content:space-between; .list a {padding:8px 0; font-size:13px; } } .eventNone h2 { font-size:18px;} .eventNone {font-size:12px;} .mEventList { .tit {margin:16px 0; display:flex; flex-direction:column-reverse; gap:6px;} .tit h2 {margin:0; } } #board { .mEventList .list .btn {font-size:13px;} } #newsSearchResult .sideCon {display:none;} #newsSearchResult.gapMd {margin:0;} #newsSearchResult { .mTit {padding:20px 16px; margin-left:-16px; margin-right:-16px; margin-bottom:0; border-bottom:none;} .mTit h2 {font-size:20px;} } #newsContentGrid {display:flex; flex-direction:column;} .resultList { margin-top:0; a:nth-child(1) {padding:0 0 16px 0;} a {padding:16px 0; display:flex; flex-direction:row-reverse; gap:12px; border-bottom:1px solid #E5E5E5;} .img {width:76px; height:80px;} .con {width:calc(100% - 88px);} .con h2 {font-size:17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .con p {margin:6px 0; font-size:15px; line-height:1.5; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .con h5 {gap:6px; font-size:14px;} } .result-con { display:flex; flex-direction:column; gap:17px; .list {position:relative; display:flex; flex-direction:column; border:1px solid #E5E5E5; } .list .img {width:100%; height:164px; text-align:center;} .list .img img {position:relative; top:10px; width:90%; margin:0 auto; } .list .list-wrap {width:100%; padding:16px;} .list-wrap h3 {margin-bottom:6px; gap:8px; } .list-wrap p {font-size:12px;} .list-wrap p .bold {font-weight:400;} .list-wrap .info {margin:8px 0 12px 0;} .price {border-top:1px solid #E5E5E5; padding:12px 0 0 0; } .price li {font-size:12px; } .price .capital_img img {position:relative; top:2px; width:fit-content; height:10px;} .price .won .num {font-size:16px;} .disbtn .btn {gap:8px; } .disbtn .btn a { font-size:13px; } .disbtn .btn a.consultFormBtn {color:var(--white-color); background:var(--primary-color); border:1px solid var(--primary-color); } .disbtn .btn a.consultFormBtn:hover {background:var(--color-0); border:1px solid var(--color-0);} .ab-icon {top:12px; left:12px;} .ab-right {top:12px; right:12px;left:inherit; } } .newsSearchNone { margin:24px 0; padding:48px 0 32px 0; .ico {margin:0 auto 10px auto; } h2 {margin-bottom:10px; font-size:16px; } p {font-size:13px;} } } /* [뉴스 상세 본문 이미지 오버플로 방지] 모터트렌드 원본 img(width=1280) + .photo-layout(fit-content) 래퍼가 537px 본문 컬럼을 뚫는 문제 → 반응형 제한. 2026-07-29 */ #newsArticle > .con img, #newsArticle > .con figure, #newsArticle > .con .photo-layout, #newsArticle > .con .image, #newsArticle > .con iframe, #newsArticle > .con video, #newsArticle > .con table { max-width:100% !important; } #newsArticle > .con img, #newsArticle > .con iframe, #newsArticle > .con video { height:auto !important; } #newsArticle > .con figure { margin-left:auto; margin-right:auto; } /* [실시간 급상승] 현재 보는 기사 표시(B안): 비링크 + '현재글' 배지. 2026-07-30 */ .surgeList .list.current > .current { cursor:default; } .surgeList .list.current .num, .surgeList .list.current .text { color:#FF2C2E; font-weight:700; } .surgeList .list.current .nowTag { display:inline-block; margin-left:auto; padding:2px 8px; font-size:11px; font-weight:600; line-height:1.5; color:#fff; background:#FF2C2E; border-radius:10px; white-space:nowrap; } /* ========================================================================= 네이트 피드백 반영 2026-08-11 ※ 기존 규칙을 고치지 않고 뒤에 덧붙여 우선순위로 덮는다(중첩문법 파싱사고 방지). ========================================================================= */ /* [2·4] 홈 자동차뉴스 / 뉴스 상단 탭(8개) 좁은 해상도에서 우측 메뉴가 잘림 → 가로 슬라이딩으로 전환. 기존 모바일 규칙이 justify-content:space-between + gap:0 이라 폭이 모자라면 잘렸다. */ @media (max-width:960px){ .nTabWrap .nTabBtn{ justify-content:flex-start; gap:18px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .nTabWrap .nTabBtn::-webkit-scrollbar{display:none;} .nTabWrap .nTabBtn .nTab{flex:0 0 auto;} } /* [10] 모바일 해상도에서 TextGNB 비노출 + 여백 제거 모바일 UA 는 __head.php 에서 이미 미출력. 이 규칙은 'PC UA + 좁은 화면' 대응이다. */ @media (max-width:960px){ #nateGnbWrap{display:none !important;} #header .hTop .container{height:56px;} } /* [9] 무선 해상도 가로 스크롤 방지 viewport 를 넘는 요소가 있어도 좌우 흔들림이 생기지 않게 한다. */ @media (max-width:960px){ html,body{max-width:100%; overflow-x:hidden;} img,video,iframe,table{max-width:100%;} } /* [12] 유선 960~1100px 구간에서 우측 검색영역 등이 깨지는 문제 레이아웃 기준폭(1080 + 좌우 여백)을 최소너비로 잡아 가로 스크롤이 생기게 한다. ※ m_common.css:25 의 body{overflow-x:hidden} 이 미디어쿼리 없이 전역으로 걸려 있어, min-width 로 폭을 확보해도 넘친 부분이 잘려 스크롤로 접근할 수 없었다(2026-08-12 확인). → 유선 구간에서만 visible 로 되돌린다. 무선(≤960)은 아래 [9] 규칙대로 hidden 유지. */ @media (min-width:961px){ html,body{min-width:1120px;} body{overflow-x:visible;} } /* [3·6] 이벤트 썸네일이 잘려 보이는 문제 규격(신수철 2026-08-11) : 무선 이벤트 썸네일 = 328x200 → 비율 1.64:1 기존 무선 규칙(.mEventList .thumb{aspect-ratio:1.64/1})이 이미 이 규격이므로 그대로 둔다. 유선은 1.5:1 유지. 유무선은 각각 fileThumbNate / fileThumbNateMob 로 소재가 분리돼 있어 비율을 억지로 통일하지 않고 규격에 맞는 소재를 올리는 쪽이 맞다. 조치 : 썸네일 img 에 크기 지정이 없어 원본이 그대로 들어가고 .thumb{overflow:hidden} 으로 잘렸다. 이미지 안에 문구가 인쇄돼 있어 크롭하면 내용이 사라지므로 contain 으로 전체를 보이게 한다. (규격에 맞는 소재라면 여백 없이 꽉 찬다) */ .event-list .thumb{aspect-ratio:1.5 / 1; overflow:hidden;} @media (max-width:960px){ .event-list .thumb{aspect-ratio:1.64 / 1;} /* 무선 328x200 */ } .mEventList .thumb img, .event-list .thumb img{ width:100%; height:100%; object-fit:contain; background:#fff; } /* [인기차량 차종 탭] 2026-08-11 라디오+label(form submit) → URL 경로 이동() 으로 바꾸면서 기존 .list input + label 스타일을 a 에 그대로 옮긴다(외형 동일). */ .carTpye .listWarp .list a{ display:block; cursor:pointer; padding:23px 0; font-size:15px; font-weight:600; color:#666; border-bottom:2px solid #fff; letter-spacing:0; } .carTpye .listWarp .list a.on{color:#FF2C2E; border-bottom:2px solid #FF2C2E;} @media (max-width:960px){ .carTpye .listWarp .list a{padding:8px 4px;} .carTpye .listWarp .list a.on{color:#222222; border-bottom:2px solid #222222;} } /* [더보기 버튼] 인기차량·이벤트 공통 2026-08-12 - 기존 .pageMoreBtn 스타일은 모바일 미디어쿼리 안에만 있어 유선에서는 스타일이 없었다 (페이지네이션을 없애고 유·무선 공용 '더 보기'로 통일하면서 유선에도 필요해짐). - 기존 .nextbtn(m_board.css)은 padding 좌우 134px·margin 100px 로 과해서 여기서 덮는다. - 가운데 정렬 + 회색 보더 박스. */ .pageMoreBtn.cpMoreWrap, .nextbtn.evMoreWrap{ width:100%; margin:40px 0; text-align:center; } .pageMoreBtn.cpMoreWrap button, .nextbtn.evMoreWrap button{ display:inline-block; min-width:240px; padding:15px 40px; background:#fff; border:1px solid #ddd; border-radius:2px; font-size:15px; font-weight:500; line-height:1.2; color:#666; cursor:pointer; transition:border-color .15s ease, color .15s ease, background-color .15s ease; } .pageMoreBtn.cpMoreWrap button:hover, .nextbtn.evMoreWrap button:hover{ background:#fafafa; border-color:#999; color:#222; } @media (max-width:960px){ .pageMoreBtn.cpMoreWrap, .nextbtn.evMoreWrap{ margin:24px 0; } .pageMoreBtn.cpMoreWrap button, .nextbtn.evMoreWrap button{ width:100%; min-width:0; padding:13px 20px; font-size:14px; } } /* [배너 소재 고유 폭 유지] 2026-08-12 흐릿함의 원인 : .img-responsive { width:100% } 라 배너가 컨테이너(1080)까지 늘어난다. 시안 실측 폭이 1080 이 아닌 배너는 확대되어 화질이 떨어진다(운영팀 지적). 홈01 광고배너1 884x125 → 1080x153 으로 확대되고 있었음 홈03 광고배너 970x250 → 1080x278 뉴스04 띠배너2 970x90 → 1080x100 → 소재 원본 폭을 상한으로 잡고 가운데 정렬한다. 폭이 좁은 화면에서는 100% 로 축소(축소는 화질 문제 없음). */ .bnrItem img.pc, .bnrItem img.mobile{ height:auto; } .bnrW884 img.pc{ max-width:884px; margin:0 auto; } .bnrW970 img.pc{ max-width:970px; margin:0 auto; } .bnrW1068 img.pc{ max-width:1068px; margin:0 auto; } .bnrW712 img.pc{ max-width:712px; margin:0 auto; } .bnrW640 img.pc{ max-width:640px; margin:0 auto; } /* 뉴스상세 동영상+배너. 2026-08-12 */ .bnrW620 img.pc{ max-width:620px; margin:0 auto; } /* 뉴스상세 트윈 배너. 2026-08-12 */ /* 뉴스 상세 본문(.con) 안에 끼우는 배너는 본문 이미지 규칙(img{max-width:100%})이 이겨 폭 상한이 걸리지 않는다 → 구체도를 높여 다시 지정한다. 2026-08-12 */ /* img 에 걸면 본문 규칙(#newsArticle > .con img{max-width:100%})과 싸우게 되므로 래퍼 자체의 폭을 제한한다(img 는 100% 라 따라온다). */ #newsArticle .con .bnrW712{ max-width:712px; margin-left:auto; margin-right:auto; } #newsArticle .con .bnrW620{ max-width:620px; margin-left:auto; margin-right:auto; } /* 안쪽 a 가 래퍼를 넘어 본문폭까지 늘어나므로 a 도 같이 잡는다(img 는 width:100% 라 a 를 따라온다). */ #newsArticle .con .bnrItem a{ display:block; width:100%; max-width:100%; } .bnrW884 a, .bnrW970 a, .bnrW1068 a, .bnrW712 a, .bnrW640 a, .bnrW620 a{ display:block; text-align:center; } /* ============================================================ 2026-08-13 네이트 시안 피드백 (13일-1 / 13일-2) ============================================================ */ /* [1] 홈 인기차량 하단 / 이벤트 하단 배너 : 시안의 좌우 화살표 지시대로 콘텐츠 폭(1080) 전체로 넓힌다. (홈01 884 -> 1080 / 홈03 970 -> 1080) 소재는 1768x250 · 1940x500 이라 1080 표시에서도 1.6~1.8배로 선명하다. */ .bnrW1080 img.pc{ max-width:1080px; margin:0 auto; } .bnrW1080 a{ display:block; text-align:center; } /* [2] 검색결과 : 광고 배너와 컨텐츠 사이 간격 48px 고정. 기존 .gapLg(90px) 를 덮는다. 검색 결과가 있을 때·없을 때 모두 같은 블록이라 함께 적용된다. 무선은 기존 규격(24px 계열)을 유지하기 위해 유선에만 적용한다. */ @media (min-width:961px){ #newsSearchResult .bnrItem, #newsSearchResult .bnrItem.gapLg{ margin-top:48px; margin-bottom:48px; } } /* [4] 뉴스 검색결과 전체 페이지(/page/newsResult/) 페이지네이션의 '…' 는 버튼이 아니라 구분자다. */ .resultContent .pagination button.dot{ border:0; background:transparent; color:#999; cursor:default; } /* ============================================================ 2026-08-13 네이트 시안 피드백 (13일-10 / 13일-11) ============================================================ */ /* [10] 이벤트 모듈(홈·이벤트 메인 공통) — Figma PC_이벤트 3536:2661 실측 카드 344x(썸네일260) · 열 간격 24 · 행 간격 56 · 제목 상단 16 · 카드 하단 여백 0 · 버튼 없음 열 간격 24 는 기존과 같고, 버튼 삭제와 행 간격만 시안에 맞춘다. 무선은 기존 규격 유지. */ @media (min-width:961px){ .mEventList{ row-gap:56px; column-gap:24px; margin-bottom:80px;} .mEventList .tit{ margin:16px 0 0 0; } /* '자세히 보기' 버튼은 유선 시안에만 없다(무선 MO 시안에는 있다) → 마크업은 두고 유선에서만 숨긴다. */ .mEventList .list .btn{ display:none; } /* 호버 상태 없음(시안) — 유선의 유일한 hover 규칙이 .list:hover .btn 이었고 버튼이 숨겨져 효과가 사라진다. (썸네일·제목에는 hover 효과가 없다 — CSS 전수 확인) */ } /* [11] 인기차량 목록 : 가격이 `월 1,294,783` 까지만 한 줄에 들어가고 `원~` 이 다음 줄로 밀렸다. 원인 = .con 그리드의 가격 열이 200px 고정인데 7자리 금액의 실제 필요 폭은 209px. → 열 폭을 230px 로 넓히고 금액은 줄바꿈하지 않는다. */ .popularResultCon .list .con{ grid-template-columns: 1fr 230px; } .popularResultCon .list .price h2{ flex-wrap:nowrap; white-space:nowrap; }