/*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 {} .agree input + label {cursor:pointer;} .agree a {cursor:pointer;} .flex {display:flex;} .flexCenter {display:flex; align-items:center;} .flexBetween {display:flex; align-items:center; justify-content:space-between;} /***************header*************/ #header { width:100%; z-index:998; /*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 .hevent {} #header .hevent a {padding:10px 0; display:flex; align-items:center; justify-content:center; gap:5px; background:#0A0B0B; color:#83A6F3; font-size:15px;} #header .hevent a .point {} #header.scroll {position:fixed; top:0; left:0; /*left:50%; transform:translate(-50%,0);*/} #header .hmenuWrap { } #header .hmenuWrap .hmenu { padding:0; width:100%; background-color:white; box-shadow:3px 1px 10px rgba(0,0,0,0.1);} #header .hmenuWrap .hmenu ul { max-width:420px; margin:0 auto;} /*#header .container { position:relative; display:flex; justify-content: space-between; align-items: center; padding:15px 15px 0 15px; max-width:100%; background:#fff;}*/ .con420 {max-width:420px; margin:0 auto;} .relative {position:relative; } #header .hlogo .con420 {display:flex; align-items:center; flex-direction:column; padding:0 15px 10px 15px;} #header .hlogo .con420 .hlogoRight {display:flex; align-items:center; gap:7px;} #header .hlogo .logo {margin:14px auto; width:180px; position:relative; /*left:-10px;*/ } #header .hlogo .logo a {display:block;} #header .hlogo a.hcall {display:none; position:absolute; top:53%; left:20px; transform:translate(0,-50%); width:25px;} #header .hlogo .msmsbtn a img { width: auto; height:36px; } .hSearchWarp .con420 {display:flex; align-items:center; justify-content:space-between; padding:0 15px 12px 15px;} .hSearchWarp .msmsbtn ul {display:flex; align-items:center; gap:5px;} .hSearchWarp .msmsbtn a img { width: auto; height:28px; } #header .container .htop-tit {position:relative; display:flex; align-items:center; gap:15px; padding:13px 0;} #header .container .mg-right {position:absolute; top:28px; right:20px; display:none;} #header .hmenu { width:100%; padding:0 14px 0 18px; margin:0 auto; /*max-width:420px; overflow:auto; */ } #header .hmenu ul {display:flex; gap:24px; justify-content:space-between; padding:0 40px; z-index:9;} #header .hmenu ul li a {position:relative; display:block; padding:12px 0; font-size:15px; font-weight:500; color:#262626; letter-spacing:-0.7px;} #header .hmenu ul li .hnbBtn {position:relative; display:block; padding:12px 0; font-size:15px; font-weight:600; color:#1a1a1a; letter-spacing:-0.7px;} #header .hmenu ul li .hnbBtn.on {color:#D40022;} #header .hmenu ul li:last-child a {} #header .hmenu ul li a.on {color:#D40022; font-weight:bold;} /*#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 .hmenu li.drop {position:relative; } #header .hmenu li.drop .hnbDrop {display:none; position:absolute; top:43px; left:50%; transform:translate(-50%,0); z-index:999; background:rgba(0 0 0 / 70%); flex-direction:column; gap:0; justify-content:end;} #header .hmenu li.drop .hnbDrop a{ padding:10px 0; font-size:13px; font-weight:500; color:#fff;} #header .hback { transform:rotate(90deg); width:20px; height:20px;} #header .hback button {background:none; border:none;} #header .container .mg-right .subMenuWrap { position:relative; } #header .burger-icon { width: 20px; height:20px; cursor: pointer; display: inline-block; user-select: none; } #header .burger-icon .burger-sticks {background: #333; display: block; height: 2px; position: relative; transition: background .2s ease-out; width: 20px; margin-top:8px;} #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:104px; 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;} #header .menu .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; background:#fff;} #header .menu .msmsbtn li a {display:block;} #header .menu .msmsbtn li a img { width: auto; height:40px; } /*검색*/ /*.search {position:absolute; top:50%; right:10px; transform:translate(0,-50%); padding:10px 13px; background:#EBEBEC; border-radius:7px; max-width:90px;} .search {position:relative; top:1px; padding:10px 13px; background:#EBEBEC; border-radius:7px; max-width:160px;}*/ .search {padding:10px 13px; background:#EBEBEC; border-radius:7px; } .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:#0A0B0B; 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; } } .gnaAgree {width: 100%;} .gnaAgree label {gap: 3px;} .gnaAgree input[type="checkbox"] {display: none; appearance: none;} .gnaAgree input[type="checkbox"] + label {position: relative; padding-left: 23px; cursor: pointer; font-size:13px;} .gnaAgree input[type="checkbox"] + label:before {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 17px; height: 17px; border-radius: 2px; border: 1px solid #d4d4d4; box-sizing: border-box; background: url('/_img/ico_check.png') no-repeat 60% 60% #fff; background-size: 13px;} .gnaAgree input[type="checkbox"]:checked + label:after {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 17px; height: 17px; border-radius: 2px; border: 1px solid #000; box-sizing: border-box; background: url('/_img/ico_check_blue.png') no-repeat 60% 60% #fff; background-size: 13px;} .gnaAgree a {font-size:13px;} .gnaAgree .all input + label {display:flex; align-items:center; gap:15px; justify-content:space-between;} .gnaAgree .fc-gray { color:#737373;} /*법인전용*/ #copConsult {padding:0 20px; margin:60px 0;} #copConsult .container {position:relative; padding:30px 20px; /*box-shadow:0 3px 10px rgb(0 0 0 / 15%); border:1px solid #ededed;*/ letter-spacing:-0.5px; border-radius:20px; border:1px solid #e5e5e5; } #copConsult .tit {display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;} #copConsult .tit .img {width:80px;} #copConsult .tit h3 {font-size:13px; color:#111111; font-weight:400; padding:0 0 0 1px;} #copConsult .tit h2 {margin:3px 0 0 0; font-size:22px; font-weight:800; letter-spacing:-1.5px;} #copConsult p {font-size:13px; line-height:1.4; font-weight:500; color:#4D4D4D;} #copConsult p .fc-pp {color:#D40022;} #copConsult form .formList {margin-bottom:15px;} #copConsult form .formList li {margin-bottom:5px; position:relative; } #copConsult form .formList li:last-child {margin-bottom:0;} #copConsult form .formList li label {position:absolute; top:18px; left:21px; font-size:13px;} #copConsult form .formList li input {width:100%; padding:35px 20px 20px; border:1px solid #cccccc; font-size:14px;} #copConsult form .formList li input:placeholder {color:#B0B0B2; } #copConsult form .formList li textarea {width:100%; padding:35px 20px 20px; border:1px solid #cccccc; font-size:14px;} #copConsult form .formList li textarea:placeholder {color:#B0B0B2; } #copConsult .gnaAgree {margin:20px 0; letter-spacing:-0.5px;} #copConsult .gnaAgree li {margin-bottom:5px;} #copConsult .gnaAgree li:last-child {margin-bottom:0;} #copConsult .gnaAgree li.all {margin-bottom:10px; padding:0 0 10px 0; border-bottom:1px solid #ccc;} #copConsult .gnaAgree li.all input[type="checkbox"] + label {color:#000; font-size:15px; font-weight:600; width:100%;} #copConsult .gnaAgree .fc-gray {font-size:12px; font-weight:400; opacity:0.7;} #copConsult .gnaAgree a {color:#4d4d4d;} #copConsult button { padding:18px 0; width:100%; font-size:18px; background:#D40022; color:#fff; border-radius:10px; text-align:center; font-weight:bold; letter-spacing:-0.5px;} #copConsult .gnaAgree input[type="checkbox"] + label {color:#4d4d4d;} #copConsult .gnaAgree input[type="checkbox"] + label:before {width: 20px; height:20px; top:43%; border:none; background: url('/_img/cop_agree.png') no-repeat #fff; background-size: contain;} #copConsult .gnaAgree input[type="checkbox"]:checked + label:after {width: 20px; height:20px; top:43%; border:none; background: url('/_img/cop_agree_check.png') no-repeat #fff; background-size: contain;} .carviewtop {position:fixed; top:39px; left:50%; transform:translate(-50%,0); width:100%; background:#fff; z-index:999; box-shadow:3px 2px 3px rgba(0 0 0 / 5%);} .carviewtop .wrapbox {display:flex; align-items:center; justify-content:space-between; padding:12px 20px; max-width:460px; margin:0 auto;} .carviewtop .viewtit {position:relative;} .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:7px; background:#D40022; border-radius:3px; gap:4px; font-size:12px;} .carviewtop .viewtitbtn a img {margin:0 5px 0 auto; width:25px;} /* h2.upLine {margin-top:20px; text-align:center;} h2.upLine span {position:relative; display:inline-block;} h2.upLine span:before {content:''; position:absolute; top:-13px; left:50%; transform:translate(-50%,0); width:107%; height:4px; background:#D40022;} #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:#D40022; border-radius:3px; z-index:999; } */ /***************main*************/ .max420 {max-width:420px; margin:0 auto; } .fc-g {color:#D40022;} .fc-gg {color:#D40022;} /*visual*/ #mvisual {margin:15px auto 10px auto; padding:0 15px; } #mvisual .swiper {padding-bottom:30px;} #mvisual .swiper-slide a {display:block; height:110px; border-radius:12px; overflow:hidden;} #mvisual .swiper-slide a img {width:100%; height:100%; object-fit: cover;} .visualSwiper {position:relative !important; overflow:hidden; z-index:9; } .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:-30px !important; z-index:999; text-align:center;} .visualSwiper .visualswiper-pagination span {width:10px; height:10px; background:#d1d1d1; opacity:1 !important;} .visualSwiper .visualswiper-pagination span.swiper-pagination-bullet-active {background:#D40022;} #visulSm .swiper {padding:0 15px;} #visulSm .list a {display:block; width:100%; height:96px; border-radius:10px;} .swiper.visualSwiperSub {padding:0 20px; } #mbnFaq {padding:0 20px;} #Metc {padding:0 20px;} a.etcBtn {display:block; width:100%; height:146px; background:url('') no-repeat center center / cover; border-radius:20px; /*box-shadow:3px 5px 5px rgba(0 0 0 / 15%);*/ border:1px solid #f5f5f5;} .bntit h2 {margin-bottom:7px; text-align:center; font-size:26px;} .bntit p {font-size:15px; font-weight:500; color:#737373; line-height:1.3;} /*mSale*/ #mSale {margin:40px auto;} #mSale .container {padding:0 25px;} #mSale .mSaleGrid {margin-top:20px; display:grid; grid-template-columns: repeat(2, 1fr); gap:24px 12px;} #mSale .list .carthumbs {margin-bottom:12px; width:100%; height:150px; background:#f5f5f5; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;} #mSale .list .carthumbs img {width:100%; height:fit-content;} #mSale .list h2 {font-size:18px; font-weight:600; } #mSale .list .price .cancel {display:block; margin:10px 0 4px 0; font-size:18px; font-weight:300; color:#737373; text-decoration:line-through;} #mSale .list .price h5 {display:flex; align-items:center; gpa:5px; font-size:14px; font-weight:300; color:#404040;} #mSale .list .price h5 .big {font-size:22px; font-weight:900;} #mSale .ppinfo {margin:30px 0 15px;} /*mPartner*/ #mPartner {margin:60px auto 20px auto; padding:40px 0; background:#F8F8F8;} #mPartner .mPartnerGrid ul {margin-top:25px; padding:0 20px; display:grid; grid-template-columns: repeat(3, 1fr); gap:7px 30px;} /* fastConsult */ #fastConsult { width: 100%; margin: 18px 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; } #visualBtn .container {display:none; padding:0 20px; display:flex; align-items:center; gap:10px;} #visualBtn a {display:block; width:100%; height:100px; border-radius:15px;} /* mbn */ #mbn{padding: 0 20px;} #mbn .mbnwrap {display: flex; justify-content: space-between; border-radius: 20px; background: #D40022;} #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:#D40022;} #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');} /*인기 최저가*/ #main #mBest .bntit {margin-bottom:20px;} #main #mBest .bntit h2 {/*letter-spacing:1px;*/} #mBest .container {position:relative;} #mBest ul { margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:7px; } #mBest ul li a {display:block; padding:7px 20px; font-size:14px; letter-spacing:-0.5px; border:1px solid #e3e3e3; border-radius:5px; font-weight:400;} #mBest ul li.active a { background:#D40022; border:1px solid #D40022; color:#fff;} #mBest .swiper {padding:0 20px;} #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:10px; font-size:24px; font-weight:bold; text-align:center;} #main .bntit h2 {margin-bottom:5px; font-size:26px; font-weight:bold; letter-spacing:-2px;} #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; justify-content:center; font-size:15px; gap:10px; color:#B9BBBD;} #main .bntit .nationBtnWrap ul li input { appearance: none; display:none;} #main .bntit .nationBtnWrap ul li input[type="radio"]:checked + label { color: #D40022; } #mExclusive {padding:60px 20px;} #mExclusive .tit {} #mExclusive .tit h2 {position: relative; font-size: 24px; font-weight: 800; text-align:center;} #mExclusive .tit h2 .img {display:none; position: absolute; top: 3px; right: -23px; max-width: 24px;} #mExclusive .ppinfo {margin:5px auto 15px auto; color:#737373; font-size:14px;} #mExclusive .ppinfo .bold {color:#686868;} /*제조사별*/ #mCompany {margin:60px 0;} #mCompany .container {position:relative;} #mCompany .container .horizontal {position:relative; display:flex; align-items:center; justify-content:center;} #mCompany .container .horizontal li a {padding:0 10px; font-size:16px; font-weight:bold; color:#B9BBBD;} #mCompany .container .horizontal li.active a {color:#D40022;} #mCompany .container .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 20px -10px; /*overflow:initial;*/} #mCompany .cswiper .swiper-slide {width:66px; margin:20px 0; } #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:15px; color:#8c8c8c; font-weight:500; cursor:pointer; margin:0 15px; white-space: nowrap;} #mCompany .cswiper .list a .img ,#mCompany .cswiper label.list .img {display:flex; align-items:center; justify-content:center; width:66px; height:66px; background:#fff; border:1px solid #d1d1d1; border-radius:100%; text-align:center;} #mCompany .cswiper .list a .img img ,#mCompany .cswiper label.list .img img {width:70%;} #mCompany .cswiper .list a.on .img ,#mCompany .cswiper label.list.active .img ,#mCompany .cswiper input[type="radio"]:checked + label.list .img {background:#d1d1d1; border:1px solid #d1d1d1; } #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: opacity(0.9) drop-shadow(0 0 0 white) grayscale(1) brightness(100);*/ } #mCompany .cswiper .swiper { padding:0 20px; } #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 {} #mCompany .comcon .list-wrap .swiper-slide {width:150px; text-align:center; } #mCompany .comcon .list-wrap .swiper-slide h3 {font-size:15px; margin-top:10px;} #mCompany .comcon .list-wrap .list a {text-align:center; padding:15px 0; } #mCompany .comcon .list-wrap .list a .img {margin:0 auto 10px 0; width:150px; height:80px; display:flex; align-items:center;} #mCompany .comcon .list-wrap .list a:hover .img img {transform: scale(1.1); transition:all 1s;} #mCompany .comcon .list-wrap .list a h3 {font-size:16px; font-weight:600;} @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:60px 0 40px 0; } #mPrice .tabs ul ,#mPrice .tabs .horizontal {margin:10px 0 20px 0; display:flex; flex-wrap:wrap; gap:8px; /*overflow-x:scroll;*/ padding:0 5px 10px 0;} #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:12px 0; font-size:12px; line-height:13px; font-weight:bold; border-radius:500px; background:#F8F8FA; box-sizing:border-box; width:23%; text-align:center;} #mPrice .tabs ul li.active a ,#mPrice .tabs .horizontal input[type="radio"]:checked + label {background:#D40022; color:#fff; border:none;} #mPrice .pswiper .swiper-slide { width:150px; } #mPrice .ppinfo {margin-top:10px; background:#f2f2f2; padding:10px; border-radius:5px; width:95%; max-width:360px; position:relative; left:50%; transform:translate(-50%,0);} .ppswiper {margin:22px auto 15px auto;} .ppswiper .swiper-container {overflow: visible;} .ppswiper .swiper {padding:0 20px;} .ppswiper .swiper-slide {width:fit-content !important;} .ppswiper input {appearance:none; display:none; } .ppswiper input + label {display:block; padding:11px 26px; font-size:12px; line-height:13px; font-weight:500; border-radius:500px; background:#333; color:#fff; box-sizing:border-box; text-align:center;} .ppswiper input:checked + label {background:#D40022; color:#fff; border:none; font-weight:700;} .pswiper .swiper {padding:0 20px 20px 20px;} .pswiper .swiper-scrollbar {width:90% !important; left:50% !important; transform:translate(-50%,0);} .pswiper .swiper-scrollbar-drag {background:#616161;} /* faq */ #faq{width: 100%; margin: 40px auto 0 auto; padding: 40px 25px 25px 25px; background: #EAF0EB;} #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: #D40022;} #faq .faqList .que.on>span{color: #D40022; 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;} #fbnInfo {padding:0 15px;} #fbnInfo ul {display:flex; align-items:stretch; gap:10px; } #fbnInfo ul li {width:50%; /* box-shadow:3px 5px 7px rgb(0 0 0 / 20%); border-radius:15px; */} #fbnInfo .fbnBox a { position:relative; display:block; padding:20px; text-align:center; color:#4D4D4D;} #fbnInfo .fbnBox a .ico {margin:0 auto 25px auto; width:50px;} #fbnInfo .fbnBox a h3 {font-size: 16px; font-weight:600;} #fbnInfo .fbnBox a h2 {margin:5px auto 15px auto; font-size:24px; letter-spacing:-1px; font-weight:700;} #fbnInfo .fbnBox a p {font-size:15px;} #fbnInfo .fbnBox a {font-size: 20px; font-weight: 600;} #fbnInfo .fbnBox a .flex {align-items:center; justify-content:center; gap:5px;} #fbnInfo .fbnBox a .flex .arrow {font-size:16px;} #fbnInfo .fbnBox.consulting {margin-bottom:5px; background:#D8E3DA; border-radius:15px;} #fbnInfo .fbnBox.consulting a {position:relative; padding:30px; display:flex; align-items:center; justify-content:space-between;} #fbnInfo .fbnBox.consulting .round {margin:0 auto 10px auto; display:inline-block; padding:5px 15px; font-size:13px; font-weight:400; border-radius:50px; background:#D40022; color:#fff;} #fbnInfo .fbnBox.consulting h2 {margin:7px auto 25px auto; } #fbnInfo .fbnBox.consulting .img {position:absolute; width:120px; bottom:0; right:10px;} #fbnInfo .fbnBox.consulting p{color:#9A9A9A;} #fbnInfo .fbnBox.kakao a, #fbnInfo .fbnBox.call a {} #fbnInfo .fbnBox.kakao {background:#D9D9D9;} #fbnInfo .fbnBox.call {position:relative; top:1px; background:#D40022;} #fbnInfo .fbnBox.call a {color:#fff;} #fbnInfo .fbnBox.call p { font-size:20px; letter-spacing:-2px;} #fbnInfo .fbnGrid {display:grid; gap:8px; grid-template-columns: 1fr 1fr;} #fbnInfo .fbnGrid li { grid-column: 1 / span 2; } #fbnInfo .fbnGrid li {width:100%;} #fbnInfo .fbnGrid li a {position:relative; display:block; /* border-radius:15px; */ overflow:hidden;} #fbnInfo .fbnGrid li a p {display:none; position:absolute; bottom:14%; left:11%; font-size:18px; font-weight:800; color:#fff; letter-spacing:-1px; } /* review */ #main #review{margin:40px 0; padding: 50px 20px; background:#F2F2F2;} #main #review .bntit {margin-bottom:20px;} #review .list a {display:block; background:#fff; border-radius:10px; overflow:hidden;} #review .list .txt {padding:20px 15px;} #review .list .txt h3 {margin:15px 0 5px 0; font-size:18px; height:42px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #review .list .txt p { color:#939393; font-size:14px; height:38px; line-height:1.4; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #review .list .mark {display:flex; align-items:stretch; justify-content:space-between;} #review .list .mark .rmark {padding:4px 6px; font-size:12px; background:#F9F9F9; border:1px solid #ededed; color:#686868; border-radius:3px;} #review .list .mark .bmark {width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; border-radius:3px; background:#D40022; color:#fff;} #review .list .thumbImg {height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 10px 20px 10px;} #review .list .thumbImg img { width:100%; height:100%; object-fit: cover;} #main #review .list .thumbImg img {width:100%;} .reviewSwiper .eva {display:flex; align-items:center; justify-content:space-between;} .reviewSwiper .eva .mark {display:inline-block; padding:5px 10px 6px 10px; font-size:12px; font-weight:500; color:#D40022; border:1px solid #D40022; border-radius:4px;} .reviewSwiper .eva .star {position:relative; top:-1px; display:flex; align-items:center; gap:2px; } .reviewSwiper .eva .star img {width:12px;} .markWrap{display: flex; align-items: center; gap: 4px; width: 100%;} .markWrap span{display: block; width: 72px; padding: 8px 10px; border-radius: 5px; text-align: center; color: #fff; font-size: 13px; line-height: 13px; white-space: nowrap;} .markWrap span.saleMark{background: #D40022;} .markWrap span.fastMark{background: #D40022;} .markWrap span.popularMark{background: #534E4E;} .ppinfo {margin:10px 0 15px; font-size:12px; line-height:19px; color:#686868; font-weight:400; text-align:center;} /*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 #D40022; 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:#D40022; 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; border:1px solid #eee; background:#fbfbfb; border-radius:10px;} .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:5px;} .carList2 .list a .img img {width:100%;} .carList2 .list a .text-con {display:flex; gap:10px; align-items:flex-start; width:75%;} .carList2 .list a .text-con .text h4 {display:flex; align-items:center; gap:3px; margin-bottom:3px; font-size:14px; font-weight:bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#6A6565;} .carList2 .list a .text-con .text h4 .num {font-weight:700;} .carList2 .list a .text-con .text p {font-size:13px; height:30px; overflow:hidden; color:#534E4E;} .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 .list a .arrow {position:relative; right:-5px;} .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:#D40022; 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:-10px !important;} .carList3 .swiper-pagination-clickable .swiper-pagination-bullet {background:#000;} .carList3 .list {padding:10px 20px 30px 20px;} .carList3 .list a {position:relative; display:block; } .carList3 .list a .onlyMark{position: absolute; top:15px; right:15px; width:80px; z-index:99;} .carList3 .list .inlist {box-shadow:0 3px 10px rgb(0 0 0 / 15%); border-radius:20px; overflow:hidden;} .carList3 .list .img {padding:30px 0 0 0; width:100%; height:190px; display:flex; align-items:center; background:#F9F9F9; } .carList3 .list .img img {position:relative; top:10px; width:100%; max-width:300px; margin:0 auto;} .carList3 .list:hover .img img {transform: scale(1.1); transition:all 1s;} .carList3 .list .text {width:100%; padding:25px; } .carList3 .list h3 {margin:12px 0 5px 0; font-size:23px; 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 { margin-top:14px; display:flex; align-items:center; gap:10px;} .carList3 .list .price h5 {font-size: 24px; font-weight: 700; letter-spacing: -1px;} .carList3 .list .price .cancel {color: #bbb; font-size: 14px; text-decoration: line-through;} .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:150px; height:80px; display:flex; align-items:center;} .carList5 .list a:hover .img img {transform: scale(1.1); transition:all 1s;} .carList5 .list a h3 {margin:10px 0 5px 0; font-size:16px; font-weight:bold; text-align:center; } .carList5 .list a small {text-align:center; } .carList5 .list a p {font-size:14px; color:#4d4d4d; font-weight:500;} .carList5 .pswiper {position:relative;} .carList5 .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%; 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');} /* mTV */ #mTv {margin:60px auto;} #mTv .tit {margin-bottom:25px; display:flex; align-items:center; gap:15px; justify-content:center;} #mTv .tit h2 {font-size:26px; font-weight:700;} #mTv .tit .logo {width:32px;} #mTv .youtubeSwiper {padding:0 15px;} #mTv .youtubeSwiper .list {border-radius:12px; overflow:hidden;} #mTv .youtubeSwiper-pagination{margin-top:17px; width: 100%; line-height:0; text-align:center;} #mTv .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #D40022;} #mTv .swiper .list a .img {display:flex; align-items:center; height:103px; overflow:hidden;} /*mbnSearch*/ #mbnSearch {position:relative;} #mbnSearch .video {position:relative; width:100%; height:220px; display:flex; align-items:center; justify-content:center; overflow:hidden;} #mbnSearch .video .cover {position:absolute; width:100%; height:100%; background:rgba(0 0 0 / 40%); z-index:2;} #mbnSearch .video video {width:100%;} #mbnSearch .container {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; z-index:3;} #mbnSearch .txt {padding-top:45px; color:#fff;} #mbnSearch .txt h2 {font-size:24px; font-weight:700;} #mbnSearch .txt h3 {margin:20px 0 15px 0; font-size:19px; font-weight:400;} #mbnSearch .txt a {display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:12px 0 11px 0; width:200px; background:rgba(0 0 0 / 60%); border:1px solid #fff; border-radius:8px; font-size:16px; font-weight:500; color:#fff;} #mbnSearch .txt a .ico {margin-left:-5px; width:24px; } #mbnSearch .txt a:hover {background:rgba(0 0 0 / 100%); border:1px solid #D6151A; } /*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; } #fEvent .container {margin-top:5px; display:flex; justify-content:space-between; align-items:center; gap:5px; flex-direction:column;} #fEvent .container a {width:100%; height:350px; border-radius:10px; overflow:hidden;} #fEvent .container a:hover img {transform: scale(1.1); transition:all 1s; } /*footer*/ #footer {margin-top:30px; padding:0 0 140px 0; background:#2F2F2F;} #footer .term {margin-bottom:20px; background:#4d4d4d;} #footer .term .container {display:flex; gap:25px; justify-content:center; } #footer .term .container a {padding:15px 0; display:block; font-size:12px; line-height:12px; color:#fff;} #footer .term .container a:hover {opacity:0.8;} #footer .foot {font-size:14px; line-height:1.6; color:#DFDFDF; text-align:center;} #footer .foot p {margin:20px 0; font-size:12px; color:#949494; } #footer .foot span { font-size:12px; display:inline-block; width:100%; box-sizing:border-box; white-space:nowrap;} #footer .foot .copyright {margin-top:15px; font-size:12px; opacity:0.8;} #footer pre {text-align:center; font-size:13px; line-height:12px; margin-left:-80px;} /*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:#D40022; color:#fff; border:2px solid #D40022;} #fquick ul li a.btn2 {background:#fff; color:#D40022; border:2px solid #D40022;} #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 ul {/*max-width:420px; margin:0 auto;*/ display:flex; justify-content:space-around; align-items:end;} #fbtn ul li a {position:relative; padding:17px 0 23px 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;} #fbtn ul li a .ico .off {display:block;} #fbtn ul li a .ico .on {display:none;} #fbtn ul li a .ico.on .off {display:none;} #fbtn ul li a .ico.on .on {display:block;} .fc-b {color:#D40022 !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:89px; 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:#D40022; 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:46vh; overflow-y:scroll; padding:40px 30px 10px 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:flex-start;} .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 #D40022; 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;} #mCounsel {margin:20px auto; padding:0 15px;} #mCounsel .max420 {padding:35px 20px; background:#F2F2F2; /*box-shadow:2px 3px 3px rgba(0 0 0 / 0.3);*/ border-radius:12px;} #mCounsel .tit .logo { width:80px; margin:0 auto 10px auto;} #mCounsel .tit h2 {font-size:18px; font-weight:400; color:#4D4D4D;} #mCounsel .tit h2 .bold {color:#000;} .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; padding:14px; width:100%; background:url('../_img/sselect_arrow.png') no-repeat 95% center #fff ;background-size:13px; font-size:14px; color:#aeaeae; border:1px solid #EFEFEF; border-radius:10px;} .mEstimateview a.submit {display:block;padding:15px 5px; margin-top:15px; width:100%; background:#D40022; font-size:18px; font-weight:bold; border-radius:10px; 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 {margin-bottom:5px; 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 .formList li {display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;} #consultpop.cp-style-1 .consultform form .formList li label {width:80px; font-size:15px; color:#1a1a1a; font-weight:700; } #consultpop.cp-style-1 .consultform form .formList 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:#D40022;} /*2025 팝업스타일*/ #consultpop.cp-style-2 .consultform {padding:20px;} #consultpop.cp-style-2 .formList .ns {color:#e3222a;} #consultpop.cp-style-2 .formList {display:flex; flex-direction:column; gap:12px; padding:0 0 15px 0; border-bottom:1px solid #e5e5e5;} #consultpop.cp-style-2 .formList li {display:flex; flex-direction:column; gap:5px; font-size:14px; font-weight:500; color:#222;} #consultpop.cp-style-2 .formList li input {padding:12px 14px; background:#F7F8FA; border-radius:8px;} #consultpop.cp-style-2 .formList li .subdate {padding:12px 14px; background:#E4E6EB; border-radius:8px;} #consultpop.cp-style-2 .formList li input:placeholder {color:#a3a3a3;} #consultpop.cp-style-2 .popAgree {padding:20px 0;} #consultpop.cp-style-2 button.goBtn {display:block; width:100%; padding:20px 0; text-align:center; color:#fff; background:#D40022; font-size:18px; font-weight:700; border-radius:8px;} .popAgree .nns {color:#D40022;} .popAgree .fc-gray {margin:8px 0 0 0; display:block; color:#737373; font-size:11px; } .popAgree ul {display:flex; flex-direction:column; gap:5px;} .popAgree ul li {padding: 0 0 0 15px;} .popAgree ul li.all {margin-bottom:7px; padding:15px; border:1px solid #e5e5e5; border-radius:5px;} .popAgree ul li.all input + label {font-size:13px; font-weight600;} .popAgree input {display:none; appearance:none;} .popAgree input + label {display:block; cursor:pointer; position:relative; padding:0 0 0 20px; font-size:12px; font-weight:400; letter-spacing:-0.5px;} .popAgree input + label:before {content:''; position:absolute; top:0; left:0; width:16px; height:16px; background:url('/_img/ico_check_basic.png') no-repeat center #fff; background-size:contain;} .popAgree input:checked + label:before {background:url('/_img/ico_check_red.png') no-repeat center #fff; background-size:contain;} .popAgree .arrow {font-size:15px; color: #a4a4a4;} .popAgree .all input + label {display:block; cursor:pointer; position:relative; padding:0 0 0 20px; font-size:12px; font-weight:400; letter-spacing:-0.5px;} .popAgree .all input + label:before {content:''; position:absolute; top:0; left:0; width:16px; height:16px; background:url('/_img/ico_check_white.png') no-repeat center #d3d3d3; background-size:contain; border-radius:3px;} .popAgree .all input:checked + label:before {background:url('/_img/ico_check_white.png') no-repeat center #D40022; background-size:contain;} /*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 .formList {position:relative;} #cousultpage #consultpop.cp-style-1 .consultform form .formList 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 .formList li input {border:1px solid #e2e2e2;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li > label {width:100%; font-size:16px; font-weight:bold; margin-bottom:5px; letter-spacing:-0.5px;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li {flex-direction:column; gap:3px; margin-bottom:20px;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li.row {flex-direction:row; align-items:center;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li.row > label {width:90px; margin-bottom:0 !important;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li.info {margin:25px 0; flex-direction:row; gap:3px;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li.info > label {width:90px; margin:0; } #cousultpage #consultpop.cp-style-1 .consultform form .formList li.info span > label {width:50px; font-size:15px;} #cousultpage #consultpop.cp-style-1 .consultform form .formList li input {width:100%;} #cousultpage #consultpop.cp-style-1 .consultform form .formList 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 li {margin-bottom:5px !important;} #cousultpage #consultpop.cp-style-1 .agree input[type="checkbox"] + label {font-size:13.5px; color:#222;} #cousultpage #consultpop.cp-style-1 .agree label {width:auto !important; font-weight:400;} #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; display:flex; gap:10px; font-size:13px; letter-spacing:-0.5px; color:#1a1a1a;} #consultpop.cp-style-1 .agree span.agree-link-pop {color:#8c8c8c; } #consultpop.cp-style-1 .agree input[type="checkbox"]{appearance:none; display:none;} #consultpop.cp-style-1 .agree input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:25px; cursor:pointer; } #consultpop.cp-style-1 .agree input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:-1px; width:17px; height:17px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ccc;} #consultpop.cp-style-1 .agree input[type="checkbox"]:checked + label:before {background:#000; border:none;} #consultpop.cp-style-1 .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(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #consultpop.cp-style-1 .agreecon {display:block; padding:0 15px; height:85px; overflow-y:scroll; border:1px solid #c1c1c1; overflow-x:hidden;} #consultpop.cp-style-1 button { position:absolute; left:50%; bottom:0; transform: translate(-50%, 0); display:block; padding:15px 0; width:100%; background:#D40022; color:#fff; font-size:18px; font-weight:600; letter-spacing:-1px; text-align:center;} /*즉시출고 팝업 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; left:50%; transform:translate(-50%,0); padding:20px 20px 15px 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;} #consultpop.sevenpop .agree label {width:auto !important; font-size:14px !important; font-weight:400 !important;} .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 .formList li {flex-direction:column; align-items:flex-start; gap:5px;} #consultpop.sevenpop .consultform form .formList 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; display:flex; 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:17px; 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:67px; } #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;} /*견적확인하기 팝업*/ /* .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:hover {border:2px solid #D40022;}*/ .subcarList .list.on {border:2px solid #D40022;} .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:#292D32; color:#fff; border-radius:500px;} .subcarList .list .ab .seven {padding:5px 12px; font-size:12px; line-height:12px; background:#292D32; 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%;} .subcarList .list .promotxt .txt {display:flex; align-items:center; gap:4px;} .subcarList .list .promotxt .plusinfo {position:relative; cursor:pointer;} .subcarList .list .promotxt .plusinfo .qico { width:18px;} .subcarList .list .promotxt .plusinfo .qtxt {display:block; position:absolute; top:-8px; left:26px; z-index:99; background:rgba(0 0 0 / 70%); padding:7px 15px; border-radius:3px; filter:drop-shadow(3px 3px 3px rgba(0 0 0 / 15%)); font-size:13px; color:#fff; line-height:1.4; white-space:nowrap; text-align:left;} .subcarList .list .promotxt .plusinfo:hover .qtxt {display:block;} .subcarList .list .promotxt .plusinfo .qtxt:after {content:''; position:absolute; top:11px; left:-12px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid transparent; border-right:8px solid #000;; z-index:8; opacity:0.7;} .subcarList .list .promotxt .plusinfo:hover .qtxt p {} .subcarList .list .promotxt .wonFlex {display:flex; align-items:center; gap:1px; } #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 {display:inline-flex; border-radius:7px; font-size:13px; color:#fff; gap:5px; align-items:center;} #immcarPop .subcarList .plusbtn .plus {display:inline-block; width:14px; height:14px; line-height:13px; background:#fff; color:#D40022; 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:#D40022; 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:#D40022; border-radius:5px; color:#fff; font-size:16px; font-weight:500; letter-spacing:-1px;} #immcarPop .detail a:hover {background:#00c4ec; transition:all 0.5s;} /*7일인도 특가 - 위 팝업 내용과 스타일 동일*/ #sub .subcarList {display:flex; flex-wrap:wrap;} #sub .subcarList .list {border:none; background:#fff; width:100%; padding:20px; max-width:420px; margin:0 auto; border-radius:0;} #sub .subcarList .list a {display:flex; flex-basis:100%; flex-direction:row; padding:0; align-items:center; gap:10px; } #sub .subcarList .list > a {width:100%; } #sub .subcarList .list a h3 {font-size:18px;} #sub .subcarList .list a .option li {font-size:13px; line-height:18px;} #sub .subcarList .list a .price li {font-size:13px; line-height:18px;} #sub .subcarList .list a .price li .name {width:55px;} #sub .subcarList .list a .price li .won {font-size:130%;} #sub .subcarList .list a .ab {left:0;} #sub .subcarList .list a .img {width:50%;} #sub .subcarList .list a .img img { border:none !important;} #sub .subcarList .list .btn {display:flex; justify-content:space-between; gap:10px;} #sub .subcarList .list .btn a {/*margin-top:20px;*/ padding:12px; display:flex; width:100%; justify-content:center; font-size:16px; font-weight:600; color:#D40022; border:1px solid #D40022; box-sizing:border-box; border-radius:5px;} #sub .subcarList .list .btn a:hover {background:#e4faff; transition:all 0.5s;} #sub .subcarList .list .btn a.bg {background:#D40022; color:#fff;} #sub .subcarList .list .btn a.bg:hover {background:#0095b4; 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 15px; border-bottom:1px solid #e6e6e6;} #sub .seven-tit h3 {font-size:20px; font-weight:600;} #sub .seven-tit h5 {margin-bottom:5px; font-size:15px; letter-spacing:-0.5px; font-weight:400; color:#AEAEAE;} #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;} .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:#D40022; 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; background-position:center !important;} .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:#D40022; color:#fff; gap:7px; align-items:center;} .seven-list .plusbtn .plus {display:inline-block; width:14px; height:14px; line-height:13px; background:#fff; color:#D40022; 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:#D40022; color:#fff; gap:7px; align-items:center;} .seven-list .plustit .plus {display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; line-height:17px; background:#fff; color:#D40022; border-radius:100%; text-align:center;} .seven-list .plustit .plus .plusimg {width:11px;} .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 #D40022; 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 #D40022; 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:9px; } .seven-list .plusbtn .plusview li .name .txt {width:135px;/*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ font-size:12px; line-height:1.4;} .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:#D40022; 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:#D40022; 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:#D40022; 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) { } /*my*/ .fc-bk {color:#1A1A1A;} .hAlarm { width:20px; display: inline-block; position:relative; /*position:absolute; top:20px; right:50px; width:20px;*/ } .hAlarm sup { position:absolute; top: -3px; right: -3px; background-color: #3651E0; font-weight: bold; color: white; border-radius: 50%; width: 10px; height: 10px; font-size: 8px; line-height: 10px; text-align: center; } #my { padding:0 0 80px; letter-spacing:-0.5px;} #my .container {padding:0 22px;} #my .gap {display:block; width:100%; height:10px; background:#F7F7F7;} #my .pagination {margin:35px 0;} #my .loginInt {padding:35px 22px 25px 22px; } #my .loginInt h2 {display:flex; align-items:center; gap:5px; font-size:22px; line-height:22px; font-weight:700; color:#2B2B2B; letter-spacing:-1px;} #my .loginInt h2 .logo {width:78px;} #my .loginInt p {margin:14px 0 30px 0; font-size:14px; font-weight:500; color:#585858; } #my .loginInt a.loginBtn {display:block; padding:20px 0; width:100%; border-radius:5px; background:#1C4FE6; color:#fff; text-align:center; font-size:14px; font-weight:600; } #my .loginInt .after {display:flex; align-items:flex-start; justify-content:space-between;} #my .loginInt .after h2 {font-size:18px; font-weight:800; color:#D40022;} #my .loginInt .after p {margin:5px 0 0 0; font-size:14px; font-weight:500; color:#585858;} #my .loginInt .after a.infoBtn {display:inline-block; padding:8px 13px; background:#333; color:#fff; font-size:13px; line-height:16px; font-weight:700; border-radius:4px;} #my .loginInt .after a.outBtn {display:block; margin-top:10px; font-size:12px; font-weight:400; color:#AAAAAA; text-decoration:underline;} #my .myIndexList .list {position:relative; display:flex; align-items:center; gap:10px; padding:30px 22px; border-bottom:1px solid #ebebeb;} #my .myIndexList .list .ico {position:relative; width:24px;} #my .myIndexList .list .ico.new:after {content:''; position:absolute; top:2px; right:2px; width:7px; height:7px; border-radius:100%; background:#002BFF;} #my .myIndexList .list h3 {font-size:14px; font-weight:600; color:#2b2b2b; font-size:15px; } #my .myIndexList .list h3 .ver {margin-left:7px; font-size:12px; color:#AAAAAA; vertical-align:bottom;} #my .myIndexList .list a.update {position:absolute; top:50%; right:22px; transform:translate(0,-50%); display:inline-block; padding:8px 13px; background:#333; color:#fff; font-size:13px; line-height:16px; font-weight:700; border-radius:4px;} #my.loginIndex .title {margin:40px 0; text-align:center; } #my.loginIndex .title h2 {margin:5px 0 17px 0; font-size:40px; letter-spacing:-2px; font-weight:800; color:#1C4FE6;} #my.loginIndex .title h3 {font-size:22px; letter-spacing:-1px; font-weight:800; color:#2B2B2B;} #my.loginIndex .title p {font-size:14px; letter-spacing:-0.5px; font-weight:500; color:#585858;} #my.loginIndex .img {max-width:300px; margin:0 auto;} #my.loginIndex .loginList {margin:23px 0 30px;} #my.loginIndex .loginList li { margin-bottom:11px; } #my.loginIndex .loginList li a { padding:15px 5px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:4px; font-size:14px; font-weight:600;} #my.loginIndex .loginList li:last-child a {margin-bottom:0;} #my.loginIndex .loginList a .ico {width:28px;} #my.loginIndex .loginList a.kakao {background:#FAE64C; color:#2B2B2B;} #my.loginIndex .loginList a.apple {background:#181818; color:#fff;} #my.loginIndex .loginList a.google {background:#D8D8D8; color:#2B2B2B;} #my.login .loginInt p {margin:14px 0 0 0;} #my.login .myForm .mfList {gap:12px;} #my.login button.formBtn {margin:12px 0 0 0;} #my.findpw {padding:0 0 80px 0; } #my.joinAfter .myForm .mfList {margin-bottom:50px;} #my.myInfo .myForm .mfList {margin-bottom:50px;} #my .myForm .mfList {display:flex; align-items:center; flex-direction:column; gap:20px;} #my .myForm .mfList li {width:100%;} #my .myForm label { display:block; margin:0 0 10px 0; font-size:14px; color:#8C8C8C; } #my .myForm label small { color:red; } #my .myForm .myinput {display:flex; align-items:stretch; width:100%; padding:9px 10px; border:1px solid #e0e0e0; border-radius:5px; } #my .myselect {position:relative; display:flex; align-items:stretch; width:100%; padding:9px 25px 9px 10px; border:1px solid #e0e0e0; border-radius:5px; } #my .myselect select {width:100%; letter-spacing:-0.5px; background:transparent; color:#8c8c8c;} #my .myselect .selectArrow {position:absolute; top:50%; right:10px; transform:translate(0,-50%); width:12px; height:6px;} #my .myselect option {width:100%; padding:10px; } #my .myForm .myinput button {display:inline-block; padding:8px; max-width:93px; font-size:13px;} #my .myForm input {width:100%; font-size:14px; font-weight:500; color:#222; line-height:30px;} #my .myForm input:placeholder {color:#8C8C8C;} #my .myForm select {width:100%; font-size:14px; font-weight:500; color:#222; line-height:30px; color:#8C8C8C; cursor:pointer; } #my .myForm .caution {margin-top:7px; font-size:12px; color:#8C8C8C; font-weight:400;} #my .myForm .radioBox {display:flex; align-items:center; gap:23px;} #my .myForm .radioBox input { width:1px; opacity:0; /*display:none; appearance:none;*/ } #my .myForm .radioBox input + label { position:relative; display:inline-block; cursor:pointer; padding:0 27px 0 0; font-size:14px; color:#1A1A1A; font-weight:500;} #my .myForm .radioBox input + label:before {position:absolute; content:''; top:50%; right:0; transform:translate(0,-50%); width:18px; height:18px; border:1px solid #e0e0e0; border-radius:100%;} #my .myForm .radioBox input:checked + label:after {position:absolute; content:''; top:50%; right:5px; transform:translate(0,-50%); width:10px; height:10px; background:#D40022; border-radius:100%;} #my .otherList {margin:30px 0 40px 0; display:flex; align-items:center; justify-content:center;} #my .otherList li a {position:relative; padding:0 28px; font-size:14px; color:#8C8C8C; font-weight:400; letter-spacing:-0.5px;} #my .otherList li a:after {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:1px; height:9px; background:#8c8c8c;} #my .otherList li:first-child a:after {content:none;} #my button.formBtn, #my a.formBtn {display:block; width:100%; padding:15px 8px; font-size:14px; font-weight:700; white-space:nowrap; border-radius:4px; text-align:center; background:#E0E0E0; color:#fff;} #my button.formBtn.active, #my a.formBtn.active {background:#1C4FE6; color:#fff;} #my button.formBtn2, #my a.formBtn2 {display:block; width:100%; padding:15px 8px; font-size:14px; font-weight:700; white-space:nowrap; border-radius:4px; text-align:center; background:#E0E0E0; color:#fff;} #my button.formBtn2.active, #my a.formBtn2.active {background:#333333; color:#fff;} #my button.formBtn3 {display:block; width:100%; padding:15px 8px; font-size:14px; font-weight:700; white-space:nowrap; border-radius:4px; text-align:center; background:#333333; color:#fff;} #my button.formBtn4 {display:block; width:100%; padding:15px 8px; font-size:14px; font-weight:700; white-space:nowrap; border-radius:4px; text-align:center; background:#1C4FE6; color:#fff;} #my a.joinBtn {display:block; width:100%; padding:11px; border-radius:4px; background:#E8E8E8; font-size:14px; font-weight:700; color:#2B2B2B; text-align:center;} #my .loginSnb {position:relative; margin:20px 0;} #my .loginSnb h2 {font-size:20px; font-weight:700; letter-spacing:-0.5px; color:#2b2b2b;} #my .loginSnb p {margin:10px 0 0 0; color:#585858; font-size:12px; font-weight:400;} #my .loginSnb .lgProcess {position:absolute; top:0; right:0; padding:7px 0; display:inline-flex; align-items:center; justify-content:center; background:#F6F6F6; width:46px; font-size:12px; color:#393939; border-radius:30px; font-weight:600; letter-spacing:1px;} #my .loginSnb .lgProcess span {position:relative; right:-2px;} #my .myAgree input { width:1px; opacity:0; padding:0; margin:0; display:inline-block; /*width:auto; display:none; appearance:none;*/ } #my .myAgree input + label { position:relative; /*display:block;*/ cursor:pointer; padding: 0 0 0 26px; font-size:14px; color:#8C8C8C; } #my .myAgree input + label:before {position:absolute; top:50%; left:0; transform:translate(0,-50%); content:''; width:20px; height:20px; border-radius:100%; background:url('/_img/my_ico_check.png') no-repeat center center #E0E0E0; background-size:10px;} #my .myAgree input:checked + label:before {position:absolute; top:50%; left:0; transform:translate(0,-50%); content:''; width:20px; height:20px; border-radius:100%; background:url('/_img/my_ico_check.png') no-repeat center center #D40022; background-size:10px;} #my .myAgree {margin:25px 0 50px 0;} #my .myAgree .all {margin-bottom:15px; padding:17px 12px; border:1px solid #e0e0e0; border-radius:5px;} #my .myAgree .list li {position:relative; padding:7px 12px;} #my .myAgree .list li .arrow {position:absolute; top:50%; right:0; transform:translate(0,-50%); color:#8c8c8c;} #my .myAgree .list li.line {margin:17px 0; padding:0; width:100%; height:1px; background:#efefef;} #my .myAgree .list li.choice {display:flex; align-items:center; gap:14px; padding:10px 0 0 36px;} #my .myAgree .list li.choice input + label {font-size:12px;} #my select option[value=""][disabled] {display: none;} /*myView*/ #my .myViewList a {margin-bottom:10px; display:flex; align-items:stretch; padding:12px 12px 9px 12px; background:#fafafa; border-top-left-radius:8px; border-top-right-radius:8px;} #my .myViewList a .left, #my .myViewList a .right {width:50%;} #my .myViewList a .name {margin-bottom:3px; display:flex; align-items:center; gap:5px;} #my .myViewList a .name .maker {width:30px;} #my .myViewList a .name h3 {font-size:15px; font-weight:600; letter-spacing:-0.5px; color:#1a1a1a; width:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #my .myViewList a .grade {margin:4px 0 6px 4px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:400; color:#4D4D4D;} #my .myViewList a .grade .engin {display:flex; align-items:center; gap:3px; } #my .myViewList a .grade .engin li {width:16px; height:16px; display:flex; align-items:center; justify-content:center; border:1px solid #2B54E8; font-size:8px; line-height:8px; } #my .myViewList a .date {margin-bottom:15px; display:flex; align-items:center; justify-content:end; gap:4px; font-size:10px; color:#4D4D4D; font-weight:400; } #my .myViewList a .date .check {width:11px; height:11px; display:flex; align-items:center; justify-content:center; background:#b2b2b2; border-radius:100%;} #my .myViewList a .date .check img {width:7px;} #my .myViewList a p {font-size:11px; font-weight:400; letter-spacing:-0.5px; color:#4D4D4D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height:1.5;} /*#my .myViewList a .price {margin:15px 0 0 0;}*/ #my .myViewList a .price li {margin-bottom:3px; display:flex; align-items:center; gap:5px; font-size:11px; font-weight:500; color:#4D4D4D;} #my .myViewList a .price li:last-child {margin:0;} #my .myViewList a .price li .won {font-size:14px; font-weight:600; color:#D40022; letter-spacing:-0.5px;} #my .myViewList.compare .list {} #my .myViewList.compare .list a .vs {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:33px; height:33px; background:#EFEFEF; border-radius:100%; font-size:12px; line-height:12px; color:#1A1A1A; font-weight:800; z-index:9;} #my .myViewList.compare .list a {position:relative; margin-bottom:10px; display:flex; align-items:stretch; justify-content:space-between; padding:12px; background:#fafafa; border-top-left-radius:8px; border-top-right-radius:8px;} #my .myViewList.compare .list .listCon {width:45%; flex-direction:column; margin:0; padding:0; background:transparent; border-radius:0;} #my .myViewList.compare .list .listCon .left, #my .myViewList.compare .list .listCon .right {width:100%;} #my .plusBtn {margin:40px 0 0 0; text-align:center;} #my .plusBtn a {display:inline-block; margin:0 auto; width:45px; height:45px; display:flex; align-items:center; justify-content:center; background:#1C4FE6; border-radius:100%; font-size:15px; font-weight:800; color:#fff;} /*compare*/ #my .compareList {display:flex; justify-content:space-between;} #my .compareList .list {width:48%;} #my .compareList .myselect {margin:0 0 7px 0 ; overflow:hidden;} #my .compareList .myselect .selectArrow {width:9px; height:3px;} #my .compareList h3 {font-size:12px; line-height:1.7; font-weight:500; color:#8c8c8c;} #my .compareList p {font-size:12px; font-weight:500; color:#1a1a1a; letter-spacing:-0.5px;} #my .compareList h5 {margin:3px 0 0 0; font-size:10px; color:#8C8C8C; font-weight:400; } #my .compareList .requireTxt {margin:5px 0 10px 0; display:flex; align-items:center; gap:4px;} #my .compareList .require {display:flex; align-items:center; gap:4px;} #my .compareList .require .myselect select {font-size:11px;} #my .compareList .price li {padding:17px 0; border-bottom:1px solid #e0e0e0;} #my .compareList .price li:last-child {border-bottom:none;} #my .compareList .price .big {font-size:18px; font-weight:700; letter-spacing:-0.5px; line-height:1;} #my .moreTit p {padding:13px 0; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:600; color:#1a1a1a; background:#EFEFEF; border-radius:5px;} #my .moreTit p .arrow {width:10px; height:6px;} #my .moreTit.on p .arrow {transform:rotate(180deg); } #my .underTakeWrap {margin-top:5px; padding:10px; background:#EFEFEF; border-radius:5px; color:#8c8c8c;} #my .underTakeWrap li {margin:0 0 2px 0; display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:-0.5px;} #my .underTakeWrap li:last-child {margin:0;} #my .underTakeWrap li .won {font-weight:700;} #my .underTakeWrap h5 {margin:5px 0 0 0;} #my .compareBtn {margin:30px 0 0 0;} #my .compareBtn .formBtn3 {margin: 0 0 10px 0;} /*myPush*/ #my.myPush {padding: 0 0 200px 0;} #my .alarmList li {padding:17px 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #E0E0E0;} #my .alarmList li:first-child {border-bottom:1px solid #E0E0E0; border-top:1px solid #E0E0E0;} #my .alarmList li .txt h3 {font-size:14px; font-weight:600; color:#2B2B2B;} #my .alarmList li .txt p {margin:5px 0 0 0; font-size:12px; font-weight:500; color:#B8B8B8} #my .mySwbtn .switch {margin-left:7px; position: relative; display: inline-block; width:60px; height: 34px;} #my .mySwbtn .switch input { opacity: 0; width: 0; height: 0;} #my .mySwbtn .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #B8B8B8; -webkit-transition: .4s; transition: .4s;} #my .mySwbtn .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 5px; bottom: 5px; background-color: white; -webkit-transition: .4s; transition: .4s; box-shadow:3px 3px 3px rgba(0 0 0 / 10%);} #my .mySwbtn input:checked + .slider { background-color: #D40022;} #my .mySwbtn input:focus + .slider { box-shadow: 0 0 1px #D40022;} #my .mySwbtn input:checked + .slider:before { -webkit-transform: translateX(23px); -ms-transform: translateX(23px); transform: translateX(23px);} #my .mySwbtn .slider.round { border-radius: 34px;} #my .mySwbtn .slider.round:before { border-radius: 50%;} /*myAlarm*/ #my .alarmTab .before .tit {padding:22px; display:flex; align-items:center; gap:5px; font-weight:700; color:#0565ED; font-size:16px; letter-spacing:-0.5px;} #my .alarmTab .before .tit .ico {width:17px;} #my .alarmTab .tabList {padding:0 20px 0 10px; display:flex; align-items:center; justify-content:space-between;} #my .alarmTab .tabList li a {position:relative; display:block; padding:0 12px 18px 12px; font-size:15px; font-weight:400; letter-spacing:-0.5px; color:#8C8C8C; } #my .alarmTab .tabList li a.on {font-weight:700; color:#0565ED;} #my .alarmTab .tabList li a.on:after {content:''; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); width:100%; height:2px; background:#0565ED;} #my .alarmTab .tabCon .today {padding-bottom:15px;} #my .alarmTab .tabCon .today a {background:#E5EFFF;} #my .alarmTab .tabCon a {display:block; margin:0 0 8px 0; padding:20px 25px; background:#EFEFEF; border-top:1px solid #EBEBEB; border-bottom:1px solid #EBEBEB;} #my .alarmTab .tabCon a h3 {margin:0 0 8px 0; display:flex; align-items:center; gap:5px; font-size:14px; color:#8C8C8C; font-weight:400; letter-spacing:-0.5px;} #my .alarmTab .tabCon a h3 .time {font-size:12px;} #my .alarmTab .tabCon a p {font-size:14px; font-weight:500; color:#242424;} /*app*/ #my .appTit {margin-top:110px; display:flex; align-items:center; justify-content:center; gap:18px;} #my .appTit .img {width:100px;} #my .appTit .txt {width:80%; text-align:center;} #my .appTit .txt h3 {font-size:22px; font-weight:800; letter-spacing:-1px; color:#2B2B2B;} #my .appTit .txt h2 {margin:5px 0 12px 0; font-size:40px; font-weight:800; letter-spacing:-1px; color:#1C4FE6;} #my .appTit .txt p {font-size:14px; font-weight:500; color:#585858;} #my .appWelcom {margin:25px 0 95px; font-size:26px; font-weight:500; color:#000; line-height:1.6;} /*myAlarmPop*/ #myAlarmPop {position:fixed; top:65%; left:50%; transform:translate(-50%,-50%); width:95%; max-width:420px; border:1px solid #FBFBFB; background:rgba(45 82 233 / 90%); border-radius:5px; z-index:9; padding:16px 7px; display:flex; align-items:center; justify-content:center; gap:13px; font-size:14px; color:#fff; line-height:1.5;} #myAlarmPop .ico {width:32px;} /*mNow*/ #mNow { margin:40px auto 60px auto; position: relative; } #mNow .container { position:relative; } #mNow .mNowBg { width:100%; height:380px; overflow:hidden; } #mNow .mNowVideoBg { position: absolute; width: 100%; top: 0; height:380px; overflow:hidden; } #mNow .mNowVideoBg video {position:relative; left:-10px; min-height: 380px; min-width: 100%; opacity: 0.2; } #mNow .tit {position:relative; padding-top:40px;} #mNow .tit .img {width:100%; padding:0 10px 0 15px;} #mNow .tit .right {position:absolute; top:14px; right:15px;} #mNow .tit .mark {margin:0 0 0 auto; width:30px;} #mNow .titRound {margin-top:7px; display:flex; align-items:center; gap:5px; justify-content:center; font-size:12px; font-weight:500; color:#000;} #mNow .titRound ul {display:flex; align-items:center; } #mNow .titRound ul li {display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:100%; background:#D40022; color:#fff; font-size:10px; font-weight:700;} #mNow .bbinfo {margin-top:7px; padding:0 15px; text-align:right; font-size:11px; font-weight:400; color:#686868;} .nowSwiper.swiper {padding:0 20px;} .nowSwiper .list {position:relative; padding:17px 14px 17px 20px; background:#FAFAFC; border-radius:20px; letter-spacing:-0.5px;} .nowSwiper .list .top h3 {margin:0 0 8px 0; font-size:18px; font-weight:700; width:75%; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;} .nowSwiper .list .top h5 {font-size:14px; font-weight:500;} .nowSwiper .list .top p {font-size:14px; font-weight:500;} .nowSwiper .list .part {position:absolute; top:14px; right:13px;} .nowSwiper .list .part span {display:inline-flex; align-items:center; justify-content:center; padding:8px 0; width:76px; border-radius:30px; font-size:14px; font-weight:500; color:#fff;} .nowSwiper .list .part span.rent {background:#175DED;} .nowSwiper .list .part span.lease {background:#8917ED;} .nowSwiper .list .mid {display:flex; align-items:center; justify-content:space-between;} .nowSwiper .list .mid .carthumbs {position:relative; right:-15px; width:175px;} .nowSwiper .list .mid .plus {display:inline-flex; align-items:center; gap: 4px; padding:8px 10px 8px 8px; font-size:14px; line-height:14px; font-weight:500; background:#DDE4F3; border-radius:7px;} .nowSwiper .list .mid .plus .ico {display:flex; align-items:center; justify-content:center; width:17px; height:17px; background:#fff; border-radius:100%;} .nowSwiper .list .mid .plus .ico span {font-size:14px; font-weight:800;} .nowSwiper .list .mid .plus:hover .ico {transform:rotate(180deg); transition:all 0.5s;} .nowSwiper .list .carInfo {display:flex; align-items:flex-end; justify-content:space-between;} .nowSwiper .list .carInfo .price .cancel {display:block; margin-bottom:6px; font-size:14px; font-weight:400; text-decoration:line-through;} .nowSwiper .list .carInfo .price h5 {font-size:18px; font-weight:700; letter-spacing:-0.5px; color:#3651E0;} .nowSwiper .list .carInfo .btn a {padding:10px 10px 10px 15px; display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:14px; font-weight:600; background:#3651E0; color:#fff; border-radius:30px;} .nowSwiper .list .carInfo .btn span {font-size:14px;} .nowSwiper .list:hover .carImg img { transform:scale(1.15); transition:all 0.5s;} .mNowBottom .container {margin:10px auto 0 auto; padding:0 20px;} .mNowBottom .swiper-scrollbar {height:2px;} .mNowBottom .caution p {margin:11px 0 28px 0; font-size:13px; font-weight:500; letter-spacing:-0.5px;} .mNowBottom .caution h3 {font-size:18px; font-weight:700; letter-spacing:-1px; line-height:1.5;} /* #nowPop {position:fixed; top:0; left:50%; transform:translate(-50%,0); width:100%; height:100vh; z-index:999;} #nowPop .cover {position:fixed; width:100%; height:100vh; background:rgba(0 0 0 / 50%);} #nowPop .popCon {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:95%; max-width:420px; height:350px; background:#fff; border-radius:12px; box-shadow:3px 5px 5px rgba(0 0 0 / 20%); overflow:hidden;} #nowPop .popCon .tit {padding:10px 0; text-align:center; background:#DDE4F3; font-size:14px; font-weight:600; letter-spacing:-0.5px;} #nowPop .popCon .close {position:absolute; top:10px; right:10px; width:17px; height:17px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; cursor:pointer;} #nowPop .popCon .close span {font-size:12px; font-weight:800;} #nowPop .popWrap {padding:7px;} #nowPop .popContent {width:100%; height:265px; overflow-y:scroll; padding:10px; font-size:24px; line-height:1.8;} #nowPop .popContent::-webkit-scrollbar {width:3px;} #nowPop .popContent::-webkit-scrollbar-thumb {background:#6A6A6A;} #nowPop .popContent .top h2 {font-size:16px; line-height:16px; font-weight:700; letter-spacing:-1px;} #nowPop .popContent .top h4 {margin:4px 0; font-size:13px; font-weight:700;} #nowPop .popContent .top p {font-size:12px; font-weight:400; } #nowPop .popBottom {position:fixed; bottom:0; left:50%; transform:translate(-50%,0); padding:13px 10px; width:100%; background:#fff; border-top:2px solid #E4E7EE; z-index:9;} #nowPop .popBottom ul {display:flex; align-items:center; justify-content:space-between;} #nowPop .popBottom li {font-size:13px; line-height:12px; font-weight:500; letter-spacing:-0.5px; color:#232323;} #nowPop .popBottom li .won {font-size:15px; font-weight:700;} */ .gallWrap { position:relative; display: flex; align-items: center; justify-content: center; padding-bottom: 30px; } .gallWrap input[type="radio"] { display:none; } .gallWrap input:checked + span { color: #000; font-weight: 700; } .gallWrap label { cursor:pointer; } .gallWrap .gallLeft { position:absolute; z-index:100; top:50%; left:0; transform: translate(0,-50%); display: flex; flex-direction: column; background-color:rgba(230,230,230,0.8); border-radius:15px; padding:15px 0; } .gallWrap .gallLeft label { font-size:12px; color:#8c8c8c; font-weight:500; padding:0 17px; line-height:1.6;} .gallWrap .gallBtm { gap: 10px; position:absolute; z-index:100; bottom:0; display: flex; width: 100%; align-items: center; justify-content: center; } .gallWrap .gallBtm label { font-size:13px; font-weight:400; color:#8c8c8c; } .gallWrap .gallBtm .symbol { display: flex; background-color:black; padding:5px; border-radius:50%; } .gallWrap .gallBtm img { width:17px; height:17px; } .gallWrap .gallLayer { width:100%; max-width:250px; min-height: 100px; } /* #mNow .nowbtn {position:relative; margin:15px auto 25px auto; display:flex; align-items:center; justify-content:center; width:1400px;} #mNow .nowbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500;} #mNow .nowbtn .center .txt {white-space:nowrap; } #mNow .nowbtn .center .pagination {width:auto; color:#C8C8C8;} #mNow .nowbtn .center .pagination .swiper-pagination-current {color:#000; font-weight:700;} #mNow .nowbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} #mNow .caution p {font-size:18px; font-weight:500; letter-spacing:-0.5px;} #mNow .caution h3 {margin-top:45px; font-size:24px; font-weight:700; letter-spacing:-1px;} #mNow .bbinfo {position:absolute; top:28px; right:0; text-align:right; font-size:14px; font-weight:400; color:#686868;} */ #nowPop { width:100%; height:100%; } #nowPop .popCon { width:100%; height:100%; display: grid; grid-template-rows: 60px auto 80px; } #nowPop .popCon .tit {padding:17px 0; text-align:center; background:#DDE4F3; font-size:20px; font-weight:600; letter-spacing:-0.5px;} #nowPop .popCon .close {position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; cursor:pointer;} #nowPop .popWrap { width:100%; height:100%; overflow:hidden; padding:12px;} #nowPop .popContent { width:100%; height:100%; overflow-y:scroll; padding:10px 20px 20px 20px; font-size:24px; line-height:1.8;} #nowPop .popContent::-webkit-scrollbar {width:3px;} #nowPop .popContent::-webkit-scrollbar-thumb {background:#6A6A6A;} #nowPop .popContent .top h2 {font-size:20px; font-weight:700; letter-spacing:-1px;} #nowPop .popContent .top h4 {margin:0; font-size:18px; font-weight:700;} #nowPop .popContent .top p {font-size:14px; font-weight:400; } #nowPop .popBottom { padding:24px; width:100%; background:#fff; border-top:2px solid #E4E7EE; z-index:9;} #nowPop .popBottom ul {display:flex; align-items:center; justify-content:space-between;} #nowPop .popBottom li {font-size:10px; line-height:20px; font-weight:500; letter-spacing:-0.5px; color:#232323;} #nowPop .popBottom li .won {font-size:12px; font-weight:700;} .nowTabs {position:relative; margin-top:15px; padding:0 0 16px 0; } .nowTabs .nowTabList {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); display:flex; align-items:center; justify-content:center; gap:12px; z-index:9;} .nowTabs .nowTabList a {display:flex; align-items:center; gap:10px; font-size:13px; font-weight:400; color:#A2A2A2;} .nowTabs .nowTabList .active a {font-weight:700; color:#000;} .nowTabs .nowTabList a .txtEx {width:45px;} .nowTabs .nowTabList a .txtInt {width:43px; text-align:right;} .nowTabs .nowTabList .ico {display:none; } .nowTabs .nowTabList .active .ico {display:flex; align-items:center; justify-content:center; border-radius:100%; background:#000; width:26px; height:26px; } .nowTabs .nowTabList .active .ico img {width:17px;} .nowTabs .tabimg {position:relative; } .nowTabs .tabimg .img {margin:0 auto; display:flex; align-items:center; justify-content:center; width:193px; height:97px; overflow:hidden;} .nowTabs .nowExtView {position:absolute; top:50%; left:25px; transform:translate(0,-50%); padding:10px 0; background:rgba(0,0,0,5%); border-radius:12px; z-index:9;} .nowTabs .nowExtView input {display:none; appearance:none; display:none;} .nowTabs .nowExtView input + label {display:block; padding:0 11px; cursor:pointer; font-size:12px; font-weight:500; color:#8c8c8c;} .nowTabs .nowExtView input:checked + label {color:#000; font-weight:bold;} .nowTabs #tab-ext, .nowTabs #tab-int {height:110px;} .nowOption h3 {padding:9px 0; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700; border-bottom:1px solid #E1E1E1;} .nowOption .list {margin-top:9px;} .nowOption .list li {display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:500;} .nowOption .list li:last-child {margin-bottom:0;} .nowOption .list li .subject {display:flex; align-items:center; gap:10px;} .nowOption .list li .colorbox {display:block; width:13px; height:13px; border-radius:1px; border:1px solid #707070; background-size:cover; } .CarListcolor .clist {margin-bottom:2px; display:flex; gap:10px; font-size: 13px; line-height:1.4;} .CarListcolor .clist:last-child {margin-bottom:0;} .CarListcolor .clist .name {opacity:0.5; font-weight:bold;} .CarListcolor .clist .colorbox {margin-top:1px; display:block; width:15px; height:15px; border:1px solid #f3f3f3; border-radius:100%;} .CarListcolor .clist .txtWarp {display:flex; gap:5px; width:100%;} .CarListcolor .clist .txtWarp .txt {width:90%; padding:0; } .cmplusWarp {margin:12px 0 15px 0; display:flex; align-items:center; justify-content:space-between;} .cmplusWarp .plusbtn {position:relative; cursor:pointer;} .cmplusWarp .plustit {padding:10px 12px; display:inline-flex; border-radius:5px; font-size:15px; background:#D40022; color:#fff; gap:7px; align-items:center;} .cmplusWarp .plustit .plus {display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; line-height:17px; background:#e4304f; color:#fff; border-radius:100%; text-align:center;} .cmplusWarp .plustit .plus .plusimg {width:11px; filter:brightness(5) grayscale(1);} .cmplusWarp .plusbtn .plusview {display:none; } .cmplusWarp .plusbtn .plusview .plustit {width:100%; border-radius:0; display:flex; justify-content:space-between; align-items:center;} .cmplusWarp .plusbtn .plusview .plustit .ppname {gap:5px;} .cmplusWarp .plusbtn .plusview .plustit button {color:#fff; background:none;} .cmplusWarp .plusbtn .plusview ul {background:#fff; padding:12px; height:90px; overflow-y:scroll;} .cmplusWarp .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;} .cmplusWarp .plusbtn .plusview li:last-child {margin-bottom:0;} .cmplusWarp .plusbtn .plusview li .name {display:flex; align-items:center; gap:9px; } .cmplusWarp .plusbtn .plusview li .name .txt {width:135px; font-size:12px; line-height:1.4; letter-spacing:-1px; padding:0;} .cmplusWarp .plusbtn .plusview li .name .check {width:17px;} .cmplusWarp .plusbtn .plusview li .won {font-weight:bold;} .cmplusWarp .plusprice {font-size:15px; line-height:14px; color:#b1b1b1; font-weight:500;} .cmplusWarp .plusprice span {font-size:150%; font-weight:700;} .cmplusWarp .plusbtn.active .plusview{ display:block; position:absolute; top:0; left:0; width:304px; border-radius:6px; border:1px solid #D40022; box-shadow:2px 2px 3px rgba(0 0 0 / 15%); background:#fff; text-align:left; overflow:hidden; z-index:99;} .evCarBoard .cmplusWarp .plusbtn.active .plusview {width:300px;} .evCarBoard .cmplusWarp .plusbtn .plusview ul {height:127px;}