@charset "UTF-8";

* {margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact; word-break: keep-all; word-wrap: break-word; overflow-wrap: break-word; -webkit-overflow-scrolling: touch;}
:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}
html {width: 100%; height: 100%; font-size: .052vw; font-style: normal;}
body {position: relative; height: auto; font-family: "InterTight-Regular"; font-weight: 400; font-size: max(16rem, 14px); color: #2d2926; line-height: 150%; height: 100%; letter-spacing: 0; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; -webkit-print-color-adjust: exact !important;}
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td {margin: 0; padding: 0; font-weight: normal;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top; max-width:100%;}
img::selection {background: transparent;}
legend, caption {visibility: hidden; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
textarea, button {vertical-align: middle;}
input, select {font-family: "InterTight-Regular"; vertical-align: top;}
input {padding: 0; height: 39rem;}
input[type="text"]::-ms-clear {display: none;}
input:focus, input:active {outline: none;}
.attach_area .file_div input[readonly] {pointer-events: none;}
option {padding: 3px 10px;}
option:focus, option:active {outline: none;}
input[type="radio"], input[type="checkbox"] {border: 0; padding: 0; height: auto; -webkit-box-shadow: none; box-shadow: none;}
input[type="password"] {color: #2d2926; background: transparent; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none;}
input[type="password"]::-webkit-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="password"]:-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="password"]::-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="password"]::placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="password"]:disabled {color: #999; background-color: #f3f3f3;}
input[type="password"][readonly=readonly] {color: #999; background-color: #f3f3f3;}
input[type="text"] {font-family: "InterTight-Regular"; color: #2d2926; font-size: max(16rem, 14px); border:0; background: transparent; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none;}
input[type="text"]::-webkit-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="text"]:-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="text"]::-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="text"]::placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="text"]:disabled {color: #2D2926;}
input[type="text"]:-moz-read-only {color: #2D2926;}
input[type="tel"] {background: #fff; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none;}
input[type="tel"]::-webkit-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="tel"]:-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="tel"]::-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="tel"]::placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="tel"]:disabled {color: #999; background-color: #f3f3f3;}
input[type="tel"]:-moz-read-only {color: #999; background-color: #f3f3f3;}
input[type="tel"]:read-only {color: #999; background-color: #f3f3f3;}
input[type="tel"]:disabled + .cal_btn {opacity: .5;}
input[type="number"] {font-size: max(16rem, 14px); background-color: transparent;}
input[type="number"]::-webkit-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="number"]:-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="number"]::-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="number"]::placeholder {color: #aaa; font-size: max(16rem, 14px);}
input[type="number"]:disabled {color: #999;}
input[type="number"]:-moz-read-only {color: #999;}
input[type="number"]:read-only {color: #999;}
input[type="number"].readonly {color: #999;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
select {font-family: "InterTight-Regular"; color: #2d2926; font-size: max(16rem, 14px); appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; vertical-align: top; background: transparent; border: none;}
select::-ms-expand {display: none;}
select:disabled {color: #aaa; opacity: 1;}
textarea {font-family: "InterTight-Regular"; color: #2d2926; font-size: max(16rem, 14px); line-height: 150%; border: 0; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; vertical-align: top; resize: none;}
textarea:focus, textarea:active {outline: none;}
textarea::-webkit-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
textarea:-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
textarea::-ms-input-placeholder {color: #aaa; font-size: max(16rem, 14px);}
textarea::placeholder {color: #aaa; font-size: max(16rem, 14px);}
textarea:disabled {color: #2d2926; background-color: #f3f3f3;}
textarea:-moz-read-only {color: #d9dde0; background-color: #f3f3f3;}
textarea:read-only {color: #d9dde0; background-color: #f3f3f3;}
a {text-decoration: none; color: #2d2926;}
a:hover, a:focus, a:active {text-decoration: none;}
table {width: 100%; border-collapse: collapse;}
button {background: none; border: none; padding: 0; margin: 0; font-family: "InterTight-Regular"; font-size: max(18rem, 16px); cursor: pointer; overflow: visible; white-space: nowrap;}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
.swiper-button-next:after, .swiper-button-prev:after {display: none;}


@media all and (max-width: 1023px) {
  input[type="password"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="password"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="password"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="password"]::placeholder {font-size: 13rem;}
  input[type="text"] {font-size: 16rem;}
  input[type="text"]::-webkit-input-placeholder {font-size: 16rem;}
  input[type="text"]:-ms-input-placeholder {font-size: 16rem;}
  input[type="text"]::-ms-input-placeholder {font-size: 16rem;}
  input[type="text"]::placeholder {font-size: 16rem;}
  input[type="text"]:disabled:-ms-input-placeholder {font-size: 16rem;}
  input[type="text"]:disabled::-ms-input-placeholder {font-size: 16rem;}
  input[type="text"]:disabled::placeholder {font-size: 16rem;}
  input[type="tel"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="tel"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="tel"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="tel"]::placeholder {font-size: 13rem;}
  input[type="number"] {font-size: 13rem;}
  input[type="number"]::-webkit-input-placeholder {font-size: 13rem;}
  input[type="number"]:-ms-input-placeholder {font-size: 13rem;}
  input[type="number"]::-ms-input-placeholder {font-size: 13rem;}
  input[type="number"]::placeholder {font-size: 13rem;}
  textarea::-webkit-input-placeholder {font-size: 13rem;}
  textarea:-ms-input-placeholder {font-size: 13rem;}
  textarea::-ms-input-placeholder {font-size: 13rem;}
  textarea::placeholder {font-size: 13rem;}
  textarea {font-size: 13rem;}
}

/* --------------------------------------------- Common style 공통 스타일 - START --------------------------------------------- */
body {width: 100%; overflow-x: hidden;}
body.stop-scroll {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
#wrap{position:relative;}
#wrap .cont-wrap {padding-top:250rem; margin-bottom:200rem;}
.dimd{display:none; position:fixed; top:0; left:0; z-index: 19; width:100%; height:100vh; background:rgba(0,0,0,0.4);}

.inner {margin: 0 auto; width: 1440rem;}
.main .inner {margin: 0 auto; width: 1680rem;}

.no-data-area{padding:160rem 0; width:100%; text-align: center;}
.no-data-area .txt{padding-top:88rem; font-size:max(18rem, 16px); font-family: "InterTight-Medium"; background:url("/common/de/images/icon-no-data.svg") no-repeat center top / 80rem auto;}

.no-pt{padding-top:0 !important;}
.no-mb{margin-bottom:0 !important;}

.scroll-motion.basic .for-motion {position: relative; top: 80rem; opacity: 0; transition: top 1s ease, opacity 1s ease;}
.scroll-motion.basic.active .for-motion {top: 0; opacity: 1;}
.scroll-motion.basic.active .for-motion:nth-child(2) {transition-delay: .2s;}
.scroll-motion.basic:not(:has(.for-motion)) {position: relative; top: 80rem; opacity: 0; transition: top 1s ease, opacity 1s ease;}
.scroll-motion.basic.active:not(:has(.for-motion)) {top: 0; opacity: 1;}
.scroll-motion.opacity {opacity: 0; transition: opacity 1s ease;}
.scroll-motion.opacity.active {opacity: 1;}

.align-left {display: flex; justify-content: flex-start;}
.align-right {display: flex; justify-content: flex-end;}
.align-center {display: flex; justify-content: center;}
.align-between {display: flex; justify-content: space-between;}
.v-align-top {display: flex; align-items: flex-start;}
.v-align-bottom {display: flex; align-items: flex-end;}
.v-align-center {display: flex; align-items: center;}
.t-left {text-align: left;}
.t-right {text-align: right;}
.t-center {text-align: center;}

.only-pc {display: block;}
.only-mob {display: none;}

/* dirt / plant */
.cont-wrap .dirt {position: absolute; z-index: -1;}
.cont-wrap .plant {position: absolute; z-index: -1;}
.cont-wrap:has(.list-order-wrap) .plant {top: calc(55%); right: 0; transform: translateY(-50%);}
.cont-wrap:has(.list-order-wrap) .plant img {width: 197rem;}
.cont-wrap .dirt.dirt-top {top: 0; left: 0;}
.cont-wrap .dirt.dirt-top img {width: 345rem;}

@media all and (min-width: 1920px) {
  html {font-size:min(0.052vw, 16px)}
}

@media all and (max-width: 1023px) {
  html {font-size: .130vw;}
  #wrap .cont-wrap {padding-top:135rem; margin-bottom:200rem;}
  .inner{width:calc(100% - 40rem)}
  .main .inner {width:calc(100% - 40rem)}

  .only-pc {display: none;}
  .only-mob {display: block;}

  .no-data-area{padding:80rem 0;}
  .no-data-area .txt{font-size:16rem;}

  /* dirt / plant */
  .cont-wrap .dirt.dirt-top img {width: 200rem;}
  .cont-wrap:has(.list-order-wrap) .plant img {width: 88rem;}
}

  @media all and (max-width: 599px) {
    html {font-size: .256vw;}

  @media (orientation: landscape) {
    html:not(:has(textarea:focus, input:focus)) {font-size: .18vw;}
  }
  }
/* --------------------------------------------- Common style 공통 스타일 - END --------------------------------------------- */




/* --------------------------------------------- Font 폰트 - START --------------------------------------------- */
.arrow-txt span{padding-right:24rem; background: url("/common/de/images/icon-view-more-arrow-gray.svg") no-repeat right center/16rem auto;}
.arrow-txt.white span{background: url("/common/de/images/icon-view-more-arrow-white.svg") no-repeat right center/16rem auto;}

.wht-txt{color:#fff !important}
.red-txt{color:#DE4826 !important}
.gray-txt{color: #888 !important;}

.f-big-t1 {font-family: "Arvo-Bold"; font-size: max(96rem, 80px); line-height: 120%; color: #2d2926;} /* Display 1 */
.f-big-t2 {font-family: "Arvo-Bold"; font-size: max(80rem, 56px); line-height: 120%; color: #2d2926;} /* Display 2 */
.f-big-t3 {font-family: "Arvo-Bold"; font-size: max(56rem, 48px); line-height: 120%; color: #2d2926;} /* Headline 1 */

.f-title1 {font-family: "InterTight-Bold"; font-size: max(48rem, 32px); line-height: 125%; color: #2d2926;} /* Title 1 - bold */
.f-title1-m {font-family: "InterTight-Medium"; font-size: max(48rem, 32px); line-height: 125%; color: #2d2926;} /* Title 1 - Medium */
.f-title2 {font-family: "InterTight-Bold"; font-size: max(32rem, 24px); line-height: 140%; color: #2d2926;} /* Title 2 - bold */
.f-title2-m {font-family: "InterTight-Medium"; font-size: max(32rem, 24px); line-height: 140%; color: #2d2926;} /* Title 2 - Medium */
.f-title3 {font-family: "InterTight-Bold"; font-size: max(24rem, 20px); line-height: 140%; color: #2d2926;} /* Title 3 - bold */
.f-title3-m {font-family: "InterTight-Medium"; font-size: max(24rem, 20px); line-height: 140%; color: #2d2926;} /* Title 3 - Medium */

.f-body1-b {font-family: "InterTight-Bold"; font-size: max(20rem, 18px); line-height: 140%; color: #2d2926;} /* Body 1 - bold */
.f-body1-m {font-family: "InterTight-Medium"; font-size: max(20rem, 18px); line-height: 140%; color: #2d2926;} /* Body 1 - Medium */
.f-body1-4 {font-family: "InterTight-Regular"; font-size: max(20rem, 18px); line-height: 140%; color: #2d2926;} /* Body 1 - Regular */

.f-body2-b {font-family: "InterTight-Bold"; font-size: max(18rem, 16px); line-height: 140%; color: #2d2926;} /* Body 2 - bold */
.f-body2-m {font-family: "InterTight-Medium"; font-size: max(18rem, 16px); line-height: 140%; color: #2d2926;} /* Body 2 - Medium */
.f-body2-r {font-family: "InterTight-Regular"; font-size: max(18rem, 16px); line-height: 140%; color: #2d2926;} /* Body 2 - Regular */

.f-body3-b {font-family: "InterTight-SemiBold"; font-size: max(16rem, 14px); line-height: 150%; color: #2d2926;} /* Body 3 - bold */
.f-body3-m {font-family: "InterTight-Medium"; font-size: max(16rem, 14px); line-height: 150%; color: #2d2926;} /* Body 3 - Medium */
.f-body3-r {font-family: "InterTight-Regular"; font-size: max(16rem, 14px); line-height: 150%; color: #2d2926;} /* Body 3 - Regular */

.f-body4-b {font-family: "InterTight-SemiBold"; font-size: max(14rem, 13px); line-height: 145%; color: #2d2926;} /* Body 4 - bold */
.f-body4-m {font-family: "InterTight-Medium"; font-size: max(14rem, 13px); line-height: 145%; color: #2d2926;} /* Body 4 - Medium */
.f-body4-r {font-family: "InterTight-Regular"; font-size: max(14rem, 13px); line-height: 145%; color: #2d2926;} /* Body 4 - Regular */

.f-caption1-b {font-family: "InterTight-SemiBold"; font-size: max(14rem, 13px); line-height: 145%; color: #888;} /* Caption 1 - bold */
.f-caption1-m {font-family: "InterTight-Medium"; font-size: max(14rem, 13px); line-height: 145%; color: #888;} /* Caption 1 - Medium */
.f-caption1-r {font-family: "InterTight-Regular"; font-size: max(14rem, 13px); line-height: 145%; color: #888;} /* Caption 1 - Regular */
.f-caption2-m {font-family: "InterTight-SemiBold"; font-size: max(13rem, 12px); line-height: 145%; color: #888;} /* Caption 2 - bold */
.f-caption2-m {font-family: "InterTight-Medium"; font-size: max(13rem, 12px); line-height: 145%; color: #888;} /* Caption 2 - Medium */
.f-caption2-r {font-family: "InterTight-Regular"; font-size: max(13rem, 12px); line-height: 145%; color: #888;} /* Caption 2 - Regular */

@media all and (max-width: 1023px) {
  .f-big-t1 {font-size: 36rem;} /* Display 1 */
  .f-big-t2 {font-size: 32rem;} /* Display 2 */
  .f-big-t3 {font-size: 24rem; line-height: 125%;} /* Headline 1 */

  .f-title1 {font-size: 24rem;} /* Title 1 - bold */
  .f-title1-m {font-size: 24rem;} /* Title 1 - Medium */
  .f-title2 {font-size: 20rem;} /* Title 2 - bold */
  .f-title2-m {font-size: 20rem;} /* Title 2 - Medium */
  .f-title3 {font-size: 20rem;} /* Title 3 - bold */
  .f-title3-m {font-size: 20rem;} /* Title 3 - Medium */

  .f-body1-b {font-size: 18rem;} /* Body 1 - bold */
  .f-body1-m {font-size: 18rem;} /* Body 1 - Medium */
  .f-body1-r {font-size: 18rem;} /* Body 1 - Regular */

  .f-body2-b {font-size: 18rem;} /* Body 2 - bold */
  .f-body2-m {font-size: 18rem;} /* Body 2 - Medium */
  .f-body2-r {font-size: 18rem;} /* Body 2 - Regular */
  
  .f-body3-b {font-size:16rem;} /* Body 3 - bold */
  .f-body3-m {font-size:16rem;} /* Body 3 - Medium */
  .f-body3-r {font-size:16rem;} /* Body 3 - Regular */

  .f-body4-b {font-size:14rem;} /* Body 4 - bold */
  .f-body4-m {font-size:14rem;} /* Body 4 - Medium */
  .f-body4-r {font-size:14rem;} /* Body 4 - Regular */

  .f-caption1-b {font-size: 12rem; color: #aaa;} /* Caption 1 - bold */
  .f-caption1-m {font-size: 12rem; color: #aaa;} /* Caption 1 - Medium */
  .f-caption1-r {font-size: 12rem; color: #aaa;} /* Caption 1 - Regular */

  .f-caption2-m {font-size: 12rem; color: #aaa;} /* Caption 2 - bold */
  .f-caption2-m {font-size: 12rem; color: #aaa;} /* Caption 2 - Medium */
  .f-caption2-r {font-size: 12rem; color: #aaa;} /* Caption 2 - Regular */
}
/* --------------------------------------------- Font 폰트 - END --------------------------------------------- */




/* --------------------------------------------- header - START --------------------------------------------- */
/* header */
#header.hide {top: -140rem;}
#header.white {background-color: transparent;}
#header.white:not(.hover) nav:after {opacity: 0;}
#header.white:not(.hover) nav .for-bg {background-color: transparent;}
#header.white:not(.hover) nav .gnb > li .one-link {color: #fff;}
#header.white:not(.hover) > .nav-util.icon-util .util.btn-notice {background-image: url("/common/de/images/icon-notice-wht.svg"); transition: background .4s ease;}
#header.white:not(.hover) > .nav-util.icon-util .util.btn-srch {background-image: url("/common/de/images/icon-search-wht.svg"); transition: background .4s ease;}
#header.white:not(.hover) > .nav-util.icon-util .util.btn-sitemap {background-image: url("/common/de/images/icon-menu-ham-wht.svg"); transition: background .4s ease;}
#header.white:not(.hover) > .nav-util.line-txt-w .txt {color: #fff; transition: color .4s ease;}
#header.white:not(.hover) > .nav-util.line-txt-w .drop-wrap .drop-btn::after {background-image: url("/common/de/images/icon-bot-arrow-wht.svg"); transition: background .4s ease, transform .4s ease;}

#header {position: fixed; left: 0; top: 0; z-index: 20; width: 100%; height: 130rem; background-color: #fff; transition: top .6s ease, background .4s ease;}
#header .logo {position: absolute; left: 120rem; top: 23rem; z-index: 1; width: 120rem; height: 120rem;}
#header .logo a {display: inline-block; width: 100%; height: 100%; background: url("/common/de/images/icon-logo.png") no-repeat center center / 100%;}
#header .logo a span {font-size: 0; color: transparent;}
#header nav {position: relative; width: 100%; height: 100%;}
#header nav:after {content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background-color: #EBEBEB; transition: opacity .4s ease; pointer-events: none;}
#header nav .for-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; overflow: hidden; background-color: #fff; transition: height .4s ease, background .4s ease;}
#header nav .for-bg .gnb-w {display: inline-flex; align-items: center; justify-content: center; height: 80rem; margin-top: 50rem;}
#header nav .gnb {display: flex; height: 100%;}
#header nav .gnb a {display: block;}
#header nav .gnb > li .one-link {position: relative;}
#header nav .gnb > li .one-link:after {content: ""; position: absolute; bottom: 1px; left: 32rem; width: 0; height: 2px; background-color: #DE4826; transition: none;}
#header nav .gnb > li.on .one-link:after {width: calc(100% - 64rem); transition: width .4s ease;}
#header nav .gnb > li .one-link {display: flex; align-items: center; height: 100%; padding: 0 32rem;}
#header nav .gnb > li .one-link {font-family: "InterTight-Bold"; font-size: max(18rem, 16px); color: #2d2926; transition: color .2s ease;}
#header nav .gnb > li.on .one-link {color: #DE4826;}
#header nav .gnb > li .two-depth {position: absolute; top: 130rem; left: 50%; width: 100%; transform: translateX(-50%); padding: 40rem 120rem 56rem;}
#header nav .gnb > li .two-depth:has(.nav-swiper) {padding: 40rem 0 56rem;}
#header nav .gnb > li .two-depth {display: none;}
#header nav .gnb > li.on .two-depth {display: block;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul {display: flex; justify-content: center; align-items: flex-start; column-gap: 64rem;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul > li .two-link {font-family: "InterTight-Medium"; font-size: max(16rem, 14px); color: #2d2926; transition: color .2s ease;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul > li:hover .two-link {color: #DE4826;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul > li .three-depth {margin-top: 16rem;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul > li .three-depth li ~ li {margin-top: 8rem;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul > li .three-depth > li .three-link {font-family: "InterTight-Regular"; font-size: max(16rem, 14px); color: #888; transition: color .2s ease;}
#header nav .gnb > li .two-depth .two-pack-wrap > ul > li .three-depth > li .three-link:hover {color: #2d2926;}

#header > .nav-util {position: absolute; right: 120rem;}
#header > .nav-util.line-txt-w {top: 20rem;}
#header > .nav-util.line-txt-w .txt {font-family: "InterTight-Medium"; font-size: max(14rem, 13px); line-height: 145%; color: #2D2926;}
#header > .nav-util.icon-util {bottom: 28rem; column-gap: 32rem; display: flex;}
#header > .nav-util.icon-util .util {width: max(24rem, 20px); height: max(24rem, 20px); background: url("") no-repeat center center / 100% auto;}
#header > .nav-util.icon-util .util span {font-size: 0; color: transparent;}
#header > .nav-util.icon-util .util.btn-notice {position: relative; background-image: url("/common/de/images/icon-notice.svg");}
#header > .nav-util.icon-util .util.btn-notice.on::before {content: ""; position: absolute; top: 0; right: 0; width: max(4rem, 2px); height: max(4rem, 2px); border-radius: 100%; background-color: #DE4826;}
#header > .nav-util.icon-util .util.btn-srch {background-image: url("/common/de/images/icon-search.svg");}
#header > .nav-util.icon-util .util.btn-sitemap {background-image: url("/common/de/images/icon-menu-ham.svg");}

@media all and (max-width: 1023px) {
  #header.hide {top: -85rem;}

  #header {display: flex; align-items: center; justify-content: space-between; padding: 0 20rem; height: 79rem;}
  #header .logo {width: 63rem; height: 63rem;}
  #header h1.logo {position: unset;}
  #header nav {display: none;}

  #header > .nav-util {position: unset;}
  #header > .nav-util.icon-util .util.btn-notice.on::before {width: 4rem; height: 4rem;}
  #header > .nav-util.icon-util {column-gap: 20rem;}
  #header > .nav-util.icon-util .util {width: 24rem; height: 24rem;}
  #header > .nav-util.line-txt-w {display: none;}
}

/* allmenu */
#header .allmenu-popup .pop-wrap .for-motion {height: 100%; opacity: 0; transition: opacity .4s ease; transition-delay: 0s;}
#header .allmenu-popup.on .pop-wrap .for-motion {opacity: 1; transition: opacity .4s ease; transition-delay: .6s;}
#header .allmenu-popup .pop-wrap .close-btn {top: 80rem; right: 80rem;}
#header .allmenu-popup .pop-wrap .pop-cont {display: flex; align-items: center; justify-content: center; min-height: 100%;}
#header .allmenu-popup .logo {left: 80rem; top: 80rem;}
#header .allmenu-popup .gnb {display: flex; gap: 100rem; align-items: flex-start;}
#header .allmenu-popup .gnb > li .one-link {font-family: "InterTight-Bold"; font-size: max(24rem, 20px); color: #2d2926; transition: color .2s ease;}
#header .allmenu-popup .gnb > li:hover .one-link {color: #DE4826}
#header .allmenu-popup .gnb > li .two-depth {margin-top: 24rem;}
#header .allmenu-popup .gnb > li .two-depth > li {display: flex; flex-direction: column; align-items: flex-start}
#header .allmenu-popup .gnb > li .two-depth > li .two-link {font-family: "InterTight-Medium"; line-height: 140%; font-size: max(18rem, 16px); color: #2d2926; transition: color .2s ease;}
#header .allmenu-popup .gnb > li .two-depth > li .two-link .txt-box .tit {font-family: "InterTight-Medium"; font-size: max(18rem, 16px); color: #2d2926; transition: color .2s ease;}
#header .allmenu-popup .gnb > li .two-depth > li:hover .two-link {color: #DE4826;}
#header .allmenu-popup .gnb > li .two-depth > li:hover .two-link .txt-box .tit {color: #DE4826;}
#header .allmenu-popup .gnb > li .two-depth > li .two-link .img-box {display: none;}
#header .allmenu-popup .gnb > li .two-depth > li ~ li {margin-top: 16rem;}
#header .allmenu-popup .gnb > li .two-depth > li .three-depth {margin-top: 16rem;}
#header .allmenu-popup .gnb > li .two-depth > li .three-depth > li ~ li {margin-top: 8rem;}
#header .allmenu-popup .gnb > li .two-depth > li .three-depth > li .three-link {font-family: "InterTight-Regular"; font-size: max(16rem, 14px); color: #888; transition: color .2s ease;}
#header .allmenu-popup .gnb > li .two-depth > li .three-depth > li .three-link:hover {color: #2D2926;}
#header .allmenu-popup .sns {position: absolute; bottom: 80rem; left: 80rem;}
#header .allmenu-popup .nav-util .txt {font-family: "InterTight-Medium"; font-size: max(16rem, 14px); line-height: 140%; color: #888;}
#header .allmenu-popup .nav-util {position: absolute; bottom: 80rem; right: 80rem;}
#header .allmenu-popup .nav-util .drop-wrap .drop-box {top: unset; right: 0; left: unset; transform: translateX(0); bottom: calc(100% + 8rem);}
#header .allmenu-popup .nav-util .drop-wrap .drop-btn::after {background-image: url("/common/de/images/icon-bot-arrow-gray.svg");}

#header .allmenu-popup .nav-util > *:first-child {position: relative; padding-right: max(44rem, 42px);}
#header .allmenu-popup .nav-util > *:first-child::after {content: ""; position: absolute; right: 20rem; top: 50%; transform: translateY(-50%); width: max(16rem, 14px); height: max(16rem, 14px); background: url("/common/de/images/icon-arrow-gray.svg") no-repeat center center / 100% auto;}

@media all and (max-width: 1023px) {
  #header .allmenu-popup .pop-wrap {padding-top: 80rem; padding-bottom: 60rem;}
  #header .allmenu-popup .pop-wrap .scroll-area {padding-top: 24rem;}
  #header .allmenu-popup .pop-wrap .close-btn {position: absolute; top: 20rem; right: 20rem;}
  #header .allmenu-popup .pop-wrap .pop-cont {display: block;}
  
  #header .allmenu-popup .logo {top: 8rem; left: 20rem;}
  #header .allmenu-popup .sns {display: none;}
  #header .allmenu-popup .nav-util {right: auto; left: 20rem; bottom: 24rem; display: block;}
  #header .allmenu-popup .nav-util > *:first-child {display: none;}
  #header .allmenu-popup .nav-util > * {padding: 0;}
  #header .allmenu-popup .nav-util > * ~ *::before {display: none;}
  #header .allmenu-popup .nav-util .drop-wrap{padding-left:12rem;}
  #header .allmenu-popup .nav-util .drop-wrap .drop-box {left: 12rem; right: unset; min-width:145rem; white-space: nowrap;}
  
  #header .allmenu-popup .gnb {flex-direction: column; gap: 0;}
  #header .allmenu-popup .gnb > li:has(.two-link .img-box) {width: 100%;}
  #header .allmenu-popup .gnb > li .one-link {position: relative; display: inline-block; padding: 12rem 32rem 12rem 12rem; font-size: 20rem;}
  #header .allmenu-popup .gnb > li:hover .one-link {color: initial;}
  #header .allmenu-popup .gnb > li .one-link::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24rem; height: 24rem; background: url("/common/de/images/icon-arrow-down-large.svg") no-repeat center center / 100% auto; transition: transform .4s ease;}
  #header .allmenu-popup .gnb:has(li.on) > li:not(:has(.on)) .one-link {color: #888;}
  #header .allmenu-popup .gnb:has(li.on) > li:not(:has(.on)) .one-link::after {background-image: url("/common/de/images/icon-arrow-down-large-gray.svg");}
  #header .allmenu-popup .gnb > li.on .one-link {color: #2D2926 !important;}
  #header .allmenu-popup .gnb > li.on .one-link::after {transform: translateY(-50%) rotate(180deg); background-image: url("/common/de/images/icon-arrow-down-large.svg") !important;}
  #header .allmenu-popup .gnb > li .two-depth > li .two-link {font-size: 18rem;}
  #header .allmenu-popup .gnb > li .two-depth > li:hover .two-link {color: initial;}
  #header .allmenu-popup .gnb > li .two-depth > li:hover .two-link .txt-box .tit {color: initial;}
  #header .allmenu-popup .gnb > li .two-depth {display: none; padding: 8rem 20rem 24rem; margin-top: 0;}
  #header .allmenu-popup .gnb > li .two-depth:has(.two-link .img-box) {display: grid; grid-template-columns: repeat(2, 1fr); gap:16rem 8rem; padding: 8rem 12rem 24rem;}
  #header .allmenu-popup .gnb > li .two-depth:has(.two-link .img-box) > li .two-link {width: 100%;}
  #header .allmenu-popup .gnb > li .two-depth:has(.two-link .img-box) > li ~ li {margin-top: 0;}
  #header .allmenu-popup .gnb > li .two-depth > li .three-depth > li .three-link {font-size: 16rem;}
  #header .allmenu-popup .gnb > li .two-depth > li .three-depth > li .three-link:hover {color: initial;}
  #header .allmenu-popup .gnb > li .two-depth > li .two-link .txt-box .tit {font-size: 16rem;}
  #header .allmenu-popup .gnb > li .two-depth > li .two-link .img-box {display: block; height: 160rem; margin-bottom: 5rem; border-radius: 4px; overflow: hidden; background-color: lightgray;}
  #header .allmenu-popup .gnb > li .two-depth > li .two-link .img-box img {width: 100%; height: 100%; object-fit: cover;}
  #header .allmenu-popup .gnb > li .two-depth > li .three-depth {margin-top: 8rem;}
}
@media all and (max-width: 599px) {
  #header .allmenu-popup .gnb > li .two-depth > li .two-link .img-box {height: 80rem;}
}

/* search */
.search-popup {display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 21; padding: 80rem; background-color: #fff;}
.search-popup .pop-wrap {opacity: 0; transition: opacity .4s ease; transition-delay: 0s;}
.search-popup.on .pop-wrap {opacity: 1; transition: opacity .4s ease; transition-delay: .2s;}
.search-popup .pop-wrap .pop-cont {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;}
.search-popup .pop-wrap .pop-cont .pop-tit {font-family: "InterTight-Bold"; font-size: max(32rem, 24px); line-height: 140%; color: #2d2926; text-align: center;}
.search-popup .pop-wrap .pop-cont .form-input.srch-input {width: 800rem; height: max(72rem, 56px); margin: 40px 0 20px; border: 1px solid #2D2926; border-radius: 36rem;}
.search-popup .pop-wrap .pop-cont .form-input.srch-input input {padding: 0 40rem; font-size: max(18rem, 16px);}
.search-popup .pop-wrap .pop-cont .form-input.srch-input input::placeholder {font-size: max(18rem, 16px)}
.search-popup .pop-wrap .pop-cont .form-input.srch-input .input-btn-wrap {padding-right: 40rem; column-gap: 20rem;}
.search-popup .pop-wrap .pop-cont .form-input.srch-input .input-btn-wrap .srch-btn {width: max(32rem, 24px); height: max(32rem, 24px); background-image: url("/common/de/images/icon-search-32.svg");}
.search-popup .pop-wrap .pop-cont .search-wrap {display: flex; align-items: center;}
.search-popup .pop-wrap .pop-cont .search-wrap .tit {position: relative; margin-right: 16px; padding-right: 16px;}
.search-popup .pop-wrap .pop-cont .search-wrap .tit::before {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 10px; background-color: #d9d9d9;}
.search-popup .pop-wrap .pop-cont .search-wrap .search-swiper .swiper-slide {width: auto; margin-right: 8rem; background-color: #F8F8F8; border: 1px solid #E6E6E6; border-radius: 4rem;}
.search-popup .pop-wrap .pop-cont .search-wrap .search-swiper .swiper-slide a {display: inline-block; padding: 8rem 16rem;}
.search-popup .pop-wrap .pop-cont .search-wrap .search-swiper .swiper-slide:last-child {margin-right: 0;}
.search-popup .close-btn {position: absolute; width: max(32rem, 24px); height: max(32rem, 24px); background: url("/common/de/images/icon-pop-close.svg") no-repeat center center / 100% auto;}
.search-popup .close-btn {right: 80rem; top: 80rem;}

@media all and (max-width: 1023px) {
  .search-popup {padding: 56rem 12rem 48rem;}
  .search-popup .pop-wrap .pop-cont .pop-tit {font-size: 24rem; line-height: 125%;}
  .search-popup .pop-wrap .pop-cont .form-input.srch-input {width: 100%; height: 56rem; margin: 40rem 0 20rem;}
  .search-popup .pop-wrap .pop-cont .form-input.srch-input input {padding: 0 20rem; font-size: 16rem;}
  .search-popup .pop-wrap .pop-cont .form-input.srch-input input::placeholder {font-size: 16rem}
  .search-popup .pop-wrap .pop-cont .form-input.srch-input .input-btn-wrap {padding-right: 20rem; column-gap: 16rem;}
  .search-popup .pop-wrap .pop-cont .form-input.srch-input .input-btn-wrap .srch-btn {width: 24rem; height: 24rem; background-image: url("/common/de/images/icon-search-24.svg");}
  .search-popup .pop-wrap .pop-cont .search-wrap {display: block; width: 100%; padding: 0 12rem;}
  .search-popup .pop-wrap .pop-cont .search-wrap .tit {margin: 0 0 12rem; padding-right: 0;}
  .search-popup .pop-wrap .pop-cont .search-wrap .tit::before {display: none;}
  .search-popup .pop-wrap .pop-cont .search-wrap .search-swiper {overflow: visible;}
  .search-popup .pop-wrap .pop-cont .search-wrap .search-swiper .swiper-slide {margin-right: unset;}
  .search-popup .pop-wrap .pop-cont .search-wrap .search-swiper .swiper-slide a {padding: 8rem 12rem;}
  .search-popup .pop-wrap .pop-cont .search-wrap .search-swiper .swiper-slide:last-child {margin-right: unset;}
  .search-popup .close-btn {width: 40rem; height: 40rem; background-image: url("/common/de/images/icon-pop-close-mobile-40.svg");}
  .search-popup .close-btn {right: 20rem; top: 16rem;}
}
/* --------------------------------------------- header - END --------------------------------------------- */




/* --------------------------------------------- Visual - START --------------------------------------------- */
.visual-area{overflow:hidden; position:relative; margin-top:0 !important; width:100%; height:100vh;}
.visual-area .visual-wrap{position:relative; width:100%; height:100%;}
.visual-area .visual-wrap .visual-swiper.swiper-container{position:relative; height:100%;}
.visual-area .visual-wrap .visual-swiper .swiper-slide{position:absolute; top:0; left:0; width:100%; height:100%; clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%);}
.visual-area .visual-wrap .visual-swiper .swiper-slide .bg-div{position:absolute; top:0; left:0; width:100vw; height:100%;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .bg{width:100%; height:100%; background:#000;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .bg img{width:100%; height:100%; object-fit: cover;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .bg video{width:100%; height:100%; object-fit: cover;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap{position:absolute; top:0; left:0; width: 100vw; height:100%;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .txt-div{position:relative; top:263rem; left:calc((100% - 1680rem) / 2); width: 1680rem}
.visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .title p{font-family: "Arvo-Bold"; font-size: max(96rem, 80px); line-height: 120%; color: #fff;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .title p span{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .txt{position:relative; top:80rem; margin-top:32rem; color:#fff; opacity:0; transition:top 1s ease, opacity 1s ease;}
.visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .arrow-btn{display:inline-block; position:relative; top:80rem; margin-top:56rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.visual-area .visual-wrap .visual-swiper .swiper-slide.high-index{z-index:22;}
.visual-area .visual-wrap .visual-swiper .swiper-slide.remove{clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%)}
.visual-area .visual-wrap .visual-swiper .swiper-slide.active .txt-wrap .title > p span{top:0; opacity:1;}
.visual-area .visual-wrap .visual-swiper .swiper-slide.active .txt-wrap .title > p:nth-child(2) span{transition-delay:0.1s}
.visual-area .visual-wrap .visual-swiper .swiper-slide.active .txt-wrap .title > p:nth-child(3) span{transition-delay:0.2s}
.visual-area .visual-wrap .visual-swiper .swiper-slide.active .txt-wrap .txt{top:0; opacity:1; transition-delay:0.2s}
.visual-area .visual-wrap .visual-swiper .swiper-slide.active .txt-wrap .arrow-btn{top:0; opacity:1; transition-delay:0.3s}
.visual-area .control-area{display:flex; align-items: center; justify-content: flex-end; position:absolute; bottom:max(160rem, 120px); left:calc((100% - 1680rem) / 2); width:1680rem; z-index:1; opacity:0; transition:opacity 1s ease;}
.visual-area .control-area.active{opacity:1; transition-delay:0.3s}
.visual-area .control-area > button.finish{opacity:0.4}
.visual-area .control-area .prev-btn{margin-right:32rem; width:32rem; height:32rem; background:url("/common/de/images/btn-main-visual-prev.svg") no-repeat center center/32rem auto;}
.visual-area .control-area .next-btn{width:32rem; height:32rem; background:url("/common/de/images/btn-main-visual-next.svg") no-repeat center center/32rem auto;}
.visual-area .control-area .pagination-wrap{display:flex; align-items: center; margin-right:40rem;}
.visual-area .control-area .pagination-wrap .pagination{display:flex; column-gap: 16rem;}
.visual-area .control-area .pagination-wrap .pagination button{display:block; width:max(8rem, 6px); height:max(8rem, 6px); border-radius: 50%; background:#888;}
.visual-area .control-area .pagination-wrap .pagination button.on{background:#fff;}
.visual-area .control-area .pagination-wrap > button{display:block; margin-left:16rem; width:max(16rem, 12px); height:max(16rem, 12px);}
.visual-area .control-area .pagination-wrap .pause{background:url("/common/de/images/icon-visual-pause.svg") no-repeat center center/cover;}
.visual-area .control-area .pagination-wrap .play{background:url("/common/de/images/icon-visual-play.svg") no-repeat center center/cover;}

.visual-area .visual-wrap .hide-progress-bar{position:absolute; bottom:0; left:0; width:100%; height:0;}
.visual-area .visual-wrap .hide-progress-bar .bar{position:absolute; bottom:0; left:0; width:0; height:0;}

@media all and (max-width: 1023px) {
  .intro-bg video{width:96vw;}
  .visual-area{min-height:500rem;}
  .visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .txt-div{top:99rem; left:0; padding:0 20rem; width:100%}
  .visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .title p {font-size: 36rem;}
  .visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .txt{margin-top:20rem;}
  .visual-area .visual-wrap .visual-swiper .swiper-slide .txt-wrap .arrow-btn {margin-top: 24rem;}
  .visual-area .control-area{justify-content: space-between; left:20rem; bottom:40rem; width:calc(100% - 40rem);}
  .visual-area .control-area .pagination-wrap .pagination{column-gap: 8rem;}
  .visual-area .control-area .pagination-wrap .pagination button{width:max(5rem, 3px); height:max(5rem, 3px);}
  .visual-area .control-area .prev-btn{margin-right:30rem;}
  .visual-area .control-area .prev-btn,
  .visual-area .control-area .next-btn{width:24rem; height:24rem; background-size:24rem;}
}
/* --------------------------------------------- Visual - END --------------------------------------------- */




/* --------------------------------------------- banner - START --------------------------------------------- */
#wrap:has(.banner-wrap) #header.pos {position: absolute; top: 200rem;}
.banner-wrap {position: relative; z-index: 21; width: 100%; height: 200rem; overflow: hidden;}
.banner-wrap .user-opt-area {position: absolute; top: 200rem; transform: translateY(-100%); left: 0; z-index: 1; display: flex; justify-content: flex-end; align-items: center; column-gap: 20rem; width: 100%; min-height: 38rem; padding: 7rem 20rem; background: rgba(0, 0, 0, .4);}
.banner-wrap .user-opt-area .form-checkbox input + label {color:#fff;}
.banner-wrap .user-opt-area .btn-close {display:block; width: max(16rem, 14px); height: max(16rem, 14px); background:url("/common/de/images/icon-main-pop-close.svg") no-repeat center center / 100% auto;}
.banner-wrap .banner-swiper {height: 100%;}
.banner-wrap .banner-swiper .swiper-control {position: absolute; top: 60rem; left: 263rem; z-index: 1; display: flex; align-items: center; column-gap: 8rem; padding: 4rem 12rem; border-radius: 100rem; background: rgba(0, 0, 0, .4);}
.banner-wrap .banner-swiper .swiper-control .swiper-pagination {position: unset; width: auto; font-family: "InterTight-Medium"; font-size: max(13rem, 12px); color: #fff;}
.banner-wrap .banner-swiper .swiper-control .buttons {display: flex; column-gap: 4rem; align-items: center;}
.banner-wrap .banner-swiper .swiper-control .buttons > div {width: max(16rem, 14px); height: max(16rem, 14px);}
.banner-wrap .banner-swiper .swiper-control .buttons .swiper-button-next {order: 1; background-image: url("/common/de/images/icon-swiper-btn-next16-wht.svg");}
.banner-wrap .banner-swiper .swiper-control .buttons .swiper-button-prev {background-image: url("/common/de/images/icon-swiper-btn-prev16-wht.svg");}
.banner-wrap .banner-swiper:not(:has(.swiper-slide:nth-child(2))) .swiper-control {display: none;}
.banner-wrap .banner-swiper .swiper-slide {height: 100%;}
.banner-wrap .banner-swiper .swiper-slide .scroll-area {position: relative; overflow-y: auto; overflow-x: hidden; height: 100%; padding: 40rem 120rem 60rem;}
.banner-wrap .banner-swiper .swiper-slide:has(.scroll-area > img) .scroll-area {padding: 0;}
.banner-wrap .banner-swiper .swiper-slide .scroll-area::-webkit-scrollbar {width: 6rem; background: transparent;}
.banner-wrap .banner-swiper .swiper-slide .scroll-area::-webkit-scrollbar-thumb {width: 6rem; background: rgba(221,221,221,.6); border-radius: 2px;}
.banner-wrap .banner-swiper .swiper-slide .txt-box {position: relative; z-index: 1; display: flex; margin-left: 287rem;}
.banner-wrap .banner-swiper .swiper-slide .txt-box .tit {flex-shrink: 0; width: 407rem; font-family: "Arvo-Bold"; font-size: 32rem; line-height: 140%;}

.banner-wrap .banner-swiper .swiper-slide .txt-box .tit + .txts{ margin-left: 126rem;}
.banner-wrap .banner-swiper .swiper-slide .txt-box .txts .txt {width: 434rem; font-family: "InterTight-Medium"; font-size: 20rem; line-height: 140%;}
.banner-wrap .banner-swiper .swiper-slide .txt-box .txts a {position: relative; display: flex; align-items: center; margin-top: 12rem; font-family: "InterTight-Medium"; font-size: 16rem; line-height: 150%;}
.banner-wrap .banner-swiper .swiper-slide .txt-box .txts a svg {width: 24rem; height: 24rem; margin-left: 8rem;}
.banner-wrap .banner-swiper .swiper-slide .img {position: absolute; left: 1360rem; top: 200rem; transform: translateY(-100%); width: 318rem;}
.banner-wrap .banner-swiper .swiper-slide .img img {width: 100%;}
.banner-wrap .banner-swiper .swiper-slide .scroll-area > img {width: 100%; max-width: 1920rem; min-height: 200rem; margin: 0 auto; object-fit: contain;}
.banner-wrap .banner-swiper .swiper-slide.product{background: linear-gradient(90deg, #B2AAA4 2.07%, #7D746E 99.85%);}
.banner-wrap .banner-swiper .swiper-slide.product:after{display:block; content:""; position:absolute; right:234rem; top:0; width:659rem; height:200rem; background:url("/common/de/images/icon-banner-product.svg") no-repeat center center/cover}
.banner-wrap .banner-swiper .swiper-slide.first-visit{background:linear-gradient(to right, #f05324 0%, #f05324 60%, #ac320d 100%)}
.banner-wrap .banner-swiper .swiper-slide.first-visit:after{display:block; content:""; position:absolute; right:157rem; top:0; width:364rem; height:200rem; background:url("/common/de/images/icon-banner-first-visit.svg") no-repeat center center/cover}
.banner-wrap .banner-swiper .swiper-slide.revisit{background:linear-gradient(to right, #4B5D6E 0%, #4B5D6E 60%, #2C3946 100%)}
.banner-wrap .banner-swiper .swiper-slide.revisit:after{display:block; content:""; position:absolute; right:170rem; top:0; width:287rem; height:200rem; background:url("/common/de/images/icon-banner-revisit.svg") no-repeat center center/cover}
.banner-wrap .banner-swiper .swiper-slide.newsletter{background:linear-gradient(to right, #667A4F 0%, #667A4F 60%, #4A5938 100%)}
.banner-wrap .banner-swiper .swiper-slide.newsletter:after{display:block; content:""; position:absolute; right:180rem; top:20rem; width:272rem; height:180rem; background:url("/common/de/images/icon-banner-newsletter.svg") no-repeat center center/cover}
.banner-wrap .banner-swiper .swiper-slide.first-visit .txt-box .tit,
.banner-wrap .banner-swiper .swiper-slide.revisit .txt-box .tit,
.banner-wrap .banner-swiper .swiper-slide.newsletter .txt-box .tit{width:auto; color:#fff;}
.banner-wrap .banner-swiper .swiper-slide.product .scroll-area {padding-top: 56rem;}
.banner-wrap .banner-swiper .swiper-slide.product .txt-box {margin-left: 120rem;}
.banner-wrap .banner-swiper .swiper-slide.product .txt-box .tit {width: auto; font-size: max(40rem, 28px); color: #3A322D;}

#wrap:has(.banner-wrap) .cont-wrap {position: relative;}

@media all and (max-width: 1023px) {
  #wrap:has(.banner-wrap) #header.pos {top: 300rem;}
  .banner-wrap {height: 300rem;}
  .banner-wrap .user-opt-area {top: 300rem; justify-content: space-between; min-height: 40rem; padding: 7rem 16rem;}
  .banner-wrap .user-opt-area .btn-close {width: 16rem; height: 16rem;}
  .banner-wrap .banner-swiper .swiper-control {top: 16rem; left: unset; right: 16rem;}
  .banner-wrap .banner-swiper .swiper-control .swiper-pagination {font-size: 12rem;}
  .banner-wrap .banner-swiper .swiper-control .buttons > div {width: 20rem; height: 20rem;}
  .banner-wrap .banner-swiper .swiper-slide .scroll-area {padding: 48rem 20rem 60rem;}
  .banner-wrap .banner-swiper .swiper-slide .txt-box {display: block; margin: 0;}
  .banner-wrap .banner-swiper .swiper-slide .txt-box .tit {width: 100%; font-size: 20rem;}
  .banner-wrap .banner-swiper .swiper-slide .txt-box .txts .txt {width: 100%; font-size: 18rem;}
  .banner-wrap .banner-swiper .swiper-slide .txt-box .tit + .txts {margin: 20rem 0 0;}
  .banner-wrap .banner-swiper .swiper-slide .txt-box .txts a {margin-top: 32rem;}
  .banner-wrap .banner-swiper .swiper-slide .txt-box .txts a svg {width: 20rem; height: 20rem;}
  .banner-wrap .banner-swiper .swiper-slide .img {top: 300rem; left: 50%; transform: translate(-50%, -100%); width: 296rem;}
  .banner-wrap .banner-swiper .swiper-slide .img img {width: 100%;}
  .banner-wrap .banner-swiper .swiper-slide .scroll-area > img {width: 50%; max-width: unset; min-height: 300rem;}

  .banner-wrap .banner-swiper .swiper-slide.first-visit .scroll-area,
  .banner-wrap .banner-swiper .swiper-slide.revisit .scroll-area,
  .banner-wrap .banner-swiper .swiper-slide.newsletter .scroll-area{padding-top: 64rem;}
  .banner-wrap .banner-swiper .swiper-slide.product .scroll-area {padding-top: 48rem;}

  .banner-wrap .banner-swiper .swiper-slide.product:after {bottom: 0; top: unset; right: 0; width: 336rem; height: 233rem; background-image: url("/common/de/images/icon-banner-product-mob.svg");}
  .banner-wrap .banner-swiper .swiper-slide.first-visit{background:linear-gradient(to right, #f05324 0%, #f05324 80%, #ac320d 100%)}
  .banner-wrap .banner-swiper .swiper-slide.first-visit:after{display:block; content:""; position:absolute; right:25rem; top:auto; bottom:10rem; width:238rem; height:191rem; background:url("/common/de/images/icon-banner-first-visit-mo.svg") no-repeat center center/cover}
  .banner-wrap .banner-swiper .swiper-slide.revisit{background:linear-gradient(to right, #4B5D6E 0%, #4B5D6E 60%, #2C3946 100%)}
  .banner-wrap .banner-swiper .swiper-slide.revisit:after{display:block; content:""; position:absolute; right:25rem; top:auto; bottom:0; width:238rem; height:191rem; background:url("/common/de/images/icon-banner-revisit-mo.svg") no-repeat center center/cover}
  .banner-wrap .banner-swiper .swiper-slide.newsletter{background:linear-gradient(to right, #667A4F 0%, #667A4F 60%, #4A5938 100%)}
  .banner-wrap .banner-swiper .swiper-slide.newsletter:after{display:block; content:""; position:absolute; right:25rem; top:auto; bottom:0; width:218rem; height:151rem; background:url("/common/de/images/icon-banner-newsletter-mo.svg") no-repeat center center/cover}
  .banner-wrap .banner-swiper .swiper-slide.product .txt-box {margin: 0;}
  .banner-wrap .banner-swiper .swiper-slide.product .txt-box .tit {font-size: 32rem; line-height: 120%;}
}
@media all and (max-width: 599px) {  
  #wrap:has(.banner-wrap) #header.pos {top: 360rem;}
  .banner-wrap {height: 360rem;}
  .banner-wrap .user-opt-area {top: 360rem;}
  .banner-wrap .banner-swiper .swiper-slide .scroll-area {padding: 56rem 20rem 90rem;}
  .banner-wrap .banner-swiper .swiper-slide .img {top: 360rem;}
  .banner-wrap .banner-swiper .swiper-slide .scroll-area > img {width: 100%; min-height: 360rem;}

  .banner-wrap .banner-swiper .swiper-slide.first-visit .scroll-area,
  .banner-wrap .banner-swiper .swiper-slide.revisit .scroll-area,
  .banner-wrap .banner-swiper .swiper-slide.newsletter .scroll-area{padding-top: 64rem;}
  .banner-wrap .banner-swiper .swiper-slide.product .scroll-area {padding-top: 40rem;}
  .banner-wrap .banner-swiper .swiper-slide.product:after {left: 0; right: unset;}
}
/* --------------------------------------------- banner - END --------------------------------------------- */




/* --------------------------------------------- footer - START --------------------------------------------- */
footer {position: relative; padding: 80rem 0; width: 100%; border-top: 1px solid #ddd; background: #fff;}
footer .inner {position: relative; display: flex; justify-content: space-between; width: 1680rem;}
footer .left {margin-right: 100rem;}
footer .left .logo {width: 100rem; height: 100rem;}
footer .left .logo img {width: 100%;}
footer .left .policy-wrap {display: flex; align-items: center; gap: 24rem; margin-top: 56rem;}
footer .left .policy-wrap li a {font-family: "InterTight-Medium"; font-size: max(18rem, 16px); line-height: 140%; color: #2d2926;}
footer .left .policy-wrap li:first-child a {font-family: "InterTight-Bold";}
footer .left .txt {margin-top: 12rem; font-family: "InterTight-Medium"; font-size: max(14rem, 13px); color: #888;}
footer .left .copyright {margin-top: 40rem; font-family: "InterTight-Medium"; font-size: max(14rem, 13px); line-height: 150%; color: #888;}
footer .left .sns {margin-top: 32rem;}
footer .right {display: flex; align-items: flex-end; margin-right: 108rem;}
footer .right .newsletter {margin-top: 76rem;}
footer .right .newsletter .data-form {margin-top: 24rem;}
footer .right .drop-wrap {position: absolute; right: 0; top: 0;}
footer .right .drop-wrap .drop-btn {padding-right: max(32rem, 26px); font-family: "InterTight-Bold"; font-size: max(16rem, 14px);}
footer .right .drop-wrap .drop-btn::after {width: max(20rem, 18px); height: max(20rem, 18px); background-image: url("/common/de/images/icon-bot-arrow20.svg"); background-size: 20rem auto;}
footer .right .drop-wrap .drop-box {left: unset; right: 0; transform: translateX(0);}
footer .right .underline{font-family: "InterTight-Bold"; text-decoration: underline; text-underline-position: under;}

footer .left .policy-wrap li a.news-btn {display: none;}

@media all and (max-width: 1023px) {
  footer {padding: 40rem 0 64rem;}
  footer .inner {width: calc(100% - 40rem);}
  footer .left {width: 100%; margin-right: 0;}
  footer .left .logo {width: 64rem; height: 64rem;}
  footer .left .policy-wrap {flex-wrap: wrap; align-items: flex-start; gap: 16rem; margin-top: 32rem;}
  footer .left .policy-wrap li {width: calc(50% - 8rem);}
  footer .left .policy-wrap li a {font-size: 14rem; line-height: 145%;}
  footer .left .copyright {font-family: "InterTight-Regular"; font-size: 14rem; margin-top: 56rem;}
  footer .left .txt {font-family: "InterTight-Regular"; font-size: 14rem; line-height: 145%; margin-top: 16rem;}
  footer .left .sns {margin-top: 40rem;}

  footer .right .drop-wrap {right: 0; top: 96rem;}
  footer .right .drop-wrap .drop-btn {padding-right: 24rem; font-size: 14rem;}
  footer .right .drop-wrap .drop-btn::after {width: 16rem; height: 16rem; background-image: url("/common/de/images/icon-bot-arrow16.svg"); background-size: 16rem auto;}

  footer .left .policy-wrap li a.news-btn {display: block;}
  footer .right { display: none; /*display: flex; flex-direction: column; max-height: 580rem;*/ position: fixed; z-index: 100; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; padding: 20rem 10rem 20rem 20rem; background-color: #fff;}
  footer .right .scroll-area {height: 100%; max-height: 100%; padding-top: 16rem; padding-right: 10rem; overflow: auto;}
  footer .right .scroll-area::-webkit-scrollbar {width: 4px; background: transparent;}
  footer .right .scroll-area::-webkit-scrollbar-thumb {width: 4px; background: #ddd; border-radius: 2px;}
  footer .right .close-btn {position: absolute; top: -36rem; right: 20rem; z-index: 1; width: 16rem; height: 16rem; background: url("/common/eu/images/icon-pop-close-wht-mobile.svg") no-repeat center center / 100% auto;}
  footer .right .newsletter {position: relative; margin-top: 0;}
  footer .right .newsletter .data-form {margin-top: 40rem;}
  footer .right .data-form-w.newsletter .form-group .btn-wrap {bottom: 1px;}
}
/* --------------------------------------------- footer - END --------------------------------------------- */




/* --------------------------------------------- form - START --------------------------------------------- */
/* form group */
.form-wrap {display: flex; flex-direction: column; row-gap: 16rem;}
.form-group {display: flex; gap: 8rem; flex-wrap: wrap;}
.opt-group {display: grid; grid-template-columns: repeat(5, 1fr); gap: 16rem;}

/* form - input */
.form-input {overflow: hidden; position: relative; display: flex; align-items: center; width: 400rem; height: max(56rem, 40px); border: 1px solid #ddd; border-radius: 4rem; transition: .3s border ease;}
.form-input input {padding: 0 20rem; width: 100%; height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; border-radius: 0;}
.form-input:has(input:focus) {border: 1px solid #2D2926 !important;}
.form-input:has(input:disabled) input {background-color: #F8F8F8;}

/* input have btn */
.form-input:has(.input-btn-wrap) {display: flex; justify-content: space-between;}
.form-input .input-btn-wrap {display: flex; align-items: center; column-gap: 16rem; padding-right: 20rem;}
.form-input .input-btn-wrap .delete-btn {display: none; width: max(24rem, 20px); height: max(24rem, 20px); background: url("/common/de/images/icon-circle-x-btn.svg") no-repeat center center / 100% auto;}

/* form - input (search) */
.form-input.srch-input .input-btn-wrap .srch-btn {width: max(24rem, 20px); height: max(24rem, 20px); background: url("/common/de/images/icon-search-24.svg") no-repeat center center / 100% auto;}

/* form - checkbox */
.form-checkbox {position: relative;}
.form-checkbox input {position: absolute; top: 0; left: 0; width: max(20rem, 18px); height: max(20rem, 18px); opacity: 0.001;}
.form-checkbox input + label {position: relative; display: inline-block; background: url("/common/de/images/icon-checkbox.svg") center center / max(20rem, 18px) no-repeat; cursor: pointer;}
.form-checkbox input + label:not(:has(span)) {width: max(20rem, 18px); height: max(20rem, 18px);}
.form-checkbox input + label:has(span) {padding-left: max(36rem, 34px); width: auto; height: auto; min-height: max(20rem, 18px); font-family: "InterTight-Medium"; font-size: max(16rem, 14px); line-height: 150%; color: #2d2926; background-position: left top 2px;}
.form-checkbox input + label span.wht-txt a {color: #fff;}
.form-checkbox input + label a{font-family: "InterTight-SemiBold"; text-decoration: underline; color: #888; text-underline-position: under;}
.form-checkbox input + label b{font-family: "InterTight-SemiBold";}
.form-checkbox input:checked + label {background-image: url("/common/de/images/icon-checkbox-checked.svg");}
.form-checkbox input:disabled + label {background-image: url("/common/de/images/icon-checkbox-disabled.svg");}
.form-checkbox input:focus-visible + label {outline: 2px solid #000; border-radius: 2px;}

/* form - select */
.form-select.w100 {width: 100%;}
.form-select {display: flex; align-items: center; position: relative; width: 240rem; height: max(56rem, 40px); background-color: #fff; z-index: 1; border-radius: 4rem; border:1px solid #ddd;}
.form-select:before {content: ""; display: inline-block; position: absolute; right: 20rem; top: 50%; transform: translateY(-50%) rotate(0); width: max(20rem, 18px); height: max(20rem, 18px); background: url("/common/de/images/icon-arrow-down.svg") no-repeat center center / 100%; transition: transform .2s ease; z-index: -1;}
.form-select select {width: 100%; height: 100%; padding: 0 50rem 0 20rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.form-select select:required:invalid {color: #aaa;}
.form-select select option[value=""][disabled] {display:none; color:#aaa;}
.form-select:has(select:disabled) select {background-color: #F8F8F8;}
.form-select:has(select:disabled)::before {z-index: unset; background-image: url("/common/de/images/icon-arrow-down-gray.svg");}
.form-select.active:before {transform: translateY(-50%) rotate(180deg);}

/* form - textarea */
.form-textarea {overflow: hidden; position: relative; display: flex; flex-direction: column; width: 720rem; height: 160rem; border: 1px solid #ddd; border-radius: 4rem; background-color: #fff; transition: .3s border-color ease;}
.form-textarea textarea {width: 100%; height: 100%; padding: 16rem 16rem 16rem 20rem; font-size:max(16rem, 14px);}
.form-textarea textarea::placeholder{font-size:max(16rem, 14px);}
.form-textarea:has(textarea:disabled) {background-color: #F8F8F8}
.form-textarea textarea::-webkit-scrollbar {width: 4rem; background: transparent;}
.form-textarea textarea::-webkit-scrollbar-thumb {width: 4rem; background: #ddd; border-radius: 2px;}
.form-textarea .check-byte {display: flex; justify-content: flex-end; margin: 0 16rem 16rem; font-family: "InterTight-Medium"; font-size: max(14rem, 13px); line-height: 145%; color: #888;}
.form-textarea .check-byte .txt:last-child::before {content: '/'; margin: 0 4px;} 
.form-textarea:has(textarea:focus) {border: 1px solid #2d2926 !important;}
.form-textarea:has(textarea:disabled) textarea {background-color: #F8F8F8;}

/* dropbox */
.drop-wrap {position: relative; display: flex;}
.drop-wrap .drop-btn {position: relative; padding-right: max(24rem, 22px); font-family: "InterTight-Medium"; font-size: max(14rem, 13px); line-height: 145%; color: #2D2926;}
.drop-wrap .drop-btn::after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: max(16rem, 14px); height: max(16rem, 14px); background: url("/common/de/images/icon-bot-arrow.svg") no-repeat center center / 100% auto; transition: transform .4s ease;}
.drop-wrap.on .drop-btn::after {transform: translateY(-50%) rotate(180deg);}
.drop-wrap .drop-box {display: none; position: absolute; left: 0; top: calc(100% + 4rem); z-index: 2; padding: 16rem 0; min-width:145rem; border-radius: 8rem; border: 1px solid #ddd; background-color: #fff; box-shadow: 0 4rem 4rem 0 rgba(0,0,0,.05);}
.drop-wrap .drop-box a {display: block; padding: 4rem 20rem; font-family: "InterTight-Regular"; font-size: max(14rem, 13px); line-height: 145%; color: #2D2926; transition: color .2s ease;}
.drop-wrap .drop-box a:hover {color: #DE4826;}

/* popbox */
.hover-wrap {position: relative; display: flex;}
.hover-wrap .pop-box {display: none; position: absolute; left: 50%; top: calc(100% + 8rem); transform: translateX(-50%); width: max(248rem, 205px); padding: 24rem; border-radius: 8rem; border: 1px solid #ddd; background-color: #fff; box-shadow: 0 4rem 4rem 0 rgba(0,0,0,.05);}
.hover-wrap .pop-box::before {content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 24rem; height: 9rem;}

.file-down-area{margin-top:80rem; display:flex; gap:8rem; flex-wrap:wrap;}
.file-down-area .file{display:flex; align-items: center; justify-content: center; padding:8rem 12rem; border:1px solid #E6E6E6; background:#f8f8f8; border-radius:4rem;}
.file-down-area .file span{display:inline-block; padding-left:max(28rem, 24px); line-height:150%; color:#2D2926; word-wrap: break-word; word-break: break-all; background:url("/common/de/images/icon-file.svg") no-repeat left top/max(20rem, 18px) auto;}

@media all and (max-width: 1023px) {
  /* form group */
  .opt-group {grid-template-columns: repeat(2, 1fr);}

  /* form - input */
  .form-input {width: 100%; height: 48rem;}

  /* input have btn */
  .form-input .input-btn-wrap .delete-btn {width: 20rem; height: 20rem;}

  /* form - input (search) */
  .form-input.srch-input .input-btn-wrap .srch-btn {width: 20rem; height: 20rem; background-image: url("/common/de/images/icon-search-20.svg");}

  /* form - checkbox */
  .form-checkbox input {width: 20rem; height: 20rem;}
  .form-checkbox input + label {background-size: 20rem auto;}
  .form-checkbox input + label:not(:has(span)) {width: 20rem; height: 20rem;}
  .form-checkbox input + label:has(span) {padding-left: 36rem; font-size: 16rem; min-height: 20rem; background-position: left top 1px;}

  /* form - select */
  .form-select {width: 100%; height: 48rem;}
  .form-select:before {width:20rem; height:20rem;}
  /* form - textarea */
  .form-textarea {width: 100%; height: 160rem;}
  .form-textarea textarea {padding: 12rem 16rem 12rem 20rem; font-size:16rem;}
  .form-textarea textarea::placeholder {font-size:16rem;}
  .form-textarea .check-byte {margin: 0 12rem 12rem; font-size: 14rem;}

  /* dropbox */
  .drop-wrap .drop-btn {padding-right: 24rem;}
  .drop-wrap .drop-btn::after {width: 16rem; height: 16rem;}

  .hover-wrap .pop-box{width:205rem}

  .file-down-area{margin-top:40rem;}
  .file-down-area .file{padding:4rem 8rem;}
  .file-down-area .file span{padding-left:24rem; line-height:150%; background-size:20rem auto; background-position:left top -2rem}
}

@media all and (max-width: 599px) {
  .file-down-area .file span{background-position:left top -1rem}
}
/* --------------------------------------------- form - END --------------------------------------------- */






/* --------------------------------------------- Table - Start --------------------------------------------- */
.table-sec ~ .table-sec {margin-top:64rem;}
.table-sec.in-title ~ .table-sec.in-title {margin-top:72rem;}
.table-sec .table-tit{margin-bottom:20rem; font-size:max(20rem, 18px); font-family: "InterTight-Bold";}
.table-sec .basic-table {border-top: 1px solid #2D2926;}
.table-sec .basic-table tr th, .table-sec .basic-table tr td {padding: 20rem; font-size: max(16rem, 14px); /* color: #06161E; */ line-height: 160%; letter-spacing: -.02em; vertical-align: top; border-right: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; word-wrap: break-word;}
.table-sec .basic-table tr td:last-child{border-right:0;}
.table-sec.in-title .basic-table tr td{padding:16rem;}
.table-sec .basic-table tr th {font-family: "InterTight-Medium"; text-align: left; vertical-align: top;}
.table-sec .basic-table tr td {font-family: "InterTight-Regular"; vertical-align: middle; background-color: #fff;}
.table-sec .basic-table tr td .tit{margin-bottom:8rem; font-size:max(16rem, 14px); color:#888888;}

.table-sec .basic-table .check {display: inline-block; width: 12rem; height: 7rem; background: url("/common/de/images/icon-check.svg") no-repeat center center / 100% auto;}

.table-scroll-w {overflow-x: auto; cursor: grab; user-select: none;}
.table-scroll-w .table-sec .table-tit span {position: sticky; left: 0;}
.table-scroll-w .table-sec .table-box .basic-table {table-layout: fixed; width: 100%;}
.table-scroll-w .table-sec .table-box .basic-table tbody tr th {position: relative; left: 0; background-color: #fff; z-index: 2; border-right: none;}
.table-scroll-w .table-sec .table-box .basic-table thead th:nth-child(1) {position: relative; left: 0; background-color: #fff; z-index: 2; border-right: none;}
.table-scroll-w.sticky .table-sec .table-box .basic-table tbody tr th {position: sticky;}
.table-scroll-w.sticky .table-sec .table-box .basic-table thead th:nth-child(1) {position: sticky;}
.table-scroll-w .table-sec .table-box .basic-table tbody tr th::before {content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; height: 100%; background-color: #E6E6E6;}
.table-scroll-w .table-sec .table-box .basic-table thead th:nth-child(1)::before {content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; height: 100%; background-color: #E6E6E6;}

.table-header {display: flex; flex-wrap: nowrap; min-width: 100%; margin-bottom: 40rem;}
.table-header .item {flex-shrink: 0; font-family: "InterTight-Bold"; font-size: max(20rem, 18px); line-height: 140%;}
.table-header .item span {display: inline-block; width: 100%; height: 100%; padding: 24rem 20rem; background-color: #F8F8F8; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;}
.table-header > .item {position: sticky; left: 0; background-color: #F8F8F8; z-index: 2;}
.table-header > .item span {border-left: 1px solid #E6E6E6; border-radius: 8rem 0 0 8rem;}
.table-header > .item::before {content: ""; position: absolute; left: 0; top: -1px; z-index: -1; height: calc(100% + 2px); width: 10px; background-color: #fff}
.table-header .drop-wrap2 {width: 100%;}
.table-header .drop-wrap2 .drop-box2 .item {flex: 1; pointer-events: none;}
.table-header .drop-wrap2 .drop-box2 .item:last-child span {border-right: 1px solid #E6E6E6; border-radius: 0 8rem 8rem 0; margin-right: 1rem;}
.table-header .drop-wrap2 .drop-box2 {display: flex; flex-wrap: nowrap;}
.table-header .drop-wrap2 .drop-btn2 {display: none;}

  /* Specifications table */
  .specifi-area .table-scroll-w .table-sec .table-box .basic-table  col.th-col {min-width: 369rem; max-width: 369rem; width: 369rem;}
  .specifi-area .table-scroll-w .table-sec .table-box .basic-table  col.td-col {width: 100%; min-width: 286rem;}
  .specifi-area .table-scroll-w .table-header li:not(:first-child) {min-width: 286rem;}
  .specifi-area .table-scroll-w .table-header li:first-child {width: 369rem;}

  /* Tractor compatibillity charts */
  .highlight-area  .table-scroll-w .table-sec .table-box .basic-table  col.th-col {min-width: 206rem; max-width: 206rem; width: 206rem;}
  .highlight-area  .table-scroll-w .table-sec .table-box .basic-table  col.td-col {width: 100%; min-width: 206rem;}

@media all and (max-width: 1023px) {
  .table-sec ~ .table-sec {margin-top:40rem;}

  .table-sec .basic-table tr th, .table-sec .basic-table tr td {padding: 10rem 16rem; font-size: 13rem; line-height: 165%; border-right: 0; border-bottom: 0;}
  .table-sec .basic-table tr > td:last-child{background:url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-sec .basic-table tr td{ background:url("/common/de/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-sec .basic-table tr th{background:url("/common/de/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-sec .basic-table thead tr th{background:url("/common/de/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-sec .basic-table thead tr th:last-child{background:url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-sec .basic-table tbody tr th{background:url("/common/de/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-sec .basic-table tr td .tit{font-size:14rem;}
  .table-sec .basic-table tr .bdr {border-right: 0; background:url("/common/de/images/bg-gray-pixel.jpg") right top/1px 1px repeat-y, url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x !important;}
  .table-sec .basic-table tr td .f-body1 + .f-body1{margin-top:4rem;}
  .table-sec.need-scroll {}/* mobile에서 table 가로스크롤 필요할 경우 need-scroll 클래스 추가 */
  .table-sec.need-scroll .table-box {position: relative; left: -20rem; padding: 0 20rem 16rem; width: calc(100% + 40rem); overflow-x: auto;}
  .table-sec.need-scroll .table-box .basic-table {width: 130%;}
  .table-sec.need-scroll .table-tit {width: 130%;}

  .table-scroll-w {width: calc(100% + 20rem); padding-bottom: 16rem;}
  .table-scroll-w .table-sec .table-tit {width: 150%}
  .table-scroll-w .table-sec .table-box {width: 150%; padding-right: 20rem;}
  .table-scroll-w .table-sec .table-box .basic-table tr th::before {display: none;}

  .table-scroll-w:has(.table-header) {width: 100%; padding: 0; cursor: auto; overflow-x: visible; user-select: text;}
  .table-scroll-w:has(.table-header) .table-sec .table-tit {width: 100%;}
  .table-scroll-w:has(.table-header) .table-sec .table-box {width: 100% !important; padding: 0;}
  .table-scroll-w.sticky:has(.table-header) .table-sec .table-box .basic-table tbody tr th {position: unset;}
  .table-scroll-w:has(.table-header) .table-sec .basic-table tr td{background: url("/common/de/images/bg-gray-pixel.jpg") left bottom/1px 1px repeat-x;}
  .table-header {width: 100% !important; margin-bottom: 20rem; border: 1px solid #E6E6E6; border-radius: 8rem; background-color: #F8F8F8;}
  .table-header .item {font-size: 18rem;}
  .table-header .item span {padding: 16rem; border: none; background-color: unset;}
  .table-header > .item {position: unset; width: 50% !important; background-color: unset;}
  .table-header > .item::before {display: none;}
  .table-header > .item span {border-radius: unset; border: none;}
  .table-header .drop-wrap2 {position: relative; width: 50%;}
  .table-header .drop-wrap2 .drop-btn2 {position: relative; display: block;}
  .table-header .drop-wrap2 .drop-btn2 span {padding-right: 36rem;}
  .table-header .drop-wrap2 .drop-btn2::after {content: ""; position: absolute; right: 16rem; top: 50%; transform: translateY(-50%); width: 20rem; height: 20rem; background: url("/common/de/images/icon-arrow-down.svg") no-repeat center center / 100% auto; transition: transform .4s ease;}
  .table-header .drop-wrap2.on .drop-btn2::after {transform: translateY(-50%) rotate(180deg);}
  .table-header .drop-wrap2 .drop-box2 {display: none; position: absolute; top: calc(100% - 7rem); left: 0; z-index: 3; width: 100%; max-height: 158rem; overflow-y: auto; padding: 12rem 0; border: 1px solid #ddd; border-radius: 8rem; background-color: #fff; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);}
  .table-header .drop-wrap2 .drop-box2::-webkit-scrollbar {width: 4rem; background: transparent;}
  .table-header .drop-wrap2 .drop-box2::-webkit-scrollbar-thumb {width: 4rem; background: rgba(221,221,221,.6); border-radius: 2px;}
  .table-header .drop-wrap2 .drop-box2 .item {font-family: "InterTight-Regular"; font-size: 14rem; line-height: 150%; pointer-events: unset;}
  .table-header .drop-wrap2 .drop-box2 .item.on {font-family: "InterTight-SemiBold";}
  .table-header .drop-wrap2 .drop-box2 .item span {padding: 6rem 20rem;}
  .table-header .drop-wrap2 .drop-box2 .item:last-child span {margin: 0; border: none; border-radius: unset;}

    /* Specifications table */
    .specifi-area .table-scroll-w .table-sec .table-box .basic-table col.th-col {min-width: 50%; max-width: 50%; width: 50%;}
    .specifi-area .table-scroll-w .table-sec .table-box .basic-table col.td-col {min-width: 50%;}
    .specifi-area .table-scroll-w .table-sec .table-box .basic-table td {display: none;}
    .specifi-area .table-scroll-w .table-sec .table-box .basic-table td.on {display: table-cell;}
    .specifi-area .table-scroll-w .table-sec .table-box .basic-table col.td-col:not(:nth-of-type(2)) {display: none;}
    .specifi-area .table-scroll-w .table-sec .table-box .basic-table col.td-col:nth-of-type(2) {display: block;}

    /* Tractor compatibillity charts */
    .highlight-area  .table-scroll-w .table-sec .table-box .basic-table  col.th-col {min-width: 102rem; max-width: 102rem; width: 102rem;}
    .highlight-area  .table-scroll-w .table-sec .table-box .basic-table  col.td-col {min-width: 112rem;}
}
/* --------------------------------------------- Table - End --------------------------------------------- */




/* --------------------------------------------- button - START --------------------------------------------- */
.btn-wrap {display: flex; justify-content: center;}

/* border button */
.border-btn{display:flex; align-items: center; justify-content: center; padding:15rem 40rem; min-width:200rem; border:1px solid #fff; border-radius:4rem;}
.border-btn span{font-size: max(16rem, 14px); color:#fff; font-family: "InterTight-Bold";}
.border-btn.black{border: 1px solid #2D2926; border-radius: 4rem;}
.border-btn.black span{font-family: "InterTight-Medium"; font-size: max(16rem, 14px); color: #2d2926;}

/* border btn - CTA */
.border-btn2 {display: flex; align-items: center; justify-content: center; min-width: 200rem; height: max(56rem, 40px); padding: 0 40rem; border: 1px solid #DE4826; border-radius: 4rem; transition: background .2s ease; background-color: #fff;}
.border-btn2:hover {background-color: #F8F8F8;}
.border-btn2 span {font-family: "InterTight-Bold"; font-size: max(18rem, 16px); color: #DE4826;}

/* border btn - Primary */
.border-btn2.bg {background-color: #DE4826;}
.border-btn2.bg:hover {background-color: #C72C09;}
.border-btn2.bg span {color: #fff;}

/* border btn - Secondary */
.border-btn2.black {border: 1px solid #2D2926;}
.border-btn2.black:hover {background-color: #2D2926;}
.border-btn2.black span {font-family: "InterTight-Medium"; color: #2D2926;}
.border-btn2.black:hover span {color: #fff;}
.border-btn2.wht {border: 1px solid #fff; background-color: transparent;}
.border-btn2.wht:hover {background-color: transparent;}
.border-btn2.wht span {font-family: "InterTight-Medium"; color: #fff;}
.border-btn2.wht:hover span {color: #fff;}
.border-btn2 .item-count span {color: #aaa;}

/* border btn - Tertiary (Input) */
.form-group .border-btn2 {min-width: unset;}
.form-group .border-btn2 span {font-family: "InterTight-SemiBold"; font-size: max(16rem, 14px);}

/* disabled */
.border-btn2.disabled {border-color: #E6E6E6; background-color: #E6E6E6; pointer-events: none;}
.border-btn2.disabled span {color: #888;}

/* more btn */
.btn-wrap:has(.more-btn2) {margin-top: 32rem;}
.more-btn2 {display: flex; align-items: center; font-family: "InterTight-Medium"; font-size: max(16rem, 14px); line-height: 150%; color: #888;}
.more-btn2::after {content: ""; displ: inline-block; width: 24rem; height: 24rem; margin-left: 4rem; background: url("/common/de/images/icon-plus-more.svg") no-repeat center center / 100% auto;}

/* download btn */
.down-file-area {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rem;}
.down-file-area .down-btn {width: 100%; min-height: 340rem;}
.down-btn {position: relative; padding: 40rem 40rem 128rem; border: 1px solid #E6E6E6; border-radius: 8rem; background-color: #F8F8F8; transition: background .2s ease;}
.down-btn:after {content: ""; position: absolute; bottom: 40rem; left: 40rem; width: 48rem; height: 48rem; background: url("/common/de/images/icon-download-btn.svg") no-repeat center center / 100% auto;}
.down-btn:hover .file {transition: color .2s ease;}
.down-btn .category {display: inline-block; margin-bottom: 16rem; padding: 2rem 8rem; color: #fff; border-radius: 2px; background-color: #888; transition: color .2s ease, background .2s ease;}
.down-btn p {word-break: break-all; word-wrap: break-word;}
.down-btn:hover {background-color: #C72C09;}
.down-btn:hover:after {background-image: url("/common/de/images/icon-download-btn-on.svg");}
.down-btn:hover .category {color: #2D2926; background-color: #fff;}
.down-btn:hover .file {color: #fff;}

/* 32x32 icon button */
.icon-btn {width: max(32rem, 24px); height: max(32rem, 24px); background: url("") no-repeat center center / 100% auto;}
.icon-btn span {font-size: 0; color: transparent;}
.icon-btn.facebook {background-image: url("/common/de/images/icon-sns-facebook.svg");}
.icon-btn.instar {background-image: url("/common/de/images/icon-sns-instargram.svg");}
.icon-btn.youtube {background-image: url("/common/de/images/icon-sns-youtube.svg");}
.icon-btn.linkedin {background-image: url("/common/de/images/icon-sns-linkedin.svg");}
.sns {display: flex; gap: 20rem;}

.new {position: relative; display: inline-block; top: -3rem; width: max(16rem, 14px); height: max(16rem, 14px); margin-right: 4rem; background: url("/common/de/images/icon-new.svg") no-repeat center center / 100% auto; font-size: 0; color: transparent;}

.arrow-btn span{padding-right: 32rem; color: #fff; background: url("/common/de/images/icon-view-more-arrow-white.svg") no-repeat right center/24rem auto;}
.arrow-btn.gray span{color: #888; background-image: url("/common/de/images/icon-view-more-arrow-gray.svg");}

.reset-btn span{padding-left:28rem; font-size:max(16rem, 14px); font-family: "InterTight-SemiBold"; color:#2D2926; background:url("/common/de/images/icon-reset.svg") no-repeat left center/20rem auto;}

.download-btn span{padding-right:32rem; background:url("/common/de/images/icon-download-btn.svg") no-repeat right center/24rem;}

@media all and (max-width: 1023px) {
  /* border button */
  .border-btn{padding:16rem 40rem;}
  .border-btn span{font-size:16rem;}

  /* border btn - Primary */
  .border-btn2 {min-width: 131rem; height: 48rem; padding: 0 32rem;}
  .border-btn2 span {font-family: "InterTight-SemiBold"; font-size: 16rem;}

  /* border btn - Secondary */
  .border-btn2.black span {font-family: "InterTight-SemiBold";}

  /* border btn - Tertiary (Input) */
  .form-group .btn-wrap {width: 100%;}
  .form-group .border-btn2 {width: 100%;}
  .form-group .border-btn2.black {min-width: unset; padding: 0 20rem;}
  .form-group .border-btn2 span {font-size: 16rem;}


  /* download btn */
  .down-file-area {grid-template-columns: repeat(2, 1fr); gap: 8rem;}
  .down-file-area .down-btn {min-height: 150rem;}
  .down-btn {padding: 16rem 16rem 52rem;}
  .down-btn:after {left: 16rem; bottom: 16rem; width: 20rem; height: 20rem; background-image: url("/common/de/images/icon-download-btn-20.svg");}
  .down-btn:hover {background-color: #F8F8F8;}
  .down-btn:hover:after {background-image: url("/common/de/images/icon-download-btn-20.svg");}
  .down-btn:hover .file {color: #2d2926;}
  .down-btn .category {margin-bottom: 8rem; padding: 2rem 4rem;}
  .down-btn:hover .category {color: #fff; background-color: #888;}


  /* 32x32 icon button */
  .icon-btn {width: 32rem; height: 32rem;}
  .new {width: 16rem; height: 16rem;}
  .arrow-btn span {padding-right: 24rem; background-size: 16rem auto; background-position: top 2rem right;}
}
/* --------------------------------------------- button - END --------------------------------------------- */




/* --------------------------------------------- tab - START --------------------------------------------- */
/* tab */
.tab-area {margin-bottom: 40rem;}

.tab-func-area .con-area .con {display: none;}
.tab-func-area .con-area .con.on {display: block;}

/* swiper tab btn */
.swiper-tab-btn{overflow:visible;}
.swiper-tab-btn .tab-btn{position:relative; margin-right:40rem;  height:140%; width:auto;}
.swiper-tab-btn .tab-btn:last-child{margin-right:0;}
.swiper-tab-btn .tab-btn:after{content:""; position:absolute; bottom:-2px; left:0; width:100%; height:2px; background:#DE4826; opacity:0;}
.swiper-tab-btn .tab-btn.on:after{opacity:1;}
.swiper-tab-btn .tab-btn span{color:#aaa; font-family: "InterTight-Medium"; font-size:max(20rem, 18px);}
.swiper-tab-btn .tab-btn.on span{color:#DE4826; font-family: "InterTight-Bold";}

/* box btn swiper */
.swiper-box-btn {border-radius: 8rem; overflow: hidden; padding: 4rem; background-color: rgba(0,0,0,.2);}
.swiper-box-btn .swiper-slide {width: auto;}
.swiper-box-btn .swiper-slide span {display: inline-flex; align-items: center; height: 100%; padding: 12rem 24rem; font-size: max(16rem, 14px); line-height: 150%; color: #fff; border-radius: 6rem; transition: background .2s ease;}
.swiper-box-btn .swiper-slide.on span {font-family: "InterTight-SemiBold"; background-color: #DE4826;}

@media all and (max-width: 1023px) {
  /* tab */
  .tab-area {margin-bottom: 20rem;}

  /* swiper tab btn */
  .swiper-tab-btn .tab-btn {margin-right: 24rem;}
  .swiper-tab-btn .tab-btn span{font-size:18rem;}

  /* box btn swiper */
  .swiper-box-btn {padding: 2rem;}
  .swiper-box-btn .swiper-slide span {font-size: 14rem; padding: 8rem 20rem;}
}
/* --------------------------------------------- tab - END --------------------------------------------- */




/* --------------------------------------------- page layout - START --------------------------------------------- */
section ~ section {margin-top: 0 !important; padding-top: 144rem;}

@media all and (max-width: 1023px) {
  section ~ section {margin-top: 0 !important; padding-top: 80rem;}
  .s-pt {padding-top: 56rem !important;}  /* section에 s-pt추가, padding-top이 80rem -> 56rem */
}

/* title wrap */
.page-tit-wrap{margin-bottom:80rem;}
.page-tit-wrap .f-big-t3{position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.page-tit-wrap .f-big-t3 + *{position:relative; top:80rem; margin-top:16rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.page-tit-wrap.active .f-big-t3{top:0; opacity:1;}
.page-tit-wrap.active .f-big-t3 + *{top:0; opacity:1; transition-delay:0.15s}

#wrap:not(.main) .cont-wrap section .tit-wrap {display: block; position: relative; margin-bottom: 56rem;}
#wrap:not(.main) .cont-wrap section .tit-wrap:has(.left, .right) {display: flex; align-items: center; justify-content: space-between;}
#wrap:not(.main) .cont-wrap section .tit-wrap .txt-box .sub-tit {margin-bottom: 24rem;}

/* section title */
.sec-tit-wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rem;}

/* series tit */
.series-tit-wrap {margin-bottom: 56rem;}
.series-tit-wrap .series {margin-bottom: 16rem; color: #888;}

/* bg wrap */
.page-bg-wrap ~ .page-con-wrap section:first-child {padding-top: 144rem;}

.page-bg-wrap {width: 100%; height: 512rem;}
.page-bg-wrap img {width: 100%; height: 100%; object-fit: cover;}

/* page bottom button */
.page-bot-btn {margin-top: 64rem;}


@media all and (max-width: 1023px) {
  /* title wrap */
  .page-tit-wrap{margin-bottom:56rem;}
  .page-tit-wrap .f-big-t3{font-size:36rem;}

  #wrap:not(.main) .cont-wrap section .tit-wrap {margin-bottom: 24rem;}
  #wrap:not(.main) .cont-wrap section .tit-wrap:has(.left, .right) {display: block;}
  #wrap:not(.main) .cont-wrap section .tit-wrap .left {margin-bottom: 40rem;}
  #wrap:not(.main) .cont-wrap section .tit-wrap .txt-box .sub-tit {margin-bottom: 20rem;}

  /* series tit */
  .series-tit-wrap {margin-bottom: 24rem;}

  /* bg wrap */
  .page-bg-wrap ~ .page-con-wrap section:first-child {padding-top: 56rem;}
  .page-bg-wrap {height: 240rem;}

  /* page bottom button */
  .page-bot-btn {margin-top: 32rem;}
}
/* --------------------------------------------- page layout - END --------------------------------------------- */




/* --------------------------------------------- data-form - START --------------------------------------------- */
.required-txt {display: flex; align-items: flex-start; justify-content: flex-end; color: #2D2926;}
.required-txt .required {margin-right: 8rem;}
.required {display: inline-block; width: max(6rem, 3px); height: max(6rem, 3px); border-radius: 100%; background-color: #DE4826;}

/* @ data-form-w에 w-940 추가 시, data-form width 940 */
/* @ data-form-w에 w-580 추가 시, data-form width 580 */
.data-form-w.w-940 {width: 940rem;}
.data-form-w.w-580 {width: 580rem;}
.data-form-w.w-580 .data-form .row .th {width: 120rem;}
.data-form-w > .form-tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rem;}
.data-form-w > .required-txt {margin-bottom: 20rem;}
.data-form-w > .gray-box {margin-top: 40rem;}
.data-form-w > .gray-all-agree {margin-top: 40rem;}
.data-form-w > .gray-box + .gray-box{margin-top: 8rem;}
.data-form-w > .btn-wrap {margin-top: 64rem;}
.data-form .form-input, .data-form .form-textarea {width: 100%;}

/* @ No more than 3 inputs 3 && No agreement box */
.data-form-w.w-940:not(:has(.gray-box, .data-form .row:nth-child(4))) > .btn-wrap {margin-left: 220rem;}
.data-form-w.w-580:not(:has(.gray-box, .data-form .row:nth-child(4))) > .btn-wrap {margin-left: 120rem;}

.data-form {display: flex; flex-direction: column; row-gap: 32rem;}
.data-form .row .th{margin-bottom:12rem;}
.data-form .row .th p {display: inline-flex; align-items: flex-start; font-family: "InterTight-Medium"; font-size: max(18rem, 16px); line-height: 140%;}
.data-form .row .th p .required {margin-left: 8rem;}
.data-form .row .td {width: 100%;}
.data-form .opt-group{display:flex; flex-wrap:wrap; gap: 16rem 0;}

.data-form .opt-group .form-checkbox{width:25%;}

@media all and (max-width: 1023px) {
  .required-txt .required {margin-right: 4rem;}
  .required {width: 4rem; height: 4rem;}

  .data-form-w.w-940 {width: 100%;}
  .data-form-w.w-580 {width: 100%;}
  .data-form-w > .form-tit {margin-bottom: 16rem;}
  .data-form-w > .required-txt {margin-top: 16rem;}
  .data-form-w > .gray-box {margin-top: 16rem;}
  .data-form-w > .gray-all-agree {margin-top: 16rem;}
  .data-form-w > .btn-wrap {margin-top: 40rem;}
  .data-form-w > .btn-wrap .border-btn2 {width: 100%;}

  .data-form-w.w-940:not(:has(.gray-box, .data-form .row:nth-child(4))) > .btn-wrap {margin-left: 0;}
  .data-form-w.w-580:not(:has(.gray-box, .data-form .row:nth-child(4))) > .btn-wrap {margin-left: 0;}

  .data-form {row-gap: 16rem  ;}
  .data-form .row {flex-direction: column;}
  .data-form .row .th {margin-bottom: 8rem;}
  .data-form .row .th p {font-size: 16rem; line-height: 150%;}
  .data-form .row .th p .required {margin-left: 4rem;}

  .data-form .opt-group .form-checkbox{width:50%;}
}

/* newsletter */
.data-form-w.newsletter {width: 560rem;}
.data-form-w.newsletter .data-form {gap: 16rem;}
.data-form-w.newsletter .data-form .row .th {display: none;}
.data-form-w.newsletter .form-group {flex-wrap: nowrap;}
.data-form-w.newsletter .form-checkbox input + label:has(span) {padding-left: max(32rem, 30px); line-height: 1;}

@media all and (max-width: 1023px) {
  .data-form-w.newsletter {width: 100%;}
  .data-form-w.newsletter .data-form {padding-bottom: 88rem;}
  .data-form-w.newsletter .data-form .row .th {display: block;}
  .data-form-w.newsletter .form-group {flex-wrap: wrap;}
  .data-form-w.newsletter .form-group .btn-wrap {position: absolute; bottom: 0;}
  .data-form-w.newsletter .form-checkbox input + label:has(span) {padding-left: 32rem;}
}
/* --------------------------------------------- data-form - END --------------------------------------------- */




/* --------------------------------------------- Swiper - START --------------------------------------------- */
/* common swiper drag */
.swiper-container {position: relative;}
.swiper-container-horizontal > .swiper-scrollbar {width: 580rem; height: 4px; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 4px; background-color: #E6E6E6;}
.swiper-scrollbar-drag {border-radius: 4px; background-color: #DE4826;}

/* common swiper button */
.swiper-button-wrap {display: flex; column-gap: 32rem;}
.swiper-button-next, .swiper-button-prev {position: unset; width: 32rem; height: 32rem; margin: 0; background: url() no-repeat center center / 100% auto;}
.swiper-button-next {background-image: url("/common/de/images/icon-swiper-btn-next.svg");}
.swiper-button-prev {background-image: url("/common/de/images/icon-swiper-btn-prev.svg");}

/* common swiper pagination */
.swiper-container .swiper-pagination {bottom: 0;}
.swiper-container .swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 8rem; background-color: #8D9093; opacity: 1;}
.swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #2D2926;}

/* nav swiper */
.nav-swiper a {cursor: url("/common/de/images/icon-swipe.png") 40 40, auto;}
.nav-swiper a:hover {cursor: url("/common/de/images/icon-swipe.png") 40 40, auto;}
.nav-swiper:hover {cursor: url("/common/de/images/icon-swipe.png") 40 40, auto !important;}

.nav-swiper {overflow: hidden; padding: 0 120rem 44rem; overflow: hidden;}
.nav-swiper .swiper-slide {width: 320rem;}
.nav-swiper .swiper-slide .img-box {width: 100%; height: 240rem; border-radius: 16rem; overflow: hidden; background-color: #ccc;}
.nav-swiper .swiper-slide .img-box ~ .txt-box {margin-top: 12rem;}
.nav-swiper .swiper-slide .img-box img {width: 100%; height: 100%; object-fit: cover;}
.nav-swiper .swiper-slide .txt-box .tit {font-family: "InterTight-Medium"; font-size: max(18rem, 16px); color: #2d2926; transition: color .2s ease; transition: color .2s ease;}
.nav-swiper .swiper-slide:hover .txt-box .tit {color: #DE4826;}

@media all and (max-width: 1023px) {
  /* common swiper drag */

  /* common swiper button */
  .swiper-button-wrap {column-gap: 24rem;}
  .swiper-button-next, .swiper-button-prev {width: 20rem; height: 20rem;}
  .swiper-button-next {background-image: url("/common/de/images/icon-swiper-btn-next-20.svg");}
  .swiper-button-prev {background-image: url("/common/de/images/icon-swiper-btn-prev-20.svg");}

  /* common swiper pagination */
  .swiper-container .swiper-pagination .swiper-pagination-bullet {width: 5rem; height: 5rem; margin: 0 4rem;}
}
/* --------------------------------------------- Swiper - END --------------------------------------------- */




/* --------------------------------------------- Quick Service - START --------------------------------------------- */
.quick-fixed-area{position:fixed; bottom:40rem; right:40rem; z-index:10;}
.quick-fixed-btn{display:flex; align-items: center; justify-content: center; position:relative; bottom:0; padding:0 10rem; width:max(96rem, 72px); height:max(96rem, 72px); text-align: center; border-radius:8rem; z-index:2; transition:bottom 0.5s ease;}
.quick-fixed-btn:after{display:block; content:""; position:absolute; top:0; left:0; width:max(96rem, 72px); height:max(96rem, 72px); background:#DE4826; border-radius:8rem;}
.quick-fixed-btn span{position:relative; font-size:max(18rem, 16px); font-family: "InterTight-Bold"; color:#fff; line-height:120%; z-index: 1;}
.quick-fixed-area.active .quick-fixed-btn{bottom:max(96rem, 72px);}

.btn-top{display:flex; align-items: center; justify-content: center; position:absolute; bottom:0; left:0; width:max(96rem, 72px); height:max(96rem, 72px); text-align: center; border-radius:8rem;}
.btn-top:after{display:block; content:""; position:absolute; top:0; left:0; width:max(96rem, 72px); height:max(96rem, 72px); background:#2D2926; border-radius:8rem;}
.btn-top span{position:relative; padding-top:17rem; color:#fff; font-family: "InterTight-Bold"; font-size:max(16rem, 14px); line-height:120%; z-index:1; background:url("/common/de/images/icon-btn-top-arrow.svg") no-repeat center top/16rem auto;}

.quick-fixed-con{position:fixed; top:0; right:-480rem; padding:56rem 10rem 0 56rem; width:480rem; height:100vh; background:#fff; z-index:11; transition:right 0.7s ease;}
.quick-fixed-con .pop-head{display:flex; align-items: center; justify-content: space-between; margin-bottom:26rem; padding-right:46rem;}
.quick-fixed-con .pop-cont{height:100%;}
.quick-fixed-con .close-btn{width:32rem; height:32rem; background:url("/common/de/images/icon-pop-close.svg") no-repeat center center/32rem auto;}
.quick-fixed-con .scroll-area{overflow-y: auto; padding:0 46rem 56rem 0; height:calc(100% - 56rem);}
.quick-fixed-con .scroll-area::-webkit-scrollbar{width:4px; background:transparent;}
.quick-fixed-con .scroll-area::-webkit-scrollbar-thumb{width:4px; background:#ddd; border-radius:2px;}
.quick-fixed-con .service-wrap {display: flex; flex-wrap:wrap; row-gap: 8rem;}
.quick-fixed-con .service-wrap .service-box {overflow: hidden; position: relative; padding: 40rem; width: 100%; height: 172rem; text-align: center; border-radius: 16rem;}
.quick-fixed-con .service-wrap .service-box:after {display: block; content: ""; position: absolute; top: 0; right: -40rem; transform: skew(-15deg); width: max(175rem, 100px); height: max(400rem, 300px); background: rgba(0, 0, 0, .1);}
.quick-fixed-con .service-wrap .find-dealer {background: #de4826;}
.quick-fixed-con .service-wrap .kioti-service {background: #5b5d60;}
.quick-fixed-con .service-wrap .dealer-application {background: #8d9093;}
.quick-fixed-con .service-wrap .download {background: #2d2926;}
.quick-service-area .service-wrap .contact {background-color: #2D2926;}
.quick-service-area .service-wrap .service-box.contact:after {background: #000;}
.quick-fixed-con .service-wrap .service-box .txt-wrap {position: relative; height: 100%; z-index: 1;}
.quick-fixed-con .service-wrap .service-box .icon img {width: 48rem; height: 48rem;}
.quick-fixed-con .service-wrap .service-box .tit {margin-top:16rem; color: #fff;}
.quick-fixed-con .service-wrap .service-box .tit span {position: relative; padding-right: max(32rem, 25px);}
.quick-fixed-con .service-wrap .service-box .tit span:after {display: block; content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24rem; height: 24rem; background: url("/common/de/images/icon-view-more-arrow-white.svg") no-repeat center center/max(24rem, 19px) auto; transition: right .3s ease;}
.quick-fixed-con .service-wrap .service-box:hover .tit span:after {right: max(-10rem, -5px);}
.quick-fixed-con.on{right:0;}

@media all and (max-width: 1023px) {
  .quick-fixed-area{bottom:20rem; right:16rem;}
  .quick-fixed-btn{width:80rem; height:80rem;}
  .quick-fixed-btn:after{width:80rem; height:80rem;}
  .quick-fixed-btn span{font-size:16rem;}
  .quick-fixed-area.active .quick-fixed-btn{bottom:80rem;}

  .btn-top{width:80rem; height:80rem;}
  .btn-top:after{width:80rem; height:80rem;}
  .btn-top span{padding-top:0; font-size:14rem; background:none;}

  .quick-fixed-con{right:-258rem; padding:56rem 8rem 0 20rem; width:258rem;}
  .quick-fixed-con .pop-head{padding-right:0;}
  .quick-fixed-con .close-btn{position:absolute; top:16rem; right:20rem; width:28rem; height:28rem; background-size: 28rem auto;}
  .quick-fixed-con .scroll-area{padding:0 12rem 56rem 0;}
  .quick-fixed-con .service-wrap .service-box{padding:20rem 0; height:104rem; text-align: center; border-radius:4rem;}
  .quick-fixed-con .service-wrap .service-box:after{display:none;}
  .quick-fixed-con .service-wrap .service-box .icon img{width:32rem; height:32rem;}
  .quick-fixed-con .service-wrap .service-box .txt{display:none;}
  .quick-fixed-con .service-wrap .service-box .tit{margin-top:8rem;}
}
/* --------------------------------------------- Quick Service - END --------------------------------------------- */




/* --------------------------------------------- Popup - START --------------------------------------------- */
.layer-popup.first-show {display: block}

.layer-popup {display: none; position: fixed; z-index: 100; left: 0; top: 0; height: 100%;}
.layer-popup .pop-wrap {position: fixed; background-color: #fff;}
.layer-popup .pop-wrap .scroll-area {overflow-y: auto; overflow-x: hidden; height: 100%; max-height: 100%;}
.layer-popup .pop-wrap .scroll-area::-webkit-scrollbar {width: 4px; background: transparent;}
.layer-popup .pop-wrap .scroll-area::-webkit-scrollbar-thumb {width: 4px; background: #ddd; border-radius: 2px;}
.layer-popup .pop-wrap .pop-head {margin-bottom: 40rem;}
.layer-popup .pop-wrap .pop-head .txt {margin-top:20rem;}
.layer-popup .pop-wrap .close-btn {position: absolute; background: url("") no-repeat center center / 100% auto;}

/* center popup */
.layer-popup.center .pop-wrap {display: flex; flex-direction: column; top: 50%; left: 50%; transform: translate(-50%, -50%); width:812rem; max-height: 80%; min-height: 30%; padding: 56rem 10rem 64rem 56rem; border-radius: 16rem;}
.layer-popup.center .pop-wrap .scroll-area {padding-right: calc(46rem - 4px);}
.layer-popup.center .pop-wrap .close-btn {left: calc(100% + 20rem); top: 0; z-index: 1; width: max(40rem, 28px); height: max(40rem, 28px); background-image: url("/common/de/images/icon-pop-close-wht.svg");}

/* full popup */
.layer-popup.full .pop-wrap {top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 80rem 10rem 80rem 240rem;}
.layer-popup.full .pop-wrap .scroll-area {padding-right: calc(230rem - 4px);}
.layer-popup.full .pop-wrap .close-btn {top: 32rem; right: 32rem; width: max(32rem, 24px); height: max(32rem, 24px); background-image: url("/common/de/images/icon-pop-close.svg");}

/* popup layout */
.layer-popup.full .pop-wrap .pop-cont .p-cont-sec ~ .p-cont-sec {margin-top: 72rem;}
.layer-popup .pop-wrap .pop-cont .p-cont-sec .p-tit-sec {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rem;}
.layer-popup .pop-wrap .pop-cont .p-cont-sec .p-tit-sec:has(.required-txt) {display: block;}
.layer-popup .pop-wrap .pop-cont .p-cont-sec .p-tit-sec .tit {font-family: "InterTight-Bold"; font-size: max(24rem, 20px); line-height: 140%; color: #2d2926;}
.layer-popup .pop-wrap .pop-cont > .btn-wrap {margin-top: 56rem;}
.pop-wrap .user-opt-area {position: absolute; left: 0; bottom: calc(100% + 16rem); display: flex; align-items: center; justify-content: space-between; width:100%;}
.pop-wrap .user-opt-area .form-checkbox input + label {color:#fff;}
.pop-wrap .user-opt-area .btn-close {display:block; width:16rem; height:16rem; background:url("/common/eu/images/icon-main-pop-close.svg") no-repeat center center/cover;}

@media all and (max-width: 1023px) {
  .layer-popup {width: 100%; height: 100%;}
  .layer-popup .pop-wrap .pop-head {display: flex; align-items: flex-start; justify-content: space-between; padding: 5rem 0 26rem; margin-bottom: 2rem;}
  .layer-popup .pop-wrap .pop-head .txt {margin-top:16rem;}
  .layer-popup .pop-wrap .close-btn {position: unset; background-image: url("/common/de/images/icon-pop-close-mobile.svg") !important;}
  
  /* center popup */
  .layer-popup.center .pop-wrap .scroll-area {padding-right: calc(16rem - 4px);}
  .layer-popup.center .pop-wrap {top: 0; left: 0; transform: translate(0, 0); width: 100%; height: 100%; min-height: unset; max-height: unset; padding: 20rem 4rem 40rem 20rem; border-radius: 0;}
  .layer-popup.center .pop-wrap .close-btn {left: unset; top: 0; right: calc(16rem - 4px); width: 24rem; height: 24rem;}
  
  /* full popup */
  .layer-popup.full .pop-wrap {padding: 20rem 4rem 40rem 20rem;}
  .layer-popup.full .pop-wrap .scroll-area {padding-right: calc(16rem - 4px);}
  .layer-popup.full .pop-wrap .close-btn {left: unset; top: 0; right: calc(16rem - 4px); width: 24rem; height: 24rem;}
  
  /* popup layout */
  .layer-popup .pop-wrap .pop-cont .p-cont-sec .p-tit-sec .tit {font-size: 18rem;}
  .layer-popup .pop-wrap .pop-cont .p-cont-sec .p-tit-sec:has(.required-txt) {display: flex;}
  .layer-popup .pop-wrap .pop-cont > .btn-wrap {margin-top: 40rem;}
  .layer-popup .pop-wrap .pop-cont > .btn-wrap .border-btn2 {width: 100%;}
  .pop-wrap .user-opt-area{padding:0 20rem;}
}

/* contactus, promotion popup */
.layer-popup.center .pop-wrap:has(.contactus, .promotion) {min-height: unset; width: 614rem; padding: 10rem;}
.layer-popup.center .pop-wrap:has(.contactus, .promotion) .scroll-area {padding: 54rem 20rem;}
.layer-popup.center .pop-wrap:has(.contactus, .promotion) .pop-cont > .btn-wrap {margin-top: 48rem;}
.layer-popup.center .pop-wrap:has(.contactus, .promotion) .pop-cont > .btn-wrap .border-btn2 {border: 0;}
.layer-popup.center .pop-wrap:has(.contactus, .promotion) .pop-cont > .btn-wrap .border-btn2 span {font-family: "InterTight-Bold";}
.layer-popup.center .pop-wrap:has(.contactus) {background: url("/common/de/images/bg-popup-contactus.svg") no-repeat bottom right / 133rem auto, linear-gradient(180deg, #2C3946 0%, #708295 100%);}
.layer-popup.center .pop-wrap:has(.promotion) {background: url("/common/de/images/bg-popup-promotion.svg") no-repeat bottom right / 215rem auto, linear-gradient(180deg, #4A5938 0%, #8B9D77 100%);}

.contactus, .promotion {text-align: center;}
.contactus .tit, .promotion .tit {margin-bottom: 24rem; font-family: "Arvo-Bold"; font-size: max(32rem, 24px); line-height: 140%; color: #fff;}
.contactus .txt, .promotion .txt {color: #fff;}

@media all and (max-width: 1023px) {
  .layer-popup.center .pop-wrap:has(.contactus, .promotion) {top: unset; bottom: 0; width: 100%; height: 270rem; margin: 0;}
  .layer-popup.center .pop-wrap:has(.contactus, .promotion) .scroll-area {padding: 26rem 10rem 10rem;}
  .layer-popup.center .pop-wrap:has(.contactus, .promotion) .close-btn {position: absolute; top: -36rem; right: 20rem; width: 16rem; height: 16rem; background-image: url("/common/de/images/icon-pop-close-wht-mobile.svg") !important;}
  .layer-popup.center .pop-wrap:has(.contactus, .promotion) .pop-cont {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
  .layer-popup.center .pop-wrap:has(.contactus) {background-size: 114rem auto;}
  .layer-popup.center .pop-wrap:has(.promotion) {background-size: 166rem auto;}
  .layer-popup.center .pop-wrap:has(.promotion) .pop-cont > .btn-wrap {margin-top: 30rem;}

  .contactus, .promotion {text-align: left;}
  .contactus .tit, .promotion .tit {margin-bottom: 20rem; font-size: 20rem;}
}
/* --------------------------------------------- Popup - END --------------------------------------------- */




/* --------------------------------------------- 리스트 - START --------------------------------------------- */
/* total num */
.total-num-area{display:flex; justify-content: space-between; align-items: center; position:relative; top:80rem; opacity:0; transition:top 1s ease, opacity 1s ease; margin-bottom:20rem;}
.total-num-area.active{top:0; opacity:1;}
.total-num-area .left p span {margin-left: 8rem;}

/* txt list */
.txt-list li a:hover .tit {color: #DE4826;}
.txt-list li a .tit {vertical-align: middle; color: #2D2926; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; transition: color .2s ease;}
.txt-list li a .date {margin-top: 8rem;}
.txt-list li ~ li {margin-top: 16rem;}

.series-info-wrap{display:flex;}
.series-info-wrap .info-w{display:flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; width:auto; height:auto;}
.series-info-wrap .info-w:last-child{margin-right:0;}
.series-info-wrap .info-w .tit{color:#fff; font-family: "InterTight-SemiBold"; font-size: max(14rem, 13px);}
.series-info-wrap .info-w .txt{margin-bottom:6rem; color:#fff; font-size:max(13rem, 12px); line-height:145%;}
.series-info-wrap .info-w .number{color:#fff; word-break: break-all;}
.series-info-wrap .info-w .unit{color:#fff;}
/* --------------------------------------------- 리스트 - END --------------------------------------------- */




/* --------------------------------------------- Txt Design - START --------------------------------------------- */
/* txt | txt | txt */
.line-txt-w {display: flex;}
.line-txt-w > * {padding: 0 20rem;}
.line-txt-w > *:first-child {padding-left: 0;}
.line-txt-w > *:last-child {padding-right: 0;}
.line-txt-w > * ~ * {position: relative;}
.line-txt-w > * ~ *::before {content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: max(16rem, 14px); background-color: #E6E6E6;}

.line-txt {display: flex;}
.line-txt > * {padding: 0 16rem;}
.line-txt > *:first-child {padding-left: 0;}
.line-txt > *:last-child {padding-right: 0;}
.line-txt > * ~ * {position: relative;}
.line-txt > * ~ *::before {content: ""; position: absolute; top: 7px; left: 0; width: 1px; height: max(12rem, 10px); background-color: #ddd;}

/* gray-box */
.gray-box {padding: 24rem; border-radius: 8rem; background-color: #F8F8F8;}

.gray-box .form-group {width:100%;}
.gray-box .form-group .form-checkbox input + label:has(span) {font-family: "InterTight-Regular"; color: #888;}

.gray-box.map {padding: 32rem; padding-left: 96rem; margin-bottom: 40rem; border-radius: 16rem; background: url("/common/de/images/icon-map.svg") no-repeat 32rem 32rem / 40rem auto #F8F8F8;}
.gray-box.map .tit {margin-bottom: 16rem; color: #DE4826;}
.gray-box.map .line-txt {margin-bottom: 8rem;}
.gray-box.map .line-txt p {word-wrap: break-word; word-break: break-all;}
.gray-box.map .info, .gray-box.map .info span {color: #888;}

.gray-all-agree{padding:24rem; background:#F8F8F8; border-radius:16rem;}
.gray-all-agree .opt-group{display:block;}
.gray-all-agree .form-checkbox:has(.Chk-All){padding-bottom:20rem; margin-bottom:20rem; border-bottom:1px solid #E6E6E6}
.gray-all-agree .form-checkbox ~ .form-checkbox{margin-top:16rem;}
.gray-all-agree .form-checkbox input:not(.Chk-All) + label{color:#888; font-family: "InterTight-Regular";}

@media all and (max-width: 1023px) {
  .line-txt {flex-direction: column; row-gap: 8rem;}
  .line-txt > * {padding: 0;}
  .line-txt > * ~ *::before {display: none;}

  /* gray-box */
  .gray-box {padding: 20rem;}
  
  .gray-box .form-group {justify-content: flex-start;}
  .gray-box .form-group .form-checkbox input + label:has(span) {font-size: 14rem; line-height: 145%;}
  .gray-box .form-group .form-checkbox input + label:has(span) {padding-left: 32rem;}

  .gray-box.map {padding: 24rem; padding-left: 60rem; margin-bottom: 56rem; border-radius: 16rem; background-image: url("/common/de/images/icon-map-24.svg"); background-position: 24rem 24rem; background-size: 24rem auto;}
  .gray-box.map .tit {margin-bottom: 20rem;}
  .gray-box.map .line-txt {margin-bottom: 8rem;}

  .gray-all-agree .form-checkbox:has(.Chk-All){padding-bottom:16rem; margin-bottom:16rem;}
}
/* --------------------------------------------- Txt Design - END --------------------------------------------- */




/* --------------------------------------------- Quick - START --------------------------------------------- */
/* Quick service */
.quick-service-area{position:relative;}
.quick-service-area .inner{position:relative; z-index:1;}
.quick-service-area .service-wrap .service-box {overflow: hidden; position: relative; border-radius: 16rem;}
.quick-service-area .service-wrap .service-box:after {display: block; content: ""; position: absolute; top: 0; right: -40rem; transform: skew(-15deg); width: max(175rem, 100px); height: max(400rem, 300px); background: rgba(0, 0, 0, .1);}
.quick-service-area .service-wrap .find-dealer {background: #de4826;}
.quick-service-area .service-wrap .kioti-service {background: #5b5d60;}
.quick-service-area .service-wrap .dealer-application {background: #8d9093;}
.quick-service-area .service-wrap .download {background: #2d2926;}
.quick-service-area .service-wrap .service-box{display:block; position: relative; top:80rem; padding: 40rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.quick-service-area .service-wrap .service-box .txt-wrap {position: relative; height: 100%; z-index: 1;}
.quick-service-area .service-wrap .service-box .icon img {width: 64rem; height: 64rem;}
.quick-service-area .service-wrap .service-box .txt {margin-top: 20rem; color: #fff;}
.quick-service-area .service-wrap .service-box .tit {position: absolute; bottom: 0; left: 0; color: #fff;}
.quick-service-area .service-wrap .service-box .tit span {position: relative; padding-right: max(32rem, 25px);}
.quick-service-area .service-wrap .service-box .tit span:after {display: block; content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24rem; height: 24rem; background: url("/common/de/images/icon-view-more-arrow-white.svg") no-repeat center center/max(24rem, 19px) auto; transition: right .3s ease;}
.quick-service-area .service-wrap .service-box:hover .tit span:after {right: max(-10rem, -5px);}
.quick-service-area .dirt{display:none;}
.quick-service-area.active .service-wrap .service-div .service-box{top:0; opacity:1;}
.quick-service-area.active .service-wrap .service-div:nth-child(2) .service-box{transition-delay:0.1s}
.quick-service-area.active .service-wrap .service-div:nth-child(3) .service-box{transition-delay:0.2s}
.quick-service-area.active .service-wrap .service-div:nth-child(4) .service-box{transition-delay:0.3s}

.quick-service-area.one-grid-type .service-wrap {display: flex; column-gap: 20rem;}
.quick-service-area.one-grid-type .title{display:none;}
.quick-service-area.one-grid-type .service-wrap .service-div {width: 100%; height: max(350rem, 250px); border-radius: 16rem; transition:width 0.8s ease;}
.quick-service-area.one-grid-type .service-wrap .service-div:hover {width:160%;}
.quick-service-area.one-grid-type .service-wrap .service-box {padding: 40rem; height: max(350rem, 250px);}

.quick-service-area.two-grid-type .service-wrap {display: flex; flex-wrap:wrap; gap: 40rem;}
.quick-service-area.two-grid-type .title{overflow:hidden; display:block; position:absolute; top:0; left:0; height:68rem; font-family: "Arvo-Bold"; font-size: 56rem; color: #2d2926; line-height: 120%;}
.quick-service-area.two-grid-type .title span{position:relative; top:68rem; opacity:0; transition:top 1s ease, opacity 1s ease;}
.quick-service-area.two-grid-type .service-wrap .service-div {width:calc((100% - 80rem) / 3)}
.quick-service-area.two-grid-type .service-wrap .service-div:first-child{margin-left:calc((100% + 40rem) / 3)}
.quick-service-area.two-grid-type .service-wrap .service-box {padding: 54rem 64rem; height: max(400rem, 300px);}
.quick-service-area.two-grid-type .dirt{display:block; position:absolute; right:0; bottom:-162rem;}
.quick-service-area.two-grid-type .dirt img{width:279rem;}
.quick-service-area.two-grid-type.active .title span{top:0; opacity:1;}


@media all and (max-width: 1023px) {
  .quick-service-area .service-wrap{flex-wrap:wrap; column-gap: 0; row-gap: 8rem;}
  .quick-service-area .service-wrap .service-box {border-radius: 8rem;}
  .quick-service-area .service-wrap .service-box .txt-wrap{display:flex; align-items: center;}
  .quick-service-area .service-wrap .service-box .icon img{width:40rem; height:40rem;}
  .quick-service-area .service-wrap .service-box .txt{display:none;}
  .quick-service-area .service-wrap .service-box .tit{position:relative; margin-left:16rem;}
  .quick-service-area .service-wrap .service-box:after{width:155rem;}

  .quick-service-area.one-grid-type .service-wrap .service-box{padding:24rem; height:88rem; border-radius:8rem;}
  .quick-service-area.one-grid-type .service-wrap .service-div{height:auto;}
  .quick-service-area.one-grid-type .service-wrap .service-div:hover{width:100%;}

  .quick-service-area.two-grid-type .title{display:none;}
  .quick-service-area.two-grid-type .service-wrap{gap:8rem;}
  .quick-service-area.two-grid-type .service-wrap .service-div{width:100%;}
  .quick-service-area.two-grid-type .service-wrap .service-div:first-child{margin-left:0;}
  .quick-service-area.two-grid-type .service-wrap .service-box{padding:24rem; height:auto;}
  .quick-service-area.two-grid-type .dirt{right:-40rem; bottom:298rem;}
  .quick-service-area.two-grid-type .dirt img{width:159rem;}
}
/* --------------------------------------------- Quick - END --------------------------------------------- */




/* --------------------------------------------- Loading - START --------------------------------------------- */
/* loading */
.loading-area {display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0 , .6); z-index: 500;}
.loading-area .loading-box {display: flex; justify-content: center;}
.loading-area .loading-box .loading {display: inline-flex; column-gap: 9rem;}
.loading-area .loading-box .loading i {width: 26rem; height: 40rem; animation: animate 1.6s infinite; opacity: 0;}
.loading-area .loading-box .loading i img {width: 100%; height: 100%;}
.loading-area .txt-box {margin-top: 40rem; text-align: center;}
.loading-area .txt-box .tit {margin-bottom: 8rem; font-family: "InterTight-Bold"; font-size: max(24rem, 20px); line-height: 140%; color: #fff;}
.loading-area .txt-box .txt {font-family: "InterTight-Medium"; font-size: max(20rem, 18px); line-height: 140%; color: #aaa;}

.loading-area .loading-box .loading i:nth-child(2) {animation-delay: 0.1s;}
.loading-area .loading-box .loading i:nth-child(2) {animation-delay: 0.2s;}
.loading-area .loading-box .loading i:nth-child(3) {animation-delay: 0.3s;}
.loading-area .loading-box .loading i:nth-child(4) {animation-delay: 0.4s;}
.loading-area .loading-box .loading i:nth-child(5) {animation-delay: 0.5s;}
@keyframes animate {0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;}}

@media all and (max-width: 1023px) {
  .loading-area .loading-box .loading {column-gap: 7.5rem;}
  .loading-area .loading-box .loading i {width: 22rem; height: 34rem;}
  .loading-area .txt-box {margin-top: 32rem;}
  .loading-area .txt-box .tit {font-size: 24rem; line-height: 125%;}
  .loading-area .txt-box .txt {font-size: 18rem;}
}
/* --------------------------------------------- Loading - END --------------------------------------------- */

/* 가로 모드일 때 */
.only-vertical-view {display: none;}
.only-vertical-view.on {display: block;}
.only-vertical-view {position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 999999; background: url("/common/de/images/bg-visual-landscape-page-mobile.png") no-repeat center bottom / cover #2D2926;}
.only-vertical-view .scroll-area {position: relative; overflow-y: auto; height: 100%;}
.only-vertical-view .cont-area {position:relative; padding-top:80rem; height:100%;}
.only-vertical-view .cont-area .tit {position: relative; padding-top: 84rem; color:#fff; text-align: center; font-size:max(18rem, 16px); font-family: "InterTight-Medium"; background:url("/common/de/images/icon-vertical-view.svg") no-repeat center top/64rem auto;}
.only-vertical-view .cont-area .tit span{font-family: "InterTight-Bold";}
.only-vertical-view .cont-area .logo{position:absolute; bottom:28rem; left:50%; transform:translateX(-50%); text-align: center;}
.only-vertical-view .cont-area .logo img{width:56rem;}

@media (orientation: landscape) and (pointer: coarse) {
  @media (max-height: 414px) and (max-width: 1023px) {
    body.vertical {overflow: hidden; height: 100%; min-height: 100%; touch-action: none;}
  }
}


/* ----------------------------------------- Autocomplete locator - START ----------------------------------------- */
.pac-logo:after {display: none !important;}
.pac-container {font-family: 'InterTight-Regular' !important; /* background: #fff; */}
.pac-container.hidden {display: none !important;}
.pac-item {padding: 5rem 20rem !important; font-size: max(16rem, 14px) !important; color: #2D2926 !important; cursor: pointer !important;}
.no-touchevents .pac-item:hover {color: #fff !important;background: #DE4826 !important;}
.pac-item-query {font-size: max(16rem, 14px) !important; padding-right: 6rem !important; color: #DE4826 !important;}
.no-touchevents .pac-item:hover .pac-item-query {color: #fff !important;}
.pac-icon-marker {display:none !important;}

@media (orientation: landscape) and (pointer: coarse) {
  .pac-item {font-size: 16rem;}
  .pac-item-query {font-size: 16rem;}
}
/* ----------------------------------------- Autocomplete locator - END ----------------------------------------- */