@charset "utf-8";

/* reset css */
body {
   height: auto;
   position: relative;
}
body,
a {
   color: #111;
}
.font-prompt-L {
   font-family: 'Prompt', sans-serif;
   font-weight: 300;
}
.font-prompt-R {
   font-family: 'Prompt', sans-serif;
   font-weight: 400;
}
.font-prompt-M {
   font-family: 'Prompt', sans-serif;
   font-weight: 500;
}

.font56 {
   font-size: 56px;
   line-height: 1.3;
}
.font40 {
   font-size: 40px;
   line-height: 1.1;
}
.font32 {
   font-size: 32px;
   line-height: 1;
}
.font20 {
   font-size: 20px;
   line-height: 1.3;
}
.font16 {
   font-size: 16px;
   line-height: 1.5;
}
.font14 {
   font-size: 14px;
   line-height: 1.5;
}
.font12 {
   font-size: 12px;
   line-height: 1.5;
}
.font10 {
   font-size: 10px;
}

.mt0 {
   margin-top: 0 !important;
}
.mt2 {
   margin-top: 2 !important;
}
.mt4 {
   margin-top: 4px !important;
}
.mt8 {
   margin-top: 8px !important;
}
.mt16 {
   margin-top: 16px !important;
}
.mt24 {
   margin-top: 24px !important;
}
.mt32 {
   margin-top: 32px !important;
}
.mt40 {
   margin-top: 40px !important;
}
.mt48 {
   margin-top: 48px !important;
}
.mt56 {
   margin-top: 56px !important;
}
.mt64 {
   margin-top: 64px !important;
}
.mt80 {
   margin-top: 80px !important;
}
.mt96 {
   margin-top: 96px !important;
}
.mt120 {
   margin-top: 120px !important;
}

.mb0 {
   margin-bottom: 0 !important;
}
.mb4 {
   margin-bottom: 4px !important;
}
.mb8 {
   margin-bottom: 8px !important;
}
.mb16 {
   margin-bottom: 16px !important;
}
.mb24 {
   margin-bottom: 24px !important;
}
.mb32 {
   margin-bottom: 32px !important;
}
.mb40 {
   margin-bottom: 40px !important;
}
.mb48 {
   margin-bottom: 48px !important;
}
.mb56 {
   margin-bottom: 56px !important;
}
.mb64 {
   margin-bottom: 64px !important;
}
.mb80 {
   margin-bottom: 80px !important;
}
.mb96 {
   margin-bottom: 96px !important;
}
.mb120 {
   margin-bottom: 120px !important;
}

.pt0 {
   padding-top: 0 !important;
}
.pt4 {
   padding-top: 4px !important;
}
.pt8 {
   padding-top: 8px !important;
}
.pt16 {
   padding-top: 16px !important;
}
.pt24 {
   padding-top: 24px !important;
}
.pt32 {
   padding-top: 32px !important;
}
.pt40 {
   padding-top: 40px !important;
}
.pt48 {
   padding-top: 48px !important;
}
.pt56 {
   padding-top: 56px !important;
}
.pt64 {
   padding-top: 64px !important;
}
.pt80 {
   padding-top: 80px !important;
}
.pt96 {
   padding-top: 96px !important;
}
.pt120 {
   padding-top: 120px !important;
}

.pb0 {
   padding-bottom: 0 !important;
}
.pb4 {
   padding-bottom: 4px !important;
}
.pb8 {
   padding-bottom: 8px !important;
}
.pb16 {
   padding-bottom: 16px !important;
}
.pb24 {
   padding-bottom: 24px !important;
}
.pb32 {
   padding-bottom: 32px !important;
}
.pb40 {
   padding-bottom: 40px !important;
}
.pb48 {
   padding-bottom: 48px !important;
}
.pb56 {
   padding-bottom: 56px !important;
}
.pb64 {
   padding-bottom: 64px !important;
}
.pb80 {
   padding-bottom: 80px !important;
}
.pb96 {
   padding-bottom: 96px !important;
}
.pb120 {
   padding-bottom: 120px !important;
}

