#sub {padding-top:55px;} #term {padding-top:55px;} .svisual {padding:60px 0 40px 0; text-align: center;} .svisual h2 { font-size: 32px; font-weight: bold;} .svisual p {margin-top:10px; font-size:18px; font-weight:400;} /*빠른 간편견적*/ #sub #svimg.fast-sv .svcontainer {width:100%; height:527px;} #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:#1E53F2; border-radius:5px} #fastTab button:hover {background:#0096ce; 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 #1E53F2; box-shadow:5px 5px 5px rgba(0,0,0,0.2); font-weight:bold; color:#1E53F2;} #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 #1E53F2; font-weight:bold; color:#1E53F2;} #fastTab .category .ct-Fuel span input[type="radio"]:checked + label .fueltype {border:1px solid #1E53F2;} /*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 #1E53F2; font-weight:bold; color:#1E53F2;} /*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 #1E53F2; font-weight:bold; color:#1E53F2;} /*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 #1E53F2; font-weight:bold; color:#1E53F2;} /*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 #1E53F2; 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:#1E53F2; 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:#1E53F2;} .result .result-con .list .ab-icon span.pm {background:#007cce;} .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:hover .list-wrap .btn > a {/*color:#1E53F2;*/ border:1px solid #0864f1;} .result .result-con .list:hover .list-wrap .btn > a:hover {background:#f0fcff;} .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:hover .list-wrap .btn > a.consultFormBtn ,.result .result-con .list:hover .list-wrap .btn > a.bg {background:#0864f1;} .result .result-con .list:hover .list-wrap .btn > a.consultFormBtn:hover ,.result .result-con .list:hover .list-wrap .btn > a.bg:hover {background:#0864f1;} .text-center {text-align:center;} /*viewpage*/ #viewSlide { padding:63px 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 {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;} .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:160px; 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: #1E53F2; 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 {} .viexfixed .line {margin:12px 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:100%; } .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:#0565ed; border:1px solid #0565ed; background:#fff;} .viexfixed button.btn_01:hover ,.viexfixed a.btn_01:hover {background:#e5eff1; transition:all 1s;} .viexfixed button.btn_02 ,.viexfixed a.btn_02 {margin-top:10px; background:#1E53F2; color:#fff; } .viexfixed button.btn_02:hover ,.viexfixed a.btn_02:hover {background:#0095b4; transition:all 1s;} .conRight .conRightDyn { width:360px; margin-top:20px; z-index: 1000; } .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: linear-gradient(70deg, #1584cb, #2740b6); border-radius:5px;} .conRight .imcar a:hover ,.conRight .imcar button:hover {background: linear-gradient(140deg, #1584cb, #2740b6); transition:all 1s;} .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:#0465ED;} .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 #1E53F2; } /* .modelSwiper .model-list.active {border:3px solid #1E53F2;} */ .modelSwiper .model-list:hover { border:3px solid #1E53F2; } .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:#1E53F2; 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;} #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 #1E53F2; 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 #1E53F2; font-weight:bold; color:#1E53F2;} #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 #1E53F2; border:1px solid #1E53F2; 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 #1E53F2; font-weight:bold; color:#1E53F2; 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 #1E53F2; font-weight:bold; color:#1E53F2; 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:#0565ed; color:#fff; gap:7px; align-items:center;} .seven-list .plustit .plus {display:inline-block; width:17px; height:17px; line-height:17px; background:#fff; color:#0565ed; 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 #0565ed; 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 #1E53F2; box-shadow:5px 5px 5px rgba(0,0,0,0.2); font-weight:bold; color:#1E53F2;} .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:#1E53F2; 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:397px; background:url('/_img/emp_top_visual.png') no-repeat center; background-size:cover;} #empLIst { background:url('/_img/emp_per_bg.png') no-repeat center bottom #f3f3f4; background-size:cover;} #empLIst .tit {padding:70px 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 55px auto; } #empLIst .empSearch .relative input {padding:15px 35px 15px 0 ; width:100%; border-bottom:4px solid #1E53F2; background:transparent; font-size:25px; color:#111; font-weight:500; } #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:#3A3A3A; 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:linear-gradient(90deg, #2A37F3,#6176FF);} .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:#1E53F2; 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:#1E53F2;} .reviewCounsel button:hover {background:#0038e1; transition:all 0.5s;} /*judge*/ .embed-youtube {position: relative; width: 100%; height: 0; padding-bottom: 56.25%;} .embed-youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .html5-video-player:not(.ytp-transparent), .html5-video-player.unstarted-mode, .html5-video-player.ad-showing, .html5-video-player.ended-mode {background:#fff !important;} #sub.judge {margin-bottom:-110px; padding-bottom:110px; background:url('/_img/judge_bg.png') no-repeat center top / cover;} .jdSlide {padding-bottom:200px;} .jdSlide .container {position:relative; } .jdSlide .phone {position:absolute; top:-72px; left:50%; transform:translate(-50%,0); width:305px; z-index:9;} .jdSlide .phone .ph {filter:drop-shadow(2px 4px 6px rgba(0 0 0 / 30%));} .jdSlide .phone .emyoutube {position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:253px; } .jdSlide .phone .emyoutube video {width:100%;} .jdSlide .phone .emyoutube:before {content:''; position:absolute; top:-1px; left:50%; transform:translate(-50%,0); width:101%; height:2px; background:#fff; z-index:9;} .jdSlide .jdSwiperWarp {position:relative; z-index:8;} .jdSlide .jdSwiper {margin:65px 0 15px 0;} .judgeWarp .bigTit {margin:110px auto 95px auto; width:626px;} .judgeWarp .smTit {margin:95px auto 60px auto; width:580px; position: relative; z-index: 0;} .judgeCounsel .container {margin:0 auto; padding:43px 117px; width:888px; background:rgba(255 255 255 / 0.5); border-radius:20px; box-shadow:3px 5px 5px rgba(0 0 0 / 0.1);} .judgeCounsel h3 {font-size:40px; font-weight:700; letter-spacing:-0.5px; color:#1c1c1c; text-align:center; } .judgeCounsel .judgeRadio {margin:55px 0 40px 0; padding:0 25px; display:flex; align-items:center; justify-content:center; gap:25px; } .judgeCounsel .judgeRadio li {width:50%;} .judgeCounsel .judgeRadio input {display:none; appearance:none;} .judgeCounsel .judgeRadio input + label {position:relative; display:block; cursor:pointer; padding:25px 0 65px 0; border:1px solid #dedede; border-radius:8px; background:#fff;} .judgeCounsel .judgeRadio input + label:after {content:''; position:absolute; bottom:27px; left:50%; transform:translate(-50%,0); width:24px; height:24px; 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 #5942FF; background-size:cover;} .judgeCounsel .judgeRadio input:checked + label {border:1px solid #5942FF;} .judgeCounsel .judgeRadio .ico {margin: 0 auto 17px auto; width:56px; } .judgeCounsel .judgeRadio p {font-size:16px; font-weight:500; line-height:1.5; text-align:center; } .judgeCounsel .inputList {display:flex; align-items:stretch; justify-content:space-between; gap:17px;} .judgeCounsel .inputList li:first-child {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 {padding:0 48px; background:#232A63; border-radius:2px; color:#fff; font-size:20px; font-weight:500; } .judgeCounsel .gnaAgree {margin-top:18px; display:flex; align-items:center; justify-content:end;} .judgeCounsel .gnaAgree li { margin-bottom:5px; gap:5px;} .judgeCounsel .gnaAgree li label {width:244px;} .judgeCounsel .gnaAgree li:last-child {margin-bottom:0;} #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:#1E53F2; 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;} /*cn-carnival*/ .relative {position:relative; } a.actNone {pointer-events: none; cursor: default;} .fc-cn {color:#998663;} #sub.cn {background:#f5f5f5; color:#333;} #sub.cn .bold {font-weight:800;} .cn .cnTit {color:#333;} .cn .cnTit h3 {margin-bottom:12px; font-size:28px; font-weight:700;} .cn .cnTit h2 {font-size:48px; font-weight:800; letter-spacing:-0.5px;} #cnVisual .graText {display:inline-block; color:transparent; background:linear-gradient(180deg, #010101 15%, #4B2B16 90%);} #cnVisual .container {width:100%;} #cnVisual .img {height:1348px;} #cnVisual .img img {width:100%; height:1348px; object-fit:cover;} #cnVisual .tit {position:absolute; top:203px; left:50%; transform:translate(-50%, 0); width:95%; z-index:2;} #cnVisual .tit p {margin:0 0 23px 0; font-size:32px; font-weight:400;} #cnVisual .tit h2 {font-size:82px; font-weight:700; letter-spacing:-1px;} #cnVisual .titEx {position:relative; top:-2px; padding:0 0 20px 0; margin:0 0 400px 0; background:url('/_img/cn_visual_2.png') no-repeat top center; background-size:cover;} #cnVisual .titEx .logo {margin:0 auto; width:468px;} #cnVisual .titExText h3 {margin:77px 0 24px 0 ; font-size:28px; font-weight:700; letter-spacing:-1px; color:#fff;} #cnVisual .titExText p {font-size:16px; line-height:1.5; color:#E0E0E0; font-weight:400; color:#fff;} #cnVisual .titEx .watermark {width:1335px; margin:30px auto 0 auto;} #cnVisual .titEx .car {position:absolute; bottom:-125px; left:50%; transform:translate(-50%,0); width:810px; z-index:5;} #cnVisual .cnCounselSt {position:relative; padding:0; margin:140px 0 0 0; background:transparent; } #cnVisual .cnCounselSt .container {position:relative; padding:60px 40px 40px 40px; width:770px; margin:0 auto; background:#fff; border-radius:16px; box-shadow:0 7px 7px rgba(0 0 0 / 9%); z-index:9;} #cnVisual .cnCounselSt .cnCounselWarp {padding:30px 0 0 0 ; width:100%; box-shadow:none;} #cnVisual .cnCounselSt .cnSwiperWarp {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; z-index:2; opacity:0.2;} #cnMerit .cnTit {margin:0 0 40px 0;} #cnMerit .cnMeritWarp {padding:20px 0 25px 0; background:#fff; box-shadow:0 1px 13px rgba(0 0 0 / 10%);} #cnMerit .cnMeritWarp .list .con {margin-top:23px; padding:0 8px; display:flex; align-items:flex-start; gap:14px;} #cnMerit .cnMeritWarp .list .con .num {position:relative; left:-2px; width:36px; text-align:center; font-size:64px; font-weight:100;} #cnMerit .cnMeritWarp .list .con .text {width:calc(100% - 50px);} #cnMerit .cnMeritWarp .list .con h3 {margin:0 0 11px 0 ; font-size:18px; font-weight:700; color:#333; line-height:1.4; letter-spacing:-1px;} #cnMerit .cnMeritWarp .list .con p {font-size:13.5px; font-weight:500; color:#999; line-height:1.5; } #cnMeet {padding:140px 0 200px 0;} #cnMeet .logo {margin:0 auto; width:1564px;} #cnMeet h2 {margin:30px 0 30px 0; font-size:48px; font-weight:800; letter-spacing:-1px;} #cnMeet p {font-size:24px; font-weight:500; color:#505050; line-height:1.6;} #cnMeet .cnMeetBtn {max-width:900px; margin:40px auto 0 auto; } #cnMeet .cnMeetBtn a {position:relative; display:block; text-align:center; color:#fff; transform:scale(1);} #cnMeet .cnMeetBtn a .bg {padding:32px 0 30px 0; background:url('/_img/cnmeet_btn_bg.png') no-repeat center; background-size:contain; } #cnMeet .cnMeetBtn a:hover {transform:scale(1.05); transition:all 0.5s;} #cnMeet .cnMeetBtn a h4 {margin-bottom:10px; font-size:16px; font-weight:500; } #cnMeet .cnMeetBtn a .btnFlex {display:flex; align-items:center; justify-content:center; gap:14px;} #cnMeet .cnMeetBtn a .btnFlex .tri {width:53px;} #cnMeet .cnMeetBtn a h3 {font-size:34px; font-weight:700; letter-spacing:-1px; text-shadow:0 4px 5px rgba(0 0 0 / 25%);} #cnMeet .cnMeetBtn a .arrow {position:absolute; bottom:-6px; left:50%; transform:translate(-50%,0); width:93px; z-index:2; animation: cnMeetBtn 1.5s ease-in infinite;} @keyframes cnMeetBtn{ 0% {bottom:-6px;} 50% {bottom:6px;} 100% {bottom:-6px;} } #cnStyle .container {width:900px;} #cnStyle .cnTit {margin:0 0 40px 0;} #cnStyle .caution {margin-top:20px; display:flex; aling-items:baseline; gap:5px; font-size:16px; line-height:1.4; font-weight:400; color:#999;} #cnStyle .cnStyleList { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 175px); gap: 4px; padding: 0; margin: 0; list-style: none;} #cnStyle .cnStyleList li a {display:block; height:100%; overflow:hidden;} #cnStyle .cnStyleList li a img {width:100%; height:100%; object-fit:cover; transform:scale(1); } #cnStyle .cnStyleList li a:hover img { transform:scale(1.1); transition:all 1s; } #cnStyle .cnStyleList li:nth-child(1) {grid-column: 1 / span 2; grid-row: 1 / span 3;} #cnStyle .cnStyleList li:nth-child(2) {grid-column: 3 / span 4; grid-row: 1 / span 2;} #cnStyle .cnStyleList li:nth-child(3) {grid-column: 1 / span 2; grid-row: 4 / span 2;} #cnStyle .cnStyleList li:nth-child(4) {grid-column: 3 / span 2; grid-row: 3 / span 2;} #cnStyle .cnStyleList li:nth-child(5) {grid-column: 5 / span 2; grid-row: 3 / span 1;} #cnStyle .cnStyleList li:nth-child(6) {grid-column: 3 / span 2; grid-row: 5 / span 1;} #cnStyle .cnStyleList li:nth-child(7) {grid-column: 5 / span 2; grid-row: 4 / span 2;} #cnApprove {margin:80px 0 190px 0; padding:108px 0; background:url('/_img/cn_approve_bg.png') no-repeat top center / cover; color:#fff;} #cnApprove .mark {margin:0 auto; width:220px;} #cnApprove h2 {margin:38px 0 30px 0; font-size:32px; font-weight:700; letter-spacing:-1px;} #cnApprove p {font-size:16px; font-weight:400; line-height:1.7; letter-spacing:0; color:#f2f2f2;} .cnSwiperWarp { overflow: hidden; white-space: nowrap; width: 100%; display:flex; flex-direction:column; gap:32px;} .cnSwiper { display: inline-block; white-space: nowrap; animation: scroll-left 50s linear infinite;} .cnSwiper.reverse { animation: scroll-right 50s linear infinite;} .cnSwiper span { display: inline-block; margin-right: 40px; font-weight: bold; font-size: 18px; padding: 10px 20px; background: #fff; border-radius: 50px; color: #333;} @keyframes scroll-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @keyframes scroll-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } .cnCounselSt {padding:0 16px 40px 16px; background:url('/_img/cnCounsel_bg.png') no-repeat center 85%; background-size:contain;} .cnCounselSt .cnTit {margin:0 0 33px 0;} .cnCounselSt .cnCounselWarp {padding:50px 40px; background:#fff; border-radius:16px; box-shadow:0 7px 7px rgba(0 0 0 / 9%); margin:0 auto; width:778px;} .cnCounselSt .inputList {display:flex; flex-direction:column; gap:21px; color:#1a1a1a;} .cnCounselSt .inputList li {display:flex; align-items:center; gap:16px;} .cnCounselSt .inputList li:nth-child(3) {margin-top:10px;} .cnCounselSt .inputList input {padding:20px 23px; font-size:16px; font-weight:500; width:calc(100% - 114px); border:1px solid #DBDBDB; border-radius:6px;} .cnCounselSt .inputList input::placeholder {color:#B3B3B3;} .cnCounselSt .inputList li label {width:98px; font-size:18px; font-weight:600; } .cnCounselSt .inputList li .sbText {font-size:18px; width:calc(100% - 114px);} .cnCounselSt .cnSubmit button {padding:18px 0; width:100%; text-align:center; font-size:20px; font-weight:700; color:#fff; background:#998663; border-radius:6px;} .cnCounselSt .gnaAgree {margin:55px 0 25px 0;} .cnCounselSt .gnaAgree ul {display:flex; flex-direction:column; gap:7px;} .cnCounselSt .gnaAgree li {justify-content:space-between;} .cnCounselSt .gnaAgree a {font-size:16px; color:#8c8c8c;} .cnCounselSt .gnaAgree input[type="checkbox"] + label {padding-left:30px; font-size:16px;} .cnCounselSt .gnaAgree input[type="checkbox"]:checked + label:after {width:18px; height:18px; border:1px solid #998663; background:url('/_img/cn_check_on.png') no-repeat #998663; background-size:cover; border-radius:3px;} .cnCounselSt .gnaAgree input[type="checkbox"] + label:before {width:18px; height:18px; border:1px solid #cec7b9; background:url('/_img/cn_check.png') no-repeat #fff; background-size:cover; border-radius:3px;} #glightbox-body {display:flex; align-items:center; } .glightbox-container .gcontainer {position:relative; margin:0 auto; max-width:1030px; padding:0 30px; height:fit-content !important; } .glightbox-container .ginner-container.desc-bottom, .glightbox-container .ginner-container.desc-top { flex-direction:column-reverse !important; gap:15px;} .glightbox-clean .gdesc-inner {padding:0 !important;} .glightbox-mobile .glightbox-container .gslide-description {padding:0 !important; background:none !important; top:25px; left:25px; height:fit-content;} .glightbox-clean .gslide-description {background:transparent !important; color:#fff;} .glightbox-mobile .glightbox-container .gslide-desc {color:#fff !important;} .glightbox-clean .gslide-desc {font-size:24px !important; font-family:'Pretendard', 'Dotum', sans-serif !important; } .glightbox-clean .gprev {top:52% !important; left:10px !important; transform:translate(0, -50%) scaleX(-1);} .glightbox-clean .gnext {top:52% !important; right:10px !important; transform:translate(0, -50%); } .glightbox-clean .gnext, .glightbox-clean .gprev { background:url('/_img/gslide_arrow.png') no-repeat center #fff !important; background-size:16px !important; width:40px !important; height:40px !important; border-radius:100% !important;} .glightbox-clean .gnext svg, .glightbox-clean .gprev svg {display:none;} .gclose.disabled, .gnext.disabled, .gprev.disabled {opacity:.5 !Important;} .glightbox-clean .gclose {opacity:1 !Important; top:4px !important; right:25px !important;} .glightbox-clean .gclose svg {width:27px !important;} .glightbox-clean .gslide-media {width:100%; height:645px; overflow:hidden;} .glightbox-clean .gslide-media img {width:auto; height:645px; object-fit:cover;} .imgBg { width: 100%; max-width: 929px; margin: 0 auto 120px; position: relative; z-index: 1; } .imgBg img { display: block; width: 100%; height: auto; object-fit: cover; } /*다타랩심사패스*/ #dataPass .dataVid { position: relative; width: 100%; } #dataPass .dataVid:before { content: ""; display: block; padding-top: 42.25%; } #dataPass .dataVid > video { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; height: auto; object-fit: cover; } #dataPass .titEx { padding: 130px 15px; background-color: #262C46; } #dataPass .cnCounselSt {position:relative; padding:0 0 125px; background:transparent;} #dataPass .cnCounselSt .cnTit {margin:0 0 33px 0;} #dataPass .cnCounselSt .cnTit > h3 {margin-bottom: 12px; font-size: 28px; font-weight: 700; color: #fff;} #dataPass .cnCounselSt .cnTit > h2 {font-size: 48px; font-weight: 900; color: #fff;} #dataPass .cnCounselSt .cnTit > h2 > span {color: #CED7FF;} #dataPass .cnCounselSt .cnCounselWarp {position:relative;padding:60px 40px 40px 40px; width:100%; max-width: 778px; margin:0 auto; background-color: #fff;border-radius:16px; box-shadow:0 7px 7px rgba(0 0 0 / 9%); z-index:9;} #dataPass .cnCounselSt .cnSwiperWarp {position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); width:100%; z-index:0; opacity:0.2;} #dataPass .fc-cn {color:#465181;} #dataPass .cnCounselSt .inputList {display:flex; flex-direction:column; gap:21px; color:#1a1a1a;} #dataPass .cnCounselSt .inputList li {display:flex; align-items:center; gap:16px;} #dataPass .cnCounselSt .inputList li:nth-child(3) {margin-top:10px;} #dataPass .cnCounselSt .inputList input {padding:20px 23px; font-size:16px; font-weight:500; width:calc(100% - 114px); border:1px solid #DBDBDB; border-radius:6px;} #dataPass .cnCounselSt .inputList input::placeholder {color:#B3B3B3;} #dataPass .cnCounselSt .inputList li label {width:98px; font-size:18px; font-weight:600; } #dataPass .cnCounselSt .inputList li .sbText {font-size:18px; width:calc(100% - 114px);} #dataPass .cnCounselSt .cnSubmit button {padding:18px 0; width:100%; text-align:center; font-size:20px; font-weight:700; color:#fff; background:#465181; border-radius:6px;} #dataPass .cnCounselSt .gnaAgree {margin:55px 0 25px 0;} #dataPass .cnCounselSt .gnaAgree ul {display:flex; flex-direction:column; gap:7px;} #dataPass .cnCounselSt .gnaAgree li {justify-content:space-between;} #dataPass .cnCounselSt .gnaAgree a {font-size:16px; color:#8c8c8c;} #dataPass .cnCounselSt .gnaAgree input[type="checkbox"] + label {padding-left:30px; font-size:16px;} #dataPass .cnCounselSt .gnaAgree input[type="checkbox"]:checked + label:after {width:18px; height:18px; border:1px solid #465181; background:url('/_img/cn_check_on.png') no-repeat #465181; background-size:cover; border-radius:3px;} #dataPass .cnCounselSt .gnaAgree input[type="checkbox"] + label:before {width:18px; height:18px; border:1px solid #cec7b9; background:url('/_img/cn_check.png') no-repeat #fff; background-size:cover; border-radius:3px;} #dataPass .cnSwiper .img-responsive {width:auto;margin:0 20px;} #dataPass .cnHamoniSt { position: relative; padding: 200px 15px 120px; } #dataPass .cnHamoniSt.bg_1 { padding: 200px 0 125px; } #dataPass .cnHamoniSt.bg_1:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-image: url('/_img/dataPass/bg_cnHamoniSt1.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; transform: translate(-50%, -50%); opacity: .15; z-index: 0; } #dataPass .cnHamoniSt.bg_1 .container { position: relative; z-index: 1; } #dataPass .cnHamoniSt .cnHamoniStWarp > h2 { margin-bottom: 40px; font-size: 72px; line-height: 1.05; font-weight: 900; letter-spacing: -2px; color: #fff; } #dataPass .cnHamoniSt .cnHamoniStWarp > h3 { margin-bottom: 40px; font-size: 50px; line-height: 1.05; font-weight: 700; letter-spacing: -2px; color: #fff; } #dataPass .cnHamoniSt .cnHamoniStWarp > h4 { margin-bottom: 40px; font-size: 50px; line-height: 1.1; font-weight: 700; letter-spacing: -1.6px; color: #fff; } #dataPass .cnHamoniSt .cnHamoniStWarp > h5 { margin: 0 auto 40px; max-width: 1040px; font-size: 24px; line-height: 1.5; font-weight: 400; letter-spacing: -0.3px; color: #fff; word-break: keep-all; } #dataPass .cnHamoniSt .cnHamoniStWarp > h5 strong { color: #A2B8FF; font-weight: 700; } #dataPass .cnHamoniSt .cnHamoniStWarp > p { margin-bottom: 20px; font-size: 20px; line-height: 1.2; font-weight: 500; color: #D3D3D3; } #dataPass .cnHamoniSt.bg_1 .cnHamoniStList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 auto 84px; max-width: 1160px; } #dataPass .cnHamoniSt.bg_1 .cnHamoniStList li { text-align: left; min-height: 148px; padding: 22px 24px; border: 1px solid #d7dbe8; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(20, 25, 55, 0.18); } #dataPass .cnHamoniSt.bg_1 .cnHamoniStList li h6 { margin-bottom: 10px; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.6px; color: #1f2b59; } #dataPass .cnHamoniSt.bg_1 .cnHamoniStList li p { font-size: 16px; line-height: 1.45; font-weight: 500; color: #A8A8A8; letter-spacing: -0.35px; } #dataPass .cnHamoniSt.bg_2 { padding: 250px 0 230px; } #dataPass .cnHamoniSt.bg_2:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-image: url('/_img/dataPass/bg_cnHamoniSt2.png'); background-size: cover; background-position: center bottom; background-repeat: no-repeat; transform: translate(-50%, -50%); opacity: .15; z-index: 0; } #dataPass .cnHamoniSt.bg_2 .cnHamoniStWarp > p { margin-bottom: 80px; color: #A8A8A8; } #dataPass .cnHamoniSt img { display: block; width: auto; max-width: 80%; margin: 0 auto 40px; } #dataPass .cnCompareTable { display: flex; flex-flow: row nowrap; width: 100%; } #dataPass .cnCompareTable img { max-width: 100%; margin: 0 auto; } #dataPass .cnHamoniStWarp { position: relative; text-align: center; z-index: 1; } #dataPass .cnHamoniFormBtn { display: inline-flex; align-items: center; justify-content: center; width: 388px; max-width: 100%; height: 70px; margin: 0 auto; padding: 0 30px; border: 1px solid #f7e100; border-radius: 999px; background: linear-gradient(180deg, #ffef47 0%, #f5dd00 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } #dataPass .cnHamoniFormBtn span { font-size: 28px; font-weight: 900; line-height: 1; color: #1f2b59; letter-spacing: -0.8px; } #dataPass .cnHamoniFormBtn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7); } #dataPass .cnHamoniFormBtn:active { transform: translateY(1px); } #dataPass .cnHamoniSt > h3 { margin-bottom: 40px; text-align: center; font-size: 50px; line-height: 1.05; font-weight: 700; letter-spacing: -2px; color: #01014D; } #dataPass .cnHamoniSt > p { margin-bottom: 40px; text-align: center; font-size: 20px; line-height: 1.2; font-weight: 500; color: #666666; } #dataPass .faqlist { padding: 0; } #dataPass .faqlist .container { max-width: 1200px; } #dataPass .faqlist .que { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 15px; padding: 30px 78px 30px 30px; background-color: #F0F4FF; border-radius: 20px; box-shadow: 0 8px 12px rgba(17, 31, 80, 0.08); cursor: pointer; } #dataPass .faqlist .que:first-child { margin-top: 0; } #dataPass .faqlist .que.on { background: transparent; box-shadow: none; } #dataPass .faqlist .que .fc-q { color: #2f4fc9; font-size: 34px; line-height: 1; font-weight: 900; } #dataPass .faqlist .que .text { font-size: 30px; line-height: 1.35; font-weight: 800; letter-spacing: -0.8px; color: #111a3c; word-break: keep-all; } #dataPass .faqlist .que .arrow { position: absolute; right: 30px; top: 50%; width: 18px; transform: translateY(-50%); transition: transform 0.25s ease; } #dataPass .faqlist .que .arrow > img { max-width: 100%; margin: 0 auto; } #dataPass .faqlist .que.on .arrow { transform: translateY(-50%) rotate(180deg); } #dataPass .faqlist .anw { display: none; margin: 0; padding: 0 30px 28px 30px; background: #fff; } #dataPass .faqlist .anw .flex { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border-radius: 12px; background: #f5f8ff; } #dataPass .faqlist .anw .bold { margin-top: 3px; font-size: 30px; line-height: 1; font-weight: 900; color: #2f4fc9; } #dataPass .faqlist .anw .text { font-size: 24px; line-height: 1.6; font-weight: 500; color: #2f3554; letter-spacing: -0.3px; } #dataPass .cnHamoniReviewRoll { position: relative; width: 100%; padding: 5px 0; overflow: hidden; white-space: nowrap; } #dataPass .cnHamoniReviewRoll + .cnHamoniReviewRoll { margin-top: 14px; } #dataPass .cnHamoniReview { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 24px; width: max-content; margin: 0; padding: 0; list-style: none; animation: cnHamoniReviewRoll 300s linear infinite; will-change: transform; } #dataPass .cnHamoniReviewRoll.dirLtr .cnHamoniReview { animation-direction: reverse; } #dataPass .cnHamoniReviewRoll.dirRtl .cnHamoniReview { animation-direction: normal; } #dataPass .cnHamoniReview:hover { animation-play-state: paused; } #dataPass .cnHamoniReview li { float: none; display: block; max-width: 658px; height: 350px; list-style: none; } #dataPass .cnHamoniReview li > a { display: flex; flex-direction: row; gap: 25px; height: 100%; padding: 25px 28px; border: 1px solid #e3e7f2; background: rgba(255, 255, 255, .25); border-radius: 12px; border: 1px solid rgba(255, 255, 255, .5); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: normal; } #dataPass .cnHamoniReview .thumbImg { position: relative; width: 60%; height: 100%; background: #f2f4fa; overflow: hidden; } #dataPass .cnHamoniReview .thumbImg .img-responsive { display: block; position: absolute; top: 50%; left: 0; width: 100%; max-width: 100%; min-height: 100%; height: auto; transform: translate(0, -50%); margin: 0; } #dataPass .cnHamoniReview .txt { width: 40%; text-align: left; white-space: normal; color: #fff; } #dataPass .cnHamoniReview .txt div { display: inline-flex; align-items: center; justify-content: center; height: 30px; margin-bottom: 15px; padding: 0 10px; font-size: 12px; background: rgba(191, 188, 188, 0.20); border: 1px solid #D0D0D0; border-radius: 15px; } #dataPass .cnHamoniReview .txt h3 { font-size: 20px; line-height: 1.35; font-weight: 700; letter-spacing: -0.3px; white-space: normal; word-break: keep-all; word-wrap: break-word; } #dataPass .cnHamoniReview .txt p { margin-top: 10px; font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: -0.1px; white-space: normal; word-break: keep-all; word-wrap: break-word; } @keyframes cnHamoniReviewRoll { 0% { transform: translateX(0); } 100% { transform: translate3d(-50%, 0, 0); } } #dataPass .cnHamoniSt.reviewSec { padding: 95px 0 125px; } #dataPass .cnHamoniSt.reviewSec .cnHamoniStWarp > p { margin-bottom: 50px; color: #A8A8A8; } /* 유예할부렌트 전용관 — suspended.php 전용 (sub.css 미사용) */ #sub.suspended-page { padding: 0; max-width: none; } .suspended-page .sp-inner { max-width: 1200px; width: calc(100% - 40px);margin: 0 auto; padding: 42px 40px; } .suspended-page .sp-card-grid.sp-inner {margin-bottom: 60px; padding: 0;} #suspendedPage { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; color: #0f172a; overflow-x: hidden; background: #fff; } #suspendedPage * { box-sizing: border-box; } #suspendedPage img:not(.sp-hero__car) { max-width: 100%; height: auto; } /* ── 히어로: 1) hero_bg = 피그마 515:756(인테리어만, 텍스트·선 없음) 2) 텍스트·스크롤선 HTML/CSS 3) hero_car = 515:762 ── */ .sp-hero { position: relative; height: clamp(560px, 43.65vw, 838px); min-height: 560px; display: flex; align-items: flex-start; justify-content: center; overflow: visible; margin-bottom: clamp(100px, 14vw, 191px); } .sp-hero__bg { position: absolute; inset: 0; background: #0a1628 url('/_img/suspended/MCP_tool_result_bg.png') center / cover no-repeat; } .sp-hero__dim { position: absolute; inset: 0; background: rgba(0,0,0,.6); } .sp-hero__body { position: relative; z-index: 3; text-align: center; padding: clamp(120px, 15vw, 181px) 20px 0; display: flex; flex-direction: column; align-items: center; gap: 23px; } .sp-hero__sub { margin: 0; font-size: clamp(20px, 2.5vw, 32px); font-weight: 600; color: #fff; letter-spacing: -1.18px; line-height: 1.2; } .sp-hero__title { margin: 0; font-size: clamp(42px, 6vw, 82px); font-weight: 800; line-height: 1.1; letter-spacing: -3px; white-space: nowrap; background: linear-gradient(180deg, #fff 0%, #ced7ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 2번째 요소: 세로 스크롤 인디케이터 — 이미지 대신 CSS */ .sp-hero__scroll { position: absolute; left: 50%; top: 47%; z-index: 3; transform: translateX(-50%); width: 2px; height: clamp(196px, 24vw, 276px); background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, #fff 45%, rgba(255,255,255,.4) 100%); border-radius: 2px; } .sp-hero__scroll::after { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); } #suspendedPage .sp-hero__car { position: absolute; left: 50%; bottom: 0; z-index: 4; transform: translateX(-50%) translateY(32%); display: block; width: min(1134px, 100vw); max-width: none; height: auto; max-height: min(457px, 54.5%); object-fit: contain; object-position: center bottom; pointer-events: none; } /* ── 상품 소개 (피그마: 흰 배경) ── */ .sp-intro { padding: clamp(24px, 8vw, 100px) 0; background: #fff; } .sp-intro .sp-badge { display: inline-block; margin: 0 auto 16px; padding: 10px 31px; border-radius: 38px; border: 1.3px solid rgba(15,23,42,.4); background: rgba(15,23,42,.08); font-size: 17px; font-weight: 700; color: #0f172a; letter-spacing: 1.25px; } .sp-intro .sp-headline { margin: 0 0 20px; text-align: center; font-size: clamp(32px, 4.5vw, 53px); font-weight: 900; line-height: 1.3; letter-spacing: -1.25px; } .sp-intro .sp-headline br { display: none; } .sp-intro .sp-headline .em { color: #1b6fe8; } .sp-intro .sp-desc { max-width: 720px; margin: 0 auto 40px; text-align: center; font-size: clamp(16px, 2vw, 24px); line-height: 1.7; color: #8c8c8c; } .sp-intro .sp-desc strong { color: #0f172a; font-weight: 700; } .sp-worry { max-width: 1130px; margin: 0 auto 48px; padding: 45px 41px 46px; border-radius: 25px; border: 1.3px solid rgba(15,23,42,.25); background: rgba(206,215,255,.05); } .sp-worry h4 { margin: 0 0 30px; text-align: center; font-size: 28px; font-weight: 800; } .sp-worry__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; } .sp-worry__tag { display: inline-flex; align-items: center; gap: 12px; padding: 19px 29px; border-radius: 15px; border: 1.3px solid rgba(15,23,42,.45); background: rgba(15,23,42,.07); box-shadow: 0 0 20px rgba(79,209,197,.1); font-size: 19px; font-weight: 500; color: #0f172a; } .sp-worry__tag .chk { font-size: 22px; line-height: 1; } .sp-recommend-title { text-align: center; margin: 94px 0 12px; font-size: clamp(28px, 3.5vw, 45px); font-weight: 800; letter-spacing: -.6px; } .sp-recommend-title .em { color: #1b6fe8; } .sp-recommend-sub { text-align: center; margin: 0 0 36px; font-size: 24px; color: rgba(15,23,42,.55); font-weight: 500; letter-spacing: -.6px; } .sp-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1130px; margin: 0 auto 48px; list-style: none; padding: 0; } .sp-card-grid li { position: relative; padding: 36px 31px 52px 41px; border-radius: 20px; border: 1.3px solid rgba(15,23,42,.2); background: rgba(15,23,42,.04); box-shadow: 0 10px 30px rgba(20,25,55,.18); overflow: hidden; } .sp-card-grid li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #fff 0%, #ced7ff 100%); } .sp-card-grid h6 { margin: 0 0 12px; font-size: 20px; font-weight: 800; } .sp-card-grid p { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(15,23,42,.65); font-weight: 500; } .sp-cta { display: flex; justify-content: center; } .sp-cta__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; max-width: 487px; width: calc(100% - 40px); height: 88px; padding: 0 70px; border: none; border-radius: 63px; cursor: pointer; background: linear-gradient(180deg, #fff 0%, #ced7ff 100%); box-shadow: 0 10px 20px rgba(79,209,197,.4); font-size: clamp(22px, 3vw, 35px); font-weight: 900; color: #1f2b59; letter-spacing: -1px; transition: transform .15s; } .sp-cta__btn:hover { transform: translateY(-2px); } .sp-cta__btn--blue { min-width: auto; max-width: none; width: auto; height: auto; padding: 13px 36px; border-radius: 10px; background: #1b6fe8; color: #fff; font-size: 15px; font-weight: 700; box-shadow: none; } /* ── 영상 + 상담사 ── */ .sp-video { position: relative; width: 100%; height: clamp(360px, 43vw, 820px); overflow: hidden; background: #000; } .sp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sp-video video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; } .sp-video__person { position: absolute; z-index: 2; left: 22.92%; top: 31%; width: 26.6%; height: auto; object-fit: contain; pointer-events: none; } /* ── 상담 폼 (피그마 본문 흐름 밖 → 연한 배경 섹션) ── */ .sp-form { padding: clamp(56px, 7vw, 80px) 0; background: #f8fafc; } .sp-form .sp-form-tit { text-align: center; color: #0f172a; margin-bottom: 32px; } .sp-form .sp-form-tit h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; color: #64748b; } .sp-form .sp-form-tit h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; } .sp-form .sp-form-tit h2 span { color: #1b6fe8; } .sp-form-box { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 16px; padding: clamp(24px, 4vw, 36px); box-shadow: 0 16px 48px rgba(0,0,0,.25); } .sp-form-box .inputList { list-style: none; margin: 0; padding: 0; } .sp-form-box .inputList > li { margin-bottom: 18px; } .sp-form-box label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; } .sp-form-box .fc-req { color: #e53935; } .sp-form-box input[type="text"] { width: 100%; height: 48px; padding: 0 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 15px; background: #fafafa; } .sp-form-box input:focus { outline: none; border-color: #1b6fe8; background: #fff; } .sp-form-box .gnaAgree ul { list-style: none; margin: 16px 0 0; padding: 0; } .sp-form-box .gnaAgree li.flex { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-size: 13px; color: #555; align-items: flex-start; } .sp-form-box .gnaAgree a { color: #1b6fe8; text-decoration: none; } .sp-form-box .sp-submit { margin-top: 24px; } .sp-form-box .sp-submit button { width: 100%; height: 56px; border: none; border-radius: 10px; background: linear-gradient(135deg, #1b6fe8, #1558c0); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; } /* ── 3 ZERO (피그마: #1b6fe8 블루 배경) ── */ .sp-zero { padding: clamp(64px, 8vw, 100px) 0; background: #1b6fe8; text-align: center; color: #fff; } .sp-zero .sp-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .sp-zero h2 { margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 36px); font-weight: 800; color: #fff; } .sp-zero .sp-sub { margin: 0 0 48px; color: rgba(255,255,255,.75); font-size: 15px; } .sp-zero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; list-style: none; padding: 0; } .sp-zero-grid li { padding: 36px 29px; border-radius: 18px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.12); } .sp-zero-grid .num { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: 2px; margin-bottom: 8px; } .sp-zero-grid .name { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #fff; } .sp-zero-grid .zero { font-size: 44px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 12px; } .sp-zero-grid .desc { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; margin: 0; } /* ── 만기 옵션 (피그마: #f8fafc) ── */ .sp-after { padding: clamp(64px, 8vw, 100px) 0; background: #f8fafc; text-align: center; } .sp-after .sp-label { font-size: 12px; font-weight: 700; color: #1b6fe8; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .sp-after h2 { margin: 0 0 48px; font-size: clamp(26px, 3.5vw, 36px); font-weight: 800; color: #0f172a; } .sp-after-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; max-width: 640px; margin: 0 auto; list-style: none; padding: 0; } .sp-after-grid li { flex: 1 1 280px; max-width: 310px; padding: 40px 37px; background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 8px 24px rgba(15,23,42,.08); } .sp-after-grid .opt-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; background: #e8f0fe; font-size: 12px; font-weight: 600; color: #1b6fe8; margin-bottom: 16px; } .sp-after-grid .icon { font-size: 48px; line-height: 1; margin-bottom: 12px; } .sp-after-grid h4 { margin: 0 0 12px; font-size: 22px; font-weight: 800; } .sp-after-grid .highlight { font-size: 16px; font-weight: 700; color: #1b6fe8; margin-bottom: 8px; } .sp-after-grid p { margin: 0; font-size: 14px; color: #64748b; } /* ── 비교표 (피그마: 흰 배경 + 라이트 테이블) ── */ .sp-compare { padding: clamp(64px, 8vw, 100px) 0; background: #fff; color: #0f172a; } .sp-compare .sp-label { color: #1b6fe8; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin-bottom: 10px; } .sp-compare h2 { text-align: center; margin: 0 0 40px; font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: #0f172a; } .sp-compare-table-wrap { max-width: 1200px; margin: 0 auto 40px; overflow-x: auto; border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(0,0,0,.06); } .sp-compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; } .sp-compare-table th, .sp-compare-table td { padding: 14px 22px; border-bottom: 1px solid #f1f5f9; font-size: 14px; text-align: center; } .sp-compare-table thead th { background: #f8fafc; font-weight: 700; color: #334155; } .sp-compare-table tbody th { text-align: left; font-weight: 600; color: #334155; } .sp-compare-table tbody tr:nth-child(even) th { background: #f8fafc; } .sp-compare-table tbody tr:nth-child(even) td { background: #f8fafc; } .sp-compare-table thead .col-product, .sp-compare-table tbody td.col-product { background: rgba(27,111,232,.03); color: #1b6fe8; font-weight: 600; } .sp-compare-table thead .col-product { background: #f1f5f9; } .sp-compare-table tbody td:not(.col-product) { color: #64748b; font-weight: 400; } .sp-compare .sp-cta { margin-top: 8px; } /* ── 계약 후기 (피그마 549:1222 — 가로형 카드 685×350) ── */ .sp-review { padding: clamp(64px, 8vw, 100px) 0; background: #fff; overflow: hidden; } .sp-review__head { display: flex; flex-direction: column; align-items: center; gap: 45px; margin-bottom: 45px; padding: 0 20px; } .sp-review__badge { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 100px; background: rgba(39, 39, 39, 0.2); font-size: 12px; font-weight: 500; color: #0f172a; } .sp-review__badge::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #1b6fe8; flex-shrink: 0; } .sp-review__title { margin: 0; text-align: center; font-size: clamp(32px, 4vw, 50px); font-weight: 700; color: #0f172a; letter-spacing: -1px; line-height: 1.2; } .sp-review__desc { margin: 0; text-align: center; font-size: clamp(16px, 2vw, 24px); font-weight: 400; color: #a8a8a8; line-height: 1.4; letter-spacing: -0.48px; } .sp-reviewRoll { overflow: hidden; width: 100%; margin-bottom: 45px; } .sp-reviewRoll:last-of-type { margin-bottom: 0; } .sp-reviewList { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 24px; list-style: none; margin: 0; padding: 0 20px; width: max-content; } .sp-reviewRoll.dirLtr .sp-reviewList { animation: spReviewLtr 60s linear infinite; } .sp-reviewRoll.dirRtl .sp-reviewList { animation: spReviewRtl 60s linear infinite; } .sp-reviewList > li { flex: 0 0 685px; max-width: 685px; } .sp-reviewCard { display: flex; align-items: center; justify-content: center; height: 350px; padding: 20px 30px; border-radius: 20px; background: rgba(94, 94, 94, 0.2); text-decoration: none; color: inherit; transition: background .2s; } .sp-reviewCard:hover { background: rgba(94, 94, 94, 0.28); } .sp-reviewCard__inner { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 625px; } .sp-reviewCard__thumb { flex: 0 0 400px; width: 400px; height: 300px; border-radius: 20px; overflow: hidden; background: #d0d0d0; } .sp-reviewCard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-reviewCard__body { flex: 1; min-width: 0; max-width: 204px; display: flex; flex-direction: column; gap: 16px; height: 298px; } .sp-reviewCard__meta { display: flex; flex-direction: column; gap: 10px; } .sp-reviewCard__tag { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; height: 30px; padding: 0 12px; border-radius: 100px; border: 1px solid #d0d0d0; background: rgba(191, 188, 188, 0.2); font-size: 12px; font-weight: 500; color: #0f172a; } .sp-reviewCard__tit { margin: 0; font-size: 20px; line-height: 1.4; letter-spacing: -0.4px; color: #0f172a; } .sp-reviewCard__tit strong { display: block; font-weight: 700; } .sp-reviewCard__tit span { display: block; font-weight: 400; } .sp-reviewCard__txt { margin: 0; flex: 1; overflow: hidden; font-size: 14px; line-height: 1.6; letter-spacing: -0.28px; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; } @keyframes spReviewLtr { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes spReviewRtl { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @media (max-width: 767px) { .sp-intro .sp-headline br { display: block; } .sp-intro .sp-desc br { display: none; } .suspended-page .sp-inner {padding: 24px 20px;} .suspended-page .sp-card-grid.sp-inner {margin-bottom: 40px; padding: 0;} .sp-reviewList > li { flex: 0 0 min(685px, 92vw); max-width: min(685px, 92vw); } .sp-reviewCard { height: auto; min-height: 320px; padding: 16px; } .sp-reviewCard__inner { flex-direction: column; max-width: none; } .sp-reviewCard__thumb { flex: 0 0 auto; width: 100%; max-width: 400px; height: 220px; } .sp-reviewCard__body { max-width: none; width: 100%; height: auto; } .sp-reviewCard__txt { -webkit-line-clamp: 5; } } /* ── FAQ ── */ .sp-faq { padding: clamp(64px, 8vw, 100px) 0; background: #f1f5f9; } .sp-faq h3 { text-align: center; margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; } .sp-faq > p { text-align: center; margin: 0 0 40px; color: #64748b; font-size: 16px; } .sp-faq .faqlist { max-width: 760px; margin: 0 auto; } .sp-faq .que { display: flex; align-items: center; gap: 12px; padding: 20px 22px; background: #fff; border-radius: 10px; margin-bottom: 10px; cursor: pointer; border: 1px solid #e2e8f0; transition: border-color .2s, box-shadow .2s; } .sp-faq .que:hover { border-color: #bfdbfe; } .sp-faq .que.on { border-color: #1b6fe8; box-shadow: 0 4px 16px rgba(27,111,232,.12); } .sp-faq .que .fc-q { color: #1b6fe8; font-weight: 700; flex-shrink: 0; } .sp-faq .que .text { flex: 1; font-size: 15px; font-weight: 600; text-align: left; } .sp-faq .que .arrow { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform .3s; } .sp-faq .que .arrow::before, .sp-faq .que .arrow::after { content: ''; position: absolute; background: #64748b; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sp-faq .que .arrow::before { width: 12px; height: 2px; } .sp-faq .que .arrow::after { width: 2px; height: 12px; } .sp-faq .que.on .arrow { transform: rotate(45deg); } .sp-faq .anw { display: none; padding: 16px 22px 20px; margin: -6px 0 10px; background: #fff; border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 10px 10px; } .sp-faq .anw .flex { display: flex; gap: 12px; text-align: left; } .sp-faq .anw .bold { color: #1b6fe8; font-weight: 700; flex-shrink: 0; } .sp-faq .anw .text { font-size: 14px; line-height: 1.7; color: #475569; } #sub.suspended-page ~ #footer { margin-top: 0; } @media (max-width: 1096px) { .sp-worry__tags { } .sp-worry__tag { width: calc(50% - 7.5px); } } @media (max-width: 991px) { .sp-card-grid, .sp-zero-grid { grid-template-columns: repeat(2, 1fr); } .sp-hero__title { white-space: normal; } } @media (max-width: 767px) { .sp-card-grid, .sp-zero-grid { grid-template-columns: 1fr; } .sp-worry__tags { flex-direction: column; align-items: stretch; } .sp-worry__tag { width: 100%; } .sp-reviewList > li { flex: 0 0 min(685px, 92vw); max-width: min(685px, 92vw); } /* .sp-hero__scroll { display: none; } */ } @media (max-width: 420px) { .sp-worry__tag { flex-direction: column; font-size: 14px; } }