#sub {padding-top:55px;} #term {padding-top:55px;} .svisual {padding:44px 0 36px 0; text-align: center;} .svisual h2 { font-size:40px; font-weight: 700; color:#000;} .svisual p {margin-top:10px; font-size:18px; font-weight:400;} .company .svisual, .judge .svisual {padding:80px 0 70px 0; text-align: center;} .company .svisual h2, .judge .svisual h2 { font-size: 20px; font-weight: 500; color:#737578;} /*빠른 간편견적*/ #sub #svimg.fast-sv .svcontainer {width:100%; height:460px;} #sub.fast .tab { display:flex; } #sub.fast .tab {display:flex; justify-content:space-between; align-items:center;} #sub.fast .tab input[type="radio"] { display:none; } #sub.fast .tab label{display:flex; flex-basis:50%; justify-content:center;} #sub.fast .tab label {display:block; padding:17px 0; width:100%; font-size:16px; text-align:center; border:1px solid #e5e5e5; cursor:pointer;} #sub.fast .tab input:checked + label {color:#fff; background-color: #000; font-weight:bold;} /* #sub.fast .tab ul {display:flex; justify-content:space-between; align-items:center;} #sub.fast .tab ul li{display:flex; flex-basis:50%; justify-content:center;} #sub.fast .tab ul li a {display:block; padding:17px 0; width:100%; font-size:16px; text-align:center; border:1px solid #e5e5e5;} #sub.fast .tab ul li.active a {color:#fff; background-color: #000; font-weight:bold;} */ #fastTab .category {padding:20px; background:#f7f7f7;} #fastTab .category .input {margin-bottom:15px;} #fastTab .input-wrap {display:flex; justify-content:space-between; gap:15px;} #fastTab .input-wrap > div {display:flex; flex-basis:50%;} #fastTab button {padding:10px; background:#D10005; border-radius:5px} #fastTab button:hover {background:#0c2e95; transition:all 1s;} #fastTab button img {width:20px;} #fastTab .droptit {width:100%; text-align:center; cursor:pointer; margin:20px 0;} #fastTab .droptit p {position:relative; display:flex; align-items:center; justify-content:center; gap:15px; font-size:15px; line-height:15px; color:#999999; font-weight:bold; } #fastTab .droptit p:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:43%; height:1px; background:#999999;} #fastTab .droptit p:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:43%; height:1px; background:#999999;} #fastTab .droptit span {transition:all 0.5s;} #fastTab .droptit.on span {margin-top:-3px; transform:rotate(-180deg); } #fastTab .dropdown {display:none;} /* #fastTab .input-wrap2 {display:flex; justify-content:space-between; align-items:center; gap:15px; background:#fff; border:1px solid #cecece; border-radius:5px;} #fastTab .input-wrap2 > div.ct-Price {display:flex; flex-basis:67%;} #fastTab .input-wrap2 > div.ct-Self {display:flex; flex-basis:33%;}*/ #fastTab .tooltip {display:block;} #fastTab .tooltip-text { display: none; position: absolute; max-width:300px; margin-top:10px; padding: 10px 15px; font-size:13px; color: #000; background: #fcffd7; text-align:left; font-weight:400 !important; line-height:18px; z-index:99;} #fastTab .tooltip:hover .tooltip-text { display: block;} .etc-view {display:none;} .etc-view .etc-view-wrap {display:flex; flex-wrap:wrap; gap:15px; width:100%;} /*Brand custom*/ #fastTab .category .ct-Brand span input[type="radio"]{ appearance:none; display:none;} #fastTab .category .ct-Brand {display:flex; gap:18px; flex-wrap:wrap;justify-content:center; } #fastTab .category .ct-Brand span input[type="radio"] + label {display:flex; flex-direction:column; width:96px; height:96px; padding:12px; gap:7px; text-align:center; box-sizing:border-box; background:#fff; border:1px solid #cecece; border-radius:5px; cursor:pointer; font-size:14px; align-items: center; justify-content:center;} #fastTab .category .ct-Brand span input[type="radio"] + label .img {width:55px;} #fastTab .category .ct-Brand span input[type="radio"] + label .img img {width:100%;} #fastTab .category .ct-Brand span input[type="radio"]:checked + label {border:2px solid #D10005; box-shadow:5px 5px 5px rgba(0,0,0,0.2); font-weight:bold; color:#D10005;} #fastTab .category .ct-Brand span input[type="radio"]:hover + label {box-shadow:5px 5px 5px rgba(0,0,0,0.2); transition:all 0.1s;} #fastTab .category .ct-Brand span.all input[type="radio"] + label .img img {filter:opacity(1) grayscale(1) brightness(0);} #fastTab .category .ct-Brand span.all input[type="radio"]:checked + label .img img {filter:none;} /*Fuel custom*/ #fastTab .category .ct-Fuel span input[type="radio"]{ appearance:none; } #fastTab .category .ct-Fuel {display:flex; justify-content:space-between; border:1px solid #cecece; border-radius:5px; background:#fff;} #fastTab .category .ct-Fuel span {display:flex; flex-basis:16.66%; justify-content:center;} #fastTab .category .ct-Fuel span.all {flex-basis:16.2%;} #fastTab .category .ct-Fuel span input[type="radio"] + label { display:flex; gap:7px; justify-content:center; align-items:center; width:100%; padding:13px; text-align:center; box-sizing:border-box; background:#fff; border-radius:5px; cursor:pointer; font-size:16px;} #fastTab .category .ct-Fuel span .fueltype {flex-basis:12%; border:1px solid #cecece; font-size:12px; color:#4d4d4d; line-height:16px; font-weight:500;} #fastTab .category .ct-Fuel span input[type="radio"]:checked + label {border:2px solid #D10005; font-weight:bold; color:#D10005;} #fastTab .category .ct-Fuel span input[type="radio"]:checked + label .fueltype {border:1px solid #D10005;} /*Size custom*/ #fastTab .category .ct-Size span input[type="radio"]{ appearance:none; } #fastTab .category .ct-Size {display:flex; justify-content:flex-start; gap:8px; border:1px solid #cecece; border-radius:5px; background:#fff;} #fastTab .category .ct-Size span {display:flex; flex-basis:12%; justify-content:center;} #fastTab .category .ct-Size span.all {flex-basis:16.2%;} #fastTab .category .ct-Size span input[type="radio"] + label { display:flex; gap:7px; justify-content:center; align-items:center; width:100%; padding:13px; text-align:center; box-sizing:border-box; background:#fff; border-radius:5px; cursor:pointer; font-size:16px;} #fastTab .category .ct-Size span input[type="radio"]:checked + label {border:2px solid #D10005; font-weight:bold; color:#D10005;} /*Month custom*/ #fastTab .category .ct-Month span input[type="radio"]{ appearance:none; } #fastTab .category .ct-Month {display:flex; justify-content:space-between; border:1px solid #cecece; border-radius:5px; background:#fff;} #fastTab .category .ct-Month span {display:flex; flex-basis:33.33%; justify-content:center;} #fastTab .category .ct-Month span input[type="radio"] + label { display:flex; gap:7px; justify-content:center; align-items:center; width:100%; padding:12px; text-align:center; box-sizing:border-box; background:#fff; border-radius:5px; cursor:pointer; font-size:16px;} #fastTab .category .ct-Month span input[type="radio"]:checked + label {border:2px solid #D10005; font-weight:bold; color:#D10005;} /*Deposit custom*/ #fastTab .category .ct-Deposit span input[type="radio"]{ appearance:none; } #fastTab .category .ct-Deposit {display:flex; justify-content:space-between; border:1px solid #cecece; border-radius:5px; background:#fff;} #fastTab .category .ct-Deposit > span {display:flex; flex-basis:33.33%; justify-content:center;} #fastTab .category .ct-Deposit span input[type="radio"] + label { display:flex; gap:7px; justify-content:center; align-items:center; width:100%; padding:12px; text-align:center; box-sizing:border-box; background:#fff; border-radius:5px; cursor:pointer; font-size:16px;} #fastTab .category .ct-Deposit span .info {width:12%; padding:0 6px; margin-left:2px; border:1px solid #cecece; font-size:12px; color:#4d4d4d; line-height:16px; font-weight:500; border-radius:100%;} #fastTab .category .ct-Deposit span input[type="radio"]:checked + label {border:2px solid #D10005; font-weight:bold; color:#D10005;} /*Prcie custom*/ #fastTab .input-wrap2 {display:flex; align-items:center; padding:17px 30px 15px 30px; background:#fff; border:1px solid #cecece; border-radius:5px; } #fastTab .category .ct-Price .rs-container {height:40px;} #fastTab .category .ct-Price .rs-container .rs-pointer {width:15px; height:15px; margin-left:-3px; border-radius:100%; border:4px solid #D10005; box-sizing:border-box;} #fastTab .category .ct-Price .rs-container .rs-scale {cursor:pointer;} #fastTab .category .ct-Price .rs-container .rs-scale span ins {font-size:12px; color:#8c8c8c; font-weight:400;} #fastTab .category .ct-Price .rs-container .rs-bg {width:101.5%; height:5px; background:#b3b3b3; cursor:pointer; } #fastTab .category .ct-Price .rs-container .rs-bg:before {position:absolute; content:''; top:50%; left:-6px;transform: translate(0, -50%); width:15px; height:15px; background:#b3b3b3; border-radius:100%;} #fastTab .category .ct-Price .rs-container .rs-bg:after {position:absolute; content:''; top:50%; right:0;transform: translate(0, -50%); width:15px; height:15px; background:#b3b3b3; border-radius:100%;} #fastTab .category .ct-Price .rs-container .rs-selected { height:5px; background:#D10005; border:none;} #fastTab .category .ct-Price .rs-container .rs-pointer::after, .rs-container .rs-pointer::before {display:none;} #fastTab .category .ct-Price {width:65%; /*float:left;*/} /*Self custom*/ #fastTab .category .ct-Self {display:flex; justify-content:flex-end; gap:5px; align-items:center; padding:0 20px 0 20px; flex-basis:35%; } #fastTab .category .ct-Self .name {margin-right:15px; font-size:16px; } #fastTab .category .ct-Self input {padding:10px 7px; border:1px solid #cecece; max-width:100px;} /*빠른간편견젹 - 검색결과*/ .carindex-tit {display:flex; justify-content:space-between; align-items:center;} select.carfilter {padding:10px 45px 10px 20px; border:1px solid #d1d1d1; border-radius:50px; box-sizing:border-box; font-size:14px; letter-spacing:-0.5px; background:url('/_img/filter_arrow.png') no-repeat 93% center; background-size:23px; cursor:pointer;} select.carfilter:focus {border:1px solid #3651E0;} select.carfilter option {padding:3px 5px;} select.carfilter::-ms-expand {display: none;} .carindex-dv {margin:25px 0 40px 0;} .carindex-dv ul {display:flex; gap:10px;} .carindex-dv ul li input {display:none; appearance:none; display:none;} .carindex-dv ul li input + label {padding:11px 25px; font-size:14px; line-height:14px; background:#F5F5F5; color:#999999; border-radius:500px; font-weight:500; cursor:pointer;} .carindex-dv ul li input:checked + label {background:#000; color:#fff;} .result { margin:70px auto 0 auto; width:1400px; } .result.indexContHtml {margin:0 auto; width:100%;} .result .container {max-width:1400px;} .result h2 {font-size:20px; font-weight:400;} .result .result-con {margin-top:20px; display:flex; /*justify-content:space-between;*/ flex-wrap:wrap; gap:25px;} .result .result-con .list {position:relative; display:flex; flex-direction:column; flex-basis:331.25px; background:#fff; border:1px solid #d1d1d1; border-radius:8px; overflow:hidden; cursor:pointer; } .result .result-con .list a.lista {display:block;} .result .result-con .list .ab-icon {position:absolute; top:23px; left:13px;} .result .result-con .list .ab-icon span {margin-right:2px; padding:5px 12px; font-size:15px; color:#fff; border-radius:500px; font-weight:500;} .result .result-con .list .ab-icon span.mm {background:#E6E6E6; color:#D10005;} .result .result-con .list .ab-icon span.pm {background:#D10005;} .result .result-con .list .ab-right {position:absolute; top:10px; right:11px;} .result .result-con .list .ab-right span.elec {display:block; width:65px;} .result .result-con .list .ab-right span.ev {position:relative; display:block; padding:7px 27px 7px 15px; font-size:14px; font-weight:bold; color:#50586C; letter-spacing:-0.5px; background:linear-gradient( 180deg, #eef0f5, #e1e4ea); border-radius:30px; } .result .result-con .list .ab-right span.ev img {position:absolute; right:5px; top:-5px; width:17px;} .result .result-con .list .img {padding:45px 33px 15px 33px; height:181px; background:#f7f7f7; display:flex; align-items:center;} .result .result-con .list .list-wrap {position:relative; padding:25px;} .result .result-con .list:hover .img img {transform: scale(1.1); transition:all 0.3s;} .result .result-con .list .text {} .result .result-con .list .text .brand img {width:35px;} /*.result .result-con .list:hover .text {opacity:0.5; transition:all 0.3s;}*/ .result .result-con .list .text p { font-size:13px; color:#535353; font-weight:500; line-height:1.5;} .result .result-con .list .tit-wrap {display:flex; justify-content:space-between;} .result .result-con .list .tit-wrap h3 {display:flex; gap:8px; font-size:19px; font-weight:bold; width:160px; line-height:1.2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical } .result .result-con .list .tit-wrap h3 .brand {margin:0 -3px 0 0;} .result .result-con .list .tit-wrap .dv {height:63px;} .result .result-con .list .tit-wrap .dv-eng {display:flex; align-items:center; gap:5px; line-height:23px;} .result .result-con .list .tit-wrap .engine {line-height:0;} .result .result-con .list .tit-wrap .engine span {display:inline-block; width:16px; font-size:12px; line-height:14px; text-align:center; border:1px solid #a7a7a7;} .result .result-con .list .tit-wrap .engine span.active { color:#0864f1; border:1px solid #0465ed; font-weight:bold; } .result .result-con .list .text .info {margin:15px 0; min-height:40px;} .result .result-con .list .price {font-size:14px; line-height:1.4; color:#4d4d4d; font-weight:500; display:flex; flex-direction:column; gap:10px; height:105px; justify-content:end;} .result .result-con .list .price li {display:flex; align-items:center; justify-content:space-between;} .result .result-con .list .price li .subject img { } .result .result-con .list .price li .subject .capital_img { display:inline-block; text-align:left; } .result .result-con .list .price li .subject .capital_img img { margin:-2px 0 0 7px; max-width:80px; max-height:20px; } .result .result-con .list .price li .won {color:#000; font-size:22px; font-weight:bold; display:flex; align-items:center; gap:1px;} .result .result-con .list .price li .won .num {width:124px; text-align:right;} .result .result-con .list .price li .subject.promotion {padding:8px 14px; background:linear-gradient(45deg, #EC04AE, #7800FF, #4500FF); color:#fff; font-size:13px; border-radius:50px;} /* .result .result-con .list .text .price span {font-size:135%; font-weight:bold;} .result .result-con .list .list-wrap .disbtn {display:none; } .result .result-con .list:hover .list-wrap .disbtn {display:block; } .result .result-con .list:hover .list-wrap {padding:25px 25px 15px 25px;} .result .result-con .list:hover .text p {position:absolute; right:25px; top:25px;} .result .result-con .list:hover .text p span {display:none;} .result .result-con .list:hover .text p span.on {display:block; padding:0 3px;} .result .result-con .list:hover .price {margin-top:5px;}*/ .result .result-con .list .list-wrap .btn {margin-top:15px; display:flex; justify-content:space-between; align-items:center; gap:5px;} .result .result-con .list .list-wrap .btn > a {display:block; padding:12px 20px; font-size:16px; border:1px solid #d1d1d1; border-radius:5px; font-weight:500; width:50%; text-align:center;} .result .result-con .list .list-wrap .btn > a.consultFormBtn ,.result .result-con .list .list-wrap .btn > a.bg {background:#1a1a1a; color:#fff;} .result .result-con .list .list-wrap .btn > a:hover {background:#f5f5f5;} .result .result-con .list .list-wrap .btn > a.bg:hover {background:#D10005;} .text-center {text-align:center;} /*viewpage*/ #viewSlide { padding:40px 0; /*background:url('/_img/view_bg_202304.png') no-repeat 67% 50% #dddddd;*/ background-image:url('/_img/view_bg_202304.png'); background-repeat: no-repeat; background-color: #dddddd; /* background-size:100% 100%; */ background-size:cover; background-position: 60%; } #viewSlide.trimSale { padding:80px 0; } #viewSlide.detailslide {padding:100px 0;} #viewSlide.detailslide.sale {padding:100px 0;} #viewSlide .viewSlideWrap { width:1200px; margin:0 auto; } #viewSlide .viewSlideWrap .viewSlideCont { width:855px; } #viewSlide .container {} #viewSlide .viewcontainer {width:940px;} #viewSlide .viewcontainer .viewcontent {width:630px; margin:0 auto;} #viewSlide .tit { background-color:rgba(255,255,255,0.2); border-radius:10px; } #viewSlide .tit h2 {display:flex; gap:10px; justify-content:center; align-items:center; font-size:32px; font-weight:bold;} #viewSlide .tit h2 .brand {width:65px; } #viewSlide .tit p {font-size:16px; line-height:24px; font-weight:400;} #viewSlide .tit p span {padding:0 3px;} #viewSlide .viewSwiper2 { height:295px; margin:30px 0 0 0; text-align:center;} #viewSlide .viewSwiper2 .swiper-wrapper img {width:auto; height:230px; overflow:hidden;} #viewSlide .thumbs .swiper-wrapper img {width:110px; height:auto; overflow:hidden;} #viewSlide .viewSwiperExt .swiper-wrapper ,#viewSlide .viewSwiperInt .swiper-wrapper { height:280px; margin: 20px 0 55px 0} .viewSwiperExt img {max-width:580px;} #viewSlide .viewSwiperExt .swiper-wrapper .swiper-slide ,#viewSlide .viewSwiperInt .swiper-wrapper .swiper-slide { text-align:center; } #viewSlide .intimg {display:flex; align-items:center; justify-content:center; height:270px; overflow:hidden;} /* #viewSlide .viewSwiperExt .swiper-wrapper .swiper-slide .img-responsive ,#viewSlide .viewSwiperInt .swiper-wrapper .swiper-slide .img-responsive { width: auto; height: 100%; } */ #viewSlide .thumbs {position:relative; cursor:pointer; text-align:center;} #viewSlide .thumbs .arrow {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:118%; z-index:9;} #viewSlide .thumbs .arrow .swiper-button-prev {color:transparent;} #viewSlide .thumbs .arrow .swiper-button-next {color:transparent;} #viewSlide .thumbs .arrow .swiper-button-next:after {content:url('/_img/veiwarrow.png'); line-height:4px; } #viewSlide .thumbs .arrow .swiper-button-prev:after {content:url('/_img/veiwarrow.png'); transform: rotate(180deg); line-height:4px;} #viewSlide .tabs {position:relative;} #viewSlide .tabs ul.horizontal {position:absolute; bottom:136px; left:50%; transform:translate(-50%, 0); z-index:10; display:flex; justify-content:center; gap:15px;} #viewSlide .tabs ul.horizontal li a {display:block; padding:8px 0; font-size:17px; color:#8c8c8c; } #viewSlide .tabs ul.horizontal li.active a {color:#000; font-weight:bold; border-bottom:2px solid #000;} #viewSlide .thumbs .swiper-wrapper {} #viewSlide .thumbs .swiper {background:rgba(255,255,255,0.4); border-radius:22px; padding:15px; height:120px;} #viewSlide .thumbs .swiper-slide {display:flex; flex-direction:column; justify-content:center; align-items:center; } #viewSlide .thumbs .swiper-slide p {margin-top:5px; font-size:13px; text-align:center; padding:0 10px; height:30px;} #viewSlide .thumbs .swiper-slide.swiper-slide-thumb-active p {color:#000; font-weight:bold;} .ext-view {position:absolute; top:50px; left:-41px; padding:17px 0; background:rgba(255,255,255,0.4); border-radius:22px; z-index:9;} .ext-view input {display:none; appearance:none; display:none;} .ext-view input + label {display:block; padding:6px 17px; cursor:pointer; font-size:16px; font-weight:500; color:#8c8c8c;} .ext-view input:checked + label {color:#000; font-weight:bold;} #viewDivide {margin:40px 0; scroll-behavior: smooth; } #viewDivide .container {position:relative; display:flex; gap:60px; justify-content:space-between;} #viewDivide .container .conLeft {width:880px; position:relative; } /* #viewDivide .container .conLeft {position:relative; width:285px;} */ // #viewDivide .container .conRight { width:285px; position:absolute; right:0; background-color:white; } .container .conRight { width:360px; position:absolute; right:0; z-index:9;} .container .conRight .conRightDyn { width:360px; margin-top:20px; z-index: 1000; } .viexfixedbd {margin-top:-2px; padding:20px; border:1px solid #b3b3b3; border-radius:7px; box-sizing:border-box;} .viexfixed {margin-top:-2px; padding:17px; border-right:1px solid #b3b3b3; border-left:1px solid #b3b3b3; border-bottom:1px solid #b3b3b3; border-bottom-right-radius:7px; border-bottom-left-radius:7px; box-sizing:border-box; background:#fff;} .viexfixed .catalog {width:100%; text-align:right; margin:5px 0;} .viexfixed .catalog .btn {display:flex; justify-content:end;} .viexfixed .catalog .btn button {display:inline-block; width:auto; margin:0 0 0 5px; padding: 7px 10px; font-size:13px; line-height:13px; border:1px solid #d1d1d1; border-radius:3px; background:#fff; font-weight:500;} .viexfixed .catalog .btn button:hover {background:#f4f4f4;} .viexfixed .model select {margin-bottom:7px; padding:10px 15px; width:100%; background:url('/_img/select_down.png') no-repeat #fafafa; background-size:15px; background-position:top 50% right 10px; color:#666666; border-radius:500px; font-size:13px; font-weight:500; letter-spacing:-0.5px; cursor:pointer;} .viexfixed .img {margin-bottom:10px; width:200px; margin:0 auto;} .viexfixed dl {display:flex; justify-content:space-between; align-items:baseline; } .viexfixed dl dt {width:56px; font-size:13px; color:#8c8c8c;} .viexfixed dl dd {text-align:right; font-size:14px; line-height:24px; width:100%;} .viexfixed dl dd .btn {margin-top:5px; display:flex; justify-content:flex-end; gap:3px;} .viexfixed dl dd .btn a ,.viexfixed dl dd .btn button {width:85px; display:block; padding:7px 10px; line-height:13px; border:1px solid #d1d1d1; font-size:13px; letter-spacing:-0.5px; border-radius:5px;} .viexfixed dl dd .btn a:hover ,.viexfixed dl dd .btn button:hover {background:#f7f7f7; transition:all 0.5s;} .viexfixed dl.model {margin-bottom:10px;} .viexfixed dl.condition {margin-bottom:10px;} .viexfixed dl.condition dd {/*padding:0 5px 0 0; height:52px; overflow-y:scroll;*/} .viexfixed dl.condition dd::-webkit-scrollbar { width: 5px;} .viexfixed dl.condition dd::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px;} .viexfixed dl.condition dd::-webkit-scrollbar-thumb { background: #005020; border-radius: 10px;} .viexfixed dl.option {margin:10px 0; align-items:flex-start;} .viexfixed dl.option dd {height:97px;padding:0 5px 0 0; overflow-y:scroll;} .viexfixed dl.option dd::-webkit-scrollbar { width: 5px;} .viexfixed dl.option dd::-webkit-scrollbar-track { background:#f1f1f1; border-radius: 10px;} .viexfixed dl.option dd::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px;} .viexfixed dl.option .opcon {display:flex; justify-content:flex-end; gap:3px; flex-wrap:wrap;} .viexfixed dl.option .opcon button {margin-top:3px;} .viexfixed dl.option .opcon > button ,.viexfixed dl.option .opcon > label { padding:5px 10px 5px 5px; line-height:13px; border:1px solid #d1d1d1; font-size:12px; letter-spacing:-0.5px; border-radius:500px; width: auto; background-color: transparent; font-weight: normal;} .viexfixed dl.option .opcon > button > span ,.viexfixed dl.option .opcon > label > span { max-width:85px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap; display: inline-block; } .viexfixed dl.option .opcon > button .remove ,.viexfixed dl.option .opcon > label .remove {font-size:10px; font-weight:bold; color:#8c8c8c;} .viexfixed dl dd .price {font-size:22px; font-weight:bold; letter-spacing:-0.5px;} .viexfixed dl dd .vat {color:#8c8c8c; font-size:13px;} .viexfixed dl.basicprice {margin-bottom:5px;} .viexfixed .line {margin:15px 0; width:100%; height:1px; border-top:1px solid #d1d1d1;} .viexfixed .priceEnd {margin:20px 0; display:flex; align-items:center; gap:20px;} .viexfixed .priceEnd .pcon {width:50%; } .viexfixed .priceEnd .pcon p {font-size:13px; color:#8c8c8c; line-height:13px; text-align:right; justify-content:space-between;} .viexfixed .priceEnd .pcon p .big {font-size:20px; font-weight:800; letter-spacing:-0.5px;} .viexfixed .priceEnd .pcon p.vat {margin-top:8px; color:#B3B3B3; font-size:12px;} .viexfixed .priceEnd .pcon p.pconSmall {margin-top:10px; display:flex; align-items:center; font-size:9px; gap:7px; justify-content:end;} .viexfixed .priceEnd .pcon p.pconSmall .won {font-size:11px; color:#1A1A1A; font-weight:500;} .viexfixed .moreConWarp {position:relative; } .viexfixed .moreTit {position:relative; margin-bottom:-5px; text-align:center;} .viexfixed .moreTit p {position:relative; display:flex; align-items:center; justify-content:center; gap:7px; background:#fff; padding:12px 0; border-radius:5px; background:#F5F5F5; font-size:13px; font-weight:500; color:#1A1A1A; cursor:pointer; z-index:3;} .viexfixed .moreTit p .arrow {width:10px;} .viexfixed .moreTit.on p .arrow img{transform:rotate(-180deg); transition:all 0.5s;} .viexfixed .moreCon {display:none; position:absolute; top:46px; left:50%; transform:translate(-50%,0); width:100%; max-width:530px; z-index:9;} .viexfixed .underTakeWrap {padding:12px; background:#F5F5F5; border-radius:5px; color:#8c8c8c; } .viexfixed .underTakeWrap h5 {font-size:11px; font-weight:400; line-height:1.5; text-align:right;} .viexfixed .underTakeWrap .underTake {display:flex; align-items:center; } .viexfixed .underTakeWrap .underTake ul {width:50%; font-size:13px; font-weight:500; letter-spacing:-0.5px; line-height:1.5;} .viexfixed .underTakeWrap .underTake ul.right li {justify-content:end;} .viexfixed .underTakeWrap .underTake ul li {margin-bottom:6px; display:flex; align-items:center; } .viexfixed .underTakeWrap .underTake ul li .won {font-weight:700;} .viexfixed .underTakeWrap .underTake ul li .won .num {display:inline-block; width:80px; text-align:right;} .viexfixed .saleprice { display:none; position:relative; margin:0 -17px 5px -17px; padding:15px 15px 12px 15px; background:#F8F8F8; } .viexfixed .saleprice dl dt {padding:8px 8px 7px 9px; width:130px; background: linear-gradient(70deg,#EC04AE, #7800FF, #4500FF); color:#fff; border-radius:30px; font-weight:600;} .viexfixed .saleprice p {margin-top:13px; font-size:13px; font-weight:500; color:#000; line-height:1.5;} .viexfixed .saleprice .salepop { display:none; position:absolute; top:50%; left:-235px; transform:translate(0, -50%); padding:15px; background:rgba(0 0 0 / 50%); border-radius:5px; color:#fff; font-size:13px; line-height:1.5; z-index:11; } .viexfixed .saleprice:hover .salepop { display:inline; } .viexfixed .underTake h3 {font-size:14px; color:#8C8C8C;} .viexfixed .underTake h5 {font-size:12px; color:#8C8C8C; font-weight:400; text-align:right;} .viexfixed .underTake .underTakeWrap {margin:9px 0; display:flex; align-items:center; justify-content:space-between; gap:25px; } .viexfixed .underTake .underTakeWrap ul {width:50%; font-size:13px; font-weight:500; letter-spacing:-0.5px; line-height:1.5;} .viexfixed .underTake .underTakeWrap ul li {display:flex; align-items:center; justify-content:space-between; } .mg_0 {margin:0 !important;} .viexfixed button ,.viexfixed a {margin:5px 0 0 0; padding:15px 0; width:100%; font-size:16px; font-weight:bold; text-align:center; border-radius:7px; box-sizing:border-box;} .viexfixed button.btn_01 ,.viexfixed a.btn_01 {margin-top:15px; color:#D10005; border:1px solid #D10005; background:#fff;} .viexfixed button.btn_01:hover ,.viexfixed a.btn_01:hover {background:#f1f1f1; transition:all 1s;} .viexfixed button.btn_02 ,.viexfixed a.btn_02 {margin-top:10px; background:#D10005; color:#fff; } .viexfixed button.btn_02:hover ,.viexfixed a.btn_02:hover {background:#001d5d; transition:all 1s;} .conRight .imcar a ,.conRight .imcar button {display:inline-block; padding:17px 25px; width:100%; text-align:center; color:#fff; font-weight:bold; font-size:16px; background:#000; border-radius:5px;} .conRight .imcar a .arrow ,.conRight .imcar button .arrow {margin-left:10px; font-weight:300;} .fastlist .viexfixed dl.model {margin-bottom:5px;} .fastlist .viexfixed dl.model dd {font-size:16px;} .fastlist .viexfixed .fastselect { margin-bottom:3px; border-radius:500px; background:url('/_img/fastselect_arrow.png') no-repeat 95% center #fafafa; cursor:pointer;} .fastlist .viexfixed .fastselect select { padding:10px 15px; font-size:12px; color:#1a1a1a; background:none; letter-spacing:-0.7px; font-weight:500; width:100%;} .fastlist .viexfixed .fastselect2 h5 {font-size:13px; color:#8c8c8c; font-weight:400;} .fastlist .viexfixed .fastselect2 span {margin:5px 0 10px 0; display:flex; align-items:center; gap:5px; flex-wrap:wrap;} .fastlist .viexfixed .fastselect2 select { padding:10px 15px; font-size:12px; color:#1a1a1a; background:none; letter-spacing:-0.7px; font-weight:500; width:30%; border-radius:500px; background:url('/_img/fastselect_arrow.png') no-repeat 88% center #fafafa; background-size:7px;} .fastlist .viexfixed .fastselect2 p {font-size:12px; letter-spacing:-1px; } .mt-2 {margin-top:20px;} .mt-8 {margin-top:80px;} .mb-8 {margin-bottom:80px;} .mb-12{margin-bottom:120px;} /*carView 선택창*/ .conLeft .viewmenu { width:880px; position: absolute; /*top: 80px;*/ background-color: white;z-index: 100; } .conLeft .viewmenu ul {margin-bottom:5px; display:flex; justify-content:space-between; } .conLeft .viewmenu ul li {display:flex; flex-basis:25%; justify-content:center;} .conLeft .viewmenu ul li {display:block; width:100%; padding:15px 0; text-align:center; font-size:16px; color:#8c8c8c; border-bottom:1px solid #8c8c8c; cursor:pointer;} .conLeft .viewmenu ul li.on a ,.conLeft .viewmenu ul li.active {color:#000; border-bottom:2px solid #000; font-weight:bold;} .conLeft .viewmenu ul li:hover {color:#000; border-bottom:2px solid #000; font-weight:bold; transition:all 3s;} #viewCon .simple-tit {margin-bottom:20px; padding: 0 5px 0 0 ; display:flex; align-items:center; justify-content:space-between;} #viewCon .simple-tit.space-start { justify-content:start !important; gap:36px;} #viewCon .simple-tit h2.tit {margin-bottom:0;} .radioSimple {display:flex; align-items:center; margin-top:-4px;} .radioSimple li input[type="radio"] {display:none; appearance:none; display:none; } .radioSimple li input[type="radio"] + label {padding:0 17px; font-size:26px; font-weight:700; color:#000; cursor:pointer; position:relative;} .radioSimple li input[type="radio"]:checked + label {color:#D10005;} .radioSimple li:first-child input[type="radio"] + label:after {content:''; display:block; position:absolute; top:50%; right:0; transform:translate(0, -50%); width:3px; height:20px; background:#000;} #viewCon h2.tit { margin-bottom:30px; font-size:30px; font-weight:bold; letter-spacing:-1px;} #viewCon .mdtit {margin-bottom:20px; font-size:20px; font-weight:bold; letter-spacing:-1px;} #viewCon .imcar a {display:inline-block; padding:15px 25px; color:#fff; font-weight:bold; font-size:17px; background: linear-gradient(70deg, #1584cb, #2740b6); border-radius:5px;} #viewCon .imcar a:hover {background: linear-gradient(140deg, #1584cb, #2740b6); transition:all 1s;} #viewCon .imcar a .arrow {margin-left:10px; font-weight:300;} #viewCon .tabs ul {margin:30px 0; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:5px;} #viewCon .tabs ul li a {padding:10px 0; margin-right:15px; font-size:16px; color:#8c8c8c;} #viewCon .tabs ul li.active a {color:#000; font-weight:bold; border-bottom:1px solid #000;} .tabmodel {position:relative; padding:0 10px;} .modelSwiper .model-list {padding:25px; border:1px solid #b3b3b3; border-radius:15px; overflow:hidden; box-sizing:border-box; cursor:pointer;} .modelSwiper input[type="radio"]:checked + label { border:3px solid #D10005; } /* .modelSwiper .model-list.active {border:3px solid #005020;} */ .modelSwiper .model-list:hover { border:3px solid #D10005; } .modelSwiper .model-list h3 {margin-bottom:10px; font-size:20px; font-weight:bold; letter-spacing:-0.5px; } .modelSwiper .model-list h5 {font-size:16px; font-weight:bold; } .modelSwiper .model-list .tag {margin:15px 0 25px 0; display:flex; justify-content:flex-start; gap:5px; min-height:26px;} .modelSwiper .model-list .tag .best {display:inline-block; padding:7px 15px; background:#D10005; color:#fff; font-size:12px; line-height:12px; border-radius:500px;} .modelSwiper .model-list p {font-size:15px; line-height:26px; height:81px; overflow-y:scroll;} .modelSwiper .model-list p::-webkit-scrollbar {width: 5px;} .modelSwiper .model-list p::-webkit-scrollbar-track { border-radius: 10px; background:#efefef;} .modelSwiper .model-list p::-webkit-scrollbar-thumb { background:#5f5f5f; border-radius: 10px;} .modelSwiper .model-list p::-webkit-scrollbar-thumb:hover { } /* .tabmodel .swiper-button-next {color:transparent;} .tabmodel .swiper-button-next:after {color:#333; font-size:18px;} */ /* .tabmodel .swiper-button-prev:after ,.tabmodel .swiper-button-next:after { font-size:30px; } */ #Rcolor .incolor {margin-top:60px;} #Rcolor .listcon {display:flex; gap:10px; justify-content:flex-start;} #Rcolor .listcon .list {border-radius:10px; overflow:hidden; width:80px; height:80px;} #Rcolor .listcon .list span {display:block; width:100%; height:30px;} #Rcolor .input-Color span input[type="radio"]{ appearance:none; } #Rcolor .input-Color span input[type="radio"] + label {display:inline-block; position:relative; padding:5px 0; margin:0 5px 70px -3px; width:80px; height:80px; border-radius:5px; text-align:center; cursor:pointer; background-position: center center; background-repeat: no-repeat; background-size:cover;} #Rcolor .input-Color span input[type="radio"] + label .color {width:100%;} #Rcolor .input-Color span input[type="radio"] + label:before{ content:''; position:absolute; left:0; top:0; width:100%; height:80px; text-align:center; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:5px; } #Rcolor .input-Color span input[type="radio"]:checked + label:after {content: ''; position:absolute;left:50%; top:50%; width:102%; transform: translate(-50%, -50%); height:80px; border:3px solid #D10005; border-radius:5px; color:#fff; z-index:9; box-sizing:border-box;} #Rcolor .input-Color span input[type="radio"] + label p {display:none; position:absolute; left:50%; top:90px; transform: translate(-50%, 0); width:120px; font-size:12px; line-height:16px; font-weight:500; color:#8c8c8c;} #Rcolor .input-Color span input[type="radio"] + label:hover p {display:block;} #Rcolor .input-Color span input[type="radio"]:checked + label p {display:block;} #Roption .input-Option {margin-top:-20px;} #Roption .optit { position:relative; } #Roption .optit input[type="checkbox"]{ appearance:none; } #Roption .optit input[type="checkbox"] + label {position:relative; display:inline-block; padding:20px; width:100%; border:1px solid #b3b3b3; font-size:18px; font-weight:500; border-radius:5px; cursor:pointer;} #Roption .optit input[type="checkbox"]:checked + label {border:3px solid #D10005; font-weight:bold; color:#D10005;} #Roption .optit input[type="checkbox"] + label:before { content:''; position:absolute; width:20px; height:20px; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:5px; } #Roption .optit input[type="checkbox"]:checked + label:before { content:''; position:absolute; top:20px; width:20px; height:20px; background:url('/_img/opcheck.png') no-repeat center #D10005; border:1px solid #D10005; box-sizing:border-box; border-radius:5px; } #Roption .optit .buttonWrap { position:absolute; right:0; top:15px; } #Roption .optit .buttonWrap button {width:40px; height:40px;margin:10px;background-color: transparent;} #Roption .optit .buttonWrap button:after { content:'열기'; } #Roption .optit .buttonWrap button.active:after { content:'닫기'; } #Roption .optit .buttonWrap button.active img { transform:rotate(-180deg); } /* #Roption .optit input[type="checkbox"] + label:after { content:url('/_img/oparrow.png'); position:absolute; top:20px; right:20px; width:20px; height:20px; transform:rotate(0deg);} #Roption .optit:hover input[type="checkbox"] + label:after{ content:url('/_img/oparrow.png'); position:absolute; top:20px; right:20px; width:20px; height:20px; transform:rotate(0deg); transition:all 1s;} #Roption .optit input[type="checkbox"]:checked + label:after { content:url('/_img/oparrow.png'); position:absolute; top:20px; right:20px; width:20px; height:20px; transform:rotate(-180deg); } */ #Roption .optit input[type="checkbox"] + label .optxt {display:flex; padding: 0 30px; justify-content:space-between;} #Roption .opcon {display:none; padding:20px; background:#fafafa;} #Roption .opcon .img ,#Roption .opcon img {margin:12px auto 20px auto; width:100%; max-width:400px;} #Roption .opcon p {font-size:16px; line-height:26px; font-weight:500; word-break:keep-all;} #Rcondition .input-st-blue span input[type="radio"]{ appearance:none; } #Rcondition .input-st-blue {display:flex; justify-content:flex-start; border:1px solid #cecece; border-radius:5px; background:#fff; flex-wrap:wrap;} #Rcondition .input-st-blue > span {display:flex; justify-content:center;} #Rcondition .input-st-blue > span input[type="radio"] + label { display:flex; gap:7px; justify-content:center; align-items:center; width:100%; padding:17px 15px; text-align:center; box-sizing:border-box; background:#fff; border-radius:5px; cursor:pointer; font-size:18px; font-weight:500; border:3px solid transparent;} #Rcondition .input-st-blue span input[type="radio"]:checked + label {border:3px solid #D10005; font-weight:bold; color:#D10005; z-index:9;} #Rcondition .input_Term.input-st-blue span {position:relative; flex-grow: 1; } #Rcondition .input_Term.input-st-blue span:after {content:''; position:absolute; top:50%; right:0; transform: translate(0, -50%); width:1px; height:50%; background:#d2d2d2;} #Rcondition .input_Term.input-st-blue span:last-child:after {background:none;} #Rcondition .input_Year.input-st-blue span {flex-basis:50%; } #Rcondition .input_Deposit.input-st-blue span {position:relative; flex-basis:25%; } #Rcondition .input_Deposit.input-st-blue span:after {content:''; position:absolute; top:50%; right:0; transform: translate(0, -50%); width:1px; height:50%; background:#d2d2d2;} #Rcondition .input_Deposit.input-st-blue span:last-child:after {background:none;} #Rcondition .input_Advance.input-st-blue span {position:relative; flex-basis:25%; } #Rcondition .input_Advance.input-st-blue span:after {content:''; position:absolute; top:50%; right:0; transform: translate(0, -50%); width:1px; height:50%; background:#d2d2d2;} #Rcondition .input_Advance.input-st-blue span:last-child:after {background:none;} #Rgift .input span input[type="radio"]{ appearance:none; } #Rgift .input {display:flex; justify-content:flex-start; flex-wrap:wrap; border-radius:5px; background:#fff; } #Rgift .input > span {margin-bottom:10px; display:flex; justify-content:center; border:1px solid #cecece; border-radius:5px;} #Rgift .input > span input[type="radio"] + label { width:100%; padding:17px 15px; text-align:center; box-sizing:border-box; background:#fff; border-radius:5px; cursor:pointer; font-size:18px; font-weight:500;} #Rgift .input span input[type="radio"]:checked + label {border:3px solid #D10005; font-weight:bold; color:#D10005; z-index:9;} #Rgift .input span {position:relative; flex-basis:100%; } #Rgift .input > span input[type="radio"] + label .plus {padding:0 15px;} #term .container {padding:60px 0;} #term .container h2 {margin-bottom:30px; padding:25px 0; font-size:26px; background:#bababa; color:#fff; text-align:center;} #term .container h3 {margin:15px 0; font-size:20px; } #term .container p {font-size:14px; line-height:26px;} #term .container li {font-size:14px; line-height:26px;} .fc-blue {color:#1267C8;} .companytop {text-align:center; padding:40px 0 80px 0;} .companytop h3 {margin:30px 0 40px 0; font-size:25px; font-weight:400;} .companytop p {margin-top:25px; font-size:17px; line-height:29px;} .companybox {display:flex; align-items:center; justify-content:center; gap:50px;} .companybox .text {padding:30px 50px;} .companybox .text h4 {margin-bottom:15px; position:relative; font-size:24px; color:#3651E0; padding-left:15px; } .companybox .text h4:before {content:''; position:absolute; left:0; width:5px; height:100%; background:#3651E0; } .companybox .text p {font-size:16px; line-height:28px;} /*carFast*/ .sameclass {margin-top:70px; } .sameprice {margin-top:70px; } #samesw { position:relative; } #samesw .swiper {padding:0 10px 10px 0;} #samesw .list a {display:block; padding:15px 0 0 0; border-radius:10px; box-shadow:5px 5px 5px rgba(0,0,0,0.1); overflow:hidden; background:url('/_img/samecar_bg.png') repeat-x ;} #samesw .list a .img {margin:0 auto; width:255px; height:127px; overflow:hidden; } #samesw .list a:hover .img img {transform: scale(1.1); transition:all 1s;} #samesw .list a .text {padding:15px 25px 25px 25px;} #samesw .list a .text h3 {font-size:20px; font-weight:600;} #samesw .list a .text p {margin: 5px 0 15px 0; font-size:15px; font-weight:400;} #samesw .list a .text .price {font-size:20px; font-weight:800;} .subreview { position:relative; margin-top:70px; } .subreview .swiper {padding:0 10 10px 0;} .subreview .list a {display:block; border-radius:10px; box-shadow:5px 5px 5px rgba(0,0,0,0.1); overflow:hidden;} .subreview .list a .img {width:100%; height:120px;} .subreview .list a .text {padding:25px;} .subreview .list a .text h3 {font-size:16px; font-weight:600;} .subreview .list a .text p {margin: 7px 0 15px 0; font-size:14px; line-height:22px; font-weight:500; height:42px; overflow:hidden;} .subreview .list a .text h5 {font-size:14px; color:#8c8c8c; font-weight:200;} .subevent {margin-top:70px; } .subevent .swiper {padding:0 10 10px 0;} .subevent .list a .img {display:block; border-radius:15px; overflow:hidden; height:250px;} /*seven 2023 .seven-list .content {display:none;}*/ .fc-bb {color:#2c77cc;} #svimg.seven-sv .svcontainer {margin:0 auto 70px 0;} #sub.seven { padding-bottom:60px; margin-bottom:-110px;} .seven-list .carindex-tit {align-items:flex-start; margin-bottom:25px;} .seven-list .carindex-tit h2 {font-size:20px;} .seven-list select.carfilter {padding:17px 65px 17px 27px; background-size:31px; color:#4D4D4D; font-weight:500;} .seven-list .subject {margin-bottom:11px; padding:25px 47px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:20px; font-weight:500; background:#f3f3f3; border:1px solid #ECECEC; border-radius:8px;} .seven-list .subject.on {position:relative; z-index:2; } .seven-list .subject.on li {color:#000;} .seven-list .subject.on li .fc-bb {color:#2c77cc;} .seven-list .subject li {padding:0 15px; border-left:1px solid #000; line-height:15px; color:#6A6A6A; font-weight:600;} .seven-list .subject li .fc-bb {color:#989898; font-weight:700;} .seven-list .subject li:first-child {padding:0 15px 0 0 ; border:none;} .seven-list .subject .arrow {font-size:16px; line-height:16px; color:#2c77cc; font-weight:600;} .seven-list .subject .arrow span {font-size:28px; } .seven-list .subject .arrow .close span {transform:rotate(-180deg); } .seven-list .subject .arrow .close {display:none;} .seven-list .subject.on .open {display:none;} .seven-list .subject.on .close {display:flex; color:#616161;} .seven-list .right {gap:65px;} .seven-list .count p {width:120px; color:#2c77cc; font-size:18px; font-weight:600; letter-spacing:-0.5px; /*padding:7px; color:#fff; font-size:15px; border-radius:3px; text-align:center; border:1px solid #1e69bf;*/} .seven-list .count p.end {background:red;} .seven-list .content {display:none; position:relative; z-index:1; margin-top:-18px; margin-bottom:40px; padding:40px 0 0 0; box-shadow:3px 5px 5px rgba(0 0 0 / 5%); background:#fff; border-radius:0 0 8px 8px; border:1px solid #ECECEC; line-height:1.7; } .seven-list .content table {width:100%; } .seven-list .content table th {padding:0 0 20px 0; font-size:18px; border-bottom:1px solid #e4e4e4; text-align:left;} .seven-list .content table th:first-child {text-align:center;} .seven-list .content table tr.list {border-top:1px solid #dcdcdc; background-color: white;} .seven-list .content table tr.list:last-child {border:none;} .seven-list .content table td {height:114px; font-size:16px; color:#474747; text-align:left; vertical-align:middle; font-weight:500;} .seven-list .content table td:first-child {text-align:center;} .seven-list .color {text-align:left; padding:20px 10px;} .seven-list .color .list {display:flex; align-items:center; gap:7px;} .seven-list .color .colorbox {margin-top:-1px; width:17px; height:17px; border:1px solid #f3f3f3; border-radius:3px; background-position: center !important; } .seven-list .trim {padding:0; overflow: hidden; text-overflow: ellipsis; word-break:keep-all; line-height:1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .seven-list .plusbtn {position:relative; cursor:pointer;} .seven-list .plustit {padding:10px 12px; display:inline-flex; border-radius:10px; font-size:15px; background:#D10005; color:#fff; gap:7px; align-items:center;} .seven-list .plustit .plus {display:inline-block; width:17px; height:17px; line-height:17px; background:#fff; color:#D10005; border-radius:100%; text-align:center;} .seven-list .plusbtn .plusview {display:none; } .seven-list .plusbtn:hover .plusview{display:block; position:absolute; top:0; left:0; width:300px; border-radius:13px; border:1px solid #D10005; box-shadow:2px 2px 3px rgba(0 0 0 / 15%); background:#fff; text-align:left; overflow:hidden; z-index:99;} .seven-list .plusbtn .plusview .plustit {width:100%; border-radius:0; justify-content:space-between; align-items:center;} .seven-list .plusbtn .plusview .plustit button {color:#fff; background:none;} .seven-list .plusbtn .plusview .plustit .ppname {gap:5px;} .seven-list .plusbtn .plusview ul {background:#fff; padding:12px; height:255px; overflow-y:scroll;} .seven-list .plusbtn .plusview li {padding:12px; background:#f5f5f5; color:#656565; border-radius:10px; margin-bottom:7px; font-size:14px; font-weight:500; justify-content:space-between;} .seven-list .plusbtn .plusview li:last-child {margin-bottom:0;} .seven-list .plusbtn .plusview li .name {display:flex; align-items:center; gap:5px; } .seven-list .plusbtn .plusview li .name .txt {width:135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .seven-list .plusbtn .plusview li .name .check {width:17px;} .seven-list .plusbtn .plusview li .won {font-weight:bold;} .seven-list a.btn {display:inline-flex; gap:7px; align-items:center; padding:12px 17px; border-radius:8px; font-size:15px; font-weight:600;} .seven-list a.btn img {width:17px; height:17px;} .seven-list a.btn.view {background:#e4f1ff; color:#1468c8;} .seven-list a.btn.write {background:#FFE4E4; color:#C81212;/*background:#ffe4e4; color:#c81212;*/} .importOnlyDetail .seven-list a.btn.write {background:#1468c8; color:#fff; line-height:16px;} /*수입차 전용페이지*/ #sub.importOnly .container {width:1300px;} .importOnly .visual {width:100%; height:527px; background:url('/_img/imporOlny_visual.png') no-repeat center center; background-size:cover; } .importOnly .title {margin:65px 0 160px 0; text-align:center; color:#2F2110; letter-spacing:-0.5px;} .importOnly .title h2 {font-size:43px; font-weight:400; } .importOnly .title h5 {margin:35px 0; font-size:16px; color:#2D52E9; font-weight:400;} .importOnly .title p {font-size:22px; line-height:1.6;} .importOnly .ct-Brand ul {display:flex; flex-wrap:wrap; justify-content:center; gap:18px; } .importOnly .ct-Brand input[type="radio"]{ appearance:none; display:none;} .importOnly .ct-Brand input[type="radio"] + label {position:relative; display:flex; flex-direction:column; width:96px; height:96px; padding:12px; gap:7px; text-align:center; box-sizing:border-box; background:#fff; border:1px solid #cecece; border-radius:5px; cursor:pointer; font-size:14px; align-items: center; justify-content:center;} .importOnly .ct-Brand input[type="radio"]:checked + label {border:2px solid #005020; box-shadow:5px 5px 5px rgba(0,0,0,0.2); font-weight:bold; color:#005020;} .importOnly .ct-Brand input[type="radio"]:hover + label {box-shadow:5px 5px 5px rgba(0,0,0,0.2); transition:all 0.1s;} .importOnly .ct-Brand input[type="radio"] + label img {width:55px;} .importOnly .ct-Brand .all input[type="radio"] + label .img img {filter:opacity(1) grayscale(1) brightness(0);} .importOnly .ct-Brand .all input[type="radio"]:checked + label .img img {filter:none;} .importOnly .ct-Brand input[type="radio"] + label .num {display:none;} .importOnly .ct-Brand input[type="radio"]:checked + label .num {display:block; position:absolute; top:-12px; right:-12px; z-index:9; padding:6px 10px; background:#005020; color:#fff; font-size:16px; line-height:17px; border-radius:50px;} .importOnlyNew .topTitle {margin:55px 0 30px 0; text-align:center; } .importOnlyNew .topTitle img {width:581px; margin:0 auto; } .importOnlyNew .topTitle h3 {margin-top:15px; font-size:43px; color:#2D52E9; letter-spacing:-1px; font-weight:400; } .importOnlyNew .topVisual {position:relative; margin-bottom:140px; width:100%; height:248px; background:url('/_img/imonly_bg.png') top center no-repeat; background-size:cover;} .importOnlyNew .topVisual img {position:absolute; top:23px; left:50%; transform:translate(-50%,0); width:723px; z-index:10; animation:carscale 1.5s ease;} .importOnlyNew .topTxt {text-align:center; color:#2F2110;} .importOnlyNew .topTxt h2 {font-size:43px; letter-spacing:-1px; font-weight:400;} .importOnlyNew .topTxt p {margin-top:25px; font-size:22px; line-height:1.6; font-weight:400; } .importOnlyNew .ct-Brand {margin:65px 0 55px 0;} .importOnlyNew .verticalEvent {position:relative; margin-bottom:110px; background:linear-gradient(90deg, #EC04AE, #4500FF);} .importOnlyNew .verticalEvent .swiper {height:174px;} .importOnlyNew .verticalEvent .swiper-slide a {text-align:center;} .importOnlyNew .verticalEvent .swiper-slide a img {width:862px; margin:0 auto; } /*.importOnlyNew .verticalEvent .swiper-pagination {top:inherit; bottom:-20px; left:50%; transform:translate(-50%,0); display:flex; align-items:center; justify-content:center; gap:7px;} .importOnlyNew .verticalEvent .swiper-pagination .swiper-pagination-bullet {margin:0; width:11px; height:11px; background:#797979; opacity:1;} .importOnlyNew .verticalEvent .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#2D52E9;} .importOnlyNew .verticalEvent .evPage .swiper-button-prev, .importOnlyNew .verticalEvent .evPage .swiper-button-next {width:25px; height:25px; border-radius:100%; background:#6d6d6d;}*/ .importOnlyNew .verticalEvent .evPage {position:absolute; bottom:-35px; left:50%; transform:translate(-50%,0); width:120px; height:25px; display:flex; align-items:center; justify-content:space-between;} .importOnlyNew .verticalEvent .evPage .swiper-button-prev, .importOnlyNew .verticalEvent .evPage .swiper-button-next {z-index:9;} .importOnlyNew .verticalEvent .evPage .swiper-button-prev:after, .importOnlyNew .verticalEvent .evPage .swiper-button-next:after {display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; width:25px; height:25px; border-radius:100%; background:#6d6d6d; transform:rotate(90deg);} .importOnlyNew .verticalEvent .evPage .swiper-pagination {font-size:14px; color:#000; font-weight:500; line-height:10px; font-weight:bold; z-index:6;} .popup {padding:10px 5px 10px 10px !important;} .importOnlyResult {margin-top:35px;} .importOnlyResult .list a {position:relative; z-index:1;} .importOnlyResult .list {position:relative; margin-bottom:30px; padding:20px 20px 0 20px; background:#fafafa;} .importOnlyResult .list:hover {box-shadow:5px 5px 10px rgba(0 0 0 / 10%); transition:1s all;} .importOnlyResult .list .brandName {display:flex; align-items:center;} .importOnlyResult .list .brandName .brand {width:50px;} .importOnlyResult .list .brandName .name {font-size:23px; font-weight:700; letter-spacing:-0.5px;} .importOnlyResult .list .brandName .notice {display:flex; align-items:center; gap:18px; margin-left:18px; } .importOnlyResult .list .brandName .notice .text {position:relative; display:inline-block; font-size:14px; margin-top:-4px; font-weight:500; letter-spacing:-1px;} .importOnlyResult .list .brandName .notice .text:after {position:absolute; content:''; width:100%; height:1px; background:#000; bottom:-4px; left:0;} .importOnlyResult .list .brandName .notice .round {padding:6px 12px; border-radius:18px; background:#b1b1b1; font-size:13px; line-height:16px; font-weight:bold; color:#fff;} .importOnlyResult .carinfo {margin-top:-20px; display:flex; justify-content:space-between; align-items:center; padding:0 0 0 30px; color:#1a1a1a; letter-spacing:-0.5px;} .importOnlyResult .carinfo .img {position:relative; margin-left:25px; width:288px; height:144px; display:flex; align-items:center; justify-content:center;} .importOnlyResult .carinfo .img .car {position:relative; z-index:2;} .importOnlyResult .carinfo .img .mark {position:absolute; top:0; left:0; width:87px; z-index:1; } .importOnlyResult .carinfo .txt {width:550px;} .importOnlyResult .carinfo .txt h2 {margin:2px 0 10px 0; font-size:26px; font-weight:700;} .importOnlyResult .carinfo .txt p {font-size:18px; font-weight:400;} .importOnlyResult .pNotice {position:absolute; bottom:33px; left:250px; z-index:2;} .importOnlyResult .pNotice .ico {width:23px; cursor:pointer;} .importOnlyResult .pNotice .pNoticeCon {position:absolute; top:50%; left:30px; transform:translate(0,-50%); padding:15px 25px; display:none; /*display:flex;*/ flex-direction:column; justify-content:center; gap:7px; width:342px; height:127px; background:url('/_img/imonly_ico_p_pop.png') no-repeat center; background-size:cover; filter:drop-shadow(2px 4px 6px rgba(0 0 0 / 15%));} .importOnlyResult .pNotice .pNoticeCon span {font-size:16px; color:#1a1a1a; font-weight:500;} .importOnlyResult .pNotice:hover .pNoticeCon { display:flex; } .importOnlyResult .carinfo .txt .year {font-size:14px; font-weight:500;} .importOnlyResult .carinfo .price {display:flex; align-items:center; font-size:24px; font-weight:400; letter-spacing:-1px;} .importOnlyResult .carinfo .price .won {width:105px; text-align:right;} .importOnlyResult .carinfo .price .ownCar {display:inline-block; margin-right:20px; padding:8px 0; width:137px; text-align:center; font-size:18px; border-radius:30px; color:#fff; background:linear-gradient(90deg, #EC04AE, #4500FF); font-weight:500; } .importOnlyDetail .seven-list .container {max-width:1300px; margin:0 auto;} .sevenDetail { /*background:url('/_img/imonly_sub_bg.png') no-repeat top center; background-size:101% 349px;*/} .sevenDetail .container {width:1300px;} .sevenDetail .videoBg {position: absolute; width:100%; height: 350px; left:50%; transform:translate(-50%,0); overflow:hidden;} /*.sevenDetail .videoBg video { position: absolute; width: 1920px; height: 350px; left:-960px; text-align: center; }*/ .sevenDetail .videoBg video { width: 100%; height: 350px; object-fit: cover; } .sevenDetail .topVisual {position:relative; padding:0; margin-bottom:120px; display:flex; align-items:center; justify-content:space-between; height:350px;} .sevenDetail .topVisual .centerimg {position:absolute; bottom:-140px; left:50%; transform:translate(-50%,0); width:720px;} .sevenDetail .topVisual .centerimg .brand {position:absolute; width:1340px; top:-65px; left:50%; transform:translate(-50%,0); text-align:center; z-index:1;} .sevenDetail .topVisual .centerimg .car {position:relative; z-index:3;} /* .sevenDetail .topVisual .centerimg {padding:105px 0 0 0 ; position:relative; width:720px; text-align:center;} .sevenDetail .topVisual .centerimg .brand {position:absolute; width:1340px; top:65px; left:50%; transform:translate(-50%,0); z-index:2; opacity:0.5;} */ .sevenDetail .topVisual .hplus { z-index:10; } .sevenDetail .topVisual .hplus a {display:flex; flex-direction:column; align-items:center; gap:15px; font-size:35px; color:#E6E6E6; font-weight:500; text-align:center; position:relative; z-index:8; transition:all 0.5s;} .sevenDetail .topVisual .hplus a:hover img {transform:rotate(45deg); transition:all 0.5s;} .sevenDetail .topVisual .hplus a img {width:57px; border-radius:100%;} .sevenDetail .hplusPop {display:none; } .sevenDetail .hplusPop .hpPopCover {position:fixed; width:100%; height:130vh; top:-212px; left:50%; transform:translate(-50%,0); background:rgba(0 0 0 / 70%); z-index:99;} .sevenDetail .hpPopCon {position:fixed; top:75px; max-width:1015px; height:845px; left:50%; transform:translate(-50%,0); width:100%; padding:40px 20px 40px 40px; background:#fff; border-radius:10px; z-index:99; box-shadow:3px 3px 5px rgba(0 0 0 / 15%);} .sevenDetail .hpPopCon .hpint {padding:0 20px 0 0; height:730px; overflow-y:scroll;} .sevenDetail .hpPopCon .plTit {margin-bottom:15px; display:flex; align-items:center; justify-content:space-between;} .sevenDetail .hpPopCon .plTit .round {display:inline-block; padding:8px 12px; font-size:16px; color:#fff; background:#2B54E7; border-radius:30px; font-weight:500;} .sevenDetail .hpPopCon .plTit a {margin-right:-5px; display:flex; align-items:center; gap:4px; font-size:16px; font-weight:500;} .sevenDetail .hpPopCon .plTit a .arrow {width:13px; transform:rotate(-90deg);} .sevenDetail .hpPopCon li .hpList {display:flex; align-items:center; justify-content:space-between; padding:10px 0; font-size:18px; color:#000; border-top:1px solid #E2E5EB; font-weight:500; cursor:pointer;} .sevenDetail .hpPopCon li:first-child .hpList {border-top:none;} .sevenDetail .hpPopCon .hpList .info {display:flex; align-items:center; gap:6px; justify-content:end; font-size:12px;} .sevenDetail .hpPopCon .hpList .new {font-weight:700; color:#2B54E7; font-size:13px;} .sevenDetail .hpPopCon .hpCon {display:none; padding:0 0 10px 0;} .sevenDetail .hpPopCon .hpCon::-webkit-scrollbar {display:block;} .sevenDetail .hpPopCon .hpCon img {width:100%;} .sevenDetail .hpPopCon .hpCon h3.tit {position:relative; padding-left:14px; margin:17px 0 12px 0; font-size:18px; color:#000; font-weight:600; line-height:21px;} .sevenDetail .hpPopCon .hpCon h3.tit:before {content:''; position:absolute; top:0; left:0; width:6px; height:21px; background:#2B54E7;} .sevenDetail .hpPopCon .hpCon p {margin-bottom:12px; font-size:17px; line-height:1.6; font-weight:500; color:#000; font-family:'맑은 고딕';} .sevenDetail .topVisual .amount { z-index:10; } .sevenDetail .topVisual .amount {text-align:center; color:#e6e6e6; cursor:pointer; width:300px;} .sevenDetail .topVisual .amount h3 {margin-bottom:12px; position:relative; display:inline-block; font-size:29px; font-weight:400; letter-spacing:-1px;} .sevenDetail .topVisual .amount h3:after {position:absolute; content:''; bottom:-7px; left:0; width:100%; height:1px; background:#c9c9c9;} .sevenDetail .topVisual .amount h2 {font-size:58px; font-weight:800; letter-spacing:-1px;} .sevenDetail .topVisual .infoTxt {position:relative; color:#fff; z-index:9;} .sevenDetail .topVisual .infoTxt .name {display:flex; align-items:center; font-size:27px; font-weight:700; gap:10px;} .sevenDetail .topVisual .infoTxt .name .brand {width:50px;} .sevenDetail .topVisual .infoTxt p {margin:5px 0 0 0; padding:0 0 0 60px; font-size:23px; font-weight:600; line-height:1.7;} .sevenDetail .topVisual .infoTxt .hplus a {margin-top:40px; padding:0 0 0 60px; flex-direction:row; font-size:24px;} .sevenDetail .topVisual .infoTxt .hplus a img {width:48px;} .sevenDetail .topVisual .infoTxt .hplus.promo a {font-size:16px;} .sevenDetail .topVisual .infoTxt .hplus a .bar {margin:0 -3px; font-weight:300; font-size:15px;} .sevenDetail .topVisual .infoTxt .hplus a .num {position:relative;} .sevenDetail .topVisual .infoTxt .hplus a .num:after {content:''; position:absolute; bottom:-3px; left:50%; transform:translate(-50%,0); width:101%; height:1px; background:#E6E6E6; z-index:2;} .sevenDetail .topInfo { max-width:1300px; margin:0 auto 130px auto; display:flex; justify-content:space-between; letter-spacing:-0.5px; color:#1A1A1A;} .sevenDetail .infoYoutube {width:330px;} .sevenDetail .infoYoutube h3 {margin-bottom:15px; font-size:20px; font-weight:700; letter-spacing:-0.5px;} .sevenDetail .infoYoutube .ytList a {border-radius:15px; overflow:hidden;} .sevenDetail .topInfo .infoTxt .name {display:flex; align-items:center; font-size:27px; font-weight:700; gap:10px;} .sevenDetail .topInfo .infoTxt .name .brand {width:61px;} .sevenDetail .topInfo .infoTxt p {margin:5px 0 17px; padding:0 0 0 72px; font-size:23px; font-weight:600; line-height:1.7;} .sevenDetail .topInfo .infoTxt .notice {padding:0 0 0 62px; display:flex; gap:12px; align-items:flex-start; } .sevenDetail .topInfo .infoTxt .notice .round {margin-top:1px; padding:7px 11px; border-radius:18px; background:#646464; font-size:15px; font-weight:bold; color:#fff;} .sevenDetail .topInfo .infoTxt .notice li {font-size:18px; line-height:1.8; font-weight:500;} #etcEventPop {padding:30px 20px 30px 40px;} #etcEventPop .tit {margin-bottom:15px; font-size:26px; font-weight:600;} #etcEventPop .con {padding:0 20px 0 0; height:630px; overflow-y:scroll;} .fc-r {color:#B40101;} .sevenDetail .infoSale {width:680px;} .sevenDetail .infoSale p {margin-top:24px; font-size:20px; line-height:1.3; font-weight:500; text-align:right; letter-spacing:-1px;} .sevenDetail .infoSale .unit {padding:0 25px 0 0; font-size:20px; color:#1a1a1a; font-weight:600; text-align:right; letter-spacing:-0.5px;} .sevenDetail .infoGraph:before {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background: #f4f4f4; border-radius:30px; } .sevenDetail .infoGraph:after {position:absolute; top:0; left:0; content:''; width:100%; height:100%; background: linear-gradient(60deg, #EC04AE, #7800FF, #4500FF); border-radius:30px; animation:graph 2s ease;} .sevenDetail .infoGraph { position:relative; margin:10px 0; padding:8px 32px; display:flex; align-items:center; justify-content:space-between; border-radius:30px; text-align:center; color:#fff; font-weight:700; font-size:24px; } @keyframes graph{ 0% {width:0%;} 100% {width:100%;} } .sevenDetail .infoGraph .plus {position:relative; z-index:2; font-size:13px; cursor:pointer;} .sevenDetail .infoGraph .plusAdd {display:none; position:absolute; bottom:-8px; right:92px; z-index:3; width:195px; height:95px; padding:15px 20px; color:#fff; text-align:left; background:rgba(9,0,0,0.5); border-radius:3px;} .sevenDetail .infoGraph .plusAdd:after {position:absolute; bottom:15px; right:-17px; content:''; opacity:0.5; border-top:7px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #000; border-right: 7px solid transparent;} .sevenDetail .infoGraph .plusAdd h3 {font-size:16px; font-weight:500; } .sevenDetail .infoGraph .plusAdd ul {margin-top:7px; padding:0 0 0 13px; } .sevenDetail .infoGraph .plusAdd li {font-size:14px; line-height:1.4; font-weight:400; } .sevenDetail .infoGraph .min {position:relative; z-index:2; padding:0 0 0 15px; width:65%; text-align:left;} .sevenDetail .infoGraph .min:before {position:absolute; content:''; top:50%; left:0; transform:translate(0, -50%); width:7px; height:7px; border-radius:100%; background:#fff;} .sevenDetail .infoGraph .max {position:relative; z-index:2; width:20%; text-align:center;} .sevenDetail .infoArrow {padding:0 36px 0 45px; display:flex; align-items:center; justify-content:space-between; font-size:28px; font-weight:700; letter-spacing:-1px;} .sevenDetail .infoArrow .plus button {font-size:20px; background:none; line-height:1.4; font-weight:500;} .sevenDetail .infoArrow .arrowWarp {width:85.5%; display:flex; align-items:center; justify-content:space-between; gap:13px; font-size:29px; } .sevenDetail .infoArrow .arrowWarp .min {position:relative; /*width: 55px;*/ text-align:left;} .sevenDetail .infoArrow .arrowWarp .arrow {position:relative; width:100%; height:1px; background:#707070;} .sevenDetail .infoArrow .arrowWarp .arrow:before {position:absolute; content:'▶'; font-size:11px; color:#b40101; top:50%; right:0; transform:translate(0, -50%); z-index:9;} .sevenDetail .infoArrow .arrowWarp .arrow:after {position:absolute; content:'◀'; font-size:11px; color:#b40101; top:52%; left:0; transform:translate(0, -50%); z-index:9;} .sevenDetail .infoArrow .arrowWarp .max {position:relative; width: 75px; text-align:center; } .importOnlyDetail .seven-list .content table .labelWrap { display:flex; align-items:center; gap:14px } .importOnlyDetail .seven-list .content table .labelWrap .trim { display:flex; align-items:center; gap:8px; width:100%; max-width:360px;} .importOnlyDetail .seven-list .content table .labelWrap .trim .infoico {margin-top:-1px; width:20px;} .importOnlyDetail .seven-list .content table .labelWrap .mark {display:flex; align-items:center; gap:5px;} .importOnlyDetail .seven-list .content table .labelWrap .mkcon {position:relative; cursor:pointer; } .importOnlyDetail .seven-list .content table .labelWrap .mkcon:hover .mkPop {display:block;} .importOnlyDetail .seven-list .content table .labelWrap .mark .mk {display:inline-block; width:23px; height:23px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:13px; color:#fff; font-weight:700; background: linear-gradient(60deg, #EC04AE, #7800FF, #4500FF); } .importOnlyDetail .seven-list .content table .labelWrap .mark .mkPop {display:none; position:absolute; bottom:35px; width:100%; left:50%; transform:translate(-50%,0); padding:12px 0; font-size:12px; line-height:1.4; font-weight:500; color:#1a1a1a; background:#fff; border-radius:8px; box-shadow:3px 3px 3px rgba(0 0 0 / 15%); width:200px; text-align:center; z-index:9;} .importOnlyDetail .seven-list .content table .labelWrap .mark .mkPop:after {content:''; position:absolute; bottom:-7px; left:50%; transform:translate(-50%,0); border-top:10px solid #fff; border-left:7px solid transparent; border-right:7px solid transparent; filter:drop-shadow(3px 3px 3px rgba(0 0 0 / 15%)); z-index:8;} .importOnlyDetail .seven-list .content table td.sale {line-height:1.3; } .importOnlyDetail .seven-list .content table td.sale .chartWarp {display:flex; align-items:center; gap:10px;} .importOnlyDetail .seven-list .content table td.sale .chartWarp .chartico {margin-top:-6px; width:20px;} .importOnlyDetail .seven-list .content table td.price {display:flex; align-items:center; gap:11px;} .importOnlyDetail .seven-list .content table td.ftbig {font-size:18px; font-weight:500;} .importOnlyDetail .seven-list .content table td.ftbig h5 {font-size:12px; margin-top:-13px;} .importOnlyDetail .seven-list .content table td.ftbig .del {font-size:16px; color:#84888B; text-decoration:line-through;} .importOnlyDetail .seven-list .content table td.ftbig button { margin-top:3px; background-color: transparent; } .importOnlyDetail .seven-list .content table td.btn {} .importOnlyDetail .seven-list .content table td.promotxt {display:flex; align-items:center; gap:7px;} .importOnlyDetail .seven-list .content table td.promotxt span { /*float: left; margin: 0 10px;*/ } .importOnlyDetail .seven-list .content table td.promotxt .plusinfo {position:relative; cursor:pointer;} .importOnlyDetail .seven-list .content table td.promotxt .plusinfo .qico { width:20px;} .importOnlyDetail .seven-list .content table td.promotxt .plusinfo .txt {display:none; position:absolute; bottom:32px; left:50%; transform:translate(-50%,0); z-index:9; background:rgba(0 0 0 / 70%); padding:7px 15px; border-radius:3px; filter:drop-shadow(3px 3px 3px rgba(0 0 0 / 15%)); font-size:13px; color:#fff; line-height:1.4; white-space:nowrap; text-align:left;} .importOnlyDetail .seven-list .content table td.promotxt .plusinfo:hover .txt {display:block;} .importOnlyDetail .seven-list .content table td.promotxt .plusinfo .txt:after {content:''; position:absolute; bottom:-8px; left:50%; transform:translate(-50%,0); border-top:8px solid #000; border-left:5px solid transparent; border-right:5px solid transparent; z-index:8; opacity:0.7;} .importOnlyDetail .seven-list .content table td.promotxt .plusinfo:hover .txt p {} .importOnlyDetail .seven-list .content tr.listSub { display:none; } .importOnlyDetail .seven-list .content {padding:20px 20px 0 20px; background:white;} .importOnlyDetail .seven-list .contentWarp {position:relative; margin:5px 0; padding:19px 15px 10px 15px; background:#fff; border-top-right-radius:10px; border-top-left-radius:10px;} .importOnlyDetail .seven-list .contentWarp .mark {position:absolute; top:19px; right:15px; display:flex; align-items:center; gap:5px;} .importOnlyDetail .seven-list .contentWarp .mark span {display:inline-block; width:18px; height:18px; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:12px; color:#fff; font-weight:700; background: linear-gradient(60deg, #EC04AE, #7800FF, #4500FF);} .importOnlyDetail .seven-list .contentWarp .trims {width:80%; font-size:13px; color:#1A1A1A; font-weight:500;} .importOnlyDetail .seven-list .contentWarp .sale {margin:15px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:#84888B; font-weight:500; } .importOnlyDetail .seven-list .contentWarp .sale .won {font-size:15px; font-weight:600; line-height:15px;} .importOnlyDetail .seven-list .contentWarp .sale .won .small {font-size:13px; margin-left:1px;} .importOnlyDetail .seven-list .contentWarp .carPrice {display:flex; align-items:flex-start; justify-content:space-between; color:#84888B; font-size:13px; } .importOnlyDetail .seven-list .contentWarp .carPrice .won .wonWrap {display:flex; align-items:center; justify-content:end; gap:10px;} .importOnlyDetail .seven-list .contentWarp .carPrice .won {text-align:right;} .importOnlyDetail .seven-list .contentWarp .carPrice .won .vat {font-size:11px;} .importOnlyDetail .seven-list .contentWarp .carPrice .won .del {text-decoration:line-through;} .importOnlyDetail .seven-list .contentWarp .carPrice .won .wonPirce {color:#000;} .importOnlyDetail .seven-list .contentWarp .carPrice .won .wonPirce .big {font-size:16px; line-height:20px; font-weight:700;} .importOnlyDetail .seven-list .contentWarp .inventory { /*position:absolute; bottom:10px; left:15px;*/ font-size:13px; color:#84888b; font-weight:500;} .importOnlyDetail .seven-list .contBtnWarp { display:flex; justify-content: space-around; flex-direction: column; align-items: center; background-color: whitesmoke; padding: 20px; /*border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;*/ overflow:hidden; } .importOnlyDetail .seven-list .contBtnWarp a ,.importOnlyDetail .seven-list .contBtnWarp btn { /* width:100%; */ padding: 6px 10px; border-radius: 5px; background: #1467C8; font-size: 15px; color: #fff; text-align: center; } .listSub .colorWrap {display:flex; align-items:center;} .listSub .blank {position:relative; display:block; width:140px; height:285px; background:#fff; z-index:9;} .swiper.colorSlide {/*margin:0 -25px 35px -25px; padding:0 20px;*/ position:relative; margin:0 0 35px 0; /*padding:0 0 0 140px;*/ transition:all 0.5s; z-index:10;} .colorSlide .colist {position:relative; padding-top:35px; background:#f6f6f6; border-bottom-right-radius:10px; border-bottom-left-radius:10px; transform:none !important;} .colorSlide .colist .inven {position:absolute; top:15px; right:15px; padding:8px 15px; font-size:12px; line-height:12px; color:#fff; text-align:center; border-radius:30px; background:#FFA200; letter-spacing:0; font-weight:500;} .colorSlide .colist .carimg {padding:0 15px; width:100%; max-width:265px; height:120px; margin: 0 auto; } .colorSlide .colist .carimg img { display:flex; align-items:center; justify-content:center;} .colorSlide .colist .colorinfo {position:relative; display:flex; align-items:center; justify-content:space-between; margin:20px 0; padding:0 13px; } .colorSlide .colist .colorinfo .colorSqure {display:flex; align-items:center; gap:5px;} .colorSlide .colist .colorinfo .colorBox {line-height:0; /*position:relative;*/ } .colorSlide .colist .colorinfo .colorBox .cb {display:inline-block; width:17px; height:17px; position:relative; cursor:pointer; background-position: center !important;} .colorSlide .colist .colorinfo .colorBox .cb:hover:after {position:absolute; top:-9px; left:50%; transform:translate(-50%,0); content:''; opacity:80%; border-top:7px solid #fff; border-right:5px solid transparent; border-left:5px solid transparent;} .colorSlide .colist .colorinfo .colorBox .cb:hover + .colorTxt {display:block;} .colorSlide .colist .colorinfo .colorBox .colorTxt {display:none; position:absolute; top:-35px; left:10px; /*transform:translate(-50%,0);*/ font-size:12px; white-space:nowrap; padding:12px; background:rgba(255 255 255 / 80%); color:#1a1a1a; border-radius:5px; box-shadow:3px 3px 5px rgba(0 0 0 /10%); } .colorSlide .colist .colorinfo .plusinfo {display:flex; align-items:center; gap:5px; line-height:13px;} .colorSlide .colist .colorinfo .plusinfo .qico {position:relative; width:18px; cursor:pointer;} .colorSlide .colist .colorinfo .plusinfo .qico:hover:after {position:absolute; top:-10px; left:50%; transform:translate(-50%,0); content:''; opacity:80%; border-top:7px solid #000; border-right:5px solid transparent; border-left:5px solid transparent;} .colorSlide .colist .colorinfo .plusinfo .qico:hover + .qicoTxt {display:block;} .colorSlide .colist .colorinfo .qicoTxt { display:none; position:absolute; bottom:29px; left:12px; width:100%; max-width:400px; padding:6px; background:rgba(0 0 0 / 80%); color:#fff; font-size:13px; border-radius:5px; line-height:20px; white-space:nowrap; z-index:999;} /* .colorSlide .colist .colorinfo .qicoTxt:after {position:absolute; bottom:-6px; left:102px; content:''; opacity:80%; border-top:7px solid #000; border-right:5px solid transparent; border-left:5px solid transparent; }*/ .colorSlide .colist a.colorbtn {display:block; padding:5px 0; background:#1467C8; font-size:16px; color:#fff; text-align:center; border-bottom-right-radius:10px; border-bottom-left-radius:10px;} /*emp*/ #svimg.emp-sv {width:100%; min-width:1600px; height:528px; background:url('/_img/emp_top_visual.png') no-repeat top center; background-size:cover;} #empLIst { background:url('/_img/emp_per_bg.png') no-repeat center bottom #fff; background-size:cover;} #empLIst .tit {padding:170px 0 80px 0; text-align:center; color:#000;} #empLIst .tit h2 {font-size:35px; font-weight:700; line-height:1.4;} #empLIst .tit p {margin-top:28px; font-size:20px; font-weight:500;} #empLIst .empSearch .relative {position:relative; width:520px; margin:0 auto 70px auto; } #empLIst .empSearch .relative input {position:relative; padding:15px 35px 15px 0 ; width:100%; border-bottom:4px solid #D10005; background:transparent; font-size:25px; color:#111; font-weight:500; z-index:2;} #empLIst .empSearch .relative input:placeholder {color:#9D9D9D;} #empLIst .empSearch .relative button {position:absolute; top:50%; right:0; transform:translate(0,-50%); width:32px; background:transparent;} .empSlideWrap {position:relative; margin:0 auto 50px auto; width:970px;} .empSlideWrap .swiper {margin:0 -1px;} .empSlide .list input {display:none; appearance:none;} .empSlide .list {position:relative; display:block; cursor:pointer; padding:17px 0 0 0; background:#4d4d4d; border-right:1px solid #707070;} .empSlide .list .name {margin-bottom:4px; text-align:center; color:#fff; font-size:15px; line-height:15px; font-weight:500; letter-spacing:-0.5px;} .empSlide .list .name .nameTxt {position:relative; display:inline-block; margin-right:5px;} .empSlide .list .name .nameTxt .nMark {position:absolute; top:48%; right:-20px; transform:translate(0,-50%); width:14px;} /* .empSlide .list input + label .img {filter:grayscale(1) brightness(0.8);} */ .empSlide .list .empMark {position:absolute; bottom:10px; right:10px; width:27px; z-index:9;} .empSlide .list .img {text-align:center;} .empSlide .list .img img {width:107px; height:128px; overflow:hidden;} .empSlide .list.active {background:#D10005;} .empSlide .list.active .img {filter:none;} .empSlide .list.wide {width:162px !important;} .empSlideWrap .empArrow .swiper-button-prev:after {padding:0 2px 0 0; font-size:12px; font-weight:bold; color:#404040; } .empSlideWrap .empArrow .swiper-button-prev {left:-60px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:100%; background:#EFEFEF; border:1px solid #CECECE; } .empSlideWrap .empArrow .swiper-button-next:after {padding:1px 0 0 2px; font-size:12px; font-weight:bold; color:#404040;} .empSlideWrap .empArrow .swiper-button-next {right:-60px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:100%; background:#EFEFEF; border:1px solid #CECECE; } .empContentWrap {position:relative; margin:0 auto; padding:0 0 55px 0; width:970px; letter-spacing:-0.5px;} .empContent .pimg {position:absolute; width:390px; bottom:0; left:-50px; z-index:9;} .empContent .empDetail {position:relative; left:50%; transform:translate(-40%, 0); width:690px; height:400px; padding:40px 95px 40px 115px; background:#fff; border-radius:18px; box-shadow:3px 5px 5px rgba(0 0 0 / 25%); z-index:8;} .empContent .empDetail:before {content:''; position:absolute; bottom:-24px; right:-20px; width:100%; height:100%; background:rgba(255 255 255/ 60%); border-radius:18px; box-shadow:3px 5px 5px rgba(0 0 0 / 5%); transform:rotate(-1.5deg); z-index:-1;} .empContent .empDetail:after {content:''; position:absolute; bottom:-20px; right:-45px; width:100%; height:100%; background:rgba(255 255 255/ 60%); border-radius:18px; box-shadow:3px 5px 5px rgba(0 0 0 / 5%); transform:rotate(3deg); z-index:-2;} .empContent .empDetail .name {display:flex; align-items:end; gap:8px; margin-bottom:15px; font-size:18px; font-weight:500; } .empContent .empDetail .name .big {font-size:30px; line-height:30px; font-weight:800; letter-spacing:8px;} .empContent .empDetail .num {display:inline-flex; align-items:center; gap:7px; padding:8px 12px; background:#D10005; color:#fff; font-size:18px; line-height:18px; font-weight:500;} .empContent .empDetail .num a {display:flex; align-items:center; gap:7px; color:#fff;} .empContent .empDetail .num .ico {display:block; width:20px;} .empContent .empDetail .num .play {margin-left:12px; width:20px; display:block;} .empContent .empDetail .bubble {margin:20px 0 30px 0; font-size:18px; font-weight:500; color:#000; text-decoration:underline;} .empContent .empDetail .detailList { height:165px; } .empContent .empDetail .detailList li {margin-bottom:12px; font-size:18px; font-weight:500; color:#000; } .empContent .empDetail .detailList li:last-child {margin-bottom:0;} .empContent .ganMark {position:absolute; bottom:77px; right:85px; width:98px; z-index:9;} .reviewCounsel button {margin-top:70px; padding:30px 0; width:100%; text-align:center; font-size:30px; line-height:30px; color:#fff; font-weight:600; border-radius:8px; background:#D10005;} .reviewCounsel button:hover {background:#000; transition:all 0.5s;} /*judge*/ #sub.judge {margin-bottom:-212px;} .jdTit {position:relative; z-index:1; } .jdTit .container {position:relative; padding:170px 0 190px 0;} .jdTit .text h3 {font-size:72px; font-weight:700; line-height:1.3; color:#000;} .jdTit .text h2 {margin-bottom:32px; font-size:56px; font-weight:700; line-height:1.4;} .jdTit .text p {font-size:24px; font-weight:600; color:#2A2A2A;} .jdCon {padding: 0 0 150px 0; background:linear-gradient(180deg, #c9c9c9, #EAEAEA);} .jdConList {position:relative; z-index:2; top:-70px;} .jdConList .list {height:376px; padding:0 200px 0 145px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; background:#fff; box-shadow:3px 5px 5px rgba(0 0 0 / 15%); border-radius:25px; overflow:hidden; color:#0A0B0B;} .jdConList .list .text h2 {font-size:40px; font-weight:700; margin-bottom:30px; letter-spacing:-0.5px;} .jdConList .list .text p {font-size:22px; color:#565758; line-height:1.5;} .jdConList .list .text .textList {margin-top:33px; display:flex; align-items:center; gap:15px;} .jdConList .list .text .textList li {width:135px; height:47px; border-radius:10px; font-size:20px; font-weight:600; display:flex; align-items:center; justify-content:center; background:#E8E8E8;} .jdConList .list .ico {width:200px;} .jdConList .list .ico img {} .jdConList .list:first-child {padding:0;} .jdConList .list:last-child {margin-bottom:0;} .jdConList .imgList {display:flex; align-items:stretch; gap:13px;} .jdConList .imgList li {padding:35px 30px 30px 30px; background:#F1F6FA; border-radius:10px; font-size:15px; color:#979797; font-weight:500;} .jdConList .imgList li .img {width:100px; margin-bottom:17px;} .jdConList .imgList li .img.relative {position:relative; left:5px;} .jdPoint {position:relative; z-index:2; top:-30px; background:#fff; overflow:hidden;} .jdPoint .jdPointBg {padding:140px 0; background:#000; display:flex; align-items:center; justify-content:center; color:#999; font-size:56px; line-height:1.5; font-weight:400; } .jdPoint .bold {font-weight:700; color:#D10005;} .judgeCounsel {position:relative; z-index:3; top:-100px; } .judgeCounsel .container {width:1080px;} .judgeCounsel h3 {font-size:40px; font-weight:700; letter-spacing:-0.5px; color:#1c1c1c; text-align:center; } .judgeCounsel .judgeRadio {display:flex; align-items:center; justify-content:center; gap:55px; padding:30px 0 0 0;} .judgeCounsel .judgeRadio li.img {width:365px;} .judgeCounsel .judgeRadio input {display:none; appearance:none;} .judgeCounsel .judgeRadio input + label {margin-top:55px; position:relative; cursor:pointer; width:293px; height:303px;display:flex; flex-direction:column; justify-content:center; border:1px solid #dedede; border-radius:20px; background:#fff;} .judgeCounsel .judgeRadio input + label:after {content:''; position:absolute; bottom:33px; left:50%; transform:translate(-50%,0); width:30px; height:30px; border-radius:100%; background:url('/_img/judge_check.png') no-repeat center #D5D5D5; background-size:cover; } .judgeCounsel .judgeRadio input:checked + label:after {background:url('/_img/judge_check.png') no-repeat center #D10005; background-size:cover; width:38px; height:38px;} .judgeCounsel .judgeRadio input:checked + label {border:2px solid #D10005;} .judgeCounsel .judgeRadio input + label p {font-size:14px; font-weight:500; line-height:1.5; text-align:center; color:#B0B0B0; } .judgeCounsel .judgeRadio input:checked + label p {font-size:16px; color:#222;} .judgeCounsel .judgeRadio input + label .ico {margin: 0 auto 17px auto; width:72px; } .judgeCounsel .judgeRadio input:checked + label:after .ico {width:94px; } .judgeCounsel .judgeRadio input + label .jdradioCaon {position:relative; top:-20px;} .judgeCounsel .judgeRadio input:checked + label .jdradioCaon {top:-25px;} .judgeCounsel .bGreen {position:relative; top:-1px; background:#EEEEEE; padding:55px 0 150px 0; } .judgeCounsel .bGreen .container {padding:0 150px;} .judgeCounsel .inputList { display:flex; align-items:stretch; justify-content:space-between; gap:17px;} .judgeCounsel .inputList li:first-child {width:30%;} .judgeCounsel .inputList li:nth-child(2) {width:45%;} .judgeCounsel .inputList li:nth-child(3) {width:25%;} .judgeCounsel .inputList input {width:100%; padding:18px; font-size:18px; background:#fff; border-radius:2px;} .judgeCounsel .inputList input:placeholder {color:#8C8C8C;} .judgeCounsel .inputList .judgeSubmit {display:flex; align-items:stretch;} .judgeCounsel .inputList .judgeSubmit button {width:100%; background:#D10005; border-radius:2px; color:#fff; font-size:20px; font-weight:500; } .judgeCounsel .gnaAgree { margin-top:18px; display:flex; align-items:center; gap:5px; justify-content:end; } .judgeCounsel .gnaAgree ul {} .judgeCounsel .gnaAgree li {margin-bottom:4px; gap:15px; justify-content:space-between;} .judgeCounsel .gnaAgree li:last-child {margin-bottom:0;} .judgeCounsel .gnaAgree li label {width:243px;} .judgeCounsel .gnaAgree li.all {padding:0 0 10px 0; margin-bottom:10px; border-bottom:1px solid #dfdfdf; } .judgeCounsel .gnaAgree li.all label {width:333px;} /*viewEtcInfo*/ #viewEtcInfo {text-align:center; letter-spacing:-0.5px; height:100vh; display:flex; justify-content:center; align-items:center;} #viewEtcInfo .makeName {margin-bottom:15px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:25px; font-weight:600; } #viewEtcInfo .makeName .maker {width:50px;} #viewEtcInfo h3 {margin:20px auto; font-size:20px; font-weight:700;} #viewEtcInfo p {font-size:18px; line-height:1.5; font-weight:500;} #viewEtcInfo .popBtn {display:flex; align-items:center; justify-content:center; gap:8px;} #viewEtcInfo .popBtn button {display:inline-block; padding:10px 16px; background:#fff; border:1px solid #D1D1D1; border-radius:4px; font-size:15px; line-height:15px; color:#4D4D4D; font-weight:500; letter-spacing:-0.5px;} #viewEtcInfo .popBtn button:hover {background:#f4f4f4; transition:all 0.3s;} #viewEtcInfo .infoText {margin:30px auto 0 auto; width:620px; padding:20px 25px; border-radius:10px; background:#f8f8f8; } #viewEtcInfo .infoText .infoTextCon {height:70px; overflow-y:scroll; padding:0 15px 0 0;} #viewEtcInfo .infoText p {margin-bottom:20px; font-size:15px; text-align:left;} #viewEtcInfo .infoText p:last-child {margin-bottom:0;} #viewEtcChart {padding:60px 40px 40px 40px;} #viewEtcChart .chartPrice {padding:0 200px; margin:0 0 30px 0;} #viewEtcChart .chartPrice ul {display:flex; align-items:center; justify-content:space-between; border-top:1px solid #000; border-bottom:1px solid #000;} #viewEtcChart .chartPrice ul li {padding:10px 0; text-align:center; } #viewEtcChart .chartPrice ul li p {font-size:18px; font-weight:500; } #viewEtcChart .chartPrice ul li h3 {font-size:20px; margin-top:5px; font-weight:700;} #viewEtcChart .chartGraph h3.tit {margin-bottom:20px; font-size:27px; font-weight:700;} #viewEtcCarimg {position:relative; padding:32px 0 30px 0; background:url('/_img/imonly_ico_pop_bg.png') no-repeat center; background-size:cover; height:100vh;} #viewEtcCarimg .gallWrap {padding:50px 0 0 0 ;} #viewEtcCarimg .gallWrap .gallBtm {bottom:inherit; top:0;} #viewEtcCarimg .gallWrap .inimg {display:flex; align-items:center; justify-content:center; height:300px; overflow:hidden;} #viewEtcCarimg .gallInt .swiper-wrapper {padding-bottom:75px;} #viewEtcCarimg .colorTxt {margin-top:20px; text-align:center;} #viewEtcCarimg .colorTxt span {display:inline-block; padding:16px 55px; font-size:18px; font-weight:600; letter-spacing:-0.5px; color:#000; background:rgba(255 255 255 / 25%); border-radius:30px;} /*compare*/ #compare {margin:55px auto 150px auto; padding-top:100px;} #compare.list .container {width:100%; padding:0 25px;} #compare.intro .compareLink {margin-top:50px; text-align:center;} #compare.intro .compareLink a {display:inline-block; padding:30px 230px; font-size:30px; font-weight:600; letter-spacing:-0.5px; color:#fff; background:#1C4FE6; border-radius:10px;} #compare.intro .compareLink a:hover {background:#0334C2; transition:all 0.5s;} #compare.list .tbTit {position:relative; padding:13px; width:100%; background:#EFEFEF; border-radius:5px; text-align:center; font-size:13px; font-weight:600; color:#1A1A1A; line-height:12px; border-bottom:none; z-index:2;} #compare.list .tbTit .abTit {position:sticky; left:50%; transform:translate(-50%,0); display:block; width:150px;} #cpTableTop {margin-bottom:28px;} #cpTableTop .tableWarp {display:flex;} #cpTableTop .tableName {width:110px;} #cpTableTop .tableName li {margin-bottom:10px; padding:11px 0; font-size:15px; color:#8C8C8C; font-weight:400; letter-spacing:-0.5px;} #cpTableTop .tableName li:first-child {height:155px;} #cpTableTop .tableName li:last-child {margin-bottom:0;} #cpTableTop .tableCon {width:1290px; display:flex; gap:25px;} #cpTableTop .tableCon .list {flex-basis:16.66%; } .compareSelect {position:relative;} .compareSelect .selectArrow {position:absolute; display:flex; top:50%; right:14px; transform:translate(0,-50%); width:10px; height:5px; z-index:2;} .compareSelect select {position:relative; width:100%; padding:10px 30px 9px 12px; background:#fff; border:1px solid #8C8C8C; border-radius:5px; font-size:12px; color:#8C8C8C; font-weight:400; letter-spacing:-0.5px; z-index:1; cursor:pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .compareSelect select:focus {border:1px solid #3651E0;} #cpTableMid {max-width:100vw; height:90vh; overflow:scroll;} #cpTableMid::-webkit-scrollbar { height: 5px;} #cpTableMid::-webkit-scrollbar-track { background: #f1f1f1; } #cpTableMid::-webkit-scrollbar-thumb { background: #dbdbdb;} #cpTableMid table { width:100%} #cpTableMid table th {min-width:110px; max-width:110px; padding:10px 7px; font-size:13px; /* color:#8C8C8C; */ font-weight:400; text-align:left;} #cpTableMid table td {min-width:250px; max-width:250px; padding:10px 7px; font-size:13px; /*font-weight:600;letter-spacing:-0.5px; */ color:#1A1A1A; line-height:1.5; text-align:center; } #cpTableMid table td.listLock {min-width:250px; max-width:250px;} #cpTableMid table tr { border-bottom:1px solid #E1E1E1; } #cpTableMid table tr.bdNone {border:none;} #cpTableMid table th.sticky {padding:10px; position:sticky; left:0; z-index:9;} #cpTableMid table th.sticky:before {content:''; position:absolute; top:0; left:0; width:93%; height:100%; background:#fff; z-index:-1; box-shadow: 2px 0 0 0 rgba(150, 150, 150, 0.1); filter:blur(1px);} #cpTableMid table td.pdBox { /*padding:12px 15px;*/ text-align:left; } #cpTableMid table td.pdBox span { padding:0 10px 0 10px; display: block; position: relative; } #cpTableMid table td.pdBox span::before { content: "▸ "; position: absolute; left: 0px; } #cpTableMid table .lineUp li { margin-bottom:10px; } #cpTableMid table .lineUp li:last-child {margin-bottom:0;} #compare .carimgCon {margin-bottom:7px; height:130px; display:flex; flex-direction:column; justify-content:space-between;} #compare .listCon {margin-top:-5px;} #compare .listPlus {height:165px; display:flex; flex-direction:column; justify-content:center; } #compare .listPlus button {margin:0 auto;width:42px; height:42px; border-radius:100%; background:#EFEFEF;} #compare .listPlus button:hover {background:#DFDFDF; transition:all 0.5s;} #compare .imgBtn {display:flex; align-items:center; justify-content:center; gap:7px;} #compare .imgBtn button.circle {width:20px; height:20px; border-radius:100%; background:#EFEFEF;} #compare .imgBtn button.btRight {transform:scaleX(-1);} #compare .imgBtn button.copy {display:flex; align-items:center; justify-content:center; width:40px; height:20px; color:#A8A8A8; font-size:11px; letter-spacing:-0.5px; font-weight:400; border-radius:30px;} #compare .imgBtn button:hover {background:#DFDFDF; transition:all 0.5s;} #compare .listCon li {margin-bottom:8px;} #compare .listCon li:last-child {margin-bottom:0;} #compare .carimg {margin:0 auto; display:flex; align-items:center; justify-content:center; width:208px; height:104px;} #compare .tableName li {margin-bottom:8px; padding:9px 0; font-size:13px; /*color:#8C8C8C; letter-spacing:-0.5px; */ font-weight:400; text-align:left;} #compare .tableName li:first-child {height:123px;} #compare .tableName li:last-child {margin-bottom:0;} #compare .tableSelect {accent-color:#005020; padding:12px 15px;} #compare .tableSelect li {margin-bottom:3px; display:flex; align-items:baseline; gap:5px;} #compare .tableSelect li input {margin-top:1px;} #compare .tableSelect li:last-child {margin-bottom:0;} #compare .tableSelect li label {display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; cursor:pointer;} #compare .tableSelect li label .subject {width:170px; line-height:1.3;} #compare .optionBox {padding:} #compare .optionBox li {margin-bottom:3px; width:100%; display:flex; align-items:baseline; justify-content:space-between;} #compare .optionBox li:last-child {margin-bottom:0;} #compare .optionBox li .subject {width:200px; line-height:1.3; text-align:left;} .pageNewcar .tit {margin-bottom:60px; text-align:center; } .pageNewcar .tit h2 {margin-bottom:15px; font-size:40px; font-weight:700; } .pageNewcar .tit p {font-size:25px; font-weight:500;} .pageNewcar .vsBox {width:670px; background:linear-gradient(90deg, #8E2DE2, #4A00E0); color:#fff; font-size:18px; font-weight:500; line-height:1.4; text-align:center; border:2px solid #D5D5D5; border-radius:10px;} .pageNewcar .vsBox ul {padding:29px 0 23px 0; display:flex; align-items:center; justify-content:space-between; } .pageNewcar .vsBox ul li {width:25%; border-right:1px solid #894bf0;} .pageNewcar .vsBox ul li:first-child .center {position:relative; left:3px;} .pageNewcar .vsBox ul li:last-child {border:none;} .pageNewcar .vsBox .center { display:flex; align-items:center; justify-content:center; } .pageNewcar .vsBox .big {font-size:36px;} .pageNewcar .vsBox .bold {} #ncVisual {background:#F6F6F6;} #ncVisual .container {position:relative; padding:70px 0 45px 75px;} #ncVisual .text {position:relative; z-index:2;} #ncVisual .text h2 {padding-left:5px; margin-bottom:23px; font-size:38px; font-weight:300; line-height:1.3; color:#202020;} #ncVisual .img {position:absolute; z-index:1; bottom:-44px; right:130px; width:490px;} #ncCompare {padding:90px 0 100px 0;} #ncCompare .ncCompareList {margin:0 auto; width:840px; display:flex; align-items:center; justify-content:space-between; gap:27px;} #ncCompare .ncCompareList .list {border-radius:10px; border:1px solid #D2D2D2; overflow:hidden;} #ncCompare .ncCompareList .list:nth-child(2) {transform:scale(1.05); border:2px solid #8023E1;} #ncCompare .ncCompareList .list .bg {padding:16px 35px 20px 35px; background:url('../_img/nc_compare_bg.png') repeat-x; background-size:100% 140px; text-align:center; } #ncCompare .ncCompareList .list .bg h3 {font-size:19px; font-weight:600;} #ncCompare .ncCompareList .list .bg p {font-size:16px; font-weight:500;} #ncCompare .ncCompareList .list .bg .img {display:flex; align-items:center; justify-content:center; width:100%; height:105px;} #ncCompare .ncCompareList .list li {margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#000;} #ncCompare .ncCompareList .list li:last-child {margin-bottom:0;} #ncCompare .ncCompareList .list li.all {font-size:19px; font-weight:700;} #ncCompare .ncCompareList .list li.all.pp {color:#8023E1; } #ncCompare .ncCompareList .list li.all.pp .won { color:#8023E1;} #ncCompare .ncCompareList .list li .won {display:flex; align-items:center; justify-content:end; color:#929292;} #ncCompare .ncCompareList .list li .big {font-size:115%;} #ncCompare .ncCompareList .lilstWarp {padding:0 14px 20px 14px;} #ncCompare .vsBoxTit {margin:55px 0 15px 0; font-size:26px; font-weight:500; text-align:center; } .pageNewcar #ncCompare .vsBox {margin:0 auto;} #ncLink {padding:90px 0; background:#F6F6F6;} #ncLink .ncLinkWarp {margin:0 auto; width:1110px; } #ncLink .ncLinkWarp ul {display:flex; align-items:stretch; gap:15px;} #ncLink .ncLinkWarp .list {width:20%; } #ncLink .ncLinkWarp .list.on {width:40%; } #ncLink .ncLinkWarp .list a {position:relative; display:block; padding:40px 0 0 30px; background:#fff; border-radius:20px; overflow:hidden;} #ncLink .ncLinkWarp .list a .text {position:relative; z-index:2; display:flex; flex-direction:column; } #ncLink .ncLinkWarp .list a .text h3 {order:1; margin:0 0 18px 0; font-size:26px; font-weight:700; color:#000; line-height:1.3;} #ncLink .ncLinkWarp .list a .text h3 .ncBr {display:block; width:100%; height:1px; } #ncLink .ncLinkWarp .list a .text h2 {order:2; font-size:23px; font-weight:600; color:#CECECE;} #ncLink .ncLinkWarp .list a .text .img {order:4; position:relative; top:-20px; left:50%; transform:translate(-32%,0); width:366px; height:183px; display:flex; align-items:center; transition: all 0.5s ease;} #ncLink .ncLinkWarp .list a .text p {display:none; order:3; } #ncLink .ncLinkWarp .list a .btn {display:none; order:5;} #ncLink .ncLinkWarp .list.on a .bg {position:absolute; top:0; left:50%; transform:translate(-50%,0); z-index:1; background:linear-gradient(90deg, #8E2DE2, #4A00E0); width:100%; height:240px;} #ncLink .ncLinkWarp .list.on a .text h3 {order:2; margin:20px 0 5px 0; font-size:22px; font-weight:600; color:#fff; } #ncLink .ncLinkWarp .list.on a .text h3 .ncBr {display:none;} #ncLink .ncLinkWarp .list.on a .text h2 {order:1; font-size:34px; font-weight:700; color:#fff;} #ncLink .ncLinkWarp .list.on a .text p {display:block; font-size:18px; font-weight:400; color:#fff;} #ncLink .ncLinkWarp .list.on a .text .img {transform:translate(-53%,0);} #ncLink .ncLinkWarp .list.on a .btn {display:block; position:absolute; z-index:9; bottom:20px; left:50%; width:100%; transform:translate(-53%,0); } #ncLink .ncLinkWarp .list.on a .btn .bttn {display:flex; align-items:center; justify-content:center; gap:5px; width:100%; font-size:18px; font-weight:500; letter-spacing:-0.5px; transition: all 0.3s linear; } #ncLink .ncLinkWarp .list.on a .btn .bttn:hover {color:#8023E1; font-weight:700;} #ncLink .ncLinkWarp .list.on a .btn .bttn .arrow {font-size:15px;} #ncCompany {padding:90px 0; } #ncCompany .ncSwiper {margin-bottom:20px;} #ncConsult {padding:90px 0; background:#F6F6F6;} #ncConsult .container {width:1040px;} #ncConsult .inputWarp {display:flex; align-items:stretch; gap:10px; justify-content:space-between;} #ncConsult .inputWarp ul {display:flex; align-items:center; gap:10px; width: calc(100% - 170px);} #ncConsult .inputWarp li {width:30%;} #ncConsult .inputWarp li:last-child {width:40%;} #ncConsult .inputWarp li input {width:100%; font-size:20px; padding:22px 20px; color:#000; font-weight:400; background:#fff; border:1px solid #D2D2D2; border-radius:5px;} #ncConsult .inputWarp li input:focus {border:1px solid #1048FF;} #ncConsult .inputWarp li input:placeholder {color:#8A8A8A; } #ncConsult .inputWarp button {display:block; padding:22px 23px; font-size:20px; font-weight:700; color:#fff; background:#1048FF; border-radius:5px; cursor:pointer;} #ncConsult .inputWarp button:hover {background:#172F7D; transition:all 0.5s;} #ncConsult .agree {margin:15px 0 0 0; padding:0 0 0 7px; display:flex; align-items:center; gap:8px; font-size:18px; color:#161616; accent-color:#1048FF;} #ncConsult .agree input {transform:scale(1.3); margin-right:2px;} #ncConsult .agree a {font-size:18px; color:#161616; opacity:0.8;} .odometer {margin-right:-3px;}