.hide {
   display: none;
}
.of-hi {
   overflow: hidden !important;
}
.fl-l {
   float: left !important;
}
.fl-r {
   float: right !important;
}
.cl-b {
   width: 0;
   height: 0;
   font-size: 0;
   line-height: 0;
   clear: both;
}
.va-m {
   vertical-align: middle !important;
}
.va-t {
   vertical-align: top !important;
}
.ta-c {
   text-align: center !important;
}
.ta-l {
   text-align: left !important;
}
.ta-r {
   text-align: right !important;
}
.clear {
   display: block;
   overflow: visible;
   width: auto;
   clear: both;
   zoom: 1;
}
.clear:after {
   display: block;
   visibility: hidden;
   height: 0;
   font-size: 0;
   clear: both;
   content: '';
}
.ellipse {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.ellipse.lh1 {
   display: inline-block;
   width: 100%;
   line-height: 1.3;
}
.ellipse.lh2 {
   white-space: normal;
   line-height: 1.2;
   height: 2.4em;
   text-align: left;
   word-wrap: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.ellipse.lh3 {
   white-space: normal;
   line-height: 1.2;
   height: 3.6em;
   text-align: left;
   word-wrap: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}
.ellipse.lh4 {
   white-space: normal;
   line-height: 1.2;
   height: 4.8em;
   text-align: left;
   word-wrap: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
}
button {
   padding: 0;
   border: none;
   cursor: pointer;
   font-family: inherit;
   background: none;
   border-radius: 0;
}
.uppercase {
   text-transform: uppercase;
}
.d-block {
   display: block;
}
.d-inline-block {
   display: inline-block;
}
.d-inline {
   display: inline;
}
.mo-hidden {
   display: block;
}
.pc-hidden {
   display: none;
}

/* Main CSS */
#mainWrap {
   position: relative;
   overflow: hidden;
}
#mainWrap .title-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding-left: 16px;
   padding-right: 16px;
}
#mainWrap .title-box .sub-title {
   font-family: 'Prompt', sans-serif;
   font-weight: 400;
   font-size: 20px;
   line-height: 1.3;
   text-transform: uppercase;
   line-height: 26px;
   letter-spacing: 5px;
   display: block;
   text-align: center;
}
#mainWrap .title-box .title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: 'Prompt', sans-serif;
   font-weight: 500;
   font-size: 56px;
   color: #fff;
   line-height: 1.3;
}
#mainWrap .title-box .title > span {
   background-image: linear-gradient(to right, #fffcf2 0%, #ffdf8e 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
#mainWrap .title-box .title > span.tag {
   background: #fff;
   border-radius: 50px;
   color: #000;
   -webkit-text-fill-color: unset;
   font-size: 20px;
   padding: 8px 16px;
   vertical-align: middle;
   line-height: 1;
   font-family: 'Prompt', sans-serif;
   font-weight: 400;
}

#mainWrap .type-hover {
   position: relative;
   overflow: hidden;
   z-index: 1;
   color: #fff;
}
#mainWrap .type-hover::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 1);
   transition: color 0.6s;
   animation-duration: 0.6s;
   animation-timing-function: ease;
   animation-fill-mode: forwards;
   z-index: -1;
}
#mainWrap .type-hover.fade-in {
   color: #111;
}
#mainWrap .type-hover.fade-in::before {
   animation-name: fade-blank-in;
}
#mainWrap .type-hover.fade-out::before {
   animation-name: fade-blank-out;
}

