@charset "utf-8";

#wrap,
#container,
#contents,
.con { position: relative; }
#contents { padding-top: 175px; padding-bottom: 120px; min-width: 1280px; }

img { max-width: 100%; }
[class$="swiper"] { position: relative; }

.inner { margin: 0 auto; max-width: 2560px; }

.swiper-slide img { width: 100%; }
.inner > img { width: 100%; }

#header { position: fixed; left: 0; top: 0; width: 100%; height: 175px; background-color: #ffffff; z-index: 20; }
#header .inner { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; min-width: 1280px; }
#header .inner img { width: auto; }
#header .btn-home { position: absolute; left: 50%; top: 38px; transform: translateX(-50%); margin-left: -50px; width: 400px; height: 50px; }

.con01 .con01-txt { position: absolute; left: 80px; bottom: 80px; z-index: 2; }
.con01 .con01-swiper .swiper-slide img { width: 100%; }

.con01 a > img { width: 100%; }

.con02 { padding: 80px 0; }
.con02 .btn { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 100px; height: 50px; }
.con02 .btn-w { margin-left: -70px; }
.con02 .btn-m { margin-left: 30px; }
.con02 .img-area { text-align: center; }
.con02 .img-area img { display: none; }
.con02 .img-area img.active { display: inline-block; }

.con03 .inner { display: flex; }
.con03 .left { padding: 180px 80px; min-width: 795px; width: 41.40625%; height: 960px; background-color: #000; }
.con03 .right { width: 58.59375%; height: 960px; overflow: hidden; }
.con03 .right .video { display: block; }
.con03 .right img { object-fit: cover; width: 100%; height: 100%; max-width: none; }
.con03 .right video { object-fit: cover; width: 100%; height: 100%; object-position: 0 -206px; }
.con03 .con03-swiper { margin-top: 55px; padding-bottom: 40px; }
.con03 .con03-swiper .swiper-pagination { top: auto; bottom: 0; height: 1px; background-color: rgba(255, 255, 255, 0.5); }
.con03 .con03-swiper .swiper-pagination-progressbar-fill { background-color: #fff; }
.con03 .swiper-slide { width: 205px; }

.con04 .inner { padding: 100px 30px; }
.con04 .title { padding-bottom: 30px; } 
.con04 .video-wrap { position: relative; height: 320px; transition: height .6s ease-in-out; overflow: hidden; }
.con04 .video-wrap.active { height: 960px; }
.con04 .video-wrap video { object-fit: cover; width: 100%; height: 100%; min-height: 960px; }
.con04 .video-wrap .img { position: absolute; left: 0; top: 0; width: 100%; height: 320px; transition: opacity 0.5s 0.5s; }
.con04 .video-wrap .img img { object-fit: cover; width: 100%; height: 100%; }
.con04 .video-wrap.active .img { opacity: 0; transition-delay: 0s; }
.con04 .con04-swiper { margin-top: 24px; }
.con04 .con04-swiper .swiper-slide { width: 257px; }
.con04 .con04-swiper [class*="swiper-button-"] { width: 44px; height: 44px; }
.con04 .con04-swiper [class*="swiper-button-"]::after { display: none; }
.con04 .con04-swiper .swiper-button-prev { left: 0; }
.con04 .con04-swiper .swiper-button-next { right: 0; }
.con04 .btn-area { margin-top: 90px; text-align: center; }

.con05 .title { padding: 0 30px; }
.con05 .tab { display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 30px; }
.con05 .con05-swiper { padding: 0 30px; }
.con05 .btns { display: flex; width: 64px; }
.con05 [class^="swiper-button-"] { position: static; transform: translate(0); margin-top: 0; width: 32px; height: 32px; }
.con05 [class^="swiper-button-"] + [class^="swiper-button-"] { margin-left: -2px; }
.con05 [class^="swiper-button-"]::after { display: none; }

.con06 { padding-top: 100px; }
.con06 .inner { display: flex; justify-content: center; }
.con06 .video { position: relative; min-width: 462px; max-width: 692px; width: 36.04%; min-height: 640px; height: 50vw; max-height: 960px; overflow: hidden; }
.con06 .video video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; }
.con06 .img { width: 63.96%; }

.con07 { padding-top: 100px;}

.con08 { padding-top: 100px; }
.con08 .inner { display: flex; }
.con08 .title { padding: 30px; width: 404px; }
.con08 .btns { display: flex; padding-top: 30px; width: 64px; }
.con08 [class^="swiper-button-"] { position: static; transform: translate(0); margin-top: 0; width: 32px; height: 32px; }
.con08 [class^="swiper-button-"] + [class^="swiper-button-"] { margin-left: -2px; }
.con08 [class^="swiper-button-"]::after { display: none; }
.con08 .title .swiper-button-prev { left: 0; }
.con08 .title .swiper-button-next { right: 0; }
.con08 .con08-swiper { width: calc(100% - 404px); }
.con08 .con08-swiper .swiper-slide { width: 447px; }

.con09 { margin-top: 100px; background-color: #000000; }
.con09 .inner { padding: 60px 0 100px; }
.con09 .title { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 60px; }
.con09 .btns { display: flex; padding-top: 30px; width: 64px; }
.con09 [class^="swiper-button-"] { position: static; transform: translate(0); margin-top: 0; width: 32px; height: 32px; }
.con09 [class^="swiper-button-"] + [class^="swiper-button-"] { margin-left: -2px; }
.con09 [class^="swiper-button-"]::after { display: none; }
.con09 .con09-swiper { padding-top: 30px; }
.con09 .con09-swiper .swiper { padding: 0 60px; }
.con09 .con09-swiper .swiper-slide { width: 613px; overflow: hidden; }
.con09 .con09-swiper .swiper-slide .txt { position: absolute; left: 50%; top: 210px; transform: translate(-50%, 0); width: 390px; }
.con09 .con09-swiper .swiper-slide .video { width: 613px; height: 613px; }
.con09 .con09-swiper .swiper-slide .video video { margin-top: -60px; width: 100%; height: auto; }

.con10 { margin-top: 100px; }
.con10 .title { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 30px; }
.con10 .btns { display: flex; padding-top: 30px; width: 64px; }
.con10 [class^="swiper-button-"] { position: static; transform: translate(0); margin-top: 0; width: 32px; height: 32px; }
.con10 [class^="swiper-button-"] + [class^="swiper-button-"] { margin-left: -2px; }
.con10 [class^="swiper-button-"]::after { display: none; }
.con10 .con10-swiper { padding-top: 30px; }
.con10 .con10-swiper .swiper { padding: 0 30px; }
.con10 .con10-swiper .swiper-slide { width: 592px; }

.con11 { padding-top: 100px; }

.con12 { padding: 100px 0; }
.con12 .btns { position: absolute; left: 20px; top: 150px; }
.con12 .btns button { width: 60px; height: 60px; }
.con12 .btns button:nth-child(2) { width: 100px; }
.con12 img { display: none; }
.con12 img.active { display: inline-block; }