
html{font-size: 10px;}
*{font-family: Noto Sans KR;font-weight: 400;}
main{width: 100%;max-width: 75rem;margin:0 auto;overflow: hidden;background-color: #f7f7f7;}


.container {margin:0 5.4rem;}
.top-estimate-section{width: 100%; background-color: #f7f7f7;}
.top-estimate-section .state-box{display: flex; height: 10.7rem; justify-content: space-between; align-items:center; cursor: pointer;}
.top-estimate-section .state-box h2{font-size: 2.6rem; font-weight: 700; color:#383841; letter-spacing: -0.06em;}
.top-estimate-section .state-box .price-box{display:flex; align-items:center; font-size: 3rem; font-weight: 700; color:#662eff; letter-spacing: -0.06em;}
.top-estimate-section .state-box i{width: 3.2rem; height: 3.2rem; display: block; background-color: #662eff; border-radius: 100%; position: relative; margin-left: 2.8rem;}
.top-estimate-section .state-box i::before{content:''; width:0; height:0; display: block; position: absolute; left: 50%; top:50%; transform: translate(-50%,-40%); border-bottom:0; border-top:1.2rem solid #f7f7f7; border-right: 0.9rem solid transparent; border-left: 0.9rem solid transparent; transition-duration: 0.4s;}
.top-estimate-section.open .state-box i::before{transform: translate(-50%,-60%) rotate(180deg); }

/* .top-estimate-section .detail-box{display: flex; height:0; flex-direction: column; overflow: hidden; transition-duration: 0.7s; transition-property: height; } */
.top-estimate-section .detail-box{display: flex; height:0; flex-direction: column; overflow: hidden; transition-property: height; }
.top-estimate-section .detail-box .info-box{display: flex; justify-content: space-between; }
.top-estimate-section .detail-box .info-box .img-box{width: 50%; height:29.5rem; position: relative; display: flex; align-items: flex-end; padding-bottom: 7rem;}

.top-estimate-section .detail-box .info-box .img-box::before{content:''; display: block; width:23.5rem; height: 23.8rem; background-color:#662eff; border-radius:20px 20px 20px 0; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); }
/*
.top-estimate-section .detail-box .info-box .img-box::before{content:''; display: block; width:23.5rem; height: 23.8rem; background-color:#662eff; border-radius:20px 20px 20px 20px; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); }
*/
.top-estimate-section .detail-box .info-box .img-box img{position: relative; z-index: 1;}
.top-estimate-section .detail-box .info-box .text-box{position:relative; width: 50%; height:29.5rem; padding: 2.9rem 1.5rem 2.9rem 1rem; }
.top-estimate-section .detail-box .info-box .text-box ul {margin-top: 3rem; }
.top-estimate-section .detail-box .info-box .text-box li {font-size: 2.3rem; color:#383841; line-height:1.391304347826087em; letter-spacing: -0.06em; display: flex; justify-content: space-between;}
.top-estimate-section .detail-box .info-box .text-box li .title-box{width:5.6rem; display: inline-flex; justify-content: space-between;flex: none;margin-right: 2rem;}
.top-estimate-section .detail-box .info-box .text-box li .val-box{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.top-estimate-section .detail-box .info-box .text-box li .title-box i:last-of-type:after{content:" :";}
.top-estimate-section .detail-box .info-box .text-box .total-price{    margin-top: 3rem;right: 0;display: flex;text-align: center;font-size: 2.9rem;font-weight: 700;color: #662eff;letter-spacing: -0.06em;white-space: nowrap;width: 100%;}
.top-estimate-section .detail-box .info-box .text-box .total-price em{font-weight:700;}
.top-estimate-section .detail-box .button-box {display: flex; justify-content: space-between; padding:0rem 2.2rem 3rem}
.top-estimate-section .detail-box .button-box .button {display:flex; justify-content:center; align-items:center; font-size: 2.6rem; color:#ffffff; font-weight: 500; letter-spacing: -0.08em; width: 29rem; height: 7.8rem; background-color: #000000; border-radius: 39px;}

.top-estimate-section .detail-box .button-box .button_left {display:flex; justify-content:center; align-items:center; font-size: 2.6rem; color:#ffffff; font-weight: 500; letter-spacing: -0.08em; width: 29rem; height: 7.8rem; background-color: #bbbbbb; border-radius: 39px;}

.top-estimate-section .detail-box .button-box .button_right {display:flex; justify-content:center; align-items:center; font-size: 2.6rem; color:#ffffff; font-weight: 500; letter-spacing: -0.08em; width: 29rem; height: 7.8rem; background: linear-gradient(120deg, #619dff, #7454ff); border-radius: 39px;}

.top-estimate-section.open .detail-box{height:100%;}

.instrument-section{background:linear-gradient(150deg, #e8f2ff, #e8e1ff);padding:11rem 0 8.5rem;}
.instrument-section h2{font-size: 3.2rem;font-weight: 300;color:#000000;letter-spacing: -0.06em;}
.instrument-section h2 .dot{position: relative;font-weight: 300;}
.instrument-section h2 .dot::before{content:'';display:block;position: absolute;left: 50%;top:0;background-image: url("../images/estimate/icon-dot.png");background-repeat: no-repeat;width: 0.3rem;height: 0.3rem;}
.instrument-section h1{font-size: 4.2rem;font-weight: 700;color:#000000;letter-spacing: -0.06em;}
.instrument-section h1 strong:nth-of-type(1){color:#662eff;font-weight: 700;}
.instrument-section h1 strong:nth-of-type(2){color:#00b5a2;font-weight: 700;}
.instrument-section .info-box{width:64.2rem;height:10.5rem;position: relative;margin-top: 6rem;}
.instrument-section .info-box #step-01{position: relative; animation: scale 0.5s linear 0.3s infinite alternate; }
.instrument-section .info-box #step-02{position: relative; animation: scale 0.5s linear 0.8s infinite alternate; }
.instrument-section .info-box #step-03{position: relative; animation: scale 0.5s linear 1.2s infinite alternate; }
.instrument-section .info-box .bg-box p{position: absolute;top: 40%;left: 23%;}
.instrument-section .info-box ul{width:100%;height:100%;display: flex;text-align:center;justify-content: space-around;align-items:center;position: absolute;top:0;}
.instrument-section .info-box li{width:calc(100% /3);font-size:2.1rem;line-height:1.333333333333333em;font-weight: 300;letter-spacing:-0.06em;color:#383841;}
.instrument-section .info-box .bg-line{width: 5%; margin: 0 -4px;}
.instrument-section .instrument-box{position: relative;width: 44rem;height: 44rem;z-index: 1;position: relative;margin: 13rem auto 0;}
.instrument-section .instrument-box .frame, .instrument-section .instrument-box .bar { fill: none; }
.instrument-section .instrument-box .frame.in-circle { stroke: #8d7aed;stroke-dasharray: 345.575;stroke-dashoffset: 86.3938;}
.instrument-section .instrument-box .bar.in-circle {stroke: #00dfc7;stroke-dasharray: 345.575;stroke-dashoffset: 86.3938;transition-duration: 0.6s;transform: rotate(90deg);transform-origin: center;}
.instrument-section .instrument-box .frame.out-circle { stroke: #ffffff;stroke-dasharray: 345.575;stroke-dashoffset: 115.192;transform: rotate(150deg);transform-origin: center;}
.instrument-section .instrument-box .bar.out-circle {stroke: #8153ff;stroke-dasharray: 345.575;stroke-dashoffset: 345.575;transition-duration: 0.6s;transform: rotate(150deg);transform-origin: center;}
.instrument-section .instrument-box .price-box{font-family:GmarketSans;font-size:2rem;font-weight:500;letter-spacing:-0.06em;line-height:1.5em;display:flex;flex-direction:column;align-items:center;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.instrument-section .instrument-box .price-value{font-family:GmarketSans;font-size: 5rem;line-height: 1em;color:#000000;letter-spacing: -0.06em;font-weight: 700;text-shadow: 3px 3px 3px rgba(0, 0, 0,0.17);margin-top: 1rem;}
.instrument-section .instrument-box .price-value::before{content:'월';font-family: Noto Sans KR;font-weight: 500;font-size: 2.4rem;letter-spacing:-0.06em;margin-right: 0.5rem;bottom: 0.3rem;position: relative;}
.instrument-section .instrument-box .price-value::after{content:'만원대';font-family: Noto Sans KR;font-weight: 500;font-size: 2.4rem;letter-spacing:-0.06em;margin-left: 0.3rem;bottom: 0.3rem;position: relative;}
.instrument-section .instrument-box #pin {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 18.333rem;height: 18.333rem;z-index: -1;}
.instrument-section .instrument-box #pin .pin {width:100%;height:100%;transform:rotate(60deg);display: flex;justify-content: center;align-items: flex-end;transition-duration: 0.5s;transform-origin: center;}
.instrument-section .instrument-box #pin .pin > img{transform: translateY(100%) rotate(180deg);width: 3.4rem;}
.instrument-section .instrument-box span.scale{padding:1.5rem;font-family:GmarketSans;font-size: 4rem;font-weight: 700;color:#ffffff;letter-spacing: -0.06em; position: absolute;transition-duration: 0.4s;transition-property: color;cursor: pointer;}
.instrument-section .instrument-box span.scale.on{color:#8153ff;}
.instrument-section .instrument-box span.scale.p30{left: 8%;top: 67%;transform: translateX(-100%);text-shadow:-1px -2px 0 rgb(0 0 0 / 17%);}
.instrument-section .instrument-box span.scale.p35{left: 3%;top: 48%;transform: translateX(-105%);font-weight: 400;text-shadow:-1px -2px 0 rgb(0 0 0 / 10%);}
.instrument-section .instrument-box span.scale.p40{left: 3%;top: 25%;transform: translateX(-100%);text-shadow:-1px -2px 0 rgb(0 0 0 / 17%);}
.instrument-section .instrument-box span.scale.p45{left: 14%;top: 6%;transform: translateX(-100%);font-weight: 400;text-shadow:-1px -2px 0 rgb(0 0 0 / 10%);}
.instrument-section .instrument-box span.scale.p50{left: 18%;top: 9%;transform: translateY(-100%);text-shadow:-1px -2px 0 rgb(0 0 0 / 17%);}
.instrument-section .instrument-box span.scale.p55{left: 41%;top: 4%;transform: translateY(-100%);font-weight: 400;text-shadow:-1px -2px 0 rgb(0 0 0 / 10%);}
.instrument-section .instrument-box span.scale.p60{right: 18%;top: 9%;transform: translateY(-100%);text-shadow:-1px -2px 0 rgb(0 0 0 / 17%);}
.instrument-section .instrument-box span.scale.p65{right: 14%;top: 6%;transform: translateX(100%);font-weight: 400;text-shadow:-1px -2px 0 rgb(0 0 0 / 10%);}
.instrument-section .instrument-box span.scale.p70{right: 3%;top: 25%;transform: translateX(100%);text-shadow:-1px -2px 0 rgb(0 0 0 / 17%);}
.instrument-section .instrument-box span.scale.p75{right: 3%;top: 48%;transform: translateX(100%);font-weight: 400;text-shadow:-1px -2px 0 rgb(0 0 0 / 10%);}
.instrument-section .instrument-box span.scale.p80{right: 8%;top: 67%;transform: translateX(100%);text-shadow:-1px -2px 0 rgb(0 0 0 / 17%);}

.instrument-section .instrument-box .battery-bar{display: flex;width: 36rem;font-size: 3rem;color: #93feec;letter-spacing: -0.08em;font-weight: 400;align-items: center;justify-content: center;position: absolute;left: 50%;bottom: 0;transform: translate(-50%, -100%);}
.instrument-section .instrument-box .battery-bar .battery-box{width: 23rem;display: flex;justify-content: space-between;margin-left: 1rem;}
.instrument-section .instrument-box .battery-bar .battery-box i{display:inline-block;width: 1.7rem; height: 3rem;background-color: #887aee; box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.17) inset;transition-duration: 0.3s;transition-property: background-color;}
.instrument-section .instrument-box .battery-bar .battery-box i.on{background-color: #93feec; }


.instrument-section .decision-button{position:relative; display:flex;justify-content:center;align-items:center;font-size:2.5rem;font-weight: 700;color:#662eff;letter-spacing: -0.08em;background-color:#ffffff;width: 34.1rem; height: 7.8rem;border-radius: 50px;margin:0 auto; box-shadow: 0px 0px 5px rgba(0,0,0,.2); animation: border 1s linear infinite;}
.instrument-section .decision-button i{width: 3.2rem;height: 3.2rem;display: block;background-color: #662eff;border-radius: 100%;position: relative;margin-left: 2.8rem;}
.instrument-section .decision-button i::before{content:'';width:0;height:0;display: block;position: absolute;left: 60%;top:50%;transform: translate(-50%,-50%) rotate(-90deg);transform-origin:center;border-bottom:0;border-top:1.4rem solid #f7f7f7;border-right: 0.9rem solid transparent;border-left: 0.9rem solid  transparent;}

.slide-result-section {position: relative;transform: translateX(100%);transition-duration: 1s;height: 0;overflow-y: hidden;background-color: #f6f5ff;}
.slide-result-section.open{height: 47.2rem;}
.slide-result-section.open.view{transform: translateX(0)}
.slide-result-section .resultSlide{height: 100%;}
.slide-result-section .resultSlide .swiper-wrapper{}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide{display: flex;align-items:center;height: 100%;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .container{display: flex;width: 100%;flex-direction: column;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box {text-align: center;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box h2 {font-size: 2.8rem;color:#000000;font-weight: 500;line-height:1.5em;letter-spacing: -0.06em;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box .info-list {display: flex;align-items: center;justify-content: center;margin-top: 1rem;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box .info-list i{display:flex;justify-content:center;align-items:center;font-size: 2rem;font-weight: 700;color:#b6b5bc;width: 3.5rem;height: 3.5rem;background-color: #e5e4ed;border-radius: 100%;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box .info-list span {font-size:2.1rem;font-weight: 500;line-height: 1.761904761904762em;letter-spacing: -0.06em; margin:0 1.5rem;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box .info-list span:nth-of-type(1){color:#98b1e3;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box .info-list span:nth-of-type(2){color:#84ccdf;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .title-box .info-list span:nth-of-type(3){color:#69ced2;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .content-box {display: flex;margin-top: 3rem;justify-content: center;padding-bottom: 3rem;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .img-box{width: 18.6rem;position: relative;display: flex;flex-direction: column;align-items: center;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .img-box img{width: 100%;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .text-box{display: flex;justify-content: center;flex: 1;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .text-box h3{font-size: 2.2rem;font-weight: 500;color:#4f4d4d;letter-spacing: -0.06em;line-height: 1.909090909090909em;padding-left: 1.3rem;}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .text-box ul{}
.slide-result-section .resultSlide .swiper-wrapper .swiper-slide .text-box ul li {font-size: 2.1rem;font-weight:300;color:#4f4d4d;line-height: 1.666666666666667em;letter-spacing: -0.06em;}


.slide-result-section .tip-box{display:flex;align-items:center;width:100%;height:100%;position: absolute;top:0;left: 0;background-color: #f6f3ff;z-index: 1;opacity: 0;left: -100%;transition-duration: .6s;transition-property: opacity;}
.slide-result-section .tip-box .close-button{font-size: 2.4rem;color:#000000;position: absolute;top:0;right: 0;line-height: 1.583333333333333em;padding:3rem 5.4rem;}
.slide-result-section .tip-box h2{font-size: 2.3rem;font-weight: 700;letter-spacing: -0.06em;line-height: 1.652173913043478em;color:#69ced2;margin-top: 1.5rem;}
.slide-result-section .tip-box h2:first-of-type{color:#6184cb;margin-top: 0;}
.slide-result-section .tip-box ul{margin-top:0.5rem }
.slide-result-section .tip-box ul li{font-size: 2.1rem;font-weight: 300;color:#4f4d4d;line-height: 1.666666666666667em;letter-spacing: -0.06em;}
.slide-result-section .tip-box ul li em{font-weight: 700;}
.slide-result-section .tip-box.open{opacity: 1;left: 0;}

.swiper-button-next, .swiper-rtl .swiper-button-prev {right: 2.5rem;left: auto;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {content:'>';font-family:GmarketSans;font-size: 4.6rem;font-weight: 300;color:#c9c5e5;}
.swiper-button-prev, .swiper-rtl .swiper-button-next {left: 2.5rem;right: auto;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {content:'<';font-family:GmarketSans;font-size: 4.6rem;font-weight: 300;color:#c9c5e5;}
.swiper-pagination-bullet {width: 1.2rem;height: 1.2rem;display: inline-block;border-radius: 50%;background: #662eff;opacity: .2;}
.swiper-pagination-bullet-active {opacity: 1;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 4rem;}

.carinfo-section{background-color: #e8e2ff;padding:7.5rem 0;}
.carinfo-section .list-box{display: flex;justify-content: space-between;}
.carinfo-section .list-box .item-box{width: 30.7rem;border:0.3rem solid #9654f0;background-color: #ffffff;padding:5.5rem 4.5rem;border-radius: 2rem;position: relative;}
.carinfo-section .list-box .item-box h2{font-size:2.5rem;font-weight:500;line-height:1.76em;letter-spacing:-0.06em;color:#9654f0;}
.carinfo-section .list-box .item-box p{font-size:2.2rem;font-weight:300;line-height:1.5em;letter-spacing:-0.06em;color:#616161;margin-top: 1.5rem;}
/*
.carinfo-section .list-box .item-box:nth-of-type(1)::after{content:'';background-image: url("../images/estimate/img-car01.png");position: absolute;background-size: cover;right: -2.3rem;bottom: -4.5rem;width: 17.9rem;height: 16.6rem;}
.carinfo-section .list-box .item-box:nth-of-type(2)::after{content:'';background-image: url("../images/estimate/img-car02.png");position: absolute;background-size: cover;right: -2.3rem;bottom: -4.5rem;width: 17.9rem;height: 16.6rem;}
*/
.carinfo-section .list-box .item-box:nth-of-type(1)::after{content:'';background-image: url("../images/estimate/img-car01.png");position: absolute;background-size: cover;right: -2.3rem;bottom: -4.5rem;width: 17.9rem;height: 16.6rem;}
.carinfo-section .list-box .item-box:nth-of-type(2)::after{content:''; position: absolute;background-size: cover;right: -2.3rem;bottom: -4.5rem;width: 17.9rem;height: 16.6rem;}


.counsel-section{background-color: #ffffff;}
.counsel-section .counsel-info{display: flex;height:15.4rem;justify-content: space-between;align-items: center;}
.counsel-section .counsel-info h2{font-size: 3.5rem;font-weight: 700;color:#000000;letter-spacing: -0.06em;}
.counsel-section .counsel-info h2 em{font-weight: 700;color:#662eff;}
.counsel-section .counsel-info .counsel-count{font-size: 7rem;font-weight: 700;color:#662eff;letter-spacing: -0.06em;}
.counsel-section .counsel-info .counsel-count::after{content:'건';font-size: 3.5rem; }
.counsel-section .counsel-list-box{width: 100%;overflow: hidden;position: relative;display: flex;height: 6rem;background-color: #e5e1ed;border-bottom: 1px solid #dcdcdc;}
.counsel-section .counsel-list-box .text-box{display:flex; white-space: nowrap;position: absolute;left: 100%;top: 50%;transform: translateY(-50%);animation-duration: 20s;animation-name: left_flow;animation-iteration-count: infinite;animation-timing-function: linear;}
.counsel-section .counsel-list-box .text-box > li{margin-right: 3rem;}
.counsel-section .counsel-list-box .text-box > li .car-name{font-size: 2.3rem;font-weight: 500;color:#474747;letter-spacing: -0.06em;margin-right: 1.6rem;}
.counsel-section .counsel-list-box .text-box > li .car-price{font-size: 2.3rem;font-weight: 500;color:#6423a1;letter-spacing: -0.06em;}

.review-section{border-top: 1px solid #dcdcdc;margin-top: 1rem;padding:8rem 0;background-color: #ffffff;}
.review-section h2{font-size:2.6rem;font-weight: 500;color:#000000;letter-spacing: -0.06em;line-height: 1.692307692307692em;}
.review-section h3{font-size: 3rem;font-weight: 700;color:#662eff;letter-spacing: -0.06em;line-height: 1.466666666666667em;}
.review-section .car-info{margin-bottom: 1rem;}
.review-section .car-info .car-name{font-size: 2.6rem;font-weight: 700;color:#000000;letter-spacing: -0.06em;line-height: 1.692307692307692em;margin-right: 1.5rem;}
.review-section .car-info .car-name .brand-name{font-weight: 400;}
.review-section .car-info .star-point{display: inline-flex;}
.review-section .car-info .star-point > i{background-image: url("../images/estimate/icon-star-off.png");width: 2.9rem;height: 2.6rem;background-size: cover;}
.review-section .car-info .star-point > i.on{background-image: url("../images/estimate/icon-star-on.png");}
.review-section .car-info .star-point .number {font-size:2.5rem;line-height: 2.5rem;color: #b88600;padding-left: 1.8rem;}
.review-section p{font-size:2.2rem;font-weight: 300;color:#000000;letter-spacing: -0.06em;line-height: 1.454545454545455em;white-space: nowrap;}
.review-section .real-review{display: flex;justify-content: space-between;margin-top: 4rem;}
.review-section .real-review .review-item{width: 49%;}
.review-section .real-review .img-box{width: 31.5rem;height: 20rem;display: block;border-radius: 3rem;overflow: hidden;object-fit: contain;}
.review-section .real-review .text-box{margin-top: 3rem;padding-left: 0.5rem;}
.review-section .best-review{background-color: #f2f2f2;margin-left: 4rem;border-radius: 4rem 0 0 4rem;padding: 4rem;margin-top: 8rem;}
.review-section .best-review .car-info{margin-top: 3rem;}


.floating-banner {position:fixed;left:0;bottom:0;display:flex;width:100%;background-color:#ffffff;height: 16rem;align-items: center;box-shadow: 0px 2px 16px 0px rgba(0,0,0,.2);border-radius: 3.1rem 3.1rem 0 0;transform: translate(-50%, 100%);transition-duration: 0.7s;transition-property: transform;max-width: 75rem;left:50%;z-index: 1;}
.floating-banner .content-box{display: flex;width:100%;justify-content: space-between;align-items: center;}
.floating-banner .text-box{margin-top: -1.5rem;}
.floating-banner .text-box h2{font-size: 3.4rem;font-weight: 700;color:#662eff;letter-spacing: -0.06em;}
.floating-banner .text-box h2 strong{font-size: 7.4rem;font-weight: 700; letter-spacing: -0.06em;}
.floating-banner .text-box p{font-size: 2.2rem;font-weight: 400;color:#383841;letter-spacing: -0.06em;}
.floating-banner .apply-button{display: flex;justify-content: center;align-items: center;width: 19.4rem;height: 11.6rem;background-color: #662eff;border-radius: 2rem;font-size: 2.4rem;font-weight: 700;letter-spacing: -0.06em;color:#ffffff;
    background: rgb(130,186,255); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgb(130,186,255) 0%, rgb(150,118,255) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgb(130,186,255) 0%,rgb(150,118,255) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgb(130,186,255) 0%,rgb(150,118,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82baff', endColorstr='#9676ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
body.bottom .floating-banner,
body.result .floating-banner{transform: translate(-50%, 0);}


.carinfo-layer, .carinfo2-layer {position: fixed;width:100%;min-height:100vh;top:0;left: 100%;background-color: #ffffff;transition-duration: .6s;transition-property: left;z-index: 1;}
.carinfo-layer .header-box, .carinfo2-layer .header-box {display:flex;height: 12.2rem;align-items: center;}
.carinfo-layer .header-box .close-button, .carinfo2-layer .header-box .close-button {font-size: 2.8rem;color:rgba(0,0,0,0.8);margin-right: 5rem;}
.carinfo-layer .header-box .close-button img, .carinfo2-layer .header-box .close-button img {width: 60%;}
.carinfo-layer .header-box h2, .carinfo2-layer .header-box h2 {font-size: 2.8rem;color:#000000;font-weight: 700;letter-spacing: -0.08em;}
.carinfo2-layer .img-box {display:flex;justify-content:center;align-items:center;background-image: url("../images/estimate/bg-carinfo.png");height: 38.4rem;}
.carinfo-layer .text-box h3, .carinfo2-layer .text-box h3 {display:flex;align-items:center;font-size: 2.6rem;height:11.4rem;color:#000000;font-weight: 400;letter-spacing: -0.08em;line-height: 1.769230769230769em;}

/* .carinfo-layer .text-box p, .carinfo2-layer .text-box p {height:calc(100vh - 62rem);overflow-y:scroll;font-size: 2.4rem;color:#000000;font-weight: 300;letter-spacing: -0.08em;line-height: 1.769230769230769em;} */
.carinfo-layer, .carinfo2-layer {height:calc(100vh - 62rem); overflow-y:scroll; font-size: 2.4rem; color:#000000; font-weight: 300; letter-spacing: -0.08em; line-height: 1.769230769230769em; }

/* body.carinfo-open {height: 100vh;overflow-y: hidden;} */
.carinfo2-open {height: 100vh; overflow-y: hidden;}

body.carinfo-open .carinfo-layer, body.carinfo2-open .carinfo2-layer {left: 0;}
.carinfo2-layer .img-box .gallery-img{
    border: 1px solid purple;
    padding: 1rem;
}
.carinfo-layer .img-box .container{
    margin: 0;
}


/* review-slider */
.flexbox {
    display: flex;
}

.best-slider-wrapper {
    margin-top: 5rem;
    position: relative;
    height: 350px;
    margin-bottom: 10rem;
}

#best-slider {
    background: #f7f7f7;
    height: 100%;
}
#best-slider .swiper-slide {
    padding: 4rem;
    background: #f7f7f7;
    display: flex;
    position: relative;
}
#best-slider .car-back {
        background: #d6d6d6;
        width: 18rem;
        height: 10rem;
        position: absolute;
        z-index: 1;
        top: 11rem;
        right: 0;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
}

#best-slider .swiper-slide > img {
    height: 90%;
    padding-right: 3rem;
}

#best-slider .best-box {
    width: 100%;
    z-index: 3;
    font-size: 1.5rem;
    height: 40rem;
    margin-top: 2rem;
}

#best-slider .best-box .star-point{display: inline-flex; margin: 1rem 0;}
#best-slider .best-box .star-point > i{background-image: url("../images/estimate/icon-star-off.png");width: 2.9rem;height: 2.6rem;background-size: cover;}
#best-slider .best-box .star-point > i.on{background-image: url("../images/estimate/icon-star-on.png");}

#best-slider .swiper-slide span {
    font-size: 2.1rem;
    color: #662eff;
    border: 1px solid #662eff;
    padding: 0.8rem 2rem;
    border-radius: 30px;
}

#best-slider .car-info {
    margin-bottom: 5rem;
}
#best-slider .car-info div {
    width: 100%;
}

#best-slider .car-info .car-name {
    margin: 3rem 0 0;
    font-size: 3rem;
    color: #000;
    font-weight: 900;
    width: 90%;
}
#best-slider .car-info .car-img {
    width: 100%;
    max-width: 30rem;
}

#best-slider .review-text {
    margin: -2rem 0 0;
    font-size: 2.2rem;
    line-height: 3rem;
}

.best-pagination {
    position: absolute;
    top: -10rem;
    right: 0;
    padding: 3.5rem 2.5rem 0 1rem;
}
.best-pagination span {
    width: 4.3rem;
    height: 3.6rem;
    margin: 0 0.2rem;
    background-size: cover;
}
.best-pagination span:nth-child(1) {
    background-image: url("../images/review/best_paging01_off.png");
}
.best-pagination span:nth-child(2) {
    background-image: url("../images/review/best_paging02_off.png");
}
.best-pagination span:nth-child(3) {
    background-image: url("../images/review/best_paging03_off.png");
}
.best-pagination span.swiper-pagination-bullet:active,
.best-pagination span.swiper-pagination-bullet:focus {
    outline: none;
}
.best-pagination span.swiper-pagination-bullet-active:nth-child(1) {
    background-image: url("../images/review/best_paging01_on.png");
}
.best-pagination span.swiper-pagination-bullet-active:nth-child(2) {
    background-image: url("../images/review/best_paging02_on.png");
}
.best-pagination span.swiper-pagination-bullet-active:nth-child(3) {
    background-image: url("../images/review/best_paging03_on.png");
}




@keyframes left_flow { from {transform: translate(0%,-50%)} to {transform: translate(calc((100% + 75rem) * -1),-50%)} }


@media only screen and (max-width: 750px) {
    html{font-size: 1.333333333333333vw;}
}

@-webkit-keyframes scale {
    0% { -webkit-transform:translateX(0); }
    100% { -webkit-transform:translateX(1.1); }
    /* 100% { -webkit-transform:translateX(0); } */
}
@-moz-keyframes scale {
    0% { -moz-transform:translateX(0); }
    100% { -moz-transform:translateX(1.1); }
    /* 100% { -moz-transform:translateX(0); } */
}
@-o-keyframes scale {
    0% { -o-transform:translateX(0); }
    100% { -o-transform:translateX(1.1); }
    /* 100% { -o-transform:translateX(0); } */
}
@keyframes scale {
    0% { -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0); }
    100% { -webkit-transform:translateX(1.1); -moz-transform:translateX(1.1); -o-transform:translateX(1.1); transform:scale(1.1); }
    /* 100% { -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); transform:scale(1.1); } */
}

@keyframes border {
    0% {border: 1px solid rgba(150,118,255,1);}
    25% {border: 1px solid rgba(150,118,255,.5);}
    50% {border: 1px solid rgba(150,118,255,.1);}
    75% {border: 1px solid rgba(150,118,255,.5);}
    100% {border: 1px solid rgba(150,118,255,1);}
}

    @-webkit-keyframes border {
        0% {border: 1px solid rgba(150,118,255,1);}
        25% {border: 1px solid rgba(150,118,255,.5);}
        50% {border: 1px solid rgba(150,118,255,.1);}
        75% {border: 1px solid rgba(150,118,255,.5);}
        100% {border: 1px solid rgba(150,118,255,1);}
    }
    @-moz-keyframes border {
        0% {border: 1px solid rgba(150,118,255,1);}
        25% {border: 1px solid rgba(150,118,255,.5);}
        50% {border: 1px solid rgba(150,118,255,.1);}
        75% {border: 1px solid rgba(150,118,255,.5);}
        100% {border: 1px solid rgba(150,118,255,1);}
    }
    @-o-keyframes border {
        0% {border: 1px solid rgba(150,118,255,1);}
        25% {border: 1px solid rgba(150,118,255,.5);}
        50% {border: 1px solid rgba(150,118,255,.1);}
        75% {border: 1px solid rgba(150,118,255,.5);}
        100% {border: 1px solid rgba(150,118,255,1);}
    }