#mainWrap .title-box .sub-desc {
   font-size: 20px;
   font-weight: 400;
   line-height: 1.5;
   color: #fff;
   text-align: center;
}
#mainWrap .title-box .btn-area {
   display: flex;
   gap: 10px;
   justify-content: center;
   width: 100%;
   margin-top: 32px;
}
#mainWrap .title-box .btn-area > a {
   max-width: 200px;
   width: 100%;
   height: 40px;
   line-height: 40px;
   border: 1px solid #fff;
   border-radius: 5px;
   font-size: 16px;
}
#mainWrap .default-wrap {
   position: relative;
   max-width: 1432px;
   width: 100%;
   padding-left: 16px;
   padding-right: 16px;
   margin-left: auto;
   margin-right: auto;
}
#mainWrap .big-card {
   position: relative;
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
}
#mainWrap .big-card .bg-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   transition: transform 1s cubic-bezier(0.2, 0, 0.1, 1), -webkit-transform 1s cubic-bezier(0.2, 0, 0.1, 1);
}
#mainWrap .big-card > a {
   position: relative;
   z-index: 1;
   display: block;
   width: 100%;
   height: 100%;
   padding: 48px;
}
#mainWrap .btn-arrow {
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid #fff;
   background-image: url(../image/icon_arrow_w.svg);
   background-repeat: no-repeat;
   background-position: center;
   transition: all 0.3s;
}
#mainWrap .swiper-pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}
#mainWrap .swiper-pagination .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background-color: #ccc;
   margin: 0;
   opacity: 1;
}
#mainWrap .swiper-pagination .swiper-pagination-bullet-active {
   background-color: #01cb5c !important;
}

