@charset "UTF-8";

/* --------------------------------------------- 개인정보처리방침 - START --------------------------------------------- */
.page-tit-wrap:not(.scroll-motion) .f-big-t3{top:0; opacity:1;}
.policy-page .policy-select-area{display:flex; align-items: center; justify-content: center; padding:72rem 0; margin-bottom:80rem; width:100%; background:#F8F8F8; border-radius:20rem;}
.policy-page .policy-select-area .form-group {margin-left: 20rem;}
.policy-page .policy-select-area .form-group .form-select{width:max(509rem, 250px);}
.policy-page .policy-select-area .form-group .form-select select{font-family: "InterTight-Medium";}
.policy-page .policy-sec:not(.first, .policy-list){padding-top: 80rem;}
.policy-page .policy-sec.first{margin-bottom:144rem;}
.policy-page .policy-sec .f-title2:has(span){position:relative; padding-left:max(41rem, 30px);}
.policy-page .policy-sec .f-title2 span{position:absolute; top:max(9rem, 5px); left:0; font-family: "InterTight-Bold"; font-size: max(18rem, 16px); line-height: 140%; color: #aaa;}
.policy-page .policy-sec > .f-title2 {margin-bottom: 24rem;}
.policy-page .policy-sec .f-title3 {margin-top:24rem;}
.policy-page .policy-sec .f-body2-r {margin-top:24rem;}
.policy-page .policy-sec .inner-sec {margin-top:56rem;}
.policy-page .policy-sec .f-title2 + .inner-sec {margin-top:0;}
.policy-page .policy-sec .inner-sec .dot-txt{position:relative; margin-top:24rem; padding-left:max(12rem, 10px);}
.policy-page .policy-sec .inner-sec .dot-txt:before{display:block; content:""; position:absolute; top:max(11rem, 10px); left:0; width:4rem; height:4rem; border-radius:1px; background:#2D2926}
.policy-page .policy-sec a{color:#DE4826; text-decoration: underline; text-underline-offset:4px;}
.policy-page .policy-sec .inner-sec .item {display: block;}
.policy-page .policy-sec .inner-sec .item ~ .item {margin-top: 10rem;}
.policy-page .table-sec {margin-top: 32rem;}
.policy-page .table-sec thead th:last-child {border-right: 0;}
.policy-page .table-sec td p + p {margin-top: 14rem;}
.policy-page > *.active{top:0; opacity:1;}

.policy-page .policy-list {padding: 72rem 60rem; border-radius: 20rem; background: #F8F8F8;}
.policy-page .policy-list ul {margin-top: 24rem;}
.policy-page .policy-list ul li ~ li {margin-top: 20rem;}
.policy-page .policy-list ul li a span {display: inline-block; flex-shrink: 0; width: max(32rem, 30px); font-family: "InterTight-Bold";}
.policy-page .policy-list ul li a {display: inline-flex; color: #2D2926; text-decoration: none;}
.policy-page .policy-list ul li a:hover {color: #DE4826;}

@media all and (max-width: 1023px) {
  .policy-page .policy-select-area{display: block; margin-bottom:40rem; padding: 32rem 16rem; border-radius: 16rem;}
  .policy-page .policy-select-area .form-group {margin: 8rem 0 0; gap: 16rem;}
  .policy-page .policy-select-area .form-group .btn-wrap {width: auto;}
  .policy-page .policy-select-area .form-group .form-select {width: 100%;}
  .policy-page .policy-sec.first{margin-bottom:56rem;}
  .policy-page .policy-sec:not(.first, .policy-list){padding-top: 40rem;}
  .policy-page .policy-sec .f-title2:has(span){padding-left:27rem;}
  .policy-page .policy-sec .f-title2 span{position:absolute; top: 4rem;font-family: "InterTight-SemiBold"; font-size: 14rem; line-height: 145%;}
  .policy-page .policy-sec > .f-title2 {margin-bottom: 20rem;}
  .policy-page .policy-sec .f-title3 {margin-top:20rem;}
  .policy-page .policy-sec .f-body2-r {margin-top:20rem;}
  .policy-page .policy-sec .inner-sec {margin-top:40rem;}
  .policy-page .policy-sec .inner-sec .dot-txt{margin-top: 16rem; padding-left: 12rem;}
  .policy-page .policy-sec .inner-sec .dot-txt:before {top: 9rem; border-radius: 1px;}
  .policy-page .policy-sec .inner-sec .item ~ .item {margin-top: 6rem;}
  .policy-page .table-sec {margin-top: 24rem;}
  .policy-page .table-sec .table-box {overflow-x: auto;}
  .policy-page .table-sec .table-box .basic-table {width: 150%;}
  .policy-page .table-sec td p + p {margin-top: 8rem;}

  .policy-page .policy-list {padding: 32rem 16rem; border-radius: 16rem;}
  .policy-page .policy-list ul {margin-top: 20rem;}
  .policy-page .policy-list ul li ~ li {margin-top: 10rem;}
  .policy-page .policy-list ul li a span {width: 30rem;}
}
/* --------------------------------------------- 개인정보처리방침 - END --------------------------------------------- */




/* --------------------------------------------- Where to buy - START --------------------------------------------- */
/* ---- Find a Dealer ---- */
.find-dealer-page{position:relative; padding:20rem; height:940rem;}
.find-dealer-page .dealer-area{display:inline-block; position:relative; left:0; height:100%; z-index:1; transition:left 0.6s ease;}
.find-dealer-page .dealer-srch{margin-bottom:40rem; padding-right:30rem;}
.find-dealer-page .dealer-wrap{display:flex; flex-direction: column; padding:40rem 10rem 40rem 40rem; width:568rem; height:100%; background:#fff; border-radius:16rem 0 16rem 16rem; box-shadow: 0 10rem 16rem 0 rgba(0,0,0,0.1);}
.find-dealer-page .dealer-wrap .srch-btn{width:80rem; height:max(56rem, 40px); background:url("/common/de/images/btn-find-dealer-search.svg") no-repeat center center/48rem auto #fff; border:1px solid #2D2926; border-radius:4rem;}
.find-dealer-page .dealer-data{overflow:hidden; padding-bottom:max(43rem, 38px); height:100%;}
.find-dealer-page .dealer-data .total-num-area{top:0; opacity:1;}
.find-dealer-page .data-list{height:100%;}
.find-dealer-page .scroll-area{overflow-y: auto; padding-right:28rem; height:100%;}
.find-dealer-page .scroll-area::-webkit-scrollbar {width: 4rem; background: transparent;}
.find-dealer-page .scroll-area::-webkit-scrollbar-thumb {width: 4rem; background: #ddd; border-radius: 2px;}
.find-dealer-page .address-wrap {padding-bottom: 2px;}
.find-dealer-page .dealer-address{display:block; margin-top:16rem; padding:24rem 24rem 24rem max(72rem, 45px); background:url("/common/de/images/icon-location-gray-small.svg") no-repeat left 24rem top 24rem/max(32rem, 24px) auto #F8F8F8; border-radius:16rem; border:1px solid #F8F8F8; transition:all 0.4s ease; cursor:pointer;}
.find-dealer-page .dealer-address:first-child{margin-top:0;}
.find-dealer-page .dealer-address .tit-wrap{display:flex; align-items: flex-end;}
.find-dealer-page .dealer-address .tit-wrap .name{overflow:hidden; color:#DE4826; font-size:max(24rem, 20px); line-height:140%; font-family: "InterTight-Bold"; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.find-dealer-page .dealer-address .tit-wrap .distance{padding-bottom:4rem; margin-left:8rem; font-family: "InterTight-SemiBold";}
.find-dealer-page .dealer-address .txt-wrap{margin-top:16rem;}
.find-dealer-page .dealer-address .txt-wrap .f-body3-r{position:relative; margin-top:12rem; /*padding-left:max(12rem, 10px);*/}
/* .find-dealer-page .dealer-address .txt-wrap .f-body3-r:before{display:block; content:""; position:absolute; top:10px; left:0; width:max(4rem, 3px); height:max(4rem, 3px); border-radius:50%; background:#2D2926} */
.find-dealer-page .dealer-address .txt-wrap .f-body3-r .address{overflow:hidden; display:block; margin-top:12rem; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.find-dealer-page .dealer-address .btn-wrap{display:none;}
.find-dealer-page .dealer-address.on{background:url("/common/de/images/icon-location-red-small.svg") no-repeat left 24rem top 24rem/max(32rem, 24px) auto #fff; border:1px solid #DE4826}
.find-dealer-page .scroll-area .btn-wrap{margin-top:40rem; padding-bottom:2rem;}
.find-dealer-page .fold-btn{position:absolute; top:0; right:-40rem; width:40rem; height:72rem; background:#2D2926; border-radius:0 4rem 4rem 0;}
.find-dealer-page .fold-btn:after{display:block; content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(0); width:32rem; height:32rem; background:url("/common/de/images/icon-find-dealer-fold-arrow.svg") no-repeat center center/cover; transition:transform 0.4s ease;}
.find-dealer-page .dealer-area.on{left:-588rem;}
.find-dealer-page .dealer-area.on .fold-btn:after{transform:translate(-50%, -50%) rotate(180deg);}
.find-dealer-page .map-area{overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%;}
.find-dealer-page .map-area .map-wrap{position:relative; width:100%; height:100%;}
.find-dealer-page .map-area .map-api{width:100%; height:100%;}
.find-dealer-page .map-area .map-api img{width:100%; height:100%; object-fit: cover;}
.find-dealer-page .location-btn{display:block; position:absolute; top:40rem; right:40rem; width:56rem; height:56rem; background:url("/common/de/images/btn-mylocation.svg") no-repeat center center/cover; z-index:1;}
.find-dealer-page .marker-btn{display:block; width:48rem; height:48rem; background:url("/common/de/images/icon-location-gray.svg") no-repeat center center/cover; transition:all 0.4s ease;}
.find-dealer-page .marker-btn.small {background-image:url("/common/de/images/icon-location-line.svg");}
.find-dealer-page .marker.on .marker-btn{background-image:url("/common/de/images/icon-location-red.svg");}
.find-dealer-page .marker.on .marker-btn.small{background-image:url("/common/de/images/icon-location-line-on.svg");}
.find-dealer-page .marker-con{display:none; position:absolute; bottom:57rem; left:50%; transform:translateX(-50%); padding:32rem; width:max(320rem, 250px); border:1px solid #2D2926; border-radius: 16rem; background: #fff;}
.find-dealer-page .marker-con:after{display:block; content:""; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:10px; height:8px; background:url("/common/de/images/icon-find-dealer-detail-polygon.svg") no-repeat center center/10px auto}
.find-dealer-page .marker-con .tit-wrap{display:flex; align-items: flex-end;}
.find-dealer-page .marker-con .tit-wrap .name{color:#DE4826; font-size:max(24rem, 20px); line-height:140%; font-family: "InterTight-Bold"; word-break: break-all;}
.find-dealer-page .marker-con .tit-wrap .distance{padding-bottom:4rem; margin-left:8rem; font-family: "InterTight-SemiBold";}
.find-dealer-page .marker-con .txt-wrap{margin-top:16rem;}
.find-dealer-page .marker-con .txt-wrap .f-body3-r{position:relative; margin-top:8rem; /*padding-left:max(12rem, 10px);*/}
/* .find-dealer-page .marker-con .txt-wrap .f-body3-r:before{display:block; content:""; position:absolute; top:max(10rem, 8px); left:0; width:max(4rem, 3px); height:max(4rem, 3px); border-radius:50%; background:#2D2926} */
.find-dealer-page .marker-con .txt-wrap .f-body3-r .address{display:block; margin-top:12rem;}
.find-dealer-page .marker-con .btn-wrap{justify-content: flex-start; margin-top:20rem;}
.find-dealer-page .marker-con .btn-wrap .border-btn2{padding:0 32rem; min-width: unset; height:max(48rem, 36px);}
.find-dealer-page .marker-con .btn-wrap .border-btn2 span{font-family: "InterTight-SemiBold"; font-size:max(16rem, 14px);}
.find-dealer-page .marker-con .x-btn{position:absolute; right:20rem; top:20rem; width:24rem; height:24rem;}
.find-dealer-page .marker-con .x-btn img{width: 100%; height: 100%;}
.find-dealer-page .total-num-area .right {display: none;}

@media all and (max-width: 1023px) {
  .find-dealer-page{display: flex; flex-direction: column-reverse; padding:0; height:auto;}
  .find-dealer-page .dealer-area{margin-top:calc(40vh + 206rem); padding-bottom:50rem; height:60vh;}
  .find-dealer-page .dealer-srch{position:absolute; top:calc(-40vh - 206rem); left:0; padding:0 20rem; width:100%;}
  .find-dealer-page .dealer-srch .form-group{gap:16rem 8rem;}
  .find-dealer-page .dealer-srch .form-input{width:calc(100% - 80rem);}
  .find-dealer-page .dealer-wrap{padding:0; width:100%; height:100%; box-shadow: none;}
  .find-dealer-page .dealer-data{overflow-y:auto; padding:0 20rem 150rem; margin-top:40rem; height:auto;}
  .find-dealer-page .data-list{height:auto;}
  .find-dealer-page .scroll-area{overflow-y: hidden; padding-right:0; height:auto;}
  .find-dealer-page .dealer-wrap .srch-btn{width:72rem; height:48rem; background-size:40rem auto;}
  .find-dealer-page .dealer-address{padding:24rem 24rem 24rem 72rem; background-size:32rem auto; cursor: auto;}
  .find-dealer-page .dealer-address.on{background-size:32rem auto;}
  .find-dealer-page .scroll-area .btn-wrap{padding-bottom:0;}
  .find-dealer-page .scroll-area .dealer-address .btn-wrap{justify-content: flex-start; margin-top:20rem;}
  .find-dealer-page .dealer-address .tit-wrap .name{overflow:visible; display:block; text-overflow: initial; -webkit-line-clamp:initial; -webkit-box-orient:initial; word-break: break-word;}
  .find-dealer-page .dealer-address .txt-wrap .f-body3-r .address{overflow:visible; display:block; text-overflow: initial; -webkit-line-clamp:initial; -webkit-box-orient:initial; word-break: break-word;}
  .find-dealer-page .dealer-address .btn-wrap{display:flex; }
  .find-dealer-page .fold-btn{display:none;}
  .find-dealer-page .map-area{overflow:hidden; position:absolute; top:206rem; height:auto; z-index:2;}
  .find-dealer-page .map-area .map-wrap{height:40vh; transition:height 0.4s ease;}
  .find-dealer-page .marker-con{display: none !important;}
  .find-dealer-page .location-btn{top:20rem; right:20rem; width:48rem; height:48rem;}
  .find-dealer-page .dealer-area.active{left:0;}
  .find-dealer-page .map-area.on .map-wrap{top:0; transition:top 0.6s ease, height 0.4s ease;}
  .find-dealer-page .map-area.hide .map-wrap {top: -21vh !important;}
}
/* --------------------------------------------- Where to buy - END --------------------------------------------- */




/* --------------------------------------------- About us - START --------------------------------------------- */
/* ---- KIOTI Story ---- */
.download-area {overflow: hidden;}

/* visual */
.story-area .visual-sec {position: relative; width: 100%; height: 300vh;}
.story-area .visual-sec .visual-wrap {position: relative; width: 100%; height: 300vh;}
.story-area .visual-sec .bg-wrap {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: calc(100vh + 300px);}
.story-area .visual-sec .bg-wrap .bg {position: relative; width: 100%; height: calc(100% + 300px);}
.story-area .visual-sec .bg-wrap .bg img {width: 100%; height: 100%; object-fit: cover;}
.story-area .visual-sec .txt-wrap {position: relative; min-height: 100dvh; max-height: 100dvh; height: 100vh; text-align: center;}
.story-area .visual-sec .txt-wrap .inner {position: relative; height: 100%;}
.story-area .visual-sec .txt-wrap .tit {position: absolute; top: 50%; left: 50%; width: 100%; font-family: "Arvo-Bold"; font-size: max(56rem, 48px); line-height: 120%; color: #fff;}
.story-area .visual-sec .txt-wrap .tit span {position: relative; top: 80rem; opacity: 0; transition: top 1s ease, opacity 1s ease;}
.story-area .visual-sec .txt-wrap .tit.on span {top: 0; opacity: 1;}
.story-area .visual-sec .txt-wrap .logo {position: absolute; top: 100%; left: 50%; width: 400rem; opacity: 0;}
.story-area .visual-sec .txt-wrap .logo img {width: 100%;}
.story-area .visual-sec .txt-wrap .txt {position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); width: 100%; color: #fff; opacity: 0;}
.story-area .visual-sec .txt-wrap .txt.two-txt {top: 70%;}
.story-area .visual-sec .txt-wrap .scrolldown {opacity: 0; transition: opacity .8s ease;}
.story-area .visual-sec .txt-wrap .scrolldown.on {opacity: 1;}
.story-area .visual-sec .txt-wrap .scrolldown > p {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding-bottom: 84rem; font-family: "InterTight-Medium"; font-size: max(18rem, 16px); line-height: 140%; color: #fff;}
.story-area .visual-sec .txt-wrap .scrolldown > div {position: absolute; bottom: -1px; left: 50%; margin-left: 1px; width: 1px; height: calc(60rem + 1px); background-color: #fff}

/* line */
.story-area .line-area {position: relative; padding-top:0 !important; background: linear-gradient(180deg, rgba(222, 72, 38, 0.00) 0%, #DE4826 200px);}
.story-area .line-area .history-bar {position: absolute; top: 0; left: 50%; z-index: 2; margin-left:1px; width: 1px; height: auto; background-color: rgba(255,255,255,.4); opacity: 0; transition: opacity .8s ease;}
.story-area .line-area .history-bar.fixed {position: fixed; transform: translateY(calc(-100% + 300rem));}
.story-area .line-area .history-bar .bar {position: absolute; top: 0; left: 0; transform: translateX(-50%); z-index: 1; width: 100rem; height: 90rem;}
.story-area .line-area .history-bar .bar img {width: 100%;}
.story-area:has(.scrolldown.on) .line-area .history-bar {opacity: 1;}
.story-area .line-area .history-bar.hide {opacity: 0 !important;}

/* history */
.story-area .history-sec {position: relative; padding-top: 170rem;}
.story-area .history-sec .history-list {display: flex; flex-wrap: wrap;}
.story-area .history-sec .history-list .item {display: flex; flex-direction: column; width: 50%;}
.story-area .history-sec .history-list .item:nth-child(odd) {margin-top: 34rem; padding-right: 142rem; align-items: flex-end;}
.story-area .history-sec .history-list .item:nth-child(even) {margin-top: 140rem; padding-left: 142rem;}
.story-area .history-sec .history-list .item > div {position: relative; top: 80rem; width: 454rem; opacity: 0; transition: top 1s ease, opacity 1s ease;}
.story-area .history-sec .history-list .item.active > div {top: 0; opacity: 1;}
.story-area .history-sec .history-list .item .img {width: 100%; height: 276rem; border-radius: 16rem; overflow: hidden;}
.story-area .history-sec .history-list .item .img img {width: 100%; height:100%; object-fit: cover;}
.story-area .history-sec .history-list .item .txt-box {padding: 0 20rem; margin-top: 20rem;}
.story-area .history-sec .history-list .item .txt-box .tit {color: #fff;}
.story-area .history-sec .history-list .item .txt-box .txt {color: #fff; margin-top: 16rem;}
.story-area .history-sec .history-list .item .txt-box .year {color: #fff; margin-top: 16rem;}

/* leading */
.story-area .leading-sec {position: relative; padding-top: 0 !important; height: 400vh;}
.story-area .leading-sec .leading-wrap {position: relative; height: 100vh; overflow: hidden;}
.story-area .leading-sec .leading-wrap .inner {position: relative; height: 100%;}
.story-area .leading-sec .scrolldown {position: absolute; top: -1px; left: 50%; margin-left:1px; width: 1px; height: calc(300rem + 1px); background-color: #fff; opacity:0;}
.story-area .leading-sec .scrolldown.hide {opacity: 0;}
.story-area .leading-sec .txt-wrap {position: relative; height: 100%; text-align: center;}
.story-area .leading-sec .txt-wrap .tit {position: absolute; top: calc(50% - 27rem); left: 50%; transform: translate(-50%, -100%); width: 100%; color: #fff;}
.story-area .leading-sec .txt-wrap .txt {position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); width: 100%; color: #fff; opacity: 0;}
.story-area .leading-sec .leading-list {position: absolute; bottom: -55%; left: 0; width: 100%; height: 55%; max-height: 598rem; border-radius: 16rem 16rem 0 0; opacity: 0; overflow: hidden;}
.story-area .leading-sec .leading-list .item {position: absolute; top: calc(100% - 20rem); width: 100%; height: 100%; opacity: 0; border-radius: 16rem 16rem 0 0; overflow: hidden; transition: top 1s ease, opacity 1s ease, transform 1s ease;}
.story-area .leading-sec .leading-list .item > div {position: relative; width: 100%; height: 100%; padding: 56rem;}
.story-area .leading-sec .leading-list .item:first-child {top: 0 !important;}
.story-area .leading-sec .leading-list .item.on {top: 0; opacity: 1;}
.story-area .leading-sec .leading-list .item.on + .item {opacity: 1;}
.story-area .leading-sec .leading-list .item.hide {top: 0; transform: scale(0.9); opacity: 0;}
.story-area .leading-sec .leading-list .item p {position: relative;}
.story-area .leading-sec .leading-list .item .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.story-area .leading-sec .leading-list .item .img img {width: 100%; height: 100%; object-fit: cover;}

/* logo */
.story-area .logo-sec {position: relative; height: 250vh; background:#DE4826;}
.story-area .logo-sec .logo-wrap {position: relative; overflow: hidden; min-height: 100dvh; max-height: 100dvh; height: 100vh; opacity: 0;}
.story-area .logo-sec .mask-cont {
  position: absolute; left: calc(50% - 1px) ; top: calc(50% - 1px); transform: translate(-50%, -50%); width: calc(100% + 1px); height: calc(100% + 2px); background: url("/common/de/images/bg-brand-history-brand.jpg") no-repeat center center / cover;
  mask: url("/common/de/images/icon-brand-story-mask.svg") center / 29% no-repeat;
  -webkit-mask: url("/common/de/images/icon-brand-story-mask.svg") center / 29% no-repeat;
}
.story-area .logo-sec .mask-cont .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: #000; opacity: 0;}
.story-area .logo-sec .mask-cont .inner {position: relative; height: 100%;}
.story-area .logo-sec .mask-cont .txt {position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; color: #fff; opacity: 0;}
.story-area .logo-sec .logos {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; pointer-events: none;}
.story-area .logo-sec .logos .logo {position: absolute; top: 50%;}
.story-area .logo-sec .logos .logo:first-child {left: 0; width: 323rem;}
.story-area .logo-sec .logos .logo:last-child {right: 0; width: 300rem;}
.story-area .logo-sec .logos .logo img {width: 100%;}

/* map */
.story-area .map-num-area .tit-wrap{position:relative; top:80rem; text-align: center; opacity:0; transition:top 1s ease, opacity 1s ease;}
.story-area .map-num-area .tit-wrap .f-body1-m{margin-top:8rem;}
.story-area .map-num-area .tit-wrap .dot-txt{position:relative; display: inline-block; padding-left:12rem; color:#aaa;}
.story-area .map-num-area .tit-wrap .dot-txt:before{display:block; content:""; position:absolute; top:max(10rem, 9px); left:0; width:4px; height:4px; border-radius: 50%; background:#aaa;}
.story-area .map-num-area .map-img{position:relative; top:80rem; margin-top:32rem; width:100%; opacity:0; transition:top 1s ease, opacity 1s ease;}
.story-area .map-num-area .map-img img{width:100%;}
.story-area .map-num-area .num-wrap{display:flex; justify-content: center; column-gap:164rem; margin-top:56rem;}
.story-area .map-num-area .num-wrap .num-div{display:flex; align-items: flex-end; position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.story-area .map-num-area .num-wrap .num-div .num{margin-right:16rem;font-family: "Arvo-Regular"; font-size:80rem; line-height:120%;}
.story-area .map-num-area .num-wrap .num-div .f-body2-m{padding-bottom:13rem;}
.story-area .map-num-area.active .tit-wrap{top:0; opacity:1;}
.story-area .map-num-area.active .map-img{top:0; opacity:1; transition-delay:0.15s}
.story-area .map-num-area .num-wrap.active .num-div{top:0; opacity:1;}
.story-area .map-num-area .num-wrap.active .num-div:nth-child(2){transition-delay:0.1s}
.story-area .map-num-area .num-wrap.active .num-div:nth-child(3){transition-delay:0.2s}
.story-area .map-num-area .num-wrap.active .num-div:nth-child(4){transition-delay:0.3s}

/* mission */
.story-area .mission-wrap {overflow: hidden;}
.story-area .mission-wrap .tit-wrap .f-body1-m{position:relative; top:80rem; color:#888; opacity:0; transition:top 1s ease, opacity 1s ease;}
.story-area .mission-wrap .tit-wrap .f-title2{position:relative; top:80rem; margin-top:20rem; opacity:0; transition:top 1s ease, opacity 1s ease}
.story-area .mission-wrap .img{overflow:hidden; position:relative; left:calc((100% - 1440rem) / 2); margin-top:80rem; width:calc(100vw - 240rem); height:640rem; border-radius:16rem 0 0 16rem;}
.story-area .mission-wrap .img img{transform:scale(1.2); width:100%; height: 100%; object-fit: cover; transform-origin: center; opacity:0; transition:transform 1s ease, opacity 1s ease;}
.story-area .mission-wrap.active .tit-wrap .f-body1-m{top:0; opacity:1;}
.story-area .mission-wrap.active .tit-wrap .f-title2{top:0; opacity:1; transition-delay:0.15s}
.story-area .mission-wrap.active .img img{transform:scale(1); opacity:1; transition-delay:0.3s}

/* who */
.story-area .who-we-are-wrap .tit-wrap .f-body1-m{position:relative; top:80rem; color:#888; opacity:0; transition:top 1s ease, opacity 1s ease;}
.story-area .who-we-are-wrap .tit-wrap .f-title2{position:relative; top:80rem; margin-top:20rem; opacity:0; transition:top 1s ease, opacity 1s ease}
.story-area .who-we-are-wrap .graphic-wrap{overflow:hidden; display:flex; align-items: center; justify-content: center; position:relative; top:80rem; padding:160rem 0; margin-top:80rem; background:#DE4826; border-radius:16rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.story-area .who-we-are-wrap .graphic-wrap:before{display:block; content:""; position:absolute; top:0; left:0; width:470rem; height:100%; background:url("/common/de/images/img-brand-story-what-we-are.png") no-repeat right center/cover}
.story-area .who-we-are-wrap .graphic-wrap:after{display:block; content:""; position:absolute; top:0; right:0; width:470rem; height:100%; background:url("/common/de/images/img-brand-story-what-we-are-not.png") no-repeat left center/cover}
.story-area .who-we-are-wrap .graphic-wrap .circle{position:relative; width:350rem; z-index:1;}
.story-area .who-we-are-wrap .graphic-wrap .circle:first-child .f-body2-b{color:#fff;}
.story-area .who-we-are-wrap .graphic-wrap .circle:last-child .f-body2-b{color:#DE4826; text-align:right;}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap{padding:0 28rem; width:max(465rem, 380px);}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap .info{display:flex; align-items: center; position:relative; margin-top:30rem;}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap .info:after{display:block; content:""; position:absolute; top:50%; left:max(155rem, 130px); transform:translateY(-50%); width:max(160rem, 120px); height:1px; background:url("/common/de/images/img-kioti-story-who-we-are-dot-line.svg") repeat-x center center}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap .info:nth-child(1){margin-top:0;}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap .info p {font-family: "InterTight-Bold"; font-size: max(18rem, 16px); line-height: 140%; color:#fff; text-align: center;}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap .info p:nth-child(1){margin-right:max(220rem, 150px); width:max(132rem, 125px);}
.story-area .who-we-are-wrap .graphic-wrap .info-wrap .info p:nth-child(2){width:max(75rem, 70px);}
.story-area .who-we-are-wrap.active .tit-wrap .f-body1-m{top:0; opacity:1;}
.story-area .who-we-are-wrap.active .tit-wrap .f-title2{top:0; opacity:1; transition-delay:0.15s}
.story-area .who-we-are-wrap.active .graphic-wrap{top:0; opacity:1; transition-delay:0.3s}

@media all and (max-width: 1023px) {
   /* visual */
  .story-area .visual-sec .txt-wrap .tit {font-size: 36rem;}
  .story-area .visual-sec .txt-wrap .logo {width: 240rem;}
  .story-area .visual-sec .txt-wrap .scrolldown {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); transition: opacity .8s ease, transform .8s ease;}
  .story-area .visual-sec .txt-wrap .scrolldown.on {transform: translate(-50%, 0);}
  .story-area .visual-sec .txt-wrap .scrolldown > p {position: unset; transform: unset; padding-bottom: 48rem; font-size: 16rem;}
  .story-area .visual-sec .txt-wrap .scrolldown > div {bottom: 0; height: 32rem;}

  /* line */
  .story-area .line-area .history-bar{display:none;}

  /* history */
  .story-area .history-sec {padding-top: 80rem;}
  .story-area .history-sec .history-list {flex-direction: column; gap: 32rem}
  .story-area .history-sec .history-list .item {display: block; width: 100%;}
  .story-area .history-sec .history-list .item:nth-child(odd) {margin: 0; padding: 0;}
  .story-area .history-sec .history-list .item:nth-child(even) {margin: 0; padding: 0;}
  .story-area .history-sec .history-list .item > div {width: 100%;}
  .story-area .history-sec .history-list .item .img {height: 350rem;}
  .story-area .history-sec .history-list .item .txt-box {margin-top: 16rem; padding: 0;}
  .story-area .history-sec .history-list .item .txt-box .txt {margin-top: 12rem;}
  .story-area .history-sec .history-list .item .txt-box .year {margin-top: 8rem;}

   /* leading */
  .story-area .leading-sec {height: unset; padding-top: 80rem !important;}
  .story-area .leading-sec .leading-wrap {height: unset}
  .story-area .leading-sec .txt-wrap .tit {position: unset; transform: unset;}
  .story-area .leading-sec .txt-wrap .txt {position: unset; transform: unset; margin-top: 24rem; opacity: 1 !important;}
  .story-area .leading-sec .leading-list {position: unset; display: flex; flex-direction: column; gap: 16rem; height: auto; margin-top: 40rem; border-radius: unset; opacity: 1 !important;}
  .story-area .leading-sec .leading-list .item {position: unset; height: 170rem; border-radius: unset; overflow: visible;}
  .story-area .leading-sec .leading-list .item > div {padding: 20rem; border-radius: 16rem; overflow: hidden;}
  .story-area .leading-sec .leading-list .item.active {opacity: 1;}
  .story-area .leading-sec .txt-wrap .tit span, .story-area .leading-sec .txt-wrap .txt span, .story-area .leading-sec .leading-list .item > div {position: relative; top: 80rem; opacity: 0; transition: top 1s ease, opacity 1s ease;}
  .story-area .leading-sec .txt-wrap .tit.active span, .story-area .leading-sec .txt-wrap .txt.active span, .story-area .leading-sec .leading-list .item.active > div {top: 0; opacity: 1;}

  /* logo */
  .story-area .logo-sec .mask-cont {mask-size: 74%;}
  .story-area .logo-sec .logos .logo:first-child {width: 100rem;}
  .story-area .logo-sec .logos .logo:last-child {width: 90rem;}

  /* map */
  .story-area .map-num-area .tit-wrap {text-align: left;}
  .story-area .map-num-area .tit-wrap .dot-txt:before {top: 10rem;}
  .story-area .map-num-area .map-img {margin-top: 24rem;}
  .story-area .map-num-area .num-wrap {flex-wrap: wrap; gap: 24rem; margin-top: 16rem;}
  .story-area .map-num-area .num-wrap .num-div {display: block; width: calc(50% - 12rem);}
  .story-area .map-num-area .num-wrap .num-div .num {font-size: 36rem; margin-bottom: 4rem;}
  .story-area .map-num-area .num-wrap .num-div .f-body2-m {padding-bottom: 0q;}

  /* mission */
  .story-area .mission-wrap .tit-wrap .f-title2 {margin-top: 16rem;}
  .story-area .mission-wrap .img {left: 0; width: calc(100% + 20rem); height: 240rem; margin-top: 40rem;}

  /* who */
  .story-area .who-we-are-wrap .tit-wrap .f-title2{margin-top: 16rem;}
  .story-area .who-we-are-wrap .graphic-wrap{padding: 0; flex-direction: column; margin-top: 40rem;}
  .story-area .who-we-are-wrap .graphic-wrap:before{top:0; left:0; width:100%; height:218rem; background:url("/common/de/images/img-brand-story-what-we-are-tab.png") no-repeat top center/contain}
  .story-area .who-we-are-wrap .graphic-wrap:after{bottom:0; top: unset; right:0; width:100%; height:218rem; background:url("/common/de/images/img-brand-story-what-we-are-not-tab.png") no-repeat bottom center/contain}
  .story-area .who-we-are-wrap .graphic-wrap .circle {display: flex; align-items: center; justify-content: center}
  .story-area .who-we-are-wrap .graphic-wrap .circle:first-child{width: 100%; height: 218rem;}
  .story-area .who-we-are-wrap .graphic-wrap .circle:last-child{width: 100%; height: 218rem;}
  .story-area .who-we-are-wrap .graphic-wrap .circle:first-child p{padding-bottom: 40rem;}
  .story-area .who-we-are-wrap .graphic-wrap .circle:last-child p{padding-top: 40rem;}
  .story-area .who-we-are-wrap .graphic-wrap .info-wrap{width: 100%; padding: 30rem 28rem; display: flex; flex-direction: column; align-items: center;}
  .story-area .who-we-are-wrap .graphic-wrap .info-wrap .info{margin-top:24rem;}
  .story-area .who-we-are-wrap .graphic-wrap .info-wrap .info:after{width: 86rem; left: 50%; transform: translate(-50%, -50%);}
  .story-area .who-we-are-wrap .graphic-wrap .info-wrap .info p {font-family: "InterTight-SemiBold"; font-size: 16rem; line-height: 150%;}
  .story-area .who-we-are-wrap .graphic-wrap .info-wrap .info p:nth-child(1){margin-right:126rem; width:72rem;}
  .story-area .who-we-are-wrap .graphic-wrap .info-wrap .info p:nth-child(2){width:64rem;}
}
@media all and (max-width: 599px) {
  /* history */
  .story-area .history-sec .history-list .item .img {height: 194rem;}

  /* missito */
  .story-area .mission-wrap .img {height: 160rem;}

  /* who */
  .story-area .who-we-are-wrap .graphic-wrap .circle:first-child p{padding-bottom: 0;}
  .story-area .who-we-are-wrap .graphic-wrap .circle:last-child p{padding-top: 0;}
  .story-area .who-we-are-wrap .graphic-wrap:before {background-image: url("/common/de/images/img-brand-story-what-we-are-mo.png"); background-size: cover;}
  .story-area .who-we-are-wrap .graphic-wrap:after {background-image: url("/common/de/images/img-brand-story-what-we-are-not-mo.png"); background-size: cover;}
}


/* ---- Brand Guideline ---- */
.page-con-wrap:has(.brand-guideline-area) {overflow: hidden;}
.brand-guideline-area > section .f-title2 + .f-body2-r{margin-top:24rem; color:#888;}
.brand-guideline-area > section > .f-title2{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.brand-guideline-area > section > .f-body2-r{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.brand-guideline-area > section.active .f-title2{top:0; opacity:1;}
.brand-guideline-area > section.active .f-body2-r{top:0; opacity:1; transition-delay:0.15s}
.brand-guideline-area .kioti-logo-area{margin-bottom:144rem;}
.kioti-logo-area .logo-img{display:flex; align-items: center; justify-content: center; position:relative; top:80rem; width:100%; height:546rem; background:#F8F8F8; border-radius:8rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.kioti-logo-area .logo-img img{max-width:90%; width:250rem;}
.kioti-logo-area .txt-div{display:flex; margin-top:56rem;}
.kioti-logo-area .txt-div .f-title2{position:relative; top:80rem; padding-right:166rem; width:493rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.kioti-logo-area .txt-div .f-body2-r{position:relative; top:80rem; margin-top:0 !important; width:calc(100% - 493rem); color:#888; opacity:0; transition:top 1s ease, opacity 1s ease;}
.kioti-logo-area.active .logo-img{top:0; opacity:1;}
.kioti-logo-area.active .txt-div .f-title2{top:0; opacity:1; transition-delay:0.15s}
.kioti-logo-area.active .txt-div .f-body2-r{top:0; opacity:1; transition-delay:0.3s}
.brand-guideline-area .bg-area{position:relative; padding:120rem 0;}
.brand-guideline-area .bg-area:after{display:block; content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; z-index:-1;}
.brand-guideline-area .bg-area.darkgray:after{background:#8D9093}
.brand-guideline-area .bg-area.darkgray .f-title2{color:#fff;}
.brand-guideline-area .bg-area.darkgray .f-body2-r{color:#fff;}
.brand-guideline-area .bg-area.darkgray .use-logo-img{display:flex; column-gap: 40rem; margin-top:56rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box{position:relative; top:80rem; width:100%; background:#fff; border-radius:8rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.brand-guideline-area .bg-area.active .use-logo-img .img-box:nth-child(1){top:0; opacity:1; transition-delay:0.45s}
.brand-guideline-area .bg-area.active .use-logo-img .img-box:nth-child(2){top:0; opacity:1; transition-delay:0.6s}
.brand-guideline-area .bg-area.active .use-logo-img .img-box:nth-child(3){top:0; opacity:1; transition-delay:0.75s}
.brand-guideline-area .bg-area.active .use-logo-img .img-box:nth-child(4){top:0; opacity:1; transition-delay:0.9s}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .img{display:flex; align-items: center; justify-content: center; width:100%; height:165rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box:nth-child(1) .img img{width:96rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box:nth-child(2) .img img{width:99rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box:nth-child(3) .img img{width:107rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box:nth-child(4) .img img{width:90rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .txt-wrap{padding:12rem 40rem 32rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .txt-wrap .txt-div{display:flex; align-items: flex-start; justify-content: space-between; margin-top:8rem;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .txt-wrap .txt-div .f-body4-m{width:50%; color:#888;}
.brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .txt-wrap .txt-div .f-body3-b{width:50%; text-align: right;}
.brand-guideline-area .bg-area.lightgray{margin-top:0 !important}
.brand-guideline-area .bg-area.lightgray:after{background:#f8f8f8}
.brand-guideline-area .badge-img-area{display:flex; column-gap: 40rem; margin-top:56rem;}
.brand-guideline-area .badge-img-area .badge-img{width: 100%; position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.brand-guideline-area .badge-img-area .img{display:flex; align-items: center; justify-content: center; margin-bottom:32rem; height:278rem; background:#fff; border-radius:8rem;}
.brand-guideline-area .bg-area.active .badge-img-area .badge-img:nth-child(1){top:0; opacity:1; transition-delay:0.3s}
.brand-guideline-area .bg-area.active .badge-img-area .badge-img:nth-child(2){top:0; opacity:1; transition-delay:0.45s}
.brand-guideline-area .bg-area.active .badge-img-area .badge-img:nth-child(3){top:0; opacity:1; transition-delay:0.6s}
.brand-guideline-area .badge-img-area .badge-img:nth-child(1) .img img{width:144rem;}
.brand-guideline-area .badge-img-area .badge-img:nth-child(2) .img img{width:148rem;}
.brand-guideline-area .badge-img-area .badge-img:nth-child(3) .img img{width:286rem;}
.brand-guideline-area .badge-img-area .f-body2-r{margin-top:16rem; color:#888;}
.brand-guideline-area .logo-img-area{display:flex; column-gap: 40rem; margin-top:56rem;}
.brand-guideline-area .logo-img-area .img-div{width: 100%; position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.brand-guideline-area section.active .logo-img-area .img-div:nth-child(1){top:0; opacity:1; transition-delay:0.45s}
.brand-guideline-area section.active .logo-img-area .img-div:nth-child(2){top:0; opacity:1; transition-delay:0.6s}
.brand-guideline-area section.active .logo-img-area .img-div:nth-child(3){top:0; opacity:1; transition-delay:0.75s}
.brand-guideline-area section.active .logo-img-area .img-div:nth-child(4){top:0; opacity:1; transition-delay:0.9s}
.brand-guideline-area .logo-img-area .img-div .img{display:flex; align-items: center; justify-content: center; border-radius:8rem;}
.brand-guideline-area .logo-img-area .img-div .img.white{height:278rem; border:1px solid #E6E6E6}
.brand-guideline-area .logo-img-area .img-div .img.red{height:278rem; background:#DE4826}
.brand-guideline-area .logo-img-area .img-div .img.darkgray{height:278rem; background:#2D2926;}
.brand-guideline-area .logo-img-area .img-div .img.white img,
.brand-guideline-area .logo-img-area .img-div .img.red img,
.brand-guideline-area .logo-img-area .img-div .img.darkgray img
{width:144rem}
.brand-guideline-area .logo-img-area .img-div .img.lightgray{height:453rem; background:#F8F8F8}
.brand-guideline-area .logo-img-area.clearance .swiper-container{width:100%;}
.brand-guideline-area .logo-img-area.clearance .img-div{width: 100%;}
.brand-guideline-area .logo-img-area.clearance .img-div:last-child{margin-right:0;}
.brand-guideline-area .logo-img-area.clearance .img-div .img.lightgray img{width:254rem}
.brand-guideline-area .logo-img-area.clearance .img-div:nth-child(3){width:513rem;}
.brand-guideline-area .logo-img-area.clearance .img-div:nth-child(3) .img.lightgray img{width:426rem}
.brand-guideline-area .logo-img-area.scaling .img-div .img.lightgray{height:196rem;}
.brand-guideline-area .logo-img-area.scaling .img-div .img img{width:96rem;}
.brand-guideline-area .logo-img-area.scaling .img-div:nth-child(2n) .img img{width:88rem;}
.brand-guideline-area .logo-img-area.scaling .img-div .f-body3-b{margin:20rem 0 4rem;}
.brand-guideline-area .palette-wrap{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:40rem; margin-top:56rem;}
.brand-guideline-area .palette-wrap .palette-box{display:flex; flex-direction: column; justify-content: space-between; position:relative; top:80rem; padding:48rem; height:453rem; border-radius:8rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.brand-guideline-area .palette-wrap .palette-box:nth-child(4){grid-column: 1/3; grid-row: 2/3; height:max(258rem, 200px);}
.brand-guideline-area .palette-wrap .palette-box:nth-child(5){height:max(258rem, 200px); background:url("/common/de/images/img-brand-guideline-color-palette.jpg") no-repeat center center/cover}
.brand-guideline-area .palette-wrap .palette-box.orange{background:#DE4826}
.brand-guideline-area .palette-wrap .palette-box.white{background:#fff; border:1px solid #e6e6e6;}
.brand-guideline-area .palette-wrap .palette-box.black{background:#2D2926;}
.brand-guideline-area .palette-wrap .palette-box.silver{background:#8D9093;}
.brand-guideline-area .palette-wrap .palette-box .info-div{width:100%;}
.brand-guideline-area .palette-wrap .palette-box .info-div .info{display:flex; margin-top:8rem; width:100%;}
.brand-guideline-area .palette-wrap .palette-box .info-div .info .f-body4-b{width:max(50rem, 45px);}
.brand-guideline-area .palette-wrap.active .palette-box{top:0; opacity:1;}
.brand-guideline-area .palette-wrap.active .palette-box:nth-child(2){transition-delay:0.15s}
.brand-guideline-area .palette-wrap.active .palette-box:nth-child(3){transition-delay:0.3s}
.brand-guideline-area .palette-wrap.active .palette-box:nth-child(4){transition-delay:0.45s}
.brand-guideline-area .palette-wrap.active .palette-box:nth-child(5){transition-delay:0.6s}

@media all and (max-width: 1023px) {
  .brand-guideline-area .kioti-logo-area{margin-bottom:80rem;}
  .kioti-logo-area .logo-img{height:240rem;}
  .kioti-logo-area .logo-img img{width:96rem;}
  .kioti-logo-area .txt-div{flex-wrap:wrap; margin-top:40rem;}
  .kioti-logo-area .txt-div .f-title2{padding-right:0; width:100%;}
  .kioti-logo-area .txt-div .f-body2-r{margin-top:20rem !important; width:100%;}
  .brand-guideline-area .bg-area{padding:80rem 0;}
  .brand-guideline-area .bg-area.darkgray .use-logo-img{column-gap: 0; row-gap: 16rem; flex-wrap:wrap; margin-top:40rem;}
  .brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .img{height:160rem;}
  .brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .txt-wrap{padding:12rem 20rem 20rem;}
  .brand-guideline-area .bg-area.darkgray .use-logo-img .img-box .txt-wrap .txt-div{margin-top:4rem;}
  .brand-guideline-area .badge-img-area{column-gap: 0; row-gap: 40rem; flex-wrap:wrap; margin-top:40rem;}
  .brand-guideline-area .badge-img-area .badge-img{width:100%;}
  .brand-guideline-area .badge-img-area .badge-img .img{margin-bottom:20rem; height:196rem;}
  .brand-guideline-area .badge-img-area .badge-img:nth-child(1) .img img{width:101rem;}
  .brand-guideline-area .badge-img-area .badge-img:nth-child(2) .img img{width:104rem}
  .brand-guideline-area .badge-img-area .badge-img:nth-child(3) .img img{width:202rem;}
  .brand-guideline-area .badge-img-area .f-body2-r{margin-top:20rem;}
  .brand-guideline-area .logo-img-area{flex-wrap:wrap; column-gap: 0; row-gap: 16rem;; margin-top:40rem;}
  .brand-guideline-area .logo-img-area .img-div .img.white,
  .brand-guideline-area .logo-img-area .img-div .img.red,
  .brand-guideline-area .logo-img-area .img-div .img.darkgray{height:190rem;}
  .brand-guideline-area .logo-img-area .img-div .img.white img,
  .brand-guideline-area .logo-img-area .img-div .img.red img,
  .brand-guideline-area .logo-img-area .img-div .img.darkgray img{width:101rem;}
  .brand-guideline-area .logo-img-area.clearance .swiper-container{overflow: visible;}
  .brand-guideline-area .logo-img-area.clearance .img-div:nth-child(3){width:90%;}
  .brand-guideline-area .logo-img-area .img-div .img.lightgray{height:240rem;}
  .brand-guideline-area .logo-img-area.clearance .img-div .img.lightgray img{width:135rem;}
  .brand-guideline-area .logo-img-area.clearance .img-div:nth-child(3) .img.lightgray img{width:226rem;}
  .brand-guideline-area .logo-img-area.scaling{row-gap: 40rem;}
  .brand-guideline-area .logo-img-area.scaling .img-div .f-body3-b{margin:20rem 0 0;}
  .brand-guideline-area .palette-wrap{display:flex; flex-direction: column; gap: 20rem 0; margin-top:40rem;}
  .brand-guideline-area .palette-wrap .palette-box{padding:24rem; height:188rem; border-radius:16rem;}
  .brand-guideline-area .palette-wrap .palette-box:nth-child(4),
  .brand-guideline-area .palette-wrap .palette-box:nth-child(5)
  {height:188rem;}
  .brand-guideline-area .palette-wrap .palette-box .info-div{margin-top:16rem;}
  .brand-guideline-area .palette-wrap .palette-box .info-div .info{margin-top:4rem;}
}
/* --------------------------------------------- About us - END --------------------------------------------- */





/* --------------------------------------------- Promotion - START --------------------------------------------- */
.promotion-swiper-area{position:relative; padding-top:40rem; border-top:1px solid #E6E6E6}
.promotion-swiper-area .f-title3{margin-bottom:32rem;}
.promotion-swiper-area .swiper-slide{margin-right:20rem; width:302rem;}
.promotion-swiper-area .swiper-slide:last-child{margin-right:0;}
.promotion-swiper-area .swiper-slide .img{overflow:hidden; margin-bottom:16rem; width:100%; height:230rem; border-radius:8rem; background:url("/common/de/images/icon-no-img.svg") no-repeat center center/max(140rem, 120px) auto #8D9093}
.promotion-swiper-area .swiper-slide .img img{width:100%; height:100%; object-fit: cover;}
.promotion-swiper-area .swiper-slide .f-body2-b{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.promotion-swiper-area .swiper-button-next{position:absolute; top:40rem; right:0;}
.promotion-swiper-area .swiper-button-prev{position:absolute; top:40rem; left:auto; right:64rem;}

@media all and (max-width: 1023px) {
  .promotion-swiper-area .swiper-container{overflow:visible;}
  .promotion-swiper-area .swiper-slide{margin-right:8rem;}
  .promotion-swiper-area .swiper-slide .img{margin-bottom:12rem;}
  .promotion-swiper-area .f-title3{margin-bottom:20rem;}
  .promotion-swiper-area .swiper-button-prev{right:46rem;}
}

@media all and (max-width: 599px) {
  .promotion-swiper-area .swiper-slide .img{height:180rem;}
}
/* --------------------------------------------- Promotion - END --------------------------------------------- */





/* --------------------------------------------- Product - START --------------------------------------------- */
.list-view-btn{margin-left:8rem; width:max(56rem, 40px); height:max(56rem, 40px); border:1px solid #ddd; border-radius:4rem; background:url("") no-repeat center center / max(24rem, 18px) auto;}
.list-view-btn.thumbnail{background-image:url("/common/de/images/icon-product-list-type.svg");}
.list-view-btn.list{background-image:url("/common/de/images/icon-product-thumb-type.svg");}
.list-order-wrap{display:flex; flex-wrap:wrap;}
.list-order-wrap .list{position:relative; top:80rem; opacity:0;}
.list-order-wrap .list .img{background:url("/common/de/images/icon-no-img.svg") no-repeat center center/240rem auto #8D9093}
.list-order-wrap .list .info-con .info-div .info-w{display:flex; flex-wrap:wrap; flex-direction: column; justify-content: space-between;}
.list-order-wrap .list .info-con .info-div .tit-w{width:100%;}
.list-order-wrap .list .info-con .info-div .tit-w .txt{font-size:max(12rem, 11px); line-height:140%;}
.list-order-wrap .list .info-con .txt-div{width:100%;}
.list-order-wrap .list .info-con .txt-div .tit{overflow:hidden; width:100%; text-overflow: ellipsis; white-space: nowrap;}
.list-order-wrap .list .info-con .txt-div .txt{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.list-order-wrap .list .info-con .arrow-btn{display:none;}
.list-order-wrap .list.active{top:0; opacity:1; transition:top 1s ease, opacity 1s ease;}

.list-order-wrap.thumbnail-type{gap:40rem;}
.list-order-wrap.thumbnail-type .list{overflow:hidden; position:relative; padding:40rem; width:700rem; height:512rem; border-radius:16rem;}
.list-order-wrap.thumbnail-type .list .img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;}
.list-order-wrap.thumbnail-type .list .img:has(img):before{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:194rem; background:linear-gradient(to top, transparent, rgba(0,0,0,0.6))}
.list-order-wrap.thumbnail-type .list .img:has(img):after{display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:194rem; background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.6))}
.list-order-wrap.thumbnail-type .list .img img{width:100%; height:100%; object-fit: cover;}
.list-order-wrap.thumbnail-type .list .info-con{display:flex; flex-wrap:wrap; flex-direction: column; justify-content: space-between; position:relative; height:100%; z-index:1;}
.list-order-wrap.thumbnail-type .list .info-con .txt-div .tit{color:#fff;}
.list-order-wrap.thumbnail-type .list .info-con .txt-div .txt{margin-top:16rem; color:#fff;}
.list-order-wrap.thumbnail-type .list .info-con .txt-div .arrow-txt{display:none; margin-top:16px; color:#fff;}
.list-order-wrap.thumbnail-type .list .info-con .series-info-wrap{display:flex; column-gap: 40rem;}
.list-order-wrap.thumbnail-type .list .info-con .series-info-wrap .tit-w .f-body4-b{color:#fff;}
.list-order-wrap.thumbnail-type .list .info-con .series-info-wrap .tit-w .txt{color:#fff;}
.list-order-wrap.thumbnail-type .list .info-con .series-info-wrap .number{color:#fff;}
.list-order-wrap.thumbnail-type .list .info-con .series-info-wrap .number .unit{color:#fff;}
.list-order-wrap.thumbnail-type .list:nth-child(2n).active{transition-delay:0.15s}

.list-order-wrap.list-type .list{overflow:hidden; display:flex; margin-top:24rem; width:100%; min-height:431rem; border:1px solid #ddd; border-radius:16rem;}
.list-order-wrap.list-type .list:nth-child(1){margin-top:0;}
.list-order-wrap.list-type .list .img{position:relative; width:580rem; height:100%;}
.list-order-wrap.list-type .list .img img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit: cover;}
.list-order-wrap.list-type .list .info-con{display:flex; flex-direction: column; justify-content: space-between; flex-wrap:wrap; padding:64rem 80rem; width:calc(100% - 580rem);}
.list-order-wrap.list-type .list .info-con .txt-div{width:100%;}
.list-order-wrap.list-type .list .info-con .txt-div .txt{margin-top:16rem;}
.list-order-wrap.list-type .list .info-con .arrow-txt{display:none;}
.list-order-wrap.list-type .list .info-con .series-info-wrap{display:flex; column-gap: 56rem; margin-top:20rem;}
.list-order-wrap.list-type .list .info-con .series-info-wrap .tit{color:#888; font-family: "InterTight-Medium"; font-size: max(16rem, 14px);}
.list-order-wrap.list-type .list .info-con .series-info-wrap .txt{color:#2D2926;}
.list-order-wrap.list-type .list .info-con .series-info-wrap .f-body4-b{color:#888; font-family: "InterTight-Medium";}
.list-order-wrap.list-type .list .info-con .series-info-wrap .number{margin-top:4rem; color:#2D2926;}
.list-order-wrap.list-type .list .info-con .series-info-wrap .number .unit{color:#2D2926;}
.list-order-wrap + .btn-wrap{margin-top:64rem;}

.compare-fixed-btn{position:fixed; bottom:20rem; left:50%; transform:translateX(-50%); padding:15rem 24rem; background:#fff; border:2px solid #DE4826; border-radius:8rem; z-index:1;}
.compare-fixed-btn p{padding-left:28rem; color:#DE4826; background:url("/common/de/images/icon-product-compare.svg") no-repeat left center /20rem auto;}
#compare-popup .fixed-area{position:absolute; padding-right:230rem; width:100%; background:#fff; z-index:2; }
#compare-popup .fixed-area .pop-head{display:flex; align-items: flex-end; justify-content: space-between; position:relative; margin-bottom:20rem; width:100%;}
#compare-popup .fixed-area .pop-head .left{margin-bottom:20rem;}
#compare-popup .fixed-area .pop-head .left .tit{overflow:hidden; height:auto;}
#compare-popup .fixed-area .pop-head .left .txt{overflow:hidden; height:auto;}
#compare-popup .fixed-area .pop-head .right .reset-btn{margin-right:24rem;}
#compare-popup .fixed-area .compare-swiper{width:100%;}
#compare-popup .fixed-area .compare-swiper .swiper-slide{overflow:hidden; position:relative; margin-right:20rem; width:calc((100% - 40rem) / 3); height:max(575rem, 345px); border-radius:16rem; border:1px solid #E6E6E6; transition:height 0.3s ease;}
#compare-popup .fixed-area .compare-swiper .swiper-slide:last-child{margin-right:0;}
#compare-popup .fixed-area .compare-swiper .swiper-slide:has(.series-select){border:2px dashed #E6E6E6}
#compare-popup .fixed-area .compare-swiper .swiper-slide .img{overflow:hidden; position:relative; height:331rem; background:url("/common/de/images/icon-no-img.svg") no-repeat center center/240rem auto #8D9093; transition:height 0.3s ease;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .img img{width:100%; height:100%; min-height: 331rem; object-fit: cover;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .x-btn{display:none;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .img:has(img) ~ .x-btn{display:block; position:absolute; top:16rem; right:16rem; width:max(28rem, 20px); height:max(28rem, 20px); background:url("/common/de/images/icon-pop-close-wht.svg") no-repeat center center/cover}
#compare-popup .fixed-area .compare-swiper .swiper-slide:first-child .x-btn{display:none !important;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .select-area{position:relative; padding:max(40rem, 30px) 32rem max(80rem, 50px); background:#f8f8f8;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .series-select{display:flex; align-items: center; justify-content: center; height:100%; background:#F8F8F8;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .sel-flex-box{display:flex; align-items: center; margin-top:12rem;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .sel-flex-box:first-child{margin-top:0;}
#compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .f-body2-m{width:max(80rem, 70px);}
#compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .form-select{width:calc(100% - 80rem);}
#compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .arrow-btn{display:none; position:absolute; right:32rem; bottom:max(40rem, 10px);}
#compare-popup .fixed-area .compare-swiper .swiper-slide .series-select p{padding:80rem 10rem 0; text-align:center; background:url("/common/de/images/icon-series-model-select.svg") no-repeat center top/64rem auto;}
#compare-popup .fixed-area .compare-swiper .swiper-pagination{display:none;}
#compare-popup .fixed-area .swiper-tab-btn{margin-top:72rem; padding-bottom:20rem;}
#compare-popup .fixed-area.scroll{position:fixed; width:calc(100% - (234rem + 20px));}
#compare-popup .fixed-area.scroll .pop-head .left .tit{height:0;}
#compare-popup .fixed-area.scroll .pop-head .left .txt{height:0;}
#compare-popup .fixed-area.scroll .compare-swiper .swiper-slide{height:max(246rem, 169px)}
#compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .img{height:0;}
#compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .img:has(img) ~ .x-btn{top:16rem; right:16rem; width:max(16rem, 14px); height:max(16rem, 14px); background:url("/common/de/images/icon-close-gray.svg") no-repeat center center/cover}
#compare-popup .fixed-area.compare .compare-swiper .swiper-slide .select-area .arrow-btn{display:block;}
#compare-popup .pop-wrap .scroll-area{position:relative;}
#compare-popup .pop-wrap .scroll-area .pop-cont{position:relative; padding-top:max(830rem, 516px); transition:padding 0.3s ease;}
#compare-popup .pop-wrap .scroll-area .table-sec:first-child{margin-top:32rem;}
#compare-popup .pop-wrap .scroll-area .fixed-area.scroll ~ .pop-cont{padding-top:max(540rem, 400px);}

@media all and (max-width: 1023px) {
  .total-num-area{position:relative; flex-wrap:wrap; flex-direction: column-reverse; align-items: flex-start;}
  .total-num-area .right{margin-bottom:40rem; width:100%;}
  .total-num-area .right .list-view-btn{position:absolute; bottom:2rem; right:0; width:20rem; height:20rem; border:0; border-radius: 0; background-size:20rem auto;}

  .list-order-wrap .list .img{background-size:140rem auto;}

  .list-order-wrap.thumbnail-type{gap: 16rem 0;}
  .list-order-wrap.thumbnail-type .list{padding:24rem; width:100%; border-radius:8rem;}
  .list-order-wrap.thumbnail-type .list:nth-child(2n).active{transition-delay:0s}
  .list-order-wrap.thumbnail-type .list .info-con{justify-content: flex-end;}
  .list-order-wrap.thumbnail-type .list .info-con .txt-div .txt{margin-top:8rem;}
  .list-order-wrap.thumbnail-type .list .info-con .series-info-wrap{display:none;}
  .list-order-wrap.thumbnail-type .list .info-con .arrow-btn{display:block; margin-top:12rem;}
  .list-order-wrap.list-type .list{flex-wrap:wrap;}
  .list-order-wrap.list-type .list .img{width:100%; height:350rem;}
  .list-order-wrap.list-type .list .info-con{padding:20rem 20rem 24rem; width:100%;}
  .list-order-wrap.list-type .list .info-con .txt-div .txt{margin-top:8rem;}
  .list-order-wrap.list-type .list .info-con .series-info-wrap .tit {font-size: 14rem;}
  .list-order-wrap.list-type .list .info-con .series-info-wrap{flex-wrap:wrap; gap:8rem 0; padding:16rem 16rem 20rem; width:100%; border-radius:4rem; background:#F8F8F8;}
  .list-order-wrap.list-type .list .info-con .series-info-wrap .info-w{flex-wrap:nowrap; flex-direction: row; justify-content: space-between; width:100%;}
  .list-order-wrap.list-type .list .info-con .series-info-wrap .info-w .tit-w{display:flex; align-items: center; width:50%;}
  .list-order-wrap.list-type .list .info-con .series-info-wrap .info-w .tit-w .txt{margin:0 0 0 4rem;}
  .list-order-wrap.list-type .list .info-con .series-info-wrap .info-w .number{width:50%; text-align: right;}

  .list-order-wrap + .btn-wrap{margin-top:32rem;}

  .compare-fixed-btn{padding:12rem 20rem;}
  .compare-fixed-btn p span{display:none;}

  #compare-popup .pop-wrap{padding:20rem 0 0;}
  #compare-popup .pop-wrap .close-btn{position:absolute; top:27rem; right:20rem; z-index: 3;}
  #compare-popup .fixed-area{padding-right:0; width:100%;}
  #compare-popup .fixed-area .pop-head{margin-bottom:6rem; padding-left:20rem;}
  #compare-popup .fixed-area .pop-head .left{margin-bottom:0;}
  #compare-popup .fixed-area .pop-head .right .btn-wrap{position:fixed; bottom:0; left:0; padding:20rem; width:100%; background:#fff; z-index:2;}
  #compare-popup .fixed-area .pop-head .right .btn-wrap .border-btn2{width:100%;}
  #compare-popup .pop-wrap .scroll-area{padding:0 20rem 20rem 0; width:100%;}
  #compare-popup .pop-wrap .pop-cont{padding:650rem 0 0 20rem;}
  #compare-popup .fixed-area .compare-swiper{width:100%;}
  #compare-popup .fixed-area .compare-swiper .swiper-container{padding:0 20rem 26rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide{margin-right:8rem; width:70%; height:496rem; border-radius:8rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .img{height:250rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .img img {min-height: 250rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .select-area{padding:20rem 16rem 52rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .sel-flex-box{flex-wrap:wrap; margin-top:16rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .f-body2-m{overflow:hidden; width:100%;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .form-select{margin-top:8rem; width:100%;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .select-area .arrow-btn{bottom:20rem; right:16rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-pagination{display:block; top:auto; bottom:0; left:20rem; width:calc(100% - 40rem); height:2px; background:#ddd;}
  #compare-popup .fixed-area .compare-swiper .swiper-pagination .swiper-pagination-progressbar-fill{background:#2D2926;}
  #compare-popup .fixed-area .swiper-tab-btn{padding-bottom:16rem;}

  #compare-popup .fixed-area.compare{padding-bottom:0;}
  #compare-popup .fixed-area.compare .pop-head{position:static}
  #compare-popup .fixed-area.compare .pop-head .right .btn-wrap{position:absolute; bottom:95rem; left:0; padding:0 20rem; width:100%;}
  #compare-popup .fixed-area.compare .swiper-tab-btn{overflow:hidden; margin-top:120rem; padding:calc(16rem + 8px) 20rem 16rem;}
  #compare-popup .fixed-area.compare .swiper-tab-btn:after{display:block; content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:100vw; height:8px; background:#f8f8f8;}

  #compare-popup .fixed-area.scroll{width:100%; padding-bottom:0;}
  #compare-popup .fixed-area.scroll .pop-head{margin-bottom:0; padding-bottom:10rem;}
  #compare-popup .fixed-area.scroll .pop-head .left .tit{height:auto;}
  #compare-popup .fixed-area.scroll .compare-swiper .swiper-slide{height:169rem;}
  #compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .select-area .f-body2-m{height:0;}  
  #compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .select-area{padding:36rem 20rem 20rem;}
  #compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .select-area .sel-flex-box{margin-top:8rem;}
  #compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .select-area .form-select{margin-top:0;}
  #compare-popup .fixed-area.scroll .compare-swiper .swiper-slide .select-area .arrow-btn{display:none;}
}

@media all and (max-width: 599px) {
  .list-order-wrap.thumbnail-type .list{height:240rem;}
  .list-order-wrap.thumbnail-type .list .img:before{display:none;}
  .list-order-wrap.thumbnail-type .list .img:has(img):before{display:none;}
  .list-order-wrap.thumbnail-type .list .img:after{height:190rem;}

  .list-order-wrap.list-type .list .img{height:260rem;}

  #compare-popup .fixed-area .compare-swiper .swiper-slide{height:416rem;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .img{height:170rem; background-size:140rem auto;}
  #compare-popup .fixed-area .compare-swiper .swiper-slide .img img {min-height: 170rem;}
  #compare-popup .pop-wrap .scroll-area .pop-cont{padding-top:720rem;}

  #compare-popup .fixed-area.compare .pop-head .right .btn-wrap{bottom:70rem; transition:bottom 0.3s ease;}
  #compare-popup .fixed-area.compare .swiper-tab-btn{margin-top:100rem;}

  #compare-popup .fixed-area.scroll .pop-head .right .btn-wrap{bottom:75rem}
  #compare-popup .pop-wrap .scroll-area .fixed-area.scroll ~ .pop-cont{padding-top:490rem}
}


/* ---- Prdocuts Detaild ---- */
/* visual */
.visual-area.type2:after{display:block; content:""; position:absolute; top:0; right:-100%; width:200%; height:200%; background:#2D2926; clip-path:polygon(0 0, 100% 0%, 75% 100%, 0% 100%); transition:right 0.8s ease; z-index:1;}
.visual-area.type2.hide-bg:after{right:100%;}
.visual-area.type2 .visual-wrap .visual-swiper .swiper-slide .bg {position: relative;}
.visual-area.type2 .visual-wrap .visual-swiper .swiper-slide .bg::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, .3) 25.43%, rgba(0, 0, 0, .4) 89.29%);}
.visual-area.type2 .visual-wrap .visual-swiper .swiper-slide .drag-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.visual-area.type2 .txt-wrap .txt-box {position: absolute; max-width: calc(45% - 260rem); left: 240rem; bottom: 158rem; z-index: 1;}
.visual-area.type2 .txt-wrap .swiper-box {position: absolute; max-width: calc(55% - 260rem); right: 240rem; bottom: 158rem; z-index: 1;}
.visual-area.type2 .txt-wrap .txt-box .tits .title {margin-bottom: 16rem;}
.visual-area.type2 .txt-wrap .txt-box .tits .title .tit {font-size: max(80rem, 40px); color: #fff;}
.visual-area.type2 .txt-wrap .txt-box .tits .txt {color: #fff;}
.visual-area.type2 .txt-wrap .txt-box .control-area {position: unset; justify-content: flex-start; width: auto; margin-top: 40rem;}
.visual-area.type2 .txt-wrap .txt-box .control-area .pagination-wrap {margin-right: 0; margin-left: 40rem;}
.visual-area.type2 .txt-wrap .swiper-box {margin-top: 122rem;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper {overflow: visible;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper:not(.swiper-container-initialized) .swiper-wrapper {flex-wrap: wrap;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-wrapper {column-gap: 40rem; row-gap: 16rem;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide {display: flex; flex-direction: column; justify-content: space-between; width: auto; height: auto;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide p {color: #fff;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide p span {color: #fff;}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide p span.unit {margin-left: 5rem; font-size: max(18rem, 14px);}
.visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide .td {margin-top: 3rem; font-size: max(32rem, 16px);}
  /* page init motion */
  .visual-area.type2 .txt-wrap .txt-box .tits .title p > span {position: relative; opacity: 0; top: 80rem; transition: top 1s ease, opacity 1s ease;}
  .visual-area.type2 .txt-wrap.active .txt-box .tits .title p > span {top: 0; opacity: 1;}
  .visual-area.type2 .txt-wrap .txt-box .tits .txt {position: relative; opacity: 0; top: 40rem; transition: top 1s ease, opacity 1s ease; transition-delay: .2s;}
  .visual-area.type2 .txt-wrap.active .txt-box .tits .txt {top: 0; opacity: 1;}
  .visual-area.type2 .txt-wrap .swiper-box {opacity: 0; transition: top 1s ease, opacity 1s ease; transition-delay: .2s; transition-delay: 1.1s;}
  .visual-area.type2 .txt-wrap.active .swiper-box {opacity: 1;}

/* features */
.features-area {position: relative; padding-top: 0; background-color: #2D2926;}
.features-area .inner {display: flex; flex-direction: column; justify-content: space-between; padding: 120rem 0;}
.features-area .tit-wrap {z-index: 2; margin-bottom: 645rem !important;}
.features-area .tit-wrap .tit {margin-bottom: 20rem; color: #fff !important;}
.features-area .tit-wrap .txt {color: #fff;}
.features-area .img-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden;}
.features-area .img-wrap .item {visibility: hidden; position: absolute; bottom: 186rem; left: 50%; transform: translateX(-50%); height: 700rem; width: 850rem; transition: visibility .4s ease;}
.features-area .img-wrap .item.on {visibility: visible;}
.features-area .img-wrap .item .img {opacity: 0; transition: opacity .6s ease; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;}
.features-area .img-wrap .item.on .img {opacity: 1; transition-delay: 1s;}
.features-area .img-wrap .item .img img {width: 100%; height: 100%; object-fit: contain;} 
.features-area .img-wrap .item .txt {position: absolute; top: 50%; left: 50%; height: 400rem; transform: translate(-50%, -50%); overflow: hidden;}
.features-area .img-wrap .item .txt span {top: 400rem; opacity: 0; position: relative; padding: 0 40rem; font-family: "InterTight-BlackItalic"; font-size: 400rem; line-height: 1; color: #fff; white-space: nowrap; transition: top .8s ease, opacity .8s ease;}
.features-area .img-wrap .item.on .txt span {top: 0; opacity: 0.05; transition-delay: .4s;}
.features-area .img-wrap .item .img .img-map {position: absolute; transform: translate(-50%, -50%); z-index: 3; display: inline-block; width: 20rem; height: 20rem; border-radius: 100%; background-color: #fff; transition: background .2s ease;}
.features-area .img-wrap .item .img .img-map::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; background: url("/common/de/images/icon-popin-circle.svg") no-repeat center center / 100% auto; transition: background .2s ease; animation: circleAni 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
.features-area .img-wrap .item .img .img-map.on {background-color: #DE4826;}
.features-area .img-wrap .item .img .img-map.on::after {background-image: url("/common/de/images/icon-popin-circle-on.svg");}
  /* Interior */
  .features-area .img-wrap .item:nth-child(4) {top: 0; width: 100%; height: 100%;}
  .features-area .img-wrap .item:nth-child(4) .img img {object-fit: cover;}
  .features-area .img-wrap .item:nth-child(4) .img::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4);}
  .features-area .img-wrap .item.interior {top: 0; width: 100%; height: 100%;}
  .features-area .img-wrap .item.interior .img img {object-fit: cover;}
  .features-area .img-wrap .item.interior .img::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4);}
@keyframes circleAni {
  0% {width: 0; height: 0; opacity: 1;}
  60% {opacity: 1;}
  100% {width: 80rem; height: 80rem; opacity: 0;}
}
.features-area .img-btn-wrap {flex-shrink: 0; margin: 0 auto; max-width: 100%;}
.features-area .img-pop-wrap:not(.on) {pointer-events: none;}
.features-area .img-pop-wrap {position:absolute; top: 160rem; right: 120rem; z-index: 3; width: max(400rem, 250px); height: 560rem; border-radius: 16rem; background: #fff; overflow: hidden;}
.features-area .img-pop-wrap {visibility: hidden; transform: translateY(80rem); opacity:0; transition: visibility .6s ease, transform .6s ease, opacity .6s ease;}
.features-area .img-pop-wrap.on {visibility: visible; transform: translateY(0); opacity: 1;}
.features-area .img-pop-wrap .pop-cont {position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0; width: 100%; height: 100%; background-color: #fff;}
.features-area .img-pop-wrap .pop-cont.on {visibility: visible; opacity: 1;}
.features-area .img-pop-wrap .pop-list {height: 100%;}
.features-area .img-pop-wrap .img-box {position: relative; width: 100%; height: 280rem; background: url("/common/de/images/icon-no-img.svg") no-repeat center center / 240rem auto #8D9093;}
.features-area .img-pop-wrap .img-box::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.00) 28.46%);}
.features-area .img-pop-wrap .img-box img {width: 100%; height: 100%; object-fit: cover;}
.features-area .img-pop-wrap .txt-box {height: calc(100% - 280rem); padding: 40rem 10rem 40rem 40rem;}
.features-area .img-pop-wrap .txt-box .tit ~ .txt {margin-top: 20rem; color: #888;}
.features-area .img-pop-wrap .txt-box .scroll-area {height: 100%; overflow: auto; padding-right: calc(30rem - 4px);}
.features-area .img-pop-wrap .txt-box .scroll-area::-webkit-scrollbar {width: 4px; background: transparent;}
.features-area .img-pop-wrap .txt-box .scroll-area::-webkit-scrollbar-thumb {width: 4px; background: #ddd; border-radius: 2px;}
.features-area .img-pop-wrap .close-btn {position: absolute; top: 16rem; right: 16rem; z-index: 2; width: max(20rem, 18px); height: max(20rem, 18px); background: url("/common/de/images/icon-close-wht-20.svg") no-repeat center center / 100% auto;}
  /* page init motion */
  .features-area .tit-wrap {position:relative; top:80rem; opacity:0; transition: top 1s ease, opacity 1s ease;}
  .features-area .tit-wrap.on {top:0; opacity:1;}
  .features-area.init .tit-wrap {position:relative; top:80rem; opacity:0; transition: top 1s ease, opacity 1s ease;}
  .features-area.init .img-wrap .item .img {opacity: 0; transition: top .6s ease, opacity .6s ease;}
  .features-area.init .img-wrap .item .txt span {top: 400rem; transition: top .8s ease, opacity .8s ease;}
  .features-area.init .img-pop-wrap {transform: translateY(80rem); opacity: 0; transition: transform .6s ease, opacity .6s ease;} 
  .features-area.init.active .img-wrap .item .img {opacity: 1; transition-delay: 1s;}
  .features-area.init.active .img-wrap .item .txt span {top: 0; opacity: 0.05; transition-delay: .4s;}
  .features-area.init.active .img-pop-wrap {transform: translateY(0); opacity:1; transition-delay: 1.4s;} 

/* highlight */
#Highlight {overflow: hidden;}
.highlight-area:nth-of-type(odd) {padding: 144rem 0;}
.highlight-area:nth-of-type(even) {padding: 120rem 0; background-color: #F8F8F8}
.highlight-area:last-child:is(:nth-of-type(2n+1)) {padding-bottom: 0;}
section:has(.find-banner) + .inquiry-area {padding-top: 0;}
#Highlight:has(.highlight-area:last-child:is(:nth-of-type(2n))) + .inquiry-area {padding-top: 0;}
#Highlight:has(.highlight-area .message-wrap) + .inquiry-area {padding-top: 0;}
.highlight-area:first-of-type {padding-top: 0}
.highlight-area:has(.message-wrap) {padding: 0 !important;}

.highlight-area .highlight-swiper-area2 .txt-wrap {margin-bottom: 80rem;}
.highlight-area .sub-tit-wrap {margin-bottom: 40rem;}
.highlight-area .sub-tit-wrap.flex {display: flex; justify-content: space-between;}
.highlight-area .sub-tit-wrap.flex .tit {flex-shrink: 0; width: 390rem; margin-right: 100rem;}
.highlight-area .sub-tit-wrap:not(.flex) .txt {margin-top: 24rem;}

.highlight-area:has(.highlight-list) .sub-tit-wrap {margin-bottom: 80rem;}
.highlight-area .highlight-list {display: flex; flex-wrap: wrap; gap: 16rem;}
.highlight-area .highlight-list .item {flex-grow: 1; height: 580rem; border-radius: 20rem; overflow: hidden;}
.highlight-area .highlight-list .item .img {height: 100%;}
.highlight-area .highlight-list .item .img img {width: 100%; height: 100%; object-fit: cover;}
.highlight-area .highlight-list .item:nth-child(1) {flex-basis: 100%;}
.highlight-area .highlight-list .item:nth-child(2) {flex-basis: calc(50% - 8rem);}
.highlight-area .highlight-list .item:nth-child(3) {flex-basis: calc(50% - 8rem);}
  /* when, 2 items */
  .highlight-area .highlight-list:has(.item:nth-child(2)) .item:nth-child(1) {flex-basis: calc(50% - 8rem);}
  /* when, 3 items */
  .highlight-area .highlight-list:has(.item:nth-child(3)) .item:nth-child(1) {flex-basis: 100%;}
    /* motion */
    .highlight-area .highlight-list .scroll-motion {position: relative; top: 80rem; opacity: 0;}
    .highlight-area .highlight-list .scroll-motion.active {top: 0; opacity: 1; transition: top 1s ease, opacity 1s ease;}
    /* motion - when, 2 items */
    .highlight-area .highlight-list:has(.item:nth-child(2)) .scroll-motion:nth-child(2) {transition-delay: .15s;}
    .highlight-area .highlight-list:has(.item:nth-child(3)) .scroll-motion:nth-child(2) {transition-delay: 0s;}
    /* motion - when, 3 items */
    .highlight-area .highlight-list:has(.item:nth-child(3)) .scroll-motion:nth-child(3) {transition-delay: .15s;}

.highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .img {height: 318rem; border-radius: 8rem; overflow: hidden; background: url("/common/de/images/icon-no-img.svg") no-repeat center center/140rem auto #8D9093;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .img img {width: 100%; height: 100%; object-fit: cover;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .txt-box {margin-top: 24rem;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .txt-box .tit ~ .txt {margin-top: 20rem;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .txt-box .tit {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .txt-box .txt {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-overflow: ellipsis; overflow: hidden; color: #888;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-prev.swiper-button-disabled, .highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-next.swiper-button-disabled {border: 1px solid #aaa;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-prev, .highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-next {position: absolute; margin-top: calc(-1 * var(--swiper-navigation-size)/ 2); width: 56rem; height: 56rem; border: 1px solid #2D2926; border-radius: 8rem; background-size: 32rem;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-prev {left: -96rem;}
.highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-next {right: -96rem;}

.highlight-area .highlight-swiper-area2 ~ .highlight-swiper-area2 {margin-top: 120rem;}
.highlight-area .highlight-swiper-area2 .txt-wrap {display: flex; justify-content: space-between;}
.highlight-area .highlight-swiper-area2 .txt-wrap .tit-box {flex-shrink: 0; width: 450rem; margin-right: 100rem;}
.highlight-area .highlight-swiper-area2 .txt-wrap .txt-box {display: flex;}
.highlight-area .highlight-swiper-area2 .txt-wrap .txt-box .txts {width: 700rem; margin-right: 27rem;} 
.highlight-area .highlight-swiper-area2 .txt-wrap .txt-box .txts p {color: #888;}
.highlight-area .highlight-swiper-area2 .txt-wrap .txt-box .swiper-button-wrap {flex-shrink: 0;}
.highlight-area .highlight-swiper-area2 .highlight-swiper2 {padding-bottom: 48rem;}
.highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-container {overflow: visible;}
.highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-pagination {bottom: -48rem; line-height: 1; font-size: 0;}
.highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-slide {height: 500rem; border-radius: 16rem; overflow: hidden;}
.highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.highlight-area .highlight-swiper-area2 .swiper-button-next.swiper-button-disabled, .highlight-area .highlight-swiper-area2 .swiper-button-prev.swiper-button-disabled {opacity: .15;}

.highlight-area .video {width: 100%; height: 800rem; border-radius: 16rem; overflow: hidden;}
.highlight-area .video iframe {width: 100%; height: 100%; object-fit: cover;}

.highlight-area .accordion-area {display: flex; justify-content: space-between;}
.highlight-area .accordion-img-list {position: relative; width: 660rem; height: 460rem; border-radius: 16rem; overflow: hidden;}
.highlight-area .accordion-img-list .accordion-img-item {visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/common/de/images/icon-no-img.svg") no-repeat center center / 240rem auto #8D9093; transition: all .4s ease;}
.highlight-area .accordion-img-list .accordion-img-item.prev {visibility: visible; opacity: 1;}
.highlight-area .accordion-img-list .accordion-img-item.on {visibility: visible; opacity: 1;}
.highlight-area .accordion-img-list .accordion-img-item.next {visibility: hidden; opacity: 0;}
.highlight-area .accordion-img-list .accordion-img-item img {width: 100%; height: 100%; object-fit: cover;}
.highlight-area .accordion-wrap {width: 700rem;}
.highlight-area .accordion-wrap .accordion-list {margin-top: 20rem;}
.highlight-area .accordion-list {border-top: 1px solid #2D2926;}
.highlight-area .accordion-list .accordion-item {border-bottom: 1px solid #E6E6E6;}
.highlight-area .accordion-list .accordion-item .accordion-head a {position: relative; display: inline-block; width: 100%; padding: 24rem 60rem 24rem 20rem;}
.highlight-area .accordion-list .accordion-item .accordion-head a:after {content: ""; position: absolute; top: 50%; right: 20rem; transform: translateY(-50%); width: 20rem; height: 20rem; background: url("/common/de/images/icon-arrow-down-gray.svg") no-repeat center center / 100% auto; transition: .4s ease;}
.highlight-area .accordion-list .accordion-item.on .accordion-head a:after {background-image: url("/common/de/images/icon-arrow-down.svg"); transform: translateY(-50%) rotate(180deg);}
.highlight-area .accordion-list .accordion-item .accordion-body {display: none; padding: 0 20rem 24rem;}
.highlight-area .accordion-list .accordion-item:first-child .accordion-body {display: block;}
.highlight-area .accordion-list .accordion-item .accordion-body p {color: #888;}

.highlight-area .message-wrap {position: relative; padding: 120rem 0; overflow: hidden; background-color: #2D2926;}
.highlight-area .message-wrap .bg-wrap {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.highlight-area .message-wrap .bg-wrap img {width: 100%; height: 100%; object-fit: cover;}
.highlight-area .message-wrap .txt-wrap {text-align: center;}
.highlight-area .message-wrap .txt-wrap .tits .tit {margin-bottom: 20rem; color: #DE4826;}
.highlight-area .message-wrap .txt-wrap .tits .txt {color: #fff;}
.highlight-area .message-wrap .txt-wrap .txts {margin-top: 48rem;}
.highlight-area .message-wrap .txt-wrap .txts .txt {position: relative; padding-top: 45rem; color: #fff;}
.highlight-area .message-wrap .txt-wrap .txts .txt::before {content: ""; position: absolute; top: 0; left: 50%; width: 28rem; height: 22rem; transform: translateX(-50%); background: url("/common/de/images/icon-mark.svg") no-repeat center center / 100% auto;}
.highlight-area .message-wrap .txt-wrap .txts .name {display: inline-block; margin-top: 16rem; color: #aaa;}

.highlight-area .table-sec .basic-table th {background-color: #F8F8F8 !important; vertical-align: middle;}
.highlight-area .table-sec .basic-table thead th {text-align: center;}
.highlight-area .table-sec .basic-table {text-align: center;}
.highlight-area .table-sec .basic-table tr td:nth-of-type(1) {background-color: rgb(222, 72, 38, 0.05);}

/* inquiry */
section:not(:first-child).inquiry-area .con-wrap {padding-top: 144rem;}

/* gallery */
.gallery-area .gallery-swiper .swiper-slide {position: relative; height: 680rem; border-radius: 16rem; overflow: hidden;}
.gallery-area .gallery-swiper .swiper-slide:after {content: ""; position: absolute; bottom: 0; right: 0; width: 80rem; height: 80rem; border-radius: 16rem 0 0 0; background: url("/common/de/images/icon-download-wht-40.svg") no-repeat center center / 40rem auto #2D2926; transition: background .2s ease;}
.gallery-area .gallery-swiper .swiper-slide:hover:after {background-color: #DE4826;}
.gallery-area .gallery-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover;}
.gallery-area .gallery-swiper .swiper-button-prev, .gallery-area .gallery-swiper .swiper-button-next {position: absolute; width: 56rem; height: 56rem; transform: translateY(-50%); border: 1px solid #2D2926; border-radius: 8rem; background-size: 32rem;}
.gallery-area .gallery-swiper .swiper-button-prev {left: -96rem;}
.gallery-area .gallery-swiper .swiper-button-next {right: -96rem;}

.specifi-area{overflow:hidden}
.specifi-area .inner{overflow:hidden}

/* fixed */
.page-nav.fix {position: fixed; bottom: unset; top: -130rem; padding-top: 130rem; transition: top .6s ease;}
.page-nav.scroll {top: 0 !important; transition: top .6s ease;}
.page-nav {position: absolute; bottom: 0; left: 0; right: 0; z-index: 9; width: 100%; background-color: #2D2926; transition: top .6s ease}
.page-nav .gauge {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 2px; background-color: #fff;}
.page-nav .gauge .bar {position: absolute; bottom: 0; height: 2px; left: 0; width: 0; background-color: #DE4826;}
.page-nav .fixed {width: 100%; height: 78rem;}
.page-nav .fixed .inner {width: 1840rem; height: 100%; display: flex; justify-content: space-between; align-items: center;}
.page-nav .fixed .left .series a {color: #fff; pointer-events: none;}
.page-nav .fixed .right {display: flex; align-items: center;}
.page-nav .fixed .right .menu-wrap .menu {display: flex; margin-right: 32rem; column-gap: 32rem;}
.page-nav .fixed .right .menu-wrap .menu a {color: #aaa}
.page-nav .fixed .right .menu-wrap .menu a.on {color: #fff;}
.page-nav .fixed .right .link {display: flex; column-gap: 32rem;}
.page-nav .fixed .right .link a {position: relative; padding-left: max(32rem, 28px); color: #fff;}
.page-nav .fixed .right .link a {position: relative; padding-left: max(32rem, 28px); color: #fff;}
.page-nav .fixed .right .link a::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: max(24rem, 20px); height: max(24rem, 20px); background: url("") no-repeat center center / 100% auto;}
.page-nav .fixed .right .link a.dealer {color: #DE4826;}
.page-nav .fixed .right .link a.dealer::before {background-image: url("/common/de/images/icon-find-dealer.svg");}
.page-nav .fixed .right .link a.contact::before {background-image: url("/common/de/images/icon-contact.svg");}

@media all and (max-width: 1023px) {
  /* visual */
  .visual-area.type2 .txt-wrap .txt-box {top: 135rem; bottom: unset; left: 20rem; width: calc(100% - 40rem); max-width: unset;}
  .visual-area.type2 .txt-wrap .txt-box .tits .title .tit {font-size: 32rem}
  .visual-area.type2 .txt-wrap .swiper-box {bottom: 138rem; left: 20rem; right: unset; width: calc(100% - 40rem); max-width: unset;}
  .visual-area.type2 .txt-wrap .txt-box .control-area {margin-top: 33rem;}
  .visual-area.type2 .txt-wrap .txt-box .control-area .pagination-wrap {margin-left: 24rem;}
  .visual-area.type2 .txt-wrap .swiper-box {margin-top: 40rem;}
  .visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-wrapper {column-gap: unset;}
  .visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide .td {margin-top: 8rem; font-size: 20rem;}
  .visual-area.type2 .txt-wrap .swiper-box .visual-txt-swiper .swiper-slide p span.unit {margin-left: 4rem; font-size: 18rem;}
    /* page init motion */

  /* features */
  .features-area .inner {padding: 80rem 0;}
  .features-area .tit-wrap {margin-bottom: 639rem !important;}
  .features-area .tit-wrap .tit {margin-bottom: 16rem;}
  .features-area .img-wrap .item {bottom: 156rem; width: calc(100% - 80rem); height: 551rem;}
  .features-area .img-wrap .item .txt {height: 240rem;}
  .features-area .img-wrap .item .txt span {top: 240rem; font-size: 240rem;}
  .features-area .img-pop-wrap {position: fixed; top: 50%; right: unset; z-index: 100; transform: translateY(-50%); width: calc(100% - 40rem); max-height: 80%; height: 474rem;}
  .features-area .img-pop-wrap.on {transform: translateY(-50%);}
  .features-area .img-pop-wrap .img-box {height: 210rem; background-size: 140rem auto;}
  .features-area .img-pop-wrap .txt-box {height: calc(100% - 210rem); padding: 24rem 10rem 24rem 24rem;}
  .features-area .img-pop-wrap .txt-box .tit ~ .txt {margin-top: 16rem;}
  .features-area .img-pop-wrap .txt-box .scroll-area {padding-right: calc(14rem - 4px);}
  .features-area .img-pop-wrap .close-btn {width: 20rem; height: 20rem;}
  .features-area .img-wrap .item .img .img-map {width: 12rem; height: 12rem;}
  .features-area .img-wrap .item .img .img-map::after {background-image: url("/common/de/images/icon-popin-circle-mob.svg");}
  .features-area .img-wrap .item .img .img-map.on::after {background-image: url("/common/de/images/icon-popin-circle-on-mob.svg");}
  /* Interior */
  .features-area .img-wrap .item:nth-child(4) {bottom: 156rem; top: unset; width: 100%; height: 520rem;}
  .features-area .img-wrap .item.interior {bottom: 156rem; top: unset; width: 100%; height: 520rem;}
  @keyframes circleAni {
    0% {width: 0; height: 0; opacity: 1;}
    60% {opacity: 1;}
    100% {width: 48rem; height: 48rem; opacity: 0;}
  }
      /* page init motion */
    .features-area.init .img-pop-wrap {transform: unset; opacity: 0; transition: unset;} 
    .features-area.init.active .img-pop-wrap {transform: unset; opacity: 0; transition-delay: 0s;} 

  /* highlight */
  .highlight-area:nth-of-type(odd) {padding: 80rem 0;}
  .highlight-area:nth-of-type(even) {padding: 80rem 0;}

  .highlight-area .highlight-swiper-area2 .txt-wrap {margin-bottom: 40rem;}
  .highlight-area .sub-tit-wrap {margin-bottom: 20rem;}
  .highlight-area .sub-tit-wrap.flex {display: block;}
  .highlight-area .sub-tit-wrap.flex .tit {width: 100%; margin-right: 0;}
  .highlight-area .sub-tit-wrap:not(.flex) .txt {margin-top: 20rem;}
  .highlight-area .sub-tit-wrap .txt {margin-top: 20rem;}

  .highlight-area:has(.highlight-list) .sub-tit-wrap {margin-bottom: 40rem;}
  .highlight-area .highlight-list {gap: 8rem;}
  .highlight-area .highlight-list .item {height: 240rem; border-radius: 4rem;}

  .highlight-area .highlight-swiper-area {display: block;}
  .highlight-area .highlight-swiper-area .txt-wrap {width: 100%; margin-right: 0; margin-bottom: 40rem;}
  .highlight-area .highlight-swiper-area .txt-wrap .swiper-button-wrap {margin-top: 32rem;}
  .highlight-area .highlight-swiper-area .highlight-swiper {width: 100%;}
  .highlight-area .highlight-swiper-area .highlight-swiper .swiper-container {overflow: visible;}
  .highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .img {height: 200rem;}
  .highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .txt-box {margin-top: 20rem;}
  .highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .txt-box .tit ~ .txt {margin-top: 16rem;}
  .highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-prev, .highlight-area .highlight-swiper-area .highlight-swiper .swiper-button-next {display: none;}

  .highlight-area .highlight-swiper-area2 ~ .highlight-swiper-area2 {margin-top: 80rem;}
  .highlight-area .highlight-swiper-area2 .txt-wrap {display: block;}
  .highlight-area .highlight-swiper-area2 .txt-wrap .tit-box {width: 100%; margin-right: 0;}
  .highlight-area .highlight-swiper-area2 .txt-wrap .txt-box {display: block; width: 100%; margin-right: 0; margin-top: 20rem;}
  .highlight-area .highlight-swiper-area2 .txt-wrap .txt-box .txts {width: 100%; margin-right: 0;}
  .highlight-area .highlight-swiper-area2 .txt-wrap .txt-box .swiper-button-wrap {display: none;}
  .highlight-area .highlight-swiper-area2 .highlight-swiper2 {padding-bottom: 25rem;}
  .highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-slide {height: 480rem;}
  .highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-pagination {bottom: -25rem;}

  .highlight-area .video {height: 400rem;}

  .highlight-area .accordion-area {display: block;}
  .highlight-area .accordion-img-list {width: 100%; height: 300rem; margin-bottom: 40rem;}
  .highlight-area .accordion-wrap {width: 100%;}
  .highlight-area .accordion-list .accordion-item .accordion-head a {padding: 20rem 52rem 20rem 16rem;}
  .highlight-area .accordion-list .accordion-item .accordion-body {display: none; padding: 0 16rem 20rem;}

  .highlight-area .message-wrap {padding: 80rem 0;}
  .highlight-area .message-wrap .bg-wrap {display: none;}
  .highlight-area .message-wrap .txt-wrap .tits .tit {margin-bottom: 16rem;}
  .highlight-area .message-wrap .txt-wrap .txts {margin-top: 40rem;}
  .highlight-area .message-wrap .txt-wrap .txts .txt {padding-top: 27rem;}
  .highlight-area .message-wrap .txt-wrap .txts .txt::before {width: 20rem; height: 15rem;}
  
  .highlight-area:has(.table-scroll-w) .sub-tit-wrap {margin-bottom: 20rem;}

  /* inquiry */
  section:not(:first-child).inquiry-area .con-wrap {padding-top: 0;}
  .find-dealer-area .find-dealer-page .dealer-wrap {padding-bottom: 0;}

  /* gallery */
  .gallery-area .gallery-swiper .swiper-slide {height: 340rem;}
  .gallery-area .gallery-swiper .swiper-slide:after {width: 40rem; height: 40rem; background-image: url("/common/de/images/icon-download-wht-20.svg"); background-size: 20rem auto;}
  .gallery-area .gallery-swiper .swiper-button-prev, .gallery-area .gallery-swiper .swiper-button-next {z-index: 1; width: 24rem; height: 24rem; border: 1px solid #E6E6E6; border-radius: 4rem; background-size: 6rem auto; background-color: rgba(0, 0, 0, .6);}
  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {opacity: 1;}
  .gallery-area .gallery-swiper .swiper-button-prev.swiper-button-disabled {background-image: url("/common/de/images/icon-swiper-btn-prev-gray.svg");}
  .gallery-area .gallery-swiper .swiper-button-next.swiper-button-disabled {background-image: url("/common/de/images/icon-swiper-btn-next-gray.svg");}
  .gallery-area .gallery-swiper .swiper-button-prev {left: 8rem; background-image: url("/common/de/images/icon-swiper-btn-prev-wth.svg");}
  .gallery-area .gallery-swiper .swiper-button-next {right: 8rem; background-image: url("/common/de/images/icon-swiper-btn-next-wth.svg");}

  .gallery-area .gallery-list .item {height: 220rem;}

  /* fixed */
  .page-nav:not(.fix) .fixed .right .menu-wrap {bottom: 100%;}
  .page-nav:not(.fix) .fixed .left .series a:after {transform: translateY(-50%) rotate(180deg);}
  .page-nav:not(.fix) .fixed:has(.menu-wrap.on) .left .series a:after {transform: translateY(-50%) rotate(0);}

  .page-nav.fix .fixed .right .menu-wrap {top: calc(100% - 2px);}
  .page-nav.fix {top: -79rem; padding-top: 79rem;}
  .page-nav .fixed {height: 58rem;}
  .page-nav .fixed .inner {width: calc(100% - 40rem);}
  .page-nav .fixed .left .series a {position: relative; pointer-events: unset; padding-right: 24rem;}
  .page-nav .fixed .left .series a:after {content: ""; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 16rem; height: 16rem; background: url("/common/de/images/icon-arrow-down-wht.svg") no-repeat center center  / 100% auto; transition: transform .4s ease;}
  .page-nav .fixed:has(.menu-wrap.on) .left .series a:after {transform: translateY(-50%) rotate(180deg);}
  .page-nav .fixed .right .menu-wrap {display: none;}
  .page-nav .fixed .right .menu-wrap {position: absolute; left: 0; right: 0;  z-index: 1; width: 100%; padding: 8rem 0; background-color: #2D2926;}
  .page-nav .fixed .right .menu-wrap::after {content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1px; background-color: #423e3b;}
  .page-nav .fixed .right .menu-wrap .menu {flex-direction: column; width: 100%; margin-right: 0;}
  .page-nav .fixed .right .menu-wrap .menu a {padding: 14rem 20rem;;}
  .page-nav .fixed .right .link {column-gap: 24rem;}
  .page-nav .fixed .right .link a {display: inline-block; width: 24rem; height: 24rem; padding: 0;}
  .page-nav .fixed .right .link a::before {position: unset; display: inline-block; width: 100%; height: 100%; transform: translateY(0);}
  .page-nav .fixed .right .link a span {display: none;}
}
@media all and (max-width: 599px) {
  /* features */
  .features-area .tit-wrap {margin-bottom: 395rem !important;}
  .features-area .img-wrap .item {width: 100%; height: 307rem;}
  .features-area .img-wrap .item .txt {height: 180rem;}
  .features-area .img-wrap .item .txt span {top: 180rem; font-size: 180rem;}
    /* Interior */
    .features-area .img-wrap .item:nth-child(4) {width: 100%; height: 278rem;}
    .features-area .img-wrap .item.interior {width: 100%; height: 278rem;}

  /* highlight */
  .highlight-area .highlight-swiper-area .highlight-swiper .swiper-slide .img {height: 165rem;}
  .highlight-area .highlight-swiper-area2 .highlight-swiper2 .swiper-slide {height: 340rem;}
  .highlight-area .accordion-img-list {height: 220rem;}
  .highlight-area .video {height: 200rem;}
  .highlight-area .highlight-list .item {height: 180rem;}

  /* gallery */
  .gallery-area .gallery-swiper .swiper-slide {height: 220rem;}
}
/* --------------------------------------------- Product - END --------------------------------------------- */





/* --------------------------------------------- Newsroom - START --------------------------------------------- */
.view-list-area .view-list{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.view-list-area .view-list .img{overflow:hidden; position:relative; width:100%; border-radius:8rem; background:url("/common/de/images/icon-no-img.svg") no-repeat center center/140rem auto #8D9093}
.view-list-area .view-list .img img{width:100%; height:100%; object-fit: cover;}
.view-list-area .view-list.ended .img:before{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.view-list-area .view-list .txt-div .tit{vertical-align: middle; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; transition: color .2s ease;}
.view-list-area .view-list .txt-div .tit ~ .date {margin-top: 24rem;}
.view-list-area .view-list .txt-div .date ~ .tit {margin-top: 16rem;}
.view-list-area .view-list:hover .txt-div .tit{color: #DE4826;}
.view-list-area .view-list .txt-div .date{color: #888;}
.view-list-area .view-list.facebook .img:after,
.view-list-area .view-list.youtube .img:after,
.view-list-area .view-list.instargram .img:after {overflow:hidden; display:block; content:""; position:absolute; top:0; left:0; width:48rem; height:48rem; background:url("") no-repeat center center / 100% auto #2D2926; border-radius:8rem 0;}
.view-list-area .view-list.facebook .img:after {background-image: url("/common/de/images/icon-sns-facebook-wht-48.svg");}
.view-list-area .view-list.youtube .img:after {background-image: url("/common/de/images/icon-sns-youtube-wht-48.svg");}
.view-list-area .view-list.instargram .img:after {background-image: url("/common/de/images/icon-sns-instargram-wht-48.svg");}
.view-list-area .view-list.ended .img:after{display:block; content:"Werbeaktion beendet"; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:max(210rem, 150px); height:max(53rem, 40px); line-height:max(53rem, 40px); text-align: center; font-family: "InterTight-Bold"; font-size:max(18rem, 16px); color:#888; border:1px solid #888; border-radius:8rem;}
.view-list-area .view-list.new-list .img:after{overflow:hidden; display:block; content:""; position:absolute; top:0; left:0; width:40rem; height:40rem; background:url("/common/de/images/icon-n.svg") no-repeat center center/auto 16rem #DE4826; border-radius:8rem 0;}

.view-list-area .view-list.active{top:0; opacity:1;}
.view-list-area.column3 .view-list.active:nth-child(3n-1){transition-delay:0.1s}
.view-list-area.column3 .view-list.active:nth-child(3n){transition-delay:0.2s}

.view-list-area.column3 {display:flex; gap:40rem; flex-wrap:wrap}
.view-list-area.column3 .view-list{width: calc((100% - 80rem) / 3);}
.view-list-area.column3 .view-list .img {height:278rem;}
.view-list-area.column3 .view-list .txt-div{margin-top:24rem;}
.view-list-area.column3 .view-list .txt-div .arrow-btn{display: none;}

.view-list-area.column1 .view-list:first-child {border-top: 1px solid #2D2926;}
.view-list-area.column1 .view-list {display: flex; align-items: center; width: 100%; padding: 24rem 0; border-bottom: 1px solid #e6e6e6;}
.view-list-area.column1 .view-list .img {flex-shrink: 0; width: 329rem; height: 202rem; margin-right: 56rem;}
.view-list-area.column1 .view-list .txt-div {display: flex; align-items: center; width:100%;}
.view-list-area.column1 .view-list .txt-div > div{width:100%;}
.view-list-area.column1 .view-list .txt-div .arrow-btn {visibility: hidden; opacity: 0; transition: all .2s ease; flex-shrink: 0; margin-left: 56rem;}
.view-list-area.column1 .view-list:hover .txt-div .arrow-btn {visibility: visible; opacity: 1;}

.detail-view-area{display:flex; justify-content: space-between;}
.detail-view-area .prev-btn span{padding-left:max(32rem, 30px); white-space: nowrap; background:url("/common/de/images/icon-detail-view-prev.svg") no-repeat left center/max(24rem, 20rem) auto;}
.detail-view-area .view-con{width:947rem;}
.detail-view-area .view-con .tit-area{padding-bottom:40rem; border-bottom:1px solid #2D2926}
.detail-view-area .view-con .date{margin-bottom:12rem; color:#aaa;}
.detail-view-area .view-con .con-area{padding:40rem 0 96rem;}
.detail-view-area .view-con .con-area img{margin-bottom:40rem; max-width:100%; border-radius: 16rem;}
.detail-view-area .view-con .con-area table img {margin-bottom: 0; border-radius: 0; object-fit: cover;}
.detail-view-area .view-con .page-move{border-top:1px solid #e6e6e6;}
.detail-view-area .view-con .page-move > a{display:flex; align-items: center; position:relative; padding:24rem max(32rem, 28px) 24rem 0; border-bottom:1px solid #E6E6E6}
.detail-view-area .view-con .page-move .tit{display:block; position:relative; width:calc(100% - 123rem);}
.detail-view-area .view-con .page-move .prev-list-btn .tit:after{display:block; content:""; position:absolute; top:50%; right:-30rem; transform:translateY(-50%); width:max(24rem, 20px); height:max(24rem, 20px); background:url("/common/de/images/icon-list-view-prev.svg") no-repeat center center/24rem auto}
.detail-view-area .view-con .page-move .next-list-btn .tit:after{display:block; content:""; position:absolute; top:50%; right:-30rem; transform:translateY(-50%); width:max(24rem, 20px); height:max(24rem, 20px); background:url("/common/de/images/icon-list-view-next.svg") no-repeat center center/24rem auto}
.detail-view-area .view-con .page-move .status{width:123rem; color:#888;}
.detail-view-area .view-con .page-move .no-list .tit{color:#888;}
.detail-view-area .view-con .page-move .no-list .tit:after{opacity:0.2}
.detail-view-area .view-con .page-move .no-list:after{opacity:0.2}
@media all and (max-width: 1023px) {
  .view-list-area{gap:32rem 0 !important;}
  .view-list-area .view-list .txt-div .tit ~ .date {margin-top: 8rem;}
  .view-list-area .view-list .txt-div .date ~ .tit {margin-top: 8rem;}
  
  .view-list-area .view-list.ended .img:after{width:184rem; height:64rem; line-height:64rem; font-size:16rem; border-radius:4rem;}
  .view-list-area .view-list.new-list .img:after {width: 24rem; height: 24rem; border-radius:4rem 0; background-size: auto 10rem;}
  .view-list-area .view-list.facebook .img:after,
  .view-list-area .view-list.youtube .img:after,
  .view-list-area .view-list.instargram .img:after {width:24rem; height:24rem; border-radius:4rem 0;}

  .view-list-area.column3 .view-list{width: 100%;}
  .view-list-area.column3 .view-list .img {height:190rem;}
  .view-list-area.column3 .view-list .txt-div {margin-top: 16rem;}
  .view-list-area.column3 .view-list .txt-div .arrow-btn{display: block; margin-top: 16rem;}
  .view-list-area.column3 .view-list.active:nth-child(3n-1),
  .view-list-area.column3 .view-list.active:nth-child(3n){transition-delay:0s}

  .view-list-area.column1 {display: flex; flex-direction: column;}
  .view-list-area.column1 .view-list:first-child {border-top: none;}
  .view-list-area.column1 .view-list {display: block; padding: 0; border-bottom: none;}
  .view-list-area.column1 .view-list .img {height: 400rem; width: 100%; margin-right: 0;}
  .view-list-area.column1 .view-list .txt-div {display: block; margin-top: 16rem;}
  .view-list-area.column1 .view-list .txt-div .arrow-btn {margin-top: 16rem; margin-left: 0; visibility: visible; opacity: 1;}
  
  .detail-view-area{flex-wrap:wrap;}
  .detail-view-area .view-con{margin-top:32rem; width:100%;}
  .detail-view-area .view-con .tit-area{padding-bottom:20rem;}
  .detail-view-area .view-con .date{margin-bottom:8rem;}
  .detail-view-area .view-con .con-area{padding:24rem 0 80rem;}
  .detail-view-area .view-con .con-area img{margin-bottom:24rem; border-radius:8rem;}
  .detail-view-area .view-con .page-move > a{flex-wrap:wrap; padding:20rem 24rem 20rem 0;}
  .detail-view-area .view-con .page-move .tit{width:100%;}
  .detail-view-area .view-con .page-move .status{margin:0 0 4rem 0; width:100%;}
  .detail-view-area .view-con .page-move .prev-list-btn .tit:after{right:-24rem; width:16rem; height:16rem; background-size:16rem;}
  .detail-view-area .view-con .page-move .next-list-btn .tit:after{right:-24rem; width:16rem; height:16rem; background-size:16rem;}
}

@media all and (max-width: 599px) {
  .view-list-area .view-list .img{height:190rem;}
  .view-list-area.column1 .view-list .img {height: 190rem;}
}


/* ---- Newsletter ---- */
.bg-form-area {position: relative; padding: 120rem 0; overflow: hidden;}
.bg-form-area .bg-wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.bg-form-area .bg-wrap img {width: 100%; height: 100%; object-fit: cover;}
.bg-form-area .inner {display: flex; justify-content: space-between; align-items: flex-start;}
.bg-form-area .sec-tit-wrap {flex-shrink: 0; margin-right: 100rem; margin-bottom: 0;}
.bg-form-area .data-form .row {display: flex;}
.bg-form-area .data-form .row .th {flex-shrink: 0; width: 120rem; padding-right: 20rem; margin-bottom: 0; display: flex; align-items: center; min-height: max(56rem, 40px);}

@media all and (max-width: 1023px) {
  .bg-form-area {padding: 56rem 0 80rem;}
  .bg-form-area .inner {display: block;}
  .bg-form-area .sec-tit-wrap {margin: 0 0 40rem}
  .bg-form-area .data-form .row .th {display: block; width: unset; min-height: unset; margin-bottom: 8rem;}

  .bg-form-area:has(.data-form-w.newsletter) .sec-tit-wrap p br {display: none;}
}

@media all and (max-width: 600px) {
  .bg-form-area:has(.data-form-w.newsletter) .sec-tit-wrap p br {display: block;}
}
/* --------------------------------------------- Newsroom - END --------------------------------------------- */





/* --------------------------------------------- ETC - START --------------------------------------------- */
.newsletter-unsubscribe-area{display: flex; flex-direction: column; align-items: center; justify-content: space-between; width:100%; min-height:100vh; padding: 120rem 50rem 120rem; background:url("/common/de/images/bg-newsletter-unsubscribe.jpg") no-repeat center center/cover}
.newsletter-unsubscribe-area .txt-div{text-align: center;}
.newsletter-unsubscribe-area .txt-div > *{color:#fff !important}
.newsletter-unsubscribe-area .txt-div .logo{margin-bottom:80rem;}
.newsletter-unsubscribe-area .txt-div .logo img{width:100rem;}
.newsletter-unsubscribe-area .txt-div .f-body1-m{margin-top:32rem;}
.newsletter-unsubscribe-area .txt-div .form-input {width: 540rem; margin: 40rem auto 0;}
.newsletter-unsubscribe-area .txt-div .btn-wrap{margin-top:64rem;}
.newsletter-unsubscribe-area .txt-div .btn-wrap .border-btn2{border:1px solid #fff; background:transparent}
.newsletter-unsubscribe-area .txt-div .btn-wrap .border-btn2 span{color:#fff;}

.newsletter-unsubscribe-area .link-btn, .error-page .link-btn{position:relative; margin-top: 40rem; color:#fff;}
.newsletter-unsubscribe-area .link-btn:after, .error-page .link-btn:after{display:block; content:""; position:absolute; bottom:-4px; left:0; width:100%; height:1px; background:#fff;}

.unsubscribe-area .txt {text-align: center;}
.unsubscribe-area .form-input{margin:32rem 0 56rem; width:100%;}
.unsubscribe-area .subscribe-btn{margin-top:24rem; text-align: center;}
.unsubscribe-area .subscribe-btn > a{text-decoration: underline; text-underline-position: under;}

@media all and (max-width: 1023px) {
  .newsletter-unsubscribe-area{padding: 80rem 20rem 80rem; background:url("/common/de/images/bg-newsletter-unsubscribe-mo.jpg") no-repeat center center/cover}
  .newsletter-unsubscribe-area .txt-div .logo{margin-bottom:40rem;}
  .newsletter-unsubscribe-area .txt-div .logo img{width:56rem;}
  .newsletter-unsubscribe-area .txt-div .f-body1-m{margin-top:24rem;}
  .newsletter-unsubscribe-area .txt-div .btn-wrap{margin-top:40rem;}

  .unsubscribe-area .form-input{margin:24rem 0 40rem;}
  .unsubscribe-area .btn-wrap .border-btn2{width:100%;}
  .unsubscribe-area .subscribe-btn{margin-top:16rem;}

  .newsletter-unsubscribe-area .txt-div .form-input {width: 100%; margin-top: 32rem;}
  .newsletter-unsubscribe-area .txt-div .btn-wrap{margin-top:40rem;}
}

.error-page{display: flex; flex-direction: column; align-items: center; justify-content: space-between; width:100%; min-height:100vh; padding: 330rem 50rem 120rem; background:url("/common/de/images/bg-error.jpg") no-repeat center center/cover}
.error-page .txt-div{text-align: center;}
.error-page .txt-div > *{color:#fff !important}
.error-page .txt-div .f-title3{margin:20rem 0 40rem;}

@media all and (max-width: 1023px) {
  .error-page{padding: 180rem 20rem 80rem; background:url("/common/de/images/bg-error-mo.jpg") no-repeat center center/cover}
  .error-page .txt-div .f-title3{margin:16rem 0 24rem;}
}
/* --------------------------------------------- ETC - END --------------------------------------------- */






/* --------------------------------------------- Landing - START --------------------------------------------- */
/* -- Visual-Area -- */
.landing-page{width:100%;}
.landing-page .hero-img-area {position:relative; overflow: hidden;}
.landing-page .hero-img-area .img{width:100%;}

.landing-page section ~ section {padding-top: 80rem;}
.landing-page .highlight-area:nth-of-type(even) {padding: 80rem 0;}
.landing-page .highlight-area:nth-of-type(odd) {padding: 80rem 0;}
/* .landing-page section:not(:first-child).inquiry-area .con-wrap {padding-top: 80rem;} */

  /* motion */
.landing-page .hero-img-area .img img{transform:scale(1.2); width:100%; height:100%; object-fit: cover; transition:transform 1s ease;}
.landing-page .hero-img-area .txt-wrap {position: relative; z-index: 1;}
.landing-page .hero-img-area .txt-wrap .logo{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .hero-img-area .txt-wrap .tit{position:relative; top:80rem; margin-top:56rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .hero-img-area .txt-wrap .txt{position:relative; top:80rem; margin-top:24rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .hero-img-area.active .img img{transform:scale(1)}
.landing-page .hero-img-area.active .txt-wrap .logo{top:0; opacity:1;}
.landing-page .hero-img-area.active .txt-wrap .tit{top:0; opacity:1; transition-delay:0.15s}
.landing-page .hero-img-area.active .txt-wrap .txt{top:0; opacity:1; transition-delay:0.15s}

  /* type1 */
.landing-page.ver1 .hero-img-area {display:flex; flex-direction: column; height:100vh;}
.landing-page.ver1 .hero-img-area .img{flex-grow: 1;}
.landing-page.ver1 .hero-img-area .txt-wrap{padding:72rem 48rem 48rem; text-align: center; background:#DE4826;}
.landing-page.ver1 .hero-img-area .txt-wrap .logo img{width:131rem;}

  /* type2 */
.landing-page.ver2 .hero-img-area .txt-wrap {padding: 120rem 0 80rem;}
.landing-page.ver2 .hero-img-area .img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.landing-page.ver2 .hero-img-area .img::after {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(45, 41, 38, 0.10) 12%, #2D2926 96%);}
.landing-page.ver2 .hero-img-area .txt-wrap .logo img{width:120rem;}
.landing-page.ver2 #Highlight {padding-top: 0;}
.landing-page.ver2 .highlight-area:first-child {margin: 0; padding: 80rem 0; background-color: #2D2926;}
.landing-page.ver2 .highlight-area:first-child p {color: #fff !important;}
.landing-page.ver2 .highlight-area:first-child .highlight-swiper-area .highlight-swiper .swiper-button-prev, .landing-page.ver2 .highlight-area:first-child .highlight-swiper-area .highlight-swiper .swiper-button-next {border: 1px solid #fff;}
.landing-page.ver2 .highlight-area:first-child .highlight-swiper-area .highlight-swiper .swiper-button-prev {background-image: url("/common/de/images/icon-swiper-btn-prev-wht.svg");}
.landing-page.ver2 .highlight-area:first-child .highlight-swiper-area .highlight-swiper .swiper-button-next {background-image: url("/common/de/images/icon-swiper-btn-next-wht.svg");}
.landing-page.ver2 .highlight-area:first-child .highlight-swiper-area2 .swiper-button-prev {background-image: url("/common/de/images/icon-swiper-btn-prev-wht.svg");}
.landing-page.ver2 .highlight-area:first-child .highlight-swiper-area2 .swiper-button-next {background-image: url("/common/de/images/icon-swiper-btn-next-wht.svg");}
.landing-page.ver2 .highlight-area:first-child .highlight-swiper-area2 .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #fff;;}

/* -- List-Area -- */
.landing-page .list-area{position:relative; padding:144rem 0; overflow: hidden; background:#2D2926;}
.landing-page .list-area .inner > div ~ div {margin-top: 120rem;}
.landing-page .list-area .post-swiper {padding: 0 120rem;}
.landing-page .list-area .post-swiper .swiper-container {overflow: visible;}
.landing-page .list-area .post-swiper .swiper-slide a {display: block;}
.landing-page .list-area .post-swiper .swiper-slide .img {width: 100%; height: 732rem; border-radius: 16rem; overflow: hidden;}
.landing-page .list-area .post-swiper .swiper-slide .img img {width: 100%; height: 100%; object-fit: cover;}
.landing-page .list-area .post-swiper .swiper-slide .txt-div {margin-top: 40rem;}
.landing-page .list-area .post-swiper .swiper-slide .txt-div .tit {color:#DE4826}
.landing-page .list-area .post-swiper .swiper-slide .txt-div .sub-tit {margin-top: 8rem; color: #aaa; line-height: 140%;}
.landing-page .list-area .post-swiper .swiper-slide.swiper-slide-active .txt-div .txt {visibility: visible; opacity: 1; transition: all .4s ease; margin-top: 40rem; color:#fff;}
.landing-page .list-area .post-swiper .swiper-slide:not(.swiper-slide-active) .txt-div .txt {visibility: hidden; opacity: 0;  transition: all .4s ease; margin-top: 24rem; color:#aaa;}
.landing-page .list-area .post-swiper .swiper-slide {width: 100% !important; transform: scale(.7); transition: all .6s;}
.landing-page .list-area .post-swiper .swiper-slide-active {transform: scale(1); transition: all .6s;}
.landing-page .list-area .post-swiper .swiper-button-prev, .landing-page .list-area .post-swiper .swiper-button-next {position: absolute; margin-top: calc(-1 * var(--swiper-navigation-size)/ 2); top: calc(732rem / 2); width: 56rem; height: 56rem; border: 1px solid #fff; border-radius: 8rem; background-size: 32rem;}
.landing-page .list-area .post-swiper .swiper-button-prev {left: -88rem; background-image: url("/common/de/images/icon-swiper-btn-prev-wht.svg");}
.landing-page .list-area .post-swiper .swiper-button-next {right: -88rem; background-image: url("/common/de/images/icon-swiper-btn-next-wht.svg");}
.landing-page .list-area .post-swiper:not(:has(.swiper-slide:nth-child(2))) .swiper-button-prev, .landing-page .list-area .post-swiper:not(:has(.swiper-slide:nth-child(2))) .swiper-button-next {display: none;}
.landing-page .list-area .post-swiper.scroll-motion .swiper-slide {position:relative; top:80rem; opacity:0;}
.landing-page .list-area .post-swiper.scroll-motion.active .swiper-slide {top: 0; opacity: 1;}
.landing-page .list-area .post-swiper.scroll-motion.active .swiper-slide:not(:first-child) {transition-delay: .2s;}
.landing-page .list-area .video{overflow:hidden; position:relative; top:80rem; height:800rem; width:100%; border-radius:16rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .list-area .video iframe{width:100%; height:100%; object-fit: cover;}
.landing-page .list-area .video.active{top:0; opacity:1;}
.landing-page .series-swiper{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .series-swiper .swiper-container{overflow:visible;}
.landing-page .series-swiper .swiper-slide{margin-right:20rem; width:400rem; height:292rem;}
.landing-page .series-swiper .swiper-slide:last-child{margin-right:0;}
.landing-page .series-swiper .swiper-slide .img{overflow:hidden; position:relative; width:100%; height:100%; border-radius:16rem;}
.landing-page .series-swiper .swiper-slide .img:before{display:block; content:""; position:absolute; top:0; left:0; width:100%; height:130rem; background:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0))}
.landing-page .series-swiper .swiper-slide .img:after{display:block; content:""; position:absolute; bottom:-1px; left:0; width:100%; height:93rem; background:linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0))}
.landing-page .series-swiper .swiper-slide .img img{width:100%; height:100%; object-fit: cover;}
.landing-page .series-swiper .swiper-slide .txt-div{position:absolute; bottom:24rem; left:24rem;}
.landing-page .series-swiper .swiper-slide .txt-div > *{color:#fff;}
.landing-page .series-swiper .swiper-slide .txt-div .f-body4-m{margin-top:10rem;}
.landing-page .series-swiper.active{top:0; opacity:1;}
section:has(.series-swiper) {overflow: hidden;}

/* -- Download-Area -- */
.landing-page .download-area .swiper-tab-btn{position:relative; top:80rem; margin:56rem 0 32rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .download-area.active .swiper-tab-btn{top:0; opacity:1;}

/* -- Banner-Area -- */
.landing-page .find-banner {padding: 120rem 0; background: url("/common/de/images/icon-findbanner-map.svg") no-repeat bottom right / auto 100% #2D2926;}
.landing-page .find-banner .tit {color: #fff;}
.landing-page .find-banner .btn-wrap {justify-content: flex-start; margin-top: 80rem;}

/* -- Find-Dealer-Area -- */
.landing-page .find-dealer-area .inner > .tit-wrap{margin-bottom:80rem;}

/* -- Inquiry-Area -- */
.landing-page .inquiry-area .f-title2{position:relative; top:80rem; margin-bottom:56rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.landing-page .inquiry-area .con-wrap.active .f-title2{top:0; opacity:1;}

@media all and (max-width: 1023px) {
  /* -- Visual-Area -- */
  .landing-page .hero-img-area .txt-wrap .tit{margin-top:32rem;}
  .landing-page .hero-img-area .txt-wrap .txt{margin-top:16rem;}

    /* type1 */
  .landing-page.ver1 .hero-img-area{height:auto;}
  .landing-page.ver1 .hero-img-area .txt-wrap .logo img{width:80rem;}
  .landing-page.ver1 .hero-img-area .txt-wrap {padding: 20rem 20rem 40rem;}

    /* type2 */
    .landing-page.ver2 .hero-img-area .txt-wrap .logo img{width:72rem;}
    .landing-page.ver2 .hero-img-area .txt-wrap {padding: 40rem 0 40rem;}
    .landing-page.ver2 .highlight-area:first-child {padding: 32rem 0 80rem;}

  /* -- List-Area -- */
  .landing-page .list-area{padding:80rem 0;}
  .landing-page .list-area .inner > div ~ div {margin-top: 80rem;}
  .landing-page .list-area .post-swiper {padding: 0;}
  .landing-page .list-area .post-swiper .swiper-slide .img {height: 300rem; border-radius: 8rem;}
  .landing-page .list-area .post-swiper .swiper-slide .txt-div {margin-top: 20rem;}
  .landing-page .list-area .post-swiper .swiper-slide.swiper-slide-active .txt-div .txt {margin-top: 16rem;}
  .landing-page .list-area .post-swiper .swiper-slide:not(.swiper-slide-active) .txt-div .txt {visibility: unset; opacity: unset; margin-top: 16rem; color:#fff;}
  .landing-page .list-area .post-swiper .swiper-slide.swiper-slide-active .txt-div {visibility: visible; opacity: 1; transition: all .4s ease;}
  .landing-page .list-area .post-swiper .swiper-slide:not(.swiper-slide-active) .txt-div {visibility: hidden; opacity: 0; transition: all .4s ease;}
  .landing-page .list-area .post-swiper .swiper-button-prev, .landing-page .list-area .post-swiper .swiper-button-next {display: none;}
  .landing-page .list-area .post-swiper .swiper-slide {transform: unset;}
  .landing-page .list-area .post-swiper .swiper-slide-active {transform: unset;}
  .landing-page .list-area .video{margin-top:80rem; height:450rem; border-radius:8rem;}
  .landing-page .series-swiper .swiper-slide{margin-right:8rem;}
  .landing-page .series-swiper .swiper-slide .img{border-radius:8rem;}
  .landing-page .series-swiper .swiper-slide .txt-div{left:24rem; bottom:24rem; width:calc(100% - 48rem);}
  .landing-page .series-swiper .swiper-slide .txt-div .f-body4-m{margin-top:8rem;}

  /* -- Download-Area -- */
  .landing-page .download-area{padding-top:80rem;}
  .landing-page .download-area .swiper-tab-btn{margin:40rem 0 20rem;}

  /* -- Banner-Area -- */
  .landing-page .find-banner {padding: 56rem 0 207rem; background-image: url("/common/de/images/icon-findbanner-map-mob.svg"); background-position: bottom 36rem right; background-size: calc(100% - 30rem) auto;}
  .landing-page .find-banner .btn-wrap {margin-top: 48rem;}

  /* -- Find-Dealer-Area -- */
  .landing-page .find-dealer-page .dealer-wrap{padding-bottom:80rem;}
  .landing-page .find-dealer-area .inner > .tit-wrap{margin-bottom:40rem;}

  /* -- Inquiry-Area -- */
  .landing-page .inquiry-area .con-wrap .f-title2{margin-bottom:20rem; text-align: left;}
}

@media all and (max-width: 599px) {
  .landing-page .hero-img-area .img{height:202rem;}
  .landing-page .list-area .post-swiper .swiper-slide .img {height: 191rem;}
  .landing-page .list-area .video{height:200rem;}
  .landing-page .series-swiper .swiper-slide{width:70%; height:180rem;}
  .landing-page .series-swiper .swiper-slide .img:before{height:50rem;}
  .landing-page .series-swiper .swiper-slide .img:after{height:70rem;}
}
/* --------------------------------------------- Landing - END --------------------------------------------- */




/* ---------------------------------------------  - END --------------------------------------------- */
.inquiry-area .inner {position: relative; display: flex; justify-content: flex-end; align-items: flex-start;}
.inquiry-area .bg-wrap {position: absolute; top: 0; left: calc(-240rem - 1px); width: 1020rem; min-height: 1080rem; overflow: hidden;}
.inquiry-area .bg-wrap .bg {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;}
.inquiry-area .bg-wrap .bg img {width: 100%; height: 100%; object-fit: cover;}
.inquiry-area .bg-wrap .txt-div{position:absolute; top:80rem; left:80rem;}
.inquiry-area .bg-wrap .txt-div > *{color:#fff;}
.inquiry-area .bg-wrap .txt-div .f-body3-r{margin-top:24rem;}
.inquiry-area .bg-wrap .txt-div .f-body3-r + .f-body3-r{margin-top:10rem;}
.inquiry-area .bg-wrap .con {padding: 120rem 140rem 120rem 240rem;}
.inquiry-area .con-wrap {width: 540rem;}
.inquiry-area .data-form .opt-group .form-checkbox {width: calc(100% / 4);}
.inquiry-area .bg-wrap.scroll-motion:after {content: ""; position: absolute; top: -1px; right: -100%; width: 200%; height: 200%; clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%); transition: right 1.2s ease; background: #fff; z-index: 1;}
.inquiry-area .bg-wrap.scroll-motion.active:after {right: 100%;}
.inquiry-area .bg-wrap.scroll-motion .con {position: relative; top: 80rem; opacity: 0; transition: top 1s ease, opacity 1s ease; transition-delay: .6s;}
.inquiry-area .bg-wrap.scroll-motion.active .con {top: 0; opacity: 1;}
.inquiry-area:not(:has(.bg-wrap .con)) .con-wrap.scroll-motion .for-motion {transition-delay: .4s;}
.inquiry-area:has(.bg-wrap .con) .con-wrap.scroll-motion .for-motion {transition-delay: 1s;}

@media all and (max-width: 1023px) {
  .inquiry-area .inner {display: block;}
  .inquiry-area .bg-wrap {position: relative; left: -20rem; width: calc(100% + 40rem); min-height: 240rem;}
  .inquiry-area .bg-wrap:has(.txt-div) .bg{position:relative; height:240rem;}
  .inquiry-area .bg-wrap .con {padding: 56rem 20rem 80rem;}
  .inquiry-area .bg-wrap .txt-div{position:relative; top:0; left:0; margin:40rem auto 0; width:calc(100% - 40rem);}
  .inquiry-area .bg-wrap .txt-div > *{color:#2D2926;}
  .inquiry-area .con-wrap {width: 100%; margin-top: 56rem;}
  .inquiry-area .data-form .opt-group .form-checkbox {width: calc(100% / 2);}
  .inquiry-area:not(:has(.bg-wrap .con)) .con-wrap.scroll-motion .for-motion {transition-delay: 0s;}
.inquiry-area:has(.bg-wrap .con) .con-wrap.scroll-motion .for-motion {transition-delay: 0s;}
}

/* ---- Dealer Application ---- */
.step-list-wrap .step-list .item {padding: 40rem 0; border-bottom: 1px solid rgba(255, 255, 255, .2);}
.step-list-wrap .step-list .item:first-child {padding-top: 0;}
.step-list-wrap .step-list .item .step {margin-bottom: 20rem; color: #aaa;}
.step-list-wrap .step-list .item .txt {color: #fff;}
.step-list-wrap .info {margin-top: 40rem; color: #fff;}

@media all and (max-width: 1023px) {
  .step-list-wrap .step-list .item {padding: 24rem 0;}
  .step-list-wrap .step-list .item .step {margin-bottom: 12rem;}
  .step-list-wrap .info {margin-top: 24rem;}
}

/* ---- Service ---- */
.service-wrap .service-txt {color: #fff;}
.service-wrap .links {margin-top: 240rem;}
.service-wrap .links a {position: relative; display: block; padding: 40rem 0;}
.service-wrap .links a::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, .2);}
.service-wrap .links a::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #DE4826; transition: width 1s cubic-bezier(0.25,1,0.5,1);}
.service-wrap .links a .tit {position: relative; display: inline-block; padding-right: 40rem; margin-bottom: 20rem; color: #fff; transition: color .2s ease;}
.service-wrap .links a .tit::after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 24rem; height: 24rem; background: url("/common/de/images/icon-arrow-wht-24.svg") no-repeat center center / 100% auto;}
.service-wrap .links a .txt {color: #fff;}
.service-wrap .links a:hover .tit {color: #DE4826;}
.service-wrap .links a:hover .tit::after {background: url("/common/de/images/icon-arrow-active-24.svg") no-repeat center center / 100% auto;}
.service-wrap .links a:hover::after {width: 100%;}

@media all and (max-width: 1023px) {
  .service-wrap .links {margin-top: 160rem;}
  .service-wrap .links a {padding: 24rem 0;}
  .service-wrap .links a .tit {padding-right: 28rem; margin-bottom: 8rem;}
  .service-wrap .links a .tit::after {width: 20rem; height: 20rem;}
}
/* ---------------------------------------------  - END --------------------------------------------- */