/*content-size*/ .container {margin:0 auto; width:1400px; position:relative; } .conLeft { width:840px; } .conRight { width:335px; } .content {} .flex {display:flex; align-items:center;} /***************header************ #header {position:fixed; height:80px; width:100%; background:#fff; box-shadow:3px 1px 30px rgba(0,0,0,0.2); z-index:999;} #header .container {display:flex; flex-wrap:wrap; padding-top:9px; align-items:baseline;} #header .container h1 {width:140px;} #header .container h1 img {width:100%;} #header .container .gnb {display:flex; margin-left:45px;} #header .container .gnb a {padding:20px 25px; font-size:18px; color:#1a1a1a; font-weight:500; letter-spacing:-0.5px;} #header .container .gnb a:hover {color:#00abce; font-weight:800; transition: all ease 0.25s; } #header .container .gnb a.on {color:#00abce; font-weight:800; transition: all ease 0.25s; } #header .h-cs { position: relative; display: inline-block;} #header .h-cs-content { display: none; position: absolute; top:0; margin-top:55px; padding:10px 0; background:rgba(255,255,255,0.8); border-radius:10px; min-width: 130px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;} #header .h-cs-content a { color: black; padding: 12px 16px !important; font-size:16px !important; text-decoration: none; display: block; text-align:center;} #header .h-cs-content a:hover {background-color: #EFEFEF;} #header .h-cs:hover .h-cs-content {display: block;} */ /* head */ #header .datalogo1019 {image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */} .hevent a {display:flex; justify-content:center; align-items:center; gap:5px; width: 100%; padding: 12px 0; background:#0F0F0F; color: #fff; font-size: 18px; text-align: center; border-bottom:1px solid #333333;} .hevent a .bold {color:#D10005;} .htop {/*padding:17px 0;*/ height:120px; display:flex; background:#000;} .htop.scroll .search-results { display:none; } .htop .container{position:relative; display: flex; align-items: center; gap:30px;} .htop .logo {position:relative; top:-3px; display:flex; align-items:center; gap:5px; width:200px;} .htop .top-slide {position:absolute; top:14px; right:0; width: 350px; margin:0; } .htop .top-slide .swiper-slide {/*padding: 0 30px;*/ padding:4px;} .htop .top-slide .swiper-slide img {border-radius: 15px; overflow: hidden; } .htop .top-slide .swiper-button-next {right: 0;} .htop .top-slide .swiper-button-next:after {color: #8a8a8a; font-size: 14px; font-weight: bold;} .htop .top-slide .swiper-button-prev {left: 0;} .htop .top-slide .swiper-button-prev:after {color: #8a8a8a; font-size: 14px; font-weight: bold;} .kcmlogo {display:flex; align-items:center; gap:5px;} .kcmlogo .logoimg {width:127px;} .kcmlogo .logokcm {width:96px;} .hmenu {position:absolute; top:169px; width:100%; background:#fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; z-index:99; } .hmenu.scroll {position:fixed; top:0; } .hmenu .container {display: flex; justify-content: space-between; align-items: center; padding:0 10px;} .hmenu .gnb {display: flex;} .hmenu .gnb li.first a {padding: 17px 25px 17px 0;} .hmenu .gnb a {position:relative; display:inline-block; padding: 17px 25px; color: #1a1a1a; font-size: 17px; font-weight: 500; letter-spacing: -0.5px;} .hmenu .gnb a:hover {font-weight: 800; transition: all ease 0.25s;} .hmenu .gnb a.on { color:#D10005; font-weight:800; transition: all ease 0.25s;} .hmenu .gnb .h-cs {position: relative; display: inline-block;} .hmenu .gnb .h-cs-content {display: none; position: absolute; top: 0; left:50%; transform:translate(-50%,0); min-width: 185px; margin-top: 55px; padding: 10px 0; border-radius: 10px; background: rgba(255,255,255,0.8); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 101;} .hmenu .gnb .h-cs-content a {display: block; color: black; padding: 12px 16px !important; font-size: 16px !important; text-align: center; text-decoration: none;} .hmenu .gnb .h-cs-content a:hover {background: #fff; color: #D10005;} .hmenu .gnb .h-cs:hover .h-cs-content {display: block;} .hmenu .snb {display: flex; align-items: center; gap: 10px; width:205px;} .hmenu.scroll .hmenuFlex {display: flex; align-items: center; gap: 20px;} .hmenu.scroll .gnb li.first a {padding: 22px 25px 22px 0;} .hmenu.scroll .gnb a {padding: 22px 15px; font-size:16px;} /*.hmenu .snb img {height: 33.5px;}*/ .btn.all a {display: inline-flex; align-items: center; gap: 30px; padding: 12px 15px 12px 22px; border: 1px solid #dbdbdb; border-radius: 50px; color: #4d4d4d; font-size: 14px; font-weight: 500;} .btn.all a .arrow {width: 8px; height: 8px; color: #4d4d4d;} .btn.all a:hover {border: 1px solid #D10005; background: #D10005; color: #fff; transition: all 0.5s;} .btn.all a:hover .arrow {color: #fff;} /*search*/ .hmenu .search {display:none;} .hmenu.scroll .search {display:block; padding:13px 18px; top:0; background:#EBEBEC;} .hmenu.scroll .search input {font-size:14px; background:#EBEBEC; color:#989898;} .hmenu.scroll .search input:placeholder {color:#989898;} .hmenu.scroll .search-results { top: 70px; } .search { position: relative; top:-1px; padding:16px 25px; display:flex; align-items:center; background:#292929; border-radius:10px;} .search input {background:#292929; width:255px; font-size:15px; line-height:1.5; color:#EBEBEB; letter-spacing:-0.5px} .search input:placeholder { color:#EBEBEB;} .search .searchBtn { background-color: transparent; } .search .searchBtn img { width:21px; } .search-results { position:absolute; top:-20px; left: 50%; transform:translate(-50%,0); width: 100%; max-width:1220px; height:505px; z-index:101; padding:30px 25px; border-radius:0; box-shadow:3px 3px 5px rgb(0 0 0 / 30%); background:#fff; border-radius:20px;} .search-results .close {position:absolute; top:30px; right:30px; width:18px;} .search-results h3 {margin-bottom:15px; font-size:18px; font-weight:700; color:#363636;} .search-results a {display:inline-block;} .search-results .latest {margin-bottom:30px;} .search-results .latest ul {display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .search-results .latest ul a ,.search-results .latest ul button {min-width:50px; padding:10px 13px 9px 13px; font-size:16px; font-weight:500; color:#fff; background:#ccc; border-radius:50px; box-shadow:2px 3px 3px rgb(0 0 0 / 7%); text-align:center;} .search-results .hot { } .search-results .hotTab { margin-bottom:22px; display:flex; align-items:center; gap:14px; } .search-results .hotTab input[type="radio"] {display:none; appearance:none;} .search-results .hotTab input[type="radio"] + label {display:block; min-width:54px; padding:10px 13px 9px 13px; font-size:16px; font-weight:500; color:#828282; border-radius:50px; box-shadow:2px 3px 3px rgb(0 0 0 / 7%); text-align:center; cursor:pointer;} .search-results .hotTab input[type="radio"]:checked + label {background:#D10005; color:#fff;} .search-results .hot-content {display:flex; align-items:center; gap:33px;} .search-results .hot-content ul {width:50%;} .search-results .hot-content li {padding:10px 0; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#363636; border-bottom:1px solid #efefef;} .search-results .hot-content li:last-child {border-bottom:0;} .search-results .hot-content li .text {display:flex; align-items:center; gap:16px; width:100%;} .search-results .hot-content li .text a ,.search-results .hot-content li .text button {width:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color:transparent; text-align: left; font-size:16px; color:#000; font-weight:400;} .search-results .hot-content li .num {width:14px; text-align:center;} .search-results .hot-content li .arrow {font-size:10px; width:20px; text-align:center; } .search-results .hot-content li .arrow.same {font-size:16px; font-weight:800; color:#ababab;} .search-results .hot-content li .arrow.up {color:#FF0000;} .search-results .hot-content li .arrow.down {color:#1700FF;} .search-results .sr-top {margin-bottom:15px; display:flex; align-items:center; justify-content:space-between; gap:14px;} .search-results .sr-top .back button {background:transparent; width:12px;} .search-results .sr-top .btn button {background:transparent; font-size:15px; color:#9B9B9B;} .search-results .sr-top .in-serch {position:relative; width:100%;} .search-results .sr-top .in-serch input {padding:12px 12px 12px 45px !important; background:#EBEBEC !important; border-radius:10px !important; width:100%;} .search-results .sr-top .in-serch img {position:absolute; top:50%; left:15px; transform:translate(0,-50%); width:20px;} /***************main*************/ /*visual*/ #mvisual {margin-top:105px; padding-bottom:70px;} #mvisual .container {display:flex; gap:22px; justify-content:space-between;} #mvisual .visual-img {display:none;width:420px; /*display:flex; flex-direction:column; gap:22px;*/ } #mvisual .visual-img a {display:block; height:193px; /*box-shadow:3px 3px 5px rgba(0 0 0 / 15%);*/ border-radius:20px; overflow:hidden;} #mvisual .visual-img a.etcBtn {border:1px solid #f5f5f5;} .visualSwiper {position:relative !important; z-index:9; width:100%;} .visualSwiper .swiper-slide {} .visualSwiper .swiper-slide a {display:block; height:460px; border-radius:20px; overflow:hidden;} #mvisual .pagewrap {position: absolute; bottom: -70px; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; z-index: 9;} #mvisual .pagewrap .container {padding:0 2px;} #mvisual .pagewrap .playnpause {width:130px; display: flex; align-items: center; gap: 15px; padding:15px 24px; border-radius: 50px; background:#767677; color:#fff; font-size:14px; font-weight:600;} #mvisual .pagewrap .playnpause a img {width:15px; filter:grayscale(1) brightness(3.5);} #mvisual .pagewrap .playnpause .autoplay {display: none;} #mvisual .pagewrap .playnpause .autoplay.on {display: block; width: 16px;} #mvisual .pagewrap .playnpause .pagination_num {margin-left: 10px;} #mvisual .pagewrap .swiper-pagination-fraction {width: auto;} #mvisual .pagewrap .pagination_ball {width: auto; margin-left: 20px; line-height: 0;} #mvisual .pagewrap .allbtn a {padding:10px 13px 10px 23px; display:inline-block; border-radius:50px; border:1px solid #dbdbdb; color:#4D4D4D; gap:15px;} #mvisual .pagewrap .swiper-pagination-bullets {line-height: 0;} #mvisual .pagewrap .swiper-pagination-bullet {width: 12px; height: 12px; margin: 0 6px; border-radius: 2px; background: #C1C1C1; opacity: 1;} #mvisual .pagewrap .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #000;} #visulSm {margin-top:30px;} #visulSm .list a {display:block; width:100%; height:152px; /*border:1px solid #AFAFAF;*/ border-radius:20px; overflow:hidden;} #main .bntit {margin-bottom:30px; display:flex; justify-content:space-between; align-items:center; font-weight: bold; font-size:36px;} #main .bntit h2 { width:300px; font-size:36px; font-weight:bold; letter-spacing:-2px;} /* #main .bntit a {padding:12px 22px; font-size:16px; line-height:16px; color:#222; font-weight:400; letter-spacing:-1px; opacity:0.6; display:flex; align-items:center; border:1px solid #dbdbdb; border-radius:500px;} #main .bntit a:hover {opacity:1; } #main .bntit a span {margin-left:7px; display:block; width:15px;} */ /* form */ .agree input + label {cursor:pointer;} .agree a {cursor:pointer;} .flex {display:flex;} .flexCenter {display:flex; align-items:center;} .flexBetween {display:flex; align-items:center; justify-content:space-between;} #mform {margin:40px 0 0 0;} .mdForm .formList {position:relative; display: flex; justify-content: space-between; align-items: stretch; gap: 10px; width: 100%; border:1px solid #ECECEC; border-radius:24px; overflow:hidden;} .mdForm .formList li {position: relative;} .mdForm .formList li:nth-child(1) {width:360px;} .mdForm .formList li:nth-child(2) {width:325px;} .mdForm .formList li:nth-child(2):before {content:''; position:absolute; top:50%; left:0; transform:translate(0 ,-50%); width:1px; height:50px; background:#DEE0E2;} .mdForm .formList li:nth-child(2):after {content:''; position:absolute; top:50%; right:0; transform:translate(0 ,-50%); width:1px; height:50px; background:#DEE0E2;} .mdForm .formList li:nth-child(3) {width:calc(100% - 685px); z-index:8;} .mdForm .formList li:nth-child(3) input {padding:60px 170px 30px 27px;} .mdForm .formList li input {width: 100%; padding: 60px 27px 30px 27px; font-size:20px; border-radius:17px;} .mdForm .formList li label {position: absolute; top: 30px; left: 28px; font-size: 16px; letter-spacing: -0.5px;} .mdForm .formList li input::placeholder{color: #bbb; letter-spacing:-1px; font-weight: 500;} .mdForm .formList li.formBtn {position:absolute; top:50%; right:25px; transform:translate(0,-50%); z-index:9; width:126px; height:60px; } .mdForm .formList li.formBtn button {width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#D10005; color:#fff; border-radius:12px; font-size:19px; font-weight:600; letter-spacing:3px; } .mdForm .formList li.formBtn button .intxt {position:relative; right:-2px;} .mdForm .formList li.formBtn button:hover {background:#0A0B0B; transition:all 0.5s;} .mdForm .formAgree ul {display:flex; justify-content: end; gap: 3px; margin-top:17px; font-size: 14px; letter-spacing: -0.5px; gap:15px;} .mdForm .formAgree ul li {gap:5px;} .mdForm .formAgree label {color:#222;} .mdForm .formAgree a {color:#C1C1C1;} .gnaAgree {width: 100%;} .gnaAgree label {gap: 3px;} .gnaAgree input[type="checkbox"] {display: none; appearance: none;} .gnaAgree input[type="checkbox"] + label {position: relative; padding-left: 23px; cursor: pointer;} .gnaAgree input[type="checkbox"] + label:before {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 17px; height: 17px; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box; /*background: url('/_img/ico_check.png') no-repeat 60% 60% #fff;*/ background-size: 14px;} .gnaAgree input[type="checkbox"]:checked + label:after {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 17px; height: 17px; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box; background: url('/_img/ico_check_blue.png') no-repeat 55% 55% #fff; background-size: 14px;} .gnaAgree .all input + label {display:flex; align-items:center; gap:15px; justify-content:space-between;} .gnaAgree .fc-gray { color:#737373;} /*estimate*/ #mEstimate {position:relative;/* height:100px; */ z-index:100; top:-50px;} #mEstimate .container {/*position:absolute; top:-45px; left:50%;transform: translate(-50%, 0); */ padding:30px 140px; box-shadow:8px 5px 8px rgba(0,0,0,4%); background:#fff; border-radius:5px; z-index:999;} #mEstimate h3 {font-size:22px; text-align:center; font-weight:400; cursor:pointer;} #mEstimate h3 .bold {font-weight:600;} #mEstimate h3 .bg-s {padding:5px 12px; font-weight:600; font-size:16px; border-radius:500px; line-height:25px;} #mEstimate .mEstimateview {display:none;} #mEstimate .estimate-con {display:flex; flex-wrap:wrap; justify-content:space-between; padding-top:35px;} #mEstimate .estimate-con .select {display:flex; gap:15px; border-bottom:1px solid #d1d1d1; padding:0;} #mEstimate .estimate-con .select .ft-gb {font-size:35px; color:#d1d1d1;} #mEstimate .estimate-con .select select {margin-top:-10px; width:175px; font-size:18px; font-weight:600; text-align:center; color:#1a1a1a; background:url('/_img/select_arrow.png') no-repeat center right; background-size:14px; padding:0 18px 0 0 ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mEstimate .estimate-con .select select#manufact option {padding:5px 0;} #mEstimate .estimate-con button ,#mEstimate .estimate-con a {padding:13px 45px; background:#4d4d4d; color:#fff; border-radius:5px; font-size:18px; font-weight:600; } #mEstimate .estimate-con button:hover ,#mEstimate .estimate-con a:hover {background:#2e2e2e; transition: all ease 1s; } /*mConsult*/ #mConsult .ns {padding: 0 0 0 3px; font-size:21px; color:#00abce;} #mConsult .consultview {padding:30px 140px; color:#fff; border-radius:5px; text-align:center; box-shadow:5px 3px 10px #e6e6e6; } #mConsult .consultview h2 {margin-bottom:25px; font-size:30px;} #mConsult .consultview p {position:relative; margin:15px 0 25px 0; font-size:16px; cursor:pointer; font-weight:400;} #mConsult .consultview p span {margin-left:-21px;} #mConsult .consultview p:after {position:absolute; margin-left:5px; content:'+'; font-weight:500; font-size:33px; line-height:13px; width:20px; height:20px; } #mConsult .consultview p:hover:after {animation: tire-rotate 1s linear; transform-origin: 50% 50%;} #mConsult .consultview p.on:after {margin-left:5px; content:'-'; font-weight:500; font-size:33px;line-height:13px; width:20px; height:20px; } #mConsult .consultview p.on:hover:after {animation: tire-rotate 1s linear; transform-origin: 50% 50%;} #mConsult .consultview .consultview-con {display:flex; flex-wrap:wrap; justify-content:space-between;} #mConsult .consultview .consultview-con input {padding:15px; border-radius:3px; width:30%;} #mConsult .consultview .consultview-con input:first-child {width:20%;} #mConsult .consultview .consultview-con button {padding:15px 45px; background:#00254e; color:#fff; border-radius:5px; font-size:18px; font-weight:600; } #mConsult .consultview .consultview-con button:hover {background:#001328; transition: all ease 1s; } #mConsult .consultview .agreecon {display:flex; justify-content:space-between; align-items:center;} #mConsult .consultview .agree {margin-top:15px; display:flex; gap:5px; letter-spacing:0; color:#1a1a1a; font-weight:500;} #mConsult .consultview .consultclick {margin-top:15px; display:flex; gap:5px; letter-spacing:0; color:#D6F2F8; font-weight:500; } #mConsult .consultform-warp {display: none; overflow: hidden; padding:30px 0; font-size:16px; background-color: #fff; border-radius:0 0 5px 5px; border-right:1px solid #d1d1d1; border-left:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; box-shadow:5px 3px 10px #e6e6e6; } #mConsult .consultform {display:flex; flex-wrap:wrap;} #mConsult .consultform ul {padding: 0 55px 0 35px; display:flex; flex-basis:60%; flex-direction:column; box-sizing:border-box;} #mConsult .consultform ul.line {padding: 0 35px 0 55px;border-right:1px solid #d1d1d1; flex-basis:40%;} /*check custom*/ #mConsult .agree input[type="checkbox"]{appearance:none; } #mConsult .agree input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:25px; cursor:pointer; } #mConsult .agree input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:-1px; width:18px; height:18px; text-align:center; background:#fff; box-sizing:border-box; } #mConsult .agree input[type="checkbox"]:checked + label:after {content:url('/_img/mEstimate_check.png'); position:absolute; top:1px; left: 2px; width:15px; height:11px; /* border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);*/ } /*check custom*/ #mConsult .consultclick input[type="checkbox"]{appearance:none; } #mConsult .consultclick input[type="checkbox"] + label {display:inline-block; position:relative; padding-right:25px; cursor:pointer; } #mConsult .consultclick input[type="checkbox"] + label:before{ content:''; position:absolute; right:0; top:-1px; width:18px; height:18px; text-align:center; background:#fff; box-sizing:border-box; } #mConsult .consultclick input[type="checkbox"]:checked + label:after {content:url('/_img/mEstimate_check.png'); position:absolute; top:1px; right: 1px; width:15px; height:11px;} #mConsult .consultform ul li {margin-bottom:40px; display:flex; gap:40px; font-size:16px; } #mConsult .consultform ul li:last-child {margin-bottom:0;} #mConsult .consultform ul li > label {width:80px; color:#1a1a1a; font-weight:600; letter-spacing:-1px;} #mConsult .consultform ul li span > label {font-weight:600; color:#4d4d4d;} #mConsult .consultform input + label {cursor:pointer;} #mConsult .consultform .input {width:80%;} /*Contact custom*/ #mConsult .consultform .input-Contact span input[type="checkbox"]{ appearance:none; } #mConsult .consultform .input-Contact span input[type="checkbox"] + label {display:inline-block; position:relative; margin-right:35px; padding-right:5px; width:50px;} #mConsult .consultform .input-Contact span input[type="checkbox"] + label:before{ content:''; position:absolute; right:0; top:0; width:17px; height:17px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #mConsult .consultform .input-Contact span input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:4px; right: 4px; width:9px; height:9px; background:#000; border-radius:100%; } /*Time custom*/ #mConsult .consultform .input-Day {margin-bottom:15px;} #mConsult .consultform .input-Day span input[type="checkbox"]{ appearance:none; } #mConsult .consultform .input-Day span input[type="checkbox"] + label {display:inline-block; position:relative; padding:5px 0; width:33px; height:33px; text-align:center;} #mConsult .consultform .input-Day span input[type="checkbox"] + label .ff {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99;} #mConsult .consultform .input-Day span input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:0; width:33px; height:33px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #mConsult .consultform .input-Day span input[type="checkbox"]:checked + label:after {content: ''; position:absolute;left:0; top:0; width:33px; height:33px; background:#4d4d4d; border-radius:100%; color:#fff;} #mConsult .consultform .input-Day span input[type="checkbox"]:checked + label .ff {color:#fff;} /*Select custom*/ #mConsult .consultform .select {display:flex; gap:10px; align-items:center;} #mConsult .consultform select {position:relative; padding:6px 30px 6px 13px; border:1px solid #b3b3b3; border-radius:3px; background:url('/_img/select_arrow.png') no-repeat 55px; background-size:8px; background-position:90% 50%; text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} ::-webkit-scrollbar {width: 5px;} ::-webkit-scrollbar-track {background:#f1f1f1;} ::-webkit-scrollbar-thumb { background:#ddd; border-radius: 10px;} ::-webkit-scrollbar-thumb:hover { } #mConsult .consultform .input-Car .select select{width:33.33%;} #mConsult .consultform .input-Textarea textarea {padding:15px; width:100%; border:1px solid #b3b3b3; border-radius:5px;} /*Period custom*/ #mConsult .consultform .input-Period span input[type="radio"]{ appearance:none; } #mConsult .consultform .input-Period span input[type="radio"] + label {display:inline-block; position:relative; padding:5px 0; margin:-3px; width:34%; height:33px; text-align:center;} #mConsult .consultform .input-Period span input[type="radio"] + label .ff {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99;} #mConsult .consultform .input-Period span input[type="radio"] + label:before{ content:''; position:absolute; left:0; top:0; width:100%; height:33px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; } #mConsult .consultform .input-Period span input[type="radio"]:checked + label:after {content: ''; position:absolute;left:50%; top:50%; width:102%; transform: translate(-50%, -50%); height:35px; background:#4d4d4d; border-radius:5px; color:#fff; z-index:9;} #mConsult .consultform .input-Period span input[type="radio"]:checked + label .ff {color:#fff;} #mConsult .consultform .input-Period.input {padding-left:3px;} /*Customer custom*/ #mConsult .consultform .input-Customer span input[type="radio"]{ appearance:none; } #mConsult .consultform .input-Customer span input[type="radio"] + label {display:inline-block; position:relative; padding:5px 0; margin:-3px; width:34%; height:33px; text-align:center;} #mConsult .consultform .input-Customer span input[type="radio"] + label .ff {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99;} #mConsult .consultform .input-Customer span input[type="radio"] + label:before{ content:''; position:absolute; left:0; top:0; width:100%; height:33px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; } #mConsult .consultform .input-Customer span input[type="radio"]:checked + label:after {content: ''; position:absolute;left:50%; top:50%; width:102%; transform: translate(-50%, -50%); height:35px; background:#4d4d4d; border-radius:5px; color:#fff; z-index:9;} #mConsult .consultform .input-Customer span input[type="radio"]:checked + label .ff {color:#fff;} #mConsult .consultform .input-Customer.input {padding-left:3px;} /*Prcie custom*/ #mConsult .consultform .input-Price .rs-container .rs-pointer {width:15px; height:15px; border-radius:100%; border:4px solid #4d4d4d; box-sizing:border-box;} #mConsult .consultform .input-Price .rs-container .rs-scale {cursor:pointer;} #mConsult .consultform .input-Price .rs-container .rs-scale span ins {font-size:12px; color:#8c8c8c; font-weight:400;} #mConsult .consultform .input-Price .rs-container .rs-bg {height:5px; background:#b3b3b3; cursor:pointer; } #mConsult .consultform .input-Price .rs-container .rs-bg:before {position:absolute; content:''; top:50%; left:-3px;transform: translate(0, -50%); width:15px; height:15px; background:#b3b3b3; border-radius:100%;} #mConsult .consultform .input-Price .rs-container .rs-bg:after {position:absolute; content:''; top:50%; right:-13px;transform: translate(0, -50%); width:15px; height:15px; background:#b3b3b3; border-radius:100%;} #mConsult .consultform .input-Price .rs-container .rs-selected { height:5px; background:#4d4d4d; border:none;} #mConsult .consultform .input-Price .rs-container .rs-pointer::after, .rs-container .rs-pointer::before {display:none;} /*7일인도특가*/ #mWeeks {margin-bottom:120px;} #mWeeks .weekwrap {display:flex; justify-content:space-between; gap:50px; margin-right:-30px;} #mWeeks .weektit {position: relative; width: 100%; max-width: 240px; margin-top:10px;} #mWeeks .weektit h2{font-size: 44px; line-height:58px; font-weight: 800; white-space: nowrap; letter-spacing: -0.5px} #mWeeks .weektit .sevenMark{position: absolute; top: -32px; right: 0; max-width: 80px; z-index: 9;} #mWeeks .weektit .weekdoc {position: absolute; top:84px; right:-22px; max-width: 97px; z-index: 9;} #mWeeks .weektit .weekkcm {position: absolute; bottom:-8px; right:0; max-width: 220px; z-index: 9;} #mWeeks .weektit p{margin-top: 20px; color: #666; font-size: 18px; line-height: 1.4; letter-spacing: -0.5px;} #mWeeks .weektit a.moreBtn{display:inline-flex; justify-content: center; align-items: center; gap:7px; margin-top: 60px; padding: 19px 30px; border-radius: 100px; border: 1px solid #222; text-align: center; font-size: 16px; font-weight: 500;} #mWeeks .weektit a.moreBtn:hover {gap:15px; transition:all 0.5s;} #mWeeks .wswiper {position:relative; width:100%; max-width:1120px; } #mWeeks .wswiper .swiper-wrapper {padding-bottom:50px;} #mWeeks .wswiper .swiper-grid-column>.swiper-wrapper {flex-direction:inherit !important;} #mWeeks .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%;} #mWeeks .arrow .swiper-button-next {right:-35px; color:transparent;} #mWeeks .arrow .swiper-button-prev {left:-35px; height:19px; color:transparent;} #mWeeks .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #mWeeks .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} /* mbn */ .fc-g {color:#D10005;} .fc-gg {color:#D10005;} #mbn {} #mbn .mbnwrap {display:flex; align-items:stretch; gap:55px;} #mbn .mbnwrap .mbncon {position:relative; width:100%; } #mbn .mbnwrap .mbncon a {position:relative; display:block; height:455px; padding:80px 60px; background:#000; border-radius:24px; z-index:2;} #mbn .mbnwrap .mbncon a h2 {margin-bottom:24px; font-size:34px; color:#fff; font-weight:500; line-height:1.4; letter-spacing:-1px;} #mbn .mbnwrap .mbncon a p {font-size:18px; color:#fff; line-height:1.5; opacity:0.6;} #mbn .mbnwrap .mbncon a h2 .point {margin-right:-6px; position:relative; display:inline-block; font-weight:700; z-index:2;} #mbn .mbnwrap .mbncon a h2 .point .up {position:relative; z-index:9;} #mbn .mbnwrap .mbncon a h2 .point:after {content:''; position:absolute; bottom:0; left:51%; transform:translate(-50%,0); width:105%; height:16px; background:#D10005; } #mbn .mbnwrap .mbncon a .ico {position:absolute; bottom:25px; right:25px; width:164px; z-index:1;} #mbn .mbnwrap .mbncon a:hover .ico {bottom:50px; transition:all 0.5s;} /*인기 최저가*/ #mBest {margin:180px 0;} #mBest .container {position:relative;} #mBest ul {display:flex; align-items:center; margin-top:40px;} #mBest ul li {width:50%;} #mBest ul li a {display:block; padding:25px 7px; font-size:20px; font-weight:500; line-height:20px; background:#fff; border-bottom:2px solid #777878; color:#777878; text-align:center;} #mBest ul li.active a {border-bottom:4px solid #000; color:#000; font-weight:700; } #mBest .besttit h2 {text-align:center; font-size:44px; letter-spacing:-2px; color:#000; font-weight:800;} #mBest .besttit.text-left h2 {margin-bottom:24px; text-align:left;} #mBest .ppinfo {position:inherit; bottom:0;} #mBest .carimg {position:absolute; width:1020px; bottom:-60px; left:-40%; } #mBest .carimg.active {animation: bestcar 2s linear;} #mBest .carimg.active .tire-rotate {animation: tire-rotate 1s linear; animation-iteration-count: 2;} #mBest .carimg .tire01 {position:absolute; right:143px; bottom:73px; z-index:99;} #mBest .carimg .tire02 {position:absolute; left:197px; bottom:74px; z-index:99;} #mBest .swiper-pagination-bullet-active {background:#000;} @keyframes bestcar { 0% {left:-80%;} 100% {left:-40%;} } @keyframes tire-rotate { 0% {transform:rotate(0);} 100% {transform:rotate(360deg);} } /*왜그럴까요?*/ #mWhy {margin:80px 0 110px 0;} #mWhy .whywrap {display:flex; justify-content:space-between; gap:15px;} #mWhy .whywrap .whycon {width:50%;} #mWhy .whywrap .whycon a ,#mWhy .whywrap .whycon {display:flex; justify-content:space-between; align-items:center; padding:20px 45px; border-radius:5px;} #mWhy .whywrap .whycon a:hover ,#mWhy .whywrap .whycon:hover {filter: contrast(110%); transition:all 1s;} #mWhy .whywrap .whycon a h3 ,#mWhy .whywrap .whycon h3 {font-size:22px; line-height:32px; font-weight:500; letter-spacing:-1px;} #mWhy .whywrap .whycon.bg-1 a ,#mWhy .whywrap .whycon.bg-1 {background:#8bd9e9;} #mWhy .whywrap .whycon.bg-2 a ,#mWhy .whywrap .whycon.bg-2 {background:#dbf9ff;} #mExclusive .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%;} #mExclusive .arrow .swiper-button-next {right:-35px; color:transparent;} #mExclusive .arrow .swiper-button-prev {left:-35px; height:19px; color:transparent;} #mExclusive .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #mExclusive .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} /*제조사별*/ #mCompany {margin:110px 0;} #mCompany .container {position:relative;} #mCompany .container .horizontal {position:absolute; display:flex; align-items:center; top:10px; left:300px; z-index:9;} #mCompany .container .horizontal li a {padding:0 13px; font-size:20px; font-weight:bold; color:#B9BBBD;} #mCompany .container .horizontal li.active a {color:#D10005;} #mCompany .container .horizontal li:first-child:after {content:'|'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:20px; font-weight:100;} #mCompany .swiper-scrollbar-drag {background:#0A0B0B;} #mCompany .comlist { /*margin:40px 0 20px 0; padding: 0 40px; display:flex; gap:60px; */ } #mCompany .comlist .menu a ,#mCompany .comlist label.menu {display:flex; flex-direction:column; align-items:center; gap:10px; font-size:16px; color:#8c8c8c; font-weight:500;} #mCompany .comlist .menu a .img ,#mCompany .comlist label.menu .img { width:110px; height:110px; display:flex; align-items:center; justify-content:center; border:1px solid #d1d1d1; border-radius:100%; text-align:center; cursor:pointer;} #mCompany .comlist .menu a .img:hover ,#mCompany .comlist label.menu .img:hover {background:#f1f1f1; transition:all 0.5s;} #mCompany .comlist label.menu .img img {width:70px;} #mCompany .comlist .menu a:hover .img #mCompany .comlist .menu label:hover .img {animation: turn-around 1s linear;} #mCompany .comlist .menu.active a .img ,#mCompany .comlist label.menu.active .img ,#mCompany .comlist input[type="radio"]:checked + label .img {background:#f3f3f3; } #mCompany .comlist .menu.active a .img img ,#mCompany .comlist label.menu.active .img img ,#mCompany .comlist input[type="radio"]:checked + label.menu .img img { /*filter: opacity(0.9) drop-shadow(0 0 0 white) grayscale(1) brightness(100); */ } #mCompany .comlist {position:relative; } #mCompany .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:9; width:100%;} #mCompany .arrow .swiper-button-next {right:-15px; color:transparent;} #mCompany .arrow .swiper-button-prev {left:-15px; height:19px; color:transparent;} #mCompany .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #mCompany .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} #mCompany .comcon {display:none;} #mCompany .comcon .list-wrap {display:flex; justify-content:space-between; align-items:center; gap:60px; text-align:center;} #mCompany .comcon .list-wrap .list a .img {margin-bottom:20px; width:180px;} #mCompany .comcon .list-wrap .list a:hover .img img {transform: scale(1.1); transition:all 1s;} #mCompany .comcon .list-wrap .list a h3 {font-size:17px; font-weight:500;} @keyframes turn-around { 0% {transform: scaleX(1);} 25% {transform: scaleX(0);} 50% { transform: scaleX(1); } 75% {transform: scaleX(0);} 100% {transform: scaleX(1) } } /*가격대별*/ #mPrice {} #mPrice .tabs ul ,#mPrice .horizontal {margin:90px 0 20px 0; display:flex; justify-content:space-between; gap:35px;} #mPrice .tabs ul li a ,#mPrice .horizontal label {display:block; padding:20px 45px; font-size:17px; line-height:17px; font-weight:600; border-radius:500px; background:#333; color:#fff; box-sizing:border-box; white-space:nowrap; } #mPrice .horizontal input[type="radio"] { display:none; } #mPrice .horizontal input[type="radio"]:checked + label { background:#D10005; color:#fff; font-weight:800; border:none; } #mPrice .horizontal input[type="radio"] + label {cursor:pointer;} /*#mPrice .horizontal input[type="radio"] + label:hover {background:#504118; color:#fff; transition:all 0.5s;}*/ #mPrice h2 { display:inline-block; } #mPrice .nationBtnWrap { display:inline-block; line-height:36px; } #mPrice .nationBtnWrap .nationBtn { display:inline-block; font-size:20px; } #mPrice .nationBtnWrap .nationBtn.bar {font-weight:100;} #mPrice .nationBtnWrap .nationBtn input[type="radio"] { display:none; } #mPrice .nationBtnWrap .nationBtn input[type="radio"] + label {padding:0 4px; display:block; cursor:pointer; color:#B9BBBD;} #mPrice .nationBtnWrap .nationBtn input[type="radio"]:checked + label { color:#D10005;} #mPrice .swiper-scrollbar-drag {background:#0A0B0B;} #mPrice .tabs ul li.active a {background:#1a1a1a; color:#fff; border:none;} #mPrice .ppinfo {top:72px; left:0; bottom:inherit; right:inherit; color:#737578; font-weight:500;} #mPrice .ppinfo .bold {color:#1a1a1a;} /*carList - 1*/ .carList1 .list {padding-top:30px; padding-right:30px;} .carList1 .list > a {position:relative; padding:30px 25px 40px 25px; background:#fafafc; border:1px solid #fafafc; border-radius:20px; box-sizing:border-box; z-index:9;} .carList1 .list > a:hover {border:1px solid #050089; background:#fff; box-shadow:0 5px 20px rgb(0 0 0 / 10%);} .carList1 .list .img {position:relative; display:flex; align-items:center; width:100%; height:170px;} .carList1 .list a:hover .img .carimg {transform: scale(1.1); transition: all .3s;} /*.carList1 .list a:hover .text {opacity:0.6; transition: all .3s}*/ .carList1 .list a .inven {display:none;} .carList1 .list a:hover .inven {display:block;} .carList1 .list a .inven .box {display:block; position:absolute; top:7px; right:7px; font-size:12px; font-weight:700; padding:8px 16px 6px 16px; border-radius:500px; } .carList1 .list a .inven .box.ing {background:#2C1EF2; color:#fff; } .carList1 .list a .inven .box .fc-pk {color:#FF8B8B;} .carList1 .list .img .week {position:absolute; top:13px; left:20px;} .carList1 .list .img .only {position:absolute; top:0; left:0; width: 0; height: 0; border-top: 120px solid #1267C8; border-right: 120px solid transparent; } .carList1 .list .img .only span {position:absolute; top:-100px; left:15px; color:#fff; font-size:14px; font-weight:500; line-height:18px;} .carList1 .list .text {} .carList1 .list h3 {margin:22px 0 10px 0; font-size:18px; font-weight:600; letter-spacing:-1px; height:42px;} .carList1 .list p {font-size:15px; line-height:15px; color:#666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList1 .list p.price {margin:20px 0 25px 0; } .carList1 .list p.price .fs-big {font-size:140%;} .carList1 .list > a .btn {display:none;} .carList1 .list > a:hover .btn {display:block; position:absolute; left:50%; bottom:-20px; transform:translate(-50%,0); width:100%; display:flex; justify-content:center; gap:5px; z-index:99; tran} .carList1 .list > a .btn button {display:inline-block; padding:12px 17px 11px 17px; text-align:center; font-size:15px; line-height:15px; font-weight:500; color:#fff; border-radius:50px;} .carList1 .list > a .btn button.bt1 {background:#00abce;} .carList1 .list > a .btn button.bt2 { background:#2c1ef2;} .carList1 .swiper-horizontal>.swiper-scrollbar, .carList1 .swiper-scrollbar.swiper-scrollbar-horizontal {opacity: 1 !important; bottom: 0 !important;} .carList1 .swiper-scrollbar-drag{background: #223359 !important;} /* 보라색 하단 버튼 스타일 .carList1 .list .btn {display:flex; justify-content:space-between; gap:5px; padding:0 20px 20px 20px} .carList1 .list .btn a {display:block; padding:9px 0 8px 0; width:100%; text-align:center; border-radius:3px; box-sizing:border-box; font-size:14px; line-height:14px;} .carList1 .list .btn a:hover {background:#6311eb; transition: all 1s;} */ /*carList - 2*/ .bswiper .swiper-wrapper {padding:40px 0 50px 0;} .carList2 .list {} .carList2 .list a {position:relative; padding:30px 30px 35px 30px; border-radius:20px;} .carList2 .list a .num {position:absolute; top:20px; left:20px; width:30px; height:30px; text-align:center; font-size:14px; line-height:30px; color:#fff; font-weight:500; background:#353535; border-radius:10px;} .carList2 .list a:hover {box-shadow:3px 3px 5px rgba(0 0 0 / 10%); } .carList2 .list a:hover .img img {transform:scale(1.1); transition:all 0.5s;} .carList2 .list a .img {margin:40px 0; text-align:center;} .carList2 .list a .img img {width:100%:} .carList2 .list a .text h4 {margin:20px 0 10px 0; font-size:24px; font-weight:bold;} .carList2 .list a .text h4 .mc {padding-left:15px; font-size:14px; font-weight:400; } .carList2 .list a .text p {font-size:15px; color:#686868; font-weight:400; } .carList2 .list a .text .price {margin-top:20px; font-size:25px; font-weight:bold; letter-spacing:-1px; color: #050089;} .carList2 .list a .price { font-size:14px; line-height:1.4; color:#4d4d4d; font-weight:500;} .carList2 .list a .price ul { width:100%; } .carList2 .list a .price ul li { wdith:100% !important; display:flex; align-items:center; justify-content:space-between; } .carList2 .list a .price ul li .subject img {margin-left:7px; width:80px;} .carList2 .list a .price ul li .won {color:#000; font-size:20px; font-weight:bold;} .carList2 .list a .priceWrap {margin-top:10px;} .carList2 .list a .priceWrap .price { font-size:20px; font-weight:bold; display:flex; align-items:center; justify-content:space-between; } .carList2 .list a .priceWrap .price .won { color: #000; } /*carList - 3*/ .swiper-button-lock {display:flex !important;} .swbtn .swiper-button-next {right: -13px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background: rgba(28,29,31,0.8); color: #fff;} .swbtn .swiper-button-next:after {padding: 2px 0 0 2px; font-size: 15px; font-weight: 800; text-align: center; line-height: 60px;} .swbtn .swiper-button-prev {left: -13px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background: rgba(28,29,31,0.8); color: #fff;} .swbtn .swiper-button-prev:after {padding: 2px 2px 0 0 ; font-size: 15px; font-weight: 800; text-align: center; line-height: 60px;} .ppinfo {position:absolute; bottom:12px; right:0; font-size:14px; color:#686868;} .ppinfo .bold {color:#0A0B0B;} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { pointer-events: all !important; } .markWrap{display: flex; align-items: center; gap: 4px; width: 100%;} .markWrap span{display: block; width: 72px; padding: 8px 10px; border-radius: 50px; text-align: center; color: #fff; font-size: 12px; line-height: 12px; white-space: nowrap;} .markWrap span.saleMark{background: #1e1e1e;} .markWrap span.fastMark{background: #D10005; color:#fff;} .markWrap span.popularMark{background: #595f67;} #mExclusive {margin:120px 0; } #mExclusive .container {position:relative;} #mExclusive .tit {margin-bottom: 45px; text-align: center;} #mExclusive .tit h3 {font-size: 28px; letter-spacing: -0.5px;} #mExclusive .tit h2 {display: inline-block; position: relative; margin-top: 10px; font-size: 40px; font-weight: 800;} #mExclusive .tit h2 .img {position: absolute; top: 0; right: -53px; max-width: 60px;} #mExclusive .swiper {margin: 0 -32px; padding: 0 32px 65px 32px;} #mExclusive .swiper-slide a {display: flex; gap: 35px; align-items: center;} .carList3 .carImg {display: flex; align-items: center; padding: 0 15px; width: 55%; height: 380px; background: #F9F9F9; border-radius: 20px;} .carList3 .carImg img {width: fit-content; height: 160px; margin: 0 auto;} .carList3 .carImg:hover {background: #f1f1f1; transition: all 0.5s;} .carList3 .carImg:hover img {transform: scale(0.9); transition: all 0.5s;} .carList3 .carInfo .emph {display: flex; align-items: center; gap: 4px;} .carList3 .carInfo .emph span {display: block; width: 47px; height: 47px; line-height:47px; border-radius: 100%; color: #fff; font-size: 21px; font-weight: 500; text-align: center;} .carList3 .carInfo .emph span:nth-child(odd){background: #00abce;} .carList3 .carInfo .emph span:nth-child(even){background: #050089;} .carList3 .carInfo {width: 45%;} .carList3 .carInfo h3 {width: 100%; margin: 25px 0 6px 0; font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList3 .carInfo p {width: 100%; color: #686868; font-size: 16px; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList3 .carInfo .price {display: flex; align-items: center; gap: 12px; margin-top: 14px;} .carList3 .carInfo .price h5 {font-size: 26px; font-weight: 700; letter-spacing: -1px;} .carList3 .carInfo .price .cancel {color: #bbb; font-size: 15px; text-decoration: line-through;} #mExclusive .swiper-pagination-bullets {line-height: 0;} #mExclusive .swiper-pagination-bullet {width: 12px; height: 12px; margin: 0 6px; border-radius: 2px; background: #c7d3e2; opacity: 1;} #mExclusive .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #00abce;} /* .carList3 .list {} .carList3 .list .ico-pm {position:absolute; top:18px; left:15px; } .carList3 .list {display:flex; flex-direction:column; align-items:center; padding:25px; background:#f7f7f7; border-radius:10px; } .carList3 .list .img {padding-top:30px; width:235px; height:160px;} .carList3 .list .img img {width:100%;} .carList3 .list:hover .img img {transform: scale(1.1); transition:all 0.3s;} .carList3 .list .text {width:100%; padding:5px 0 20px 0; text-align:center;} .carList3 .list h3 {font-size:24px; font-weight:bold; letter-spacing:-0.5px;} .carList3 .list p { margin:7px 0 13px 0 ; font-size:15px; letter-spacing:-0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:600; color:#434343; } .carList3 .list .price {margin-top:5px; font-size:24px; font-weight:bold; color: #00abce;} .carList3 .list button ,.carList3 .list a {width:100%; text-align:center; padding:13px; background:#00abce; color:#fff; font-size:16px; font-weight:bold; border-radius:5px;} .carList3 .list .text .option {margin:20px 0; text-align:left; font-size:14px; line-height:20px;} .carList3 .list .text .option li {margin-bottom:5px; display:flex; gap:10px;} .carList3 .list .text .option li .name {width:45px; font-weight:bold;} .carList3 .list .text .option li .txt {width:100%;} .carList3 .list .text .option li.option-detail .txt {height:42px; overflow-y: scroll; } */ /*carList - 5*/ .carList5 .list a {display:flex; flex-direction:column; align-items:center; padding:25px 0 50px 0;} .carList5 .list a .img {display:flex; justify-content:center; align-items:center; width:100%; height:110px; padding:15px; margin-top:30px;} .carList5 .list a .img img {} .carList5 .list a:hover .img img {transform: scale(1.1); transition:all 0.3s;} .carList5 .list a h3 {margin:20px 0 7px 0; font-size:17px; font-weight:bold; letter-spacing:-0.5px;} .carList5 .list a p {font-size:16px; color:#4d4d4d; font-weight:500;} .carList5 .pswiper {position:relative;} .carList5 .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%;} .carList5 .arrow .swiper-button-next {right:-15px; color:transparent;} .carList5 .arrow .swiper-button-prev {left:-15px; height:19px; color:transparent;} .carList5 .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } .carList5 .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} /* fbn */ #fbn {margin: 120px 0;} #fbn .container {display: flex; justify-content: space-between; align-items: stretch; gap: 45px;} #fbn .container > div{width: 100%;} #fbn .box {border-radius:40px; box-shadow: 0 5px 22px rgba(0, 0, 0, 0.1);} #fbn .box.quickConsult{position:relative; max-height: 600px; padding: 75px 85px; background: #fff; } .quickConsult .tit{display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px;} .quickConsult .tit.new{display:inherit; margin:20px 0 26px 0;} .quickConsult .tit h2{font-size: 36px; font-weight: 800; line-height: 1.3; position:relative; z-index:9;} .quickConsult .tit h2 span.ft-pen {padding:0 !important; font-weight:400 !important; font-size:55px; margin:-10px 0 0 2px;} .quickConsult .tit p {margin-top:20px !important;font-size:18px !important; color:#9a9a9a;} .quickConsult .tit .img {width:68px;} .quickConsult .tit .imgKcm {position:absolute; width:358px; top:0; right:18px; z-index:8;} .quickConsult form ul li{display: flex; justify-content: space-between; align-items: center; margin-top: 15px;} .quickConsult form label{width: 100%; max-width: 80px; font-size: 18px; font-weight: 600;} .quickConsult form input{width: 100%; padding: 20px 30px; border-radius: 10px; background: #f2f2f2; font-size: 18px;} .quickConsult form input::placeholder{color: #bbb; font-size: 18px;} .quickConsult form button{width: 100%; margin-top: 20px; padding: 30px; border-radius: 12px; background: #050089; color: #fff; font-size: 20px; font-weight: 600;} .quickConsult form button:hover {background:#1247e7;} .quickConsult form .gnaAgree {margin-top:20px; } .quickConsult form .gnaAgree label {width:auto; max-width:fit-content; font-size:14px; font-weight:400; letter-spacing:-1px; color:#4d4d4d;} #fbn .box{padding: 51px 40px;} #fbn .box.consulting{margin-bottom: 40px; background: url('/_img/fbn_counsel.png') no-repeat 93% 80% #d8dde3; background-size:90px;} #fbn .box.kakao{background: url('/_img/fbn_kakao.png') no-repeat 93% 80% #ecf2ff; background-size:60px;} #fbn .box.call{color: #fff; background: url('/_img/fbn_call.png') no-repeat 88% 80% #3b76ff; background-size:60px;} #fbn .box span{display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600;} #fbn .box.consulting span{background: #3b76ff; color: #fff;} #fbn .box.kakao span{background: #fff; color: #bebebe;} #fbn .box.call span{background: #3262d8; color: #fff;} #fbn .box h3{margin-top: 10px; font-size: 24px; font-weight: 700; line-height: 1.4;} #fbn .box p{margin-top: 40px; font-size: 16px; font-weight: 600;} #fbn .box.consulting p{color: #999;} #fbn .inquiry{display: flex; justify-content: space-between; align-items: center; gap: 40px;} #fbn .inquiry a{width: 100%;} /*mSuper*/ #mSuper {margin-bottom:100px; padding:100px 0 120px 0; background:#EAF5FB;} #mSuper .container {position:relative; } #mSuper .titRound {display:flex; align-items:center; gap:5px; justify-content:center; font-size:24px; font-weight:500; color:#000;} #mSuper .titRound ul {display:flex; align-items:center; gap:2px; } #mSuper .titRound ul li {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:100%; background:#050089; color:#fff; font-size:21px; font-weight:700;} #mSuper .titImg {margin:33px auto 37px auto; width:531px;} #mSuper .titTxt {font-size:22px; font-weight:500; letter-spacing:-0.5px; color:#000; text-align:center;} #mSuper .caution {margin-top:25px; text-align:right; font-size:18px; font-weight:500; } .superSwiper {margin:50px 0;} .superSwiper .list a {position:relative; padding:35px 30px; background:#FAFAFC; border-radius:20px; letter-spacing:-0.5px;} .superSwiper .list .superMark {position:absolute; top:15px; right:17px; width:88px;} .superSwiper .list h3 {font-size:26px; font-weight:700;} .superSwiper .list p {margin-top:12px; font-size:20px; font-weight:500;} .superSwiper .list .carImg {margin:22px auto 12px auto; width:320px;} .superSwiper .list .carInfo {display:flex; align-items:flex-end; justify-content:space-between;} .superSwiper .list .carInfo .price .cancel {margin-bottom:10px; font-size:20px; font-weight:400; text-decoration:line-through;} .superSwiper .list .carInfo .price h5 {font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#3651E0;} .superSwiper .list .carInfo .btn {padding:17px 28px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:20px; font-weight:600; background:#3651E0; color:#fff; border-radius:30px;} .superSwiper .list .carInfo .btn span {font-size:20px;} .superSwiper .list a:hover .carImg img { transform:scale(1.15); transition:all 0.5s;} #mSuper .superbtn {position:relative; bottom:0; left:50%; transform:translate(-50%,0); display:flex; align-items:center; justify-content:center; width:1400px;} #mSuper .superbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mSuper .superbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mSuper .superbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500;} #mSuper .superbtn .center .txt {white-space:nowrap; } #mSuper .superbtn .center .pagination {width:auto; color:#C8C8C8;} #mSuper .superbtn .center .pagination .swiper-pagination-current {color:#000; font-weight:700;} #mSuper .superbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} /*mNow*/ #mNow { padding-bottom:75px; margin-bottom:75px; position: relative; background:url('../_img/now_bg.png') repeat-x center top #1a1a1a; background-size:cover;} #mNow .container { position:relative; } #mNow .mNowVideoBg {position:absolute; width:100%; height:668px; overflow:hidden; z-index:1;} #mNow .mNowVideoBg video { min-height: 668px; min-width: 100%; opacity: 0.4; mix-blend-mode:luminosity; filter:blur(2px);} #mNow .mNowBg { position:relative; width: 100%; padding:370px 0 0 0; background:transparent; z-index:9; } /*#mNow .tit {display:flex; align-items:end; justify-content:space-between;}*/ #mNow .tit {position:relative; z-index:9;} #mNow .tit .img {position:absolute; top:-332px; left:0; width:815px; } #mNow .tit .mark {margin:0 0 0 auto; width:120px;} #mNow .titRound {margin:10px 0 18px 0; display:flex; align-items:center; gap:5px; justify-content:center; font-size:18px; font-weight:500; color:#000;} #mNow .titRound ul {display:flex; align-items:center; gap:2px; } #mNow .titRound ul li {display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:100%; background:#050089; color:#fff; font-size:15px; font-weight:700;} .nowSwiper {} .nowSwiper .list {position:relative; padding:20px 32px; background:#FAFAFC; border-radius:20px; letter-spacing:-0.5px;} .nowSwiper .list .top h3 {margin:4px 0 8px 0; font-size:26px; font-weight:700; width:75%; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;} .nowSwiper .list .top h5 {font-size:18px; font-weight:500;} .nowSwiper .list .top p {font-size:18px; font-weight:500;} .nowSwiper .list .part {position:absolute; top:16px; right:28px;} .nowSwiper .list .part span {display:inline-flex; align-items:center; justify-content:center; padding:11px 0; width:100px; border-radius:30px; font-size:18px; font-weight:500; color:#fff;} .nowSwiper .list .part span.rent {background:#E6E6E6; color:#D10005;} .nowSwiper .list .part span.lease {background:#544a38;} .nowSwiper .list .mid {display:flex; align-items:center; justify-content:space-between;} .nowSwiper .list .mid .carthumbs {position:relative; right:-35px; width:300px;} .nowSwiper .list .mid .plus {display:inline-flex; align-items:center; gap: 6px; padding:9px 11px 9px 9px; font-size:16px; color:#fff; line-height:16px; font-weight:500; background:#D10005; border-radius:7px; cursor:pointer;} .nowSwiper .list .mid .plus .ico {display:flex; align-items:center; justify-content:center; width:20px; height:20px; background:rgba(255 255 2555 / 20%) ; border-radius:100%;} .nowSwiper .list .mid .plus .ico span {font-size:14px; font-weight:800;} .nowSwiper .list .mid .plus:hover .ico {transform:rotate(180deg); transition:all 0.5s;} .nowSwiper .list .carInfo {display:flex; align-items:flex-end; justify-content:space-between;} .nowSwiper .list .carInfo .price .cancel {display:block; margin-bottom:6px; font-size:20px; font-weight:400; text-decoration:line-through;} .nowSwiper .list .carInfo .price h5 {font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#0A0B0B;} .nowSwiper .list .carInfo .btn a {padding:12px 35px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:20px; font-weight:600; background:#0A0B0B; color:#fff; border-radius:30px;} .nowSwiper .list .carInfo .btn span {font-size:20px;} .nowSwiper .list:hover .carImg img { transform:scale(1.15); transition:all 0.5s;} /* #mNow .nowbtn {position:relative; margin:15px auto 25px auto; display:flex; align-items:center; justify-content:center; width:1400px;} #mNow .nowbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500;} #mNow .nowbtn .center .txt {white-space:nowrap; } #mNow .nowbtn .center .pagination {width:auto; color:#C8C8C8;} #mNow .nowbtn .center .pagination .swiper-pagination-current {color:#000; font-weight:700;} #mNow .nowbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} #mNow .caution p {font-size:18px; font-weight:500; letter-spacing:-0.5px;} #mNow .caution h3 {margin-top:45px; font-size:24px; font-weight:700; letter-spacing:-1px;} #mNow .bbinfo {position:absolute; top:28px; right:0; text-align:right; font-size:14px; font-weight:400; color:#686868;} #nowPop {position:fixed; top:0; left:50%; transform:translate(-50%,0); width:100%; height:100vh; z-index:999;} #nowPop .cover {position:fixed; width:100%; height:100vh; background:rgba(0 0 0 / 50%);} #nowPop .popCon {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:780px; height:635px; background:#fff; border-radius:12px; box-shadow:3px 5px 5px rgba(0 0 0 / 20%); overflow:hidden;} #nowPop .popCon .tit {padding:17px 0; text-align:center; background:#DDE4F3; font-size:20px; font-weight:600; letter-spacing:-0.5px;} #nowPop .popCon .close {position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; cursor:pointer;} #nowPop .popWrap {padding:12px;} #nowPop .popContent {width:100%; height:485px; overflow-y:scroll; padding:10px 20px 20px 20px; font-size:24px; line-height:1.8;} #nowPop .popContent::-webkit-scrollbar {width:3px;} #nowPop .popContent::-webkit-scrollbar-thumb {background:#6A6A6A;} #nowPop .popContent .top h2 {font-size:26px; font-weight:700; letter-spacing:-1px;} #nowPop .popContent .top h4 {margin:4px 0 8px 0; font-size:20px; font-weight:700;} #nowPop .popContent .top p {font-size:18px; font-weight:400; } #nowPop .popBottom {position:fixed; bottom:0; left:50%; transform:translate(-50%,0); padding:24px; width:100%; background:#fff; border-top:2px solid #E4E7EE; z-index:9;} #nowPop .popBottom ul {display:flex; align-items:center; justify-content:space-between;} #nowPop .popBottom li {font-size:20px; line-height:20px; font-weight:500; letter-spacing:-0.5px; color:#232323;} #nowPop .popBottom li .won {font-size:22px; font-weight:700;} */ .gallWrap { position:relative; display: flex; align-items: center; justify-content: center; padding-bottom: 50px; } .gallWrap input[type="radio"] { display:none; } .gallWrap input:checked + span { color: #000; font-weight: 700; } .gallWrap label { cursor:pointer; } .gallWrap .gallLeft { position:absolute; z-index:100; top:50%; left:5%; transform: translate(0,-50%); display: flex; flex-direction: column; background-color:rgba(230,230,230,0.8); border-radius:18px; padding:15px 0; } .gallWrap .gallLeft label { font-size:16px; color:#8c8c8c; font-weight:500; padding:0 17px; line-height:1.8; } .gallWrap .gallBtm { gap: 10px; position:absolute; z-index:100; bottom:0; display: flex; width: 100%; align-items: center; justify-content: center; } .gallWrap .gallBtm label { font-size:20px; font-weight:400; color:#8c8c8c; cursor:pointer;} .gallWrap .gallBtm .symbol { display: flex; background-color:black; padding:10px; border-radius:50%; } .gallWrap .gallBtm img { width:20px; height:20px; } .gallWrap .gallLayer { width:100%; max-width:600px; min-height: 200px; } #nowPop .gallWrap .intimg {margin-top:20px; height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden;} #mNow .nowbtn {position:relative; margin:25px auto; display:flex; align-items:center; justify-content:center; width:1400px;} #mNow .nowbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500; color:#fff;} #mNow .nowbtn .center .txt {white-space:nowrap; } #mNow .nowbtn .center .pagination {width:auto; color:#C8C8C8;} #mNow .nowbtn .center .pagination .swiper-pagination-current {color:#fff; font-weight:700;} #mNow .nowbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} #mNow .caution {color:#fff;} #mNow .caution p {margin-top:10px; font-size:18px; font-weight:500; letter-spacing:-0.5px; opacity:0.6;} #mNow .caution h3 {margin-top:45px; font-size:24px; font-weight:700; letter-spacing:-1px;} #mNow .caution h3 .bold {font-weight:900;} #mNow .bbinfo {position:absolute; top:109px; right:0; text-align:right; font-size:14px; font-weight:400; color:#9a9a9a;} #mNow .bbinfo .bold {color:#fff;} #nowPop { width:100%; height:100%; } #nowPop .popCon { width:100%; height:100%; display: grid; grid-template-rows: 60px auto 80px; } #nowPop .popCon .tit {padding:17px 0; text-align:center; background:#D9D9D9; font-size:20px; font-weight:600; letter-spacing:-0.5px;} #nowPop .popCon .close {position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; cursor:pointer;} #nowPop .popWrap { width:100%; height:100%; overflow:hidden; padding:12px;} #nowPop .popContent { width:100%; height:100%; overflow-y:scroll; padding:10px 20px 20px 20px; font-size:24px; line-height:1.8;} #nowPop .popContent::-webkit-scrollbar {width:3px;} #nowPop .popContent::-webkit-scrollbar-thumb {background:#6A6A6A;} #nowPop .popContent .top h2 {font-size:26px; font-weight:700; letter-spacing:-1px;} #nowPop .popContent .top h4 {margin:4px 0 8px 0; font-size:20px; font-weight:700;} #nowPop .popContent .top p {font-size:18px; font-weight:400; } #nowPop .popBottom { padding:24px; width:100%; background:#fff; border-top:2px solid #E4E7EE; z-index:9;} #nowPop .popBottom ul {display:flex; align-items:center; justify-content:space-between;} #nowPop .popBottom li {font-size:20px; line-height:20px; font-weight:500; letter-spacing:-0.5px; color:#232323;} #nowPop .popBottom li .won {font-size:22px; font-weight:700;} .nowTabs {position:relative; margin-top:15px; padding:0 0 50px 0; } .nowTabs .nowTabList {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); display:flex; align-items:center; justify-content:center; gap:12px; z-index:9;} .nowTabs .nowTabList a {display:flex; align-items:center; gap:12px; font-size:20px; font-weight:400; color:#A2A2A2;} .nowTabs .nowTabList .active a {font-weight:700; color:#000;} .nowTabs .nowTabList a .txtEx {width:71px;} .nowTabs .nowTabList a .txtInt {width:65px; text-align:right;} .nowTabs .nowTabList .ico {display:none; } .nowTabs .nowTabList .active .ico {display:flex; align-items:center; justify-content:center; border-radius:100%; background:#000; width:39px; height:38.5px; } .nowTabs .nowTabList .active .ico img {width:21px;} .nowTabs .tabimg {position:relative; } .nowTabs .tabimg .img {margin:0 auto; display:flex; align-items:center; justify-content:center; width:450px; height:225px; overflow:hidden;} .nowTabs .nowExtView {position:absolute; top:50%; left:60px; transform:translate(0,-50%); padding:15px 0; background:rgba(0,0,0,5%); border-radius:18px; z-index:9;} .nowTabs .nowExtView input {display:none; appearance:none; display:none;} .nowTabs .nowExtView input + label {display:block; padding:0 17px; cursor:pointer; font-size:16px; font-weight:500; color:#8c8c8c;} .nowTabs .nowExtView input:checked + label {color:#000; font-weight:bold;} .nowOption h3 {padding:10px 0; display:flex; align-items:center; justify-content:space-between; font-size:22px; font-weight:700; border-bottom:1px solid #E1E1E1;} .nowOption .list {margin-top:15px;} .nowOption .list li {margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:500;} .nowOption .list li:last-child {margin-bottom:0;} .nowOption .list li .subject {display:flex; align-items:center; gap:12px;} .nowOption .list li .colorbox {display:block; width:17px; height:17px; border-radius:1px; border:1px solid #707070; background-size:cover; } /*midBn*/ #midBn {margin:0 0 150px 0; } #midBn .container {display:flex; } #midBn .fyoutube {width:700px; padding:0 130px 0 0; } #midBn .infoBn {padding-top:100px;} #midBn .infoBn ul {display:flex; align-items:center; gap:50px; width:700px;} #midBn .infoBn ul li {width:50%; border-radius:20px; overflow:hidden; box-shadow:3px 5px 7px rgb(0 0 0 / 20%);} #midBn .infoBn ul li a {display:block; padding:55px 40px 60px 40px;} #midBn .infoBn ul li span {display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600;} #midBn .infoBn ul li h3 {margin:20px 0 40px 0; font-size: 25px; font-weight: 700; line-height: 1.5;} #midBn .infoBn ul li p {font-size: 16px; font-weight: 600;} #midBn .infoBn ul li.kakao {background: url('/_img/fbn_kakao.png') no-repeat 93% 80% #ecf2ff; background-size:60px;} #midBn .infoBn ul li.kakao span{background: #fff; color: #bebebe;} #midBn .infoBn ul li.call {background: url('/_img/fbn_call.png') no-repeat 88% 80% #3b76ff; background-size:60px;} #midBn .infoBn ul li.call a {color:#fff;} #midBn .infoBn ul li.call span{background: #3262d8; color: #fff;} #fbnNew {margin:100px auto;} #fbnNew .container {display:flex; gap:60px; align-items:flex-start;} #fbnNew .fbnBox {padding-top:93px; width:50%;} #fbnNew .fqna {width:50%;} #fbnNew .fbnBox.consulting a {display:block; padding:55px 40px 60px 40px; border-radius:20px; overflow:hidden; box-shadow:3px 5px 7px rgb(0 0 0 / 20%); background: url('/_img/fbn_counsel.png') no-repeat 93% 80% #d8dde3; background-size:90px;} #fbnNew .fbnBox a span {display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600; background: #3b76ff; color: #fff;} #fbnNew .fbnBox a h3 {margin:20px 0 40px 0; font-size: 25px; font-weight: 700; line-height: 1.5;} #fbnNew .fbnBox a p {font-size: 16px; font-weight: 600;} #copConsult {margin:160px auto;} #copConsult .container {position:relative; } #copConsult .logo {position:relative; top:5px; width:284px;} #copConsult .txt {position:relative; margin-bottom:50px; display:flex; gap:100px; align-items:flex-start; color:#0A0B0B; letter-spacing:-0.5px;} #copConsult .txt h3 {font-size:40px; letter-spacing:-1.5px; font-weight:800; line-height:1.3;} #copConsult .txt p {font-size:17px; line-height:1.6; font-weight:500; color:#2A2A2A; } #copConsult .txt .img {position:absolute; bottom:-51px; right:75px; width:235px; z-index:1;} #copConsult .mdForm {position:relative; z-index:9;} #copConsult .mdForm ul li.formBtn {width:320px;} #copConsult .mdForm ul li.formBtn button {letter-spacing:-0.5px;} #copConsult .mdForm ul li:nth-child(3) input {padding:60px 360px 30px 27px;} /* news */ #news {margin: 120px 0 0 0; background:url('/_img/mnews_bg.png') no-repeat center / cover; } #news a {position: relative; padding: 60px 0; } #news a .txt{display: flex; justify-content: flex-start; align-items: center; gap: 20px; width: 100%; color: #fff;} #news a .txt h2{font-size: 36px; font-weight: 400;} #news a .txt h2 span{position:relative; top:0; color: #D10005; font-weight:700;} #news a:hover .txt h2 span{top:-3px; transition:all 0.3s;} #news a .txt p{position:absolute; bottom:20px; right:25px; font-size: 17px; letter-spacing:-0.5px;} #news a .img{position: absolute; top: -80px; right: 60px; width:215px; display:none;} /* mTV */ #mTv {margin:120px auto;} #mTv .tit {margin-bottom:50px; display:flex; align-items:center; justify-content:space-between;} #mTv .titWrap {display:flex; align-items:center; gap:30px;} #mTv .logoCon {display:flex; align-items:center; gap:16px;} #mTv .logoCon .logo {width:48px;} #mTv .logoCon h2 {font-size:22px; font-weight:700;} #mTv .controllCon {display:flex; align-items:center; gap:16px;} #mTv .youtubeSwiper .list {border-radius:16px; overflow:hidden;} #mTv .youtubeSwiper-pagination{width: 100%; line-height:0;} #mTv .swiper-pagination-bullets{margin-left:10px;} #mTv .swiper-pagination-bullet{width: 7px; height: 7px; margin: 0 3px; border-radius: 100%; background:#DEE0E2; opacity: 1;} #mTv .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #D10005;} /* review */ #review{margin: 40px 0 180px 0;} #review .tit {} #review .tit h2{margin-bottom:40px; font-size: 40px; font-weight:700;} #review .tit .flex.titLine {margin:0 0 80px; justify-content:space-between; border-bottom:1px solid #B9BBBD; padding:0 0 17px 0;} #review .tit .flex { gap: 5px; } #review .tit .playnpause {margin-left:15px;} #review .reviewSwiper {padding:0 20px; margin:0 -20px;} #review .reviewSwiper-paginationWrap{margin-left:-13px; display: flex; justify-content: flex-start; align-items: center; gap: 5px;} #review .reviewSwiper-pagination{width: 100%; line-height:0;} #review .swiper-pagination-bullets{margin-left:10px;} #review .swiper-pagination-bullet{width: 7px; height: 7px; margin: 0 3px; border-radius: 100%; background:#DEE0E2; opacity: 1;} #review .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #D10005;} #review .reviewSwiper-playnpause{margin-top: -10px;} .custom.swiper-playnpause{display: flex; justify-content: flex-start; align-items: center; gap: 5px; width: 100%;} .custom.swiper-playnpause .icon{width: 18px; max-width: 18px; cursor: pointer; filter: grayscale(0.5) brightness(3);} .custom.swiper-playnpause .icon.on{filter: grayscale(0) brightness(1);} .playnpause {gap:5px;} .playnpause a {width: 17px; margin-right: 3px; filter:grayscale(1) brightness(5);} .playnpause a.on {filter:none; } .playnpause a:hover {opacity: 1; transition: all 0.5s;} #review .tit .btn {display:flex; align-items:center; gap:10px;} #review .tit .btn a {display:inline-flex; align-items:center; gap:20px; padding:8px 10px 8px 24px; border-radius:30px; border:1px solid #d8d8d8; font-size:14px; font-weight:700; color:#4D4D4D;} #review .tit .btn a:hover {color:#fff;} #review .tit .btn a.bg {background:#050089; color:#fff;} #review .reviewNone {padding:220px 0; text-align:center; font-size:30px; font-weight:bold; color:#1A1A1A; letter-spacing:-0.5px;} .btn .switch {position: relative; display: inline-block; width:75px; height: 34px;} .btn .switch input { opacity: 0; width: 0; height: 0;} .btn .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #B8B8B8; -webkit-transition: .4s; transition: .4s;} .btn .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;} .btn input + .slider .txt:before {content: "OFF"; position:absolute; top:51%; left:29px; transform:translate(0,-50%); width:40px; color:#fff; text-align:center; font-size:15px; font-weight:600; } .btn input:checked + .slider .txt:before {content: "ON"; left:6px} .btn input:checked + .slider { background-color: #050089;} .btn input:focus + .slider { box-shadow: 0 0 1px #050089;} .btn input:checked + .slider:before { -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px);} .btn .slider.round { border-radius: 34px;} .btn .slider.round:before { border-radius: 50%;} .reviewSwiper .swiper-slide a{position: relative; width: 100%; border-radius: 20px; border: 1px solid #dbdbdb; overflow: hidden;} .reviewSwiper .swiper-slide a:hover {box-shadow: 0 2px 20px rgba(0 0 0 / 15%); transition: all 0.5s;} .bMark{position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 30px; border-radius: 5px; background: #D10005; color: #fff; font-size: 14px; font-weight: 600; text-align: center;} .reviewSwiper .txt{padding: 30px;} .reviewSwiper .txt span{display: inline-block; padding: 8px 12px; border-radius: 5px; border: 1px solid #D2D6D9; background: #f9f9f9; color: #666; font-size: 14px;} .reviewSwiper .txt h3{margin-top: 15px; font-size: 18px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:43px;} .reviewSwiper .txt p{color: #888; width: 100%; margin-top: 20px; font-size: 16px; line-height: 1.4; height:45px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;} .reviewSwiper .thumbImg{display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; height: 220px; object-fit: cover;} .reviewSwiper .thumbImg img{width: 100%; height: 100%; object-fit: cover;} #fgna.flex {align-items:stretch; gap:120px;} .fyoutube .playnpause.flex {margin-left:10px; gap:5px !important;} .fyoutube {width:550px;} .fyoutube .tit {margin-bottom:35px; display: flex; justify-content:space-between;; align-items: center; gap: 10px;} .fyoutube .tit .flex {gap:12px;} .fyoutube .tit .img{max-width: 55px;} .fyoutube .tit h2{font-size: 30px; font-weight: 800;} .fyoutube .playnpause a {width:20px; margin-right:3px; opacity:0.5;} .fyoutube .playnpause a.on { opacity:1;} .fyoutube .playnpause a:hover {opacity:1; transition:all 0.5s;} .fyoutube .youtubeSwiper .swiper-slide {width:500px; /*height:308px;*/ border-radius:20px; overflow:hidden; box-shadow:0 3px 10px rgba(0 0 0 / 30%);} .fyoutube .youtubeSwiper .swiper-slide a {position:relative; } .fyoutube .youtubeSwiper .swiper-slide a:after {content:'▶'; width:100%; height:100%; position:absolute; top:0; z-index:9; display:flex; justify-content:center; align-items:center; font-size:40px; color:#fff; filter:drop-shadow(2px 4px 6px black);} .fqna {width:100%;} .fqna .tit {margin-bottom:35px; display: flex; justify-content:space-between;; align-items: center; gap: 10px;} .fqna .tit .flex {gap:12px;} .fqna .tit h2{font-size: 30px; font-weight: 800;} .fqna ul {border-top:2px solid #313131; display:grid; grid-template-columns: repeat(2, 1fr); gap:20px 50px;} .fqna ul li a {display:block; padding:30px 25px; border-bottom:1px solid #E1E1E1; letter-spacing:-0.5px;} .fqna ul li a h4 {display:flex; align-items:center; gap:10px; font-size:20px; color:#686868; font-weight:500;} .fqna ul li a:hover h4 {color:#4b4b4b; transition:all 0.5s;} .fqna ul li a h4 .ico.new{display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding-top:2px; font-size:13px; background:#050089; color:#fff; border-radius:5px;} .fqna ul li a p {margin-top:10px; font-size:18px; line-height:1.5; color:#0A0B0B; height:54px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} #fbnInfo ul {display:flex; align-items:stretch; gap:25px; } #fbnInfo ul li {width:25%; box-shadow:3px 5px 7px rgb(0 0 0 / 20%); border-radius:20px; overflow:hidden;} #fbnInfo ul li:first-child {width:50%;} #fbnInfo ul li a { position:relative; display:block; padding:42px 40px; height:100%; color:#0A0B0B;} #fbnInfo ul li a .ico {margin:0 auto 25px auto; width:85px;} #fbnInfo ul li h3 {font-size: 22px; font-weight:500;} #fbnInfo ul li h2 {margin:15px auto 0 auto; font-size:32px; letter-spacing:-1px; font-weight:700;} #fbnInfo ul li p {position:absolute; bottom:42px; left:40px; font-size: 22px; color:#565758; font-weight: 500;} #fbnInfo ul li p.flex {align-items:center; gap:5px;} #fbnInfo ul li p.flex .arrow {font-size:16px;} #fbnInfo ul li.consulting {} #fbnInfo ul li.consulting a {padding:0;} #fbnInfo ul li.kakao {background:#F9F9F9;} #fbnInfo ul li.call {background:#10121d;} #fbnInfo ul li.call a {color:#fff;} #fbnInfo ul li.call p { font-size:36px; color:#fff; font-weight:700; letter-spacing:-2px;} #fEvent .container {margin-top:15px; display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center; gap:15px;} #fEvent .container a { flex: 1 1 40%; border-radius:10px; overflow:hidden;} #fEvent .container a:hover img {transform: scale(1.1); transition:all 1s; } /*footer*/ #footer {margin-top:110px; padding:0 0 30px 0;} #footer .term {margin-bottom:30px; background:#4d4d4d;} #footer .term .container {display:flex; gap:35px; justify-content:start; } #footer .term .container a {padding:25px 0; display:block; font-size:16px; color:#fff;} #footer .term .container a:hover {opacity:0.8;} #footer .foot {font-size:16px; line-height:2.0; color:#4d4d4d; text-align:left;} #footer .foot .copyright {margin-top:25px; font-size:14px; color:#b3b3b3;} /*quick 2025*/ #quick {position:fixed; top:274px; right:10px; width:205px; z-index:998; } #quick .tit h2 {font-size:20px; font-weight:700; color:#D10005 !important;} #quick .tit p {margin:7px auto 22px auto; font-size:14px; line-height:1.5; letter-spacing:-0.5px; color:#858585; font-weight:400;} #quick h5 {margin-top:12px; font-size:12px; color:#737578; text-align:center; font-weight:500; letter-spacing:-0.5px;} #quick .qkcm {margin:17px auto 0 auto; position:relative; z-index:1; left:12px; width:170px; transform:rotate(-4deg);} #quick .consultPartnerForm {position:relative; top:-5px; margin-bottom:-5px; z-index:2;} #quick .qform {position:relative; padding:22px 15px 17px 15px; margin-bottom:17px; background:#fff; border-radius:20px; box-shadow:2px 2px 5px rgba(0 0 0 / 25%); } #quick .qform .qimg {max-width:187px; margin:20px auto; } #quick .qform li {margin-bottom:5px; display:flex; align-items:center; gap:10px;} #quick .qform li label {font-size:14px; color:#3a3a3a; width:36px; font-weight:600;} #quick .qform li:nth-child(1) label, #quick .qform li:nth-child(3) label {letter-spacing:11px;} #quick .qform li span.flex {gap:3px;} #quick .qform li input {width:100%; padding:8px 10px; border:1px solid #d2d2d2; border-radius:5px; font-size:12px; line-height:18px;} #quick .qform li input:placeholder {letter-spacing:-0.5px;} #quick .qform li select {width:46px; padding:6px 0 6px 2px; border:1px solid #d2d2d2; border-radius:5px; font-size:14px; appearance:auto; color:#7a7a7a; font-size:12px;} #quick .qform .gnaAgree {margin:20px 0 10px 0; font-size:13px;} #quick .qform .gnaAgree a {margin:-1px 0 0 6px; padding:4px; background:#D9D9D9; color:#333333; font-size:11px; line-height:11px; border-radius:3px;} #quick .qform button {padding:14px 0; width:100%; background:#D10005; color:#fff; font-size:14px; font-weight:600; text-align:center; border-radius:6px; letter-spacing:-0.5px;} #quick .qbtn a {margin-bottom:10px; width:60px; height:60px; display:inline-flex; align-items:center; justify-content:center; border-radius:100%; box-shadow:2px 2px 5px rgba(0 0 0 / 25%); } #quick .qbtn .qcounsel a {background:#000;} #quick .qbtn .qcounsel a img {width:37px;} #quick .qbtn li {display:flex; align-items:flex-start; gap:6px;} #quick .qbtn .callBox {width:135px; padding:11px 0 9px 0; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#3e3e3e; border-radius:4px; color:#fff; font-size:13px; text-align:center;} #quick .qbtn .callBox .big {margin-top:4px; font-size:16px; font-weight:700; letter-spacing:-1px;} #quick .qbtn .qtop a {font-size:18px; line-height:60px; font-weight:800; color:#fff; background:#808080;} #quick .qform .gnaAgree li {margin-bottom:3px; justify-content:space-between;} #quick .qform .gnaAgree li.all {margin-bottom:5px; padding:0 0 7px 0px; border-bottom:1px solid #eee;} #quick .qform .gnaAgree li.all label {font-size:14px; font-weight:600; gap:5px; width:100%;} #quick .qform .gnaAgree li.all label .fc-gray {font-size:11px; font-weight:400; opacity:0.7;} #quick .qform .gnaAgree li label {width:auto; letter-spacing:-1px; font-size:10.5px; font-weight:400; padding:0 0 0 19px; color:#333;} #quick .gnaAgree input[type="checkbox"] + label:before {width:14px; height:14px;} #quick .gnaAgree input[type="checkbox"]:checked + label:after {width:14px; height:14px;} #qRightBn {position:fixed; bottom:46px; left:10px; width:220px; z-index:998; } #qRightBn a {display:block; border-radius:15px; overflow:hidden; box-shadow:2px 2px 5px rgba(0 0 0 / 25%);} .mi-position {left:10px !important; bottom:30px !important;} /*팝업 견적 문의*/ #consultpop.cp-style-1 {} #consultpop.cp-style-1 .tit { padding:30px 40px; text-align:center;} #consultpop.cp-style-1 .tit a.close {position:absolute; top:27px; right:25px;} #consultpop.cp-style-1 .tit h2 {margin-bottom:5px; font-size:24px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #consultpop.cp-style-1 .tit p {font-size:14px; color:#8c8c8c;} #consultpop.cp-style-1 .consultform form {padding:0 30px;} #consultpop.cp-style-1 .consultform form h3 {margin:25px 0 11px 0; font-size:15px; font-weight:700;} #consultpop.cp-style-1 .consultform form .formList li {display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;font-weight:500;} #consultpop.cp-style-1 .consultform form .formList li label {width:100px; font-size:15px; color:#1a1a1a; font-weight:500; letter-spacing:-1px; font-weight:700;} #consultpop.cp-style-1 .consultform form .formList li .subdate {padding:12px 0; width:75%; text-align:left;} #consultpop.cp-style-1 .consultform form .formList li input {padding:13px 17px; width:75%; border:1px solid #707070; border-radius:5px; box-sizing:border-box;} #consultpop.cp-style-1 .ns {padding: 0 0 0 3px; font-size:16px; line-height:23px; color:#D10005;} /*Contact custom*/ #consultpop.cp-style-1 .popContact {width:75%;} #consultpop.cp-style-1 .popContact span input[type="checkbox"]{ appearance:none; } #consultpop.cp-style-1 .popContact span input { appearance:none; display:none;} #consultpop.cp-style-1 .popContact span input[type="checkbox"] + label {display:inline-block; position:relative; width:auto; padding-right:22px;} #consultpop.cp-style-1 .popContact span input[type="checkbox"] + label:before{ content:''; position:absolute; right:0; top:0; width:17px; height:17px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #consultpop.cp-style-1 .popContact span input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:4px; right: 4px; width:9px; height:9px; background:#000; border-radius:100%; } #consultpop.cp-style-1 .agree {margin:25px 0; display:flex; gap:10px; font-size:14px; letter-spacing:-0.5px; color:#1a1a1a;} #consultpop.cp-style-1 .agree li {margin-bottom:4px !important;} #consultpop.cp-style-1 .agree label {width:auto !important; font-size:13px !important; font-weight:400 !important;} #consultpop.cp-style-1 .agree span.agree-link-pop {color:#8c8c8c; cursor:pointer;} #consultpop.cp-style-1 .agree input[type="checkbox"]{appearance:none; display:none;} #consultpop.cp-style-1 .agree input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:25px; cursor:pointer; } #consultpop.cp-style-1 .agree input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:0; width:17px; height:17px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ccc;} #consultpop.cp-style-1 .agree input[type="checkbox"]:checked + label:before {background:#0A0B0B; border:none;} #consultpop.cp-style-1 .agree input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:3px; left: 5px; width:6px; height:6px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #consultpop.cp-style-1 .agreecon {padding:0 15px; height:85px; overflow-y:scroll; border:1px solid #c1c1c1;} #consultpop.cp-style-1 button { position:absolute; left:50%; bottom:0; transform: translate(-50%, 0); display:block; padding:30px 0; width:100%; background:#D10005; color:#fff; font-size:20px; font-weight:600; letter-spacing:-1px; text-align:center;} /*2025 팝업스타일*/ #consultpop.cp-style-2 {padding:22px 24px;} #consultpop.cp-style-2 .tit h2 {font-size:20px; font-weight:700;} #consultpop.cp-style-2 .img {margin:12px 0 32px 0;} #consultpop.cp-style-2 .formList .ns {color:#e3222a;} #consultpop.cp-style-2 .formList {display:flex; flex-direction:column; gap:16px; padding:0 0 24px 0; border-bottom:1px solid #e5e5e5;} #consultpop.cp-style-2 .formList li {display:flex; flex-direction:column; gap:8px; font-size:16px; font-weight:500; color:#222;} #consultpop.cp-style-2 .formList li input {padding:14px 16px; background:#F7F8FA; border-radius:8px;} #consultpop.cp-style-2 .formList li .subdate {padding:14px 16px; background:#E4E6EB; border-radius:8px;} #consultpop.cp-style-2 .formList li input:placeholder {color:#a3a3a3;} #consultpop.cp-style-2 .popAgree {padding:25px 0;} #consultpop.cp-style-2 button.goBtn {display:block; width:100%; padding:24px 0; text-align:center; color:#fff; background:#D10005; font-size:20px; font-weight:700; border-radius:8px;} .popAgree .nns {color:#D10005;} .popAgree .fc-gray {margin:8px 0 0 0; display:block; color:#737373; font-size:13px; } .popAgree ul {display:flex; flex-direction:column; gap:8px;} .popAgree ul li {padding: 0 0 0 16px;} .popAgree ul li.all {padding:16px; border:1px solid #e5e5e5; border-radius:8px;} .popAgree ul li.all input + label {font-size:16px; font-weight600;} .popAgree input {display:none; appearance:none;} .popAgree input + label {display:block; cursor:pointer; position:relative; padding:0 0 0 23px; font-size:14px; font-weight:400; letter-spacing:-0.5px;} .popAgree input + label:before {content:''; position:absolute; top:0; left:0; width:18px; height:18px; background:url('/_img/ico_check_basic.png') no-repeat center #fff; background-size:contain;} .popAgree input:checked + label:before {background:url('/_img/ico_check_blue.png') no-repeat center #fff; background-size:contain;} .popAgree .arrow {font-size:20px; color: #a4a4a4;} .popAgree .all input + label {display:block; cursor:pointer; position:relative; padding:0 0 0 23px; font-size:14px; font-weight:400; letter-spacing:-0.5px;} .popAgree .all input + label:before {content:''; position:absolute; top:0; left:0; width:18px; height:18px; background:url('/_img/ico_check_white.png') no-repeat center #d3d3d3; background-size:contain; border-radius:3px;} .popAgree .all input:checked + label:before {background:url('/_img/ico_check_white.png') no-repeat center #D10005; background-size:contain;} /*즉시출고 팝업 2023*/ .winLayWrap.winLayWrap-size-lg .winLayContainer {max-height:840px !important;} #consultpop.sevenpop .tit {position:fixed; top:0; padding:30px 40px 20px 40px; text-align:center; width:100%; background:#fff; z-index:99;} #consultpop.sevenpop {height:703px; padding-top:103px;} #consultpop.sevenpop .sevenscroll { padding-bottom:30px; height:609px; overflow-y:scroll;} #consultpop.sevenpop .agree {margin:17px 0 15px 0;} .svCarPop {position:relative; margin:10px 50px 30px 50px; border-radius:20px; box-shadow:3px 3px 10px rgba(0 0 0 / 10%); padding:15px 20px 20px 20px;} .svCarPop .markWrap {position:absolute; top:15px; right:15px; display:inline-block; width:auto;} .svCarPop .name {display:flex; align-items:center; gap:7px; padding:0 80px 0 0 ;} .svCarPop .name .brand {width:50px;} .svCarPop .name h3 {font-size:15px; line-height:1.4;} .svCarPop .price {margin:40px 0 15px 0; font-size:16px; font-weight:500; line-height:13px; color:#969696;} .svCarPop .price span {font-size:160%; font-weight:bold; color:auto; } .svCarPop .option {position:relative; z-index:10px;} .svCarPop .option li {display:flex; gap:7px; margin-bottom:3px; font-size:13px; font-weight:500; line-height:1.4;} .svCarPop .option li .subject {opacity:0.5;} .svCarPop .option li:last-child {margin-bottom:0;} .svCarPop .carImg {position:absolute; top:61px; right:8px; width:175px; height:86px; background-size:contain; background-repeat:no-repeat; z-index:9;} .consultform .condition {} #consultpop.cp-style-1 .consultform form .condition {display:flex; flex-direction:column; gap:7px; margin-bottom:30px;} #consultpop.cp-style-1 .consultform form .condition li {display:flex; align-items:center; } #consultpop.cp-style-1 .consultform form .condition li > label {font-size:13px; font-weight:600; line-height:15px; width:65px;} #consultpop.cp-style-1 .consultform form .condition li > label.space {letter-spacing:4px;} #consultpop.cp-style-1 .popflex {width:calc(100% - 65px); display:flex; align-items:center; gap:20px;} #consultpop.cp-style-1 .popflex span input { appearance:none; display:none; } #consultpop.cp-style-1 .popflex span input + label {display:inline-block; position:relative; width:auto; font-size:13px; line-height:15px; padding-right:20px; font-weight:400; cursor:pointer;} #consultpop.cp-style-1 .popflex span input + label:before{ content:''; position:absolute; right:0; top:0; width:15px; height:15px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #consultpop.cp-style-1 .popflex span input:checked + label:after {content: ''; position:absolute; top:4px; right: 4px; width:7px; height:7px; background:#000; border-radius:100%; } /*즉시출고차 팝업*/ .layerPopup#imcarPop .layerBody{width:980px; height:620px;} #immcarPop .pop-container {} #immcarPop .pop-container .tit {position:fixed; top:0; width:100%; background:#fff; padding:30px 40px; text-align:center; z-index:9; } #immcarPop .pop-container .tit h2 {margin-bottom:5px; font-size:28px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #immcarPop .pop-container .tit p {font-size:14px; color:#8c8c8c;} #immcarPop .pop-container .tit a.close {position:absolute; top:27px; right:25px;} #immcarPop .swiper-wrap {padding:0 40px;} #immcarPop .swiper {overflow:hidden; margin-left:-1px;} #immcarPop .arrow .swiper-button-next {right:40px;} #immcarPop .arrow .swiper-button-prev {left:40px;} #immcarPop .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #immcarPop .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} #immcarPop .seven-list .content {margin-top:114px; padding:20px;} #immcarPop .seven-list .plusbtn:hover .plusview {left:0;} .subcarList .list {border:1px solid #d1d1d1; box-sizing:border-box; border-radius:10px; padding:20px;} .subcarList .list:hover {border:1px solid #00abce; box-sizing:border-box;} .subcarList .list.on {border:1px solid #00abce; box-sizing:border-box;} .subcarList .list > a {position:relative; display:flex; flex-direction: column; border-radius:10px; height: 100%;} .subcarList .list > a .price {flex: 1 1; display: flex; align-items: flex-end;} .subcarList .list a .ab {position:absolute; top:5px; left:0;} .subcarList .list a .ab .final {padding:7px 12px; font-size:14px; line-height:14px; background:#007CCE; color:#fff; border-radius:500px;} .subcarList .list a .ab .seven {padding:7px 12px; font-size:14px; line-height:14px; background:#00abce; color:#fff; border-radius:500px;} .subcarList .list a .img {position:relative; width:100%; height:182px; display:flex; justify-content:center; /*padding:20px;*/} .subcarList .list a:hover .img img {transform: scale(1.1); transition:all 1s;} .subcarList .list .inven {position:absolute; top:-4px; right:0; padding:7px 12px; font-size:14px; line-height:14px; letter-spacing:-0.5px; color:#353535; border:1px solid #ccc; background:rgba(255,255,255,0.8); border-radius:500px; font-weight:bold; box-sizing:border-box;} .subcarList .list a h3 {margin:0; font-size:16px; flex: 0 1;} .subcarList .list a .option {margin:20px 0; flex: 0 1;} .subcarList .list a .option li {display:flex; align-items:center; gap:20px; font-size:14px; font-weight:400;} .subcarList .list a .option li .name {width:45px;} .subcarList .list a .option li .txt { align-items:center; gap:10px;} .subcarList .list a .option li.option-detail {align-items:flex-start;} .subcarList .list a .option li.option-detail .txt {padding-left:8px; width:100%;} /* height:48px; overflow-y:scroll; */ .subcarList .list a .option li.option-detail .txt::-webkit-scrollbar { width: 5px;} .subcarList .list a .option li.option-detail .txt::-webkit-scrollbar-track { background:#f1f1f1; border-radius: 10px;} .subcarList .list a .option li.option-detail .txt::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px;} .subcarList .list a .option li .color {display:block; width:13px; height:13px; border:1px solid #707070; box-sizing:border-box;} #immcarPop .subcarList .list .btn {margin-top:20px; display:flex; gap:5px; align-items:center;} #immcarPop .subcarList .list .btn a {display:blcok; width:50%; padding:9px; border-radius:5px; font-weight:600; text-align:center; border: 1px solid #d1d1d1;} #immcarPop .subcarList .list .btn a:first-child {display:none;} #immcarPop .subcarList .list .btn a.consultFormBtn {background:#1a1a1a; color:#fff;} #immcarPop .subcarList .list:hover .btn a {border:1px solid #00abce; color:#00abce;} #immcarPop .subcarList .list:hover .btn a.consultFormBtn {background:#00abce; color:#fff;} #immcarPop .subcarList .list:hover .btn a:hover {background:#f0fcff;} #immcarPop .subcarList .list:hover .btn a:hover.consultFormBtn {background:#0092b0; } #immcarPop .subcarList .list.on .btn a {border:1px solid #00abce; color:#00abce;} #immcarPop .subcarList .list.on .btn a.consultFormBtn {background:#00abce; color:#fff;} #immcarPop .subcarList .list.on .btn a:hover {background:#f0fcff;} #immcarPop .subcarList .list.on .btn a:hover.consultFormBtn {background:#0092b0; } .subcarList .list a .price li {padding:2px 0;} .subcarList .list a .price li {display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; font-weight:400; width: 100%;} .subcarList .list a .price li .name {width:50px;} .subcarList .list a .price li .won {font-size:130%;} #immcarPop .detail {text-align:center;} #immcarPop .detail a {display:inline-block; margin-top:35px; padding:17px 90px; text-align:center; background:#00abce; border-radius:5px; color:#fff; font-size:20px; font-weight:500; letter-spacing:-1px;} #immcarPop .detail a:hover {background:#00c4ec; transition:all 0.5s;} /*7일인도 특가 - 위 팝업 내용과 스타일 동일*/ #sub .subcarList {display:flex; flex-wrap:wrap; gap:25px;} #sub .subcarList .list {display:flex; flex-basis:31.9%; flex-direction:column; padding:25px; justify-content: space-between;} #sub .subcarList .list > a {width:100%; } #sub .subcarList .list a h3 {margin-top:10px; font-size:18px; line-height:26px; height:52px;} #sub .subcarList .list a .option li {font-size:15px; line-height:24px;} #sub .subcarList .list a .price li {font-size:15px; line-height:28px;} #sub .subcarList .list a .price li .name {width:55px;} #sub .subcarList .list a .price li .won {font-size:145%;} #sub .subcarList .list .btn {display:flex; justify-content:space-between; gap:10px;} #sub .subcarList .list .btn a {margin-top:20px; padding:12px; display:flex; width:100%; justify-content:center; font-size:16px; font-weight:600; color:#00abce; border:1px solid #00abce; box-sizing:border-box; border-radius:5px;} #sub .subcarList .list .btn a:hover {background:#e4faff; transition:all 0.5s;} #sub .subcarList .list .btn a.bg {background:#00abce; color:#fff;} #sub .subcarList .list .btn a.bg:hover {background:#0095b4; transition:all 0.5s; } #sub .seven-tit {display:flex; align-items:end; justify-content:space-between; margin-bottom:40px; padding:0 0 40px 0; border-bottom:1px solid #e6e6e6;} #sub .seven-tit h3 {font-size:30px; letter-spacing:-1px; font-weight:800;} #sub .seven-tit h4 {font-size:24px; letter-spacing:-0.5px; font-weight:800; margin-left:15px;} #sub .seven-tit h5 {margin-bottom:10px; font-size:20px; letter-spacing:-0.5px; font-weight:400;} #sub .seven-tit .seven-select {display:flex; align-items:center; gap:15px;} #sub .seven-tit .seven-select select { padding:15px 15px; width:100%; background:url('/_img/select_down.png') no-repeat #fff; background-size:15px; background-position:top 50% right 10px; color:#666666; border-radius:10px; font-size:15px; font-weight:500; letter-spacing:-0.5px; cursor:pointer; box-shadow:3px 3px 3px rgba(0 0 0 / 15%); } #sub .seven-tit .seven-select select.carbrand {width:140px;} #sub .seven-tit .seven-select select.carname {width:200px;} #sub .sevent-tab ul {margin-bottom:25px; display:flex;} #sub .sevent-tab ul a {display:block; font-size:25px; font-weight:800;} /*locationPop*/ #locationPop.layerPopup .layerBody {width:550px; height:765px;} #locationPop .pop-container .tit h2 {padding:30px 0; margin-bottom:5px; font-size:24px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a; text-align:center;} #locationPop .arrow .swiper-button-next {right:30px;} #locationPop .arrow .swiper-button-prev {left:30px;} #locationPop .arrow .swiper-button-next:after {content:url('/_img/location_arrow.png'); transform: rotate(180deg); } #locationPop .arrow .swiper-button-prev:after {content:url('/_img/location_arrow.png');} #locationPop .list {position:relative; margin:0 auto; width:380px; border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:3px 3px 15px rgba(0 0 0 / 15%);} #locationPop .list .img {position:relative;} #locationPop .list .name {position:absolute; top:40%; left:35px; transform:translate(0,-50%); z-index:99; width:100%;} #locationPop .list .name img {width:45px;} #locationPop .list .name h3 {margin:12px 0 5px 0; font-size:27px; color:#fff; font-weight:600; letter-spacing:5px;} #locationPop .list .name h3 .grade {margin-left:-10px;font-size:80%; font-weight:400; letter-spacing:0; line-height:25px; opacity:0.8; } #locationPop .list .name .eng {color:#eff4f9; font-size:14px; font-weight:400;} #locationPop .list .name .num {margin-top:12px; color:#b3e0ff; font-size:14px; line-height:1.2; } #locationPop .txt {padding:0 35px 35px 35px;} #locationPop .txt h4 {margin:0; font-size:22px; line-height:1.4; color:#000;} #locationPop .txt h5 {margin:12px 0 5px 0; font-size:16px; color:#000;} #locationPop .career li {font-size:14px; color:#21253b;} #locationPop .caution {width:80%; margin-top:20px; font-size:12px; line-height:1.3;} #locationPop .badge {position:absolute; bottom:35px; right:35px; display:flex; flex-direction:column;} #locationPop .locationList.swiper {padding:0 0 15px 0;}