@font-face {
  font-family: 'Nobel';
  font-weight: normal;
  src: url('../font/Nobel-Book.ttf') format('truetype');
  }
@font-face {
  font-family: 'AppleSDGothicNeoR';
  font-weight: normal;
  src: url('../font/AppleSDGothicNeoR.ttf') format('truetype');
  }
a{
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  z-index: -1;
}
body{
  font-family: 'Nobel', 'AppleSDGothicNeoR', sans-serif;
  overflow-x: hidden;
}
header{
  position: relative;
  padding: 20px 50px;
  height: 75px;
  letter-spacing: 0.02rem;
  box-sizing: border-box;
  z-index: 1;
}
h1{
  margin: 2px 0;
}
nav{
  position: absolute;
  left: 50%; top: 0px;
  min-width: 701px;
  transform: translateX(-50%);
  text-align: center;
}
nav > ul{
  float: left;
}
nav ul{
  font-size: 0;
}
nav li{
  display: inline-block;
}
nav > ul > li > a
{
  padding: 0 10px;
  line-height: 75px;
}
nav:hover > ul > li{
  color: #b5b5b5;
}
nav > ul > li:hover{
  color: #000;
}
.gnb{
  font-weight: bold;
}
.gnb > li{
  font-size: 15px;
}
.gnb > li ~ li{
  padding-left: 10px;
}
.gnb > li:last-child{
  margin-right: 14px;
}
.drop-menu{
  display: none;
  position: absolute;
  top: 55px; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  padding-top: 37px;
  background: #fff;
  font-weight: normal;
}
nav > ul > li:hover .drop-menu{
  display: block;
}
.drop-menu img{
  width: 240px;
}
.drop-menu ul{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.drop-menu ul::after{
  content: "";
  display: block;
  clear: both;
}
.drop-menu .drop-main{
  width: 1020px;
  margin: 0 auto;
  padding-bottom: 18px;
}
.drop-menu .drop-main dl{
  padding: 10px 0 32px;
}
.drop-menu .drop-main dt{
  font-size: 13px;
}
.drop-menu .drop-main dd{
  padding-top: 11px;
  font-size: 10px;
}
.drop-menu .drop-main p{
  padding: 19px 0 59px;
  font-size: 16px;
}
.drop-menu .drop-main dd span ~ span::before{
  content: "";
  display: inline-block;
  width: 1px; height: 12px;
  margin: 0 9px;
  background: #6b7075;
  vertical-align: middle;
}
.drop-menu .drop-sub{
  clear: both;
}
.drop-menu .drop-sub > h2{
  position: relative;
  font-weight: bold;
}
.drop-menu .drop-sub > h2::before{
  content: "";
  display: inline-block;
  position: absolute;
  left: 24px; top: 8px;
  height: 1px; width: calc(50% - 134px);
  background: #000;
}
.drop-menu .drop-sub > h2::after{
  content: "";
  display: inline-block;
  position: absolute;
  right: 24px; top: 8px;
  height: 1px; width: calc(50% - 134px);
  background: #000;
}
.drop-menu .drop-sub ul{
  padding-top: 27px;
}
.drop-menu .drop-sub ul p{
  padding: 18px 0 66px 22px;
  font-size: 12px;
  text-align: left;
}
.sub-menu > li{
  font-size: 13px;
  line-height: 15px;
}
.sub-menu > li:first-child:before{
  content: "";
  display: inline-block;
  width: 1px; height: 33px;
  margin: -2px 13px 0 0;
  background: #95989a;
  vertical-align: middle;
}
.sub-menu .drop-menu{
  padding-top: 25px;
}
.sub-menu .drop-main{
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 1160px;
  padding-bottom: 58px;
}
.sub-menu .drop-main div{
  width: 500px;
  font-size: 15px;
  text-align: left;
  line-height: 24px;
}
.sub-menu .drop-main div:first-child{
  text-align: right;
}
.sub-menu .drop-main div:first-child::after{
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%; top: 9px;
  transform: translateX(-50%);
  height: 1px; width: 100px;
  background: #808080;
}
.sub-menu .drop-main h2{
  font-size: 24px;
  font-weight: bold;
}
.sub-menu .drop-main em{
  font-size: 13px;
}
.sub-menu .drop-main p{
  padding: 0; margin-top: -4px;
  font-size: 15px;
}
.sub-menu .drop-main a{
  border: 2px solid #000;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 8px 17px;
  font-size: 12px;
  font-weight: bold;
}
.sub-menu .drop-main a:after{
  content: "";
  display: inline-block;
  width: 15px; height: 15px;
  margin-left: 10px;
  background: url(../images/icon/icon_outlink.svg) no-repeat center center/15px auto;
  vertical-align: -3px;
}
main,
footer{
  width: calc(100% - 100px);
  word-break: keep-all
}
main{
  position: relative;
}
.slider{
  width: 100%; height: 680px;
  background: url(../images/kv_pc__1.jpg) no-repeat center center/cover;
}
.keyword-menu{
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 62px 0 38px;
}
.keyword-menu a{
  padding: 10px 12px;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  background: #fafafa;
  font-size: 12px;
}
.keyword-menu a:hover{
  border: 1px solid transparent;
  background: #000;
  color: #fff;
  transition: all .3s;
}
main .keyword-menu li:first-child a{
  font-weight: bold;
}
.banner-main{
  display: flex;
  justify-content: space-between;
}
.banner-main li{
  width: calc((100% - (1.5% * 2)) / 3);
}
.banner-main li a{
  width: 100%;
}
.banner-main div{
  height: 161px;
  overflow: hidden;
}
.banner-main img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}
.banner-main li:hover img{
  transform: scale(1.05);
}
.banner-main dl{
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 150px;
}
.banner-main dt,
.banner-main dd{
  width: 50%;
  box-sizing: border-box;
}
.banner-main dt{
  padding: 30px 0 0 28px;
  font-size: 25px;
}
.banner-main dt::after{
  content: "";
  display: inline-block;
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 150px;
  background: #b3b3b3;
  transition: all .3s;
}
.banner-main li:hover dt::after{
  height: 120px;
}
.banner-main dd{
  padding: 26px 25px 0;
  font-size: 12px;
  line-height: 22px;
}
.banner-img{
  padding: 115px 0 68px;
  font-size: 0;
}
.banner-img img{
  width: 100%; height: 342px; 
  object-fit: cover;
}
.banner-list ul{
  display: flex;
  justify-content: center;
  gap: 1.75%;
  padding-bottom: 120px;
}
.banner-list li{
  width: calc((100% - 1.75% * 3) / 4);
}
.banner-list li.row_2{
  float: left;
  height: 657px;
}
.banner-list li a{
  width: 100%;
}
.banner-list div{
  height: 161px;
  overflow: hidden;
}
.banner-list img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}
.banner-list li:hover img{
  transform: scale(1.05);
}
.banner-list dl{
  padding: 27px 35px 0;
}
.banner-list dt{
  font-size: 22px;
  padding-bottom: 18px;
}
.banner-list dd{
  font-size: 12px;
  line-height: 21px;
}
.banner-list .side-banner{
  position: absolute;
  width: calc((100% - 1.75% * 3) / 4);
  height: 657px;
  box-sizing: border-box;
  transition: all 0.3s;
}
.banner-list .side-banner a{
  width: 100%; height: 100%;
}
.banner-list div:hover img{
  transform: scale(1.05);
}
.banner-list .side-banner.masters{
  left: 0;
}
.banner-list .side-banner.award{
  right: 0;
}
.banner-list .side-banner p{
  position: absolute;
  top: 30px; left: 30px;
  font-size: 40px;
  line-height: 50px;
}
.banner-list .side-banner p::after{
  content: "";
  display: block;
  width: 100%; height: 1px;
  margin-top: 25px;
  background: #000;
}

