#prodCar { background:#F0F3F6; overflow-x:hidden;} #prodCar label {width:100%; height:100%; } #prodCar label input + span {} #prodCar .selectCon {position:relative; width:100%; } #prodCar .selectCon select {appearance:none; width:100%; padding:10px 40px 10px 0; border-bottom:1px solid #F0F3F6; background:#fff; font-size:14px; color:#7E8298; } #prodCar .selectCon:after {content:''; position:absolute; top:50%; right:5px; transform:translate(0,-50%); width:20px; height:20px; background:url('/dsn/_img/select_arrow.webp') no-repeat center; background-size:cover;} .prodBar {margin:20px auto; display:block; width:100%; height:1px; border-top:1px solid #E6EBF3;} /******************************************************pradCarwarp*/ .prodCarWrapTop {box-shadow:3px 3px 7px rgba(0 0 0 / 8%); background:#fff;} .prodCarWrapTop .container {padding:0;} .prodCarNationTab { border-bottom:1px solid #E6EBF3; overflow:hidden;} .prodCarNationTab .tabGrps {display:flex; align-items:center; border-top:1px solid #E6EBF3; border-bottom:1px solid #E6EBF3;} .prodCarNationTab .tabGrps li { flex-grow: 1; } .prodCarNationTab .tabGrps input {display:none; appearance:none;} .prodCarNationTab .tabGrps li label input + span {position:relative; display:block; width:100%; padding:10px 0; font-size:15px; text-align:center; font-weight:600; color:#7E8298;} .prodCarNationTab .tabGrps li label input:checked + span {font-weight:800; color:#2D52DE;} .prodCarNationTab .tabGrps li label input:checked + span:after {content:''; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; height:2px; background:#2D52DE;} .prodCarNationTab .tabBtns input {display:none; appearance:none;} .prodCarNationTab .tabBtns {position:relative;} .prodCarNationTab .tabBtns .prodCarNationTabSwiper {padding:17px 15px 20px 15px;} .prodCarNationTab .swiper-scrollbar {width:calc(100% - 30px) !important; left:50% !important; transform:translate(-50%, 0);bottom:9px !important; } .prodCarNationTab .swBtn .swiper-navigation-icon {display:none;} .prodCarNationTab .swBtn {top:45% !important; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:rgba(36 43 69 / 30%); border-radius:100%; } .prodCarNationTab .swBtn .arrow {width:20px;} .prodCarNationTab .swBtn.swiper-button-prev {transform:scaleX(-1); } .prodCarNationTab .tabBtns .list {width:60px; height:80px;} .prodCarNationTab .tabBtns .list label .listSpan {width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;} .prodCarNationTab .tabBtns .list label input:checked + .listSpan .ico {background:#F0F3F6; box-shadow:1px 2px 3px rgba(0 0 0 / 20%); border:1px solid #d9e1e9;} .prodCarNationTab .tabBtns .list label input:checked + .listSpan figcaption {color:#2E459D; font-weight:700;} .prodCarNationTab .tabBtns .list label .ico {margin:0 auto 7px auto; width:60px; height:53px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px; box-shadow:1px 2px 3px rgba(0 0 0 / 8%); border:1px solid #f6f6f6; } .prodCarNationTab .tabBtns .list label .ico img {width:45px;} .prodCarNationTab .tabBtns .list label figcaption {font-size:13px; } .prodCarSchCond {padding:14px 16px 20px 16px; margin-bottom:7px; background:#fff; display: grid; grid-template-columns: 130px 1fr; grid-template-rows: auto auto; gap: 10px;} .prodCarSchCond .prodCarSchCondBox:nth-child(3) {grid-column: 1 / 3;} .prodCarSchCond h5.tit { margin-bottom:7px; font-size:13px; color:#7E8298; font-weight:500; } .prodCarSchCond ul {display:flex; align-items:center; border-radius:7px; overflow:hidden;} .prodCarSchCond ul li { flex-grow: 1; } .prodCarSchCond input {display:none; appearance:none;} .prodCarSchCond label input + span {position:relative; display:block; width:100%; padding:10px 0; font-size:13px; text-align:center; font-weight:500; color:#7E8298; background:#F0F3F6;} .prodCarSchCond label input:checked + span {background:#2E459D; color:#fff; font-weight:600; box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);} .prodCarSchResWrap {padding:20px 0;} .prodCarSchResList {display:flex; flex-wrap:wrap; gap:10px;} .prodCarSchResList .list {position:relative; padding:18px 13px 18px 13px; width:calc(50% - 5px); background:#fff; border-radius:10px; overflow:hidden;} .prodCarSchResList .list .carThumb {margin-bottom:10px; width:100%; height:80px; display:flex; align-items:center; justify-content:center;} .prodCarSchResList .list a {display:block; } .prodCarSchResList .list .prodCarMaker {position:absolute; top:0; right:0; width:55px; height:38px; background:rgba(255 255 255 / 0.2); border-radius:0 0 0 15px; display:flex; align-items:center; justify-content:center; box-shadow:1px 3px 3px rgba(0 0 0 / 5%); backdrop-filter: blur(12px); } .prodCarSchResList .list .prodCarMaker img {width:35px;} .prodCarSchResList .list .title {margin-bottom:7px; font-size:16px; font-weight:600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .prodCarSchResList .list p.desc, .prodCarSchResList .list p.price {font-size:12px; font-weight:400; color:#7E8298; letter-spacing:-0.5px; line-height:1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .prodCarSchResList .list .priceWrap {margin-top:7px; display:flex; flex-direction:column; gap:7px;} .prodCarSchResList .list .priceWrap a ,.prodCarSchResList .list .priceWrap p {display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:500; color:#7E8298; } .prodCarSchResList .list .priceWrap a .won {font-size:15px; font-weight:700; color:#2E459D;} .prodCarSchResList .list a.counselBtn {padding:12px 0; margin-top:20px; width:100%; background:#2D52DE; font-size:14px; color:#fff; text-align:center; font-weight:600; border-radius:7px;} /******************************************************pradCarView*/ .prodCarView {padding:30px 16px;} .prodCarView .container {background:#fff; border-radius:20px; overflow:hidden; box-shadow:2px 3px 7px rgba(0 0 0 / 8%);} .prodCarModel {position:relative; } .prodCarModel .prodCarMaker {position:absolute; top:0; right:-16px; width:65px; height:45px; background:rgba(255 255 255 / 0.2); border-radius:0 0 0 20px; display:flex; align-items:center; justify-content:center; box-shadow:1px 3px 3px rgba(0 0 0 / 5%); backdrop-filter: blur(12px); } .prodCarModel .prodCarMaker img {width:42px;} .prodCarModel .prodCarModelInfo {padding:20px 0 0 10px ;} .prodCarModel .prodCarModelInfo h2 {margin-bottom:7px; font-size:20px;} .prodCarModel .prodCarModelInfo p {font-size:14px; font-weight:400; color:#7E8298; letter-spacing:-0.5px; line-height:1.5;} .prodCarModel .bestPrice {margin:12px 0 20px 0; } .prodCarModel .bestPrice li {margin-bottom:7px; padding:10px; background:#F0F3F6; border-radius:0 12px; position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:15px; } .prodCarModel .bestPrice .subject {display:inline-block; width:46px; padding:6px 0 5px 0; font-size:12px; background:#d9e1e9; color:#7E8298; text-align:center; border-radius:0 7px; font-weight:600;} .prodCarModel .bestPrice li.low .subject {background:#2D52DE; color:#fff;} .prodCarModel .bestPrice li a {width:calc(100% - 62px);} .prodCarModel .bestPrice li .text {display:block; width:calc(100% - 20px); font-size:13px; line-height:1.5;} .prodCarModel .bestPrice li .text .title { width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .prodCarModel .bestPrice li .text .priceWrap {display:flex; align-items:center; gap:2px; font-size:16px; font-weight:700; color:#7E8298; } .prodCarModel .bestPrice li.low .priceWrap{color:#2D52DE;} .prodCarModel .bestPrice .arrow {position:absolute; display:block; top:50%; right:16px; transform:translate(0,-50%); width:13px; height:13px;} .prodCarThumb {position:relative; padding:20px 0 0 0; display: flex; flex-direction: column; gap:10px;} .prodCarThumbTab {position:absolute; bottom:66px; right:0; z-index:2;} .prodCarThumbTab input {display:none; appearance:none;} .prodCarThumbTab ul {display:flex; align-items:center; } .prodCarThumbTab label input + span {display:block; width:55px; padding:6px 0; font-size:12px; font-weight:500; text-align:center;background:#8B93AC; color:#C5C9D6;} .prodCarThumbTab label input:checked + span {background:#2E459D; color:#fff; font-weight:700; box-shadow:1px 2px 3px rgba(0 0 0 / 30%);} .prodCarThumb > .min { min-height: 0; } .prodCarSwiper, .prodCarThumbSwiper { width: 100%; height: auto;} .prodCarThumb .list {cursor:pointer; border:1px solid #E2E9F0; overflow:hidden;} .prodCarThumb .list img {/* width: 100%; height: 100%; object-fit: contain;*/} .prodCarSwiper { border:1px solid #E2E9F0; overflow:hidden; border-radius:0 20px;} .prodCarSwiper .list {padding:0 20px; width:100%; height:180px; border:none; background:#fff;} .prodCarThumbSwiper .list {padding:5px; width:100%; height:55px; border-radius:12px;} .prodCarBoard { position: fixed; bottom: 0; left: 0; width: 100%; padding: 16px 16px 0 16px; background: #fff; box-shadow: 3px 5px 12px rgba(0 0 0 / 30%); z-index: 9; transform: translateY(100%); opacity: 0; transition: transform 0.45s ease, opacity 0.5s ease;} .prodCarBoard.scroll { transform: translateY(0); opacity: 1;} .prodCarBoard.hide { transform: translateY(100%); opacity: 0;} .prodCarBoard h5 {font-size:13px; color:#B3B3B3;} .prodCarBoard .include {margin:10px 0 0 0; padding:7px; border-radius:5px; background:#E6EBF3; color:#2D52DE; font-weight:600; text-align:center; font-size:12px;} .prodCarBoard .box {padding:10px 0;} .prodCarBoard .flexBox {display:flex; align-items:flex-start; justify-content:space-between;} .prodCarBoard .optionBox {padding:10px 0 0 0;} .prodCarBoard .prodCarMaker {position:absolute; top:0; right:0; width:55px; height:38px; background:#F0F3F6; border-radius:0 0 0 20px; display:flex; align-items:center; justify-content:center; box-shadow:1px 3px 3px rgba(0 0 0 / 5%); } .prodCarBoard .prodCarMaker img {width:35px;} .prodCarBoard h2 {margin-bottom:-4px; font-size:20px; } .prodCarBoard button.prodCarCounsel {position:relative; bottom:0; margin-right:-16px; margin-left:-16px; padding:13px 16px; width:calc(100% + 32px); text-align:center; background:#2E459D; color:#fff; font-size:17px; font-weight:600;} /* 결제하기 : 상담신청 버튼과 같은 규격, 색만 구분 */ .prodCarBoard button.prodCarPay {position:relative; bottom:0; margin:8px -16px 0 -16px; padding:13px 16px; width:calc(100% + 32px); text-align:center; background:#281FA1; color:#fff; font-size:17px; font-weight:600;} .prodCarBoard .priceBox {margin-right:-16px; margin-left:-16px; padding:10px 16px; background:#F2F7FF; } .prodCarBoard .priceBox h5 {position:relative; top:4px; color:#37383A;} .prodCarBoard .optionTableList {width:calc(100% - 100px); } .prodCarBoard .optionTableList ul {display:flex; flex-direction:column; gap:2px; padding:0 10px 0 0 ; font-size:13px; color:#37383A; height:43px; overflow-y:scroll; text-align:right;} .prodCarBoard .warrantList {display:flex; align-items:center; justify-content:space-between;} .prodCarBoard .warrantList li {position:relative; padding:0 10px; font-size:13px; font-weight:500; text-align:center;} .prodCarBoard .warrantList li:nth-child(2):before {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:10px; border-right:1px solid #949494; border-left:1px solid #949494;} .priceBoxCon {position:relative; } .prodCarBoard .priceBox .priceSum {display:flex; align-items:center; justify-content:space-between; width:180px; font-size:13px; font-weight:500; text-align:right;} .prodCarBoard .priceBox .priceSum:nth-child(1) span {color:#2D52DE;} .prodCarBoard .priceBox .priceSum span {width:138px; font-size:20px; font-weight:700;} .prodCarBoard .priceBox .priceMonth, .prodCarBoard .priceBox .priceTotal {display:flex; align-items:center; justify-content:end; flex-direction:row-reverse; gap:7px;} .prodCarBoard .priceBox .priceAdd {position:relative; top:1px; width:85px; font-size:11px; font-weight:600; text-align:right; opacity:0.5; } .prodCarDetail h5.subject {margin-bottom:5px; font-size:13px; font-weight:600;} .prodCarDetail .prodCarSchCond {display:flex; flex-direction:column; padding:0; gap:20px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .prodCarDetail .prodCarSchCond .mobile {display:inline-block;} .prodCarDetail .prodCarSchCond ul {border-radius:0; gap:7px;} .prodCarDetail .prodCarSchCond label input + span {border-radius:7px; border:1px solid #E2E9F0; color:#B3B9C0; background:#fff; box-shadow:inset 0 3px 6px rgba(0 0 0 / 7%); } .prodCarDetail .prodCarSchCond label input:checked + span {background:#F2F7FF; border:1px solid #2E459D; color:#2E459D;} .prodCarViewOptionBox {margin-bottom:30px;} .optionTable ul {display:flex; flex-direction:column;gap:5px; } .optionTable input {display:none; appearance:none;} .optionTable input + span {position:relative; display:flex; align-items:baseline; justify-content:space-between; padding:7px 12px 7px 30px; font-size:13px; border-radius:7px; background:#fff; border:1px solid #fff;} .optionTable input + span:before {content:''; position:absolute; top:8px; left:7px; width:17px; height:17px; background-image:url('/dsn/_img/ico_plus.webp'); background-size:13px; background-position:center; background-color:#E5E9EE; border-radius:100%;} .optionTable input:checked + span {background:#F2F7FF; border:1px solid #2E459D; color:#2E459D;} .optionTable input:checked + span:before {background-color:#2E459D;} .prodCarPage {position:relative; margin-right:-16px; margin-left:-16px; line-height:0;} .prodCarPage .prodCarPageTit {position:absolute; width:100%; bottom:0; left:50%; transform:translate(-50%,0); z-index:2; backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; gap:12px; padding:50px 0 15px 0; font-size:15px; font-weight:600; color:#7E8298; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 20% ,rgba(255,255,255,1) 70% , rgba(255,255,255,1) 100%);} .prodCarPage .prodCarPageTit .arrow {width:18px; height:18px; opacity:0.5;} .prodCarPage .prodCarPageTit.on {padding:12px 0; background:#fff;} .prodCarPage .prodCarPageTit.on .arrow {transform:scaleY(-1);} .prodCarPageimg {height: 280px; overflow: hidden; transition: height 0.5s ease;} .prodCarPageimg.on { padding:0 0 30px 0; height: 100%;} /*priceTable*/ .prodCarViewPriceBox {margin:-20px -15px; padding:40px 15px; /*background:#e3e8ed;*/} .prodCarViewPriceBox .coin {position:absolute; top:0; right:0; width:100px;} .prodCarViewPriceBox .coin video {width:100%; } .prodCarDetail .prodCarViewPriceBox h5.subject {margin-bottom:12px; padding:10px; font-size:16px; text-align:center; background:#2D52DE; color:#fff; font-weight:600; border-radius:0 20px;} .prodCarDetail .prodCarViewPriceBox h5.subject .fc-point {color:#81f2ff;} .priceTable { width:100%; overflow-x:scroll;} .priceTable table {width:570px; border-collapse: collapse; overflow:hidden;} .priceTable table, .priceTable th, .priceTable td {border: 1px solid #E2E9F0;} .priceTable .monthTr th {background:#7E8298; color:#fff;} .priceTable .prcTr th, .priceTable th.prcChtP_none {font-weight:700;} .priceTable th {font-size:12px; padding:4px 6px; background:#F0F3F6; font-weight:500; white-space:nowrap;} .priceTable th.prcChtT_lease {background:#fff;} .priceTable td.prcChtT_lease.bg {background:#F0F3F6;} .priceTable th.bg {background:#e3e8ed; border:1px solid #d5dbe1; } .priceTable td {position:relative; padding:6px 8px; font-size:13px; font-weight:700; background:#fff; white-space:nowrap; text-align:center;} .priceTable td.bg {background:#e3e8ed; border:1px solid #d5dbe1;} .priceTable .tableType { padding:0 3px; writing-mode: vertical-rl;} .priceTable table td .priceSecret {opacity:0.7; filter:blur(1.3px);} .priceTable table td .priceOpen { position:absolute; top:0; left:0; width:100%; height:100%; background:#81f2ff; display:flex; align-items:center; justify-content:center; font-weight:700; animation: flicker 1.5s infinite; } @keyframes flicker { 0%, 100% { background:#81f2ff; } 50% { background:inherit } } /*page*/ #svTop {padding:60px 0 0 0; background:url('/dsn/_img/p_service_top_bg.webp') no-repeat center / cover; } #svTop .tit {position:relative; margin:0 auto; width:80%; max-width:800px; } #svTop .car {position:absolute; bottom:-83px; right:-170px; width:430px; z-index:2;} #svTop .test {display:none;margin:0 auto; width:90%; max-width:585px; background:#fff; padding:30px; border-radius:30px; border:10px solid #dfdfe9; } #svTop .test .logo {margin:0 auto; width:80px;} .pageGap {padding:60px 0; } .pTit {margin:0 0 40px 0; text-align:center; color:#121212; letter-spacing:-0.5px; word-break:auto-phrase; } .pTit h3 {margin-bottom:17px; font-size:16px; font-weight:600;} .pTit h2 {font-size:38px; line-height:1.2; letter-spacing:-1px; } .pTit p {margin-top:17px; font-size:16px; font-weight:400; line-height:1.6; opacity:0.9;} .pageTab {margin:20px auto 0 auto; display:inline-block; text-align:center; background:#fff; border-radius:50px; padding:7px;} .pageTab.bg {background:#f1f1f1;} .pageTab ul {display:flex; align-items:center; } .pageTab input {display:none; appearance:none;} .pageTab label input + span {display:block; cursor:pointer; padding:8px 0; width:100px; font-size:16px; font-weight:600; border-radius:50px;} .pageTab label input:checked + span {background:#4B4BEA; color:#fff; } #svCompare.pageGap {padding:80px 0 60px 0; } #svCompare .container {padding:0 16px;} #svCompare .compareList .img {filter:drop-shadow(2px 3px 5px rgba(0 0 0 / 15%));} #svMonthly {background:#f0f3f6;} #svMonthly .receiptWarp {display:flex; align-items:center; gap:12px; color:#4b525c; } #svMonthly .receipt {width:50%; } #svMonthly .receipt.on {filter:drop-shadow(0px 0px 5px #5753eb);} #svMonthly .receipt .tit {margin-bottom:12px;} #svMonthly .receipt .tit h3 {font-size:18px; font-weight:700; } #svMonthly .receipt .tit p {font-size:13px; font-weight:400; } #svMonthly .receipt .line {width:100%; height:2px; background:url('/dsn/_img/monthly_receipt_line.webp') no-repeat center / cover; } #svMonthly .receipt .line.mt {margin-top:3px;} #svMonthly .receipt .receiptTop {width:100%; height:20px; background:url('/dsn/_img/monthly_receipt.webp') no-repeat center / cover;} #svMonthly .receipt .receiptBottom {width:100%; height:20px; background:url('/dsn/_img/monthly_receipt.webp') no-repeat center / cover; transform:scaleY(-1); } #svMonthly .receipt .con {padding:15px 15px 0 15px; background:#fff;} #svMonthly .receipt ul {padding:10px 0;} #svMonthly .receipt li {display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:500;} #svMonthly .receipt li .price {display:flex; align-items:center;} #svMonthly .receipt li .num {position:relative; top:-1px; font-size:22px; font-weight:800;} #svMonthly .receiptCar {position:relative; top:-40px; z-index:2; width:90%; margin:0 auto -40px auto; max-width:500px;} #svMonthly .btn a {margin:20px auto 0 auto; width:80%; padding:18px 0; font-size:17px; font-weight:700; color:#4B4BEA; border:1px solid #4B4BEA; text-align:center;} #svMerit {background:url('/dsn/_img/svmerit_bg.webp') no-repeat center; background-size:cover;} #svMerit .pTit h3 {color:#fff;} #svMerit .pTit h2 {color:#fff;} #svMerit .pTit .point {color:#dfff4b;} #svMerit .pageTab label input:checked + span {background:#00c24e;} .meritCon {padding:30px 25px; border-radius:0 25px; box-shadow:2px 4px 7px rgba(0 0 0 / 20%); border:1px solid #f1f1f1; background:#fff;} .meritCon .tit {padding:0 0 20px 0; display:flex; flex-direction:column; gap:7px; color:#4b525c; border-bottom:1px dotted #b9c1cb;} .meritCon .tit h2 {font-size:28px; text-align:center; } .meritCon .tit p {font-size:15px; font-weight:500; line-height:1.7; color:#121212;} .meritList {padding:30px 0; display:flex; flex-wrap:wrap; gap:30px 20px;} .meritList .list {display:flex; flex-direction:column; align-items:center; gap:7px; width:calc(50% - 10px); text-align:center; } .meritList .icon {width:70px; height:70px; border-radius:100%; background:#f5f5f5; overflow:hidden;} .svRent .meritList .icon img {filter:hue-rotate(-92deg);} .meritList .text h3 {margin-bottom:12px; font-size:18px; font-weight:700; line-height:1.3;} .meritList .text p {font-size:14px; font-weight:500; line-height:1.5; color:#4b525c; word-break:auto-phrase;} .meritList .text p .sm {display:block; margin-top:3px; font-size:12px; font-weight:600; } #svNeeds {background:#f0f3f6;} #svNeeds .table { width: 100%; border-top: 2px solid #2f385c; font-size: 14px; line-height: 1.6; background:#fff;} #svNeeds .table ul { display: grid; grid-template-columns:40px 1fr; border-bottom: 1px solid #e5e5e5;} #svNeeds .table ul > li:first-child { background: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px 0; writing-mode: vertical-rl; text-orientation: upright;} #svNeeds .table ul > li:last-child { } #svNeeds .table .title { background: #f0f3f6; font-weight: 700;} #svNeeds .table .title > li:last-child { padding: 0;} #svNeeds .table .title > li:last-child > div:first-child { padding: 12px 0; text-align: center; border-bottom: 1px solid #e5e5e5;} #svNeeds .table .titleSm { display: grid; grid-template-columns: 1fr 1fr;} #svNeeds .table .titleSm > div { padding: 10px 0; text-align: center;} #svNeeds .table .text > li:last-child { display: grid; grid-template-columns: 1fr 1fr; } #svNeeds .table .box {padding:20px; } #svNeeds .table .bg {background:#ebefff; } #svNeeds .table p { margin: 4px 0; padding-left: 10px; position: relative;} #svNeeds .table p::before { content: "•"; position: absolute; left: 0; top: 0;} .svPartnerList {display:grid; gap:15px; overflow: hidden;} .svPartnerList .list {} .svPartnerList .track { display: flex; width: max-content; } .svPartnerList .track.scroll {animation: scroll 30s linear infinite;} .svPartnerList .track.scrollRe {animation: scrollReverse 30s linear infinite;} .svPartnerList .list { margin: 0 7px; width:120px;} @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollReverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } #cpVideo {position:relative; width:100%; height:120px; overflow:hidden;} #cpVideo video {width:100%; height:auto; object-fit:cover; object-position:center; filter:saturate(85%) brightness(95%) contrast(95%) hue-rotate(-5deg);} #cpVideo .cover {position:absolute; top:0; left:0; width:100%; height:100%; background:#464f71; mix-blend-mode:multiply; opacity:0.4;} #cpBtn {border-bottom:1px solid #eee; text-align:center; } #cpBtn .pageTab {margin:0; padding:0; } #cpBtn .pageTab label input + span {padding:10px 0; border-radius:0; width:140px; font-size:15px; } .cpTit {margin-bottom:25px;} .cpTit h2 {font-size:24px; letter-spacing:-1px; line-height:1.5;} .cpTit p {margin-top:12px; font-size:15px; color:#4b525c; line-height:1.5;} #cpTrophy .swiper {margin-right:-16px; margin-left:-16px;} #cpOnestop {background:#f0f3f6;} #cpOnestop .tit {padding:14px 0; font-size:20px; font-weight:600; color:#fff; background:#2e459d; text-align:center; } #cpOnestop .container {padding:0 26px;} .onestopList {padding:30px 0 60px 0; display:grid; gap:20px;} .onestopList a {position:relative; padding:32px; background:#fff; border-radius:0 26px; box-shadow:3px 5px 5px rgba(0 0 0 / 12%); } .onestopList a p {font-size:15px; color:#4b525c; font-weight:500;} .onestopList a h2 {margin:12px 0 24px 0; font-size:23px; font-weight:700; line-height:1.3; } .onestopList a .btn {font-size:15px; font-weight:700;} .onestopList a .ico {position:absolute; bottom:22px; right:19px; width:80px;} #cpStep {background:#f0f3f6;} .cpStepList {display:flex; flex-wrap:wrap; gap:20px;} .cpStepList .list {position:relative; width:calc(50% - 10px); height:145px; display:flex; align-items:center; justify-content:center; flex-direction:column; overflow:hidden; background:#fff; border-radius:0 30px; background:#fff; box-shadow:3px 5px 5px rgba(0 0 0 / 12%);} .cpStepList .list .num {position:absolute; top:0; right:0; display:inline-block; padding:7px 0; width:80px; background:#2e459d; color:#fff; font-size:13px; font-weight:600; text-align:center; border-radius:0 0 0 17px;} .cpStepList .list .ico {width:90px; margin:0 auto; } .cpStepList .list h4 {position:relative; top:-17px; margin-bottom:-17px; font-size:16px; text-align:center; } #cpReview {border-bottom:1px solid #ececec;} #cpReview.pageGap {padding:60px 0 40px 0 ;} #cpReview .mReviewSwiperWarp {margin-right:-16px; margin-left:-16px; } #cpReview .mReviewSwiperWarp .swiper {padding:0 16px; } #cpInterview {margin-bottom:48px; padding:30px 0 0 0;} #cpInterview .container {position:relative; } #cpInterview .hi {width:90%; } #cpInterview .con {padding:25px 25px 55px 25px; background:#F2F7FF; border-radius:0 35px;} #cpInterview .con .text {font-size:15px; font-weight:500; line-height:1.8; } #cpInterview .con .conBottom {margin-top:20px; display:flex; flex-direction:column; gap:10px;} #cpInterview .con p {display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500;} #cpInterview .con p .bold {font-size:17px;} #cpInterview .con .sign {width:60px;} #cpInterview .ceo {position:absolute; bottom:-48px;right:15px; width:180px; height:220px; overflow:hidden; } #cpHistory {border-bottom:1px solid #ececec;} #cpHistory .tit {padding:14px 0; font-size:20px; font-weight:600; color:#fff; background:#1f2438; text-align:center; } .cpHistoryListWrap {padding:40px 0 60px 60px;} .cpHistoryList {position:relative; display:grid; gap:30px; } .cpHistoryList:before {content:''; position:absolute; width:2px; height:100%; border-left:1px dotted #1f2438; left:-24px; z-index:1; top:12px;} .cpHistoryList h3 {position:relative; margin-bottom:10px; font-size:22px; font-weight:800; color:#1f2438; } .cpHistoryList h3:before {content:''; position:absolute; width:12px; height:12px;background: linear-gradient(135deg, #6717cd 0%, #2871fa 100%); border-radius:100%; left:-30px; top:11px; z-index:9;} .cpHistoryList ul {display:grid; gap:4px; font-size:15px;} .cpHistoryList ul li {display:flex; gap:6px; } #lowTop {margin-bottom:70px; padding:60px 0; background:#0f2442;} #lowTop .container {position:relative; } #lowTop .tit h5 {margin-bottom:10px; color:#a9bcd8; font-weight:600; letter-spacing:0; font-size:16px; } #lowTop .tit h3 {color:#fff; font-size:36px; line-height:1.2; letter-spacing:-2px;} #lowTop .tit h2 {font-size:42px; line-height:1.2; letter-spacing:-2px;} #lowTop .tit .point {color:#00f403;} #lowTop .tit .round {margin-top:20px; display:flex; flex-wrap:nowrap; gap:10px; width:max-content; animation:roundRolling 16s linear infinite; } #lowTop .tit .round li { flex-shrink:0; padding:14px 20px; font-size:22px; line-height:1; background:#00f403; color:#0f2442; border-radius:50px;} #lowTop .img .coin {position:absolute; width:140%; bottom:-120px; left:50%; transform:translate(-50%,0); z-index:2;} #lowTop .img .clover {position:absolute; width:240px; bottom:-110px; left:50%; transform:translate(-50%,0); z-index:3;} @keyframes roundRolling { from {transform:translateX(0); } to {transform:translateX(-50%);} } #lowLink a {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 12px; background:#e9eff7; border-radius:12px; color:#0f2442; font-size:16px;} #lowLink a .btn {display:inline-block; padding:12px 0; background:#0f2442; color:#00f403; width:80%; border-radius:50px; text-align:center; font-size:18px; } #lowMerit .lowMeirtList {display:flex; flex-direction:column; gap:40px;} #lowMerit .lowMeirtList .list {display:flex; align-items:center; gap:12px;} #lowMerit .lowMeirtList .list .text {width:calc(100% - 112px);} #lowMerit .lowMeirtList .list h3 {font-size:20px; font-weight:700;} #lowMerit .lowMeirtList .list p {font-size:15px; line-height:1.5; margin-top:8px;} #lowMerit .lowMeirtList .list .img {width:100px; height:100px; border-radius:16px; overflow:hidden; line-height:0;} #lowStep {background:#f3f6f9;} #lowStep .pTit {margin:0 0 30px 0;} #lowStep .pTit h3 {margin-bottom:5px;} .lowStepList {display:flex; flex-wrap:wrap; gap:6px;} .lowStepList .list {position:relative; width:calc(50% - 3px); background:#fff; padding:16px; box-shadow:2px 3px 5px rgba(0 0 0 / 10%);} .lowStepList .list .text {display:flex; flex-direction:column; gap:20px;} .lowStepList .list h5 {color:#6a717a; font-size:14px; font-weight:500; } .lowStepList .list h2 {font-size:16px; color:#0f2442; font-weight:700;} .lowStepList .list .ico {position:absolute; top:16px; right:16px; width:40px;} #lowStep .info {margin-top:20px; padding:16px; background:#e8edf2; text-align:center; border-radius:16px; font-size:15px; line-height:1.4; font-weight:600; box-shadow:2px 3px 5px rgba(0 0 0 / 10%);} @media (min-width: 1280px) { #prodCar {padding:0 0 160px 0;} .prodCarWrapTop {position:relative; top:1px; margin: 0 auto 40px auto; padding:20px 0 30px 0;} .prodCarWrapTop .container { } .prodCarNationTab {position:relative; display:flex; align-items:center; justify-content:space-between; border-bottom:none;} .prodCarNationTab .tabGrps {position:relative; top:-5px; display:inline-flex; width:145px; background:#F0F3F6; border-radius:30px; padding:7px; overflow:hidden; border:none; box-shadow:3px 3px 3px rgba(0 0 0 / 8%)} .prodCarNationTab .tabBtns {width:1088px; padding:0 75px;} .prodCarNationTab .tabBtns.korTab .swiper-wrapper {justify-content:center;} .prodCarNationTab .tabBtns.korTab .swBtn {display:none;} .prodCarNationTab .swBtn {background:transparent; border-radius:0; width:40px; height:40px;} .prodCarNationTab .swBtn .arrow {width:25px;} .prodCarNationTab .tabBtns .prodCarNationTabSwiper {padding:5px 0 25px 0;} .prodCarNationTab .tabGrps li label input + span {padding:8px 20px; background:#fff;} .prodCarNationTab .tabGrps li:nth-child(1) label input + span {border-radius:30px 0 0 30px;} .prodCarNationTab .tabGrps li:nth-child(2) label input + span {border-radius:0 30px 30px 0;} .prodCarNationTab .tabGrps li label input:checked + span:after {content:none;} .prodCarNationTab .tabGrps li label input:checked + span {background:#2E459D; color:#fff; box-shadow: inset 0 3px 6px rgba(0,0,0,0.3);} .prodCarNationTab .tabBtns .list {position:relative; top:0; width:75px; height:105px; font-weight:400;} .prodCarNationTab .tabBtns .list:hover {top:-5px; font-weight:700; transition:all 0.3s;} .prodCarNationTab .tabBtns .list:hover label .ico {box-shadow:3px 5px 5px rgba(0 0 0 / 12%);} .prodCarNationTab .tabBtns .list label .ico {margin:0 auto 10px auto; width:75px; height:70px; border-radius:20px;} .prodCarNationTab .tabBtns .list label .ico img {width:52px;} .prodCarNationTab .tabBtns .list label figcaption {font-size:15px;} .prodCarSchCondBg {padding:20px 0 25px 0; background:rgba(255 255 255 / 50%);} .prodCarSchCond {margin:0; padding:20px 0 0 0; display:flex; gap:20px; border-top:1px solid #E6EBF3;} .prodCarSchCond .prodCarSchCondBox {width:33.33%;} .prodCarSchCond h5.tit {font-size:15px;} .prodCarSchCond label input + span {font-size:15px;} .prodCarSchCond ul {border-radius:10px;} .prodCarSchResWrap {padding:0;} .prodCarWrapList .container {padding:0;} .prodCarSchResList {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;} .prodCarSchResList .list {position:relative; top:0; width:100%; padding:20px 25px 30px 25px; box-shadow:3px 3px 3px rgba(0 0 0 / 7%);} .prodCarSchResList .list:hover {top:-5px; box-shadow:3px 3px 5px rgba(0 0 0 / 12%); transition:all 0.3s;} .prodCarSchResList .priceWrap a .won:hover {color:#2d59ff;} .prodCarSchResList .list .carThumb {height:160px;} .prodCarSchResList .list .prodCarMaker {width:62px; height:47px; } .prodCarSchResList .list .prodCarMaker img {width:42px;} .prodCarSchResList .list .title {position:relative; top:-12px; margin-bottom:0; font-size:20px; font-weight:700; } .prodCarSchResList .list p.desc, .prodCarSchResList .list p.price {font-size:14px; } .prodCarSchResList .list .priceWrap {margin-top:12px; gap:9px;} .prodCarSchResList .list .priceWrap a {font-size:14px; } .prodCarSchResList .list .priceWrap a .won {font-size:18px;} #prodCar.prodCarView {padding:60px 0 180px 0;} #prodCar .selectCon select {font-size:16px; padding:12px 40px 12px 3px;} #prodCar .selectCon:after {width:25px; height:25px; right:0;} .prodCarView .container {position:relative; padding:0; box-shadow:none; background:transparent; display: grid; grid-template-columns: 860px 420px;} .prodCarBoard { position:absolute; top:0; bottom:inherit; left:inherit; right:0; width: 420px; padding: 0; background: transparent; z-index: 9; transform:none; opacity:1; overflow:visible; box-shadow:none;} .prodCarBoard .prodCarBoardSticky { padding:30px; background:#fff; border-radius:0 35px 35px 0; box-shadow:3px 5px 12px rgba(0 0 0 / 30%); overflow:hidden;} .prodCarBoard .prodCarBoardSticky.fixed { position: fixed; width:420px; top: 121px; } .prodCarBoard h2 {margin-bottom:0; font-size:24px;} .prodCarBoard .optionBox {padding:20px 0 0 0;} .prodCarBoard h5 {font-size:15px; } .prodCarBoard .optionTableList ul {gap:6px; height:77px; font-size:14px; font-weight:500;} .prodCarBoard .optionTableList ul::-webkit-scrollbar { width: 5px;} .prodCarBoard .optionTableList ul::-webkit-scrollbar-track { background: #f1f1f1; } .prodCarBoard .optionTableList ul::-webkit-scrollbar-thumb { background: #888; } .prodCarBoard .optionTableList ul::-webkit-scrollbar-thumb:hover { background: #555; } .prodCarBoard .box {padding:20px 0;} .prodCarBoard .warrantList li {font-size:15px; padding:0 12px;} .prodCarBoard .warrantList li:nth-child(3) {padding:0 0 0 12px;} .priceBoxCon {top:-3px; display:grid; gap:3px;} .prodCarBoard .prodCarMaker {width:70px; height:45px; } .prodCarBoard .prodCarMaker img {width:40px;} .prodCarBoard .priceBox {margin-right:-40px; margin-left:-40px; padding:20px 40px; } .prodCarBoard .priceBox h5 {font-size:17px;} .prodCarBoard .priceBox .priceSum {font-size:15px; width:190px;} .prodCarBoard .priceBox .priceSum span { font-size:2.px; width:140px; } .prodCarBoard .priceBox .priceAdd {font-size:12px; width:90px;} .prodCarBoard .priceBox .priceMonth, .prodCarBoard .priceBox .priceTotal {} .prodCarBoard .include {margin:12px 0 0 0; padding:10px 0; font-size:14px; } .prodCarBoard button.prodCarCounsel {margin:20px 0 0 0; padding:15px 0; width:100%; font-size:20px; background:#2D52DE; border-radius:12px;} .prodCarBoard button.prodCarCounsel:hover {background:#2E459D; transition:all 0.3s;} .prodCarBoard button.prodCarPay {margin:10px 0 0 0; padding:15px 0; width:100%; font-size:20px; background:#281FA1; border-radius:12px;} .prodCarBoard button.prodCarPay:hover {background:#1B1470; transition:all 0.3s;} .prodCarViewContents {padding:35px 35px 0 35px; background:#fff;} .prodCarModel {} .prodCarModel .prodCarModelInfo {padding:0;} .prodCarModel .prodCarModelInfo h2 {margin-bottom:5px; font-size:24px; padding:0 0 0 50px; } .prodCarModel .prodCarMaker {background:transparent; box-shadow:none; right:inherit; top:-4px; left:-12px; backdrop-filter:none; border-radius:0;} .prodCarModel .prodCarModelInfoText {padding:0 0 0 50px; display:flex; align-items:center; gap:18px;} .prodCarModel .prodCarModelInfo p.desc, .prodCarModel .prodCarModelInfo p.price {position:relative; font-size:17px; font-weight:500;} .prodCarModel .prodCarModelInfo p.desc:after {content:''; position:absolute; top:50%; right:-10px; width:2px; height:12px; background:#7E8298; transform:translate(0,-50%); opacity:0.7;} .prodCarThumb {display:grid; gap:25px; grid-template-columns: 615px 150px; } .prodCarSwiper {border-radius:0 35px;} .prodCarSwiper .list {padding:0 40px; height:400px;} .prodCarThumbSwiper {height:400px;} .prodCarThumbTab {bottom:0; right:175px;} .prodCarThumbSwiper .list {padding:12px;} .prodCarThumbTab label input + span {padding:7px 0; width:60px; font-size:13px;} .prodCarModel .bestPrice {margin:25px auto; } .prodCarModel .bestPrice ul {display:flex; align-items:center; gap:20px; } .prodCarModel .bestPrice ul li {width:50%; margin:0; padding:20px; border-radius:0 20px; } .prodCarModel .bestPrice .subject {width:65px; padding:7px 0; font-size:14px; border-radius:0 12px; } .prodCarModel .bestPrice li .text {font-size:15px; font-weight:600; } .prodCarModel .bestPrice li .text .priceWrap {font-size:22px; gap:3px; } .prodCarModel .bestPrice .arrow {width:16px; height:16px; right:20px;} .prodCarModel .bestPrice li:hover {box-shadow:inset 0 3px 6px rgba(0 0 0 / 12%); transition:all 0.5s;} .prodBar {margin:60px auto;} .prodCarDetail .prodCarSchCond {border:none; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:60px 25px;} .prodCarDetail .prodCarSchCond .prodCarSchCondBox {width:100%;} .prodCarDetail h5.subject {margin-bottom:7px; font-size:15px;} .prodCarDetail .prodCarSchCond label input + span {padding:12px 0; font-size:16px;} .prodCarViewPriceBox {margin:-60px -35px; padding:50px 35px;} .prodCarDetail .prodCarViewPriceBox h5.subject {margin-bottom:20px; padding:15px; font-size:20px; } .priceTable {overflow:hidden;} .priceTable table {width:100%;} .priceTable th {padding:6px 8px; font-size:13px;} .priceTable td {padding:8px; font-size:15px;} .prodCarViewOptionBox {margin-bottom:80px; } .optionTable ul {gap:10px;} .optionTable input + span {padding:12px 20px 12px 42px; font-size:15px; font-weight:500; border:1px solid #E6EBF3;} .optionTable input + span:before {top:13px; left:13px; width:20px; height:20px; background-size:15px;} .prodCarPage {margin-right:-35px; margin-left:-35px; } /*page*/ #svTop {padding:80px 0 0 0;} #svTop .car {width:760px; bottom:-150px; right:-300px;} .pageGap {padding:140px 0;} .pTit {margin:0 0 80px 0;} .pTit h3 {margin-bottom:22px; font-size:24px;} .pTit h2 {font-size:56px;} .pTit p {margin-top:22px; font-size:20px;} .pageTab {margin:40px auto 0 auto; padding:10px; } .pageTab label input + span {padding:13px 0; width:140px; font-size:20px;} #svCompare.pageGap {padding:160px 0 140px 0;} #svCompare .compareList .img {width:700px; margin: 0 auto; } #svMonthly .receiptWarp {width:700px; margin:0 auto; gap:30px;} #svMonthly .receipt .con {padding:30px 35px 20px 35px} #svMonthly .receipt .tit h3 {font-size:24px; } #svMonthly .receipt .tit p {font-size:15px; } #svMonthly .receipt li {font-size:16px;} #svMonthly .receipt li .num {font-size:27px;} #svMonthly .receiptCar {top:-80px; margin:0 auto -80px auto; } #svMonthly .receipt {position:relative; top:0;} #svMonthly .receipt:hover {top:-20px; transition:all 0.5s;} #svMonthly .btn a {margin:40px auto 0 auto; width:400px; padding:20px 0; font-size:20px;} #svMonthly .btn a:hover {background:#4B4BEA; color:#fff; transition:all 0.5s;} .meritCon {padding:60px; border-radius:0 60px; } .meritCon .tit {flex-direction:row; gap:40px; padding:0 40px 40px 60px;} .meritCon .tit h2 {font-size:32px;} .meritCon .tit p {font-size:20px; width:calc(100% - 200px);} .meritList {gap:80px 30px; padding:50px 0 40px 0;} .meritList .list {flex-direction:row; align-items:flex-start; text-align:left; gap:30px; width:calc(33% - 17px); } .meritList .icon {position:relative; top:-5px; width:85px; height:85px;} .meritList .text {width:calc(100% - 115px);} .meritList .text h3 {font-size:22px; margin-bottom:8px; } .meritList .text p {font-size:17px;} .svPartnerList {gap:30px;} .svPartnerList .list {width:180px;} .svPartnerList .list {margin:0 20px;} #svNeeds .table {font-size:16px; width:840px; margin:0 auto; } #svNeeds .table ul {grid-template-columns:120px 1fr;} #svNeeds .table ul > li:first-child {flex-direction:column; writing-mode:inherit;} #svNeeds .table .title > li:last-child > div:first-child {padding:15px 0;} #svNeeds .table .titleSm > div {padding:12px 0;} #svNeeds .table .box {padding:25px; } #svNeeds .table p {margin:6px 0;} #cpVideo {height:280px;} #cpBtn .pageTab label input + span {width:300px; padding:16px 0; font-size:18px;} .cpTit {margin-bottom:70px; } .cpTit h2 {font-size:47px;} .cpTit p {margin-top:30px; font-size:24px; line-height:1.7;} #cpTrophy .container {position:relative; } #cpTrophy .swiper {position:absolute; bottom:-168px; right:0; width:800px;} #cpTrophy.pageGap {padding:140px 0 240px 0;} #cpOnestop .tit {padding:20px 0; font-size:26px;} .onestopList {padding:80px 0; grid-template-columns: repeat(3, 1fr); gap:40px; } .onestopList a {position:relative; top:0; padding:80px 0 80px 45px; border-radius:0 50px;} .onestopList a p {font-size:17px;} .onestopList a h2 {margin:22px 0 50px 0; font-size:28px; line-height:1.5;} .onestopList a .btn {font-size:20px;} .onestopList a .ico {bottom:-20px; right:26px; width:130px;} .onestopList .list:nth-child(2) a .ico {bottom:inherit; top:-26px; right:-7px;} .onestopList a:hover {top:-20px; transition:all 0.5s;} .onestopList a:hover .ico {transform:rotate(23deg); transition:all 0.5s;} .onestopList .list:nth-child(3) a:hover .ico {transform:rotate(-15deg); transition:all 0.5s;} .cpStepList {gap:40px;} .cpStepList .list {width:calc(25% - 30px); height:220px; border-radius:0 40px;} .cpStepList .list .num {font-size:15px; width:100px; padding:10px 0;} .cpStepList .list .ico {width:110px;} .cpStepList .list h4 {font-size:22px;} #cpReview.pageGap {padding:120px 0;} #cpReview .mReviewSwiperWarp .swiperNavi .navi.prev {left:-60px;} #cpReview .mReviewSwiperWarp .swiperNavi .navi {right:-60px;} #cpInterview {padding:100px 0 0 0; margin:0; } #cpInterview .container {position:relative; left:-30px; width:600px; margin:0 auto 100px auto;} #cpInterview .hi {width:460px;} #cpInterview .con {padding:50px; border-radius:0 50px;} #cpInterview .con .text {font-size:18px; line-height:2.0;} #cpInterview .con .conBottom {margin-top:40px; display:flex; align-items:center; gap:40px; flex-direction:row;} #cpInterview .con p {font-size:18px;} #cpInterview .con p .bold {font-size:22px;} #cpInterview .con .sign {width:90px;} #cpInterview .ceo {bottom:-108px; right:-102px; width:300px; height:auto; } #cpHistory .tit {padding:20px 0; font-size:26px;} #cpHistory .container {width:1520px; max-width:1520px;} .cpHistoryListWrap {position: relative; overflow: hidden; padding:120px 0;} .cpHistoryList {display: flex; flex-direction: row; gap:70px 30px; flex-wrap:wrap; justify-content:end;} .cpHistoryList:before {display:none;} .cpHistoryList h3 {font-size:24px; letter-spacing:-1px;} .cpHistoryList h3:before {top:-26px; left:0; z-index:2; } .cpHistoryList .list {position:relative; width:calc(25% - 25px); height:190px;} .cpHistoryList .list:after {content:''; position:absolute; top:-20px; left:0; width:110%; height:3px; border-top:1px dotted #1f2438; z-index:1;} .cpHistoryList .list.y2016:before {content:''; position:absolute; bottom:-52px; right:-2px; width:3px; height:262px; border-left:1px dotted #1f2438; z-index:1;} .cpHistoryList .list.y2023:before {content:''; position:absolute; bottom:-52px; right:-2px; width:3px; height:262px; border-left:1px dotted #1f2438; z-index:1;} .cpHistoryList .list.y2020:before {content:''; position:absolute; bottom:-52px; left:-2px; width:3px; height:262px; border-left:1px dotted #1f2438; z-index:1;} .cpHistoryList .list.y2026 {order:2;} .cpHistoryList .list.y2025 {order:3;} .cpHistoryList .list.y2024 {order:4;} .cpHistoryList .list.y2023 {order:8; padding:0 0 0 20px;} .cpHistoryList .list.y2022 {order:7;} .cpHistoryList .list.y2021 {order:6;} .cpHistoryList .list.y2020 {order:5; padding:0 20px 0;} .cpHistoryList .list.y2019 {order:9; padding:0 20px 0;} .cpHistoryList .list.y2018 {order:10; } .cpHistoryList .list.y2017 {order:11;} .cpHistoryList .list.y2016 {order:12; padding:0 0 0 20px;} .cpHistoryList .list.y2015 {order:13;} .cpHistoryList .list.y2014 {order:14;} /* .curve { width: 80px; height: 40px; border: 2px solid #000; border-bottom: none; border-radius: 80px 80px 0 0; margin: 0 10px; transform:rotate(-90deg); } .cpHistoryList .list.y2023 {margin-top:20px;} .cpHistoryList .list.y2022 {margin-top:40px;} .cpHistoryList .list.y2021 {margin-top:60px;} .cpHistoryList .list.y2020 {margin-top:80px;} .cpHistoryList .list.y2019 {margin-top:100px;} .cpHistoryList .list.y2018 {margin-top:120px;} .cpHistoryList .list.y2017 {margin-top:140px;} .cpHistoryList .list.y2016 {margin-top:160px;} .cpHistoryList .list.y2015 {margin-top:180px;} .cpHistoryList .list.y2014 {margin-top:200px;} .cpHistoryList .list ul {position:relative; left:-20px; padding:0 0 0 20px; width:240px;} .cpHistoryList .list ul:before {content:''; position:absolute; bottom:0; left:0; width:2px; height:calc(100% + 40px); border-left:1px dotted #1f2438;} .cpHistoryList .list:nth-child(even) {top:-35px;} .cpHistoryList .list:nth-child(even) ul {position:absolute; bottom:185px; display:flex; flex-direction:column; justify-content:end;} .cpHistoryList .list .dash {display:none;} .cpHistoryList { display: flex; flex-direction: column; gap: 40px; width:700px; margin: 0 auto; z-index: 1;} .cpHistoryList .list { width: 50%;} .cpHistoryList:before {left:50%; transform:translate(-50%, 0); top:25px;} .cpHistoryList ul {gap:8px; font-size:18px;} .cpHistoryList h3 {font-size:30px;} .cpHistoryList .list:nth-child(odd) { padding:0 30px 0 0; align-self: flex-start; text-align:right;} .cpHistoryList .list:nth-child(odd) li {flex-direction:row-reverse;} .cpHistoryList .list:nth-child(even) { padding:0 0 0 30px; align-self: flex-end;} .cpHistoryList h3:before {top:16px; left:-38px; width:15px; height:15px;} .cpHistoryList .list:nth-child(odd) h3:before { left:inherit; right:-37px; } */ #lowTop {padding:80px 0 100px 0; margin-bottom:110px; } #lowTop .tit h5 {margin-bottom:20px; letter-spacing:6px; font-size:20px;} #lowTop .tit h3 {font-size:62px;} #lowTop .tit h2 {font-size:70px;} #lowTop .tit .round {margin:30px auto 0 auto; animation:none;} #lowTop .tit .round li {padding:23px 26px 22px 27px; font-size:26px;} #lowTop .img .coin {width:1000px; bottom:-239px;} #lowTop .img .clover {bottom:-187px; width:410px;} #lowLink .container {width:1080px; max-width:1080px;} #lowLink a {padding:17px; flex-direction:row; font-size:28px; gap:40px;} #lowLink a .btn {padding:18px 34px 17px; width:fit-content; font-size:26px; transform:scale(1); } #lowLink a:hover .btn {background:#081221; transform:scale(1.1); transition:all 0.3s; } #lowMerit .container {width:1080px; max-width:1080px;} #lowMerit .lowMeirtList {gap:80px;} #lowMerit .lowMeirtList .list:nth-child(even) { flex-direction:row-reverse;} #lowMerit .lowMeirtList .list {gap:40px;} #lowMerit .lowMeirtList .list .text {padding:0 0 0 70px; width:50%;} #lowMerit .lowMeirtList .list h3 {font-size:30px; font-weight:800;} #lowMerit .lowMeirtList .list p {margin-top:25px; font-size:22px; font-weight:500; line-height:1.7;} #lowMerit .lowMeirtList .list .img {position:relative; top:0; width:500px; height:230px;} #lowMerit .lowMeirtList .list:hover .img {top:-15px; box-shadow:3px 5px 7px rgba(0 0 0 / 20%); transition:all 0.5s;} #lowStep .pTit {margin:0 0 40px 0;} .lowStepList { flex-wrap:nowrap; gap:10px;} .lowStepList .list {position:relative; top:0; width:25%; padding:36px 30px;} .lowStepList .list:hover {top:-10px; transition:all 0.5s;} .lowStepList .list .text {gap:30px;} .lowStepList .list h5 {font-size:20px;} .lowStepList .list h2 {font-size:24px; } .lowStepList .list .ico {width:60px; top:20px; right:28px;} #lowStep .info {margin-top:25px; padding:24px; font-size:24px;} }