/*content-size*/ .container {margin:0 auto; width:100%; /*max-width:420px;*/ } .container100 {margin:0 auto; width:100%; padding:0 0 0 20px;} /*.conLeft {width:335px;} .conRight {width:840px;}*/ .content {} /***************header*************/ #header { width:100%; z-index:999; /*position:fixed;*/ top:0; background-color:#fff; /*box-shadow:3px 1px 10px rgba(0,0,0,0.1);*/ display:flex; flex-direction:column !important; } #header.scroll {position:fixed; top:0; left:0; box-shadow:3px 1px 10px rgba(0,0,0,0.1); /*left:50%; transform:translate(-50%,0);*/} #header .hmenuWrap { /*height:50px; */ } #header .hmenuWrap .hmenu { padding:0; width:100%; background-color:white; } #header .hmenuWrap .hmenu ul { max-width:420px; margin:0 auto;} #header .container {position:relative; display:flex; justify-content: space-between; align-items: center; padding:0 15px; max-width:100%; background:#fff; height:53px;} #header .logo {position:absolute; top:16px; left:50%; transform:translate(-50%,0); } #header .logo a {display:block; width: 150px;} #header .container .htop-tit { padding-left:20px; line-height:27px; width:100%; } #header .container .htop-tit h1 a {display:block; font-size:20px; font-weight:700; letter-spacing:-1px; text-align:center;} #header .container .mg-right {width:20px;} #header .hgnb {position:absolute; top:50%; left:5px; transform:translate(0, -50%);} #header .hmenu { width:100%; overflow:auto; padding:0 14px 0 18px; margin:0 /* auto; max-width:420px; */ } #header .hmenu ul {display:flex; gap:24px; justify-content:space-between; padding:0 15px; z-index:9;} #header .hmenu ul li a {position:relative; display:block; padding:5px 0 12px 0; font-size:16px; font-weight:500; color:#1a1a1a; letter-spacing:-0.7px;} #header .hmenu ul li:last-child a {margin-right:20px;} #header .hmenu ul li a.on {color:#3970DF; font-weight:700;} /*#header .hmenu ul li a.on:after {position:absolute; bottom:0; left:50%; transform:translate(-50%, 0); content:''; width:100%; height:2px; background:#3651E0; z-index:99;}*/ #header .hmenu::-webkit-scrollbar {display:none; width:0;} #header .hback { transform:rotate(90deg); width:20px; height:20px;} #header .hback button {background:none; border:none;} #header .burger-icon {cursor: pointer; display: inline-block; user-select: none; width: auto; margin: 0; position:absolute; top:50%; right:20px; transform:translate(0, -50%); } #header .burger-icon .burger-sticks {background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 20px; margin:-3px;} #header .burger-icon .burger-sticks:before, #header .burger-icon .burger-sticks:after { background: #333; content: ''; display: block; height: 100%; position: absolute; width: 100%; transition: all .2s ease-out;} #header .burger-icon .burger-sticks:before { top: 8px;} #header .burger-icon .burger-sticks:after {top: -8px;} #header .burger-check {display: none;} #header .burger-check:checked~.menu { display:block; max-width:100%; width:100%; transition: all .2s; z-index:99999;} #header .burger-check:checked~.burger-icon {left:inherit; right:22px !important; z-index:999999;} #header .burger-check:checked~.burger-icon .burger-sticks { background: transparent;} #header .burger-check:checked~.burger-icon .burger-sticks:before { transform: rotate(-45deg);} #header .burger-check:checked~.burger-icon .burger-sticks:after { transform: rotate(45deg);} #header .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before, #header .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after { top: 0;} #header .menu {display:none; position: fixed; margin-top: 53px; top:0; left: 0; height: 100%; max-width: 0; transition: 0.5s ease; z-index: 98; background-color: #fff;} #header .menu .gnb { border-top:1px solid #e6e6e6;} #header .menu .gnb li > a {position:relative; display:block; padding:20px 30px; font-size:16px; font-weight:600; letter-spacing:-0.5px; border-bottom:1px solid #e6e6e6; color:#333;} #header .menu .gnb li > a:after {content:url('/_img/hgnb_arrow.png'); position:absolute; right:25px; top:50%; transform: translate(0, -50%);} #header .menu .gnb li.more {position:relative; display:block; padding:20px 30px; font-size:16px; font-weight:600; letter-spacing:-0.5px; border-bottom:1px solid #e6e6e6; color:#333;} #header .menu .gnb li.more:after {content:url('/_img/hgnb_plus.png'); position:absolute; right:25px; top:50%; transform: translate(0, -50%);} #header .menu .gnb li.more.on:after {content:url('/_img/hgnb_line.png');} #header .menu .gnb .moreview {width:100%; display:none;} #header .menu .gnb .moreview li a {display:block; font-size:14px; padding: 15px 30px 15px 40px; background:#fafafa; border-bottom:1px solid #e6e6e6; font-weight:500; color:#333;} #header .menu .info li > a {position:relative; display:block; padding:22px 30px; font-size:16px; font-weight:600; letter-spacing:-1px; border-bottom:1px solid #e6e6e6;} #header .menu .info li > a .sm {font-size:14px; line-height:22px; font-weight:400; } #header .menu .bottom{display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 68px; left: 0; width: 100%; border-top: 1px solid #e6e6e6;} #header .menu .bottom li{width: 100%;} #header .menu .bottom li img{max-width: 20px; margin-right: 2px;} #header .menu .bottom li > a{display: block; position: relative; padding: 15px; font-size: 16px; font-weight: 600; letter-spacing: -1px; text-align: center; white-space: nowrap;} #header .menu .bottom li:nth-child(1) a{color: #3e2723;} #header .menu .bottom li:nth-child(2) a{color: #8e009e;} #header .menu .bottom li:nth-child(3) a{color: #32b44a;} #header .menu .bottom li:nth-child(2){border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6;} .msmsbtn {position:absolute; bottom:68px; width:100%; padding:12px 0; display: flex; justify-content: center; align-items: center; gap:10px; border-top:1px solid #e6e6e6;} .msmsbtn li a {display:block;} /* .msmsbtn li a img {height:34px;} */ .msmsbtn li a img { width: auto; height:40px; } /*검색*/ .h-flex {display:flex; align-items:center; gap:5px;} .search {position:relative; top:-1px; padding:11px 13px; background:#EBEBEC; border-radius:10px; max-width:190px;} .search .relative {display:flex; align-items:center; gap:5px;} .search input {background:#EBEBEC; width:100%; font-size:13px; color:#989898; letter-spacing:-1px; line-height:1.1;} .search .searchBtn img {width:13px;} .search img {width:13px;} .search-results { display: none; position: fixed; top: 0; left: 50%; transform:translate(-50%,0); width: 100%; max-width:630px; height:100vh; z-index:101; padding:15px 17px; border-radius:0; box-shadow:3px 3px 5px rgb(0 0 0 / 30%); background:#fff; } .search-results h3 {margin-bottom:14px; font-size:15px; font-weight:600; color:#363636;} .search-results a {display:inline-block;} .search-results .latest {margin-bottom:22px;} .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:48px; padding:10px 13px 9px 13px; font-size:12px; font-weight:500; color:#828282; border-radius:50px; box-shadow:2px 4px 4px rgb(0 0 0 / 15%); text-align:center;} .search-results .hot { } .search-results .hotTab { margin-bottom:22px; display:flex; align-items:center; gap:12px; } .search-results .hotTab input[type="radio"] {display:none; appearance:none;} .search-results .hotTab input[type="radio"] + label {display:block; min-width:48px; padding:10px 14px 9px 14px; font-size:14px; font-weight:500; color:#828282; border-radius:50px; box-shadow:2px 4px 4px rgb(0 0 0 / 15%); text-align:center; cursor:pointer;} .search-results .hotTab input[type="radio"]:checked + label {background:#3970DF; color:#fff;} .search-results .hot-content li {padding:9px 0; display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500; color:#363636; border-bottom:1px solid #f1f1f1;} .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:15px; color:#000;} .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;} .search-results .sr-top .in-serch button { position: absolute; top:50%; left:15px; transform:translate(0,-50%); } @media (min-width:640px) { .search-results .hot-content li {padding:9px 0; font-size:13px;} .search-results .sr-top {margin-bottom:30px; } } /*법인전용*/ #copConsult {padding:0 20px; margin:40px 0;} #copConsult .container {position:relative; padding:30px 25px; border-radius:20px; box-shadow:0 3px 10px rgb(0 0 0 / 15%); letter-spacing:-0.5px;} #copConsult .img {position:absolute; top:-13px; right:34px; width:144px; z-index:1;} #copConsult .tit {margin-bottom:18px;} #copConsult h3 {font-size:14px; color:#111111;} #copConsult h2 {margin:5px 0 10px 0; font-size:24px; font-weight:800; letter-spacing:-1.5px;} #copConsult p {font-size:13px; line-height:1.4; font-weight:500; color:#3A3A3A;} /*#copConsult p .fc-gg {color:#9a9a9a;}*/ #copConsult p .fc-pp {color:#3970DF;} #copConsult form ul {margin-bottom:15px;} #copConsult form li input {margin-bottom:8px; padding:14px 18px; width:100%; background:#F2F2F2; border-radius:10px; font-size:14px; letter-spacing:-0.5px;} #copConsult form li input:placeholder {color:#B0B0B2; } #copConsult .formAgree {margin:15px 0; gap:3px; letter-spacing:-0.5px;} #copConsult .formAgree a {margin-left:3px;} #copConsult .formAgree input {margin-top:1px;} #copConsult button { padding:20px 0; width:100%; font-size:16px; background:#3970DF; color:#fff; border-radius:10px; text-align:center; font-weight:bold; letter-spacing:-0.5px;} .carviewtop {position:fixed; top:0; left:50%; transform:translate(-50%,0); width:100%; background:#fff; z-index:999; box-shadow:3px 3px 3px rgba(0 0 0 / 5%); } .carviewtop .wrapbox {display:flex; align-items:center; justify-content:space-between; padding:15px 15px 15px 0; max-width:420px; margin:0 auto; } .carviewtop .viewtit {position:relative; display:flex; align-items:center; gap:20px; } .carviewtop .viewtit p {font-size:13px;} .carviewtop .viewtit p .price {font-size:16px; font-weight:bold; line-height:24px; } .carviewtop .viewtitbtn a { display:flex; flex-direction:column; text-align:center; color:#fff; padding:9px 7px 7px 7px; background:#3970DF; border-radius:3px; gap:4px; font-size:12px;} .carviewtop .viewtitbtn a img {margin:0 5px 0 auto; width:25px;} /* #header {position:fixed; padding:10px 10px 14px 10px; width:100%; background:#fff; box-shadow:3px 1px 10px rgba(0,0,0,0.1); z-index:99; top:0; height:70px;} #header .container h1.logo a {margin:5px auto; width:100px;} #header .container h1 a {margin:5px auto; text-align:center; font-size:20px; font-weight:bold; line-height:38px;} .hgnb .hback {position:fixed; top:26px; left:10px; z-index:99999; transform:rotate(90deg); width:20px; height:20px;} .hgnb .hback button {background:none; border:none;} .hgnb .menu {display:none; position: fixed; top: 0; left: 0; height: 100%; max-width: 0; transition: 0.5s ease; z-index: 98; background-color: #fff;} .hgnb .menu .gnb {margin-top:70px; border-top:1px solid #e6e6e6;} .hgnb .menu .gnb li > a {position:relative; display:block; padding:20px 30px; font-size:16px; font-weight:600; letter-spacing:-0.5px; border-bottom:1px solid #e6e6e6; color:#333;} .hgnb .menu .gnb li > a:after {content:url('/_img/hgnb_arrow.png'); position:absolute; right:25px; top:50%; transform: translate(0, -50%);} .hgnb .menu .gnb li.more {position:relative; display:block; padding:20px 30px; font-size:16px; font-weight:600; letter-spacing:-0.5px; border-bottom:1px solid #e6e6e6; color:#333;} .hgnb .menu .gnb li.more:after {content:url('/_img/hgnb_plus.png'); position:absolute; right:25px; top:50%; transform: translate(0, -50%);} .hgnb .menu .gnb li.more.on:after {content:url('/_img/hgnb_line.png');} .hgnb .menu .gnb .moreview {width:100%; display:none;} .hgnb .menu .gnb .moreview li a {display:block; font-size:14px; padding: 15px 30px 15px 40px; background:#fafafa; border-bottom:1px solid #e6e6e6; font-weight:500; color:#333;} .hgnb .burger-icon {cursor: pointer; display: inline-block; position:fixed; z-index: 999; padding:10px 0; top: 22px; right: 18px; user-select: none; width: auto; margin: 0;} .hgnb .menu .info li > a {position:relative; display:block; padding:22px 30px; font-size:16px; font-weight:600; letter-spacing:-1px; border-bottom:1px solid #e6e6e6;} .hgnb .menu .info li > a .sm {font-size:14px; line-height:22px; font-weight:400; } .hgnb .burger-icon .burger-sticks {background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 20px;} .hgnb .burger-icon .burger-sticks:before, .hgnb .burger-icon .burger-sticks:after { background: #333; content: ''; display: block; height: 100%; position: absolute; width: 100%; transition: all .2s ease-out;} .hgnb .burger-icon .burger-sticks:before { top: 7px;} .hgnb .burger-icon .burger-sticks:after {top: -7px;} .hgnb .burger-check {display: none;} .hgnb .burger-check:checked~.menu { display:block; max-width:100%; width:100%; transition: all .2s; z-index:99999;} .hgnb .burger-check:checked~.burger-icon {left:inherit; right:18px !important; z-index:999999;} .hgnb .burger-check:checked~.burger-icon .burger-sticks { background: transparent;} .hgnb .burger-check:checked~.burger-icon .burger-sticks:before { transform: rotate(-45deg);} .hgnb .burger-check:checked~.burger-icon .burger-sticks:after { transform: rotate(45deg);} .hgnb .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before, .hgnb .burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after { top: 0;} .viewtit {position:relative; padding:0 15px;} .viewtit p {font-size:13px;} .viewtit p .price {font-size:16px; font-weight:bold; line-height:24px; } .viewtit .viewtitbtn a { position:absolute; top:3px; right:-13px; display:block; padding:8px 5px 8px 10px; background:#3970DF; border-radius:3px; z-index:999; } */ /***************main*************/ .max420 {max-width:420px; margin:0 auto; } /*visual*/ #mvisual {margin:5px auto 15px auto; padding:0 20px; } .visualSwiper {position:relative !important; border-radius:15px; overflow:hidden; z-index:9; } .visualSwiper .swiper-slide { /* padding-top:110px;*/} /*.visualSwiper .swiper-slide .container {display:flex; flex-wrap:wrap; padding:0 10px 10px 10px;}*/ .visualSwiper .swiper-slide .container {display:flex; flex-wrap:wrap; margin:0 auto; width:100%; justify-content:center;} .visualSwiper .visualcon {margin:40px 0 10px 0; color:#1a1a1a;} .visualSwiper .visualcon h5 {font-size:18px; font-weight:600;} .visualSwiper .visualcon h2 {margin:10px 0 20px 0; font-size:32px; letter-spacing:-1px; line-height:45px;} .visualSwiper .visualcon p {font-size:16px;} .visualSwiper .visualswiper-pagination { /*position:absolute; bottom:5px !important; z-index:999; */ text-align:center; padding-top: 10px; } .visualSwiper .visualswiper-pagination span {width:8px; height:8px; background:#d1d1d1; opacity:1 !important;} .visualSwiper .visualswiper-pagination span.swiper-pagination-bullet-active {background:#4d4d4d;} /*mForm*/ #mForm {padding:0 20px; } #mForm .tit {margin-bottom:9px; font-size:20px; font-weight:700; letter-spacing:-0.5px; } #mForm .borderBox {padding:10px 17px 17px 17px; border:1px solid #E9EBEE; border-radius:9px; box-shadow:2px 2px 4px rgba(0 0 0 / 7%); } #mForm .borderBox li {display:flex; align-items:center; gap:15px; padding:12px; border-bottom:1px solid #DBDBDB; font-size:16px; } #mForm .borderBox li label {color:#000; font-weight:600; width:60px; } #mForm .borderBox li input:placeholder {color:#A1A1A1;} #mForm .carAgree {margin:10px 0; padding:0 12px;} #mForm .btn {text-align:center; margin-top:15px; } #mForm .btn button {display:inline-block; padding:12px 0; width:170px; text-align:center; border-radius:5px; font-size:15px; line-height:15px; font-weight:700; color:#fff; background:linear-gradient(180deg, #3970DF, #2D59B7);} .carAgree {display:flex; align-items:center; gap:5px; font-size:14px; letter-spacing:-0.5px;} .carAgree input {display:none; appearance:none;} .carAgree input + label {position:relative; display:block; cursor:pointer; padding-left:25px;} .carAgree input + label:before {position:absolute; content:''; top:49%; left:0; transform:translate(0,-50%); width:18px; height:18px; border-radius:3px; background:url('/_img/ico_check.png') no-repeat #d5deee; background-size:cover;} .carAgree input:checked + label:before {position:absolute; content:''; top:49%; left:0; transform:translate(0,-50%); width:18px; height:18px; border-radius:3px; background:url('/_img/ico_check.png') no-repeat #3970DF; background-size:cover;} /*mmbn*/ #mmbn {margin:20px auto; padding:0 20px; } #mmbn .container {display:flex; align-items:center; flex-direction:column; gap: 6px; } #mmbn .container a {display:block; border-radius:7px; overflow:hidden;} /*mmBest*/ #mmBest {padding:0 20px; margin:35px 0; } #mmBest .bestWarp {position:relative; display:flex; padding:22px 0 0 17px; justify-content:space-between; background:#CDE4FE; border-radius:10px; overflow:hidden; } #mmBest .bestWarp.importcar {display:none; background:#aecdf0;} #mmBest .bestWarp .tit {width:160px;} #mmBest .bestWarp .tit h2 {margin:5px 0 15px 0; font-size:23px; line-height:1.2; font-weight:800; letter-spacing:-1px;} #mmBest .bestWarp .tit a {display:flex; align-items:center; gap:3px; font-size:14px; color:#4D4D4D; font-weight:500;} #mmBest .bestWarp .tit a span {font-size:18px;} #mmBest .bestWarp .swiper {width:50%; margin:0;} #mmBest .bestWarp .swiper .text-con {display:flex; align-items:center; justify-content:center; gap:5px;} #mmBest .bestWarp .swiper .text-con .num {font-size:44px; font-weight:600; color:#747474; text-align:center; letter-spacing:-2px; } #mmBest .bestWarp .swiper .text-con .text {text-align:center;} #mmBest .bestWarp .swiper .text-con h4 {margin:0 auto 2px auto; font-size:13px; width:105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #mmBest .bestWarp .swiper .text-con .price {font-size:11px; display:flex; align-items:center; gap:1px; justify-content:center; font-weight:500;} #mmBest .bestWarp .swiper .text-con .price .big {font-size:16px; font-weight:700;} #mmBest .bestWarp .swiper .img {position:relative; width:100%; height:96px; overflow:hidden;} #mmBest .bestWarp .swiper .img img {position:absolute; bottom:-8px; right:-30%; width:220px; } /* fastConsult */ #fastConsult { width: 100%; margin: 15px auto; padding: 0 20px; } #fastConsult a{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 15px 18px 25px; border-radius: 5px; background: #e5f1ff;} #fastConsult p{color: #222; font-size: 17px; font-weight:700;} #fastConsult .icon{display: inline-block; max-width: 19px; margin:-1px 3px 0 3px;} #fastConsult .arrow{width: 10px; height: 10px;} @property --rotate { syntax: ""; initial-value: 132deg; inherits: false; } @keyframes spin { 0% { --rotate: 0deg; } 100% { --rotate: 360deg; } } .focusCard { padding: 3px; position: relative; border-radius: 6px; justify-content: center; align-items: center; text-align: center; display: flex; font-size: 1.5em; color: rgb(88 199 250 / 0%); cursor: pointer; } .focusCard::before { width: 100%; height: 100%; content: ""; position: absolute; z-index: -1; border-radius: 8px; /*background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);*/ background-image: linear-gradient(var(--rotate), #02ffff, #41878b 43%, #c612ff); animation: spin 2.5s linear infinite; } .focusCard::after { width: 100%; height: 100%; content: ""; position: absolute; left: 0; right: 0; z-index: -1; margin: 0 auto; transform: scale(0.9); filter: blur(10px); /*background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);*/ background-image: linear-gradient(var(--rotate), #02ffff, #41878b 43%, #c612ff); opacity: 1; transition: opacity .5s; animation: spin 2.5s linear infinite; } /* mbn */ #mbn{padding: 0 20px;} #mbn .mbnwrap {display: flex; justify-content: space-between; border-radius: 20px; background: #3970DF;} #mbn .mbncon{width: 100%; padding: 25px 0;} #mbn .mbncon a{display: block; width: 100%; padding: 0 25px; color:#fff;} #mbn .mbncon.fast a{border-right: 1px solid #3967f1;} #mbn .mbncon a h2 {font-size: 20px; line-height: 28px; letter-spacing: -1px;} #mbn .mbncon a p {padding: 15px 0 30px 0; font-size: 14px; line-height: 20px;} #mbn .mbncon.fast a {background:url('/_img/bn_1.png') no-repeat 100% 125%; background-size: 100px;} #mbn .mbncon.counsel a {background:url('/_img/bn_3.png') no-repeat 95% 100%; background-size: 80px;} /*estimate*/ #mEstimate {position:relative;/* height:100px; */ z-index:9; top:-30px;} #mEstimate .container {/*position:absolute; top:-45px; left:50%;transform: translate(-50%, 0); */ padding:18px; box-shadow:5px 3px 10px #e6e6e6; background:#fff; border:1px solid #d1d1d1; border-radius:5px; z-index:9;} #mEstimate h3 {font-size:18px; text-align:center; font-weight:400; cursor:pointer; line-height:26px;} #mEstimate h3 .bold {font-weight:600;} #mEstimate h3 .bg-s {padding:3px 12px 5px 12px; font-weight:600; font-size:14px; border-radius:500px; line-height:25px;} #mEstimate .mEstimateview {display:none;} #mEstimate .estimate-con {display:flex; flex-wrap:wrap; flex-direction:column; gap:15px; padding-top:20px;} #mEstimate .estimate-con .select {position:relative; display:flex; gap:5px; border-bottom:1px solid #d1d1d1; padding:5px 15px; justify-content:center; text-align:center;} #mEstimate .estimate-con .select.last {border:none;} #mEstimate .estimate-con .select .ft-gb {position:absolute; top:2px; left:15px; font-size:20px; color:#d1d1d1;} #mEstimate .estimate-con .select select {padding:8px; margin-top:-10px; width:100%; font-size:16px; font-weight:600; color:#1a1a1a; background:url('/_img/select_arrow.png') no-repeat center right; text-align-last: center; text-align: center; -ms-text-align-last: center; -moz-text-align-last: center;} #mEstimate .estimate-con .select select#manufact option {padding:5px;} #mEstimate .estimate-con button {padding:13px 45px; background:#4d4d4d; color:#fff; border-radius:5px; font-size:18px; font-weight:600; } #mEstimate .estimate-con button:hover {background:#2e2e2e; transition: all ease 1s; } /*mConsult*/ #mConsult .ns {padding: 0 0 0 3px; font-size:21px; color:#3970DF;} #mConsult .consultview {padding:30px 140px; color:#fff; border-radius:5px; text-align:center; box-shadow:5px 3px 10px #e6e6e6; } #mConsult .consultview h2 {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 .agree {margin-top:15px; display:flex; gap:5px; letter-spacing:0.5px; color:#1a1a1a; font-weight:400;} #mConsult .consultview .agree a {font-weight:bold; color:#fff;} #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:0; width:17px; height:17px; text-align:center; background:#fff; box-sizing:border-box; } #mConsult .agree input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:3px; left: 4px; width:6px; height:6px; border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #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;} #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 {background:url('/_img/weektit_bg.png') no-repeat center; background-size:cover; padding:30px 0; overflow:hidden;} #mWeeks .container {display:flex; flex-direction:column; gap:15px; } #mWeeks .weektit h2 {font-size:32px; letter-spacing:-1.5px; color:#00a7ca; font-weight:300; line-height:32px;} #mWeeks .weektit p {margin-bottom:10px; font-size:15px; color:#aab0b0; letter-spacing:-0.5px;} #mWeeks .weekflex {display:flex; justify-content:space-between; padding-right:15px;} #mWeeks .weekflex .week-btn a {display:block; margin-top:2px; font-size:14px; font-weight:500; color:#222;} #mWeeks .wswiper {position:relative; } #mWeeks .wswiper .swiper-slide {width:210px !important;} #mWeeks .wswiper .swiper-wrapper {} #mWeeks .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%; display:none;} #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');} /*인기 최저가*/ #mBest {padding: 0 0 0 20px;} #mBest .tit {margin-bottom:25px;} #mBest .tit h2 {font-size:24px;} #mBest .container {position:relative;} #mBest ul {position:absolute; top:0; right:20px; display:flex; gap:5px; z-index:9;} #mBest ul li a {display:block; padding:12px 20px; font-size:15px; letter-spacing:-0.5px; border:1px solid #e3e3e3; border-radius:50px; font-weight:400;} #mBest ul li.active a { background:#3970DF; border:1px solid #3970DF; color:#fff;} #mBest .swiper {/*height:290px;*/} #mBest .swiper .swiper-wrapper {} #mBest .ab-standard {position:absolute; top:0; right:0; font-size:12px; color:#8c8c8c; font-weight:500;} #mBest .besttit h2 {padding-bottom:10px; font-size:30px; line-height:38px; letter-spacing:-3px; color:#4b4b4b; font-weight:300;} #mBest .besttit h5 {margin-bottom:10px; font-size:15px; color:#aab0b0; letter-spacing:-0.5px;} #mBest .best-wrap {display:flex; justify-content:space-between; flex-direction: column;} #mBest .bswiper {position:relative; } #mBest a.bestbtn {font-size:15px; line-height:15px; font-weight:500;} #mBest .bswiper h3 {margin-bottom:15px; font-size:24px; font-weight:bold; color:#1a1a1a;} #mBest .swiper-slide {display:flex; flex-direction:column; gap:10px;} #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 { bottom: 20px !important; } #mBest .swiper-pagination-bullet { background: #222 !important; opacity:1; width:6px; height:6px;} #mBest .swiper-pagination-bullet-active { background: transparent !important; border:1px solid #222; box-sizing:content-box; margin-top:-1px;} @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 {display:flex; justify-content:space-between; align-items:center; padding:20px 45px; border-radius:5px;} #mWhy .whywrap .whycon a:hover {filter: contrast(110%); transition:all 1s;} #mWhy .whywrap .whycon a h3 {font-size:22px; line-height:32px; font-weight:500; letter-spacing:-1px;} #mWhy .whywrap .whycon.bg-1 a {background:#8bd9e9;} #mWhy .whywrap .whycon.bg-2 a {background:#dbf9ff;} /*단독할인차량*/ #main .bntit { margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; padding:0 20px; font-size:26px; font-weight:bold; } #main .bntit h2 { font-size:20px; font-weight:bold; letter-spacing:-0.5px;} #main .bntit a {font-size:15px; color:#222; font-weight:400; letter-spacing:-1px; opacity:0.8; display:flex; align-items:center;} #main .bntit a:hover {opacity:1; } #main .bntit a span {margin:2px 0 0 5px; display:block; width:14px;} #main .bntit .nationBtnWrap ul { display: flex; font-size:16px; gap:10px; } #main .bntit .nationBtnWrap ul li input { appearance: none; } #main .bntit .nationBtnWrap ul li input[type="radio"]:checked + label { color: #0866f6; } #mExclusive {padding:30px 20px;} #mExclusive .tit{margin-bottom:10px;} #mExclusive .tit h2 {position: relative; display: flex; align-items:center; gap:1px; font-size: 20px; font-weight: 800; color:#1A1A1A;} #mExclusive .tit h2 .bold {display:flex; align-items:center; } #mExclusive .tit h2 .img {position: absolute; top: 3px; right: -23px; max-width: 24px;} /*mYoutube*/ .embed-youtube {position: relative; width: 100%; height: 0; padding-bottom: 56.25%;} .embed-youtube iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #mYoutube {margin:40px auto 70px auto; padding:0 20px;} #mYoutube .container {position:relative; } #mYoutube .tit {margin-bottom:13px; font-size:20px; font-weight:700; letter-spacing:-0.5px; color:#1a1a1a;} #mYoutube .myList {} #mYoutube .myList h3 {margin:11px 0; font-size:15px; font-weight:600; letter-spacing:-0.5px; line-height:1.4; height:42px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #mYoutube .myList .tag {display:flex; align-items:center; gap:6px; flex-wrap:wrap;} #mYoutube .myList .tag span {display:inline-block; padding:7px 11px; font-size:11px; font-weight:500; border-radius:4px; border:1px solid #D1D1D1;} .carList3 .swiper-pagination-clickable .swiper-pagination-bullet {background:#000;} #mYoutube .swiper-pagination {bottom:-30px;} #mYoutube .swiper-pagination .swiper-pagination-bullet-active {background:#1a1a1a;} #fEvent {padding:0 20px;} #fEvent .container {display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center; gap:7px;} #fEvent .container a {display:block; width:48.8%; border-radius:6px; overflow:hidden;} #fEvent .container a.wide {width:100%;} /*제조사별*/ #mCompany {margin:30px 0; padding:30px 0; background:#EFF0F5;} #mCompany .container100 {position:relative; padding:0;} #mCompany .container100 .horizontal {position:absolute; display:flex; align-items:center; top:5px; right:7px; z-index:9;} #mCompany .container100 .horizontal li a {padding:0 10px; font-size:16px; font-weight:bold;} #mCompany .container100 .horizontal li.active a {color:#3970DF;} #mCompany .container100 .horizontal li:first-child:after {content:'|'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:14px; line-height:16px; font-weight:bold;} #mCompany .cswiper .swiper {margin:20px 0 30px -10px; padding:0 20px; /*overflow:initial;*/} #mCompany .cswiper .swiper-slide {width:45px; } #mCompany .cswiper .swiper .swiper-wrapper { /* gap:30px; flex-wrap:wrap; */ } #mCompany .cswiper .list a ,#mCompany .cswiper label.list {display:flex; flex-direction:column; align-items:center; gap:7px; font-size:11px; color:#484848; font-weight:500; cursor:pointer; margin:0 12px; white-space: nowrap;} #mCompany .cswiper .list a .img ,#mCompany .cswiper label.list .img {display:flex; align-items:center; justify-content:center; width:50px; height:50px; background:#fff; border-radius:100%; text-align:center; box-shadow:rgba(0 0 0 / 5%);} #mCompany .cswiper .list a .img img ,#mCompany .cswiper label.list .img img {width:70%;} #mCompany .cswiper .list a:hover .img ,#mCompany .cswiper label.list:hover .img {background:#f1f1f1; transition:all 0.5s;/*animation: turn-around 1s linear;*/} #mCompany .cswiper .list a.on .img ,#mCompany .cswiper label.list.active .img ,#mCompany .cswiper input[type="radio"]:checked + label.list .img {background:#333333; } #mCompany .cswiper .list a.on .img img ,#mCompany .cswiper label.list.active .img img ,#mCompany .cswiper input[type="radio"]:checked + label.list .img img { filter:grayscale(1) brightness(1000);} #mCompany .cswiper { /*width:100%; position:relative;*/ } #mCompany .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%; display:none;} #mCompany .arrow .swiper-button-next {right:-35px; color:transparent;} #mCompany .arrow .swiper-button-prev {left:-35px; 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 .swiper-slide {width:33.33%; text-align:center; } #mCompany .comcon .list-wrap .swiper-slide h3 {font-size:13px; margin-top:10px;} #mCompany .comcon .list-wrap .swiper-slide.center .img {transform: scale(1.3);} #mCompany .comcon .list-wrap .swiper-slide.center h3 {font-size:16px; margin-top:15px; white-space:nowrap;} @keyframes turn-around { 0% {transform: scaleX(1);} 25% {transform: scaleX(0);} 50% { transform: scaleX(1); } 75% {transform: scaleX(0);} 100% {transform: scaleX(1) } } /*가격대별*/ #mPrice {margin:30px 0; padding:30px 0; background:#EFF0F5;} #mPrice .tabs ul ,#mPrice .tabs .horizontal {margin:10px 0 30px 0; padding:0 20px; display:flex; gap:5px; justify-content:space-between;/*overflow-x:scroll;*/} #mPrice .tabs .horizontal::-webkit-scrollbar { height:4px;} #mPrice .tabs .horizontal::-webkit-scrollbar-track {background:#f4f4f4;} #mPrice .tabs .horizontal::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 10px;} #mPrice .tabs .horizontal input[type="radio"] { display:none; } #mPrice .tabs ul li a ,#mPrice .tabs .horizontal label {display:block; padding:10px 16px; font-size:12px; line-height:13px; font-weight:bold; border-radius:500px; background:#fff; box-sizing:border-box; border:1px solid #E6E6E6; color:#333; white-space:nowrap;} #mPrice .tabs ul li.active a ,#mPrice .tabs .horizontal input[type="radio"]:checked + label {background:#333333; color:#fff; border:1px solid #333;} #mPrice .pswiper .swiper-slide { width:150px; } #mPrice .ppinfo {margin-top:25px; background:#f2f4f9; padding:10px; border-radius:5px; width:95%; max-width:360px; } /* faq */ #faq{width: 100%; margin: 40px auto 0 auto; padding: 40px 25px 25px 25px; background: #f4f6fd;} #faq .tit{display:flex; justify-content: space-between; align-items:end;} #faq .tit h2{font-size: 28px; font-weight: 800;} #faq .tit a {font-size:15px; margin-bottom:10px;} #faq .faqList .swiper-slide{display: flex; flex-direction: column; gap: 8px; padding: 20px 0 40px 0;} #faq .faqList .que{position: relative; padding: 20px; border-radius: 15px; background: #fff; font-size: 15px; cursor: pointer;} #faq .faqList .que > span {padding-left:25px; display:flex; align-items:center; justify-content:space-between;} #faq .faqList .que::before{position:absolute; top:50%; left:20px; transform:translate(0,-50%); content: 'Q.'; margin-right: 4px; font-size: 15px; font-weight: bold; color: #3970DF;} #faq .faqList .que.on>span{color: #3970DF; font-weight: bold;} #faq .faqList .anw{display: none; overflow: hidden; padding: 25px; background-color: #fbfbfb; font-size: 15px; border-radius:20px;} #faq .faqList .anw::before{display: inline-block; content: 'A.'; margin-right: 4px; color: #666; font-size: 15px; font-weight: bold;} #faq .faqList .que .arrow {} #faq .faqList .que.on .arrow{transform: rotate(180deg); transition: all 0.5s;} #faq .swiper-pagination-bullets {bottom: 0;} #faq .swiper-pagination-bullet {width: 7px; height: 7px; margin: 0 3px; border-radius: 100%; background:#cdcdcd; opacity: 1;} #faq .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #000;} /* review */ #review{margin: 40px 0 30px 0;} #review .tit {margin-bottom:12px; padding:0 20px; display:flex; align-items:center; justify-content:space-between;} #review .tit h2 {font-size:20px; font-weight:700; letter-spacing:-0.5px;} #review .tit a {font-size:13px; font-weight:500;} #review .swiper {padding:0 20px;} .reviewSwiper{padding: 0 0 40px 30px;} .reviewSwiper .txt span{margin-bottom:15px; display: inline-block; padding: 5px 10px; border-radius: 5px; border: 1px solid #D2D6D9; background: #f9f9f9; color: #666; font-size: 13px;} .reviewSwiper .swiper-slide a{position: relative; display:block; width: 100%; overflow: hidden;} .bMark{position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 30px; border-radius: 5px; background: #3970DF; color: #fff; font-size: 14px; font-weight: 600; text-align: center;} .reviewSwiper .thumbImg{display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; height: 170px; object-fit: cover; border-radius:10px; overflow:hidden;} .reviewSwiper .thumbImg img{width: 100%; height: 100%; object-fit: cover;} .reviewSwiper .txt{padding: 15px 10px; background: #fff; color:#1A1A1A;} .reviewSwiper .txt h3{font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .reviewSwiper .txt p{width: 100%; margin:10px 0; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; height:50px; font-weight:400;} .reviewSwiper .user {display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#8C8C8C; } .reviewSwiper .info {display:flex; align-items:center; justify-content:space-between;} .reviewSwiper .info .user {font-size:12px; font-weight:500; color:#7E7E7E; letter-spacing:-0.5px;} .reviewSwiper .info .star {display:flex; align-items:center; gap:3px;} .reviewSwiper .info .star li {width:15px;} .reviewSwiper .info .star li.on img {filter:none;} .reviewSwiper .info .star li img {filter:grayscale(1);} .markWrap{display: flex; align-items: center; gap: 4px; width: 100%;} .markWrap span{display: block; width: 72px; padding: 8px 10px; border-radius: 8px; text-align: center; color: #fff; font-size: 13px; line-height: 13px; white-space: nowrap;} .markWrap span.saleMark{background: #3970DF;} .markWrap span.fastMark{background: #2c1ef2;} .markWrap span.popularMark{background: #223359;} .ppinfo {margin:10px 0 15px; font-size:14px; line-height:19px; color:#686868; font-weight:400;} /*carList - 1*/ .carList1 .list {background:#fff; border-radius:10px; box-sizing:border-box; overflow:hidden;} .carList1 .list .img {position:relative; width:100%; padding:50px 25px 25px 25px; height:161px; display:flex; justify-content:center; align-items:center;} .carList1 .list a:hover .img .carimg {transform: scale(1.1); transition: all 1s;} .carList1 .list a:hover .text {opacity:0.6; transition: all 1s} .carList1 .list .img .inven {position:absolute; top:13px; right:8px; padding:10px 12px 8px 12px; border:1px solid #cecece; color:#8c8c8c; border-radius:500px; font-size:13px;} .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: 100px solid #3970DF; border-right: 100px solid transparent; } .carList1 .list .img .only span {position:absolute; top:-85px; left:10px; color:#fff; font-size:13px; font-weight:600; line-height:16px;} .carList1 .list .text {padding:0 15px;} .carList1 .list h3 {margin-bottom:5px; font-size:20px; font-weight:600; letter-spacing:-0.5px;} .carList1 .list p {font-size:14px; line-height:19px; height:34px;} .carList1 .list p.price {margin:15px 0 0 0; } .carList1 .list p.price .fs-big {font-size:140%;} .carList1 .list .btn {display:flex; justify-content:space-between; gap:5px; padding:0 15px 15px 15px;} .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.bt1 {background:#3970DF; color:#fff;} .carList1 .list .btn a.bt2 {border:1px solid #d1d1d1;} .carList1 .list .btn a:hover {filter:opacity(0.7); transition:all 0.5s;} /* 보라색 하단 버튼 스타일 .carList1 .list .btn {display:flex; justify-content:space-between; gap:1px;} .carList1 .list .btn a {display:block; padding:12px 0; width:100%; background:#7623fe; color:#fff; text-align:center;} .carList1 .list .btn a:hover {background:#6311eb; transition: all 1s;} */ /*carList - 2*/ .carList2 .list {display:flex; } .carList2 .list a .bestwrap {display:flex; align-items:center; gap:15px;} .carList2 .list a {display:flex; align-items:center; justify-content:space-between; width:100%; padding: 10px 20px 10px 10px; border:1px solid #eee; background:#fbfbfb; border-radius:15px;} .carList2 .list a:hover {opacity:0.5; transition: all ease 0.5s; } .carList2 .list a .img {width:50px; height:50px; display:flex; align-items:center; background:#fff; border:1px solid #eee; border-radius:10px;} .carList2 .list a .img img {width:100%;} .carList2 .list a .text-con {display:flex; gap:10px; align-items:flex-start;} .carList2 .list a .text-con .num {font-size:17px; font-weight:bold; color:#000;} .carList2 .list a .text-con .text h4 {margin-bottom:3px; font-size:16px; font-weight:bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList2 .list a .text-con .text h4 p {font-size:14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .carList2 .list a .text-con .text .price {font-size:16px; line-height:20px;} .carList2 .list a .text-con .text .price .big {font-size:20px; font-weight:bold; letter-spacing:-1px;} .carList2 ::-webkit-scrollbar { width: 10px;} .carList2 ::-webkit-scrollbar-track {background:#a4a4a4; border-radius: 10px;} .carList2 ::-webkit-scrollbar-thumb {background: #fff; border-radius: 10px;} /*carList - 3*/ .carList3 .list {} .carList3 .list .ico-pm {position:absolute; top:10px; left:10px; width:70px;} .carList3 .list .ico-pm img {width:100%;} /* .carList3 .list a {display:flex; flex-direction:column; align-items:center; } .carList3 .list a .img {padding:20px 0; width:100%; height:155px; display:flex; align-items:center; background:#f7f7f7; border-radius:10px; } .carList3 .list a .img img {width:100%;} .carList3 .list a:hover .img img {transform: scale(1.1); transition:all 1s;} .carList3 .list a .text {padding:10px 0; text-align:center;} .carList3 .list a h3 {font-size:20px; font-weight:bold; letter-spacing:-0.5px;} .carList3 .list a p {font-size:13px; margin:5px 0 10px 0; letter-spacing:-1px; opacity:0.8; height:15px; overflow:hidden;} .carList3 .list a .price {margin-top:5px; font-size:22px; font-weight:bold; } .carList3 .list button {padding:10px 15px; background:#3970DF; color:#fff; font-size:15px; font-weight:bold; border-radius:5px;} */ .carList3 .exswiper {position:relative; margin-right:-20px; margin-left:-20px;} .carList3 .exswiper .swiper-pagination {bottom:-30px !important;} .carList3 .swiper-pagination-clickable .swiper-pagination-bullet {background:#000;} .carList3 .list {padding:10px 20px;} .carList3 .list a {position:relative; display:block; padding:12px; border-radius:10px; box-shadow:0 3px 10px rgb(0 0 0 / 15%); border:1px solid #D1D1D1;} .carList3 .list a .onlyMark{position: absolute; top: -11px; right: 20px; max-width: 100px;} .carList3 .list a .ab {position:absolute; top:15px; left:15px; display:flex; align-items:center; gap:6px; z-index:9;} .carList3 .list a .per {position:absolute; top:15px; right:15px; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:100%; background:#F94F4F; color:#fff; font-size:16px; font-weight:700; letter-spacing:-0.5px;} .carList3 .list a .abbn {display:inline-block; padding:5px 8px; border-radius:50px; font-size:12px; font-weight:500; letter-spacing:-0.5px;} .carList3 .list a .abbn.ins {background:#3970DF; color:#fff;} .carList3 .list a .abbn.pro {background:#CBDCFF; color:#3970DF;} .carList3 .list .img {width:100%; height:180px; display:flex; align-items:center;} .carList3 .list .img img {width:100%; max-width:300px; margin:0 auto;} .carList3 .list .text {position:relative; top:-10px; width:100%; text-align:center; } .carList3 .list h3 {margin:0 0 5px 0; font-size:22px; font-weight:bold; letter-spacing:-0.5px;} .carList3 .list p {font-size:15px; letter-spacing:-1px; opacity:0.8; height:22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList3 .list .price { } .carList3 .list .price .before {margin-bottom:3px; display:flex; align-items:center; gap:7px;} .carList3 .list .price .before .per {font-size:14px; font-weight:700; color:#1a1a1al;} .carList3 .list .price .before .cancel {color: #bbb; font-size: 14px; text-decoration: line-through;} .carList3 .list .price h5 {font-size: 16px; font-weight: 700; letter-spacing: -1px; line-height:1.5;} .carList3 .list .text .option {margin:15px 0; text-align:left; font-size:13px; line-height:18px; } .carList3 .list .text .option li {margin-bottom:3px; 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:36px; overflow: hidden; } /*carList - 5*/ .carList5 .list { text-align:center; } .carList5 .list a { display:flex; flex-direction:column; align-items:center; border-radius:10px;} .carList5 .list a .img {width:115px; height:70px; display:flex; align-items:center;} .carList5 .list.center a .img {transform: scale(1.4);} .carList5 .list a p {display:none;} .carList5 .list.center a p {display:block; margin-top:5px; font-size:15px; color:#3970DF; font-weight:700; } .carList5 .list a h3 {font-size:13px; font-weight:600; letter-spacing:-0.5px;} .carList5 .list.center a h3 {margin-top:10px; font-size:18px; font-weight:700; white-space:nowrap;} .carList5 .pswiper {position:relative;} .carList5 .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%; display:none;} .carList5 .arrow .swiper-button-next {right:-35px; color:transparent;} .carList5 .arrow .swiper-button-prev {left:-35px; 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');} /*mWant*/ #mWant { padding:0 20px;} #mWant .tit {margin-bottom:13px; font-size:20px; font-weight:700; letter-spacing:-0.5px; color:#1a1a1a;} #mWant ul li a {margin-bottom:10px; position:relative; display:flex; align-items:center; gap:13px; padding:13px 17px; font-size:18px; font-weight:700; letter-spacing:-0.5px; border-radius:6px; border:1px solid #E8E8E8;} #mWant ul li a .ico {width:45px;} #mWant ul li a .arrow {position:absolute; top:50%; right:20px; transform:translate(0,-50%); width:8px;} #mWant .freeBtn a {display:block; width:100%; padding:22px 0; border-radius:7px; background:#08C679; color:#fff; font-size:16px; font-weight:600; text-align:center;} /*fbn*/ #fQna {margin-top:5px;} #fQna .container a {position:relative; display:flex; align-items:center; width:100%; background:#dcf8fe; border-radius:10px; overflow:hidden;} #fQna .container a:hover {background:#bfe7ef; transition:all 1s;} #fQna .container a > .img {transform:scaleX(-1); position:absolute; right:-20px; bottom:0; width:200px; } #fQna .container a .text {padding:15px 0 15px 20px; color:#00254e; z-index:9;} #fQna .container a .text .img {width:70px;} #fQna .container a .text h3 {margin:5px 0; font-size:24px; letter-spacing:-2px; font-weight:bold; } #fQna .container a .text p {font-size:14px; line-height:20px;} #fBn .fbn-con.bg-1 a {background:#e5e5e5;} #fBn .fbn-con.bg-2 a {background:#fafafa;} #fBn .fbn-con a {padding:15px 18px 15px 20px; margin-top:5px; display:flex; justify-content:space-between; align-items:center; width:100%; border-radius:10px;} #fBn .fbn-con a .img {width:130px; height:100px; border-radius:10px; overflow:hidden; } #fBn .fbn-con a .text {width:130px;} #fBn .fbn-con a h3 {font-size:20px; font-weight:bold; letter-spacing:-1px;} #fBn .fbn-con a h4 {font-size:20px; font-weight:bold;} #fBn .fbn-con a p {margin:7px 0; font-size:13px; line-height:16px; font-weight:500; letter-spacing:-0.5px;} #fBn .fbn-con a .detail {font-size:12px; color:#8c8c8c; } /*footer*/ #footer {margin-top:30px; padding:0 0 140px 0;} #footer .term {} #footer .term .container {display:flex; gap:12px; justify-content:center; } #footer .term .container a {padding:20px 0; display:block; font-size:13px; line-height:13px; color:#1a1a1a; letter-spacing:-0.5px;} #footer .foot {font-size:12px; line-height:1.6; color:#c8c8c8; text-align:center;} #footer .foot a {margin-top:3px; font-size:12px; color:#c8c8c8; letter-spacing:-0.5px;} #footer .foot .copyright {margin-top:17px;} #footer .blank {display:block; width:100%; height:7px; } /*newfn*/ #newfn {position:fixed; bottom:0; left:50%; transform:translate(-50%,0); z-index:100; width:100%; } #newfn .container {background:#fff; border-radius:10px 10px 0 0; box-shadow:-3px -5px 7px rgba(0 0 0 / 15%); } #newfn ul {display:flex; align-items:center; justify-content:space-between; padding:0 35px; max-width:420px; margin:0 auto;} #newfn a {padding:16px 0 30px 0; display:flex; flex-direction:column; justify-content:center; gap:10px; font-size:14px; font-weight:500; color:#222222; letter-spacing:-0.5px; text-align:center; } #newfn a .fnico {width:24px; margin:0 auto;} /*quick*/ #fquick {position:fixed; left:50%; bottom:0; transform: translate(-50%, 0); z-index:9; width:100%; text-align:right;} #fquick ul {display:flex; gap:5px; padding:13px 10px; background:#fff; border-top:1px solid #e5e5e5; box-shadow:5px 5px 12px rgba(0,0,0,0.3);} #fquick ul li {display:flex; flex-basis:33.33%; align-items:center;} #fquick ul li:nth-child(2) a {border-right:1px solid #e6e6e6; border-left: 1px solid #e6e6e6;} #fquick ul li a img {margin-bottom:8px;} #fquick ul li a {display:block; text-align:center; width:100%; box-sizing:border-box; font-size:12px; letter-spacing:-0.5px; font-weight:500;} #fquick ul li a.btn1 {background:#3970DF; color:#fff; border:2px solid #3970DF;} #fquick ul li a.btn2 {background:#fff; color:#3970DF; border:2px solid #3970DF;} #fquick .top {position:absolute; bottom:85px; right:10px;} #fquick .top a {width:50px; height:50px; font-size:14px; display:flex; justify-content:center; align-items:center; color:#8c8c8c; font-weight:bold; background:#fff; border-radius:100%; box-shadow:3px 3px 3px rgb(0 0 0 / 5%); border:1px solid #eee;} #fquick .top a:hover {background:#f4f4f4; transition:all 1s;} #fquick .kakao {position:absolute; bottom:143px; right:10px;} #fquick .kakao a {width:50px; height:50px; display:inline-block; font-size:14px; color:#8c8c8c; font-weight:bold; background:#fff; border-radius:100%; box-shadow:3px 3px 3px rgb(0 0 0 / 5%); overflow:hidden;} /*0906 new footer*/ #fbtn {position:fixed; left:50%; bottom:0; transform: translate(-50%, 0); z-index:9; width:100%; z-index:100; } #fbtn .container {position:relative; width:100%; max-width:100%; padding:0 14px; background:#fff; z-index:1000; box-shadow:-3px -3px 5px rgb(0 0 0 / 5%);} #fbtn a.call {position:absolute; top:-73px; right:15px; width:65px; height:65px; border-radius:100%; display:flex; gap:5px; align-items:center; justify-content:center; flex-direction:column; font-size:12px; font-weight:500; color:#8B8B8B; background:#fff; filter:drop-shadow(2px 3px 3px rgba(0 0 0 / 10%)); z-index:99;} #fbtn a.call img {width:21px;} #fbtn ul {max-width:420px; margin:0 auto; display:flex; justify-content:space-between; align-items:end;} #fbtn ul li {width:33.33%;} #fbtn ul li a {position:relative; padding:20px 0; display:flex; flex-direction:column; gap:5px; align-items:center; font-size:13px; color:#8B8B8B;} #fbtn ul li a .f-kcm {position:absolute; width:98px; max-width:98px; bottom:38px; right:-17px;} #fbtn ul li a img {margin:0 auto; max-width:30px;} .fc-b {color:#3970DF !important;} .f-toggle {display:block; width:100%; margin:0 auto; filter: drop-shadow(-3px -3px 5px rgb(0 0 0 / 10%)); position:absolute; bottom:0; z-index:999;} .f-toggle #toggle + label ~ .ft-con-bg {display:none; position:relative; width:100%; height:100vh; background:rgb(0 0 0 / 70%); } .f-toggle #toggle:checked + label ~ .ft-con-bg {display:block; } .f-toggle #toggle + label {position:absolute; bottom:85px; left:50%; transform:translate(-50%, 0); width:100%; max-width:420px; z-index:1001; } .f-toggle #toggle + label .togglebtn { width:100%; height:35px; display:flex; justify-content:center; align-items:center; cursor:pointer; background:url("../_img/fbtn_bg.png") no-repeat center; background-size:contain; text-align:center; } .f-toggle #toggle + label .togglebtn .up {display:block; font-size:14px; color:#0071BD; font-weight:600;} .f-toggle #toggle:checked + label .togglebtn .up {display:none;} .f-toggle #toggle + label .togglebtn .down {display:none; width:30px; height:4px; border-radius:50px; background:#E2E2E2;} .f-toggle #toggle:checked + label .togglebtn .down {display:block;} .f-toggle #toggle + label .ft-con {display:none;} .f-toggle #toggle:checked + label .ft-con { display:block; height:60vh; overflow-y:scroll; padding:40px 30px 30px 30px; width:100%; border-top-left-radius:35px; border-top-right-radius:35px; background:#fff; } .f-toggle #toggle:checked + label .ft-con::-webkit-scrollbar {display:none; width:0;} .f-toggle #toggle + label .ft-con .ft-select {} .f-toggle #toggle + label .ft-con .tit{ display:flex; justify-content:space-between; align-items:center;} .f-toggle #toggle + label .ft-con .tit h2 {font-size:24px; letter-spacing:-0.5px; line-height:30px;} .f-toggle #toggle + label .ft-con .tit h5 {margin-top:10px; font-size:14px; color:#AEAEAE; font-weight:500;} .f-toggle #toggle + label .ft-con .tit .img { width:87px; filter: drop-shadow(3px 3px 3px rgb(0 0 0 / 10%)); } .custom-select { position: relative;} .custom-select select {display: none;} .custom-select .select-selected {margin:5px 0 15px 0; padding:15px 20px 15px 15px; border:1px solid #E6E6E6; border-radius:12px; background:url('../_img/sselect_arrow.png') no-repeat 95% center #fff; background-size:13px; color:#000; } .custom-select .select-items div,.select-selected { color: #000; padding: 8px 16px; cursor: pointer; user-select: none;} .custom-select .select-items { position: absolute; padding:10px 0; top: 0; left: 0; right: 0; z-index: 99; border-radius:12px; border:1px solid #3970DF; overflow-x:hidden; height:148px; overflow-y:scroll; background:url('../_img/sselect_arrow.png') no-repeat 95% 20px #fff; background-size:13px;} .custom-select .select-items::-webkit-scrollbar {width:2px;} .custom-select .select-items::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 10px;} .custom-select .select-hide { display: none;} .custom-select .select-items div:hover, .same-as-selected { background-color: #e8f2ff;} .mEstimateview {margin-top:20px;} .mEstimateview .mtit {display:flex; align-items:center; justify-content:flex-start; gap:9px; font-size:16px; font-weight:700; color:#1a1a1a; } .mEstimateview .mtit .ft-gb {padding-top:4px; font-size:27px; color:#d1d1d1;} .mEstimateview select {margin:5px 0 10px 0; padding:10px; border:1px solid #E6E6E6; border-radius:12px; width:100%; background:url('../_img/sselect_arrow.png') no-repeat 95% center ;background-size:13px; font-size:14px; color:#AEAEAE;} .mEstimateview a.submit {display:block;padding:18px 5px; margin-top:15px; width:100%; background:#08C679; font-size:18px; font-weight:bold; border-radius:12px; color:#fff; text-align:center;} @media (min-width: 640px) { .f-toggle #toggle:checked + label .ft-con { height:auto;} } /*팝업 견적 문의*/ #consultpop.cp-style-1 {} #consultpop.cp-style-1 .tit {padding:20px 10px; text-align:center;} #consultpop.cp-style-1 .tit h2 {font-size:20px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #consultpop.cp-style-1 .tit p {font-size:12px; color:#8c8c8c;} #consultpop.cp-style-1 .consultform form {padding:20px;} #consultpop.cp-style-1 .consultform form li {display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;} #consultpop.cp-style-1 .consultform form li label {width:80px; font-size:15px; color:#1a1a1a; font-weight:700; } #consultpop.cp-style-1 .consultform form li input {padding:12px 15px; 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; color:#3970DF;} /*page로 변경*/ /* #cousultpage {padding-top:130px;} */ #cousultpage { width:100%; height:100%; overflow:scroll; } #cousultpage #consultpop.cp-style-1 .consultform form {padding:20px 10px;} #cousultpage #consultpop.cp-style-1 .consultform form ul {position:relative;} #cousultpage #consultpop.cp-style-1 .consultform form ul li.nscon {position:absolute; margin:0; top:-4px; right:0; flex-direction:row; font-size:13px; color:#8c8c8c;} #cousultpage #consultpop.cp-style-1 .consultform form li input {border:1px solid #e2e2e2;} #cousultpage #consultpop.cp-style-1 .consultform form li > label {width:100%; font-size:16px; font-weight:bold; margin-bottom:5px; letter-spacing:-0.5px;} #cousultpage #consultpop.cp-style-1 .consultform form li {flex-direction:column; gap:3px; margin-bottom:20px;} #cousultpage #consultpop.cp-style-1 .consultform form li.row {flex-direction:row; align-items:center;} #cousultpage #consultpop.cp-style-1 .consultform form li.row > label {width:90px; margin-bottom:0 !important;} #cousultpage #consultpop.cp-style-1 .consultform form li.info {margin:25px 0; flex-direction:row; gap:3px;} #cousultpage #consultpop.cp-style-1 .consultform form li.info > label {width:90px; margin:0; } #cousultpage #consultpop.cp-style-1 .consultform form li.info span > label {width:50px; font-size:15px;} #cousultpage #consultpop.cp-style-1 .consultform form li input {width:100%;} #cousultpage #consultpop.cp-style-1 .consultform form li p {width:100%; font-size:15px; font-weight:500;} #cousultpage #consultpop.cp-style-1 button { position:relative; margin-top:20px; border-radius:5px; padding:17px 0; } #cousultpage #consultpop.cp-style-1 .agreecon {display:none;} #cousultpage #consultpop.cp-style-1 .agree input[type="checkbox"] + label {font-size:13.5px; color:#222;} #cousultpage #consultpop.cp-style-1 .agree {margin:20px 0; } #cousultpage.consultfinish .container {display:flex; justify-content:center; align-items:center; flex-direction:column; min-height:50vh;} #cousultpage.consultfinish .container h2 {margin-bottom:5px; font-size:18px; font-weight:bold;} #cousultpage.consultfinish .container p {font-size:14px; color:#8c8c8c;} /*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; margin-right:14px; padding-right:5px; width:45px; line-height:18px;} #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 .consultform form h3 {margin:15px 0; font-size:15px; font-weight:700;} #consultpop.cp-style-1 .agree {margin:15px 0; } #consultpop.cp-style-1 button { position:absolute; left:50%; bottom:0; transform: translate(-50%, 0); display:block; padding:15px 0; width:100%; background:#08C679; color:#fff; font-size:18px; font-weight:600; letter-spacing:-1px; text-align:center;} .agree {display:flex; gap:7px; line-height:12px; } .agree a.agree-link-pop {font-size:12px; color:#8c8c8c; } .agree input[type="checkbox"]{appearance:none; display:none;} .agree input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:23px; cursor:pointer; font-size:12px; letter-spacing:-0.5px; } .agree input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:-1px; width:17px; height:17px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ccc;} .agree input[type="checkbox"]:checked + label:before {background:#85B4FF; border:none;} .agree input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:2px; left: 5px; width:6px; height:6px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(44deg); -ms-transform: rotate(44deg); transform: rotate(44deg); } /*즉시출고 팝업 2023*/ .winLayWrap.winLayWrap-size-lg .winLayContainer {max-height:750px !important;} #consultpop.sevenpop .tit a.close {position:absolute; top:20px; right:20px;} #consultpop.sevenpop .tit {position:fixed; top:0; padding:20px; text-align:center; width:100%; background:#fff; z-index:99; box-shadow:2px 2px 10px rgba(0 0 0 / 10%);} #consultpop.sevenpop {height:703px; padding-top:70px;} #consultpop.sevenpop .sevenscroll { padding-bottom:40px; overflow-y:scroll; height:90vh;} #consultpop.sevenpop .agree {margin:17px 0 15px 0;} .svCarPop {position:relative; padding:20px; margin-bottom:20px;} .svCarPop .markWrap {position:absolute; top:15px; right:15px; display:inline-block; width:auto;} .svCarPop .markWrap span {width:auto; border-radius:500px; font-size:12px; line-height:12px;} .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;} #consultpop.sevenpop .consultform form li {flex-direction:column; align-items:flex-start; gap:5px;} #consultpop.sevenpop .consultform form li input {width:100%;} #consultpop.cp-style-1 .consultform form .condition {margin-top:20px;} #consultpop.cp-style-1 .consultform form .condition li {margin:0 0 20px 0; justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:11px;} #consultpop.cp-style-1 .consultform form .condition li > label {font-size:16px; line-height:15px; width:65px;} #consultpop.cp-style-1 .consultform form .condition li > label.space {letter-spacing:4px;} #consultpop.cp-style-1 .popflex {width:100%; 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:12px; line-height:15px; padding-right:20px; font-weight:500; 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:90%; height:525px; max-width:460px;} #immcarPop .swiper-vertical>.swiper-wrapper {gap:20px;} #immcarPop .pop-container { } #immcarPop .pop-container .tit {position:fixed; top:0; left:50%; transform:translate(-50%,0); width:100%; padding:20px 5px; text-align:center; background:#fff; z-index:99;} #immcarPop .pop-container .tit h2 {margin-bottom:5px; font-size:20px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #immcarPop .pop-container .tit p {font-size:14px; color:#8c8c8c; display:none;} #immcarPop .pop-container .cont { margin-top:80px; } #immcarPop .swiper-wrap { margin-top:80px; } #immcarPop .swiper {padding:0 20px; height:100vh;} #immcarPop .swiper .swiper-slide { height:208px !important;} #immcarPop .arrow {display:none;} #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 .swiper-wrapper {gap:20px;} /*immcarSlidePop*/ #immcarSlidePop .tit {padding:21px 0; text-align:center; letter-spacing:-0.5px; color:#1a1a1a;} #immcarSlidePop .tit h2 {font-size:19px; font-weight:700;} #immcarSlidePop .swiper-wrap .swiper {padding:0 20px;} #immcarSlidePop .list {padding:0; margin:0; } #immcarSlidePop .list > input { display:none; appearance: none; } #immcarSlidePop .list > input + label {position:relative; display:block; cursor:pointer; padding:15px; border:1px solid #e7e7e7; border-radius:7px; overflow:hidden; } #immcarSlidePop .list > input:checked + label {border:2px solid #08C679; } #immcarSlidePop .list > input + label .ab {position:absolute; top:15px; left:15px; display:inline-block; padding:6px 12px; font-size:11px; font-weight:500; color:#fff; background:#3970DF; border-radius:30px; } #immcarSlidePop .list > input + label .img {display:flex; align-items:center; justify-content:center; width:100%; height:135px; } #immcarSlidePop .list > input + label .textWarp h3 {font-size:14px; line-height:1.4; height:40px;} #immcarSlidePop .list > input + label .option {margin:10px 0 20px 0; } #immcarSlidePop .list > input + label .option li {margin-bottom:5px; display:flex; gap:15px; font-size:12px; font-weight:400; letter-spacing:-0.5px; line-height:1.4;} #immcarSlidePop .list > input + label .option li:last-child {margin-bottom:0; } #immcarSlidePop .list > input + label .option li .name {width:30px;} #immcarSlidePop .list > input + label .option li .colorbox { display:inline-block; width:12px; height:12px; border:1px solid #cfcfcf; border-radius:2px;} #immcarSlidePop .list > input + label .option li .colortxt {width:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #immcarSlidePop .list > input + label .option li .txt { display:flex; gap:5px; width:75%; } #immcarSlidePop .list > input + label .option li.option-detail {align-items:flex-start !important;} #immcarSlidePop .list > input + label .option li.option-detail .txt{ height:33px; overflow-y:scroll; padding: 0 5px 0 0; align-items:flex-start !important;} #immcarSlidePop .list > input + label .price li {display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:500; letter-spacing:-0.5px; line-height:1.3;} #immcarSlidePop .list > input + label .price li .won {font-size:16px;} #immcarSlidePop .selectBtn {text-align:center; padding: 0 20px;} #immcarSlidePop .selectBtn a {margin-top:20px; display:block; padding:15px 0; border-radius:5px; background:#08C679; text-align:center; font-size:16px; font-weight:600; letter-spacing:-0.5px; color:#fff;} #immcarSlidePop .selectBtn a:hover {background:#03b473; transition: all 0.5s;} #immcarSlidePop .swiper-wrap .swiper-button-next:after, #immcarSlidePop .swiper-wrap .swiper-button-prev:after {color:#333; font-size:20px;} #immcarSlidePop .swiper-wrap .swiper-button-next {right:25px !important; } #immcarSlidePop .swiper-wrap .swiper-button-prev {left:25px !important;} /*견적확인하기 팝업*/ /* .layerPopup#confirmPop .layerBody{width:90%; height:90vh; top:auto; bottom:-10px !important; overflow-y:auto; max-width:420px;} */ #confirmPop .pop-container h2 {padding:25px 0 15px 0; margin-bottom:5px; font-size:20px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a; text-align:center; } .layerPopup#confirmPop .layerBody {position:relative; max-height:85vh; overflow-y:scroll;} .layerPopup#confirmPop .layerBody::-webkit-scrollbar { display:none; scrollbar-width: none; -ms-overflow-style: none; } .layerPopup#confirmPop .layerBody::-webkit-scrollbar-track {background:#f4f4f4;} .layerPopup#confirmPop .layerBody::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px;} /*빠른견적확인하기 팝업*/ .layerPopup#confirmfastPop .layerBody{width:300px; height:600px; overflow-y:auto;} #confirmfastPop .pop-container h2 {padding:15px 0; margin-bottom:5px; font-size:20px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a; text-align:center; } .subcarList .list { border:1px solid #d1d1d1; box-sizing:border-box; border-radius:10px; padding:15px 5px 15px 15px; cursor:pointer; margin: 10px; } .subcarList .list.on {border:2px solid #3970DF;} .subcarList .list > a {position:relative; display:block; border-radius:10px; } .subcarList .list .ab {position:absolute; top:20px; left:15px;} .subcarList .list .ab .final {padding:5px 12px; font-size:12px; line-height:12px; background:#007CCE; color:#fff; border-radius:500px;} .subcarList .list .ab .seven {padding:5px 12px; font-size:12px; line-height:12px; background:#007CCE; color:#fff; border-radius:500px;} .subcarList .list .img {padding:5px; height:160px; display: flex; justify-content: center;} .subcarList .list:hover .img img {transform: scale(1.1); transition:all 1s;} .subcarList .list h3 {margin:0; font-size:16px; } .subcarList .list .option {margin:15px 0;} .subcarList .list .option li {margin-bottom:5px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:400;} .subcarList .list .option li .name {width:40px; font-weight:500;} .subcarList .list .option li .txt {display:flex; align-items:center; width:100%;} .subcarList .list .option li .color {display:block; width:13px; height:13px; border:1px solid #707070; box-sizing:border-box;} .subcarList .list .option li .colorbox {display:none; width:15px; height:15px; border-radius:4px; border:1px solid #ececec;} .subcarList .list .price li {padding:2px 0;} .subcarList .list .price li {display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; font-weight:400;} .subcarList .list .price li .name {width:46px;} .subcarList .list .price li .won {font-size:130%;} #immcarPop a.close {position:absolute; top:17px; right:15px; z-index:9;} #immcarPop {} #immcarPop .subcarList .list { position:relative; /*display:flex; align-items:center; gap:13px; */ } #immcarPop .subcarList .list .txt {width:60%; /*position:relative; z-index:99;*/} #immcarPop .subcarList .list .img {position:absolute; top:55%; right:0; transform:translate(0, -50%); width:170px; z-index:98;} #immcarPop .subcarList .list .ab {left:inherit; right:15px;} #immcarPop .subcarList .nametit {align-items:center; gap:7px;} #immcarPop .subcarList .nametit .brand {width:40px;} #immcarPop .subcarList .pluswrap {margin-top:15px; display:flex; align-items:center; justify-content:space-between;} #immcarPop .subcarList .nametxt { /*width:150px;*/ } #immcarPop .subcarList .plusbtn {padding:5px 7px; display:inline-flex; border-radius:7px; font-size:13px; background:#3970DF; color:#fff; gap:5px; align-items:center;} #immcarPop .subcarList .plusbtn .plus {display:inline-block; width:14px; height:14px; line-height:13px; background:#fff; color:#3970DF; border-radius:100%; text-align:center;} #immcarPop .subcarList .list .price li {display:inherit; line-height:12px; color:#9B9B9B;} #immcarPop .subcarList .list .price li .won {font-size:160%; font-weight:bold;} #immcarPop .subcarList h3 {font-size:18px; } #immcarPop .subcarList p {font-size:14px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #immcarPop .subcarList .list .btn {display:flex; gap:5px; align-items:center;} #immcarPop .subcarList .list .btn a { width:50%; padding:9px; border-radius:5px; font-weight:600; text-align:center;} #immcarPop .subcarList .list .btn a.view {background:#f4f4f4;} #immcarPop .subcarList .list .btn a.counsel {background:#3970DF; color:#fff;} #immcarPop .cutline {margin:15px 0; width:100%; height:1px; background:#EBEBEB;} #immcarPop .detail {text-align:center; padding-right:20px;} #immcarPop .detail a {display:inline-block; margin-top:20px; width:100%; padding:13px 5px; text-align:center; background:#3970DF; border-radius:5px; color:#fff; font-size:16px; font-weight:500; letter-spacing:-1px;} #immcarPop .detail a:hover {background:#00c4ec; transition:all 0.5s;} .instantindex .container {width:100%; } .instantindex .subcarList .list {border-bottom:13px solid #f6f6f6 !important;} .instantindex .subcarList .list a li.optiondetail .txt {height:33px; overflow:hidden; align-items:flex-start;} .instantindex .subcarList .list .img {align-items:center; position:relative; } .instantindex .subcarList .list .inven {position:absolute; top:13px; right:3px; padding:6px 7.5px; font-size:12px; line-height:12px; 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;} /*seven 2023*/ .fc-bb {color:#2c77cc;} .flex {display:flex; align-items:center;} .flex-space {display:flex; justify-content:space-between;} .center {align-items:center;} .end{align-items:end;} /*#sub.seven {background:#fafafa; padding-bottom:40px; margin-bottom:-110px;}*/ #sub .seven-tit {padding:30px 20px 25px 20px; color:#1A1A1A;} #sub .seven-tit h3 {margin-bottom:3px; font-size:18px; font-weight:600;} #sub .seven-tit h5 {font-size:14px; letter-spacing:-0.5px; font-weight:400; c} #sub .seven-tit .seven-select {margin-top:20px;} #sub .seven-tit .seven-select .list {margin-top:5px; display:flex; align-items:center; gap:15px;} #sub .seven-tit .seven-select .list h4 {font-size:14px; width:40px; font-weight:400;} #sub .seven-tit .seven-select select { padding:12px 12px; width:100%; background:url('/_img/select_down.png') no-repeat #fff; background-size:15px; background-position:top 50% right 10px; color:#666666; border-radius:7px; font-size:14px; font-weight:500; letter-spacing:-0.5px; cursor:pointer; border:1px solid #dcdcdc; } #sub .sevent-tab ul {margin-bottom:25px; display:flex;} #sub .sevent-tab ul a {display:block; font-size:25px; font-weight:800;} .gap {display:block; width:100%; height:13px; background:#FAFAFA;} #sub.seven .svnb {padding:12px 20px; font-size:16px; font-weight:600; color:#1a1a1a; } #sub.seven .subcarListSub .list {position:relative; padding:20px 0; } #sub.seven .subcarListSub .list .listWarp {display:flex; align-items:center; } #sub.seven .subcarListSub .list .ab {position:absolute; top:20px; left:15px; z-index:9;} #sub.seven .subcarListSub .list .ab .seven {display:block; padding:5px 12px; font-size:11px; line-height:11px; color:#fff; background:#3970DF; border-radius:30px;} #sub.seven .subcarListSub .list .img {width:50%; text-align:center;} #sub.seven .subcarListSub .list .img img {max-width:170px; margin:10px auto 0 auto;} #sub.seven .subcarListSub .list .text {width:50%; color:#1a1a1a; letter-spacing:-0.5px; padding:0 20px 0 0;} #sub.seven .subcarListSub .list .text h3 {font-size:16px; font-weight:700; } #sub.seven .subcarListSub .list .text p {margin-top:2px; font-size:12px; font-weight:500; line-height:1.4; height:32px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #sub.seven .subcarListSub .list .option {margin:12px 0; } #sub.seven .subcarListSub .list .option li {margin-bottom:3px; display:flex; align-items:center; gap:15px; font-size:12px; font-weight:500; } #sub.seven .subcarListSub .list .option li:last-child {margin-bottom:0;} #sub.seven .subcarListSub .list .option li .name {font-size:10px; color:#8C8C8C; width:35px; } #sub.seven .subcarListSub .list .option li .txt {display:flex; align-items:center; gap:4px; width:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sub.seven .subcarListSub .list .option li.option-detail .txt {display:block;} #sub.seven .subcarListSub .list .option li .txt .colorbox {display:block; width:14px; height:14px; border:1px solid #c1c1c1;} #sub.seven .subcarListSub .list .option li .txt .colortxt {width:70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #sub.seven .subcarListSub .list .price li { display:flex; align-items:center; gap:15px; font-size:12px; font-weight:500; } #sub.seven .subcarListSub .list .price li .name {font-size:10px; color:#8C8C8C; width:35px; } #sub.seven .subcarListSub .list .price li .won {margin-right:-2px; font-size:15px;} #sub.seven .subcarListSub .list .btn {margin-top:10px; padding:0 20px; width:100%; display:flex; align-items:center; gap:6px; align-items:center; } #sub.seven .subcarListSub .list .btn a {padding:9px 0; width:50%; text-align:center; border-radius:3px; font-size:14px; font-weight:500; color:#1A1A1A; border:1px solid #D1D1D1; background:#fff;} #sub.seven .subcarListSub .list .btn a.bg {color:#fff; border:1px solid #08C679; background:#08C679;} .seven.importOnlyDetail .result .carindex-tit {padding: 12px 0; margin:0 20px;} .seven.importOnlyDetail .result .carindex-tit h2 {font-size:15px;} .seven.importOnlyDetail .result select.carfilter {padding:6px 30px 6px 11px; font-size:12px; background-size:19px; font-weight:500;} .seven-list .subject { padding:15px 0; margin:0 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:15px; font-weight:500; border-bottom:1px solid #ECECEC;} .seven-list .subject.on {font-weight:bold; color:#000;} .seven-list .subject li {display:flex; gap:5px; line-height:15px; margin-right:20px;} .seven-list .subject li:last-child {margin-right:0;} .seven-list .subject .arrow {font-size:14px; color:#3651E0; } .seven-list .subject .arrow span {line-height:13px;} .seven-list .subject .arrow .close span {transform:rotate(-180deg); } .seven-list .subject .arrow .close {display:none;} .seven-list .subject.on .open {display:none;} .seven-list .subject.on .close {display:block; color:#999;} .seven-list .content {display:none; background:#fff; line-height:1.6; } .seven-list .content .conlist {padding:15px; border-bottom:1px solid #ececec;} .seven-list .content .ab-icon span {font-size:12px; padding:5px 10px; border-radius:50px; line-height:25px;} .seven-list .content .ab-icon span.mm {background:#3970DF; color:#fff;} .seven-list .trim {font-size:16px; font-weight:bold; overflow: hidden; text-overflow: ellipsis; word-break:keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .seven-list .color {text-align:left; } .seven-list .color .name {opacity:0.5; font-weight:bold;} .seven-list .color .list {display:flex; gap:7px;} .seven-list .color .colorbox {width:15px; height:15px; border:1px solid #f3f3f3; border-radius:3px;} .seven-list .color .txt {margin-top:2px; max-width:100px; font-size: 12px; line-height:1.3;} .seven-list .mid {margin:12px 0; } /* .seven-list .plusbtn {padding:3px 12px; display:inline-flex; border-radius:7px; font-size:14px; background:#3970DF; color:#fff; gap:7px; align-items:center;} .seven-list .plusbtn .plus {display:inline-block; width:14px; height:14px; line-height:13px; background:#fff; color:#3970DF; border-radius:100%; text-align:center;} */ .seven-list .plusbtn {position:relative; cursor:pointer;} .seven-list .plustit {padding:10px 12px; display:inline-flex; border-radius:10px; font-size:15px; background:#3970DF; color:#fff; gap:7px; align-items:center;} .seven-list .plustit .plus {display:inline-block; width:17px; height:17px; line-height:17px; background:#fff; color:#3970DF; border-radius:100%; text-align:center;} .seven-list .plusbtn .plusview {display:none; } /* .seven-list .plusbtn:hover .plusview{ display:block; position:absolute; top:0; left:0; width:300px; border-radius:13px; border:1px solid #3970DF; box-shadow:2px 2px 3px rgba(0 0 0 / 15%); background:#fff; text-align:left; overflow:hidden; z-index:99;} */ .seven-list .plusbtn.active .plusview{ display:block; position:absolute; top:0; left:0; width:300px; border-radius:13px; border:1px solid #3970DF; box-shadow:2px 2px 3px rgba(0 0 0 / 15%); background:#fff; text-align:left; overflow:hidden; z-index:99;} .seven-list .plusbtn .plusview .plustit {width:100%; border-radius:0; display:flex; justify-content:space-between; align-items:center;} .seven-list .plusbtn .plusview .plustit .ppname {gap:5px;} .seven-list .plusbtn .plusview .plustit button {color:#fff; background:none;} .seven-list .plusbtn .plusview ul {background:#fff; padding:12px; height:255px; overflow-y:scroll;} .seven-list .plusbtn .plusview li {padding:12px; background:#f5f5f5; color:#656565; border-radius:10px; margin-bottom:7px; font-size:14px; font-weight:500; justify-content:space-between;} .seven-list .plusbtn .plusview li:last-child {margin-bottom:0;} .seven-list .plusbtn .plusview li .name {display:flex; align-items:center; gap:5px; } .seven-list .plusbtn .plusview li .name .txt {/*width:135px; overflow: hidden; text-overflow: ellipsis;*/ white-space: nowrap;} .seven-list .plusbtn .plusview li .name .check {width:17px;} .seven-list .plusbtn .plusview li .won {font-weight:bold;} .seven-list .price {font-size:15px; line-height:14px; color:#b1b1b1; font-weight:500;} .seven-list .price span {font-size:150%; font-weight:700;} .seven-list a.btn {display:inline-flex; gap:7px; align-items:center; padding:4px 12px; border-radius:3px; font-size:14px; } .seven-list a.btn img {width:15px; height:15px;} .seven-list a.btn.view {background:#e4f1ff; color:#1468c8;} .seven-list a.btn.write {background:#ffe4e4; color:#c81212;} #pluspop .plusview .plustit {width:100%; padding:15px 12px; display:inline-flex; font-size:15px; background:#3970DF; color:#fff; gap:7px; align-items:center; justify-content:space-between;} #pluspop .plusview .plustit .plus {margin-right:5px; display:inline-block; width:16px; height:16px; line-height:15px; background:#fff; color:#3970DF; border-radius:100%; text-align:center;} #pluspop .plusview ul {background:#fff; padding:12px; height:265px; overflow-y:scroll;} #pluspop .plusview li {padding:12px; background:#f5f5f5; color:#656565; border-radius:10px; margin-bottom:7px; font-size:14px; font-weight:500; justify-content:space-between;} #pluspop .plusview li:last-child {margin-bottom:0;} #pluspop .plusview li .name {display:flex; align-items:center; gap:8px; } #pluspop .plusview li .name .txt {width:200px; } #pluspop .plusview li .name .check {width:17px;} #pluspop .plusview li .won {font-weight:bold;} /*locationPop*/ #locationPop.layerPopup .layerBody .close:after {top:22px;} #locationPop.layerPopup .layerBody {max-width:420px; width:90%; margin-top:0 !important; margin-left:0 !important;} #locationPop .pop-container .tit h2 {padding:20px 0; margin-bottom:5px; font-size:20px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a; text-align:center;} #locationPop .swiper-wrap {position:relative;} #locationPop .arrow .swiper-button-next {right:0;} #locationPop .arrow .swiper-button-prev {left:0;} #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; 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:30px; transform:translate(0,-50%); z-index:99; } #locationPop .list .name img {width:35px;} #locationPop .list .name h3 {margin:12px 0 0 0; font-size:22px; color:#fff; font-weight:600; letter-spacing:5px;} #locationPop .list .name h3 .grade {margin-left:-10px;font-size:70%; font-weight:400; letter-spacing:0; line-height:25px; opacity:0.8; } #locationPop .list .name .eng {color:#eff4f9; font-size:13px; font-weight:400;} #locationPop .list .name .num {margin-top:12px; color:#b3e0ff; font-size:13px; line-height:1.2; } #locationPop .txt {padding:0 20px 20px 20px;} #locationPop .txt h4 {margin:0; font-size:18px; line-height:1.4; color:#000;} #locationPop .txt h5 {margin:12px 0 5px 0; font-size:15px; color:#000;} #locationPop .career li {font-size:13px; color:#21253b;} #locationPop .caution {width:80%; margin-top:20px; font-size:12px; line-height:1.3;} #locationPop .badge {position:absolute; bottom:20px; right:20px; display:flex; flex-direction:column; width:45px;} #locationPop .locationList.swiper {padding:0 15px 15px 15px;} #fcall {background:#F2F2F2; margin-bottom:-30px;} #fcall .container {max-width:420px;} #fcall a {display:block; padding:43px 10px 38px 30px; letter-spacing:-0.5px; background:url('/_img/q_kcm.png') no-repeat; background-position:130% -130%; background-size:290px;} #fcall a h2 {margin:10px 0 12px 0; display:flex; align-items:center; gap:4px; font-size:27px; line-height:27px; font-weight:800; color:#3970DF; letter-spacing:-1px;} #fcall a h2 .ico {width:25px;} #fcall a h3 {font-size:23px; color:#2E2E2E; font-weight:800;} #fcall a h5 {margin-top:15px; font-size:15px; font-weight:700; text-decoration:underline; line-height:1.4;} #fcall a p {font-size:15px; font-weight:500; line-height:1.4;} @media (max-width: 400px) { #fcall a {background-size:240px; background-position:120% 170%;} } @media (min-width: 420px) { #fEvent .container a {height:420px;} } @media (min-width: 460px) { .reviewSwiper .thumbImg {height:170px;} }