@charset "utf-8";

body.fixed { position: fixed; overscroll-behavior: contain; }

#wrap,
#container,
#contents,
.con { position: relative; }

img { max-width: 100%; }

#header { position: fixed; left: 0; top: 0; width: 100%; background-color: #fff; z-index: 30; }
#header a { position: absolute; left: 50%; top: 0; transform: translate(-50%); width: 180px; height: 50px; }

#contents { padding-top: 50px; padding-bottom: 80px; }

#aside { position: fixed; bottom: 0; left: 0; width: 100%; height: 56px; transition: bottom 0.4s; z-index: 40; }
#wrap.down #aside { bottom: -56px; }
#wrap.down #aside.active { bottom: 0; }
#wrap.down #aside.fixed { bottom: 0; }
#aside > .inner { display: flex; align-items: flex-end; height: 100%; }
#aside > .inner > img { position: relative; width: 100%; z-index: 10; }
#aside .category-swiper { display: flex; background-color: #fff; }
#aside .category-swiper .brand { width: 106px; }
#aside .category-swiper .swiper { padding-right: 20px; width: calc(100% - 106px); }
#aside .category-swiper .swiper-slide { padding-top: 20px; width: 74px; text-align: center; }
#aside .category-swiper .swiper-slide img { width: 66px; }
#aside .category-swiper .swiper-slide::before { content: ''; position: absolute; top: 18px; left: 50%; transform: translate(-50%, 0); width: 70px; height: 70px; border-radius: 35px; border: 2px solid transparent; pointer-events: none; }
#aside .category-swiper .swiper-slide::after { content: ''; position: absolute; top: 16px; left: 50%; transform: translate(-50%, 0); width: 74px; height: 74px; border-radius: 37px; border: 2px solid transparent; pointer-events: none; }
#aside .category-swiper .swiper-slide.active::before { border-color: #fff; }
#aside .category-swiper .swiper-slide.active::after { border-color: #000; }
#aside .btn-category { position: absolute; left: 0; bottom: 0; width: 80px; height: 56px; z-index: 20; }
#aside .category { position: absolute; left: 0; top: 0; width: 100%; }
#aside .category.active { top: auto; bottom: 56px; }
#aside::before { content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 56px; background-color: rgb(242, 242, 242); z-index: 11; }
#aside.active { height: 192px; box-shadow: 0px 0px 20px 0px #00000026; }
#aside .btn-home { width: 100px; height: 56px; position: absolute; left:50%; top:0; transform: translateX(-50%); }

.con01 img { width: 100%; }

.con02 .title { padding: 16px 20px 40px; }
.con02 .con02-swiper .swiper { padding: 0 20px; }
.con02 .con02-swiper .swiper-slide { width: 94px; }

.con03 { margin-top: 24px; padding: 60px 0; background-color: #000; }
.con03 .title { padding: 0 20px; }
.con03 .video { padding: 30px 20px 0; height: 510px; overflow: hidden; }
.con03 .con03-swiper .swiper { padding: 30px 20px 0; }
.con03 .con03-swiper .swiper-slide { width: 135px; }

.con04 { padding-top: 80px; }
.con04 .title { padding: 0 20px; }
.con04 .video { position: relative; padding: 20px 20px 0; height: 500px; }
.con04 .video video { object-fit: cover; width: 100%; height: 100%; }
.con04 .video .img { position: absolute; left: 0; top: 0; padding: 20px; width: 100%; height: 500px; transition: opacity 0.5s 0.5s; }
.con04 .video .img img { object-fit: cover; width: 100%; height: 100%; }
.con04 .video.active .img { opacity: 0; transition-delay: 0s; }
.con04 .con04-swiper .swiper { padding: 20px 20px 0; }
.con04 .con04-swiper .swiper-slide { width: 211px; }
.con04 .btns { padding: 20px 20px 0; }

.con05 { padding-top: 80px; }
.con05 .title { padding: 0 20px; }
.con05 .tab { padding: 20px 50px 0 20px; }
.con05 .con05-swiper .swiper { padding: 20px 20px 0; }
.con05 .con05-swiper .swiper-slide { width: 139px; }

.con06 { padding-top: 80px; }
.con06 .title { padding: 0 20px;}
.con06 .video { padding: 20px 20px 0; height: 500px; overflow: hidden; }
.con06 .txt { padding: 0 20px; }
.con06 .txt img { margin-top: 20px; }
.con06 .con06-swiper { position: relative; }
.con06 .con06-swiper .swiper { padding: 20px 20px 22px; }
.con06 .con06-swiper .swiper-slide { width: 211px; }
.con06 .con06-swiper .swiper-pagination { top: auto; left: 20px; bottom: 0; margin-top: 0; width: calc(100% - 40px); height: 2px; background-color: #f5f5f5; }
.con06 .con06-swiper .swiper-pagination-progressbar-fill { background-color: #000; }
.con06 .btns { padding: 20px 20px 0; }

.con07 { padding-top: 80px; }

.con08 { padding-top: 80px; padding-bottom: 80px; }
.con08 .title { padding: 0 20px; }
.con08 .tab { margin-top: 20px; padding-left: 20px; padding-right: 50px; }
.con08 .con08-swiper .swiper-slide { width: 211px; }
.con08 .con08-swiper .swiper { padding: 20px 20px 0; }

.con09 { padding-top: 40px; padding-bottom: 80px; background-color: #000; }
.con09 .title { padding: 0 20px; }
.con09 .con09-swiper .swiper { padding: 20px 20px 0; }
.con09 .con09-swiper .swiper-slide { width: 320px; }

.con10 { padding-top: 80px; padding-bottom: 80px;  }
.con10 .title { padding: 0 20px; }
.con10 .con10-swiper .swiper { padding: 20px 20px 0; }
.con10 .con10-swiper .swiper-slide { width: 265px; }

.con12 .title { padding: 0 20px; }
.con12 .tab { margin-top: 20px; padding-left: 20px; padding-right: 24px; }
.con12 .con12-swiper .swiper { padding: 20px 20px 0; }
.con12 .con12-swiper .swiper-slide { width: 291px; transition: transform .4s; transform: scale(0.75); }
.con12 .con12-swiper .swiper-slide-active { transform: scale(1); }

.con11 img { width: 100%; }

.con12 { padding-top: 80px; }

.con13 img { width: 100%; }

.con14 { display: none; position: fixed; left: 0; top: 0; width: 100%; }
.con14.active { display: block; }


.con15 { display: none; position: fixed; left: 0; top: 0; width: 100%; z-index: 31; }
.con15.active { display: block; }

.con16 { display: none; position: fixed; left: 0; top: 0; width: 100%; z-index: 29; }
.con16.active { display: block; }

.btn-search { width: 100px; height: 50px; position: absolute; right: 0; top: 0; z-index: 1; }

.video video { width: 100%; }