.main-banner {font-family: Helvetica Neue, Helvetica, Inter, Roboto, Arial; margin: 20px 0;}
.main-banner .center {display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: center;}

.main-banner .left-box h1 {font-size: 68px; font-family: Titan One, Helvetica Neue, Helvetica; font-weight: bold; margin: 20px 0;}
.main-banner .left-box h1 b { color: var(--text-blue); }
.main-banner .left-box .description { width: 70%; font-size: 15px; margin: 25px 0; position: relative; display: block;}
.main-banner .left-box .buttons {position: relative; display: flex; width: 100%; margin: 30px 0; gap: 20px; align-items: center;}
.main-banner .left-box .buttons .button { position: relative; height: 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 14px 20px; color: var(--text); background-color: transparent; transition: background-color .1s ease-out; }

.main-banner .left-box .buttons .button.call,
.main-banner .left-box .buttons .button.chat { outline: 3px solid var(--rgba-1); }
.main-banner .left-box .buttons .button.main:before,
.main-banner .left-box .buttons .button.call:before,
.main-banner .left-box .buttons .button.chat:before { position: relative; float: left; margin-right: 8px; width: 16px; height: 16px; font-size: 15px; font-family: siteicons; }
.main-banner .left-box .buttons .button.call:before {content: '\0071';}
.main-banner .left-box .buttons .button.chat:before {content: '\0072';}
.main-banner .left-box .buttons .button.main:before {content: '\0070';}

.main-banner .left-box .buttons .button.main { font-weight: bold; outline: 3px solid var(--text); padding: 14px 24px; font-size: 16px; text-decoration: none; white-space: nowrap;}
.main-banner .left-box .buttons .button.main:hover { background-color: var(--bg-blue); outline-color: var(--bg-blue); color: white; }
.main-banner .left-box .buttons .button .mark {position: absolute; top: -8px; right: -8px; padding: 3px 9px; background-color: var(--text); color: var(--text-opposite); font-size: 12px; font-style: normal; font-weight: bold; border-radius: 5px;}
.main-banner .left-box .buttons .button:hover { color: var(--text-blue); outline-color: var(--text-blue); }
.main-banner .left-box .buttons .flex { display: flex; gap: 14px; }

.main-banner .right-box { position: relative; width: 100%; height: 514px; min-height: 420px; }
.main-banner .right-box:after { content: ''; position: absolute; width: 364px; height: 100%; right: 0; top: 0; z-index: -2; border-radius: 24px; box-shadow: 36px 32px 200px 0px rgb(55 151 243); }

.main-banner .right-box .title {position: absolute; width: 316px; top: 24px; right: 24px; text-align: center; font-size: 30px; font-weight: bold; z-index: 2; color: var(--bg-opposite);}
.main-banner .right-box .images-wrap {position: absolute; top: 0; right: 0; width: 100%; height: 100%; overflow: hidden;}
.main-banner .right-box .images-wrap .palm-image { position: absolute; top: 14px; right: -50px; width: 288px; height: auto; z-index: 1; opacity: .3; }
.main-banner .right-box .images-wrap .car-image {position: absolute; bottom: 1px; right: -30px; width: 530px; height: auto; z-index: 2; }

.main-banner .right-box .images-wrap:after { content: ''; position: absolute; width: 364px; height: 100%; right: 0; top: 0; background-color: var(--bg-blue); z-index: -1; border-radius: 24px; }
.main-banner .right-box .buttons {position: absolute; font-size: 16px; bottom: 24px; right: 24px; width: 316px; display: flex; gap: 10px; z-index: 2;}
.main-banner .right-box .buttons .button { position: relative; display: flex; gap: 10px; width: 100%; align-items: center; justify-content: center; padding: 16px 30px; height: 20px; border-radius: 8px; background-color: rgba(0,0,0,.7); color: var(--text-opposite); font-weight: bold;-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); cursor: pointer; text-align: center; transition: background-color .1s ease-out; cursor: pointer; }
.main-banner .right-box .buttons .button.calculator .ico{ font-family: siteicons; font-size: 22px; font-style: normal; font-weight: normal; }
.main-banner .right-box .buttons .button.calculator .ico:before { content: '\0070' }
.main-banner .right-box .buttons .button:hover { background-color: black; }


