:root { --column-padd: 0rem; --color-white: #fff; --color-black: #000; --color-red: #f72e41; --color-dark-gray: #222; --color-gray: #666; --color-main:#0f3c86; --color-brown:#67625d; --color-light-blue:#3a6ce9; --color-blue:#1568f3; --color-sub:#6796e4; } .color-red {color:#e90505; } .color-main {color:var(--color-main) !important} .color-yellow {color:#f5f805 !important} /* ========================================================================================================= layout ========================================================================================================= */ html {color:#333;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;overflow-y:scroll;overflow-x:hidden;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td, article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0;padding:0;} article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,h1,h2,h3,h4,h5,h6 {,'xeicon';display:block} body {font-family:'pretendard', 'sans-serif', 'xeicon', 'Malgun Gothic' ,'맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; font-size:12px;color:#333; } img {border:0; vertical-align:middle;} table {border-collapse:collapse;} fieldset {border:0;} legend {color:#000;} address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:bold;} caption { display:none;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {margin:0px;padding:0px;} caption,hr,legend {*display:none;font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;} a,a:link,a:visited,a:active,a:focus {color:#333;text-decoration:none;} a {text-decoration:none !important;} label:hover, a:hover {text-decoration:none;} noscript {display:none;} input[type=submit], input[type=button], label, button { cursor:pointer;} .clear:after {display:block;height:0;clear:both;visibility:hidden;} *html.clear {height:1%;} .clear {clear:both;line-height:0;font-size:0;height:0px;overflow:hidden;padding:0;margin:0; } .blind { position:absolute; left:-1000%; top:0; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden; } input, select, textarea,button { font-size:14px; border-radius:0;-webkit-appearance:none;} *{box-sizing:border-box;} /*main*/ .fc_w {color:#fff !important; } .fc_red { color:#e83c49 !important; } dl,dt,dd {font-family:inherit;} *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .root_daum_roughmap .cont {display:none !important; } /* input[type=submit], input[type=button], label, button { cursor: pointer;} input[type=checkbox]:checked + label { background-position: 0 3px; color: #111;} input[type=checkbox] + label { display: inline-block; padding: 0 10px 0 20px; min-height: 20px; background-image: url(/images/icon_check.png); background-position: 0 -33px; background-repeat: no-repeat; background-size: 16px auto; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0); letter-spacing: -1px; color: #222; font-size: 14px; line-height: 20px; } */ input, select, textarea, button { font-size: 14px; border-radius: 0; -webkit-appearance: none; } select { height: 35px; border: 1px solid #d9dbdc; appearance: none; -moz-appearance: none; -webkit-appearance: none; padding: 0 30px 0 10px; .padding-right: 0; background: url(/images/inc/arrow.png) right center no-repeat #fff; background-size: 30px auto; font-size: 14px; color: #555555; vertical-align: middle; box-sizing: border-box; } .fc_red {color:#05acff; } .fc_blue {color:#0f3eee; } .fc_black {color:#000; } .fc_skblue {color:#1dd6ff;} .fc_default {color:#153aaf !important} .bg_red { background:#d62d22; } .bg_blue {background:#262666; } .center {text-align:center !important; } input:-webkit-autofill { -webkit-text-fill-color: #000; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s;} /* ///////////////////////////////////////////////////////// */ /* checkbox radio common /* ///////////////////////////////////////////////////////// */ input[type=checkbox], input[type=radio] {position:absolute; opacity:0;-webkit-opacity:0;-moz-opacity:0; z-index:0;} input[type=checkbox] + label {position:relative;display:inline-block;margin:0; padding:0 1rem 0 1.35rem;box-sizing:border-box;background:none;border:0;letter-spacing:-1px;font-size:13px;line-height:28px;color:#111;font-style:normal;word-break:keep-all;vertical-align:middle;cursor:pointer;} input[type=checkbox] + label:before {display: block;content: "";position: absolute;left: 0;top:50%;width:18px;height:18px;background-color:#fff;border:1px solid #a9b4c0;border-radius:3px;transform:translateY(-50%);box-sizing:border-box;-webkit-box-sizing:border-box;;-moz-box-sizing:border-box; transition: all 0.2s ease-in; } input[type=checkbox] + label:after {content:'';display:none;position:absolute;top:50%;left:6px;width:7px;height:11px;margin:-7.5px 0 0 0;border-color:#fff;border-style:solid;border-width:0 2px 2px 0 !important;transform:rotate(45deg);} input[type=checkbox]:checked + label {background:none;} input[type=checkbox]:checked + label:before {border:1px solid var(--color-main);background-color:var(--color-main);transform:translateY(-50%);box-shadow:0 3px 8px -3px var(--color-main);} input[type=checkbox]:checked + label:after {display:block;} input[type=radio] + label {position:relative;display:inline-block;margin:0;padding:0 1rem 0 1.35rem;box-sizing:border-box;border:0;background:none;letter-spacing:-1px; font-size:13px;line-height:28px;color:#111;vertical-align:middle;cursor:pointer;} input[type=radio] + label:after {display: block;content: "";position: absolute;left: 0;top:50%;width:18px;height:18px;background-color:#fff;border:1px solid #a9b4c0;border-radius:50%;transform:translateY(-50%);transition: border 0.2s ease-in;box-sizing:border-box;-webkit-box-sizing:border-box;;-moz-box-sizing:border-box;} input[type=radio]:checked + label {background:none;} input[type=radio]:checked + label:after {border:5px solid var(--color-main);box-shadow:0 3px 8px -3px var(--color-main);} .fc_default {color:var(--color-main) !important} body {padding-top:0px; } .page_view {padding-top:0} .sub_title { position:relative; display:flex; padding:1rem 0} .sub_title h2 {display:block; width:100%; text-align:center; font-size:1.3rem; line-height:1.3rem; font-weight:700; color:#000; } .btn_page_prev {display:inline-block; vertical-align:top; width:60px; height:60px; line-height:60px; text-align:center; display:none; } .btn_page_prev:before {content:"\e908"; display:inline-block; font-size:25px; color:#000; font-family:'xeicon';} .divide {display:block; height:.65rem; background-color:#f4f4f4; margin:3rem 0; } .mt0 {margin-top:0;} .mg0 {margin:0 !important;} #header {position:relative;width:100%; top:0;left:0; height:60px; z-index: 333; background:#fff; border-bottom:0px solid #dedede; } #header .logo {position:absolute; left:12px; top:8px; z-index:333; } #header .logo a {display:block; width:100%; height:100%; display:inline-block; font-size:23px; color:#fff; font-weight:bold;; } #header .logo img {height:45px;} #header .menu_btn {position:absolute;right:5px;top:5px;} #header .menu_btn a {font-size:0; display:block; width:50px; height:50px; text-align:center; } #header .menu_btn a:before {content:"\e871"; display:inline-block; width:100%; line-height:50px; font-weight:600; color:#222; font-size:2rem !important; font-family:'Linearicons-Free';} #header .text {position:absolute;right:0;bottom:14px;right:58px;} #header .text img {height:30px;} #header .btn_call {position:absolute; right:60px; top:9px; font-size:0; } #header .btn_call img {height:42px; } #allMenu {height:100%; width:100%; background:#fff; display:none; position:fixed; top:0; right:0; z-index:9999; transition:all linear .3s; -webkit-transition:all linear .3s; -moz-transition:all linear .3s; -o-transition:all linear .3s; } #allMenu .menuwrap {height:100%; } #allMenu .menuwrap .home {display:block; padding:20px 0 0 25px;} #allMenu .menuwrap .home img {height:35px; } #allMenu .menulogo {padding:20px 0 20px;} #allMenu .menulogo img {height:35px;} #allMenu .menulogo p {color:#555; padding-top:10px;font-size:22px;} #allMenu .scroll { overflow-y: scroll;height: calc(100% - 60px);} #allMenu .menulist {padding:20px 20px; } #allMenu .menulist li {padding:10px 0;} #allMenu .menulist li.line {border-bottom:1px solid #eee; padding-bottom:18px; margin-bottom:8px;} #allMenu .menulist li a{display:block; position:relative; color:#333; text-indent:10px; font-size:17px;line-height: 1.3em; font-weight:500; } #allMenu .menulist li a:after {content:"\e940"; font-size:17px; color:#555; position:absolute; right:5px; top:0px; font-family:'xeicon'; } #allMenu .menufoot {padding:0px 20px 0; text-align:center; } #allMenu .menufoot .contact_box { padding:.5rem; border:1px solid var(--color-light-blue);margin-bottom:10px; border-radius:15rem; } #allMenu .menufoot .contact_box p {display:block; font-size:1.5rem; line-height:1.5em; font-weight:500; font-weight:800;} #allMenu .menufoot .contact_box p:before {content:''; display:inline-block;vertical-align:middle; width:50px; height:50px; background:url('/images/inc/ico_call.png') no-repeat center; background-size:auto 40px; } #allMenu .menufoot .contact_box p:first-child {margin-top:0} #allMenu .menufoot .contact_box p a {display:inline-block;vertical-align:middle; } #allMenu .sns {display:block; margin:10px 0; text-align:center; background-color:#f6f6f6; padding:10px; border-radius:5px;border-left:1px solid rgba(255,255,255,0.1); display:flex; justify-content: center; gap:1.2rem;} #allMenu .sns a { width:40px; height:40px; line-height:40px; border-right:1px solid rgba(255,255,255,0.15); background-position:center center; background-repeat:no-repeat; background-size:auto 40px;} #allMenu .sns a.youtube {background-image:url('/images/inc/ico_youtube.png')} #allMenu .sns a.insta {background-image:url('/images/inc/ico_insta.png')} #allMenu .sns a.ch {background-image:url('/images/inc/ico_ch.png')} #allMenu .sns a.fb {background-image:url('/images/inc/ico_fb.png')} #allMenu .menufoot a.pc {margin-bottom:10px; display:block; padding:15px 0px; border:1px solid #dedede; color:#333; font-size:16px; font-weight:700;} #allMenu .btnClose { position:Absolute; top:5px; right:5px; display:block; width:50px; height:50px; line-height:50px; text-align:Center; z-index:999; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } #allMenu .btnClose:before {content:"\e9af"; display:inline-block; width:100%; line-height:50px; color:#333; font-size:30px !important; font-family:'xeicon';} #block_navi { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.3); z-index:999; } @media screen and (max-width:350px) { #allMenu .menulist li {line-height: 50px; } #allMenu .menulist li a{ font-size:16px;} } /* swiper */ .main-visual { position: relative; left: 0; right: 0; top: 0; margin-top:1rem; height:240px; width:100%; overflow: hidden; z-index: 10;} .main-visual .swiper-slide { width: 100%; position: relative; display: flex; align-items: center; } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px,0,0);} .swiper-wrapper {position: relative; width: 100%; height:100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; /*transition-timing-function: linear;*/} .swiper-slide { flex-shrink: 0; width: 100%; height:100%; position: relative; transition-property: transform; background-repeat:no-repeat; background-position:53% center !important; background-size:auto 100% !important; } .swiper-slide.n01 { background-image:url('/images/main/visual01.jpg'); background-position:50% center !important; } .swiper-slide.n02 { background-image:url('/images/main/visual02.jpg'); background-position:49% center !important; } .swiper-slide.n03 { background-image:url('/images/main/visual03.jpg'); background-position:68% center !important;} .swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity;} .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto;} .visual-copy {position: relative; width: 100%; padding:0 1rem; margin-top:-.85rem; text-align: left; display:flex; flex-direction: column; z-index: 10; } .visual-copy .copy1, .visual-copy .copy2, .visual-copy .exp, .visual-copy dl {transition:all 1.0s cubic-bezier(0.165, 0.84, 0.44, 1);opacity: 0; } .visual-copy .copy1 {transform: translateY(20px); transition-delay: .2s; } .visual-copy .copy2 {transform: translateY(20px); transition-delay: .4s; } .visual-copy dl {transform: translateY(20px); transition-delay: .6s; } .visual-copy .exp {transform: translateY(20px); transition-delay: .4s; } .visual-copy strong {font-weight:700 !important; } .visual-copy .copy1 { display:block; color:#fff; font-size:1.25rem; line-height:1.3em; font-weight:300; } .visual-copy .copy1 img {height:3rem; width:auto;} .visual-copy .exp { display:block; color:#FFF; font-size:.925rem; line-height:1.4em; font-weight:400; padding-top:.65rem; letter-spacing:-.05em; } .visual-copy dl {display:flex; flex-direction: column; gap:.3rem; margin-top:.5rem;} .visual-copy dl dd {position:relative; padding-left:.5rem; font-size:.95rem; line-height:1.2rem; font-weight:500; color:#fff;} .visual-copy dl dd:before {content:''; width:3px; height:3px; background-color:#fff; position:absolute; left:.1rem; top:.4rem; transform: rotate(45deg); } .visual-copy strong {font-weight:700;} .swiper-slide.n01 .copy1, .swiper-slide.n01 .exp {color:#333; } .swiper-slide.n03 .visual-copy {margin-top:-1.5rem;} .main-visual .swiper-slide.swiper-slide-active .visual-copy .copy1 {transform: translateY(0px); opacity:1;} .main-visual .swiper-slide.swiper-slide-active .visual-copy .exp{ transform: translateY(0px); opacity:1;} .main-visual .swiper-slide.swiper-slide-active .visual-copy dl{ transform: translateY(0px); opacity:1;} .visual-swiper-control { position: absolute; left: 1rem; bottom: 1rem; color: #fff; display: flex; align-items: center; z-index: 100; } .visual-progressbar { width: 50px; height: 2px; position: relative; background-color: rgba(255, 255, 255, 0.5); transition: .3s opacity; text-align: center; position: relative; overflow: hidden; margin: 0 .2rem;} .visual-progressbar .bar { display: block; content: ''; background-color: #04b9e6; position: absolute; left: 0; top: 0; width: 0; height: 100%;} .visual-progressbar.play .bar { animation: barMotion 5s forwards linear;} .visual-swiper-paging.swiper-pagination-progressbar { width: 50px; height: 2px; position: relative; background-color: rgba(255, 255, 255, 0.3); transition: .3s opacity; text-align: center; position: relative; overflow: hidden; margin: 0 0px;} .visual-swiper-paging.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top;} .visual-swiper-control .swiper-pagination { display: flex; align-items: center; margin-right: .2rem; font-size: .85rem; color: #fff; font-weight: 500;} .visual-swiper-control .swiper-pagination .current-page, .visual-swiper-control .swiper-pagination .total-page { width: 24px; color:#fff; text-align: center;} .visual-swiper-control .swiper-pagination .current-page {color:#04b9e6; font-weight:bold;} /* dot로 표시할때 */ .visual-swiper-control .swiper-pagination-bullet { width: 3.5rem; height: 4px; background: #FFF; margin-right:.5rem; opacity: 0.7; transition: background 0.3s;} .visual-swiper-control .swiper-pagination-bullet-active { background: var(--color-main); opacity: 1;} .visual-swiper-control .btn-swiper-prev, .visual-swiper-control .btn-swiper-next, .visual-swiper-control .btn-swiper-stop { width: 20px; height: 20px; text-align: left; font-size:0; overflow: hidden; margin: 0 3px 0; background-color:transparent; border:0px solid #fff; outline:0;cursor:pointer; } .visual-swiper-control button:before {content:""; display:inline-block; vertical-align:top; font-size:1rem; color:#333; font-family:'xeicon';} .visual-swiper-control .btn-swiper-prev:before {content:"\e93b";} .visual-swiper-control .btn-swiper-next:before {content:"\e93e";} .visual-swiper-control .btn-swiper-stop::after { content: "\ea3b"; font-size:1.25rem;line-height:20px; color:#666; font-family:'xeicon';/* 일시정지 아이콘 */} .visual-swiper-control .btn-swiper-stop.on::after { content:"\ea3e"; color:#04b9e6; /* 재생 아이콘 */} .title_box { text-align:center; margin:2rem 0 1.1rem; padding:0 0rem; } .title_box.left { text-align:left; } .title_box h3 {position:relative; color:#000;font-size:20px; line-height:20px; color:#333;letter-spacing:-.04em; margin:0; padding:0; font-weight:700} .title_box h3 strong {color:var(--color-main);} .title_box h3 span {font-weight:500} .title_box p { margin-top:5px; color:#888; font-size:14px; line-height:1.3em; letter-spacing:-.05em;font-weight:400} .title_box.white h3, .title_box.white h3 strong, .title_box.white p {color:#fff;} .price-sch {display:flex; justify-content: space-between;flex-wrap: wrap; flex-direction: row; width:calc(100% - 1.4rem); margin:10px auto; font-size:0; gap:5px; } .price-sch li {width:calc(50% - 3px); } .price-sch li a {display:block; font-size:13px; height:33px;line-height:33px; padding-left:15px; font-weight:400;background-color:#f0f5f9; border-radius:5px; } /* main_search */ .search_tab {margin:0 auto .5rem;} .search_tab > ul {font-size:0; display:flex; padding-bottom:.5rem;} .search_tab > ul > li { width:50%; border-radius:0px;box-sizing:border-box;} .search_tab > ul > li > span {display:block;line-height:2.5rem; text-align:center; font-size: .95rem; padding:0 .65rem; color:#999; border-bottom:2px solid #eee; } .search_tab > ul > li.on { } .search_tab > ul > li.on > span { border-color:var(--color-main); color:var(--color-main); font-weight:700;} .main_search {position: relative;padding:0 1rem 1rem;background-size:cover;z-index:2;} .main_search:after {content:'';position:absolute;left:0;right:0;bottom:0;top:3.05rem;background:#fff;z-index:-1;} .main_search .search {margin:0 auto;box-sizing:border-box;} .main_search .search {font-size:0;text-align:center;} .main_search .search > li {display:inline-block; position:relative;padding:0 .7rem;font-size:1rem; box-sizing:border-box;text-align: center;letter-spacing:-1px;} .main_search .search > li > span {border-bottom: 3px solid transparent;color:#111; display:block;line-height:2.5rem; font-size:inherit;cursor:pointer;font-family:"SB-ugr";} .main_search .search > li.on > span {border-color:var(--color-main);color:var(--color-main); } .main_search .fast {background-color:var(--color-main); padding:.7rem 1rem; text-align:center; font-size:0; border-radius:10rem; display:flex;justify-content: center;align-items: center; box-shadow:5px 5px 10px -5px rgba(0 0 0 / 10%) } .main_search .fast input {width:49%;height:2.55rem;margin:0; background:#fff; color:#FFF; border:0; font-size:1rem; border-bottom:1px solid #fff; outline:0; vertical-align: middle;background-color:transparent; } .main_search .fast input::placeholder {color:rgba(255 255 255 / 50%);} .main_search .fast .btn {position:relative; display:inline-block;border:0;padding:0 .85rem; margin:0; font-size:0; line-height:2.5rem;font-weight:400;font-weight:normal;border-bottom:1px solid #fff; background-color:transparent; cursor:pointer;box-sizing:border-box;vertical-align:middle; } .main_search .fast .btn:before {content:"\e97a"; display:inline-block; vertical-align:middle; font-family:'xeicon'; color:#fff; font-size:1.5rem;} .main_search .fast .btn.detail { font-size:.85rem; color:#fff; padding:0 0 0 .85rem; } .main_search .fast .btn.detail:before {content:''; font-size:0; position:absolute; left:0; top:50%; height:20px;margin-top:-10px; width:1px; border-left:1px solid rgba(255,255,255,0.3)} .main_search .fast .btn.detail:after {content:"\eb38"; font-family:'xeicon'; display:inline-block; vertical-align:top; margin-left:.2rem;font-size:1rem;} .main_search .searchArea .class {font-size:0;padding:0;overflow:hidden;} .main_search .searchArea .class li{float:left; width:25%; box-sizing:border-box; text-align:center;} .main_search .searchArea .class li.c1 a {background:url(/images/main/class_car01.png) center 3px no-repeat;} .main_search .searchArea .class li.c2 a {background:url(/images/main/class_car02.png) center 3px no-repeat;} .main_search .searchArea .class li.c3 a {background:url(/images/main/class_car03.png) center 3px no-repeat;} .main_search .searchArea .class li.c4 a {background:url(/images/main/class_car04.png) center 3px no-repeat;} .main_search .searchArea .class li.c5 a {background:url(/images/main/class_car05.png) center 3px no-repeat;} .main_search .searchArea .class li.c6 a {background:url(/images/main/class_car06.png) center 3px no-repeat;} .main_search .searchArea .class li.c7 a {background:url(/images/main/class_car07.png) center 3px no-repeat;} .main_search .searchArea .class li.c8 a {background:url(/images/main/class_car08.png) center 3px no-repeat;} .main_search .searchArea .class li a { height:70px; padding:0;font-weight:500; display:block;font-size:.8rem; border:1px solid transparent;background-size:auto 2rem !important;} .main_search .searchArea .class li a span {line-height: 90px;} .main_search .searchArea .class li a:hover {background-color:#fff;} .main_search .searchArea .class li a:hover span { color:#000;} .main_search .searchArea .maker {clear:both;font-size:0; padding:5px 0; width:100%; } .main_search .searchArea .maker li{ box-sizing:border-box; text-align:center; width:25%;display:inline-block; margin:0; vertical-align:middle;} .main_search .searchArea .maker li a {height:60px;padding-top:10px;padding:0;font-size:13px; color:#333; display:block; border:1px solid transparent;} .main_search .searchArea .maker li a img {height:2rem;} .main_search .searchArea .maker li a span {display:block;line-height: 15px;font-weight:500; } .main_search .searchArea .maker li a:hover { background-color:#fff;} .main_search .searchArea .maker li a:hover span {color:#000; } .main_search .searchArea .local {position: relative;width:100%;font-size:0; } .main_search .searchArea .local ul {display:block; padding:5px 0; text-align:center; } .main_search .searchArea .local ul li {display:inline-block; padding:0;margin:0; width:calc(50% - 10px); margin-left:5px;} .main_search .searchArea .local ul li:nth-child(2n - 1) {margin-left:0} .main_search .searchArea .local ul li a {display:block;background-color:#f9f9f9;margin-bottom:5px;border-radius: 4px;font-size:.9rem;text-align:center;letter-spacing:-1px;line-height:45px;} /* banner */ .img_banner {display:block; position:relative; width:calc(100% - 20px);height:85px; margin:10px auto; border-radius:7px; overflow:hidden; background:url('/images/main/banner_sell_mobile.jpg') no-repeat center; background-size:cover;} .img_banner a {display:block; } .img_banner a dl {position:absolute; left:20px; top:15px; color:#fff; } .img_banner a dl dt { font-size:18px; line-height:1.3em; } .img_banner a dl dd { margin-top:3px; font-size:12px; line-height:1.3em; font-weight:300} .img_banner a dl dd span {font-size:13px; font-weight:500;} .popular {padding:10px 0; text-align:center;font-size:14px; background: #f5f5f5;} .popular a {display:inline-block;padding:5px 0 5px 10px;} .popular span {font-size:18px; color:#fff; font-weight:500;letter-spacing:-.05em; } .popular input[type="text"] { display:inline-block; vertical-align:middle; border:none; width:calc(100% - 190px); height:35px; padding-left:5px; margin-right:-5px; border:1px solid #ddd;line-height:35px; } .popular input[type="submit"] {display:inline-block; vertical-align:middle; border:none; background:#555;color:#fff; width:70px; height:35px; margin-top:0px;} .popular img {vertical-align:middle; margin-right:7px; height:24px; } .title-wrap {position:relative;display:block; margin-top:1.5rem; margin-bottom:1rem; padding:0 1rem;} .title-wrap h3 {position:relative;color:#333;font-size:21px; padding:0; line-height:21px; letter-spacing:-.02em;font-weight:700; } .title-wrap h3 strong {font-weight:500; color:var(--color-main);} .title-wrap p { margin-top:8px; color:#50555C; font-size:14px; line-height:16px; padding-bottom:0px; letter-spacing:-.04em;font-weight:400; } .btn-more {position:absolute; right:1rem; top:-.5rem; font-size:0; color:#333; width:50px; height:30px; background:url('/images/arrow_right.png') no-repeat right ; background-size:auto 100%;} .main .footer_wrap {display:block;margin-top:0rem } .footer_wrap{ width:100%; width:100%;background:#fff; border-top:1px solid #f0f0f0; clear:both; padding:1rem 1rem 7rem;margin:2rem 0 0; text-align:center; } .footer_wrap .footer_btnGroup{width:100%; text-align:center; font-size:13px; background:#f1f1f1;} .footer_wrap .footer_btnGroup .footer_btn{display: inline-block;} .footer_wrap .footer_btnGroup .footer_btn li{float:left; width:90px; margin-right:5px;} .footer_wrap .footer_btnGroup .footer_btn li+li+li{margin-right:0;} .footer_wrap .footer_btnGroup .footer_btn li a{display:block; line-height:40px; color:#333;} .footer_wrap .footer_text{padding:0px;color:#333; font-weight:500; font-size:13px; clear:both; line-height:1.6em; letter-spacing:-.04em; word-break:keep-all;} .footer_wrap .footer_text span {display:inline-block; padding:0 10px;} .footer_wrap .footer_text .b_call { display:block; margin-top:10px; background-color:var(--color-main); color:#fff !important; text-align:center; box-sizing:border-box; } .footer_wrap .footer_text .b_pc { display:block; margin-top:5px; border:1px solid var(--color-main); color:var(--color-main); background-color:#FFF; text-align:center; box-sizing:border-box; } .footer_wrap .footer_text a{color:#fff; font-weight:500; line-height:38px; height:40px; font-size:15px;border-radius:5px; display:inline-block;} .footer_wrap .copyright { padding-top:8px; font-size:13px; } .footer_wrap .social {display:block; padding:0px 0 15px; font-size:0; text-align:center; } .footer_wrap .social a {display:inline-block; vertical-align:top; width:50px; height:50px; font-size:0; margin-left:10px; border-radius:50%; border:1px solid #f0f0f0; } .footer_wrap .social a:before {content:''; display:inline-block; text-align:center; line-height:48px; color:#fff; font-size:24px;font-family:'xeicon'; } .footer_wrap .social a.fb:before {content:"\ebd3"} .footer_wrap .social a.insta:before {content:"\ebe9" } .footer_wrap .social a.youtube:before {content: "\ec32"} .footer_wrap .social a.kakao:before {content:"\ebee";font-size:28px; } .footer_wrap .social a:first-child {margin-left:0} .footer_wrap .social a img { margin-top:10px; display:inline-block;} .footer_wrap .footer_text a {color:#333 !important;} .dividew{height:8px; background:#fff;} /* 퀵메뉴 */ .q-wrap {display:none; position:relative; margin-top:2rem;} .quick_btn {position:fixed; right:5px; bottom:7rem; z-index:99999; display:flex; flex-direction: column; justify-content: center; gap:0.3rem; transition: all 0.2s ease-in; } .quick_btn a {position:relative; width:50px; height:50px; text-align:center; border-radius:50%;box-shadow:8px 8px 20px rgba(0,0,0,0.2);transition: all 0.2s ease-in; } .quick_btn a.kakao { background:#ffde00 url('/images/ico_kakao.png') no-repeat center ; background-size:auto 1.5rem; } .quick_btn a.call { background-color:var(--color-main); background-repeat:no-repeat; background-position:center center; background-size:45%; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 80 80' style='enable-background:new 0 0 80 80;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M7.8,7.8L7.8,7.8c-1,1.4-1.9,3-2.6,4.7c-0.6,1.6-1.1,3.1-1.3,4.7C2.9,24.8,4.5,32,9.4,40.1 c3.1,5.1,7.5,10.6,13.4,16.7c6.4,6.6,12.4,11.1,17.7,14.1c12.2,6.9,20.6,6.3,21.1,6.2c1.6-0.2,3.2-0.5,4.8-1.1 c1.7-0.6,3.3-1.5,4.7-2.5l0.1,0.1l3.3-3.1c2.4-2.3,2.5-6,0.3-8.3L63.6,50.5c-0.6-0.6-1.4-1.1-2.2-1.3l-0.8-0.8 c-2.1-2.1-5.6-2.1-7.8,0l-5.4,5.2c-0.3-0.2-0.7-0.4-1-0.6c-3.3-1.9-7.9-4.6-12.7-9.5c-4.8-5-7.3-9.6-9.1-13.1c0-0.1-0.1-0.2-0.1-0.2 l3.9-3.7l1.9-1.9c2.4-2.3,2.5-6,0.3-8.3L19.5,4.6c-2.2-2.3-6-2.3-8.4,0L7.8,7.8z'/%3E%3C/svg%3E%0A"); } .quick_btn a.call:before {content:''; position:absolute; left:5px; top:5px;width:40px; height:40px; border-radius:50%; background-color:#FFF; z-index:-1; } .quick_btn a.youtube {background-color:var(--color-red); text-align:center; padding:0;} .quick_btn a.youtube:before {content:"\ec32";display:inline-block;font-family:'xeicon'; color:#fff; width:100%; line-height:50px;font-size:1.85rem;} .quick_btn a.insta { background:url('/images/bg_insta.jpg') no-repeat center ; background-size:cover; } .quick_btn a.insta:before {content:"\ebe9"; height:100%; display:inline-flex; justify-content: center;align-items: center; color:#fff; font-size:1.65rem; } /* 메인상담 */ .main_consult {position:fixed; right:0px; bottom:0px;display:block; padding:.85rem .65rem 1rem; background-color:#fff; border-radius:1rem 1rem 0 0; z-index:3333;box-shadow:8px 8px 30px -4px rgba(0,0,0,0.6);} .main_consult .column {margin:0; padding:0; } .main_consult .title {display:flex; justify-content: space-between; align-items: center; padding-bottom:.25rem; } .main_consult .title h2 {font-size:1rem; line-height:1.4em; font-weight:700; color:#111; letter-spacing:-.04em;} .main_consult .agree {text-align:right; } .main_consult .agree a {display:inline-block; height:1.5rem; line-height:1.5rem; padding:0 .85rem; background-color:#f1f1f1; font-size:.8rem; font-weight:500; border-radius:5rem;} .main_consult form { display:flex; justify-content: center;flex-direction: column;align-items: center;flex-wrap: nowrap; flex-direction: row; gap:0.25rem;padding:0.35rem; border-radius:0.65rem; border:1px solid var(--color-main); box-shadow:3px 3px 10px rgba(0,0,0,0); } .main_consult input, .main_consult button {height:40px; line-height:40px; border-radius:5px; } .main_consult input[type="text"] {width:calc(50% - 40px); background-color:#f8f8f8; border:2px solid transparent; padding:0 0 0 0.35rem; font-size:1rem; color:#222; outline:0; font-weight:bold; transition: all 0.2s ease-in;} .main_consult button { width:80px; text-align:center; background-color:var(--color-main); color:#fff; font-weight:bold; border:0; font-size:0.9rem; text-shadow:1px 1px 1px rgba(0,0,0,0.1); cursor:pointer; } .main_consult input:-webkit-autofill { -webkit-text-fill-color: var(--color-main); } .main_consult input::placeholder {color:#aaa; font-size:0.85rem; letter-spacing:-.06em; font-weight:500; } .title_wrap {position:relative;margin:0 15px; padding:1.5rem 1rem .85rem; text-align:center; border-bottom:0px solid #ddd; } .title_wrap.nomg {margin:0; text-align:left;} .title_wrap h2 {display:block;color:#111;font-size:1.05rem;font-weight:700; letter-spacing:-.02rem;} .title_wrap h2 span {display:inline-block;margin-left:5px; color:var(--color-main); border-radius:50px;font-size:.95rem; letter-spacing:0;} .title_wrap .h2_txt {position:relative;margin:0 auto;color:#343434;font-size:14px;letter-spacing:-1px;font-weight:300;} .title_wrap button {position:relative;display:inline-block;width:33.33%;border-radius: 0;background: transparent;padding: 0;border: 0;-webkit-appearance: none;text-align:center;font-size:.8rem;line-height:2.8rem;letter-spacing:-0.04rem;color:#555;} .title_wrap button:before {content:'';display:inline-block;width:23px;height:20px;background-repeat:no-repeat;background-position:0 center;background-size:auto 18px;vertical-align:middle;} .title_wrap .btn-sort-box {position:absolute;right:0;bottom:0;display:inline-block;width:33.33%;} .title_wrap .btn-sort-box button {width:100%;} .title_wrap .btn-sort::before {background-image:url(/mobile/image/icon_sort.png);} .title_wrap .btn-sort-box .selectbox {display:none;position:absolute;left:0;top:40px;width:130px;;background:#fff;z-index:150;box-shadow:0 5px 10px rgba(0,0,0,0.2);border:1px solid #ddd;} .title_wrap .btn-sort-box .selectbox li {padding:0.5rem 1rem;border-bottom:1px solid #eee;font-size:.8rem;line-height:1.8rem;} .title_wrap .btn-sort-box .selectbox li.on {background:#f6f6f6;font-weight:bold;} .tap_normal_wrap {clear:both;position:relative;z-index:1;font-size:0; padding-top:5px;} .tap_normal {position:relative; padding:0; margin-bottom:0px; display:flex; justify-content: space-between;flex-direction: row; flex-wrap: nowrap;} .tap_normal:after {content:''; position:absolute; left:0; bottom:0; height:1px; width:100%; background-color:#eee; z-index:-1} .tap_normal li { width:50%; position:relative; padding:0; background-color:#f4f4f4; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .tap_normal li.on { z-index:5} .tap_normal li.on span {color:var(--color-main); font-weight:bold; background-color:var(--color-main); color:#fff; } .tap_normal li span {display:block;width:100%;height:100%;line-height:45px;color:#333;font-size:16px;text-align:center;font-weight:bold; } .event_list {display:block; overflow:hidden; flex-direction: column; padding:0; } .event_list img {display:block; width:100%; } /* 유튜브 */ .youtube_wrap {padding:1rem;} .youtube_wrap .mov { display:block; height:13rem; border-radius:1rem; overflow:hidden; background-color:#000; background-repeat:no-repeat; background-position:center center; background-size:cover; } .youtube_wrap .mov a {display:block; width:100%; height:100%;} /* 검색어입력 */ .m_search {position: relative; padding:0 .85rem;} .m_search .fast {position: relative; text-align:center; font-size:0; border-radius:0rem; padding:2px; background-color:var(--color-main); border-radius:5rem; overflow:hidden; } .m_search .input_wrap {display:flex;justify-content: center;align-items: center; position:relative;} .m_search .input_wrap img {position:absolute; left: 1.2rem; top:.5rem; z-index:33; opacity: 1;} .m_search .fast form { width:100%; } .m_search .fast input {position: relative;width:calc(100% - 50px);height:2.85rem; padding-left:1.65rem; letter-spacing:0; margin:0;color:#222;border:0; font-size:1.1rem; font-weight:600;outline:0; vertical-align: middle;background-color:#fff; border-radius:5rem 0 0 5rem;} .m_search .fast input::placeholder {color:#999; font-size:1rem; font-weight:500;opacity:.7; } .m_search .fast input:-webkit-autofill { -webkit-text-fill-color: var(--color-main); } .m_search .fast .btn {position:relative; display:inline-block;border:0;width:50px; text-align:center; margin:0; font-size:0; line-height:2.85rem; font-weight:400;font-weight:normal; background-color:transparent; cursor:pointer;box-sizing:border-box;vertical-align:middle; } .m_search .fast .btn:before {content:"\e97a"; display:inline-block; vertical-align:middle; font-family:'xeicon'; color:#FFF; font-size:1.5rem;} .m_search .fast .btn.detail { font-size:.85rem; color:#FFF; padding:0 0 0 .65rem; } .m_search .fast .btn.detail:before {content:''; font-size:0; position:absolute; left:0; top:50%; height:20px;margin-top:-10px; width:1px; border-left:1px solid rgba(255,255,255,0.3)} .m_search .fast .btn.detail:after {content:"\eb38"; font-family:'xeicon'; display:inline-block; vertical-align:top; margin-left:.2rem;font-size:1rem;} .btnClear { position: absolute; top:0; right:60px; width: 2rem;height: 2.85rem; display:none; outline:0; border:0; background:transparent; cursor:pointer; } .btnClear:before {content:"\e921";font-family:'xeicon'; color:#333; font-size:1rem; height: inherit; display:flex; justify-content: center;align-items: center;} /* 메뉴 바로가기 */ .m_menu {padding:0; } .m_menu ul {display:flex; flex-wrap: wrap; overflow:hidden; } .m_menu li {width:33.3%; text-align:center; border-left:1px solid #eceff6; border-bottom:1px solid #eceff6; padding:.5rem 0 1rem;} .m_menu li:nth-child(1), .m_menu li:nth-child(4) {border-left:0} .m_menu li .img {display:inline-block; width:65px; height:65px; border-radius:50%; background-repeat:no-repeat; background-size:auto 100%; background-position:center center; } .m_menu li p {font-size:1rem; font-weight:600; color:#333;text-align:center; } .m_menu li p img {display:inline-block; height:1rem;} .m_menu li:nth-child(1) .img {background-image:url('/images/icon_m01.png')} .m_menu li:nth-child(2) .img {background-image:url('/images/icon_m02.png')} .m_menu li:nth-child(3) .img {background-image:url('/images/icon_m03.png')} .m_menu li:nth-child(4) .img {background-image:url('/images/icon_m04.png')} .m_menu li:nth-child(5) .img {background-image:url('/images/icon_m05.png')} .m_menu li:nth-child(6) .img {background-image:url('/images/icon_m06.png')} .banner1 img{width:100%;} .banner2 {position:relative; padding:1.5rem 1.5rem; background:url('/images/main/banner_02.jpg') no-repeat center ; background-size:cover;display:flex; flex-direction: column; gap:1rem;} .banner2 dl { color:#fff; display:flex; flex-direction: column; width:100%; gap:.65rem; } .banner2 dl dt {font-size:1.75rem; line-height:1.3em; color:#fff; font-weight:700; } .banner2 dl dt p {font-size:1.1rem; line-height:1; font-weight:400; margin-top:.65rem; color:inherit; } .banner2 dl dt strong {display:inline-flex; align-items: center; padding:0 1.25rem; height:2rem; background-color:#fff; font-size:1rem; line-height:1; color:var(--color-main); font-weight:600; border-radius:5rem; } .banner2 dl dd {font-size:1.05rem; line-height:1.5em; font-weight:400; } .banner2 .img {width:100%; padding-top:.5rem;} .banner2 .img img {width:100%;} .view .car_list ul li.no_result { text-align:center; font-size:.9rem; color:#333; display:flex !important; margin:0 !important; justify-content: center;align-items: center; width:91% !important; height:100px; background-color:#f5f5f5;} /*자동차 리스트*/ .main .car_list{ clear:both; font-size:0; padding:0 0 0rem 0rem; } .main .car_list ul {position:relative; white-space:nowrap; overflow-x: auto; } .main .car_list li{position:relative;display:inline-block;vertical-align:top; width:50% !important; margin-bottom:10px; padding-bottom:10px;margin-left:15px !important; background-color:#fff; border-radius:8px;border:0px solid #eaeaea; overflow:hidden; } .main .car_list .photo {display:block; vertical-align:top;width:100%; height:120px; background-repeat:no-repeat; background-size:cover; background-color:#eee;vertical-align: middle;} .main .car_list .cont{display: block;position:relative; width:100%;padding:0 0px; vertical-align: middle;} .main .car_list .cont .carName {font-size:15px; margin:10px 0 8px; width:100%;letter-spacing:-.04em; line-height:20px;font-weight:bold; max-height:40px; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .main .car_list .cont .carName b {color:#333;} .main .car_list .cont span{color:#bcbcbc; padding:0 3px; } .main .car_list .cont .carinfor {display:block !important; width:95%; line-height:16px; color:#888; font-size:13px; line-height:1.2rem;white-space:normal !important; } .main .car_list .price{display:block;/* text-align:center; *//* background:#dadada; */color:#000;padding:1px; color:#666; letter-spacing:-.04em;} .main .car_list .price p {font-size:14px; line-height:1.4em; letter-spacing:-.04em;} .main .car_list .price em {font-size:13px; color:#777 !important; font-weight:400;} .main .car_list .price strong {font-size:16px; color:#000; font-weight:bold; } .main .car_list .price strong.sale {color:var(--color-red)} .main .car_list .price .row{margin:0; padding:2px 3px 0;display:flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: row;align-items: center; border:0px solid #eee;} .main .car_list .price .row span {width:auto; font-size:13px; line-height:1.3em; font-weight:600; color:#888;font-family: 'ScoreDream' !important; letter-spacing:-.1em; } .main .car_list .mon_pay {display:none;position:absolute; right:5px; bottom:3px;font-size:12px; color:#444; letter-spacing:-.07em} .main .car_list .mon_pay em {color:#f00} /*자동차 리스트*/ .view .car_list{ clear:both; font-size:0; padding:0 0 0rem 0rem; } .view .car_list ul {position:relative; white-space:nowrap; overflow-x: auto; } .view .car_list ul li{position:relative;display:inline-block;vertical-align:top; width:50% !important; margin-bottom:10px; padding-bottom:10px;margin-right:1rem !important; background-color:#fff; border-radius:8px;border:0px solid #eaeaea; overflow:hidden; } .view .car_list ul li:nth-child(1){margin-left:1rem !important;} .view .car_list .photo {display:block; vertical-align:top;width:100%; height:120px; background-repeat:no-repeat; background-size:cover; background-color:#eee;vertical-align: middle;} .view .car_list .cont{display: block;position:relative; width:100%;padding:0 0px; vertical-align: middle;} .view .car_list .cont .carName {font-size:15px; margin:10px 0 8px; width:100%;letter-spacing:-.04em; line-height:20px;font-weight:bold; max-height:40px; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .view .car_list .cont .carName b {color:#333;} .view .car_list .cont span{color:#bcbcbc; padding:0 3px; } .view .car_list .cont .carinfor {display:block !important; width:95%; line-height:16px; color:#888; font-size:13px; line-height:1.2rem;white-space:normal !important; } .view .car_list .price{display:block;/* text-align:center; *//* background:#dadada; */color:#000;padding:1px; color:#666; letter-spacing:-.04em;} .view .car_list .price p {font-size:14px; line-height:1.4em; letter-spacing:-.04em;} .view .car_list .price em {font-size:13px; color:#777 !important; font-weight:400;} .view .car_list .price strong {font-size:16px; color:#000; font-weight:bold; } .view .car_list .price strong.sale {color:var(--color-red)} .view .car_list .price .row{margin:0; padding:2px 3px 0;display:flex; justify-content: space-between; flex-wrap: nowrap; flex-direction: row;align-items: center; border:0px solid #eee;} .view .car_list .price .row span {width:auto; font-size:13px; line-height:1.3em; font-weight:600; color:#888;font-family: 'ScoreDream' !important; letter-spacing:-.1em; } .view .car_list .mon_pay {display:none;position:absolute; right:5px; bottom:3px;font-size:12px; color:#444; letter-spacing:-.07em} .view .car_list .mon_pay em {color:#f00} .mc_list .slick-list {overflow: visible;} .mc_list {margin-left: 0; margin-right: 0;padding: 0 10px;} .mc_list .slick-list {overflow: visible;} .mc_list li {margin:0 5px 10px; } /* 메인 추천차량 */ .carlist_wrap {clear:both;overflow:hidden;padding:0 .65rem 1rem;background:url('/images/main/bg_recom.jpg') no-repeat center ; background-size:cover; } .carlist_wrap .title_box {text-align: center;} .carlist_wrap .title_box h3, .carlist_wrap .title_box p {color:#fff;} .carlist_wrap h3 img {height:20px; display:inline-block; vertical-align:top; margin-top:5px; margin-right:2px;} .carlist_wrap .title_wrap .subtitle {color:#aaa; letter-spacing:-.02em; } .carlist_wrap .carlist li {height:auto; } .carlist_wrap li .year span {position:relative;display:inline-block; color:#fff; opacity:.9;font-weight:400; vertical-align:top; line-height:13px; font-size:.75rem;padding-right:.35rem; margin-right:.35rem; letter-spacing:-.02; } .carlist_wrap li .year span:after {content:'';position:absolute; right:0; top:50%;margin-top:-6px; width:1px; height:12px; background-color:rgba(255,255,255,0.3); } .carlist_wrap li .year span:last-child {margin-right:0; padding-right:0; border-right:0;} .carlist_wrap li .year span:last-child:after {display:none;} .carlist_wrap li .year span.brand { letter-spacing:-.06em;} .carlist_wrap .price_wrap {position:relative;padding-top:.5rem;margin-top:.5rem; border-top:1px solid rgba(255,255,255,0.2); display:flex; justify-content: space-between; flex-wrap: nowrap;flex-direction: column; } .carlist_wrap .price_wrap p {width:100%;} .carlist_wrap .price_wrap span {width:auto; font-size:.75rem; line-height:.95rem; font-weight:400; color:#FFFFFF; margin-right:.35rem;} .carlist_wrap .price_wrap span:last-child {margin-right:0;} .carlist_wrap .price_wrap .monthly { font-size:.75rem; font-weight:400; color:#FFFFFF; letter-spacing:-.06em; } .carlist_wrap .price_wrap .fee {color:var(--color-red) !important; letter-spacing:-.06em; } .carlist_wrap .price_wrap em { color:#FFFFFF; font-size:1rem; font-weight:bold; padding-left:3px;} .carlist {height:auto;overflow:hidden;} .carlist .bx-controls {position:relative;display:inline-block;width:100%;padding-bottom:10px;text-align:center;} .carlist .bx-controls .bx-pager {position:relative;display:inline-block;margin:0 auto; } .carlist .bx-controls .bx-pager-item{float:left; margin:0 3px;} .carlist .bx-controls .bx-pager-link {display: inline-block; width:10px; height:10px; background:rgba(255,255,255,0.3); border-radius:100%; font-size:0;} .carlist .bx-controls .active {background:#FFF;} .carlist .bx-controls-direction{display:none;} .carlist ul {position:relative; display:block; font-size:0;} .carlist li {position:relative;display:inline-block; vertical-align:top;padding:0 6px; } .carlist li a {display:block; } .carlist li .icon {position:absolute;z-index:2;} .carlist li a .img {width:100%;height:115px; display:block; position:relative; border-radius:.65rem; overflow:hidden; background-position:center center;background-size:cover;background-repeat:no-repeat;background-image:url(/images/nophoto/nophoto_115x85.gif);} .carlist li a .img:after {content:''; position:absolute; left:0px; top:0px; width:40px; height:40px; background:url('/images/main/ico_best.png') no-repeat 0 0; background-size:cover; z-index:100} .carlist li a .carName {overflow:hidden;padding:12px 3px 0;font-size:15px;letter-spacing:-.07em; font-weight:bold; color:#FFF; overflow:hidden; word-break:keep-all; white-space:nowrap; text-overflow:ellipsis;} .carlist li a .carName sup {display:none;} .carlist li a .year {display:block;padding:0 3px;font-size:12px; margin-top:5px; color:rgba(255,255,255,0.7); font-weight:500; word-break:keep-all;} .carlist li a .year span {display:inline-block; text-align:center; color:#ccc} .carlist li a .price { position:relative; font-size:1.1rem;line-height:20px; font-weight:500; padding:5px 3px 15px; color:#FFF;} .carlist li a .price span {font-size:15px; color:rgba(255,255,255,0.7)} .carlist li a .price span.nego {font-size:22px;} .carlist li a .price span.priceq {font-size:18px; color:#f00} .carlist li a .car_status {display:none;padding:10px 3px 20px; } .carlist li a .car_status span {display:inline-block; float:left; padding:3px 15px; border:1px solid #dedede; border-radius:30px; font-size:15px; color:#888; margin-left:7px; } .carlist li a .car_status span:first-child {margin:0; } .carlist li a .car_status span.func_record {color:#e61308; border:1px solid #ef2f25;} .carlist li a .car_status span.acc_free {color:#2397df; border:1px solid #2397df;} .btn_total {display:block;border:0; background:transparent;padding:0;font-size:14px; border-top:1px solid rgba(255,255,255,0.1); color:#FFF !important; line-height:40px;text-align:center;} /* 문자상담 */ .txtCounsel {width:100%;} .txtCounsel .column {width:100%; margin:0;background-color:#5ea7fa; padding:1.5rem 1.5rem 2rem; } .txtCounsel h2 {color:#fff; text-align:center} .txtCounsel ul {display:flex; flex-direction: column;} .txtCounsel .checkbox input[type=checkbox] + label { background:#e8eaf2;} .txtCounsel li{font-size:0;} .txtCounsel li .btn{color:#0050a7; display:inline-block; margin-left:5px; -moz- box-sizing: border-box; font-size:12.5px;} .txtCounsel input[type="text"]{border:0; border-bottom:1px solid rgba(255,255,255,0.5); background:transparent; color:#FFF; font-weight:700; font-size:1.125rem; height:3.5rem; width:100%;border-radius:0px; padding:0px .25rem; letter-spacing:0;} .txtCounsel input[type="text"]:focus {border:0 !important; border-bottom:1px solid #fff !important;outline: 0} .txtCounsel input[type="checkbox"]{width:15px; height:15px; margin-right:5px;} .txtCounsel input[type="checkbox"] + label {font-size:16px;} .txtCounsel input[type="checkbox"] + label:before, .txtCounsel input[type="checkbox"] + label:after {display:none;} .txtCounsel input[type="radio"] + label {font-size:16px; padding-left:32px;} .txtCounsel input[type="radio"] + label:before, .txtCounsel input[type="radio"] + label:after {display:none;} .txtCounsel span{width:18%; display:inline-block;letter-spacing:-1px;font-size:16px;} .txtCounsel label{margin-right:0px; cursor:pointer; color:#000;} .txtCounsel li+li+li+li+li+li{padding-top:5px; } .txtCounsel li+li+li+li+li+li label{margin-right:5px;} .txtCounsel .agree {padding-top:1rem; } .txtCounsel .agree span {width:auto;} .txtCounsel .agree input[type=checkbox] + label {font-size:.85rem; line-height:1.2rem; font-weight:normal; color:#fff; padding-top:0px; font-weight:400;} .txtCounsel .agree a {display:inline-block; vertical-align:middle; text-decoration:underline; color:#fff;} .txtCounsel .reservation_btn {padding-top:1rem; } .txtCounsel .reservation_btn button { display:block; width:100%; text-align:center; border:0; outline:0; background-color:var(--color-main); color:#FFF; font-size:1.1rem; line-height:3.5rem; height:3.5rem;font-weight:600;border-radius:.5rem; } .txtCounsel .reservation_btn button:hover { background-color:#000; color:#fff; } .txtCounsel input:-webkit-autofill { -webkit-text-fill-color: #fff; } .txtCounsel .tab_wrap {display:inline-block; width:auto; border: 1px solid rgba(255,255,255,0.5); margin-top:1rem; border-radius:5rem;} .txtCounsel input[type=radio] + label {display: inline-flex;justify-content: center; align-items: center;padding: 0 1.25rem;color: #fff; margin:0; height: 2.25rem; font-weight:500; font-size:1rem; background-image: none; background-color:transparent; box-sizing: border-box; letter-spacing:0;} .txtCounsel input[type=radio]:checked + label {background-image:none !important; background-color:#fff; color:#58a3f7; padding:0 1.8rem; margin-left:-1px; border-radius:5rem;} .txtCounsel input[type=checkbox] + label { display: inline-block; padding: 0 10px 0 1.5rem; min-height: 20px; background-image: url('/images/inc/bg_checkbox.png'); background-position:0 0; background-repeat: no-repeat; background-size:18px 18px; box-sizing: border-box; border: 0; color: #222; font-size: .85rem; line-height: 23px; } .txtCounsel input[type=checkbox]:checked + label { background-position:0 0;color:#fff; background-image: url('/images/inc/bg_checkbox_check_w.png?ver=241127'); } .txtCounsel input::placeholder {color:rgba(255,255,255,0.8); font-weight:500; font-size:1rem;} /* 서비스 */ .service {clear:both;position:relative; background:#eff4fd; padding:2.5rem 0; margin-top:3rem;} .service:after {content:''; clear:both; width:100%; display:block;} .service .title-wrap {text-align:center;margin:0} .service .title-wrap h3 span {color:var(--color-main); } .service .slick-dots {position:absolute; left:0; bottom:-25px; width:100%; font-size: 15px ;line-height: 1;text-align: center; display:none; } .service .slick-dots > li {display: inline-block;vertical-align: top;width:12px; height:12px; margin: 0 5px; font-size:0; background:rgba(255,255,255,0.3); border-radius: 20px;cursor: pointer;-webkit-transition: all 400ms;transition: all 400ms;} .service .slick-dots > li.slick-active {background: var(--color-main)} .service .slick-dots > li > button {text-indent:-9999px; overflow:hidden; background:transparent;font-size:0; color:transparent; cursor:pointer; } .service button {border:0; outline:0; font-size:0;} .service .slick-prev {position:absolute; left:-70px; top:50%; margin-top:-45px; font-size:0; width:50px; height:50px; line-height:50px; border-radius:50%; background-color:#fff; border:1px solid #d6e2e9; cursor:pointer; z-index:5555} .service .slick-prev:after {content: '\e93d';color:#333; font-size:20px; } .service .slick-next {position:absolute; right:-70px; top:50%;margin-top:-45px; font-size:0; width:50px; height:50px; line-height:50px; border-radius:50%; background-color:#fff; border:1px solid #d6e2e9; cursor:pointer; z-index:5555} .service .slick-next:after {content: '\e940'; color:#333;font-size:20px; } .service .slick-prev:hover:after, .service .slick-next:hover:after{opacity:1;} /* event-banner 이벤트*/ .main_item_wrap {position:relative;max-width:100%;margin:10px auto 0; padding:0 15px;} .main_item_slider_box{position:relative;} .main_item_slider {position:relative; border-radius:7px; } .main_item {width:100%; margin:0; padding:0 .5rem } .main_item figure {display:block; height:100px; border-radius:0.5rem; background-repeat:no-repeat; background-position:center center; background-size:cover;} .main_item:nth-child(1) figure {background-image:url('/images/main/service_01.jpg')} .main_item:nth-child(2) figure {background-image:url('/images/main/service_02.jpg')} .main_item:nth-child(3) figure {background-image:url('/images/main/service_03.jpg')} .main_item dl { letter-spacing:-.06em; padding-top:.65rem; text-align:center; } .main_item dl dt {font-size:16px; line-height:1.3em; color:#444; font-weight:bold; } .main_item dl dd {font-size:13px; line-height:1.3em; color:#777; font-weight:500; margin-top:.3rem; } /* banner */ .main_banner {height:200px; padding:0 1.25rem;background-repeat:no-repeat; background-size:cover; background-position:center ; } .main_banner.r1 { background-color:#e5effb; background-image:url('/images/main/sec1_01_mb.jpg')} .main_banner.r2 {margin-top:2.5rem; height:230px; background-image:url('/images/main/sec2_01.jpg')} .main_banner dl {height:100%; display:flex;flex-direction: column; justify-content: center; word-break:keep-all; } .main_banner dl dt {width:100%;font-size:1.2rem; line-height:1.7rem; font-weight:500; color:#111;letter-spacing:-.06em; } .main_banner dl dt strong {color:var(--color-main); font-weight:700; } .main_banner dl dd { font-size:.9rem; line-height:1.3rem; margin-top:1rem; color:#000; opacity:.7; letter-spacing:-.08em; } .main_banner.r2 dt, .main_banner.r2 dd { color:#fff; opacity:1;} .main_banner.r2 dt {font-weight:700;font-size:1.15rem; line-height:1.6rem; }