.section01 {
   position: relative;
   width: 100%;
}
.section01 .hero-list {
   position: relative;
   padding: 136px 0 80px;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   background-color: #000;
}
.section01 .hero-list .hero-area {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.section01 .hero-list .title-box {
   opacity: 0;
}
.section01 .hero-list .info-box {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 60px;
}
.section01 .hero-list .info-box > li {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}
.section01 .hero-list .info-box p {
   font-size: 32px;
   line-height: 1.3;
}
.section01 .hero-list .info-desc {
   font-size: 12px;
   text-align: center;
   margin-top: 20px;
   color: #fff;
}
.section01 .hero-list .hero-img {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 130%;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
/* .section01 .hero-list.visual01 { background-color: #000; } */
.section01 .hero-list.visual01 .hero-img {
   background-image: url(../image/bg_hero01.jpg);
}
.section01 .hero-list.visual02 .hero-img {
   background-image: url(../image/bg_hero02.jpg);
}
.section01 .hero-list.visual03 .hero-img {
   background-image: url(../image/bg_hero03.jpg);
}
.section01 .hero-list.visual03solo .hero-img {
   background-image: url(../image/bg_hero03solo.jpg);
}
.section01 .hero-list.visual04ks .hero-img {
   background-image: url(../image/bg_hero04ks.jpg);
}

.section02 {
   padding: 240px 0 240px;
}
.section02 .tab-wrap {
   margin-top: 80px;
}
.section02 .tab-wrap .tab-list {
   display: flex;
   gap: 10px;
   align-items: center;
   justify-content: center;
   overflow-x: auto;
}
.section02 .tab-wrap .tab-list > li {
   width: 200px;
   flex-shrink: 0;
}
.section02 .tab-wrap .tab-list > li > button {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
}
.section02 .tab-wrap .tab-list > li .image {
   display: block;
   width: 108px;
   height: 108px;
   border-radius: 50%;
   background-color: #d9d9d9;
}
.section02 .tab-wrap .tab-list > li .image > img {
   width: 100%;
}
.section02 .tab-wrap .tab-list > li .txt {
   font-size: 16px;
   font-family: 'Prompt', sans-serif;
   font-weight: 500;
   color: #999;
   display: flex;
   gap: 4px;
   letter-spacing: -0.25px;
}
.section02 .tab-wrap .tab-list > li .txt > .tag {
   padding: 2px 5px 0px;
   border-radius: 4px;
   background-color: #ccc;
   font-size: 12px;
   font-family: 'Prompt', sans-serif;
   font-weight: 500;
   height: 21px;
   color: #fff;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.section02 .tab-wrap .tab-list > li.bike0.active .image {
   background: linear-gradient(133.43deg, #f7e8a7 12.36%, #f5de97 54.75%, #f4c486 97.15%);
}
.section02 .tab-wrap .tab-list > li.bike1.active .image {
   background: linear-gradient(133.43deg, #d2d2fd 12.36%, #eae2f7 97.15%);
}
.section02 .tab-wrap .tab-list > li.bike2.active .image {
   background: linear-gradient(135deg, #b9e9ff 12.5%, #f1e1fd 103.7%);
}
.section02 .tab-wrap .tab-list > li.bike3.active .image {
   background: linear-gradient(134.22deg, #ffe9a2 12.43%, #e6f496 113.84%);
}
.section02 .tab-wrap .tab-list > li.bike4.active .image {
   background: linear-gradient(133.43deg, #c4ecc5 12.36%, #e8f4b6 97.15%);
}
.section02 .tab-wrap .tab-list > li.active .txt {
   color: #111;
}
.section02 .tab-wrap .tab-list > li.active .txt > .tag {
   background-color: #333;
}
.section02 .tab-wrap .tab-contents {
   margin-top: 40px;
}
.section02 .tab-wrap .tab-contents > div {
   display: none;
}
.section02 .tab-wrap .tab-contents > div.active {
   display: block;
}
.section02 .big-card {
   height: 500px;
}
.section02 .tab-1 .big-card .bg-image {
   background-image: url(../image/img_sec02_card01.jpg);
   background-position: top right;
}
.section02 .tab-2 .big-card .bg-image {
   background-image: url(../image/img_sec02_card06.jpg);
   background-position: top right;
}
.section02 .tab-3 .big-card .bg-image {
   background-image: url(../image/img_sec02_card02.jpg);
   background-position: top right;
}
.section02 .tab-4 .big-card .bg-image {
   background-image: url(../image/img_sec02_card04.jpg);
   background-position: top right;
}
.section02 .tab-5 .big-card .bg-image {
   background-image: url(../image/img_sec02_card05.jpg);
   background-position: top right;
}
.section02 .tab-wrap .tab-contents .small-cards {
   display: flex;
   gap: 20px;
   margin-top: 20px;
}
.section02 .tab-wrap .tab-contents .small-cards > div {
   width: 100%;
   height: 204px;
   border: 1px solid #f2f2f2;
   border-radius: 8px;
   background: url(../image/icon_sec02_card.svg) no-repeat right 24px bottom 24px / 80px 80px, linear-gradient(135deg, #f5f6f6 12.5%, #eff0f0 103.7%);
   padding: 24px;
}

.section03 {
   padding: 120px 0 0px;
}
.section03 .card-swiper {
   position: relative;
}
.section03 .card-swiper .big-card {
   max-width: 695px;
   height: 708px;
}
.section03 .card-swiper .big-card .bg-image {
   background-position: center;
}
.section03 .card-swiper .big-card:first-child > .bg-image {
   background-image: url(../image/img_sec03_card01.jpg);
}
.section03 .card-swiper .big-card:last-child > .bg-image {
   background-image: url(../image/img_sec03_card02.jpg);
}
#mainWrap .section03 .swiper-pagination {
   display: none;
}

.section04 {
   position: relative;
   background-color: #000;
   padding-top: 200px;
   padding-bottom: 200px;
   margin-top: 200px;
   overflow: hidden;
   z-index: 1;
}
.section04 .bg-wrap {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
   background-image: url(../image/bg_sec04.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   z-index: -1;
}
.section04 .txt-box {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 16px;
}
.section04 .link-arrow {
   display: inline-block;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   border: 1px solid #fff;
   background-image: url(../image/icon_arrow_w.svg);
   background-repeat: no-repeat;
   background-size: 10px;
   background-position: center;
   margin-left: 5px;
}
.section04 .rolling-wrap {
   display: flex;
   align-items: center;
   margin-top: 100px;
}
.section04 .rolling-wrap .keyword-wrap {
   display: flex;
   align-items: center;
   white-space: nowrap;
}
.section04 .rolling-wrap .keyword-wrap .keyword-area {
   display: flex;
   align-items: center;
   white-space: nowrap;
   margin: 0 40px;
   min-width: 340px;
   justify-content: center;
}
.section04 .rolling-wrap .keyword-wrap .keyword-area > div {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 15px 40px;
   border-radius: 50px;
   height: 70px;
   line-height: 36px;
}
.section04 .rolling-wrap .keyword-wrap .keyword-area > div:nth-child(n + 2) {
   margin-left: -10px;
}
.section04 .rolling-wrap .empty {
   border: 1px solid #fff;
   z-index: 1;
}
.section04 .rolling-wrap .fill {
   background-color: #01cb5c;
}
.section04 .rolling-wrap .keyword-area > div > p {
   display: inline-block;
   font-family: 'Prompt', sans-serif;
   font-size: 0;
   vertical-align: middle;
   line-height: 1;
   font-weight: 400;
   color: #fff;
}
.section04 .line {
   display: flex;
   height: 220px;
   justify-content: center;
   margin: 100px 0 80px;
}
.section04 .line > span {
   display: block;
   width: 1px;
   height: 100%;
   background-color: #fff;
}
.section04 .image {
   display: flex;
   align-items: center;
   justify-content: center;
}
.section04 .image > img {
   width: 159px;
}
.section04 .copyright {
   position: absolute;
   bottom: 0;
   width: 100%;
   padding: 21px 16px;
   border-top: 1px solid #ffffff25;
   text-align: center;
}
.section04 .copyright > p {
   font-size: 10px;
   color: #fff;
}

/* .section04 .rolling-wrap .keyword-wrap .keyword-area > div { animation: none; }
.section04 .rolling-wrap .keyword-wrap .keyword-area > div > p { animation: none; } */

.section04 .rolling-wrap .keyword-wrap .keyword-area.active > div {
   animation-name: btn-ani;
   animation-duration: 2s;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
}
.section04 .rolling-wrap .keyword-wrap .keyword-area.active > div > p {
   font-size: 0;
   animation-name: text-ani;
   animation-duration: 2s;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
   animation-iteration-count: 1;
}

/* popup */
.popup-wrap {
   position: fixed;
   right: 32px;
   bottom: 40px;
   width: 360px;
   height: 502px;
   z-index: 99;
}
.popup-wrap .overlay {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*backdrop-filter: blur(8px);*/
   background-color: rgba(0, 0, 0, 0.7);
}
.popup-wrap .popup {
   position: absolute;
   width: 100%;
   height: 100%;
   border: 2px solid #ccc;
   border-radius: 8px;
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
}
.popup-wrap .popup-swiper {
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.popup-wrap .popup-swiper .swiper-pagination {
   bottom: 14px !important;
}
.popup-wrap .popup-swiper .swiper-pagination .swiper-pagination-bullet {
   background-color: #fff !important;
}
.popup-wrap .btn-close {
   width: 32px;
   height: 32px;
   background-color: #fff;
   border-radius: 50%;
   position: absolute;
   top: -16px;
   right: -16px;
   z-index: 2;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
   border: 1px solid #999;
}
.popup-wrap .btn-close > span {
   display: block;
   width: 2px;
   height: 16px;
   background-color: #666;
   position: absolute;
   top: 50%;
   left: 50%;
}
.popup-wrap .btn-close > span:first-child {
   transform: translate(-50%, -50%) rotate(45deg);
}
.popup-wrap .btn-close > span:last-child {
   transform: translate(-50%, -50%) rotate(-45deg);
}

/* floating */
.floating-wrap {
   position: fixed;
   bottom: 40px;
   right: 40px;
   z-index: 10;
}
.floating-button {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #fff;
   background-image: url(../image/top/ci_m.svg);
   background-repeat: no-repeat;
   background-size: 24px 24px;
   background-position: center;
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
   transition: all 0.3s;
   cursor: pointer;
}
.floating-list {
   display: none;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 16px;
}
.floating-list > li {
   position: relative;
}
.floating-list > li > button,
.floating-list > li > a {
   display: block;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #fff;
   filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
   background-repeat: no-repeat;
   background-size: 24px 24px;
   background-position: center;
   transition: all 0.3s;
}
.floating-list > li > span {
   display: none;
   position: absolute;
   right: 64px;
   top: 50%;
   transform: translateY(-50%);
   width: max-content;
   padding: 6px 8px;
   background-color: #fff;
   border-radius: 5px;
   font-size: 12px;
   filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
}
.floating-list > li > span::after {
   content: '';
   display: block;
   width: 8px;
   height: 10px;
   background-image: url(../image/img_tooltip.svg);
   background-repeat: no-repeat;
   background-size: contain;
   position: absolute;
   right: -7px;
   top: 50%;
   transform: translateY(-50%);
}
.floating-list > li:nth-child(1) > button {
   background-image: url(../image/icon_popup.svg);
}
.floating-list > li:nth-child(2) > a {
   background-image: url(../image/icon_cs.svg);
}
.floating-list > li:nth-child(3) > a {
   background-image: url(../image/icon_kakao.svg);
}
.floating-list > li:nth-child(4) > button {
   background-image: url(../image/icon_top.svg);
}
.charge1 {
   font-size: 14px;
   vertical-align: middle;
}

@media all and (max-width: 1024px) {
   .font56 {
      font-size: 40px;
   }
   .font40 {
      font-size: 32px;
   }
   .font32 {
      font-size: 24px;
   }
   .font20 {
      font-size: 18px;
   }
   .font16 {
      font-size: 14px;
   }
   .font12 {
      font-size: 12px;
   }
   .font14 {
      font-size: 12px;
      text-transform: uppercase;
   }

   .mo-hidden {
      display: none;
   }
   .pc-hidden {
      display: block;
   }

   #mainWrap .type-hover.white {
      background-color: #fff;
      color: #111;
   }
   #mainWrap .type-hover.fade-in::before {
      animation: none;
   }
   #mainWrap .type-hover.fade-out::before {
      animation: none;
   }

   /* Main CSS */
   #mainWrap .title-box .sub-title {
      font-size: 16px;
   }
   #mainWrap .title-box .title {
      font-size: 40px;
   }
   #mainWrap .title-box .title > span.tag {
      font-size: 16px;
      padding: 6px 12px;
   }
   #mainWrap .title-box .sub-desc {
      font-size: 15px;
      margin-top: 4px !important;
   }
   #mainWrap .title-box .btn-area {
      margin-top: 28px;
   }
   #mainWrap .title-box .btn-area > a {
      max-width: 140px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
   }
   #mainWrap .big-card {
      max-width: 100%;
   }
   #mainWrap .big-card > a {
      padding: 32px;
   }
   #mainWrap .btn-arrow {
      width: 30px;
      height: 30px;
   }

   .section01 .hero-list {
      padding: 130px 0 80px;
   }
   .section01 .hero-list .hero-area {
      justify-content: flex-start;
      gap: 28px;
   }
   .section01 .hero-list .info-box {
      gap: 30px;
   }
   .section01 .hero-list .info-box p {
      font-size: 20px;
      line-height: 1;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   }

   .section02 {
      padding: 130px 0 60px;
   }
   .section02 .tab-wrap {
      margin-top: 40px;
   }
   /* .section02 .tab-wrap .tab-list > li { width: 120px; }
    .section02 .tab-wrap .tab-list > li .image { width: 68px; height: 68px; }
    .section02 .tab-wrap .tab-list > li > button { gap: 10px; }
    .section02 .tab-wrap .tab-list > li .txt { font-size: 10px; }
    .section02 .tab-wrap .tab-list > li .txt > .tag { padding: 2px 4px; font-size: 8px; } */
   .section02 .tab-wrap .tab-contents {
      margin-top: 24px;
   }
   .section02 .tab-wrap .tab-contents .small-cards {
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
   }
   .section02 .tab-wrap .tab-contents .small-cards > div {
      width: calc(50% - 5px);
      height: 96px;
      background: linear-gradient(135deg, #f5f6f6 12.5%, #eff0f0 103.7%);
      padding: 16px;
   }
   .section02 .big-card {
      padding-bottom: 45.395%;
   }

   .section03 {
      padding: 60px 0 137px;
   }
   .section03 .card-swiper .big-card {
      height: 587px;
   }
   .section03 .card-swiper .swiper-wrapper {
      height: auto;
   }
   #mainWrap .section03 .swiper-pagination {
      display: flex;
      width: 100%;
      bottom: -26px !important;
   }
   /* .section03 .swiper-pagination .swiper-pagination-bullet { background-color: #ccc; } */

   .section04 {
      padding-top: 138px;
      padding-bottom: 151px;
      margin-top: 0;
   }
   .section04 .line {
      margin: 56px 0 40px;
      height: 180px;
   }
   .section04 .image > img {
      width: 112px;
   }
   .section04 .rolling-wrap {
      margin-top: 40px;
   }

   /* popup */
   .popup-wrap {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
   }
   .popup-wrap .overlay {
      display: block;
   }
   .popup-wrap .popup {
      max-width: 340px;
      width: 100%;
      height: 475px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 15%;
   }
   .popup-wrap .popup-swiper .swiper-pagination {
      bottom: 14px !important;
   }
   .popup-wrap .btn-close {
      width: 28px;
      height: 28px;
      top: -15px;
      right: -15px;
   }
   .popup-wrap .btn-close > span {
      height: 15px;
   }

   /* floating */
   .floating-wrap {
      bottom: 30px;
      right: 15px;
      gap: 10px;
   }
   .floating-wrap > li > button,
   .floating-wrap > li > a {
      width: 40px;
      height: 40px;
      background-size: 19px 19px;
   }
}