/* banner appraisal, calculator  */
/* #001f3b */
.main-banner .banner-appraisal { position: absolute; width: 364px; right: 0; top: 55px; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.main-banner .banner-appraisal input { width: calc(100% - 40px); padding: 18px 20px; border: none; outline: none; border-radius: 6px; font-size: 16px; font-weight: bold; background-color: rgba(110,185,255,.5); color: #001f3b; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.main-banner .banner-appraisal input::placeholder { color: var(--text-gray); }
.main-banner .banner-appraisal .flex { position: relative; width: 100%; display: flex; gap: 10px; }
.main-banner .banner-appraisal .item { position: relative; display: flex; width: calc(100% - 64px); flex-direction: column; padding: 10px 12px 10px 52px; border-radius: 6px; background-color: rgba(110,185,255,.5); color: #001f3b; cursor: pointer; user-select: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.main-banner .banner-appraisal .item.active { z-index: 3; }
.main-banner .banner-appraisal .item span { font-size: 13px; color: #001f3b; }
.main-banner .banner-appraisal .item b { font-size: 16px; font-weight: 600; color: var(--text); }
.main-banner .banner-appraisal .item.active:after { transform: rotate(180deg); }
.main-banner .banner-appraisal .item:before {position: absolute; font-family: siteicons; font-size: 22px; left: 17px; top: 14px; color: #001f3b;}
.main-banner .banner-appraisal .item.list:after { content: '\0043'; position: absolute; font-family: siteicons; font-size: 14px; right: 12px; top: 22px; color: #001f3b; transition: transform .1s ease-out; }
.main-banner .banner-appraisal .item.item-make:before { content: '\0057'; }
.main-banner .banner-appraisal .item.item-model:before { content: '\006a'; }
.main-banner .banner-appraisal .item.item-location:before { content: '\0059'; }
.main-banner .banner-appraisal .item.item-year:before { content: '\0058'; }
.main-banner .banner-appraisal .item ul { display: none; }
.main-banner .banner-appraisal .item.active ul { display: flex; position: absolute; margin: -4px 0 0 -47px; width: calc(100% - 20px); max-height: 300px; padding: 0; background-color: var(--bg-gray); white-space: nowrap; flex-direction: column; border: 5px solid var(--bg-gray); border-radius: 8px; box-shadow: 0 35px 60px -10px rgba(0,0,0,0.7); overflow: hidden; overflow-y: auto; z-index: 1; }
.main-banner .banner-appraisal .item.active ul::-webkit-scrollbar {width: 10px; height: 10px;}
.main-banner .banner-appraisal .item.active ul::-webkit-scrollbar-track-piece {background-color: var(--bg-gray);}
.main-banner .banner-appraisal .item.active ul::-webkit-scrollbar-thumb {height: 12px; background: var(--bg-blue); border-radius: 5px;}
.main-banner .banner-appraisal .item p {font-size: 14px; padding: 12px 20px; margin: 0; color: var(--text); cursor: pointer;}
.main-banner .banner-appraisal .item p:hover { background-color: var(--rgba-1); }
.main-banner .banner-appraisal .item.disable {background-color: var(--bg-gray);}
.main-banner .banner-appraisal .item.disable b { color: var(--text-gray); }


/* dark mode */
[theme-dark] .main-banner .right-box:after { box-shadow: 36px 32px 200px 0px rgb(6 58 107); }
[theme-dark] .main-banner .right-box .images-wrap .car-image {filter: brightness(.75);}
[theme-dark] .main-banner .right-box .images-wrap .palm-image { opacity: 1; }
[theme-dark] .main-banner .banner-appraisal input, 
[theme-dark] .main-banner .banner-appraisal .item { background-color: rgba(23,42,62,.5); color: white; }
[theme-dark] .main-banner .banner-appraisal .item b { color: white; }
[theme-dark] .main-banner .banner-appraisal .item span,
[theme-dark] .main-banner .banner-appraisal .item:before,
[theme-dark] .main-banner .banner-appraisal .item.list:after { color: var(--text); }
[theme-dark] .main-banner .right-box .title { color: var(--text); }
[theme-dark] .main-banner .right-box .buttons .button { background-color: rgba(205,204,188,.5); }
[theme-dark] .main-banner .right-box .buttons .button:hover { background-color: var(--bg-blue); color: var(--bg-opposite); }


@media screen and (max-width: 1150px) {
.main-banner .center { gap: 0; grid-template-columns: auto 520px; }
}

@media screen and (max-width: 960px) {
.main-banner .left-box h1 {font-size: 52px; line-height: 62px; }
.main-banner .left-box .buttons { width: 300px; flex-direction: column; align-items: flex-start }
.main-banner .left-box .buttons .flex { width: 100%; }
.main-banner .left-box .buttons .button { flex: 1; width: 100%; }
.main-banner .left-box .buttons .button.main { box-sizing: border-box; }
}

@media screen and (max-width: 870px) {
.main-banner .center { grid-template-columns: auto 420px; }
.main-banner .right-box { height: 414px; }
.main-banner .right-box .images-wrap .car-image { width: 480px; }
.main-banner .left-box .description { width: 100%; }
}

@media screen and (max-width: 780px) {
.main-banner .center { grid-template-columns: auto 340px; }
.main-banner .right-box { height: 414px; }
.main-banner .right-box .images-wrap:after {width: 330px;}
.main-banner .banner-appraisal { width: 330px; }
.main-banner .right-box:after { width: 330px; }
.main-banner .right-box .images-wrap .car-image { width: 380px; right: -30px; }
.main-banner .right-box .buttons { width: 280px; }
.main-banner .right-box .title { width: 265px; font-size: 24px; }
.main-banner .right-box .images-wrap .rx-sticker { bottom: 185px; left: 10px; }
}

@media screen and (max-width: 720px) {
.main-banner .center { grid-template-columns: auto 300px; }
.main-banner .right-box { height: 379px; }
.main-banner .banner-appraisal { width: 290px; }
.main-banner .right-box:after { width: 290px; }
.main-banner .right-box .images-wrap:after {width: 290px;}
.main-banner .right-box .images-wrap .car-image { width: 340px; }
.main-banner .right-box .buttons { width: 240px; }
.main-banner .right-box .images-wrap .rx-sticker { bottom: 120px; left: -10px; }
}

@media screen and (max-width: 690px) {
.main-banner .left-box h1 {font-size: 42px; line-height: 52px; }
.main-banner .left-box .buttons { flex-direction: column; }
.main-banner .right-box .images-wrap .rx-sticker { bottom: 96px; left: 0; }
.main-banner .right-box .images-wrap .rx-sticker .ico { width: 46px; }
.main-banner .left-box .buttons { width: 100%; }
}

@media screen and (max-width: 560px) {
.main-banner { margin: 0 0 20px 0; }
.main-banner .center { display: flex; flex-direction: column; }
.main-banner .left-box h1 { text-align: center; }

.main-banner .right-box { height: calc(65vw + 60px); }
.main-banner .banner-appraisal,
.main-banner .right-box:after,
.main-banner .right-box .images-wrap,
.main-banner .right-box .images-wrap:after { width: 100%; }
.main-banner .right-box .title,
.main-banner .right-box .buttons { width: calc(100% - 48px); }
.main-banner .right-box .images-wrap .car-image { width: 94%; bottom: -5px; right: 3%; }
.main-banner .right-box .images-wrap .rx-sticker { bottom: 128px;}
}

@media screen and (max-width: 380px) {
.main-banner .center { width: 100%; padding: 0 }
.main-banner .left-box { padding: 0 20px; }
.main-banner .left-box .buttons { flex-direction: column; }
.main-banner .banner-appraisal,
.main-banner .right-box:after,
.main-banner .right-box .images-wrap:after { border-radius: 0; }
}