@charset "UTF-8";

.header {
  background: transparent;
}

.kv {
  margin: 0 auto;
  max-width: 1920px;
  height: 950px;
  background-image: url(../img/shipment/bg_kv.png);
  /* background-size: 100% 950px; */
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-position: center;
}

.kv .inner {
  width: 1280px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.kv .viewBox {
  display: flex;
  align-items: center;
  height: auto;
}

.kv .viewBox .txtBox {
  margin-top: 125px;
}

.kv .viewBox .txtBox .txt1 {
  color: var(--cf, #fff);
  font-family: Pretendard;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 90px;
  /* 150% */
}

.kv .viewBox .txtBox .txt2 {
  color: var(--cf, #fff);
  font-family: Pretendard;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 20px;
}

section.shipment {
  padding-top: 120px;
  background: white;
}

section.shipment .inner {}

section.shipment .tit1 {
  color: var(--title-, #222);
  text-align: center;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px;
}

section.shipment .tit2 {
  color: var(--title-, #222);
  text-align: center;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}

.preorder_sec {
  margin-top: 30px;
}

.preorder_sec .preorder_title p.txt1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 69.5px;
  letter-spacing: -0.02em;
}

.preorder_sec .preorder_title p.txt2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: -0.02em;
  margin-top: 5px;
}

.preorder_sec .preorder_title span {
  font-family: Noto Sans KR;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: #aaaaaa;
}

.preorder_sec .brand_list {
  display: flex;
  justify-content: center;
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
  padding-bottom: 30px;
  border-bottom: 1px solid #dedede;
}

.preorder_sec .brand_list .brand_item {
  cursor: pointer;
  width: 100px;
  height: 100px;
  border: 1px solid transparent;
}

.preorder_sec .brand_item .logo_box {
  background: white;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
}

.preorder_sec .brand_list .brand_item .logo_box img {
  width: 60px;
}

.preorder_sec .brand_list .brand_item .logo_box p.txt1 {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.preorder_sec .brand_list .brand_item p.txt2 {
  text-align: center;
  transition: 0.5s;
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875;
}

.preorder_sec .brand_list .brand_item.on {
  border-color: #e40321;
}

.preorder_sec .brand_list .brand_item.hybrid_item.on {
  border-color: #03c75a;
}

.preorder_sec .brand_list .brand_item.on p {
  font-weight: 700;
}

.preorder_sec .model-list {
  background: white;
  margin-top: 30px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 45px 20px;
  padding-bottom: 135px;
}

.preorder_sec .model-list .model-item {
  background: #f5f5f3;
  position: relative;
  padding: 30px 25px;
  cursor: pointer;
  transition: 0.3s;
  height: 150px;
  box-sizing: border-box;
}

.preorder_sec .model-list .model-item p.brandNm {
  color: #777777;
  transition: 0.3s;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.44;
}

.preorder_sec .model-list .model-item p.modelNm {
  transition: 0.3s;
  color: var(--title-, #222);
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.44;
}

.preorder_sec .model-list .model-item p.modelNm span.orderCnt {
  color: #e40321;
  font-weight: bold;
  transition: 0.3s;
}

.preorder_sec .model-list .model-item img.carImg {
  height: 87px;
  padding-top: 3px;
  /* position: absolute; */
  /* bottom: -30px; */
  /* left: 50%; */
  /* transform: translateX(-50%); */
}

.preorder_sec .model-list .model-item:hover {
  background: #e40321;
}

.preorder_sec .model-list .model-item:hover p.brandNm {
  color: white;
}

.preorder_sec .model-list .model-item:hover p.modelNm {
  color: white;
}

.preorder_sec .model-list .model-item:hover p.modelNm span.orderCnt {
  color: white;
}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"] {}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"] p.brandNm {}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"] p.modelNm {}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"] p.modelNm span.orderCnt {
  color: #03c75a;
}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"] img.carImg {}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover {
  background: #03c75a;
}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover p.brandNm {
  color: white;
}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover p.modelNm {
  color: white;
}

.preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover p.modelNm span.orderCnt {
  color: white;
}

.preorder_sec .preorder_current {
  margin-top: 30px;
  display: flex;
  gap: 32.59px;
  align-items: baseline;
}

.preorder_sec .preorder_current p.current_phrase {
  color: #222;
  font-family: Pretendard;
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.preorder_sec .preorder_current p.current_phrase span {
  color: #e40321;
}

.preorder_sec .preorder_current p.current_phrase span[data-fueltype="하이브리드"] {
  color: #03c75a;
}

.preorder_sec .preorder_current p.current_time {
  font-size: 15px;
  font-weight: 400;
  line-height: 18.29px;
  color: #888888;
}


/*  */

.routeBox {
  background: transparent;
}

.routeBox a {
  color: #AAA;
}

.routeBox a.current {
  color: white;
}

.header .inner .menuBottom .bgLayer {
  background: transparent !important;
}

.container.white .header .inner .menuBottom .bgLayer {
  background: #fff !important;
}

.container {
  background: #101010;
}

/* ========================================= tablet =========================================*/
/* ========================================= tablet =========================================*/
/* ========================================= tablet =========================================*/

@media (max-width:1320px) and (min-width: 721px) {
  .header {
    background: transparent;
  }

  .kv {
    margin: 0 auto;
    max-width: 145.45vw;
    height: 71.97vw;
    background-image: url(../img/shipment/bg_kv.png);
    background-size: 145% 71.97vw;
    background-repeat: no-repeat;
    box-sizing: border-box;
  }

  .kv .inner {
    width: 96.97vw;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .kv .viewBox {
    display: flex;
    align-items: center;
    height: auto;
  }

  .kv .viewBox .txtBox {
    margin-top: 9.47vw;
  }

  .kv .viewBox .txtBox .txt1 {
    color: var(--cf, #fff);
    font-family: Pretendard;
    font-size: 4.55vw;
    font-style: normal;
    font-weight: 700;
    line-height: 6.82vw;
    /* 150% */
  }

  .kv .viewBox .txtBox .txt2 {
    color: var(--cf, #fff);
    font-family: Pretendard;
    font-size: 1.97vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 1.52vw;
  }

  section.shipment {
    padding-top: 9.09vw;
    background: white;
  }

  section.shipment .inner {}

  section.shipment .tit1 {
    color: var(--title-, #222);
    text-align: center;
    font-family: Pretendard;
    font-size: 3.03vw;
    font-style: normal;
    font-weight: 700;
    line-height: 4.55vw;
  }

  section.shipment .tit2 {
    color: var(--title-, #222);
    text-align: center;
    font-family: Pretendard;
    font-size: 1.82vw;
    font-style: normal;
    font-weight: 400;
    line-height: 3.79vw;
  }

  .preorder_sec {
    margin-top: 2.27vw;
  }

  .preorder_sec .preorder_title p.txt1 {
    font-size: 3.64vw;
    font-weight: 700;
    line-height: 5.27vw;
    letter-spacing: -0.02em;
  }

  .preorder_sec .preorder_title p.txt2 {
    font-size: 1.36vw;
    font-weight: 400;
    line-height: 2.18vw;
    letter-spacing: -0.02em;
    margin-top: 0.38vw;
  }

  .preorder_sec .preorder_title span {
    font-family: Noto Sans KR;
    font-size: 1.14vw;
    font-weight: 400;
    line-height: 1.82vw;
    letter-spacing: -0.02em;
    color: #aaaaaa;
  }

  .preorder_sec .brand_list {
    display: flex;
    justify-content: center;
    /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */
    padding-bottom: 2.27vw;
    border-bottom: 0.08vw solid #dedede;
  }

  .preorder_sec .brand_list .brand_item {
    cursor: pointer;
    width: 7.58vw;
    height: 7.58vw;
    border: 0.08vw solid transparent;
  }

  .preorder_sec .brand_item .logo_box {
    background: white;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4.55vw;
  }

  .preorder_sec .brand_list .brand_item .logo_box img {
    width: 4.55vw;
  }

  .preorder_sec .brand_list .brand_item .logo_box p.txt1 {
    color: #000;
    text-align: center;
    font-family: Pretendard;
    font-size: 1.82vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
  }

  .preorder_sec .brand_list .brand_item p.txt2 {
    text-align: center;
    transition: 0.5s;
    color: #000;
    font-family: Pretendard;
    font-size: 1.21vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875;
  }

  .preorder_sec .brand_list .brand_item.on {
    border-color: #e40321;
  }

  .preorder_sec .brand_list .brand_item.hybrid_item.on {
    border-color: #03c75a;
  }

  .preorder_sec .brand_list .brand_item.on p {
    font-weight: 700;
  }

  .preorder_sec .model-list {
    background: white;
    margin-top: 2.27vw;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 3.41vw 1.52vw;
    padding-bottom: 10.23vw;
  }

  .preorder_sec .model-list .model-item {
    background: #f5f5f3;
    position: relative;
    padding: 2.27vw 1.89vw;
    cursor: pointer;
    transition: 0.3s;
    height: 11.36vw;
    box-sizing: border-box;
  }

  .preorder_sec .model-list .model-item p.brandNm {
    color: #777777;
    transition: 0.3s;
    font-family: Pretendard;
    font-size: 1.36vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.44;
  }

  .preorder_sec .model-list .model-item p.modelNm {
    transition: 0.3s;
    color: var(--title-, #222);
    font-family: Pretendard;
    font-size: 1.36vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1.44;
  }

  .preorder_sec .model-list .model-item p.modelNm span.orderCnt {
    color: #e40321;
    font-weight: bold;
    transition: 0.3s;
  }

  .preorder_sec .model-list .model-item img.carImg {
    height: 6.59vw;
    padding-top: 0.23vw;
    width: auto;
  }

  .preorder_sec .model-list .model-item:hover {
    background: #e40321;
  }

  .preorder_sec .model-list .model-item:hover p.brandNm {
    color: white;
  }

  .preorder_sec .model-list .model-item:hover p.modelNm {
    color: white;
  }

  .preorder_sec .model-list .model-item:hover p.modelNm span.orderCnt {
    color: white;
  }

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"] {}

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"] p.brandNm {}

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"] p.modelNm {}

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"] p.modelNm span.orderCnt {
    color: #03c75a;
  }

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"] img.carImg {}

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover {
    background: #03c75a;
  }

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover p.brandNm {
    color: white;
  }

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover p.modelNm {
    color: white;
  }

  .preorder_sec .model-list .model-item[data-fueltype="하이브리드"]:hover p.modelNm span.orderCnt {
    color: white;
  }

  .preorder_sec .preorder_current {
    margin-top: 2.27vw;
    display: flex;
    gap: 2.47vw;
    align-items: baseline;
  }

  .preorder_sec .preorder_current p.current_phrase {
    color: #222;
    font-family: Pretendard;
    font-size: 1.74vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }

  .preorder_sec .preorder_current p.current_phrase span {
    color: #e40321;
  }

  .preorder_sec .preorder_current p.current_phrase span[data-fueltype="하이브리드"] {
    color: #03c75a;
  }

  .preorder_sec .preorder_current p.current_time {
    font-size: 1.14vw;
    font-weight: 400;
    line-height: 1.39vw;
    color: #888888;
  }

  .routeBox {
    background: transparent;
  }

  .routeBox a {
    color: #AAA;
  }

  .routeBox a.current {
    color: white;
  }

  .header .inner .menuBottom .bgLayer {
    background: transparent !important;
  }

  .container.white .header .inner .menuBottom .bgLayer {
    background: #fff !important;
  }

  .container {
    background: #101010;
  }
}

/* ========================================= mobile =========================================*/
/* ========================================= mobile =========================================*/
/* ========================================= mobile =========================================*/

@media (max-width: 720px) {
  .kv {
    height: 118.06vw;
    background-image: url(../img/shipment/bg_kv_mo.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .kv .inner {
    width: 100%;
  }

  .kv .viewBox .txtBox {
    margin-top: 17.36vw;
    padding: 0 6.94vw;
  }

  .kv .viewBox .txtBox .txt1 {
    font-size: 8.33vw;
    line-height: 12.5vw;
  }

  .kv .viewBox .txtBox .txt2 {
    font-size: 3.61vw;
    margin-top: 2.78vw;
  }

  section.shipment {
    padding-top: 16.67vw;
  }

  section.shipment .tit1 {
    font-size: 8.33vw;
    line-height: 8.33vw;
  }

  section.shipment .tit2 {
    font-size: 4.17vw;
    line-height: 200%;
  }

  .preorder_sec {
    margin: 4.17vw 6.94vw 0;
    padding-top: 4.17vw;
    border-top: 0.14vw solid #DEDEDE;
  }

  .preorder_sec .brand_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-bottom: 4.17vw;
  }

  .preorder_sec .brand_list .brand_item {
    width: auto;
    height: 20.52vw;
    border: 0.21vw solid transparent;
    padding: 2.05vw 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .preorder_sec .brand_list .brand_item .logo_box img {
    height: 8.21vw;
    width: auto;
  }

  .preorder_sec .brand_list .brand_item p.txt2 {
    font-size: 3.28vw;
  }

  .preorder_sec .brand_list .brand_item .logo_box p.txt1 {
    font-size: 4.92vw;
  }

  .preorder_sec .preorder_current p.current_phrase {
    font-size: 3.19vw;
  }

  .preorder_sec .preorder_current {
    margin-top: 4.17vw;
    gap: 4.53vw;
  }

  .preorder_sec .preorder_current p.current_time {
    font-size: 2.08vw;
    line-height: normal;
  }

  .preorder_sec .model-list {
    grid-template-columns: 1fr 1fr;
    margin-top: 4.17vw;
    gap: 13.89vw 2.78vw;
    padding-bottom: 16.67vw;
  }

  .preorder_sec .model-list .model-item {
    padding: 5.17vw 2.65vw;
    box-sizing: border-box;
    height: 25.83vw;
    width: 41.67vw;
  }

  .preorder_sec .model-list .model-item p.brandNm {
    font-size: 3.44vw;
    line-height: 4.48vw;
  }

  .preorder_sec .model-list .model-item p.modelNm {
    font-size: 3.44vw;
    line-height: 4.48vw;
  }

  .preorder_sec .model-list .model-item img.carImg {
    margin-top: 3.45vw;
    width: 31.58vw;
    margin-left: 4.78vw;
    padding: 0;
    height: auto;
  }
}