@media all and (max-width: 940px) {
   .section02 .tab-wrap .tab-list {
      justify-content: flex-start;
      padding-left: 6px;
   }
}

@media all and (max-width: 768px) {
}

@media all and (max-width: 500px) {
   .section01 .hero-list.visual01 .hero-img {
      background-image: url(../image/bg_hero01_mo.jpg);
   }
   .section01 .hero-list.visual02 .hero-img {
      background-image: url(../image/bg_hero02_mo.jpg);
   }
   .section01 .hero-list.visual03 .hero-img {
      background-image: url(../image/bg_hero03_mo.jpg);
   }
   .section01 .hero-list.visual03solo .hero-img {
      background-image: url(../image/bg_hero03solo_mo.jpg);
   }
   .section01 .hero-list.visual04ks .hero-img {
      background-image: url(../image/bg_hero04ks_mo.jpg);
   }

   .section02 .tab-wrap .tab-list {
      gap: 0;
   }
   .section02 .tab-wrap .tab-list > li {
      width: 160px;
   }
   .section02 .tab-wrap .tab-list > li .image {
      width: 68px;
      height: 68px;
   }
   .section02 .tab-wrap .tab-list > li > button {
      gap: 10px;
   }
   .section02 .tab-wrap .tab-list > li .txt {
      font-size: 16px;
   }
   .section02 .tab-wrap .tab-list > li .txt > .tag {
      padding: 1px 4px;
      font-size: 11px;
      height: 19px;
      margin-top: 3px;
   }
   .section02 .big-card {
      height: 380px;
   }
   .section02 .tab-1 .big-card .bg-image {
      background-image: url(../image/img_sec02_card01_mo.jpg);
   }
   .section02 .tab-2 .big-card .bg-image {
      background-image: url(../image/img_sec02_card06_mo.jpg);
   }
   .section02 .tab-3 .big-card .bg-image {
      background-image: url(../image/img_sec02_card02_mo.jpg);
   }
   .section02 .tab-4 .big-card .bg-image {
      background-image: url(../image/img_sec02_card04_mo.jpg);
   }
   .section02 .tab-5 .big-card .bg-image {
      background-image: url(../image/img_sec02_card05_mo.jpg);
   }

   .section04 .txt-box {
      flex-direction: column;
      gap: 0;
   }
   .section04 .link-arrow {
      margin-left: 0;
      margin-top: 8px;
   }
}

