/*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 {} .text-left {text-align:left !important;} .actnone {pointer-events: none; cursor: default;} /***************header*************/ #kbTop {position:fixed; z-index:98; top:0; left:50%; transform:translate(-50%,0); width:100%; background:#60584C; padding:7px 15px; display:flex; align-items:center; justify-content:space-between; height:42px;} #kbTop .text {font-size:11px; line-height:1.3; color:#fff; font-weight:500; letter-spacing:0;} #kbTop .img {width:120px;} #header { width:100%; z-index:98; position:fixed; top:42px; background-color:#fff; box-shadow:3px 1px 10px rgba(0,0,0,0.1); display:flex; flex-direction:column !important; height:55px;} /*#header.scroll {position:fixed; top:0; left:0; left:50%; transform:translate(-50%,0);}*/ #header .hmenuWrap { /*height:50px; */ } #header .hmenuWrap .hmenu { padding:0; width:100%; background-color:white; } #header .hmenuWrap .hmenu ul { max-width:420px; margin:0 auto;} #header .container {position:relative; padding:12px 15px;} #header .logo {position:relative; top:3px; display:block; margin-left:-20px; width:125px; } #header .container .htop-tit {position:relative; } #header .container .htop-tit h1 {padding: 0 0 0 22px; letter-spacing:-0.5px; color:#111; font-weight:700; font-size:22px; } #header .container .mg-right {} #header .hgnb {position:absolute; top:50%; left:-12px; transform:translate(0, -50%);} #header .hmenu { width:100%; overflow:auto; padding:0 14px 0 18px; margin:0 /* auto; max-width:420px; */ } #header .hmenu ul {display:flex; gap:24px; justify-content:space-between; padding:0 15px; z-index:9;} #header .hmenu ul li a {position:relative; display:block; padding:14px 0; font-size:16px; font-weight:700; color:#1a1a1a; letter-spacing:-0.7px;} #header .hmenu ul li:last-child a {} #header .hmenu ul li a.on {color:#3651E0; font-weight:bold;} #header .hmenu::-webkit-scrollbar {display:none; width:0;} #header #search {position:absolute; top:50%; right:47px; transform:translate(0,-50%); width:35px; height:35px; z-index:9;} #header #search a { display:block; width:35px; height:35px; background:url('/_img/ico_search.png') no-repeat center; background-size:22px;} /*header #search a.on {background:url('/_img/ico_close.png') no-repeat center; background-size:contain;}*/ .hevent {background:#60584C; padding:10px 15px; } .hevent a {display:block; font-size:12px; color:#fff; letter-spacing:-0.5px; text-align:center;} #header .hback { transform:rotate(90deg); width:20px; height:20px;} #header .hback button {background:none; border:none;} #header .burger-icon {cursor: pointer; display: inline-block; user-select: none; width:33px; height:33px; margin: 0; position:absolute; top:50%; right:15px; transform:translate(0, -50%); } #header .burger-icon .burger-sticks {background: #333; display: block; height: 2px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition: background .2s ease-out; width: 20px; } #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:99;} #header .burger-check:checked~.burger-icon {} #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:95px; top:0; left: 0; height: 100vh; max-width: 0; transition: 0.5s ease; z-index: 98; background-color: #fff; } .menu .gnb { border-top:1px solid #e6e6e6; ; padding:10px 20px 0 20px; } .menu .gnb li h3 a{padding:15px 0; display:flex; align-items:center; gap:10px; font-size:18px; color:#111; font-weight:600; letter-spacing:-0.5px;} .menu .gnb li h3 a .arrow {display:flex; align-items:center; width:8px; } .menu .gnb .gnbMore {margin-bottom:55px; display:flex; align-items:center; background:#F4F6FA; border-radius:12px; } .menu .gnb .gnbMore li {width:50%;} .menu .gnb .gnbMore li a {display:block; padding:15px 0; text-align:center; font-size:14px; font-weight:500; color:#111; } .menu .gnb li.tel a {margin-top:30px; padding:20px 0; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-size:15px; font-weight:600; background:#60584C; border-radius:15px; } .menu .gnb li.tel a .ico {width:24px; transform:rotate(139deg); } /* #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 > a:after {content:url('/_img/hgnb_plus.png'); position:absolute; right:25px; top:50%; transform: translate(0, -50%);} #header .menu .gnb li.more.on > a: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 a.actnone {pointer-events:none; cursor:default;} #header .menu .info li > a {position:relative; display:block; padding:22px 30px; font-size:16px; font-weight:600; letter-spacing:-1px; border-bottom:1px solid #e6e6e6;} #header .menu .info li > a .sm {font-size:14px; line-height:22px; font-weight:400; } #header .menu .bottom{display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 68px; left: 0; width: 100%; border-top: 1px solid #e6e6e6;} #header .menu .bottom li{width: 100%;} #header .menu .bottom li img{max-width: 20px; margin-right: 2px;} #header .menu .bottom li > a{display: block; position: relative; padding: 15px; font-size: 16px; font-weight: 600; letter-spacing: -1px; text-align: center; white-space: nowrap;} #header .menu .bottom li:nth-child(1) a{color: #3e2723;} #header .menu .bottom li:nth-child(2) a{color: #8e009e;} #header .menu .bottom li:nth-child(3) a{color: #32b44a;} #header .menu .bottom li:nth-child(2){border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6;} .msmsbtn {position:absolute; bottom:68px; width:100%; padding:12px 0; display: flex; justify-content: center; align-items: center; gap:10px; border-top:1px solid #e6e6e6;} .msmsbtn li a {display:block;} .msmsbtn li a img { width: auto; height:40px; } */ /*검색*/ .h-flex {display:flex; align-items:center; gap:5px;} .search {position:relative; top:-1px; padding:11px 13px; background:#EBEBEC; border-radius:10px; max-width:100px;} .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 .sPopCon {height:500px; overflow-y:scroll;} .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; background:#F9F9F9;} .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:#FFBC00; color:#fff;} .search-results .hot-content li {padding:10px 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:9px;} .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:#F9F9F9 !important; border-radius:10px !important; width:100%;} .search-results .sr-top .in-serch button{position:absolute; top:50%; left:15px; transform:translate(0,-50%); width:20px; background:transparent;} @media (min-width:640px) { .search-results .hot-content li {padding:9px 0; font-size:13px;} .search-results .sr-top {margin-bottom:30px; } } /*법인전용*/ #copConsult {padding:0 20px; margin:40px 0;} #copConsult .container {position:relative; padding:30px 25px; border-radius:20px; box-shadow:0 3px 10px rgb(0 0 0 / 15%); letter-spacing:-0.5px;} #copConsult .img {position:absolute; top:-13px; right:34px; width:144px; z-index:1;} #copConsult .tit {margin-bottom:18px;} #copConsult h3 {font-size:14px;} #copConsult h2 {margin:5px 0 10px 0; font-size:24px; font-weight:800; letter-spacing:-1.5px;} #copConsult p {font-size:13px; line-height:1.4; font-weight:500;} #copConsult p .fc-gg {color:#9a9a9a;} #copConsult p .fc-pp {color:#9BB4FF;} #copConsult form ul {margin-bottom:15px;} #copConsult form li input {margin-bottom:8px; padding:14px 18px; width:100%; background:#F2F2F2; border-radius:10px; font-size:14px; letter-spacing:-0.5px;} #copConsult form li input:placeholder {color:#B0B0B2; } #copConsult .formAgree {margin:15px 0; gap:3px; letter-spacing:-0.5px;} #copConsult .formAgree a {margin-left:3px;} #copConsult .formAgree input {margin-top:1px;} #copConsult button { padding:20px 0; width:100%; font-size:16px; background:#1E53F2; color:#fff; border-radius:10px; text-align:center; font-weight:bold; letter-spacing:-0.5px;} .carviewtop {position:fixed; top:0; left:50%; transform:translate(-50%,0); width:100%; background:#fff; z-index:999; box-shadow:3px 3px 3px rgba(0 0 0 / 15%); } .carviewtop .wrapbox {display:flex; align-items:end; justify-content:space-between; padding:28px 15px; max-width:420px; margin:0 auto;} .carviewtop .viewtit {position:relative; display:flex; align-items:center; gap:15px; margin-left:-12px;} .carviewtop .hviewtit {font-size:13px;} /*carviewtop .hviewtit p.flexCenter {display:flex; align-items:center; gap:5px;}*/ .carviewtop .hviewtit .price {font-size:16px; font-weight:bold; } .carviewtop .viewprice { width:200px; display:flex; flex-direction:column; gap:3px; align-items:end; font-size:15px;} .carviewtop .viewprice .num {display:inline-block; margin-right:3px; width:70px; text-align:right;} .carviewtop .viewprice .squre {width:16px; height:16px; margin-right:7px; display:flex; align-items:center; justify-content:center; font-size:10px; line-height:12px; border:1px solid #b9b9b9; color:#b9b9b9; } .carviewtop .viewtitbtn a { display:flex; flex-direction:column; text-align:center; color:#fff; padding:7px; background:#1E53F2; border-radius:3px; gap:4px; font-size:12px;} .carviewtop .viewtitbtn a img {margin:0 5px 0 auto; width:25px;} /***************main*************/ .max420 {max-width:420px; margin:0 auto; } #main .mtit {margin-bottom:15px; font-size:20px; font-weight:700; letter-spacing:-1px; color:#111;} /*mtop*/ #mtop {margin-top:90px; background:url('/_img/mvisual_bg.png') repeat-x center center; background-size:contain; } #mtop .container {position:relative; max-width:420px; margin:0 auto; padding:40px 20px 0 20px;} #mtop .mtopWarp {position:relative; padding-bottom:25px; z-index:9;} #mtop .mtopWarp h2 {font-size:26px; font-weight:700; letter-spacing:-1px; line-height:1.4; position:relative; z-index:2;} #mtop .mtopWarp h3 {margin:15px 0; font-size:15px; font-weight:500; line-height:1.4;} /* #mtop .mtopWarp a.call { text-align:center; padding:6px 0; background:#FFBC00; border-radius:7px; color:#fff; } #mtop .mtopWarp a.call .num { display:inline-flex; align-items:center; gap:6px; font-size: 23px; font-weight:800; padding-bottom: 5px; } #mtop .mtopWarp a.call .num .ico {width:26px; } #mtop .mtopWarp a.call .desc { margin-top:5px; font-size: 13px; font-weight:800; } */ #mtop .mtopWarp a.call { display: inline-block; text-align:center; padding:10px 12px; background:#FFBC00; border-radius:7px; color:#fff; } #mtop .mtopWarp a.call .num { display:inline-flex; align-items:center; gap:4px; font-size: 20px; font-weight:800; } #mtop .mtopWarp a.call .num .ico {width:20px; height:18px;} #mtop .mtopWarp h5 {margin:5px 0 0 0; /*width:155px;*/ font-size:12px; color:#474747;text-align:left; font-weight:500;} #mtop .mtopWarp .kcm {position:absolute; bottom:0; right:-4%; width:170px; z-index:1;} .offical {margin-bottom:30px; background:#f6f4f1;} .offical .container {padding:8px 20px; max-width:420px; margin:0 auto; } .offical p { font-size:12px; color:#958e86;} #mtop ul {display:flex; align-items:center; gap:12px; position:relative; z-index:10;} #mtop ul li {width:50%; padding:13px 7px 16px 7px; background:#fff; border:2px solid #FFBC00; border-radius:20px; } #mtop ul li .ico {width:60px; margin:0 auto 10px auto;} #mtop ul li p {font-size:13px; line-height:1.3; text-align:center; font-weight:500;} /*visual*/ #mvisual {padding:0 20px; } .visualSwiper {position:relative !important; border-radius:15px; overflow:hidden; z-index:9; } .visualSwiper .swiper-slide { /* padding-top:110px;*/ height:260px;} /*.visualSwiper .swiper-slide .container {display:flex; flex-wrap:wrap; padding:0 10px 10px 10px;}*/ .visualSwiper .swiper-slide .container {display:flex; flex-wrap:wrap; margin:0 auto; width:100%; justify-content:center;} .visualSwiper .visualcon {margin:40px 0 10px 0; color:#1a1a1a;} .visualSwiper .visualcon h5 {font-size:18px; font-weight:600;} .visualSwiper .visualcon h2 {margin:10px 0 20px 0; font-size:32px; letter-spacing:-1px; line-height:45px;} .visualSwiper .visualcon p {font-size:16px;} .visualSwiper .visualswiper-pagination {position:absolute; bottom:2px !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:#FFBC00;} /*mform*/ #mForm {margin:0 auto 50px auto;} #mForm .container {margin:0 auto; padding:0 20px; max-width:420px;} #mForm .mFromWarp {display:flex; align-items:center; justify-content:space-between; gap:5px;} #mForm .mFromWarp li {width:40%;} #mForm .mFromWarp li:first-child {width:20%;} #mForm .mFromWarp li input {padding:12px; width:100%; border:1px solid #E2E5EB; color:#747774; font-size:14px; font-weight:500; border-radius:7px;} #mForm .agreeCheck {margin:15px 0;} #mForm button {width:100%; padding:18px 0; text-align:center; background:#60584C; color:#fff; font-size:18px; letter-spacing:-0.5px; border-radius:12px; font-weight:700;} .agreeCheck {} .agreeCheck li {margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; } .agreeCheck li:last-child {margin-bottom:0;} .agreeCheck input {display:none; appearance:none;} .agreeCheck input + label {position:relative; padding:0 0 0 19px; cursor:pointer; font-size:13px; color:#a4a4a4;} .agreeCheck input + label:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:15px; height:15px; border-radius:2px; background:url('/_img/check.png') center; background-size:cover;} .agreeCheck input:checked + label:before {background:url('/_img/check_on.png') center; background-size:cover;} .agreeCheck a {font-size:13px; color:#a4a4a4; text-decoration:none;} /*mMax*/ .mcTit {margin-bottom:15px;} .mcTit h2 { font-size:18px; line-height:20px;} .mcTit h2 a {display:flex; align-items:center; gap:7px; font-size:18px; line-height:18px;} .mcTit h2 a .icoArrow {width:10px;} .mcTit h3 {margin-top:10px; font-size:15px; font-weight:500;} .mcTit p {margin-top:5px; font-size:16px; color:#747774; font-weight:500;} #mMax .mcTit {padding:0 20px;} #mMax .mcTit h2 {font-size:24px; letter-spacing:-0.5px;} #mMax .mcTit .mcTitSelect {margin-top:10px; display:flex; align-items:center; } #mMax .mcTit .mcTitSelect li {width:50%;} #mMax .mcTit .mcTitSelect input {display:none; appearance:none;} #mMax .mcTit .mcTitSelect input + label {display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; font-weight:600; color:#111; opacity:0.5;} #mMax .mcTit .mcTitSelect input + label .icoArrow {width:7px; height:11px;} #mMax .mcTit .mcTitSelect input:checked + label {opacity:1;} #mMax {} #mMax .container {} #mMax .month {padding:0 15px; font-size:14px; color:#3A3A3A; text-align:right; font-weight:500;} #mMax .maxSlide {background:#eee8dd; padding:20px 0; margin:0 5px; border-radius:10px;} #mMax .maxSlide .firstList { } #mMax .maxSlide .maxSlideCon {position:relative; } #mMax .maxSlide .swiper {padding:0 15px 20px 15px;} #mMax .maxSlide .swiper-button-prev {top:45%; left:-25px;} #mMax .maxSlide .swiper-button-next {top:45%; right:-25px;} #mMax .maxSlide .list a {display:block; padding:25px 20px; background:#f9f9f9; border-radius:10px; color:#191919;} #mMax .maxSlide .list a .score {position:relative; display:flex; align-items:center; gap:12px;} #mMax .maxSlide .list a .score .ico-crown {position:absolute; top:-12px; left:-12px; width:35px;} #mMax .maxSlide .list a .score .num {font-size:26px; font-weight:900;} #mMax .maxSlide .list a .score .sale {font-size:18px; font-weight:800; letter-spacing:-0.5px;} #mMax .maxSlide .list a .name {margin-bottom:5px; font-size:16px; font-weight:700;} #mMax .maxSlide .list a .trim {font-size:13px; line-height:1.3; font-weight:500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mMax .maxSlide .list a .img {width:100%; height:107px; display:flex; align-items:center; } #mMax .maxSlide .list a:hover .img img {transform:scale(1.1); transition:all 0.5s;} #mMax .swiper-scrollbar {bottom:0; left:50%; transform:translate(-50%,0); width:90%; height:3px;} #mMax .maxSlide .firstList.list a {background:transparent; padding:0 24px; margin-bottom:30px;} #mMax .maxSlide .firstList.list a .score .num {font-size:30px;} #mMax .maxSlide .firstList.list a .score .sale {font-size:22px;} #mMax .maxSlide .firstList.list a .name {font-size:18px;} #mMax .maxSlide .firstList.list a .img {position:relative; top:-15px; margin-bottom:-20px; height:178px;} .circle .swiper-button-prev {width:auto;} .circle .swiper-button-prev:before {content:''; display:flex; align-items:center; justify-content:center; width:45px; height:45px; border-radius:100%; background:rgba(0 0 0 / 70%);} .circle .swiper-button-prev:after {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:17px; color:#fff;} .circle .swiper-button-next {width:auto;} .circle .swiper-button-next:before {content:''; display:flex; align-items:center; justify-content:center; width:45px; height:45px; border-radius:100%; background:rgba(0 0 0 / 70%);} .circle .swiper-button-next:after {position:absolute; top:50%; left:55%; transform:translate(-50%,-50%); font-size:17px; color:#fff;} #mbnPersonal {margin:50px auto;} #mbnPersonal .mcTit {padding:0 20px;} #mbnPersonal #pTit {display:none;} #mbnPersonal .personal #pSelect {padding:0 5px;} #mbnPersonal .personal {padding:#fff; padding:0; margin-bottom:0;} /* fastConsult */ #fastConsult { width: 100%; margin: 15px auto; padding: 0 20px; } #fastConsult a{display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 15px 18px 25px; border-radius: 5px; background: #e5f1ff;} #fastConsult p{color: #222; font-size: 17px; font-weight:700;} #fastConsult .icon{display: inline-block; max-width: 19px; margin:-1px 3px 0 3px;} #fastConsult .arrow{width: 10px; height: 10px;} @property --rotate { syntax: ""; initial-value: 132deg; inherits: false; } @keyframes spin { 0% { --rotate: 0deg; } 100% { --rotate: 360deg; } } .focusCard { padding: 3px; position: relative; border-radius: 6px; justify-content: center; align-items: center; text-align: center; display: flex; font-size: 1.5em; color: rgb(88 199 250 / 0%); cursor: pointer; } .focusCard::before { width: 100%; height: 100%; content: ""; position: absolute; z-index: -1; border-radius: 8px; /*background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);*/ background-image: linear-gradient(var(--rotate), #02ffff, #41878b 43%, #c612ff); animation: spin 2.5s linear infinite; } .focusCard::after { width: 100%; height: 100%; content: ""; position: absolute; left: 0; right: 0; z-index: -1; margin: 0 auto; transform: scale(0.9); filter: blur(10px); /*background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);*/ background-image: linear-gradient(var(--rotate), #02ffff, #41878b 43%, #c612ff); opacity: 1; transition: opacity .5s; animation: spin 2.5s linear infinite; } /* mbn */ #mbn{padding: 0 20px;} #mbn .mbnwrap {display: flex; justify-content: space-between; border-radius: 20px; background: #1E53F2;} #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:#1E53F2;} #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');} /*인기 최저가*/ .tit h3 a {display:flex; align-items:center; gap:13px; font-size:20px; font-weight:700; letter-spacing:-1px; color:#111;} .tit h3 a .arrow {display:flex;} .tit h3 a .arrow img {width:10px;} #mBest {padding: 0 20px; margin:45px auto; max-width:420px;} #mBest .tit {display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;} #mBest .tit .rBtn a {display:inline-block; padding:8px 16px; background:#F9F9F9; border-radius:30px; font-size:14px; font-weight:600;} #mBest .container {position:relative;} #mBest ul {position:absolute; top:0; right:20px; display:flex; gap:5px; z-index:9;} #mBest ul li a {display:block; padding:12px 20px; font-size:15px; letter-spacing:-0.5px; border:1px solid #e3e3e3; border-radius:50px; font-weight:400;} #mBest ul li.active a { background:#1e53f2; border:1px solid #1e53f2; color:#fff;} #mBest .swiper {margin-right:-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 .swiper {position:relative; padding:0 0 40px 0;} #mBest .bswiper .swiper-scrollbar {bottom:20px; height:4px; width:94%;} #mBest .bswiper .swiper-scrollbar .swiper-scrollbar-drag {background:#000;} #mBest .bswiper .ppinfo {margin:15px 0 0 0 ;} #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;} #mPersonal {padding:0 20px;} #mPersonal h3 a {margin-bottom:15px;} #mPersonal a.brBox {display:block; padding:35px 35px 35px 22px; background:#ffe9ab; border-radius:15px;} #mPersonal a.brBox h2 {font-size:20px;} #mPersonal a.brBox p {margin:12px 0; font-size:16px; line-height:1.5; font-weight:500;} #mPersonal a.brBox .img {text-align:right;} #mPersonal a.brBox .img img {width:120px; } @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:20px; display:flex; justify-content:space-between; align-items:center; padding-right:15px; font-size:26px; font-weight:bold; } #main .bntit h2 { 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; font-size:16px; gap:10px; } #main .bntit .nationBtnWrap ul li input { appearance: none; } #main .bntit .nationBtnWrap ul li input[type="radio"]:checked + label { color: #0866f6; } #mExclusive .mcTit {padding:0 20px;} #mExclusive .container {} #mExclusive .mcTitFlex {display:flex; align-items:end; gap:17px; margin-bottom:15px; padding:0 15px;} #mExclusive .mcTitFlex .mcTitSelect {display:flex; align-items:center; gap:5px;} #mExclusive .mcTitFlex .mcTitSelect input {display:none; appearance:none;} #mExclusive .mcTitFlex .mcTitSelect input + label {display:block; padding:5px 3px; font-size:15px; font-weight:500;} #mExclusive .mcTitFlex .mcTitSelect input:checked + label {font-weight:700; border-bottom:1px solid #111; } #mExclusive .mExWarp {padding:25px 0; background:#ffd07b; margin: 0 5px; border-radius:10px;} #mExclusive .mExWarp .swiper {padding:0 15px 20px 15px; } #mExclusive .mExWarp .swiper-button-prev {left:-20px; top:55%;} #mExclusive .mExWarp .swiper-button-next {right:-20px; top:55%;} #mExclusive .mExWarp .list a {position:relative; display:flex; padding:15px 20px; border-radius:15px; background:#F9F9F9; overflow:hidden;} #mExclusive .mExWarp .list .mark {position:absolute; top:15px; right:20px; width:40px; z-index:9;} #mExclusive .mExWarp .carInfo {} #mExclusive .mExWarp .cartit {display:flex; align-items:center; gap:3px; font-size:16px;} #mExclusive .mExWarp .cartit .brand {width:40px;} #mExclusive .mExWarp .cartit h3 {width:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #mExclusive .mExWarp .carInfo p {margin-top:5px; font-size:13px; font-weight:500; height:33px; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #mExclusive .mExWarp .carImg {position:absolute; bottom:25px; right:0px; } #mExclusive .mExWarp .carImg .basic {width:180px; height:90px; display:flex; align-items:center; justify-content:center; position:relative; z-index:9;} #mExclusive .mExWarp .carImg .opposite {display:none; position:absolute; bottom:-53px; left:50%; transform:scaleY(-1) translate(-50%,0); /*filter:blur(2px);*/ opacity:0.4; width:100%; z-index:8;} #mExclusive .mExWarp .price {position:relative; margin-top:10px; padding-left:5px;} #mExclusive .mExWarp .price li {} #mExclusive .mExWarp .price li .del {position:relative; display:inline-block; margin-bottom:10px; padding:0 7px 0 14px; font-size:13px; color:#B9B9B9; } #mExclusive .mExWarp .price li .del:before {position:absolute; content:''; top:6px; left:0; width:20px; height:14px; background:url('/_img/del_front.png') no-repeat; background-size:cover;} #mExclusive .mExWarp .price li .del:after {position:absolute; content:''; top:6px; left:57%; transform:translate(-50%,0); width:92%; height:1px; background:url('/_img/del.png') repeat-x;} #mExclusive .mExWarp .price li .won {display:flex; align-items:end; font-size:13px; color:#111; font-weight:500; } #mExclusive .mExWarp .price li .won .wontxt {position:relative; z-index:9;} #mExclusive .mExWarp .price li .won .big {position:relative; margin:0 3px 0 5px; font-size:30px; line-height:21px; letter-spacing:-1px; z-index:8;} #mExclusive .mExWarp .price li .won .big:after {content:''; position:absolute; top:-2px; right:-7px; width:20px; height:30px; background:url('/_img/price_slash.png') no-repeat; background-size:cover;} #mExclusive .mExWarp .price .mark {position:absolute; top:-17px; padding:6px 11px; font-size:14px; font-weight:600; color:#fff; letter-spacing:-1px; border-radius:50px;} #mExclusive .mExWarp .price .mark.origin {left:55px; background:#B9B9B9;} #mExclusive .mExWarp .price .mark.sale {right:0; background:#FFBC00;} #mExclusive .mExWarp .tag {margin-top:15px;} #mExclusive .mExWarp .tag ul {display:flex; align-items:center; gap:6px; } #mExclusive .mExWarp .tag ul li {display:inline-block; padding:5px 7px; background:#EBEDEF; border-radius:8px; font-size:12px; letter-spacing:-0.5px; font-weight:500;} #mExclusive .swiper-scrollbar {bottom:0; left:50%; transform:translate(-50%,0); width:90%; height:3px;} .ppbottom {margin-top:20px; padding:0 15px; text-align:right; font-size:12px; color:#575757;} .ppbottom p {margin-bottom:7px;} /*하단 배너*/ #mFbn {padding:0 20px;} #mFbn .tit {margin-bottom:15px; font-size:20px; font-weight:700; color:#111; letter-spacing:-1px;} #mFbn .gbox a {padding:17px; gap:15px; margin-bottom:12px; background:#F3F3F3; border-radius:12px; color:#000; letter-spacing:-0.5px;} #mFbn .gbox a .img {width:70px;} #mFbn .gbox a h3 {margin-bottom:6px; font-size:17px; font-weight:600;} #mFbn .gbox a p {font-size:14px; } #mFbn .ybox a {margin:45px 0 0 0; align-items:flex-start; padding:40px 24px 35px 24px; background:#FFCE46; border-radius:12px;} #mFbn .ybox a .img {padding-top:40px; width:90px;} #mFbn .ybox a .txt {font-size:20px; color:#000; line-height:1.5; letter-spacing:-1px; font-weight:800;} #mFbn .csLIst li a {margin-bottom:15px; display:block; padding:13px; background:#60584C; color:#fff; font-size:15px; font-weight:500; border-radius:12px; text-align:center;} #mFbn .csLIst li:last-child a {margin-bottom:0;} #mFbn .csWaring a {margin:40px 0; padding:23px 20px; gap:22px; background:#F9F9F9; border-radius:12px;} #mFbn .csWaring a .img {width:44px;} #mFbn .csWaring a h3 {margin-bottom:10px; font-size:16px; font-weight:700;} #mFbn .csWaring a p {font-size:14px; font-weight:500;} /*제조사별*/ #mCompany {margin:30px 0;} #mCompany .container100 {position:relative;} #mCompany .container100 .horizontal {position:absolute; display:flex; align-items:center; top:5px; right:7px; z-index:9;} #mCompany .container100 .horizontal li a {padding:0 10px; font-size:16px; font-weight:bold;} #mCompany .container100 .horizontal li.active a {color:#1E53F2;} #mCompany .container100 .horizontal li:first-child:after {content:'|'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:14px; line-height:16px; font-weight:bold;} #mCompany .cswiper .swiper {margin:20px 0 30px -10px; /*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:10px; font-size:15px; color:#8c8c8c; font-weight:500; cursor:pointer; margin:0 12px; white-space: nowrap;} #mCompany .cswiper .list a .img ,#mCompany .cswiper label.list .img {display:flex; align-items:center; justify-content:center; width:66px; height:66px; background:#F8F8FA; border-radius:23px; text-align:center;} #mCompany .cswiper .list a .img img ,#mCompany .cswiper label.list .img img {width:70%;} #mCompany .cswiper .list a:hover .img ,#mCompany .cswiper label.list:hover .img {background:#f1f1f1; transition:all 0.5s;/*animation: turn-around 1s linear;*/} #mCompany .cswiper .list a.on .img ,#mCompany .cswiper label.list.active .img ,#mCompany .cswiper input[type="radio"]:checked + label.list .img {background:#1E53F2; } #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 { /*width:100%; position:relative;*/ } #mCompany .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%; display:none;} #mCompany .arrow .swiper-button-next {right:-35px; color:transparent;} #mCompany .arrow .swiper-button-prev {left:-35px; height:19px; color:transparent;} #mCompany .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #mCompany .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} /* #mCompany .comcon {display:none;} */ #mCompany .comcon .list-wrap {} #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: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 0 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 18px; font-size:14px; line-height:15px; font-weight:bold; border-radius:500px; background:#F8F8FA; box-sizing:border-box;} #mPrice .tabs ul li.active a ,#mPrice .tabs .horizontal input[type="radio"]:checked + label {background:#1E53F2; color:#fff; border:none;} #mPrice .pswiper .swiper-slide { width:150px; } #mPrice .ppinfo {margin-top:25px; background:#f2f4f9; padding:10px; border-radius:5px; width:95%; max-width:360px; } /* faq */ #faq{width: 100%; margin: 40px auto -30px auto; padding: 40px 25px 25px 25px; background: #f4f6fd;} #faq .tit{display:flex; justify-content: space-between; align-items:end;} #faq .tit h2{font-size: 28px; font-weight: 800;} #faq .tit a {font-size:15px; margin-bottom:10px;} #faq .faqList .swiper-slide{display: flex; flex-direction: column; gap: 8px; padding: 20px 0 40px 0;} #faq .faqList .que{position: relative; padding: 20px; border-radius: 15px; background: #fff; font-size: 15px; cursor: pointer;} #faq .faqList .que > span {padding-left:25px; display:flex; align-items:center; justify-content:space-between;} #faq .faqList .que::before{position:absolute; top:50%; left:20px; transform:translate(0,-50%); content: 'Q.'; margin-right: 4px; font-size: 15px; font-weight: bold; color: #1e53f2;} #faq .faqList .que.on>span{color: #1e53f2; font-weight: bold;} #faq .faqList .anw{display: none; overflow: hidden; padding: 25px; background-color: #fbfbfb; font-size: 15px; border-radius:20px;} #faq .faqList .anw::before{display: inline-block; content: 'A.'; margin-right: 4px; color: #666; font-size: 15px; font-weight: bold;} #faq .faqList .que .arrow {} #faq .faqList .que.on .arrow{transform: rotate(180deg); transition: all 0.5s;} #faq .swiper-pagination-bullets {bottom: 0;} #faq .swiper-pagination-bullet {width: 7px; height: 7px; margin: 0 3px; border-radius: 100%; background:#cdcdcd; opacity: 1;} #faq .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #000;} /* review */ #review{margin: 50px auto;} #review .mcTit {padding:0 20px; } #review .tit {display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 35px;} #review .tit .flex {gap: 5px;} #review .tit .img{max-width: 65px;} #review .tit h2{font-size: 30px; font-weight: 800;} #review .reviewSwiper-paginationWrap{display: flex; justify-content: flex-start; align-items: center; gap: 5px;} #review .reviewSwiper-pagination{width: 100%; line-height:0;} #review .swiper-pagination-bullets{margin: 0 10px;} #review .swiper-pagination-bullet{width: 7px; height: 7px; margin: 0 3px; border-radius: 100%; background:#cdcdcd; opacity: 1;} #review .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #3444F1;} #review .reviewSwiper-playnpause{margin-top: -10px;} .custom.swiper-playnpause{display: flex; justify-content: flex-start; align-items: center; gap: 5px; width: 100%;} .custom.swiper-playnpause .icon{width: 18px; max-width: 18px; cursor: pointer; filter: grayscale(0.5) brightness(3);} .custom.swiper-playnpause .icon.on{filter: grayscale(0) brightness(1);} #review .playnpause a {width: 20px; margin-right: 3px; opacity: 0.5;} #review .playnpause a.on {opacity: 1;} #review .playnpause a:hover {opacity: 1; transition: all 0.5s;} .reviewSwiper.swiper {padding:0 20px 20px 20px;} .reviewSwiper .swiper-slide {position: relative; display:block; width: 100%; border-radius: 10px; border: 1px solid #dbdbdb; overflow: hidden; background:#fff;} .reviewSwiper .swiper-slide:hover {box-shadow: 0 2px 20px rgba(0 0 0 / 15%); transition: all 0.5s;} .bMark{position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 30px; border-radius: 5px; background: #ffa200; color: #fff; font-size: 14px; font-weight: 600; text-align: center;} .reviewSwiper .txt{padding: 20px 13px;} .reviewSwiper .txt .star {font-size:12px; color:#FFCC00;} .reviewSwiper .txt span{display: inline-block; padding: 8px 12px; border-radius: 5px; border: 1px solid #D2D6D9; background: #f9f9f9; color: #666; font-size: 14px;} .reviewSwiper .txt h3{margin-top: 10px; font-size: 15px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:38px;} .reviewSwiper .txt p{color: #888; width: 100%; margin-top: 10px; font-size: 13px; line-height: 1.4; height:55px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all;} .reviewSwiper .txt .user {margin-top:7px; font-size:12px; color:#B9B9B9;} .reviewSwiper .rCarWarp {padding:0 13px;} .reviewSwiper .rCar {padding:12px 0; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; border-top:1px solid #B9B9B9;} .reviewSwiper .rCar .rimg {width:73px; height:40px; display:flex; align-items:center; justify-content:center;} .reviewSwiper .rCar .rtxt {margin-left:5px; width:50%; padding:0 5px 0 0;} .reviewSwiper .rCar .rtxt h3 {margin-top:0; height:29px; font-size:12px; font-weight:400; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .reviewSwiper .rCar .rtxt p {margin:0; height:auto; font-size:15px; font-weight:700; color:#111; white-space:nowrap;} .reviewSwiper .rCar .rbtn {width:100%; margin-top:10px;} .reviewSwiper .rCar .rbtn a, .reviewSwiper .rCar .rbtn button {display:block; width:100%; padding:8px; text-align:center;font-size:12px; font-weight:600; background:#60584C; color:#fff; border-radius:5px;} .reviewSwiper .thumbImg{display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; height: 135px; object-fit: cover;} .reviewSwiper .thumbImg img{width: 100%; height: 100%; object-fit: cover;} .reviewSwiper .swiper-scrollbar {height:2px; width:90% !important; left:50% !important; transform:translate(-50%,0); } .markWrap{display: flex; align-items: center; gap: 4px; width: 100%;} .markWrap span{display: block; width: 72px; padding: 8px 10px; border-radius: 8px; text-align: center; color: #fff; font-size: 13px; line-height: 13px; white-space: nowrap;} .markWrap span.saleMark{background: #ff6732;} .markWrap span.fastMark{background: #716050;} .markWrap span.popularMark{background: #ffa200;} .ppinfo {font-size:14px; line-height:19px; color:#686868; font-weight:400; letter-spacing:-0.5px; text-align:right;} /*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 #1E53F2; 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:#1E53F2; 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 {position:relative; padding:0 15px; } .carList2 .list a .sale {gap:9px; justify-content:center;} .carList2 .list a .sale .mark {padding:4px 8px; background:#FFBC00; color:#fff; font-size:14px; font-weight:700; letter-spacing:-0.5px; border-radius:30px;} .carList2 .list a .sale .won {font-size:18px;} .carList2 .list a .num {position:absolute; top:20px; left:20px; width:30px; height:30px; text-align:center; font-size:14px; line-height:30px; color:#fff; font-weight:500; background:#353535; border-radius:10px;} .carList2 .list a:hover .img img {transform:scale(1.1); transition:all 0.5s;} .carList2 .list a .img {margin:10px 0 20px 0; text-align:center;} .carList2 .list a .img img {width:100%:} .carList2 .list a .text h4 { font-size:18px; font-weight:500; text-align:center;} .carList2 .list a .text h4 .mc {padding-left:15px; font-size:14px; font-weight:400; } .carList2 .list a .text p {font-size:15px; color:#686868; font-weight:400; } .carList2 .list a .text .price {margin-top:20px; font-size:25px; font-weight:bold; letter-spacing:-1px; color: #1E53F2;} .carList2 .list a .price { font-size:14px; line-height:1.4; color:#4d4d4d; font-weight:500;} .carList2 .list a .price ul { width:100%; } .carList2 .list a .price ul li { wdith:100% !important; display:flex; align-items:center; justify-content:space-between; } .carList2 .list a .price ul li .subject img {margin-left:7px; width:80px;} .carList2 .list a .price ul li .won {color:#000; font-size:20px; font-weight:bold;} .carList2 .list a .priceWrap {margin-top:15px;} .carList2 .list a .priceWrap .price {display:flex; align-items:center; justify-content:space-between; font-size:17px; line-height:1.7; font-weight:500; color:#888888;} .carList2 .list a .priceWrap .price .won {color:#888888; font-weight:700;} .carList2 .list a .priceWrap .price .won span {display:inline-block; width:80px; text-align:right;} .carList2 .list a:hover .priceWrap .price .won {color:#111;} .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:#1E53F2; color:#fff; font-size:15px; font-weight:bold; border-radius:5px;} */ .carList3 .exswiper {position:relative; margin-right:-20px; margin-left:-20px;} .carList3 .exswiper .swiper-pagination {bottom:-30px !important;} .carList3 .swiper-pagination-clickable .swiper-pagination-bullet {background:#000;} .carList3 .list {} .carList3 .list a {position:relative; display:block; border-radius:20px; box-shadow:0 3px 10px rgb(0 0 0 / 15%);} .carList3 .list a .onlyMark{position: absolute; top: -11px; right: 20px; max-width: 100px;} .carList3 .list .img {padding:20px 0 0 0; width:100%; height:210px; display:flex; align-items:center; background:#F9F9F9; } .carList3 .list .img img {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 .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');} /*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:50px; padding:0 0 110px 0; background:#fff;} #footer .term {margin-bottom:20px; background:#60584C;} #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:13px; line-height:1.8; color:#111111; opacity:0.7; } #footer .foot .container {margin:0 auto; max-width:420px; padding:0 20px; } #footer .foot span { font-size:12px; display:inline-block; width:100%; box-sizing:border-box; white-space:nowrap;} #footer .foot .fTxt {margin-top:15px; opacity:0.5;} #footer .foot .fTxt li {display:flex; align-items:baseline; gap:3px; text-align:left; line-height:1.5; } #footer .foot .fTxt li span {display:inherit; width:auto; white-space:normal;} #footer .foot .fTxt .pp {display:inline-flex; font-weight:600; text-decoration:underline;} #footer .foot .fTxt .pp .space {letter-spacing:2px;} #footer .foot .copyright {margin-top:15px; font-size:12px; color:#b3b3b3;} #footer pre {text-align:center; font-size:13px; line-height:12px; margin-left:-80px;} footer ul li:first-child:before {content:none !important;} /*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:#1E53F2; color:#fff; border:2px solid #1E53F2;} #fquick ul li a.btn2 {background:#fff; color:#1E53F2; border:2px solid #1E53F2;} #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;} /*fbn*/ .fc-p {color:#ffa800;} #fbtn {position:fixed; left:50%; bottom:15px; transform: translate(-50%, 0); width:100%; max-width:420px; z-index:98; } #fbtn .container {position:relative; width:95%; margin:0 auto; padding:10px; background:#fff; box-shadow:3px 3px 5px rgb(0 0 0 / 20%); border-radius:50px; background:#60584C;} #fbtn ul {display:flex; justify-content:space-between; align-items:center;} #fbtn ul li {width:20%; text-align:center;} #fbtn ul li img {max-width:28px;} #fbtn ul li a {display:flex; flex-direction:column; align-items:center; font-size:12px; color:#fff; gap:5px;} #fbtn ul li.call a{background:#F2F4F7; border-radius:30px; padding:11px 0;} #fbtn ul li.call a img {width:13px; } #fbtn ul li.toggle-button {background:#F2F4F7; border-radius:30px; padding:14px 0;} #fbtn ul li.toggle-button img {width:20px; } .toggle-menu {display: none; position:fixed; top:0; left:50%; transform:translate(-50%,0); width:101%; max-width:630px; height:100vh; z-index:97; background:#fff;} .toggle-menu.open {right:0;} .toggle-menu .nHeadMenu {display:none;} .toggle-menu #hSwitch {padding:0;} .toggle-menu .tgList {border-top:1px solid #7D4FED; } .toggle-menu .tgList li a.list {display:flex; align-items:center; justify-content:space-between; padding:20px 18px; border-bottom:1px solid #E6E6E6; font-size:15px; font-weight:500; color:#1a1a1a;} .toggle-menu .tgList li a.list .arrow {width:8px; height:13px;} .f-toggle #toggle + label ~ .ft-con-bg {display:none; position:relative; width:100%; height:110vh; bottom:-120px; background:rgb(0 0 0 / 70%); } .f-toggle #toggle:checked + label ~ .ft-con-bg {display:block; } .f-toggle #toggle + label {position:absolute; bottom:75px; left:50%; transform:translate(-50%, 0); width:100%; max-width:580px; z-index:9999; } .f-toggle #toggle + label .togglebtn { } .f-toggle #toggle + label .togglebtn .tgcon {position:absolute; bottom:-63px; left:50%; transform:translate(-50%,0); cursor:pointer; display:flex; gap:6px; justify-content:center; flex-direction:column; text-align:center; margin:0 auto; font-size:12px; color:#fff; font-weight:500;} .f-toggle #toggle + label .togglebtn .tgcon .circle { display:flex; justify-content:center; align-items:center; background:#FFBC00; width:60px; height:60px; border-radius:100%; box-shadow:3px 3px 5px rgb(0 0 0 / 20%);} .f-toggle #toggle + label .togglebtn .tgcon .circle img {width:22px; transform:rotate(0deg); transition:all 0.5s;} /*.f-toggle #toggle + label .togglebtn .tgcon .circle:hover img {transform:rotate(180deg); transition:all 1s;}*/ .f-toggle #toggle:checked + label .togglebtn .tgcon.up {display:none;} .f-toggle #toggle:checked + label .togglebtn .tgcon.down {display:flex;} .f-toggle #toggle:checked + label .togglebtn .tgcon.down .circle img {transform:rotate(45deg); transition:all 0.5s;} .f-toggle #toggle:checked + label .togglebtn .down img {width:22px; transform:rotate(45deg);} /* .f-toggle #toggle:checked + label .togglebtn .down {position:absolute; bottom:-50px; left:50%; transform:translate(-50%,0); cursor:pointer; margin:0 auto; display:flex; justify-content:center; align-items:center; background:#6B3BF0; width:60px; height:60px; border-radius:100%; box-shadow:3px 3px 5px rgb(0 0 0 / 20%);}*/ /* .f-toggle #toggle:checked + label .togglebtn .down {display:block; width:30px; height:4px; border-radius:50px; background:#E2E2E2; 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 .ft-con {display:none;} .f-toggle #toggle:checked + label .ft-con { display:block; height:auto; overflow-y:scroll; padding:30px 20px; width:90%; max-width:380px; border-radius:25px; background:#fff; margin:0 auto;} .f-toggle #toggle:checked + label .ft-con::-webkit-scrollbar {display:none; width:0;} .f-toggle #toggle + label .ft-con .ft-select {} .f-toggle #toggle + label .ft-con .tit{ display:flex; justify-content:space-between; align-items:center;} .f-toggle #toggle + label .ft-con .tit h2 {font-size:20px; letter-spacing:-0.5px; line-height:24px;} .f-toggle #toggle + label .ft-con .tit h5 {margin-top:5px; font-size:13px; color:#757575; font-weight:500;} .f-toggle #toggle + label .ft-con .tit .img { width:70px; 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 #1E53F2; overflow-x:hidden; height:148px; overflow-y:scroll; background:url('../_img/sselect_arrow.png') no-repeat 95% 20px #fff; background-size:13px;} .custom-select .select-items::-webkit-scrollbar {width:2px;} .custom-select .select-items::-webkit-scrollbar-thumb { background: #d7d7d7; border-radius: 10px;} .custom-select .select-hide { display: none;} .custom-select .select-items div:hover, .same-as-selected { background-color: #e8f2ff;} .mEstimateview {margin-top:20px;} .mEstimateview .mtit {display:flex; align-items:center; justify-content:flex-start; gap:9px; font-size:16px; font-weight:700; color:#1a1a1a; } .mEstimateview .mtit .ft-gb {padding-top:4px; font-size:27px; color:#d1d1d1;} .mEstimateview select {margin:5px 0 10px 0; padding:10px; border:1px solid #E6E6E6; border-radius:12px; width:100%; background:url('../_img/sselect_arrow.png') no-repeat 95% center ;background-size:13px; font-size:14px; color:#60584C;} .mEstimateview a.submit {display:block;padding:18px 5px; margin-top:15px; width:100%; background:#60584C; font-size:18px; font-weight:bold; border-radius:12px; color:#fff; text-align:center;} @media (min-width: 640px) { .f-toggle #toggle:checked + label .ft-con { height:auto;} } /*page로 변경*/ /* #cousultpage {padding-top:130px;} */ #cousultpage { width:100%; height:100%; overflow:scroll; } #cousultpage #consultpop.cp-style-1 .consultform form {padding:20px 10px;} #cousultpage #consultpop.cp-style-1 .consultform form ul {position:relative;} #cousultpage #consultpop.cp-style-1 .consultform form ul li.nscon {position:absolute; margin:0; top:-4px; right:0; flex-direction:row; font-size:13px; color:#8c8c8c;} #cousultpage #consultpop.cp-style-1 .consultform form li input {border:1px solid #e2e2e2;} #cousultpage #consultpop.cp-style-1 .consultform form li > label {width:100%; font-size:16px; font-weight:bold; margin-bottom:5px; letter-spacing:-0.5px;} #cousultpage #consultpop.cp-style-1 .consultform form li {flex-direction:column; gap:3px; margin-bottom:20px;} #cousultpage #consultpop.cp-style-1 .consultform form li.row {flex-direction:row; align-items:center;} #cousultpage #consultpop.cp-style-1 .consultform form li.row > label {width:120px; margin-bottom:0 !important;} #cousultpage #consultpop.cp-style-1 .consultform form li.info {margin:25px 0; flex-direction:row; gap:3px;} #cousultpage #consultpop.cp-style-1 .consultform form li.info > label {width:90px; margin:0; } #cousultpage #consultpop.cp-style-1 .consultform form li.info span > label {width:50px; font-size:15px;} #cousultpage #consultpop.cp-style-1 .consultform form li input {width:100%;} #cousultpage #consultpop.cp-style-1 .consultform form li p {width:100%; font-size:15px; font-weight:500;} #cousultpage #consultpop.cp-style-1 button { position:relative; margin-top:20px; border-radius:5px; padding:17px 0; } #cousultpage #consultpop.cp-style-1 .agreecon {display:none;} #cousultpage #consultpop.cp-style-1 .agree input[type="checkbox"] + label {font-size:13.5px; color:#222;} #cousultpage #consultpop.cp-style-1 .agree {margin:20px 0; } #cousultpage.consultfinish .container {display:flex; justify-content:center; align-items:center; flex-direction:column; min-height:50vh;} #cousultpage.consultfinish .container h2 {margin-bottom:5px; font-size:18px; font-weight:bold;} #cousultpage.consultfinish .container p {font-size:14px; color:#8c8c8c;} /*Contact custom*/ #consultpop.cp-style-1 {} /*#consultpop.cp-style-1 .tit { padding:30px 20px 20px 20px; text-align:center;} #consultpop.cp-style-1 .tit a.close {position:absolute; top:27px; right:25px;} #consultpop.cp-style-1 .tit h2 {margin-bottom:5px; font-size:24px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #consultpop.cp-style-1 .tit p {font-size:14px; color:#8c8c8c;}*/ #consultpop.cp-style-1 .infoWarp {padding:0 30px; margin:25px auto 20px auto;} #consultpop.cp-style-1 .infoWarp .cinfo {margin-bottom:7px; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; background:#F8F8F8; border-radius:10px;} #consultpop.cp-style-1 .infoWarp .cinfo p {font-size:14px; font-weight:500; line-height:1.4; letter-spacing:-0.5px;} #consultpop.cp-style-1 .infoWarp .cinfo .ico {width:40px;} #consultpop.cp-style-1 .infoWarp .pns {text-align:right; font-size:14px; color:#a4a4a4; letter-spacing:-0.5px;} #consultpop.cp-style-1 .consultform .formList .btnInput {width:100%; display:flex; align-items:center; justify-content:space-between; gap:5px;} #consultpop.cp-style-1 .consultform .formList .btnInput li {margin-bottom:0; width:33.33%; text-align:center;} #consultpop.cp-style-1 .consultform .formList .btnInput input {appearance:none; display:none; } #consultpop.cp-style-1 .consultform .formList .btnInput input + label {margin-bottom:0; display:block; padding:10px 0; font-size:13px; font-weight:500; border:1px solid #c5c5c5; border-radius:6px; cursor:pointer; width:100%;} #consultpop.cp-style-1 .consultform .formList .btnInput input:checked + label {border:1px solid #FFCE46;} #consultpop.cp-style-1 .agreeCheck {margin:20px 0;} #consultpop.cp-style-1 .pd {padding:0 30px;} #consultpop.cp-style-1 .consultform .formList {padding:0 30px;} #consultpop.cp-style-1 .consultform .formList h3 {margin:25px 0 11px 0; font-size:15px; font-weight:700;} #consultpop.cp-style-1 .consultform .formList li {display:flex; flex-direction:column; margin-bottom:15px;font-weight:500;} #consultpop.cp-style-1 .consultform .formList li:last-child {margin-bottom:0;} #consultpop.cp-style-1 .consultform .formList li label {margin-bottom:7px; width:100px; font-size:15px; color:#1a1a1a; font-weight:500; letter-spacing:-1px; font-weight:700;} #consultpop.cp-style-1 .consultform .formList li .subdate {padding:0 0 10px 0; width:100%; text-align:left;} #consultpop.cp-style-1 .consultform .formList li input {padding:12px 17px; width:100%; border:1px solid #c5c5c5; border-radius:5px; box-sizing:border-box;} #consultpop.cp-style-1 .consultform .formList li .selectWarp {position:relative; width:100%;} #consultpop.cp-style-1 .consultform .formList li .selectWarp .arrow {position:absolute; top:50%; right:15px; transform:translate(0,-50%); font-size:11px; color:#a4a4a4; z-index:9;} #consultpop.cp-style-1 .consultform .formList li select {padding:13px 17px; width:100%; border:1px solid #c5c5c5; border-radius:5px; box-sizing:border-box; cursor:pointer;} #consultpop.cp-style-1 .consultform button {width:100%; padding:19px 0; background:#FFCE46; color:#111; border-radius:7px; font-size:18px; font-weight:700;} #consultpop.cp-style-1 .ns {padding: 0 0 0 3px; font-size:16px; line-height:22px; color:#da1629;} #consultpop.cp-style-1 .pns {padding:15px 0; font-size:13px; color:#a4a4a4; border-bottom:1px solid #EFEFEF; text-align:right;} .fastForm {padding:0 15px !important;} #consultpop.sevenpop .pd {padding:0 15px;} /*즉시출고 팝업 2023*/ .winLayWrap.winLayWrap-size-lg .winLayContainer {max-height:750px !important;} #consultpop.sevenpop .tit a.close {position:absolute; top:20px; right:20px;} #consultpop.sevenpop .tit {position:fixed; top:0; padding:20px 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;} .svCarPop {position:relative; padding:20px; margin-bottom:20px;} .svCarPop .markWrap {position:absolute; top:18px; right:20px; display:inline-block; width:auto;} .svCarPop .markWrap span {width:auto; border-radius:500px; font-size:12px; line-height:12px;} .svCarPop .name {display:flex; align-items:center; gap:7px; padding:0 80px 0 0 ;} .svCarPop .name .brand {width:50px;} .svCarPop .name h3 {font-size:15px; line-height:1.4;} .svCarPop .price {margin:40px 0 15px 0; font-size:16px; font-weight:500; line-height:13px; color:#969696;} .svCarPop .price span {font-size:160%; font-weight:bold; color:auto; } .svCarPop .option {position:relative; z-index:10px;} .svCarPop .option li {display:flex; gap:7px; margin-bottom:3px; font-size:13px; font-weight:500; line-height:1.4;} .svCarPop .option li .subject {opacity:0.5;} .svCarPop .option li:last-child {margin-bottom:0;} .svCarPop .carImg {position:absolute; top:61px; right:8px; width:175px; height:86px; background-size:contain; background-repeat:no-repeat; z-index:9;} /*#consultpop.sevenpop .consultform form li {flex-direction:column; align-items:flex-start; gap:5px;}*/ #consultpop.sevenpop .consultform form li input {width:100%;} #consultpop.cp-style-1 .consultform form .condition {margin-top:20px;} #consultpop.cp-style-1 .consultform form .condition li {display:flex; margin:0 0 20px 0; justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:7px;} #consultpop.cp-style-1 .consultform form .condition li > label {font-size:14px; 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:14px; 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:16px 5px 12px 5px; text-align:center; background:#fff; z-index:99; box-shadow:3px 3px 5px rgba(0 0 0 / 15%); height:80px; display:flex; align-items:center; justify-content:center;} #immcarPop .pop-container .tit h2 {margin-bottom:5px; font-size:20px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #immcarPop .pop-container .tit p {font-size:14px; color:#8c8c8c; display:none;} #immcarPop .pop-container .cont { margin-top:95px; } #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 #ffbc00;} .subcarList .list.on {border:2px solid #ffbc00;} .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:#FF9100; color:#fff; border-radius:500px;} .subcarList .list .ab .seven {padding:5px 12px; font-size:12px; line-height:12px; background:#FF9100; color:#fff; border-radius:500px;} .subcarList .list .img {padding:5px; height:160px; display: flex; justify-content: center;} .subcarList .list:hover .img img {transform: scale(1.1); transition:all 1s;} .subcarList .list h3 {margin:0; font-size:16px; } .subcarList .list .option {margin:15px 0;} .subcarList .list .option li {margin-bottom:5px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:400;} .subcarList .list .option li .name {width:40px; font-weight:500;} .subcarList .list .option li .txt {display:flex; align-items:center; width:100%;} .subcarList .list .option li .color {display:block; width:13px; height:13px; border:1px solid #707070; box-sizing:border-box;} .subcarList .list .option li .colorbox {display:none; width:15px; height:15px; border-radius:4px; border:1px solid #ececec;} .subcarList .list .price li {padding:2px 0;} .subcarList .list .price li {display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:13px; font-weight:400;} .subcarList .list .price li .name {width:46px;} .subcarList .list .price li .won {font-size:130%;} #immcarPop a.close {position:absolute; top:17px; right:15px; z-index:9;} #immcarPop {} #immcarPop .subcarList .list { position:relative; /*display:flex; align-items:center; gap:13px; */ } #immcarPop .subcarList .list .txt {width:60%; /*position:relative; z-index:99;*/} #immcarPop .subcarList .list .img {position:absolute; top:55%; right:0; transform:translate(0, -50%); width:170px; z-index:98;} #immcarPop .subcarList .list .ab {left:inherit; right:15px;} #immcarPop .subcarList .nametit {align-items:center; gap:7px;} #immcarPop .subcarList .nametit .brand {width:40px;} #immcarPop .subcarList .pluswrap {margin-top:15px; display:flex; align-items:center; justify-content:space-between;} #immcarPop .subcarList .nametxt { /*width:150px;*/ } #immcarPop .subcarList .plusbtn { 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:#716050; 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:#FFCC00; color:#111;} #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:#1E53F2; 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:#1E53F2; border:1px solid #1E53F2; 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:#1E53F2; 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:#716050;} .flex {display:flex; align-items:center;} .flex-space {display:flex; justify-content:space-between;} .center {align-items:center;} .between {justify-content:space-between;} .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; background:#fff;} #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-list .subject { padding:15px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:15px; font-weight:500; border-bottom:1px solid #ECECEC; background:#f9f9f9;} .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:#716050; font-weight:500;} .seven-list .subject .arrow .ico {font-size:18px;} .seven-list .subject .arrow .close span {transform:rotate(-180deg); line-height:13px;} .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:#ff6732; color:#fff;} .seven-list .count p {padding:5px; width:100px; border-radius:2px; background:#716050; color:#fff; font-size:13px; text-align:center;} .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; align-items:center; gap:7px;} .seven-list .color .colorbox {width:15px; height:15px; border:1px solid #f3f3f3; border-radius:3px;} .seven-list .mid {margin:12px 0; } /* .seven-list .plusbtn {padding:3px 12px; display:inline-flex; border-radius:7px; font-size:14px; background:#1E53F2; color:#fff; gap:7px; align-items:center;} .seven-list .plusbtn .plus {display:inline-block; width:14px; height:14px; line-height:13px; background:#fff; color:#1E53F2; 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:#716050; color:#fff; gap:7px; align-items:center;} .seven-list .plustit .plus {display:inline-block; width:17px; height:17px; line-height:17px; background:#fff; color:#716050; border-radius:100%; text-align:center;} .seven-list .plusbtn .plusview {display:none; } /* .seven-list .plusbtn:hover .plusview{ display:block; position:absolute; top:0; left:0; width:300px; border-radius:13px; border:1px solid #1E53F2; 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 #716050; box-shadow:2px 2px 3px rgba(0 0 0 / 15%); background:#fff; text-align:left; overflow:hidden; z-index:99;} .seven-list .plusbtn .plusview .plustit {width:100%; border-radius:0; display:flex; justify-content:space-between; align-items:center;} .seven-list .plusbtn .plusview .plustit .ppname {gap:5px;} .seven-list .plusbtn .plusview .plustit button {color:#fff; background:none;} .seven-list .plusbtn .plusview ul {background:#fff; padding:12px; height:255px; overflow-y:scroll;} .seven-list .plusbtn .plusview li {padding:12px; background:#f5f5f5; color:#656565; border-radius:10px; margin-bottom:7px; font-size:14px; font-weight:500; justify-content:space-between;} .seven-list .plusbtn .plusview li:last-child {margin-bottom:0;} .seven-list .plusbtn .plusview li .name {display:flex; align-items:center; gap:5px; } .seven-list .plusbtn .plusview li .name .txt {/*width:135px; overflow: hidden; text-overflow: ellipsis;*/ white-space: nowrap;} .seven-list .plusbtn .plusview li .name .check {width:17px;} .seven-list .plusbtn .plusview li .won {font-weight:bold;} .seven-list .price {font-size:15px; line-height:14px; color:#b1b1b1; font-weight:500;} .seven-list .price span {font-size:150%; font-weight:700;} .seven-list a.btn {display:inline-flex; gap:7px; align-items:center; padding:4px 12px; border-radius:3px; font-size:14px; } .seven-list a.btn img {width:15px; height:15px;} .seven-list a.btn.view {background:#e4f1ff; color:#1468c8;} .seven-list a.btn.write {background:#ffe4e4; color:#c81212;} #pluspop .plusview .plustit {width:100%; padding:15px 12px; display:inline-flex; font-size:15px; background:#1E53F2; 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:#1E53F2; 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;} @media (max-width: 400px) { .mmbr {display:block; width:100%; height:1px; } } @media (min-width: 420px) { #fEvent .container a {height:420px;} }