.footer-wrap{
  position: relative;
  width: calc(100% - 80px);
  height: 500px;
  padding-top: 53px;
  margin: 0 auto;
  border-top: 1px solid #95989a;
  box-sizing: border-box;
  font-size: 12px;
}
.footer-wrap h2{
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.45px;
}
.footer-wrap .keyword-menu{
  justify-content: start;
  padding: 25px 0 30px;
}
.footer-wrap ul::after{
  content: "";
  display: block;
  clear: both;
}
.footer-wrap li{
  float: left;
}
.footer-wrap .sns li ~ li{
  padding-left: 16px;
}
.footer-wrap .sns a{
  width: 46px; height: 46px;
  border: 1px solid #d4d4d4;
  border-radius: 50%;
}
.footer-wrap .sns li:first-child a{
  background: url(../images/icon/icon_facebook.svg) no-repeat center center/auto 18px;
}
.footer-wrap .sns li:first-child a:hover{
  border: 1px solid transparent;
  background: #000 url(../images/icon/icon_facebook_w.svg) no-repeat center center/auto 18px;
}
.footer-wrap .sns li:nth-child(2) a{
  background: url(../images/icon/icon_instagram.svg) no-repeat center center/auto 18px;
}
.footer-wrap .sns li:nth-child(2) a:hover{
  border: 1px solid transparent;
  background: #000 url(../images/icon/icon_instagram_w.svg) no-repeat center center/auto 18px;
}
.footer-wrap .sns li:nth-child(3) a{
  background: url(../images/icon/icon_youtube.svg) no-repeat center center/auto 14px;
}
.footer-wrap .sns li:nth-child(3) a:hover{
  border: 1px solid transparent;
  background: #000 url(../images/icon/icon_youtube_w.svg) no-repeat center center/auto 14px;
}
.footer-wrap .sns li:nth-child(4) a{
  background: url(../images/icon/icon_naver_post.svg) no-repeat center center/auto 24px;
}
.footer-wrap .sns li:nth-child(4) a:hover{
  border: 1px solid transparent;
  background: #000 url(../images/icon/icon_naver_post_w.svg) no-repeat center center/auto 24px;
}
.footer-wrap .link{
  padding: 20px 0 10px;
  letter-spacing: .8px;
}
.footer-wrap .link li ~ li{
  padding-left: 21px;
}
.footer-wrap .link li a::after{
  content: "";
  display: block;
  width: 0%; height: 1px;
  margin-top: 1px;
  background: #000;
  transition: all .2s;
}
.footer-wrap .link li a:hover::after{
  width: 100%;
}
.footer-wrap dt{
  padding: 17px 0 10px;
  font-weight: bold;
}
.footer-wrap .copy{
  padding-top: 26px;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .8px;
}
.footer-wrap .contact{
  position: absolute;
  right: 0; top: 53px;
  width: 120px; height: 73px;
  border: 1px solid #95989a;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  line-height: 71px;
}
.footer-wrap .contact:hover{
  color: #fff;
  border: 1px solid transparent;
  background: #000;
}
.quick-menu-wrap{
  position: relative;
}
.quick-menu{
  position: absolute;
  top: 0; right: 0px;
  width: 100px; height: 100%;
  background: #000;
  text-align: center;
  color: #fff;
}
.quick-menu div{
  position: sticky;
  top: 0;
}
.quick-menu li a{
  width: 100px; height: 94px;
  padding-top: 30px;
  border-bottom: 1px solid #2f2f2f;
  box-sizing: border-box;
  font-size: 12px;
}
.quick-menu li a::before{
  content: "";
  display: block;
  width: 29px; height: 24px;
  margin: 0 auto 12px;
}
.quick-menu li:first-child a::before{
  background: url(../images/icon/icon_quick_benefit.svg) no-repeat center center/23px auto;
}
.quick-menu li:nth-child(2) a::before{
  background: url(../images/icon/icon_quick_estn.svg) no-repeat center center/contain;
}
.quick-menu li:nth-child(3) a::before{
  background: url(../images/icon/icon_quick_drive.svg) no-repeat center center/21px auto;
}
.quick-menu li:nth-child(4) a::before{
  background: url(../images/icon/icon_quick_showroom.svg) no-repeat center center/17px auto;
}
.quick-menu li:nth-child(5) a::before{
  background: url(../images/icon/icon_lexus_lounge.svg) no-repeat center center/22px auto;
}
.quick-menu li:nth-child(6) a::before{
  background: url(../images/icon/icon_quick_service.svg) no-repeat center center/24px auto;
}
.quick-menu li:nth-child(7) a::before{
  background: url(../images/icon/icon_quick_connect_to.svg) no-repeat center center/23px auto;
}
.quick-menu li a:hover{
  opacity: .6;
}
.quick-menu p{
  position: fixed;
  bottom: 42px;

}
.quick-menu p a{
  width: 100px;
  font-size: 10px;
}
.quick-menu p a::before{
  content: "";
  display: block;
  width: 1px; height: 29px;
  margin: 0 auto 13px;
  background: #808080;
  transition: all .3s;
}
.quick-menu p a:hover::before{
  height: 50px;
  background: #fff;
}