@media all and (min-width: 1024px) {
   #mainWrap .big-card:hover .bg-image {
      transform: scale(1.05);
      -webkit-transform: scale(1.05);
   }
   #mainWrap .big-card a:hover .btn-arrow {
      background-color: #fff;
      background-image: url(../image/icon_arrow.svg);
   }

   .section02 .tab-wrap .tab-list > li.use:hover .txt {
      color: #111;
   }
   .section02 .tab-wrap .tab-list > li.use:hover .tag {
      background-color: #333;
   }
   .section02 .tab-wrap .tab-list > li.bike0.use:hover .image {
      background: linear-gradient(133.43deg, #f7e8a7 12.36%, #f5de97 54.75%, #f4c486 97.15%);
   }
   .section02 .tab-wrap .tab-list > li.bike1.use:hover .image {
      background: linear-gradient(133.43deg, #d2d2fd 12.36%, #eae2f7 97.15%);
   }
   .section02 .tab-wrap .tab-list > li.bike2.use:hover .image {
      background: linear-gradient(135deg, #b9e9ff 12.5%, #f1e1fd 103.7%);
   }
   .section02 .tab-wrap .tab-list > li.bike3.use:hover .image {
      background: linear-gradient(134.22deg, #ffe9a2 12.43%, #e6f496 113.84%);
   }
   .section02 .tab-wrap .tab-list > li.bike4.use:hover .image {
      background: linear-gradient(133.43deg, #c4ecc5 12.36%, #e8f4b6 97.15%);
   }

   .section04 .link-arrow:hover {
      background-color: #fff;
      background-image: url(../image/icon_arrow.svg);
   }

   /* floating */
   .floating-wrap > li:hover > span {
      display: block;
   }
   .floating-wrap > li:nth-child(1):hover > button {
      background-image: url(../image/icon_popup_on.svg);
   }
   .floating-wrap > li:nth-child(2):hover > a {
      background-image: url(../image/icon_cs_on.svg);
   }
   .floating-wrap > li:nth-child(3):hover > a {
      background-image: url(../image/icon_kakao_on.svg);
   }
   .floating-wrap > li:nth-child(4):hover > button {
      background-image: url(../image/icon_top_on.svg);
   }
}

@keyframes fade-blank-in {
   0% {
      left: -100%;
   }
   100% {
      left: 0;
   }
}
@keyframes fade-blank-out {
   0% {
      left: 0;
   }
   100% {
      left: 100%;
   }
}
@keyframes fade-in {
   0% {
      left: 0%;
   }
   100% {
      left: 100%;
   }
}
@keyframes fade-out {
   0% {
      left: -100%;
   }
   100% {
      left: 0%;
   }
}
@keyframes gnb-item-ani {
   from {
      transform: translateY(30px);
      opacity: 0;
      visibility: hidden;
   }
   to {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
   }
}
@keyframes text-ani {
   0% {
      font-size: 0;
      transform: matrix(1, 0, 0, 0.01, 0, 0);
   }
   20% {
      transform: matrix(1, 0, 0, 0.01, 0, 0);
   }
   25% {
      font-size: 24px;
      transform: matrix(1, 0, 0, 1, 0, 0);
   }
   100% {
      font-size: 24px;
      transform: matrix(1, 0, 0, 1, 0, 0);
   }
}
@keyframes btn-ani {
   20% {
      transform: matrix(1, 0, 0, 1, 0, 0);
   }
   30% {
      transform: matrix(1, 0, 0, 1.1, 0, 0);
   }
   35% {
      transform: matrix(1.1, 0, 0, 1, 0, 0);
   }
   40% {
      transform: matrix(1, 0, 0, 1, 0, 0);
   }
}