/*content-size*/ .container {margin:0 auto; width:1400px; position:relative; } .conLeft { width:840px; } .conRight { width:335px; } .content {} .flex {display:flex; align-items:center;} .wLayPopupWrap .wLayItem .wLayHead {font-size:20px; line-height:2.5;} .pc {display:none;} .mobile {display:block;} /***************header************ #header {position:fixed; height:80px; width:100%; background:#fff; box-shadow:3px 1px 30px rgba(0,0,0,0.2); z-index:999;} #header .container {display:flex; flex-wrap:wrap; padding-top:9px; align-items:baseline;} #header .container h1 {width:140px;} #header .container h1 img {width:100%;} #header .container .gnb {display:flex; margin-left:45px;} #header .container .gnb a {padding:20px 25px; font-size:18px; color:#1a1a1a; font-weight:500; letter-spacing:-0.5px;} #header .container .gnb a:hover {color:#00abce; font-weight:800; transition: all ease 0.25s; } #header .container .gnb a.on {color:#00abce; font-weight:800; transition: all ease 0.25s; } #header .h-cs { position: relative; display: inline-block;} #header .h-cs-content { display: none; position: absolute; top:0; margin-top:55px; padding:10px 0; background:rgba(255,255,255,0.8); border-radius:10px; min-width: 130px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;} #header .h-cs-content a { color: black; padding: 12px 16px !important; font-size:16px !important; text-decoration: none; display: block; text-align:center;} #header .h-cs-content a:hover {background-color: #EFEFEF;} #header .h-cs:hover .h-cs-content {display: block;} */ /* head */ #header .datalogo1019 {image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */} .hevent a {display:flex; justify-content:center; align-items:center; gap:5px; width: 100%; padding: 12px 0; background: #3651E0; color: #fff; font-size: 18px; text-align: center;} .hevent a:hover {background: #223dd1; transition: all 0.5s;} .htop {/*padding:17px 0;*/ height:111px; display:flex;} .htop.scroll .search-results { display:none; } .htop .container{display: flex; justify-content: space-between; align-items: center; gap:33px;} .htop .logo {display:flex; aling-items:center; gap:5px;} .htop .logo video {width: 170px;} .htop .logo .logokcm {width:96px;} .htop .top-slide {width: 356px; margin-right:0; margin-top:-10px;} .htop .top-slide .swiper-slide {/*padding: 0 30px;*/ padding:4px;} .htop .top-slide .swiper-slide img {border-radius: 15px; overflow: hidden; filter:drop-shadow(3px 3px 3px #eee);} .htop .top-slide .swiper-button-next {right: 0;} .htop .top-slide .swiper-button-next:after {color: #8a8a8a; font-size: 14px; font-weight: bold;} .htop .top-slide .swiper-button-prev {left: 0;} .htop .top-slide .swiper-button-prev:after {color: #8a8a8a; font-size: 14px; font-weight: bold;} .kcmlogo {display:flex; align-items:center; gap:5px;} .kcmlogo .logoimg {width:127px;} .kcmlogo .logokcm {width:96px;} .hmenu {position:absolute; top:159px; width:100%; background:#fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; z-index:99; } .hmenu.scroll {position:fixed; top:0; } .hmenu .container {display: flex; justify-content: space-between; align-items: center; padding:0 10px;} .hmenu .gnb {display: flex;} .hmenu .gnb li.first a {padding: 17px 25px 17px 0;} .hmenu .gnb a {padding: 17px 25px; color: #1a1a1a; font-size: 17px; font-weight: 500; letter-spacing: -0.5px;} .hmenu .gnb a:hover {color: #3651E0; font-weight: 800; transition: all ease 0.25s;} .hmenu .gnb a.on {color: #3651E0; font-weight:800; transition: all ease 0.25s;} .hmenu .gnb .h-cs {position: relative; display: inline-block;} .hmenu .gnb .h-cs-content {display: none; position: absolute; top: 0; left:50%; transform:translate(-50%,0); min-width: 185px; margin-top: 55px; padding: 10px 0; border-radius: 10px; background: rgba(255,255,255,0.8); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 101;} .hmenu .gnb .h-cs-content a {display: block; color: black; padding: 12px 16px !important; font-size: 16px !important; text-align: center; text-decoration: none;} .hmenu .gnb .h-cs-content a:hover {background: #fff; color: #00abce;} .hmenu .gnb .h-cs:hover .h-cs-content {display: block;} .hmenu .snb {display: flex; align-items: center; gap: 10px; width:205px;} .hmenu.scroll .gnb li.first a {padding: 22px 25px 22px 0;} .hmenu.scroll .gnb a {padding: 22px 15px; font-size:16px;} /*.hmenu .snb img {height: 33.5px;}*/ .btn.all a {display: inline-flex; align-items: center; gap: 30px; padding: 12px 15px 12px 22px; border: 1px solid #dbdbdb; border-radius: 50px; color: #4d4d4d; font-size: 14px; font-weight: 500;} .btn.all a .arrow {width: 8px; height: 8px; color: #4d4d4d;} .btn.all a:hover {border: 1px solid #0866f6; background: #0866f6; color: #fff; transition: all 0.5s;} .btn.all a:hover .arrow {color: #fff;} /*search*/ .hmenu .search {display:none;} .hmenu.scroll .search {display:block; padding:13px 18px;} .hmenu.scroll .search input {font-size:14px;} .hmenu.scroll .search-results { top: 70px; } .search { position: relative;padding:16px 25px; display:flex; align-items:center; background:#EBEBEC; border-radius:10px;} .search input {background:#EBEBEC; width:255px; max-width:fit-content; font-size:15px; line-height:1.5; color:#989898; letter-spacing:-0.5px} .search .searchBtn { background-color: transparent; } .search .searchBtn img { width:21px; } .search-results { position:absolute; top:-20px; left: 50%; transform:translate(-50%,0); width: 100%; max-width:1000px; height:505px; z-index:101; padding:30px 25px; border-radius:0; box-shadow:3px 3px 5px rgb(0 0 0 / 30%); background:#fff; border-radius:20px;} .search-results .close {position:absolute; top:30px; right:30px; width:18px;} .search-results h3 {margin-bottom:15px; font-size:18px; font-weight:700; color:#363636;} .search-results a {display:inline-block;} .search-results .latest {margin-bottom:30px;} .search-results .latest ul {display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .search-results .latest ul a ,.search-results .latest ul button {min-width:50px; padding:10px 13px 9px 13px; font-size:16px; font-weight:500; color:#fff; background:#ccc; border-radius:50px; box-shadow:2px 3px 3px rgb(0 0 0 / 7%); text-align:center;} .search-results .hot { } .search-results .hotTab { margin-bottom:22px; display:flex; align-items:center; gap:14px; } .search-results .hotTab input[type="radio"] {display:none; appearance:none;} .search-results .hotTab input[type="radio"] + label {display:block; min-width:54px; padding:10px 13px 9px 13px; font-size:16px; font-weight:500; color:#828282; border-radius:50px; box-shadow:2px 3px 3px rgb(0 0 0 / 7%); text-align:center; cursor:pointer;} .search-results .hotTab input[type="radio"]:checked + label {background:#1E53F2; color:#fff;} .search-results .hot-content {display:flex; align-items:center; gap:33px;} .search-results .hot-content ul {width:50%;} .search-results .hot-content li {padding:10px 0; display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:600; color:#363636; border-bottom:1px solid #efefef;} .search-results .hot-content li:last-child {border-bottom:0;} .search-results .hot-content li .text {display:flex; align-items:center; gap:16px; width:100%;} .search-results .hot-content li .text a ,.search-results .hot-content li .text button {width:80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color:transparent; text-align: left; font-size:16px; color:#000; font-weight:400;} .search-results .hot-content li .num {width:14px; text-align:center;} .search-results .hot-content li .arrow {font-size:10px; width:20px; text-align:center; } .search-results .hot-content li .arrow.same {font-size:16px; font-weight:800; color:#ababab;} .search-results .hot-content li .arrow.up {color:#FF0000;} .search-results .hot-content li .arrow.down {color:#1700FF;} .search-results .sr-top {margin-bottom:15px; display:flex; align-items:center; justify-content:space-between; gap:14px;} .search-results .sr-top .back button {background:transparent; width:12px;} .search-results .sr-top .btn button {background:transparent; font-size:15px; color:#9B9B9B;} .search-results .sr-top .in-serch {position:relative; width:100%;} .search-results .sr-top .in-serch input {padding:12px 12px 12px 45px !important; background:#EBEBEC !important; border-radius:10px !important; width:100%;} .search-results .sr-top .in-serch img {position:absolute; top:50%; left:15px; transform:translate(0,-50%); width:20px;} /***************main*************/ /*visual*/ #mvisual {margin-top:90px; padding-bottom:70px;} #mvisual .container {display:flex; gap:22px; justify-content:space-between;} #mvisual .visual-img {width:420px; display:flex; flex-direction:column; gap:22px; } #mvisual .visual-img a {display:block; height:190px; border-radius:20px; /*box-shadow:3px 3px 5px rgba(0 0 0 / 15%);*/ overflow:hidden;} #mvisual .visual-img a.etcBtn {border:1px solid #f5f5f5;} .visualSwiper {position:relative !important; z-index:9; width:953px;} .visualSwiper .swiper-slide {} .visualSwiper .swiper-slide a {display:block; height:402px; border-radius:20px; overflow:hidden;} #mvisual .pagewrap {position: absolute; bottom: -70px; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; z-index: 9;} #mvisual .pagewrap .container {padding:0 2px;} #mvisual .pagewrap .playnpause {width:130px; display: flex; align-items: center; gap: 15px; padding:15px 24px; border-radius: 50px; background:#767677; color:#fff; font-size:14px; font-weight:600;} #mvisual .pagewrap .playnpause a img {width:15px; filter:grayscale(1) brightness(3.5);} #mvisual .pagewrap .playnpause .autoplay {display: none;} #mvisual .pagewrap .playnpause .autoplay.on {display: block; width: 16px;} #mvisual .pagewrap .playnpause .pagination_num {margin-left: 10px;} #mvisual .pagewrap .swiper-pagination-fraction {width: auto;} #mvisual .pagewrap .pagination_ball {width: auto; margin-left: 20px; line-height: 0;} #mvisual .pagewrap .allbtn a {padding:10px 13px 10px 23px; display:inline-block; border-radius:50px; border:1px solid #dbdbdb; color:#4D4D4D; gap:15px;} #mvisual .pagewrap .swiper-pagination-bullets {line-height: 0;} #mvisual .pagewrap .swiper-pagination-bullet {width: 12px; height: 12px; margin: 0 6px; border-radius: 2px; background: #c7d3e2; opacity: 1;} #mvisual .pagewrap .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #00abce;} #visulSm {margin-top:30px;} #visulSm .list a {display:block; width:100%; height:152px; border-radius:20px; /*border:1px solid #AFAFAF;*/} #main .bntit {margin-bottom:30px; display:flex; justify-content:space-between; align-items:center; font-weight: bold; font-size:36px;} #main .bntit h2 { width:300px; font-size:36px; font-weight:bold; letter-spacing:-2px;} /* #main .bntit a {padding:12px 22px; font-size:16px; line-height:16px; color:#222; font-weight:400; letter-spacing:-1px; opacity:0.6; display:flex; align-items:center; border:1px solid #dbdbdb; border-radius:500px;} #main .bntit a:hover {opacity:1; } #main .bntit a span {margin-left:7px; display:block; width:15px;} */ /* form */ #mform {margin:40px 0 80px 0;} #mform .formList {display: flex; justify-content: space-between; align-items: stretch; gap: 10px; width: 100%;} #mform .formList li {position: relative; width: 100%;} #mform .formList li input {width: 100%; padding: 60px 27px 30px 27px; border-radius: 20px; box-shadow: 3px 3px 10px rgba(0 0 0 /15%);} #mform .formList li label {position: absolute; top: 30px; left: 25px; font-size: 15px; letter-spacing: -0.5px;} #mform .formList li input:focus {outline: 1px solid #1E53F2;} #mform .formList li input::placeholder{color: #bbb; font-size: 15px; letter-spacing:-1px; font-weight: 500;} #mform .formList li.formBtn {width: auto; padding: 0;} #mform .formList li.formBtn button {width: 120px; height: 100%; background: #1E53F2; color: #fff; border-radius: 20px; font-size: 20px; font-weight: 600; overflow: hidden;} #mform .formList li.formBtn button:hover {background: #1344d9; transition: all 0.5s;} #mform .gnaAgree { margin-top:17px; font-size: 14px; letter-spacing: -0.5px;} #mform .gnaAgree ul {width:100%; display:flex; align-items:center; justify-content: end; gap:15px;} #mform .gnaAgree ul li { display:flex; align-items:center; gap:3px;} #mform .gnaAgree a {opacity:0.7;} .gnaAgree {width: 100%;} .gnaAgree label {gap: 3px;} .gnaAgree input[type="checkbox"] {display: none; appearance: none;} .gnaAgree input[type="checkbox"] + label {position: relative; padding-left: 23px; cursor: pointer;} .gnaAgree input[type="checkbox"] + label:before {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 17px; height: 17px; border-radius: 2px; border: 1px solid #d4d4d4; box-sizing: border-box; /*background: url('/_img/ico_check.png') no-repeat 60% 60% #fff;*/ background-size: 10px;} .gnaAgree input[type="checkbox"]:checked + label:after {content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 17px; height: 17px; border-radius: 2px; border: 1px solid #1e53f2; box-sizing: border-box; background: url('/_img/ico_check_blue.png') no-repeat 60% 60% #fff; background-size: 10px;} /*estimate*/ #mEstimate {position:relative;/* height:100px; */ z-index:100; top:-50px;} #mEstimate .container {/*position:absolute; top:-45px; left:50%;transform: translate(-50%, 0); */ padding:30px 140px; box-shadow:8px 5px 8px rgba(0,0,0,4%); background:#fff; border-radius:5px; z-index:999;} #mEstimate h3 {font-size:22px; text-align:center; font-weight:400; cursor:pointer;} #mEstimate h3 .bold {font-weight:600;} #mEstimate h3 .bg-s {padding:5px 12px; font-weight:600; font-size:16px; border-radius:500px; line-height:25px;} #mEstimate .mEstimateview {display:none;} #mEstimate .estimate-con {display:flex; flex-wrap:wrap; justify-content:space-between; padding-top:35px;} #mEstimate .estimate-con .select {display:flex; gap:15px; border-bottom:1px solid #d1d1d1; padding:0;} #mEstimate .estimate-con .select .ft-gb {font-size:35px; color:#d1d1d1;} #mEstimate .estimate-con .select select {margin-top:-10px; width:175px; font-size:18px; font-weight:600; text-align:center; color:#1a1a1a; background:url('/_img/select_arrow.png') no-repeat center right; background-size:14px; padding:0 18px 0 0 ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #mEstimate .estimate-con .select select#manufact option {padding:5px 0;} #mEstimate .estimate-con button ,#mEstimate .estimate-con a {padding:13px 45px; background:#4d4d4d; color:#fff; border-radius:5px; font-size:18px; font-weight:600; } #mEstimate .estimate-con button:hover ,#mEstimate .estimate-con a:hover {background:#2e2e2e; transition: all ease 1s; } /*mConsult*/ #mConsult .ns {padding: 0 0 0 3px; font-size:21px; color:#00abce;} #mConsult .consultview {padding:30px 140px; color:#fff; border-radius:5px; text-align:center; box-shadow:5px 3px 10px #e6e6e6; } #mConsult .consultview h2 {margin-bottom:25px; font-size:30px;} #mConsult .consultview p {position:relative; margin:15px 0 25px 0; font-size:16px; cursor:pointer; font-weight:400;} #mConsult .consultview p span {margin-left:-21px;} #mConsult .consultview p:after {position:absolute; margin-left:5px; content:'+'; font-weight:500; font-size:33px; line-height:13px; width:20px; height:20px; } #mConsult .consultview p:hover:after {animation: tire-rotate 1s linear; transform-origin: 50% 50%;} #mConsult .consultview p.on:after {margin-left:5px; content:'-'; font-weight:500; font-size:33px;line-height:13px; width:20px; height:20px; } #mConsult .consultview p.on:hover:after {animation: tire-rotate 1s linear; transform-origin: 50% 50%;} #mConsult .consultview .consultview-con {display:flex; flex-wrap:wrap; justify-content:space-between;} #mConsult .consultview .consultview-con input {padding:15px; border-radius:3px; width:30%;} #mConsult .consultview .consultview-con input:first-child {width:20%;} #mConsult .consultview .consultview-con button {padding:15px 45px; background:#00254e; color:#fff; border-radius:5px; font-size:18px; font-weight:600; } #mConsult .consultview .consultview-con button:hover {background:#001328; transition: all ease 1s; } #mConsult .consultview .agreecon {display:flex; justify-content:space-between; align-items:center;} #mConsult .consultview .agree {margin-top:15px; display:flex; gap:5px; letter-spacing:0; color:#1a1a1a; font-weight:500;} #mConsult .consultview .consultclick {margin-top:15px; display:flex; gap:5px; letter-spacing:0; color:#D6F2F8; font-weight:500; } #mConsult .consultform-warp {display: none; overflow: hidden; padding:30px 0; font-size:16px; background-color: #fff; border-radius:0 0 5px 5px; border-right:1px solid #d1d1d1; border-left:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; box-shadow:5px 3px 10px #e6e6e6; } #mConsult .consultform {display:flex; flex-wrap:wrap;} #mConsult .consultform ul {padding: 0 55px 0 35px; display:flex; flex-basis:60%; flex-direction:column; box-sizing:border-box;} #mConsult .consultform ul.line {padding: 0 35px 0 55px;border-right:1px solid #d1d1d1; flex-basis:40%;} /*check custom*/ #mConsult .agree input[type="checkbox"]{appearance:none; } #mConsult .agree input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:25px; cursor:pointer; } #mConsult .agree input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:-1px; width:18px; height:18px; text-align:center; background:#fff; box-sizing:border-box; } #mConsult .agree input[type="checkbox"]:checked + label:after {content:url('/_img/mEstimate_check.png'); position:absolute; top:1px; left: 2px; width:15px; height:11px; /* border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);*/ } /*check custom*/ #mConsult .consultclick input[type="checkbox"]{appearance:none; } #mConsult .consultclick input[type="checkbox"] + label {display:inline-block; position:relative; padding-right:25px; cursor:pointer; } #mConsult .consultclick input[type="checkbox"] + label:before{ content:''; position:absolute; right:0; top:-1px; width:18px; height:18px; text-align:center; background:#fff; box-sizing:border-box; } #mConsult .consultclick input[type="checkbox"]:checked + label:after {content:url('/_img/mEstimate_check.png'); position:absolute; top:1px; right: 1px; width:15px; height:11px;} #mConsult .consultform ul li {margin-bottom:40px; display:flex; gap:40px; font-size:16px; } #mConsult .consultform ul li:last-child {margin-bottom:0;} #mConsult .consultform ul li > label {width:80px; color:#1a1a1a; font-weight:600; letter-spacing:-1px;} #mConsult .consultform ul li span > label {font-weight:600; color:#4d4d4d;} #mConsult .consultform input + label {cursor:pointer;} #mConsult .consultform .input {width:80%;} /*Contact custom*/ #mConsult .consultform .input-Contact span input[type="checkbox"]{ appearance:none; } #mConsult .consultform .input-Contact span input[type="checkbox"] + label {display:inline-block; position:relative; margin-right:35px; padding-right:5px; width:50px;} #mConsult .consultform .input-Contact span input[type="checkbox"] + label:before{ content:''; position:absolute; right:0; top:0; width:17px; height:17px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #mConsult .consultform .input-Contact span input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:4px; right: 4px; width:9px; height:9px; background:#000; border-radius:100%; } /*Time custom*/ #mConsult .consultform .input-Day {margin-bottom:15px;} #mConsult .consultform .input-Day span input[type="checkbox"]{ appearance:none; } #mConsult .consultform .input-Day span input[type="checkbox"] + label {display:inline-block; position:relative; padding:5px 0; width:33px; height:33px; text-align:center;} #mConsult .consultform .input-Day span input[type="checkbox"] + label .ff {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99;} #mConsult .consultform .input-Day span input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:0; width:33px; height:33px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #mConsult .consultform .input-Day span input[type="checkbox"]:checked + label:after {content: ''; position:absolute;left:0; top:0; width:33px; height:33px; background:#4d4d4d; border-radius:100%; color:#fff;} #mConsult .consultform .input-Day span input[type="checkbox"]:checked + label .ff {color:#fff;} /*Select custom*/ #mConsult .consultform .select {display:flex; gap:10px; align-items:center;} #mConsult .consultform select {position:relative; padding:6px 30px 6px 13px; border:1px solid #b3b3b3; border-radius:3px; background:url('/_img/select_arrow.png') no-repeat 55px; background-size:8px; background-position:90% 50%; text-align:center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} ::-webkit-scrollbar {width: 5px;} ::-webkit-scrollbar-track {background:#f1f1f1;} ::-webkit-scrollbar-thumb { background:#ddd; border-radius: 10px;} ::-webkit-scrollbar-thumb:hover { } #mConsult .consultform .input-Car .select select{width:33.33%;} #mConsult .consultform .input-Textarea textarea {padding:15px; width:100%; border:1px solid #b3b3b3; border-radius:5px;} /*Period custom*/ #mConsult .consultform .input-Period span input[type="radio"]{ appearance:none; } #mConsult .consultform .input-Period span input[type="radio"] + label {display:inline-block; position:relative; padding:5px 0; margin:-3px; width:34%; height:33px; text-align:center;} #mConsult .consultform .input-Period span input[type="radio"] + label .ff {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99;} #mConsult .consultform .input-Period span input[type="radio"] + label:before{ content:''; position:absolute; left:0; top:0; width:100%; height:33px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; } #mConsult .consultform .input-Period span input[type="radio"]:checked + label:after {content: ''; position:absolute;left:50%; top:50%; width:102%; transform: translate(-50%, -50%); height:35px; background:#4d4d4d; border-radius:5px; color:#fff; z-index:9;} #mConsult .consultform .input-Period span input[type="radio"]:checked + label .ff {color:#fff;} #mConsult .consultform .input-Period.input {padding-left:3px;} /*Customer custom*/ #mConsult .consultform .input-Customer span input[type="radio"]{ appearance:none; } #mConsult .consultform .input-Customer span input[type="radio"] + label {display:inline-block; position:relative; padding:5px 0; margin:-3px; width:34%; height:33px; text-align:center;} #mConsult .consultform .input-Customer span input[type="radio"] + label .ff {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99;} #mConsult .consultform .input-Customer span input[type="radio"] + label:before{ content:''; position:absolute; left:0; top:0; width:100%; height:33px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; } #mConsult .consultform .input-Customer span input[type="radio"]:checked + label:after {content: ''; position:absolute;left:50%; top:50%; width:102%; transform: translate(-50%, -50%); height:35px; background:#4d4d4d; border-radius:5px; color:#fff; z-index:9;} #mConsult .consultform .input-Customer span input[type="radio"]:checked + label .ff {color:#fff;} #mConsult .consultform .input-Customer.input {padding-left:3px;} /*Prcie custom*/ #mConsult .consultform .input-Price .rs-container .rs-pointer {width:15px; height:15px; border-radius:100%; border:4px solid #4d4d4d; box-sizing:border-box;} #mConsult .consultform .input-Price .rs-container .rs-scale {cursor:pointer;} #mConsult .consultform .input-Price .rs-container .rs-scale span ins {font-size:12px; color:#8c8c8c; font-weight:400;} #mConsult .consultform .input-Price .rs-container .rs-bg {height:5px; background:#b3b3b3; cursor:pointer; } #mConsult .consultform .input-Price .rs-container .rs-bg:before {position:absolute; content:''; top:50%; left:-3px;transform: translate(0, -50%); width:15px; height:15px; background:#b3b3b3; border-radius:100%;} #mConsult .consultform .input-Price .rs-container .rs-bg:after {position:absolute; content:''; top:50%; right:-13px;transform: translate(0, -50%); width:15px; height:15px; background:#b3b3b3; border-radius:100%;} #mConsult .consultform .input-Price .rs-container .rs-selected { height:5px; background:#4d4d4d; border:none;} #mConsult .consultform .input-Price .rs-container .rs-pointer::after, .rs-container .rs-pointer::before {display:none;} /*7일인도특가*/ #mWeeks {margin-bottom:120px;} #mWeeks .weekwrap {display:flex; justify-content:space-between; gap:50px; margin-right:-30px;} #mWeeks .weektit {position: relative; width: 100%; max-width: 240px; margin-top:10px;} #mWeeks .weektit h2{font-size: 44px; line-height:58px; font-weight: 800; white-space: nowrap; letter-spacing: -0.5px} #mWeeks .weektit .sevenMark{position: absolute; top: -32px; right: 0; max-width: 80px; z-index: 9;} #mWeeks .weektit .weekdoc {position: absolute; top:84px; right:-22px; max-width: 97px; z-index: 9;} #mWeeks .weektit .weekkcm {position: absolute; bottom:-8px; right:0; max-width: 220px; z-index: 9;} #mWeeks .weektit p{margin-top: 20px; color: #666; font-size: 18px; line-height: 1.4; letter-spacing: -0.5px;} #mWeeks .weektit a.moreBtn{display:inline-flex; justify-content: center; align-items: center; gap:7px; margin-top: 60px; padding: 19px 30px; border-radius: 100px; border: 1px solid #222; text-align: center; font-size: 16px; font-weight: 500;} #mWeeks .weektit a.moreBtn:hover {gap:15px; transition:all 0.5s;} #mWeeks .wswiper {position:relative; width:100%; max-width:1120px; } #mWeeks .wswiper .swiper-wrapper {padding-bottom:50px;} #mWeeks .wswiper .swiper-grid-column>.swiper-wrapper {flex-direction:inherit !important;} #mWeeks .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%;} #mWeeks .arrow .swiper-button-next {right:-35px; color:transparent;} #mWeeks .arrow .swiper-button-prev {left:-35px; height:19px; color:transparent;} #mWeeks .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #mWeeks .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} /* mbn */ .fc-sky {color:#6EFFF0;} #mbn .mbnwrap {display: flex; justify-content: space-between; gap: 30px;} #mbn .mbncon {width: 33.33%;} #mbn .mbncon a {display: block; width: 100%; padding: 80px 50px; border-radius: 45px; color: #fff;} #mbn .mbncon a h2 {font-size: 36px; line-height: 50px; letter-spacing: -1px;} #mbn .mbncon a p {margin: 30px 0; font-size: 18px; line-height: 26px;} #mbn .mbncon a .mbarrow {width: 50px;} #mbn .mbncon a:hover .mbarrow {margin-left: 25px; transition: all 0.5s;} #mbn .mbncon.fast a {background: url('/_img/bn_1.png') no-repeat 95% 100% #1E53F2; background-size: 230px;} #mbn .mbncon.counsel a {background: url('/_img/bn_2.png') no-repeat 97% 95% #1E53F2; background-size: 200px;} #mbn .mbncon.sale a {background: url('/_img/bn_3.png') no-repeat 100% 95% #1E53F2; background-size: 200px;} /*인기 최저가*/ #mBest {margin:180px 0;} #mBest .ppinfo {bottom:0;} #mBest .container {position:relative;} #mBest ul {display:flex; align-items:center; margin-top:40px;} #mBest ul li {width:50%;} #mBest ul li a {display:block; padding:25px 7px; font-size:20px; font-weight:500; line-height:20px; background:#fff; border-bottom:2px solid #eee; text-align:center;} #mBest ul li.active a {border-bottom:4px solid #1f53f2; color:#1f53f2; font-weight:700; } #mBest .besttit h2 {text-align:center; font-size:44px; letter-spacing:-2px; color:#000; font-weight:800;} #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;} @keyframes bestcar { 0% {left:-80%;} 100% {left:-40%;} } @keyframes tire-rotate { 0% {transform:rotate(0);} 100% {transform:rotate(360deg);} } /*왜그럴까요?*/ #mWhy {margin:80px 0 110px 0;} #mWhy .whywrap {display:flex; justify-content:space-between; gap:15px;} #mWhy .whywrap .whycon {width:50%;} #mWhy .whywrap .whycon a ,#mWhy .whywrap .whycon {display:flex; justify-content:space-between; align-items:center; padding:20px 45px; border-radius:5px;} #mWhy .whywrap .whycon a:hover ,#mWhy .whywrap .whycon:hover {filter: contrast(110%); transition:all 1s;} #mWhy .whywrap .whycon a h3 ,#mWhy .whywrap .whycon h3 {font-size:22px; line-height:32px; font-weight:500; letter-spacing:-1px;} #mWhy .whywrap .whycon.bg-1 a ,#mWhy .whywrap .whycon.bg-1 {background:#8bd9e9;} #mWhy .whywrap .whycon.bg-2 a ,#mWhy .whywrap .whycon.bg-2 {background:#dbf9ff;} #mExclusive .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:99; width:100%;} #mExclusive .arrow .swiper-button-next {right:-35px; color:transparent;} #mExclusive .arrow .swiper-button-prev {left:-35px; height:19px; color:transparent;} #mExclusive .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #mExclusive .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} /*제조사별*/ #mCompany {margin:110px 0;} #mCompany .container {position:relative;} #mCompany .container .horizontal {position:absolute; display:flex; align-items:center; top:10px; left:300px; z-index:9;} #mCompany .container .horizontal li a {padding:0 10px; font-size:20px; font-weight:bold;} #mCompany .container .horizontal li.active a {color:#1f53f2;} #mCompany .container .horizontal li:first-child:after {content:'|'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:20px; font-weight:bold;} #mCompany .comlist { /*margin:40px 0 20px 0; padding: 0 40px; display:flex; gap:60px; */ } #mCompany .comlist .menu a ,#mCompany .comlist label.menu {display:flex; flex-direction:column; align-items:center; gap:10px; font-size:16px; color:#8c8c8c; font-weight:500;} #mCompany .comlist .menu a .img ,#mCompany .comlist label.menu .img { width:110px; height:110px; display:flex; align-items:center; justify-content:center; border:1px solid #d1d1d1; border-radius:100%; text-align:center; cursor:pointer;} #mCompany .comlist .menu a .img:hover ,#mCompany .comlist label.menu .img:hover {background:#f1f1f1; transition:all 0.5s;} #mCompany .comlist label.menu .img img {width:70px;} #mCompany .comlist .menu a:hover .img #mCompany .comlist .menu label:hover .img {animation: turn-around 1s linear;} #mCompany .comlist .menu.active a .img ,#mCompany .comlist label.menu.active .img ,#mCompany .comlist input[type="radio"]:checked + label .img {background:rgba(0,0,0,0.2); } #mCompany .comlist .menu.active a .img img ,#mCompany .comlist label.menu.active .img img ,#mCompany .comlist input[type="radio"]:checked + label.menu .img img { /*filter: opacity(0.9) drop-shadow(0 0 0 white) grayscale(1) brightness(100); */ } #mCompany .comlist {position:relative; } #mCompany .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:9; width:100%;} #mCompany .arrow .swiper-button-next {right:-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 {display:flex; justify-content:space-between; align-items:center; gap:60px; text-align:center;} #mCompany .comcon .list-wrap .list a .img {margin-bottom:20px; width:180px;} #mCompany .comcon .list-wrap .list a:hover .img img {transform: scale(1.1); transition:all 1s;} #mCompany .comcon .list-wrap .list a h3 {font-size:17px; font-weight:500;} @keyframes turn-around { 0% {transform: scaleX(1);} 25% {transform: scaleX(0);} 50% { transform: scaleX(1); } 75% {transform: scaleX(0);} 100% {transform: scaleX(1) } } /*가격대별*/ #mPrice {} #mPrice .tabs ul ,#mPrice .horizontal {margin:10px 0 20px 0; display:flex; justify-content:center; gap:35px;} #mPrice .tabs ul li a ,#mPrice .horizontal label {display:block; padding:20px 45px; font-size:17px; line-height:17px; font-weight:600; border-radius:500px; border:1px solid #d1d1d1; color:#4d4d4d; box-sizing:border-box; white-space:nowrap; } #mPrice .horizontal input[type="radio"] { display:none; } #mPrice .horizontal input[type="radio"]:checked + label { background:#1a1a1a; color:#fff; border:none; border:2px solid #1a1a1a; } #mPrice .horizontal input[type="radio"] + label {cursor:pointer;} #mPrice .horizontal input[type="radio"] + label:hover {background:#303030; color:#fff; transition:all 0.5s;} #mPrice h2 { display:inline-block; } #mPrice .nationBtnWrap { display:inline-block; line-height:36px; } #mPrice .nationBtnWrap .nationBtn { display:inline-block; font-size:20px; } #mPrice .nationBtnWrap .nationBtn input[type="radio"] { display:none; } #mPrice .nationBtnWrap .nationBtn input[type="radio"]:checked + label { color:#0866f6;} #mPrice .tabs ul li.active a {background:#1a1a1a; color:#fff; border:none;} #mPrice .ppinfo {bottom:-50px !important;} /*carList - 1*/ .carList1 .list {padding-top:30px; padding-right:30px;} .carList1 .list > a {position:relative; padding:30px 25px 40px 25px; background:#fafafc; border:1px solid #fafafc; border-radius:20px; box-sizing:border-box; z-index:9;} .carList1 .list > a:hover {border:1px solid #1e53f2; background:#fff; box-shadow:0 5px 20px rgb(0 0 0 / 10%);} .carList1 .list .img {position:relative; display:flex; align-items:center; width:100%; height:170px;} .carList1 .list a:hover .img .carimg {transform: scale(1.1); transition: all .3s;} /*.carList1 .list a:hover .text {opacity:0.6; transition: all .3s}*/ .carList1 .list a .inven {display:none;} .carList1 .list a:hover .inven {display:block;} .carList1 .list a .inven .box {display:block; position:absolute; top:7px; right:7px; font-size:12px; font-weight:700; padding:8px 16px 6px 16px; border-radius:500px; } .carList1 .list a .inven .box.ing {background:#2C1EF2; color:#fff; } .carList1 .list a .inven .box .fc-pk {color:#FF8B8B;} .carList1 .list .img .week {position:absolute; top:13px; left:20px;} .carList1 .list .img .only {position:absolute; top:0; left:0; width: 0; height: 0; border-top: 120px solid #1267C8; border-right: 120px solid transparent; } .carList1 .list .img .only span {position:absolute; top:-100px; left:15px; color:#fff; font-size:14px; font-weight:500; line-height:18px;} .carList1 .list .text {} .carList1 .list h3 {margin:22px 0 10px 0; font-size:18px; font-weight:600; letter-spacing:-1px; height:42px;} .carList1 .list p {font-size:15px; line-height:15px; color:#666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList1 .list p.price {margin:20px 0 25px 0; } .carList1 .list p.price .fs-big {font-size:140%;} .carList1 .list > a .btn {display:none;} .carList1 .list > a:hover .btn {display:block; position:absolute; left:50%; bottom:-20px; transform:translate(-50%,0); width:100%; display:flex; justify-content:center; gap:5px; z-index:99; tran} .carList1 .list > a .btn button {display:inline-block; padding:12px 17px 11px 17px; text-align:center; font-size:15px; line-height:15px; font-weight:500; color:#fff; border-radius:50px;} .carList1 .list > a .btn button.bt1 {background:#00abce;} .carList1 .list > a .btn button.bt2 { background:#2c1ef2;} .carList1 .swiper-horizontal>.swiper-scrollbar, .carList1 .swiper-scrollbar.swiper-scrollbar-horizontal {opacity: 1 !important; bottom: 0 !important;} .carList1 .swiper-scrollbar-drag{background: #223359 !important;} /* 보라색 하단 버튼 스타일 .carList1 .list .btn {display:flex; justify-content:space-between; gap:5px; padding:0 20px 20px 20px} .carList1 .list .btn a {display:block; padding:9px 0 8px 0; width:100%; text-align:center; border-radius:3px; box-sizing:border-box; font-size:14px; line-height:14px;} .carList1 .list .btn a:hover {background:#6311eb; transition: all 1s;} */ /*carList - 2*/ .bswiper .swiper-wrapper {padding:40px 0;} .carList2 .list {} .carList2 .list a {position:relative; padding:30px 30px 35px 30px; border-radius:20px;} .carList2 .list a .num {position:absolute; top:20px; left:20px; width:30px; height:30px; text-align:center; font-size:14px; line-height:30px; color:#fff; font-weight:500; background:#353535; border-radius:10px;} .carList2 .list a:hover {box-shadow:3px 3px 5px rgba(0 0 0 / 10%); } .carList2 .list a:hover .img img {transform:scale(1.1); transition:all 0.5s;} .carList2 .list a .img {margin:40px 0; text-align:center;} .carList2 .list a .img img {width:100%:} .carList2 .list a .text h4 {margin:20px 0 10px 0; font-size:24px; font-weight:bold;} .carList2 .list a .text h4 .mc {padding-left:15px; font-size:14px; font-weight:400; } .carList2 .list a .text p {font-size:15px; color:#686868; font-weight:400; } .carList2 .list a .text .price {margin-top:20px; font-size:25px; font-weight:bold; letter-spacing:-1px; color: #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 .price { font-size:20px; font-weight:bold; display:flex; align-items:center; justify-content:space-between; } .carList2 .list a .priceWrap .price .won { color: #1E53F2; } /*carList - 3*/ .swiper-button-lock {display:flex !important;} .swbtn .swiper-button-next {right: -13px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background: rgba(28,29,31,0.8); color: #fff;} .swbtn .swiper-button-next:after {padding: 2px 0 0 2px; font-size: 15px; font-weight: 800; text-align: center; line-height: 60px;} .swbtn .swiper-button-prev {left: -13px; top: 50%; width: 40px; height: 40px; border-radius: 100%; background: rgba(28,29,31,0.8); color: #fff;} .swbtn .swiper-button-prev:after {padding: 2px 2px 0 0 ; font-size: 15px; font-weight: 800; text-align: center; line-height: 60px;} .ppinfo {position:absolute; bottom:12px; right:0; font-size:14px; color:#686868;} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { pointer-events: all !important; } .markWrap{display: flex; align-items: center; gap: 4px; width: 100%;} .markWrap span{display: block; width: 72px; padding: 8px 10px; border-radius: 50px; text-align: center; color: #fff; font-size: 12px; line-height: 12px; white-space: nowrap;} .markWrap span.saleMark{background: #00abce;} .markWrap span.fastMark{background: #2c1ef2;} .markWrap span.popularMark{background: #223359;} #mExclusive {margin:120px 0; } #mExclusive .container {position:relative;} #mExclusive .tit {margin-bottom: 45px; text-align: center;} #mExclusive .tit h3 {font-size: 28px; letter-spacing: -0.5px;} #mExclusive .tit h2 {display: inline-block; position: relative; margin-top: 10px; font-size: 40px; font-weight: 800;} #mExclusive .tit h2 .img {position: absolute; top: 0; right: -53px; max-width: 60px;} #mExclusive .swiper {margin: 0 -32px; padding: 0 32px 65px 32px;} #mExclusive .swiper-slide a {display: flex; gap: 35px; align-items: center;} .carList3 .carImg {display: flex; align-items: center; padding: 0 15px; width: 55%; height: 380px; background: #F9F9F9; border-radius: 20px;} .carList3 .carImg img {width: fit-content; height: 160px; margin: 0 auto;} .carList3 .carImg:hover {background: #f1f1f1; transition: all 0.5s;} .carList3 .carImg:hover img {transform: scale(0.9); transition: all 0.5s;} .carList3 .carInfo .emph {display: flex; align-items: center; gap: 4px;} .carList3 .carInfo .emph span {display: block; width: 47px; height: 47px; line-height:47px; border-radius: 100%; color: #fff; font-size: 21px; font-weight: 500; text-align: center;} .carList3 .carInfo .emph span:nth-child(odd){background: #00abce;} .carList3 .carInfo .emph span:nth-child(even){background: #1e53f2;} .carList3 .carInfo {width: 45%;} .carList3 .carInfo h3 {width: 100%; margin: 25px 0 6px 0; font-size: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList3 .carInfo p {width: 100%; color: #686868; font-size: 16px; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .carList3 .carInfo .price {display: flex; align-items: center; gap: 12px; margin-top: 14px;} .carList3 .carInfo .price h5 {font-size: 26px; font-weight: 700; letter-spacing: -1px;} .carList3 .carInfo .price .cancel {color: #bbb; font-size: 15px; text-decoration: line-through;} #mExclusive .swiper-pagination-bullets {line-height: 0;} #mExclusive .swiper-pagination-bullet {width: 12px; height: 12px; margin: 0 6px; border-radius: 2px; background: #c7d3e2; opacity: 1;} #mExclusive .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #00abce;} /* .carList3 .list {} .carList3 .list .ico-pm {position:absolute; top:18px; left:15px; } .carList3 .list {display:flex; flex-direction:column; align-items:center; padding:25px; background:#f7f7f7; border-radius:10px; } .carList3 .list .img {padding-top:30px; width:235px; height:160px;} .carList3 .list .img img {width:100%;} .carList3 .list:hover .img img {transform: scale(1.1); transition:all 0.3s;} .carList3 .list .text {width:100%; padding:5px 0 20px 0; text-align:center;} .carList3 .list h3 {font-size:24px; font-weight:bold; letter-spacing:-0.5px;} .carList3 .list p { margin:7px 0 13px 0 ; font-size:15px; letter-spacing:-0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:600; color:#434343; } .carList3 .list .price {margin-top:5px; font-size:24px; font-weight:bold; color: #00abce;} .carList3 .list button ,.carList3 .list a {width:100%; text-align:center; padding:13px; background:#00abce; color:#fff; font-size:16px; font-weight:bold; border-radius:5px;} .carList3 .list .text .option {margin:20px 0; text-align:left; font-size:14px; line-height:20px;} .carList3 .list .text .option li {margin-bottom:5px; display:flex; gap:10px;} .carList3 .list .text .option li .name {width:45px; font-weight:bold;} .carList3 .list .text .option li .txt {width:100%;} .carList3 .list .text .option li.option-detail .txt {height:42px; overflow-y: scroll; } */ /*carList - 5*/ .carList5 .list a {display:flex; flex-direction:column; align-items:center; padding:25px 0 50px 0;} .carList5 .list a .img {display:flex; justify-content:center; align-items:center; width:100%; height:110px; padding:15px; margin-top:30px;} .carList5 .list a .img img {} .carList5 .list a:hover .img img {transform: scale(1.1); transition:all 0.3s;} .carList5 .list a h3 {margin:20px 0 7px 0; font-size:17px; font-weight:bold; letter-spacing:-0.5px;} .carList5 .list a p {font-size:16px; color:#4d4d4d; font-weight:500;} .carList5 .pswiper {position:relative;} .carList5 .arrow {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:9; width:100%;} .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 */ #fbn {margin: 120px 0;} #fbn .container {display: flex; justify-content: space-between; align-items: stretch; gap: 45px;} #fbn .container > div{width: 100%;} #fbn .box {border-radius:40px; box-shadow: 0 5px 22px rgba(0, 0, 0, 0.1);} #fbn .box.quickConsult{position:relative; max-height: 600px; padding: 75px 85px; background: #fff; } .quickConsult .tit{display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px;} .quickConsult .tit.new{display:inherit; margin:20px 0 26px 0;} .quickConsult .tit h2{font-size: 36px; font-weight: 800; line-height: 1.3; position:relative; z-index:9;} .quickConsult .tit h2 span.ft-pen {padding:0 !important; font-weight:400 !important; font-size:55px; margin:-10px 0 0 2px;} .quickConsult .tit p {margin-top:20px !important;font-size:18px !important; color:#9a9a9a;} .quickConsult .tit .img {width:68px;} .quickConsult .tit .imgKcm {position:absolute; width:358px; top:0; right:18px; z-index:8;} .quickConsult form ul li{display: flex; justify-content: space-between; align-items: center; margin-top: 15px;} .quickConsult form label{width: 100%; max-width: 80px; font-size: 18px; font-weight: 600;} .quickConsult form input{width: 100%; padding: 20px 30px; border-radius: 10px; background: #f2f2f2; font-size: 18px;} .quickConsult form input::placeholder{color: #bbb; font-size: 18px;} .quickConsult form button{width: 100%; margin-top: 20px; padding: 30px; border-radius: 12px; background: #1e53f2; color: #fff; font-size: 20px; font-weight: 600;} .quickConsult form button:hover {background:#1247e7;} .quickConsult form .gnaAgree {margin-top:20px; } .quickConsult form .gnaAgree label {width:auto; max-width:fit-content; font-size:14px; font-weight:400; letter-spacing:-1px; color:#4d4d4d;} #fbn .box{padding: 51px 40px;} #fbn .box.consulting{margin-bottom: 40px; background: url('/_img/fbn_counsel.png') no-repeat 93% 80% #d8dde3; background-size:90px;} #fbn .box.kakao{background: url('/_img/fbn_kakao.png') no-repeat 93% 80% #ecf2ff; background-size:60px;} #fbn .box.call{color: #fff; background: url('/_img/fbn_call.png') no-repeat 88% 80% #3b76ff; background-size:60px;} #fbn .box span{display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600;} #fbn .box.consulting span{background: #3b76ff; color: #fff;} #fbn .box.kakao span{background: #fff; color: #bebebe;} #fbn .box.call span{background: #3262d8; color: #fff;} #fbn .box h3{margin-top: 10px; font-size: 24px; font-weight: 700; line-height: 1.4;} #fbn .box p{margin-top: 40px; font-size: 16px; font-weight: 600;} #fbn .box.consulting p{color: #999;} #fbn .inquiry{display: flex; justify-content: space-between; align-items: center; gap: 40px;} #fbn .inquiry a{width: 100%;} #fbnInfo ul {display:flex; align-items:center; gap:50px; } #fbnInfo ul li {width:25%; border-radius:20px; overflow:hidden; box-shadow:3px 5px 7px rgb(0 0 0 / 20%);} #fbnInfo ul li:first-child {width:50%;} #fbnInfo ul li a {display:block; padding:55px 40px 60px 40px;} #fbnInfo ul li span {display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600;} #fbnInfo ul li h3 {margin:20px 0 40px 0; font-size: 25px; font-weight: 700; line-height: 1.5;} #fbnInfo ul li p {font-size: 16px; font-weight: 600;} #fbnInfo ul li.consulting {background: url('/_img/fbn_counsel.png') no-repeat 93% 80% #d8dde3; background-size:90px;} #fbnInfo ul li.consulting span {background: #3b76ff; color: #fff;} #fbnInfo ul li.consulting p{color:#9A9A9A;} #fbnInfo ul li.kakao {background: url('/_img/fbn_kakao.png') no-repeat 93% 80% #ecf2ff; background-size:60px;} #fbnInfo ul li.kakao span{background: #fff; color: #bebebe;} #fbnInfo ul li.call {background: url('/_img/fbn_call.png') no-repeat 88% 80% #3b76ff; background-size:60px;} #fbnInfo ul li.call a {color:#fff;} #fbnInfo ul li.call span{background: #3262d8; color: #fff;} /*mSuper*/ #mSuper {margin-bottom:100px; padding:100px 0 120px 0; background:#EAF5FB;} #mSuper .container {position:relative; } #mSuper .titRound {display:flex; align-items:center; gap:5px; justify-content:center; font-size:24px; font-weight:500; color:#000;} #mSuper .titRound ul {display:flex; align-items:center; gap:2px; } #mSuper .titRound ul li {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:100%; background:#1E53F2; color:#fff; font-size:21px; font-weight:700;} #mSuper .titImg {margin:33px auto 37px auto; width:531px;} #mSuper .titTxt {font-size:22px; font-weight:500; letter-spacing:-0.5px; color:#000; text-align:center;} #mSuper .caution {margin-top:25px; text-align:right; font-size:18px; font-weight:500; } .superSwiper {margin:50px 0;} .superSwiper .list a {position:relative; padding:35px 30px; background:#FAFAFC; border-radius:20px; letter-spacing:-0.5px;} .superSwiper .list .superMark {position:absolute; top:15px; right:17px; width:88px;} .superSwiper .list h3 {font-size:26px; font-weight:700;} .superSwiper .list p {margin-top:12px; font-size:20px; font-weight:500;} .superSwiper .list .carImg {margin:22px auto 12px auto; width:320px;} .superSwiper .list .carInfo {display:flex; align-items:flex-end; justify-content:space-between;} .superSwiper .list .carInfo .price .cancel {margin-bottom:10px; font-size:20px; font-weight:400; text-decoration:line-through;} .superSwiper .list .carInfo .price h5 {font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#3651E0;} .superSwiper .list .carInfo .btn {padding:17px 28px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:20px; font-weight:600; background:#3651E0; color:#fff; border-radius:30px;} .superSwiper .list .carInfo .btn span {font-size:20px;} .superSwiper .list a:hover .carImg img { transform:scale(1.15); transition:all 0.5s;} #mSuper .superbtn {position:relative; bottom:0; left:50%; transform:translate(-50%,0); display:flex; align-items:center; justify-content:center; width:1400px;} #mSuper .superbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mSuper .superbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mSuper .superbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500;} #mSuper .superbtn .center .txt {white-space:nowrap; } #mSuper .superbtn .center .pagination {width:auto; color:#C8C8C8;} #mSuper .superbtn .center .pagination .swiper-pagination-current {color:#000; font-weight:700;} #mSuper .superbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} /*mNow*/ #mNow { margin-bottom:75px; position: relative; } #mNow .container { position:relative; } #mNow .mNowVideoBg { width:100%; height:668px; overflow:hidden; } #mNow .mNowVideoBg video { min-height: 668px; min-width: 100%; opacity: 0.4; } #mNow .mNowBg { width: 100%; padding:85px 0 30px 0; /*background:#eee;*/ position: absolute; top: 0; } #mNow .tit {display:flex; align-items:end; justify-content:space-between;} #mNow .tit .img {position:relative; left:-11px; width:920px;} #mNow .tit .mark {margin:0 0 0 auto; width:120px;} #mNow .titRound {margin:10px 0 18px 0; display:flex; align-items:center; gap:5px; justify-content:center; font-size:18px; font-weight:500; color:#000;} #mNow .titRound ul {display:flex; align-items:center; gap:2px; } #mNow .titRound ul li {display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:100%; background:#1E53F2; color:#fff; font-size:15px; font-weight:700;} .nowSwiper {} .nowSwiper .list {position:relative; padding:20px 32px; background:#FAFAFC; border-radius:20px; letter-spacing:-0.5px;} .nowSwiper .list .top h3 {margin:4px 0 8px 0; font-size:26px; font-weight:700; width:75%; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;} .nowSwiper .list .top h5 {font-size:18px; font-weight:500;} .nowSwiper .list .top p {font-size:18px; font-weight:500;} .nowSwiper .list .part {position:absolute; top:16px; right:28px;} .nowSwiper .list .part span {display:inline-flex; align-items:center; justify-content:center; padding:11px 0; width:100px; border-radius:30px; font-size:18px; font-weight:500; color:#fff;} .nowSwiper .list .part span.rent {background:#175DED;} .nowSwiper .list .part span.lease {background:#8917ED;} .nowSwiper .list .mid {display:flex; align-items:center; justify-content:space-between;} .nowSwiper .list .mid .carthumbs {position:relative; right:-35px; width:300px;} .nowSwiper .list .mid .plus {display:inline-flex; align-items:center; gap: 6px; padding:9px 11px 9px 9px; font-size:16px; line-height:16px; font-weight:500; background:#DDE4F3; border-radius:7px; cursor:pointer;} .nowSwiper .list .mid .plus .ico {display:flex; align-items:center; justify-content:center; width:20px; height:20px; background:#fff; border-radius:100%;} .nowSwiper .list .mid .plus .ico span {font-size:14px; font-weight:800;} .nowSwiper .list .mid .plus:hover .ico {transform:rotate(180deg); transition:all 0.5s;} .nowSwiper .list .carInfo {display:flex; align-items:flex-end; justify-content:space-between;} .nowSwiper .list .carInfo .price .cancel {display:block; margin-bottom:6px; font-size:20px; font-weight:400; text-decoration:line-through;} .nowSwiper .list .carInfo .price h5 {font-size:26px; font-weight:700; letter-spacing:-0.5px; color:#3651E0;} .nowSwiper .list .carInfo .btn a {padding:14px 20px 14px 28px; display:inline-flex; align-items:center; justify-content:center; gap:7px; font-size:20px; font-weight:600; background:#3651E0; color:#fff; border-radius:30px;} .nowSwiper .list .carInfo .btn span {font-size:20px;} .nowSwiper .list:hover .carImg img { transform:scale(1.15); transition:all 0.5s;} /* #mNow .nowbtn {position:relative; margin:15px auto 25px auto; display:flex; align-items:center; justify-content:center; width:1400px;} #mNow .nowbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500;} #mNow .nowbtn .center .txt {white-space:nowrap; } #mNow .nowbtn .center .pagination {width:auto; color:#C8C8C8;} #mNow .nowbtn .center .pagination .swiper-pagination-current {color:#000; font-weight:700;} #mNow .nowbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} #mNow .caution p {font-size:18px; font-weight:500; letter-spacing:-0.5px;} #mNow .caution h3 {margin-top:45px; font-size:24px; font-weight:700; letter-spacing:-1px;} #mNow .bbinfo {position:absolute; top:28px; right:0; text-align:right; font-size:14px; font-weight:400; color:#686868;} #nowPop {position:fixed; top:0; left:50%; transform:translate(-50%,0); width:100%; height:100vh; z-index:999;} #nowPop .cover {position:fixed; width:100%; height:100vh; background:rgba(0 0 0 / 50%);} #nowPop .popCon {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:780px; height:635px; background:#fff; border-radius:12px; box-shadow:3px 5px 5px rgba(0 0 0 / 20%); overflow:hidden;} #nowPop .popCon .tit {padding:17px 0; text-align:center; background:#DDE4F3; font-size:20px; font-weight:600; letter-spacing:-0.5px;} #nowPop .popCon .close {position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; cursor:pointer;} #nowPop .popWrap {padding:12px;} #nowPop .popContent {width:100%; height:485px; overflow-y:scroll; padding:10px 20px 20px 20px; font-size:24px; line-height:1.8;} #nowPop .popContent::-webkit-scrollbar {width:3px;} #nowPop .popContent::-webkit-scrollbar-thumb {background:#6A6A6A;} #nowPop .popContent .top h2 {font-size:26px; font-weight:700; letter-spacing:-1px;} #nowPop .popContent .top h4 {margin:4px 0 8px 0; font-size:20px; font-weight:700;} #nowPop .popContent .top p {font-size:18px; font-weight:400; } #nowPop .popBottom {position:fixed; bottom:0; left:50%; transform:translate(-50%,0); padding:24px; width:100%; background:#fff; border-top:2px solid #E4E7EE; z-index:9;} #nowPop .popBottom ul {display:flex; align-items:center; justify-content:space-between;} #nowPop .popBottom li {font-size:20px; line-height:20px; font-weight:500; letter-spacing:-0.5px; color:#232323;} #nowPop .popBottom li .won {font-size:22px; font-weight:700;} */ .gallWrap { position:relative; display: flex; align-items: center; justify-content: center; padding-bottom: 50px; } .gallWrap input[type="radio"] { display:none; } .gallWrap input:checked + span { color: #000; font-weight: 700; } .gallWrap label { cursor:pointer; } .gallWrap .gallLeft { position:absolute; z-index:100; top:50%; left:5%; transform: translate(0,-50%); display: flex; flex-direction: column; background-color:rgba(230,230,230,0.8); border-radius:18px; padding:15px 0; } .gallWrap .gallLeft label { font-size:16px; color:#8c8c8c; font-weight:500; padding:0 17px; line-height:1.8; } .gallWrap .gallBtm { gap: 10px; position:absolute; z-index:100; bottom:0; display: flex; width: 100%; align-items: center; justify-content: center; } .gallWrap .gallBtm label { font-size:20px; font-weight:400; color:#8c8c8c; cursor:pointer;} .gallWrap .gallBtm .symbol { display: flex; background-color:black; padding:10px; border-radius:50%; } .gallWrap .gallBtm img { width:20px; height:20px; } .gallWrap .gallLayer { width:100%; max-width:600px; min-height: 200px; } #nowPop .gallWrap .intimg {margin-top:20px; height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden;} #mNow .nowbtn {position:relative; margin:15px auto 25px auto; display:flex; align-items:center; justify-content:center; width:1400px;} #mNow .nowbtn:before {content:''; position:absolute; top:50%; left:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn:after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:40%; height:1px; background:#A7A7A7;} #mNow .nowbtn .center {display:flex; align-items:center; justify-content:center; gap:8px; width:165px; font-size:16px; font-weight:500;} #mNow .nowbtn .center .txt {white-space:nowrap; } #mNow .nowbtn .center .pagination {margin:0; width:auto; color:#C8C8C8;} #mNow .nowbtn .center .pagination .swiper-pagination-current {color:#000; font-weight:700;} #mNow .nowbtn .arrow {width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #A7A7A7; border-radius:100%; cursor:pointer;} #mNow .caution p {font-size:18px; font-weight:500; letter-spacing:-0.5px;} #mNow .caution h3 {margin-top:45px; font-size:24px; font-weight:700; letter-spacing:-1px;} #mNow .bbinfo {position:absolute; top:28px; right:0; text-align:right; font-size:14px; font-weight:400; color:#686868;} #nowPop { width:100%; height:100%; } #nowPop .popCon { width:100%; height:100%; display: grid; grid-template-rows: 60px auto 80px; } #nowPop .popCon .tit {padding:17px 0; text-align:center; background:#DDE4F3; font-size:20px; font-weight:600; letter-spacing:-0.5px;} #nowPop .popCon .close {position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100%; cursor:pointer;} #nowPop .popWrap { width:100%; height:100%; overflow:hidden; padding:12px;} #nowPop .popContent { width:100%; height:100%; overflow-y:scroll; padding:10px 20px 20px 20px; font-size:24px; line-height:1.8;} #nowPop .popContent::-webkit-scrollbar {width:3px;} #nowPop .popContent::-webkit-scrollbar-thumb {background:#6A6A6A;} #nowPop .popContent .top h2 {font-size:26px; font-weight:700; letter-spacing:-1px;} #nowPop .popContent .top h4 {margin:4px 0 8px 0; font-size:20px; font-weight:700;} #nowPop .popContent .top p {font-size:18px; font-weight:400; } #nowPop .popBottom { padding:24px; width:100%; background:#fff; border-top:2px solid #E4E7EE; z-index:9;} #nowPop .popBottom ul {display:flex; align-items:center; justify-content:space-between;} #nowPop .popBottom li {font-size:20px; line-height:20px; font-weight:500; letter-spacing:-0.5px; color:#232323;} #nowPop .popBottom li .won {font-size:22px; font-weight:700;} .nowTabs {position:relative; margin-top:15px; padding:0 0 50px 0; } .nowTabs .nowTabList {position:absolute; bottom:0; left:50%; transform:translate(-50%,0); display:flex; align-items:center; justify-content:center; gap:12px; z-index:9;} .nowTabs .nowTabList a {display:flex; align-items:center; gap:12px; font-size:20px; font-weight:400; color:#A2A2A2;} .nowTabs .nowTabList .active a {font-weight:700; color:#000;} .nowTabs .nowTabList a .txtEx {width:71px;} .nowTabs .nowTabList a .txtInt {width:65px; text-align:right;} .nowTabs .nowTabList .ico {display:none; } .nowTabs .nowTabList .active .ico {display:flex; align-items:center; justify-content:center; border-radius:100%; background:#000; width:39px; height:38.5px; } .nowTabs .nowTabList .active .ico img {width:21px;} .nowTabs .tabimg {position:relative; } .nowTabs .tabimg .img {margin:0 auto; display:flex; align-items:center; justify-content:center; width:450px; height:225px; overflow:hidden;} .nowTabs .nowExtView {position:absolute; top:50%; left:60px; transform:translate(0,-50%); padding:15px 0; background:rgba(0,0,0,5%); border-radius:18px; z-index:9;} .nowTabs .nowExtView input {display:none; appearance:none; display:none;} .nowTabs .nowExtView input + label {display:block; padding:0 17px; cursor:pointer; font-size:16px; font-weight:500; color:#8c8c8c;} .nowTabs .nowExtView input:checked + label {color:#000; font-weight:bold;} .nowOption h3 {padding:10px 0; display:flex; align-items:center; justify-content:space-between; font-size:22px; font-weight:700; border-bottom:1px solid #E1E1E1;} .nowOption .list {margin-top:15px;} .nowOption .list li {margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; font-size:18px; font-weight:500;} .nowOption .list li:last-child {margin-bottom:0;} .nowOption .list li .subject {display:flex; align-items:center; gap:12px;} .nowOption .list li .colorbox {display:block; width:17px; height:17px; border-radius:1px; border:1px solid #707070; background-size:cover; } /*midBn*/ #midBn {margin:0 0 150px 0; } #midBn .container {display:flex; } #midBn .fyoutube {width:700px; padding:0 130px 0 0; } #midBn .infoBn {padding-top:100px;} #midBn .infoBn ul {display:flex; align-items:center; gap:50px; width:700px;} #midBn .infoBn ul li {width:50%; border-radius:20px; overflow:hidden; box-shadow:3px 5px 7px rgb(0 0 0 / 20%);} #midBn .infoBn ul li a {display:block; padding:55px 40px 60px 40px;} #midBn .infoBn ul li span {display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600;} #midBn .infoBn ul li h3 {margin:20px 0 40px 0; font-size: 25px; font-weight: 700; line-height: 1.5;} #midBn .infoBn ul li p {font-size: 16px; font-weight: 600;} #midBn .infoBn ul li.kakao {background: url('/_img/fbn_kakao.png') no-repeat 93% 80% #ecf2ff; background-size:60px;} #midBn .infoBn ul li.kakao span{background: #fff; color: #bebebe;} #midBn .infoBn ul li.call {background: url('/_img/fbn_call.png') no-repeat 88% 80% #3b76ff; background-size:60px;} #midBn .infoBn ul li.call a {color:#fff;} #midBn .infoBn ul li.call span{background: #3262d8; color: #fff;} #fbnNew {margin:100px auto;} #fbnNew .container {display:flex; gap:60px; align-items:flex-start;} #fbnNew .fbnBox {padding-top:93px; width:50%;} #fbnNew .fqna {width:50%;} #fbnNew .fbnBox.consulting a {display:block; padding:55px 40px 60px 40px; border-radius:20px; overflow:hidden; box-shadow:3px 5px 7px rgb(0 0 0 / 20%); background: url('/_img/fbn_counsel.png') no-repeat 93% 80% #d8dde3; background-size:90px;} #fbnNew .fbnBox a span {display: inline-block; padding: 6px 18px; border-radius: 50px; font-weight: 600; background: #3b76ff; color: #fff;} #fbnNew .fbnBox a h3 {margin:20px 0 40px 0; font-size: 25px; font-weight: 700; line-height: 1.5;} #fbnNew .fbnBox a p {font-size: 16px; font-weight: 600;} #copConsult {margin-top:140px;} #copConsult .container {position:relative; margin-bottom:50px; padding:50px 55px 40px 55px; border-radius:20px; box-shadow:7px 7px 10px rgba(0 0 0 / 15%); border:1px solid #f9f9fb;} #copConsult .img {position:absolute; top:-82px; right:122px; width:250px; z-index:9;} #copConsult .txt {margin-bottom:50px; display:flex; gap:40px; color:#3a3a3a; letter-spacing:-0.5px;} #copConsult .txt h3 {margin:2px 0 9px 0; font-size:20px;} #copConsult .txt h2 {font-size:38px; letter-spacing:-1.5px; font-weight:800;} #copConsult .txt p {font-size:17px; line-height:1.6; font-weight:600; color:#3C3C3C;} /*#copConsult .txt p .fc-gg {color:#9a9a9a;}*/ #copConsult .txt p .fc-pp {color:#1E53F2;} #copConsult form .fomList {margin-bottom:15px; display:flex; align-items:stretch; gap:13px;} #copConsult form .fomList li {width:20%;} #copConsult form .fomList li:nth-child(3), #copConsult form li:nth-child(4) {width:30%;} #copConsult form .fomList li input {width:100%; padding:22px; background:#F2F2F2; color:#1a1a1a; font-size:18px; border-radius:13px;} #copConsult form .fomList li input:placeholder {color:#B0B0B2;} #copConsult form .fomList li button {width:100%; height:100%; background:#1E53F2; color:#fff; font-size:20px; font-weight:600; border-radius:13px; letter-spacing:-1px;} #copConsult .gnaAgree ul {width:100%; display:flex; align-items:center; justify-content:end; gap:15px;} #copConsult .gnaAgree ul li {display:flex; align-items:center; gap:3px;} /* news */ #news {margin: 200px 0 100px 0; } #news .txt{display: flex; justify-content: flex-start; align-items: center; gap: 20px; width: 100%; color: #fff;} #news .txt h2{font-size: 36px; font-weight: 700;} #news .txt h2 span{color: #6efff0;} #news .txt p{font-size: 17px; letter-spacing:-0.5px;} #news .img{position: absolute; top: -80px; right: 60px; width:215px;} #news a {position: relative; padding: 50px 70px 45px 70px; border-radius: 15px; background: #1e53f2;} #news a:hover {box-shadow:0 2px 20px rgba(0 0 0 / 0.3);} #news a:hover .img {top:-65px; transition:all 0.5s;} /* review */ #review{margin: 100px 0 180px 0;} #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 .tit .playnpause {margin-left:15px;} #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-left: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;} #review .tit .btn {display:flex; align-items:center; gap:10px;} #review .reviewNone {padding:220px 0; text-align:center; font-size:30px; font-weight:bold; color:#1A1A1A; letter-spacing:-0.5px;} .btn .switch {position: relative; display: inline-block; width:75px; height: 34px;} .btn .switch input { opacity: 0; width: 0; height: 0;} .btn .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #B8B8B8; -webkit-transition: .4s; transition: .4s;} .btn .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;} .btn input + .slider .txt:before {content: "OFF"; position:absolute; top:51%; left:29px; transform:translate(0,-50%); width:40px; color:#fff; text-align:center; font-size:15px; font-weight:600; } .btn input:checked + .slider .txt:before {content: "ON"; left:6px} .btn input:checked + .slider { background-color: #1E53F2;} .btn input:focus + .slider { box-shadow: 0 0 1px #1E53F2;} .btn input:checked + .slider:before { -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px);} .btn .slider.round { border-radius: 34px;} .btn .slider.round:before { border-radius: 50%;} .reviewSwiper .swiper-slide a{position: relative; width: 100%; border-radius: 20px; border: 1px solid #dbdbdb; overflow: hidden;} .reviewSwiper .swiper-slide a:hover {box-shadow: 0 2px 20px rgba(0 0 0 / 15%); transition: all 0.5s;} .bMark{position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; line-height: 30px; border-radius: 5px; background: #1f53f2; color: #fff; font-size: 14px; font-weight: 600; text-align: center;} .reviewSwiper .txt{padding: 30px;} .reviewSwiper .txt span{display: inline-block; padding: 8px 12px; border-radius: 5px; border: 1px solid #D2D6D9; background: #f9f9f9; color: #666; font-size: 14px;} .reviewSwiper .txt h3{margin-top: 15px; font-size: 18px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height:43px;} .reviewSwiper .txt p{color: #888; width: 100%; margin-top: 20px; font-size: 16px; line-height: 1.4; height:45px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;} .reviewSwiper .thumbImg{display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; height: 220px; object-fit: cover;} .reviewSwiper .thumbImg img{width: 100%; height: 100%; object-fit: cover;} #fgna.flex {align-items:stretch; gap:120px;} .fyoutube .playnpause.flex {margin-left:10px; gap:5px !important;} .fyoutube {width:550px;} .fyoutube .tit {margin-bottom:35px; display: flex; justify-content:space-between;; align-items: center; gap: 10px;} .fyoutube .tit .flex {gap:12px;} .fyoutube .tit .img{max-width: 55px;} .fyoutube .tit h2{font-size: 30px; font-weight: 800;} .fyoutube .playnpause a {width:20px; margin-right:3px; opacity:0.5;} .fyoutube .playnpause a.on { opacity:1;} .fyoutube .playnpause a:hover {opacity:1; transition:all 0.5s;} .fyoutube .youtubeSwiper .swiper-slide {width:500px; /*height:308px;*/ border-radius:20px; overflow:hidden; box-shadow:0 3px 10px rgba(0 0 0 / 30%);} .fyoutube .youtubeSwiper .swiper-slide a {position:relative; } .fyoutube .youtubeSwiper .swiper-slide a:after {content:'▶'; width:100%; height:100%; position:absolute; top:0; z-index:9; /*background:rgba(0 0 0 /20%);*/ display:flex; justify-content:center; align-items:center; font-size:40px; color:#fff; filter:drop-shadow(2px 4px 6px black);} .fqna {width:100%;} .fqna .tit {margin-bottom:35px; display: flex; justify-content:space-between;; align-items: center; gap: 10px;} .fqna .tit .flex {gap:12px;} .fqna .tit h2{font-size: 30px; font-weight: 800;} .fqna ul {border-top:2px solid #313131;} .fqna ul li a {display:block; padding:30px 25px; border-bottom:1px solid #E1E1E1; letter-spacing:-0.5px;} .fqna ul li a h4 {display:flex; align-items:center; gap:10px; font-size:20px; color:#686868; font-weight:500;} .fqna ul li a:hover h4 {color:#4b4b4b; transition:all 0.5s;} .fqna ul li a h4 .ico.new{display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding-top:2px; font-size:13px; background:#1e53f2; color:#fff; border-radius:5px;} .fqna ul li a p {margin-top:5px; font-size:18px; color:#B0B0B2;} #fEvent .container {margin-top:15px; display:flex; flex-wrap: wrap; justify-content:space-between; align-items:center; gap:15px;} #fEvent .container a { flex: 1 1 40%; border-radius:10px; overflow:hidden;} #fEvent .container a:hover img {transform: scale(1.1); transition:all 1s; } /*footer*/ #footer {margin-top:110px; padding:0 0 30px 0;} #footer .term {margin-bottom:30px; background:#4d4d4d;} #footer .term .container {display:flex; gap:35px; justify-content:start; } #footer .term .container a {padding:25px 0; display:block; font-size:16px; color:#fff;} #footer .term .container a:hover {opacity:0.8;} #footer .foot {font-size:16px; line-height:2.0; color:#4d4d4d; text-align:left;} #footer .foot .copyright {margin-top:25px; font-size:14px; color:#b3b3b3;} /*quick #quick {position:fixed; right:20px; bottom:100px; z-index:2000;} #quick ul {background:#00abce; padding:5px 17px; border-radius:10px; } #quick ul li {padding:10px 0; color:#fff; font-size:20px; letter-spacing:-1px; border-bottom:1px solid #63cbe0;} #quick ul li:last-child {border:none;} #quick ul li img {margin-right:10px;} #quick ul li a img {margin-right:17px;} #quick ul li a {color:#fff; font-size:18px; letter-spacing:-1px;} #quick .top {margin-top:40px; text-align:center;} #quick .top a {display:inline-block; font-size:16px; color:#8c8c8c; font-weight:bold; background:#fff; padding:25px 20px; border-radius:100%; box-shadow:5px 5px 5px rgba(0,0,0,0.2);} #quick .top a:hover {background:#f4f4f4; transition:all 1s;} */ #quick {position:fixed; bottom:48px; right:10px; width:205px; z-index:998; } #quick .tit h2 {font-size:20px;} #quick .tit p {margin-top:5px; font-size:14px; line-height:1.3; letter-spacing:-0.5px; color:#858585;} #quick h5 {margin-top:10px; font-size:13px; color:#858585; text-align:center; font-weight:400; letter-spacing:-0.5px;} #quick .qkcm {position:relative; top:8px; margin-top:-5px;} #quick .qform {position:relative; padding:22px 15px 12px 15px; margin-bottom:17px; background:#fff; border-radius:20px; box-shadow:2px 2px 5px rgba(0 0 0 / 25%); } #quick .qform .qimg {max-width:187px; margin:20px auto; } #quick .qform li {margin-bottom:5px; display:flex; align-items:center; gap:10px;} #quick .qform li label {font-size:14px; color:#3a3a3a; width:36px; font-weight:600;} #quick .qform li:nth-child(1) label, #quick .qform li:nth-child(3) label {letter-spacing:11px;} #quick .qform li span.flex {gap:3px;} #quick .qform li input {width:100%; padding:8px 10px; border:1px solid #d2d2d2; border-radius:5px; font-size:12px; line-height:18px;} #quick .qform li input:placeholder {letter-spacing:-0.5px;} #quick .qform li select {width:46px; padding:6px 0 6px 2px; border:1px solid #d2d2d2; border-radius:5px; font-size:14px; appearance:auto; color:#7a7a7a; font-size:12px;} #quick .qform .gnaAgree {margin:10px 0; font-size:13px;} #quick .qform .gnaAgree a {margin:-1px 0 0 3px; padding:4px; background:#D9D9D9; color:#333333; font-size:11px; line-height:11px; border-radius:3px;} #quick .qform button {padding:13px; width:100%; background:#1E53F2; color:#fff; font-size:16px; font-weight:600; text-align:center; border-radius:8px; letter-spacing:-0.5px;} #quick .qform button:hover {background:#0038df; transition:all 0.5s;} #quick .qbtn a {margin-bottom:10px; width:60px; height:60px; display:inline-flex; align-items:center; justify-content:center; border-radius:100%; box-shadow:2px 2px 5px rgba(0 0 0 / 25%); } #quick .qbtn .qcounsel a {background:#1e53f2;} #quick .qbtn .qcounsel a img {width:37px;} #quick .qbtn li {display:flex; align-items:flex-start; gap:6px;} #quick .qbtn .callBox {width:135px; padding:11px 0 9px 0; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#3e3e3e; border-radius:4px; color:#fff; font-size:13px; text-align:center;} #quick .qbtn .callBox .big {font-size:21px; font-weight:700; letter-spacing:-0.5px;} #quick .qbtn .qtop a {font-size:18px; line-height:60px; font-weight:800; color:#fff; background:#808080;} #quick .qform .gnaAgree li label {letter-spacing:-1px !important; font-size:10.5px; width:auto; padding:0 0 0 23px;} #quick .qform .gnaAgree li {justify-content:space-between;} /*팝업 견적 문의*/ #consultpop.cp-style-1 {} #consultpop.cp-style-1 .tit { padding:30px 40px; text-align:center;} #consultpop.cp-style-1 .tit a.close {position:absolute; top:27px; right:25px;} #consultpop.cp-style-1 .tit h2 {margin-bottom:5px; font-size:24px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #consultpop.cp-style-1 .tit p {font-size:14px; color:#8c8c8c;} #consultpop.cp-style-1 .consultform {margin-top:20px;} #consultpop.cp-style-1 .consultform form {padding:0 30px;} #consultpop.cp-style-1 .consultform form h3 {margin:25px 0 11px 0; font-size:15px; font-weight:700;} #consultpop.cp-style-1 .consultform form li {display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;font-weight:500;} #consultpop.cp-style-1 .consultform form li label {width:100px; font-size:15px; color:#1a1a1a; font-weight:500; letter-spacing:-1px; font-weight:700;} #consultpop.cp-style-1 .consultform form li .subdate {padding:12px 0; width:75%; text-align:left;} #consultpop.cp-style-1 .consultform form li input {padding:13px 17px; width:75%; border:1px solid #707070; border-radius:5px; box-sizing:border-box;} #consultpop.cp-style-1 .ns {padding: 0 0 0 3px; font-size:16px; line-height:23px; color:#00abce;} /*Contact custom*/ #consultpop.cp-style-1 .popContact {width:75%;} #consultpop.cp-style-1 .popContact span input[type="checkbox"]{ appearance:none; } #consultpop.cp-style-1 .popContact span input { appearance:none; display:none;} #consultpop.cp-style-1 .popContact span input[type="checkbox"] + label {display:inline-block; position:relative; width:auto; padding-right:22px;} #consultpop.cp-style-1 .popContact span input[type="checkbox"] + label:before{ content:''; position:absolute; right:0; top:0; width:17px; height:17px; text-align:center; background:#fff; border:1px solid #b3b3b3; box-sizing:border-box; border-radius:100%;} #consultpop.cp-style-1 .popContact span input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:4px; right: 4px; width:9px; height:9px; background:#000; border-radius:100%; } #consultpop.cp-style-1 .agree {margin:25px 0; display:flex; gap:10px; font-size:14px; letter-spacing:-0.5px; color:#1a1a1a;} #consultpop.cp-style-1 .agree ul {width:100%;} #consultpop.cp-style-1 .agree li {margin-bottom:9px !important;} #consultpop.cp-style-1 .agree li:last-child {margin-bottom:0;} #consultpop.cp-style-1 .agree span.agree-link-pop {color:#8c8c8c; cursor:pointer;} #consultpop.cp-style-1 .agree input[type="checkbox"]{appearance:none; display:none;} #consultpop.cp-style-1 .agree input[type="checkbox"] + label {display:inline-block; position:relative; padding-left:25px; cursor:pointer; width:auto; font-size:13px; font-weight:500; line-height:16px;} #consultpop.cp-style-1 .agree input[type="checkbox"] + label:before{ content:''; position:absolute; left:0; top:0; width:17px; height:17px; text-align:center; background:#fff; box-sizing:border-box; border:1px solid #ccc;} #consultpop.cp-style-1 .agree input[type="checkbox"]:checked + label:before {background:#00abce; border:none;} #consultpop.cp-style-1 .agree input[type="checkbox"]:checked + label:after {content: ''; position:absolute; top:3px; left: 5px; width:6px; height:6px; border: solid #fff; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #consultpop.cp-style-1 .agree a {font-size:13px;} #consultpop.cp-style-1 .agreecon {padding:0 15px; height:85px; overflow-y:scroll; border:1px solid #c1c1c1;} #consultpop.cp-style-1 button { position:absolute; left:50%; bottom:0; transform: translate(-50%, 0); display:block; padding:30px 0; width:100%; background:#00abce; color:#fff; font-size:20px; font-weight:600; letter-spacing:-1px; text-align:center;} /*즉시출고 팝업 2023*/ .winLayWrap.winLayWrap-size-lg .winLayContainer {max-height:750px !important;} #consultpop.sevenpop .tit {position:fixed; top:0; padding:30px 40px; text-align:center; width:100%; background:#fff; z-index:99;} #consultpop.sevenpop {height:703px; padding-top:103px;} #consultpop.sevenpop .sevenscroll { padding-bottom:30px; height:564px; overflow-y:scroll;} #consultpop.sevenpop .agree {margin:17px 0 15px 0;} .svCarPop {position:relative; margin:13px 50px 30px 50px; border-radius:20px; box-shadow:3px 3px 10px rgba(0 0 0 / 10%); padding:15px 20px 20px 20px;} .svCarPop .markWrap {position:absolute; top:15px; right:15px; display:inline-block; width:auto;} .svCarPop .name {display:flex; align-items:center; gap:7px; padding:0 80px 0 0 ;} .svCarPop .name .brand {width:50px;} .svCarPop .name h3 {font-size:15px; line-height:1.4;} .svCarPop .price {margin:40px 0 15px 0; font-size:16px; font-weight:500; line-height:13px; color:#969696;} .svCarPop .price span {font-size:160%; font-weight:bold; color:auto; } .svCarPop .option {position:relative; z-index:10px;} .svCarPop .option li {display:flex; gap:7px; margin-bottom:3px; font-size:13px; font-weight:500; line-height:1.4;} .svCarPop .option li .subject {opacity:0.5;} .svCarPop .option li:last-child {margin-bottom:0;} .svCarPop .carImg {position:absolute; top:61px; right:8px; width:175px; height:86px; background-size:contain; background-repeat:no-repeat; z-index:9;} .consultform .condition {} #consultpop.cp-style-1 .consultform form .condition li {justify-content:flex-start;} #consultpop.cp-style-1 .consultform form .condition li > label {font-size:13px; line-height:15px; width:65px;} #consultpop.cp-style-1 .consultform form .condition li > label.space {letter-spacing:4px;} #consultpop.cp-style-1 .popflex {width:75%; display:flex; align-items:center; gap:20px;} #consultpop.cp-style-1 .popflex span input { appearance:none; display:none; } #consultpop.cp-style-1 .popflex span input + label {display:inline-block; position:relative; width:auto; font-size:13px; line-height:15px; padding-right:20px; font-weight: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:980px; height:620px;} #immcarPop .pop-container {} #immcarPop .pop-container .tit {position:fixed; top:0; width:100%; background:#fff; padding:30px 40px; text-align:center; z-index:9; } #immcarPop .pop-container .tit h2 {margin-bottom:5px; font-size:28px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a;} #immcarPop .pop-container .tit p {font-size:14px; color:#8c8c8c;} #immcarPop .pop-container .tit a.close {position:absolute; top:27px; right:25px;} #immcarPop .swiper-wrap {padding:0 40px;} #immcarPop .swiper {overflow:hidden; margin-left:-1px;} #immcarPop .arrow .swiper-button-next {right:40px;} #immcarPop .arrow .swiper-button-prev {left:40px;} #immcarPop .arrow .swiper-button-next:after {content:url('/_img/weekarrow.png'); transform: rotate(180deg); } #immcarPop .arrow .swiper-button-prev:after {content:url('/_img/weekarrow.png');} #immcarPop .seven-list .content {margin-top:114px; padding:20px;} #immcarPop .seven-list .plusbtn:hover .plusview {left:0;} .subcarList .list {border:1px solid #d1d1d1; box-sizing:border-box; border-radius:10px; padding:20px;} .subcarList .list:hover {border:1px solid #00abce; box-sizing:border-box;} .subcarList .list.on {border:1px solid #00abce; box-sizing:border-box;} .subcarList .list > a {position:relative; display:flex; flex-direction: column; border-radius:10px; height: 100%;} .subcarList .list > a .price {flex: 1 1; display: flex; align-items: flex-end;} .subcarList .list a .ab {position:absolute; top:5px; left:0;} .subcarList .list a .ab .final {padding:7px 12px; font-size:14px; line-height:14px; background:#007CCE; color:#fff; border-radius:500px;} .subcarList .list a .ab .seven {padding:7px 12px; font-size:14px; line-height:14px; background:#00abce; color:#fff; border-radius:500px;} .subcarList .list a .img {position:relative; width:100%; height:182px; display:flex; justify-content:center; /*padding:20px;*/} .subcarList .list a:hover .img img {transform: scale(1.1); transition:all 1s;} .subcarList .list .inven {position:absolute; top:-4px; right:0; padding:7px 12px; font-size:14px; line-height:14px; letter-spacing:-0.5px; color:#353535; border:1px solid #ccc; background:rgba(255,255,255,0.8); border-radius:500px; font-weight:bold; box-sizing:border-box;} .subcarList .list a h3 {margin:0; font-size:16px; flex: 0 1;} .subcarList .list a .option {margin:20px 0; flex: 0 1;} .subcarList .list a .option li {display:flex; align-items:center; gap:20px; font-size:14px; font-weight:400;} .subcarList .list a .option li .name {width:45px;} .subcarList .list a .option li .txt { align-items:center; gap:10px;} .subcarList .list a .option li.option-detail {align-items:flex-start;} .subcarList .list a .option li.option-detail .txt {padding-left:8px; width:100%;} /* height:48px; overflow-y:scroll; */ .subcarList .list a .option li.option-detail .txt::-webkit-scrollbar { width: 5px;} .subcarList .list a .option li.option-detail .txt::-webkit-scrollbar-track { background:#f1f1f1; border-radius: 10px;} .subcarList .list a .option li.option-detail .txt::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px;} .subcarList .list a .option li .color {display:block; width:13px; height:13px; border:1px solid #707070; box-sizing:border-box;} #immcarPop .subcarList .list .btn {margin-top:20px; display:flex; gap:5px; align-items:center;} #immcarPop .subcarList .list .btn a {display:blcok; width:50%; padding:9px; border-radius:5px; font-weight:600; text-align:center; border: 1px solid #d1d1d1;} #immcarPop .subcarList .list .btn a:first-child {display:none;} #immcarPop .subcarList .list .btn a.consultFormBtn {background:#1a1a1a; color:#fff;} #immcarPop .subcarList .list:hover .btn a {border:1px solid #00abce; color:#00abce;} #immcarPop .subcarList .list:hover .btn a.consultFormBtn {background:#00abce; color:#fff;} #immcarPop .subcarList .list:hover .btn a:hover {background:#f0fcff;} #immcarPop .subcarList .list:hover .btn a:hover.consultFormBtn {background:#0092b0; } #immcarPop .subcarList .list.on .btn a {border:1px solid #00abce; color:#00abce;} #immcarPop .subcarList .list.on .btn a.consultFormBtn {background:#00abce; color:#fff;} #immcarPop .subcarList .list.on .btn a:hover {background:#f0fcff;} #immcarPop .subcarList .list.on .btn a:hover.consultFormBtn {background:#0092b0; } .subcarList .list a .price li {padding:2px 0;} .subcarList .list a .price li {display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; font-weight:400; width: 100%;} .subcarList .list a .price li .name {width:50px;} .subcarList .list a .price li .won {font-size:130%;} #immcarPop .detail {text-align:center;} #immcarPop .detail a {display:inline-block; margin-top:35px; padding:17px 90px; text-align:center; background:#00abce; border-radius:5px; color:#fff; font-size:20px; font-weight:500; letter-spacing:-1px;} #immcarPop .detail a:hover {background:#00c4ec; transition:all 0.5s;} /*7일인도 특가 - 위 팝업 내용과 스타일 동일*/ #sub .subcarList {display:flex; flex-wrap:wrap; gap:25px;} #sub .subcarList .list {display:flex; flex-basis:31.9%; flex-direction:column; padding:25px; justify-content: space-between;} #sub .subcarList .list > a {width:100%; } #sub .subcarList .list a h3 {margin-top:10px; font-size:18px; line-height:26px; height:52px;} #sub .subcarList .list a .option li {font-size:15px; line-height:24px;} #sub .subcarList .list a .price li {font-size:15px; line-height:28px;} #sub .subcarList .list a .price li .name {width:55px;} #sub .subcarList .list a .price li .won {font-size:145%;} #sub .subcarList .list .btn {display:flex; justify-content:space-between; gap:10px;} #sub .subcarList .list .btn a {margin-top:20px; padding:12px; display:flex; width:100%; justify-content:center; font-size:16px; font-weight:600; color:#00abce; border:1px solid #00abce; box-sizing:border-box; border-radius:5px;} #sub .subcarList .list .btn a:hover {background:#e4faff; transition:all 0.5s;} #sub .subcarList .list .btn a.bg {background:#00abce; color:#fff;} #sub .subcarList .list .btn a.bg:hover {background:#0095b4; transition:all 0.5s; } #sub .seven-tit {display:flex; align-items:end; justify-content:space-between; margin-bottom:40px; padding:0 0 40px 0; border-bottom:1px solid #e6e6e6;} #sub .seven-tit h3 {font-size:30px; letter-spacing:-1px; font-weight:800;} #sub .seven-tit h4 {font-size:24px; letter-spacing:-0.5px; font-weight:800; margin-left:15px;} #sub .seven-tit h5 {margin-bottom:10px; font-size:20px; letter-spacing:-0.5px; font-weight:400;} #sub .seven-tit .seven-select {display:flex; align-items:center; gap:15px;} #sub .seven-tit .seven-select select { padding:15px 15px; width:100%; background:url('/_img/select_down.png') no-repeat #fff; background-size:15px; background-position:top 50% right 10px; color:#666666; border-radius:10px; font-size:15px; font-weight:500; letter-spacing:-0.5px; cursor:pointer; box-shadow:3px 3px 3px rgba(0 0 0 / 15%); } #sub .seven-tit .seven-select select.carbrand {width:140px;} #sub .seven-tit .seven-select select.carname {width:200px;} #sub .sevent-tab ul {margin-bottom:25px; display:flex;} #sub .sevent-tab ul a {display:block; font-size:25px; font-weight:800;} /*locationPop*/ #locationPop.layerPopup .layerBody {width:550px; height:765px;} #locationPop .pop-container .tit h2 {padding:30px 0; margin-bottom:5px; font-size:24px; font-weight:bold; letter-spacing:-1px; color:#1a1a1a; text-align:center;} #locationPop .arrow .swiper-button-next {right:30px;} #locationPop .arrow .swiper-button-prev {left:30px;} #locationPop .arrow .swiper-button-next:after {content:url('/_img/location_arrow.png'); transform: rotate(180deg); } #locationPop .arrow .swiper-button-prev:after {content:url('/_img/location_arrow.png');} #locationPop .list {position:relative; margin:0 auto; width:380px; border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:3px 3px 15px rgba(0 0 0 / 15%);} #locationPop .list .img {position:relative;} #locationPop .list .name {position:absolute; top:40%; left:35px; transform:translate(0,-50%); z-index:99; width:100%;} #locationPop .list .name img {width:45px;} #locationPop .list .name h3 {margin:12px 0 5px 0; font-size:27px; color:#fff; font-weight:600; letter-spacing:5px;} #locationPop .list .name h3 .grade {margin-left:-10px;font-size:80%; font-weight:400; letter-spacing:0; line-height:25px; opacity:0.8; } #locationPop .list .name .eng {color:#eff4f9; font-size:14px; font-weight:400;} #locationPop .list .name .num {margin-top:12px; color:#b3e0ff; font-size:14px; line-height:1.2; } #locationPop .txt {padding:0 35px 35px 35px;} #locationPop .txt h4 {margin:0; font-size:22px; line-height:1.4; color:#000;} #locationPop .txt h5 {margin:12px 0 5px 0; font-size:16px; color:#000;} #locationPop .career li {font-size:14px; color:#21253b;} #locationPop .caution {width:80%; margin-top:20px; font-size:12px; line-height:1.3;} #locationPop .badge {position:absolute; bottom:35px; right:35px; display:flex; flex-direction:column;} #locationPop .locationList.swiper {padding:0 0 15px 0;} /*noticeFinProtect*/ .noticeFinProtect .pagination {margin:60px auto;} .noticeFinProtect .pagination button.active {background:none; color:#3052da; font-weight:800;} .noticeFinProtect .pagination button {border:none; color:#91939e; font-size:16px;} #svimg.noticefp-sv {padding:85px 0; background:#292b33;} #svimg.noticefp-sv h2 {display:flex; align-items:center; gap:10px; justify-content:center; font-size:35px; line-height:1.4; font-weight:300; text-align:center; letter-spacing:-0.5px; color:#fff;} #svimg.noticefp-sv h2 .ico {font-size:40px; color:#c2c7db;} .nptSlect {margin:60px auto;} .nptSlect ul {display:grid; grid-template-columns: repeat(7, 1fr); gap:10px;} .nptSlect input {display:none; appearance:none;} .nptSlect input + label {display:block; cursor:pointer; padding:15px 0; text-align:center; background:#f6f6f6; border:1px solid #ededed; border-radius:3px; color:#222; font-size:14px; font-weight:500;} .nptSlect input + label:hover {background:#ededed; transition:all 0.5s;} .nptSlect input:checked + label {background:#3052da; border:1px solid #3052da; color:#fff; font-weight:700;} .nptList table {width:100%; text-align:center; font-size:15px;} .nptList table thead th {padding:20px 0; background:#eff0f5; color:#2b2c2f; font-weight:600; border-top:2px solid #292b33;} .nptList table tbody td {padding:20px; color:#222; font-weight:400; vertical-align:middle;} .nptList table tbody tr {background:#fff; border-bottom:1px solid #eff0f5;} .nptList table tbody tr:hover {background:#f9faff; transition:all 0.5s;} .nptList a:hover {color:#3052da;} .nptSearch {} .nptSearch .nptSearchCon {display:flex; align-items:center; justify-content:center; gap:7px;} .nptSearch .nptSearchCon .select {position:relative; } .nptSearch .nptSearchCon .select .arrow {position:absolute; top:50%; right:10px; transform:translate(0,-50%); width:10px;} .nptSearch .nptSearchCon select {padding:12px 15px; background:#f6f6f6; border:1px solid #ededed; width:80px; border-radius:3px;} .nptSearch .nptSearchCon select:focus {border:1px solid #181a20;} .nptSearch .nptSearchCon input {padding:12px 15px; background:#f6f6f6; border:1px solid #ededed; width:260px; border-radius:3px;} .nptSearch .nptSearchCon input:focus {border:1px solid #181a20;} .nptSearch .nptSearchCon button.searchBtn {width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#292b33; color:#fff; border-radius:3px;} .nptSearch .nptSearchCon button.searchBtn img {width:20px; filter:grayscale(1) brightness(5);} .nptSearch .nptSearchCon button:hover {background:#181a20;} .nptTerm {margin-top:60px; width:100%; background:#eff0f5; padding:15px 0; border-radius:3px;} .nptTerm ul {display:flex; align-items:center; justify-content:center;} .nptTerm li {border-right:1px solid #c7c9d5;} .nptTerm li:last-child {border:none;} .nptTerm a {display:block; padding:0 15px; } #docsBrockerPop {padding:20px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:15px;} .nptTermTit {position:absolute; top:0; left:50%; transform:translate(-50%,0); width:100%; padding:20px; background:#292b33; color:#fff; font-size:20px; text-align:center;} #nptTermPop .nptTermCon {margin-top:63px; padding:20px; text-align:left; color:#393939; font-size:13px; line-height:1.4;} #nptTermPop .nptTermCon h2 {margin-bottom:20px; font-size:18px; font-weight:700; color:#222; word-break:keep-all;} #nptTermPop .nptTermCon h3 {margin-bottom:10px; font-size:16px; font-weight:500;} #nptTermPop .nptTermCon p {margin-bottom:10px; } #nptTermPop .nptTermCon ul {margin-bottom:10px;} #nptTermPop .nptTermCon ul ul {margin:10px 0; opacity:0.8;} #nptTermPop .nptTermCon ul ul li {gap:5px;} #nptTermPop .nptTermCon li {display:flex; align-items:baseline; gap:10px;} /* #popFirework .popcon { width:100%; max-width:860px; } #popFirework .cover { background:url('../_img/pop_custom_bg.png') no-repeat center / cover; } #popFirework .popcon .tit h3 {margin-bottom:7px; font-size:40px; font-weight:600; } #popFirework .popcon .tit h2 {font-size:63px; font-weight:700;} #popFirework .popcon .carPic {max-width:600px; margin:40px auto -10px auto;} #popFirework .popcon .carName {top:-15px; font-size:28px;} #popFirework .popcon a.btnCounsel {gap:13px; padding:13px 23px 13px 27px; font-size:30px; font-weight:700;} #popFirework .popcon a.btnCounsel span {font-size:25px;} #popFirework .btnBtmWrap {margin-top:40px; gap:30px;} #popFirework .btnBtmWrap button {font-size:16px;} #popThunder {background:rgba(0 0 0 / 60%)} #popThunder .popcon { width:100%; top:52%; max-width:860px; } #popThunder .popcon .tit {margin:15px auto 0 auto;} #popThunder .cover {background:url('../_img/pop_thunder_bg.png') no-repeat top center / cover; } #popThunder .popcon .carPic {max-width:660px; margin:0px auto -10px auto; } #popThunder .popcon .carName {font-size:28px; } #popThunder .popcon a.btnCounsel {gap:13px; padding:13px 29px 14px 40px; font-size:30px; font-weight:700;} #popThunder .popcon a.btnCounsel span {font-size:25px;} #popThunder .btnBtmWrap {margin-top:40px; gap:30px;} #popThunder .btnBtmWrap button {font-size:16px;} */ #popFirework {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:101vh; z-index:999; backdrop-filter: blur(3px);} #popFirework .btnBtmWrap {display:flex; align-items:center; justify-content:center; } #popFirework .btnBtmWrap button {position:relative; background:transparent; font-size:14px; color:#5B5B5B; padding:0 15px;} #popFirework .btnBtmWrap button:first-child::after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:1px; height:12px; background:#5B5B5B; } #popThunder {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:101vh; z-index:999; backdrop-filter: blur(3px);} #popThunder .btnBtmWrap {display:flex; align-items:center; justify-content:center; } #popThunder .btnBtmWrap button {position:relative; background:transparent; font-size:14px; color:#fff; padding:0 15px;} #popThunder .btnBtmWrap button:first-child::after {content:''; position:absolute; top:50%; right:0; transform:translate(0,-50%); width:1px; height:12px; background:#fff; } .popTear .cover {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:101vh; background:url('../_img/pop_tear_bg.png') no-repeat center / cover; filter:brightness(0.8); opacity:0.9; z-index:1;} .popTear .popcon {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:101vh; background:url('../_img/pop_tear.png') no-repeat center / contain; z-index:9;} .popTear .popTxt {position:absolute; top:69%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:620px;} .popTear .carTit {display:none;} .popTear .carPic {width:100%; max-width:620px;} .popTear .popcon .carName {margin:0 auto; font-size:24px; font-weight:700; color:#5700ED;} .popTear .popcon a.btnCounsel {display:inline-block; margin:15px auto 20px auto; padding:14px 50px; font-size:18px; font-weight:700;background:#5700ED; color:#fff; border-radius:70px;} .popDead .cover {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:101vh; background:url('../_img/pop_tear_bg.png') no-repeat center / cover; filter:brightness(0.6); opacity:0.9; z-index:1;} .popDead .deadLine {position:relative; width:100vw; height:101vh; z-index:2;} .popDead .deadLine .up {position:absolute; top:-10px; left:50%; transform:translate(-50%,0); width:100%;} .popDead .deadLine .down {position:absolute; bottom:-10px; left:50%; transform:translate(-50%,0); width:100%;} .popDead .popcon {position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:101vh; background:url('../_img/pop_deadline.png') no-repeat center / contain; z-index:9;} .popDead .popTxt {position:absolute; top:69%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:620px;} .popDead .popcon .carName {margin:0 auto; font-size:24px; font-weight:700; color:#fff;} .popDead .popcon a.btnCounsel {display:inline-block; margin:15px auto 20px auto; padding:14px 50px; font-size:18px; font-weight:700;background:#FF6A00; color:#fff; border-radius:70px;} @media (max-width:1200px) { .pc {display:block;} .mobile {display:none;} } #termClear {padding:72px 0;} #termClear .title {margin-bottom:48px; padding:0 24px; font-size:40px; font-weight:600; color:#171717;} #termClear .termCon {padding:0 24px; font-size:16px; color:#404040; font-weight:400; line-height:28px;} #termClear .termCon h3 {margin-bottom:30px; font-size:24px; font-weight:500; color:#171717;} #termClear .termCon h3.underline {display:flex; align-items:baseline; gap:5px; padding: 0 0 24px 0; border-bottom:1px solid #e5e5e5;} #termClear .termCon h4 {margin-bottom:24px; font-size:20px; font-weight:700;} #termClear .termCon p {margin-bottom:40px; word-break:break-all;} #termClear .listBox {margin-bottom:40px; padding:24px; background:#fafafa; color:#737373; border-radius:16px; line-height:24px;} #termClear .listBox .list {display:flex; flex-direction:column; gap:12px; } #termClear .listBox .list li {position:relative; display:flex; align-items:baseline; gap:7px;} #termClear .listBox .tit {font-weight:700; color:#404040; } #termClear .listBox .num {/*position:relative; top:-2px; margin:0 4px;*/ font-weight:700; color:#404040; } #termClear .listBox .list.column {gap:18px;} #termClear .listBox .list.column li {flex-direction:column; gap:4px;} #termClear .listBox .list.dot .text {position:relative; padding:0 0 0 15px;} #termClear .listBox .list.dot .circle {position:absolute; top:9px; left:4px; display:block; width:4px; height:4px; border-radius:100%; background:#737373;} #termClear .gridBox {width:100%; margin-bottom:24px; display: grid; grid-template-columns: 25% 50% 25%; font-size:14px;} #termClear .gridBox .cell { padding: 16px; border: none; position: relative; display:flex; align-items:center; justify-content:center; text-align: center; word-break:break-all;} #termClear .gridBox .cell::after { content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; background-color: #ccc; } #termClear .gridBox .cell::before {content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #ccc;} #termClear .gridBox .cell:nth-child(3n)::before { display: none; } #termClear .gridBox .cell:nth-last-child(-n+3)::after { display: none; } #termClear .gridBox .cell.gbTop {background:#f5f5f5; color:#171717; font-size:16px; font-weight:700;} /* 25.12.23 추천 검색어 팝업 추가 */ .real-time-pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); z-index: 999; } .real-time-pop-bg-close { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; } .search-real-time { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1248px; height: 698px; background: #fff; border-radius: 14px; box-shadow: 4px 4px 8px rgb(0 0 0 / 30%); overflow: hidden; z-index: 2; transform: translate(-50%, -50%); } .real-time-close { display: inline-flex; flex-flow: row nowrap; align-items: center; gap: 8px; position: absolute; top: 16px; right: 24px; font-size: 16px; color: #000; } .real-time-close > span { display: block; width: 1px; height: 16px; font-size: 0; background-color: #000; } .real-time-close > a { color: inherit; } .real-time-bg { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; width: 100%; height: calc(100% - 38px); padding: 48px 24px; background-repeat: no-repeat; background-position: center; background-size: cover; } .real-time-bg-box { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 442px; height: 100%; padding: 20px 22px 0; background-color: #FFF; border-radius: 14px; box-shadow: 4px 4px 8px rgb(0 0 0 / 30%); } .real-time-bg-box > h3 { display: inline-flex; justify-content: flex-start; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 18px; font-weight: 700; color: #1C1C1C; } .real-time-bg-box > h3 > span { color: #586B8F; } .real-time-list { flex: 1; width: calc(100% + 44px); height: 100%; margin: 0 -22px; padding-bottom: 20px; overflow-y: auto; } .real-time-content-list-item { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; gap: 14px; width: calc(100% - 44px); height: 58px; margin: 0 auto; background-color: #F6F6F6; padding: 0 18px; border: 1px solid #F6F6F6; border-radius: 14px; cursor: pointer; transition: all .3s; } .real-time-content-list-item:hover { background-color: #FFF; border-color: #95A5C2; } .real-time-content-list-item + .real-time-content-list-item { margin-top: 8px; } .real-time-content-list-item > div { flex: 1; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; height: 100%; text-align: left; font-size: 18px; font-weight: 700; color: #1C1C1C; transition: all .3s; } .real-time-content-list-item > div > img { display: block; opacity: 0; visibility: hidden; transition: all .3s; } .real-time-content-list-item:hover > div > img { opacity: 1; visibility: visible; } .real-time-detail-more { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: calc(100% + 44px); height: 48px; margin: 0 -22px; padding: 0 22px; font-size: 16px; color: #424242; background-color: #FFF; border-top: 1px solid #E5E5E5; border-radius: 0 0 14px 14px; } .real-time-detail-more > a { display: inline-flex; flex-flow: row nowrap; align-items: center; gap: 8px; transition: all .3s; } .real-time-detail-more:hover > a { gap: 16px; } .real-time-rep-box { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; width: 100%; height: 38px; /* background-color: #FF4400; */ /* background-color: #2D52E9; */ /* background-color: #000; */ background-color: #F21DB8; border-radius: 0 0 14px 14px; overflow: hidden; } .rolling-container { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: 16px; height: 100%; } .rolling-wrapper { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: 16px; } .rolling-wrapper img { flex-shrink: 0; display: block; width: auto; height: auto; } .advertWarning { position: relative; margin-top: 15px; padding-left: 18px; font-size: 1rem; font-weight: 700; color: #111; } .advertWarning:before { content: '※'; position: absolute; top: 0; left: 0; }