@charset "UTF-8"; @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #000; border-radius: 6px; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #555; } html:has(.header--mob--wrap.active) { overflow: hidden; } html:has(.header--mob--lang--wrap.active) { overflow: hidden; } * { font-family: "pretendard"; margin: 0; padding: 0; box-sizing: border-box; } .header--wrap { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: background-color 0.3s ease; } .header--wrap:hover { background-color: #fff; } .header--wrap:hover .header--inner .header--logo { background-image: url(../img/logo--white.svg); } .header--wrap:hover .header--inner:has(.header--mob--lang--btn.active) .header--logo { background-image: url(../img/logo--default.svg); } .header--wrap:hover .header--inner:has(.header--mob--btn.active) .header--logo { background-image: url(../img/logo--default.svg); } .header--wrap:hover .header--inner .header--mob--lang--btn { background-image: url(../img/ico--global--black.svg); } .header--wrap:hover .header--inner .header--mob--btn { background-image: url(../img/ico--header--black.svg); } .header--wrap:hover .header--inner .header--nav > ul > li > a { color: #000; } .header--wrap:hover .header--inner .header--lang--btn { background-color: #EC3237; } .header--wrap .header--inner { max-width: 1600px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; position: relative; align-items: center; } .header--wrap .header--inner .header--logo { display: flex; align-items: center; max-width: 290px; min-width: 191px; width: 30%; z-index: 100; height: 55px; background-size: 100%; background-position: center; background-repeat: no-repeat; background-image: url(../img/logo--default.svg); } .header--wrap .header--inner .header--nav > ul { list-style: none; display: flex; } .header--wrap .header--inner .header--nav > ul > li { position: relative; } .header--wrap .header--inner .header--nav > ul > li > a { transition: all 0.3s; display: inline-block; text-transform: uppercase; padding: 40px 75px; text-decoration: none; font-size: 17px; font-weight: 700; color: #fff; } .header--wrap .header--inner .header--nav > ul > li:hover .sub--nav--wrap { max-height: 400px; } .header--wrap .header--inner .header--nav > ul > li:hover:nth-child(3) .sub--nav--wrap { max-height: 800px; transition: max-height 0.9s cubic-bezier(0.4, 0, 0.2, 1); } .header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap { max-height: 0; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: absolute; display: flex; left: 50%; transform: translateX(-50%); white-space: nowrap; background-color: #fff; overflow: hidden; } .header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav { padding: 35px 30px; display: flex; flex-direction: column; gap: 25px; } .header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav > a { display: inline-block; font-weight: 400; color: #111; text-transform: capitalize; font-size: 16px; line-height: 1.4; text-decoration: none; transition: all 0.3s; } .header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav > a:hover { color: #EC3237; font-weight: 500; } .header--wrap .header--inner .header--lang--btn { display: flex; align-items: center; width: 130px; color: #fff; transition: all 0.3s; cursor: pointer; font-size: 17px; font-weight: 700; text-transform: uppercase; padding: 38px 20px; position: relative; } .header--wrap .header--inner .header--lang--btn:hover .lang--select--wrap { height: 190px; border-top: 1px solid #FB484D; } .header--wrap .header--inner .header--lang--btn i { display: inline-block; background-repeat: no-repeat; background-size: 100%; background-position: center; } .header--wrap .header--inner .header--lang--btn .ico--global { width: 24px; margin-right: 10px; height: 24px; background-image: url(../img/ico--global.svg); } .header--wrap .header--inner .header--lang--btn .ico--arrow { margin-left: auto; width: 14px; height: 14px; background-image: url(../img/ico--global--arrow.svg); } .header--wrap .header--inner .header--lang--btn .lang--select--wrap { height: 0; overflow: hidden; position: absolute; background: #EC3237; top: 100%; left: 0; transition: height 0.3s; width: 100%; display: flex; flex-direction: column; align-items: center; list-style: none; } .header--wrap .header--inner .header--lang--btn .lang--select--wrap li { width: 100%; transition: all 0.3s; text-align: center; } .header--wrap .header--inner .header--lang--btn .lang--select--wrap li a { padding: 10px 0; width: 100%; color: #fff; display: inline-block; text-decoration: none; font-size: 17px; font-weight: 700; } .header--wrap .header--inner .header--lang--btn .lang--select--wrap li:first-child a { padding-top: 25px; } .header--wrap .header--inner .header--lang--btn .lang--select--wrap li:last-child a { padding-bottom: 25px; } .header--wrap .header--inner .header--lang--btn .lang--select--wrap li:hover a { color: #ef0; } .header--wrap .header--inner .header--lang--btn .lang--select--wrap li.active a { color: #ef0; } .header--wrap .header--inner .header--mob--lang--btn { display: none; width: 26px; margin-left: auto; margin-right: 20px; z-index: 100; height: 26px; background-repeat: no-repeat; background-size: 100%; background-image: url(../img/ico--global.svg); cursor: pointer; } .header--wrap .header--inner .header--mob--lang--btn.active { margin-right: 0; background-image: url(../img/ico--close.svg) !important; } .header--wrap .header--inner .header--mob--lang--btn.hide { display: none; } .header--wrap .header--inner .header--mob--lang--wrap { position: fixed; background-color: #1a1b20; width: 100%; height: 100vh; right: -100%; z-index: 99; top: 0; display: flex; align-items: center; transition: all 0.3s; } .header--wrap .header--inner .header--mob--lang--wrap.active { right: 0; } .header--wrap .header--inner .header--mob--lang--wrap > ul { display: flex; width: 100%; flex-direction: column; list-style: none; } .header--wrap .header--inner .header--mob--lang--wrap > ul > li { width: 100%; text-align: center; } .header--wrap .header--inner .header--mob--lang--wrap > ul > li > a { text-decoration: none; width: 100%; padding: 45px 0; display: inline-block; color: #fff; font-weight: 700; font-size: 25px; } .header--wrap .header--inner .header--mob--lang--wrap > ul > li.active > a { color: #ef0; } .header--wrap .header--inner .header--mob--btn { display: none; width: 26px; cursor: pointer; z-index: 100; height: 26px; background-image: url(../img/ico--header.svg); background-repeat: no-repeat; } .header--wrap .header--inner .header--mob--btn.active { background-image: url(../img/ico--close.svg) !important; } .header--wrap .header--inner .header--mob--btn.hide { display: none; } .header--wrap .header--inner .header--mob--wrap { position: fixed; background-color: #101014; width: 100%; height: 100vh; padding-top: 80px; right: -100%; z-index: 99; top: 0; display: flex; transition: all 0.3s; } .header--wrap .header--inner .header--mob--wrap.active { right: 0; } .header--wrap .header--inner .header--mob--wrap .mob--l { width: 40%; border-top: 1px solid #31313A; padding: 40px 0; } .header--wrap .header--inner .header--mob--wrap .mob--l ul { list-style: none; display: flex; flex-direction: column; gap: 50px; } .header--wrap .header--inner .header--mob--wrap .mob--l ul li a { line-height: 25px; height: 25px; width: 100%; color: #fff; font-size: 16px; font-weight: 700; text-transform: uppercase; text-decoration: none; display: inline-block; padding: 0 30px; transition: all 0.3s; position: relative; } .header--wrap .header--inner .header--mob--wrap .mob--l ul li a::after { content: ""; position: absolute; width: 2px; right: 0; top: 0; display: inline-block; transition: all 0.3s; height: 100%; background-color: #EC3237; opacity: 0; } .header--wrap .header--inner .header--mob--wrap .mob--l ul li a:hover { color: #EC3237; } .header--wrap .header--inner .header--mob--wrap .mob--l ul li a:hover::after { opacity: 1; } .header--wrap .header--inner .header--mob--wrap .mob--l ul li a.active { color: #EC3237; } .header--wrap .header--inner .header--mob--wrap .mob--l ul li a.active::after { opacity: 1; } .header--wrap .header--inner .header--mob--wrap .mob--r { width: 60%; border-top: 1px solid #31313A; background-color: #1a1b20; padding: 40px 10px 40px 30px; } .header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap { height: 100%; overflow-y: auto; } .header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav { display: none; flex-direction: column; gap: 40px; } .header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav.active { display: flex; } .header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a { text-decoration: none; color: #fff; display: inline-block; width: 100%; } .header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a.active { color: #ec3237; } .header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a br { display: none; } .footer--wrap { z-index: 10; position: absolute; width: 100%; color: #fff; bottom: 0; left: 0; text-align: center; font-weight: 500; font-size: 15px; text-transform: uppercase; padding: 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); background: #020203; } .container { position: relative; height: 300vh; /* 3개 이미지 * 100vh */ } .container .image--section { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1; } .container .image--section.global--section { background-color: #1A1B20; } .container .image--section.contact--section { background-image: url(../img/main--contact.png); background-size: cover; } .container .image--section.black3 { background-color: #15161A; } .container .image--section .section--container { max-width: 1600px; margin: 0 auto; position: relative; height: 100%; } .container .image--section .section--container .map--wrap { position: absolute; width: 100%; align-items: center; display: flex; justify-content: flex-end; height: 100%; } .container .image--section .section--container .map--wrap .map--img { position: relative; } .container .image--section .section--container .map--wrap .map--img img { -o-object-fit: none; object-fit: none; height: auto; } .container .image--section .section--container .map--wrap .map--dot--box { width: 100%; height: 100%; top: 0; left: 0; position: absolute; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots { position: relative; width: 100%; height: 100%; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot { width: 168px; height: 168px; border-radius: 100px; background: rgba(205, 25, 29, 0.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); justify-content: center; display: flex; flex-direction: column; position: absolute; align-items: center; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot .circle { border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 14px; color: #fff; font-weight: 600; line-height: 1; padding: 8px 10px; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot > p { margin-top: 10px; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot > p span { color: #fff; font-size: 23px; font-weight: 800; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot .txt { margin-top: 20px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot1 { left: 7%; top: 24%; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot2 { background: rgba(169, 9, 13, 0.6); left: 27%; bottom: 18%; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot3 { background: rgba(235, 63, 68, 0.6); top: 19%; left: 44%; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot4 { background: rgba(188, 106, 108, 0.6); right: 25%; bottom: 18%; } .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot5 { background: rgba(166, 0, 4, 0.6); right: 9%; top: 21%; } .container .image--section .section--container .text--wrap { position: absolute; display: flex; flex-direction: column; bottom: 10%; } .container .image--section .section--container .text--wrap > h4 { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.36px; margin-bottom: 70px; } .container .image--section .section--container .text--wrap > h4 span { color: #EC3237; } .container .image--section .section--container .text--wrap > h3 { font-size: 50px; color: rgba(255, 255, 255, 0.1); margin-bottom: 35px; } .container .image--section .section--container .text--wrap > p { color: #fff; font-size: 19px; font-weight: 400; word-break: keep-all; letter-spacing: -0.38px; margin-bottom: 110px; } .container .image--section .section--container .text--wrap .btn--wrap a { display: flex; gap: 20px; align-items: center; color: #fff; font-size: 15px; font-weight: 600; padding: 20px 30px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 100px; width: -moz-fit-content; width: fit-content; text-decoration: none; } .container .image--section .section--container .text--wrap .btn--wrap a .ico { display: inline-block; width: 14px; height: 14px; background-repeat: no-repeat; background-image: url(../img/ico--arrow--white.svg); } .container .image--section .section--container .contact--wrap { width: 100%; gap: 30px; display: flex; height: 100%; align-items: center; justify-content: space-between; } .container .image--section .section--container .contact--wrap .location--group { display: flex; flex-wrap: wrap; width: 52%; height: 80vh; max-height: 850px; gap: 2%; } .container .image--section .section--container .contact--wrap .location--group input[type=radio] { display: none; } .container .image--section .section--container .contact--wrap .location--group .location--item { display: flex; width: 18.4%; color: #fff; cursor: pointer; text-transform: uppercase; border-radius: 30px; transition: all 0.3s ease; position: relative; overflow: hidden; } .container .image--section .section--container .contact--wrap .location--group .location--item:hover { transform: scale(1.1); } .container .image--section .section--container .contact--wrap .location--group .location--item label { width: 100%; height: 100%; border-radius: inherit; } .container .image--section .section--container .contact--wrap .location--group .location--item .image--area { cursor: pointer; border-radius: inherit; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; } .container .image--section .section--container .contact--wrap .location--group .location--item .image--area:before { content: ""; display: inline-block; position: absolute; width: 100%; height: 100%; background: rgba(26, 27, 32, 0.5); top: 0; left: 0; } .container .image--section .section--container .contact--wrap .location--group .location--item .text--area { cursor: pointer; position: absolute; padding: 25px; font-weight: 600; font-size: 14px; z-index: 2; color: #fff; top: 0; left: 0; } .container .image--section .section--container .contact--wrap .location--group input[type=radio]:checked + label { border: 2px solid rgba(236, 50, 55, 0.5); box-shadow: 0 0 20px 0 rgba(25, 36, 77, 0.25); } .container .image--section .section--container .contact--wrap .location--group input[type=radio]:checked + label .image--area::before { display: none; } .container .image--section .section--container .contact--wrap .location--group label[for=location1] .image--area { background-image: url(../img/contact1.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location2] .image--area { background-image: url(../img/contact2.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location3] .image--area { background-image: url(../img/contact3.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location4] .image--area { background-image: url(../img/contact4.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location5] .image--area { background-image: url(../img/contact5.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location6] .image--area { background-image: url(../img/contact6.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location7] .image--area { background-image: url(../img/contact7.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location8] .image--area { background-image: url(../img/contact8.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location9] .image--area { background-image: url(../img/contact9.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location10] .image--area { background-image: url(../img/contact10.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location11] .image--area { background-image: url(../img/contact11.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location12] .image--area { background-image: url(../img/contact12.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location13] .image--area { background-image: url(../img/contact13.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location14] .image--area { background-image: url(../img/contact14.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location15] .image--area { background-image: url(../img/contact15.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location16] .image--area { background-image: url(../img/contact16.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location17] .image--area { background-image: url(../img/contact17.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location18] .image--area { background-image: url(../img/contact18.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location19] .image--area { background-image: url(../img/contact19.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location20] .image--area { background-image: url(../img/contact20.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location21] .image--area { background-image: url(../img/contact21.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location22] .image--area { background-image: url(../img/contact22.png); } .container .image--section .section--container .contact--wrap .location--group label[for=location23] .image--area { background-image: url(../img/contact23.png); } .container .image--section .section--container .contact--wrap .contact--tit--mo { display: none; } .container .image--section .section--container .contact--wrap .contact--btn--mo { display: none; } .container .image--section .section--container .contact--wrap .contact--form { background-color: #fff; display: flex; flex-direction: column; align-items: center; height: 80vh; max-height: 850px; justify-content: space-between; width: calc(48% - 30px); background-color: #1a1b20; border-radius: 40px; padding: 70px; } .container .image--section .section--container .contact--wrap .contact--form .contact--tit { width: 100%; display: flex; color: #fff; justify-content: space-between; } .container .image--section .section--container .contact--wrap .contact--form .contact--tit h3 { font-size: 35px; font-weight: 700; margin-bottom: 25px; } .container .image--section .section--container .contact--wrap .contact--form .contact--tit p { font-size: 16px; font-weight: 400; } .container .image--section .section--container .contact--wrap .contact--form .contact--tit .contact--btn { background-repeat: no-repeat; background-position: center; min-width: 70px; border: none; cursor: pointer; width: 70px; height: 70px; border-radius: 50%; background-color: #ec3237; background-image: url(../img/ico--contact.svg); } .container .image--section .section--container .contact--wrap .contact--form .contact--cont { width: 100%; color: #fff; display: flex; overflow-y: auto; height: calc(100% - 140px); flex-direction: column; gap: 35px; } .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap { display: flex; width: 100%; gap: 30px; } .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap .input--wrap { width: calc(50% - 15px); } .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap { width: 100%; display: flex; flex-direction: column; gap: 15px; } .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap select { border-radius: 12px; border: 1px solid #323340; background-color: #262730; padding: 20px; font-size: 16px; cursor: pointer; color: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../img/ico--select.svg); background-repeat: no-repeat; background-position: right 20px center; background-size: 16px 16px; padding-right: 50px; } .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap input { border-radius: 12px; border: 1px solid #323340; background-color: #262730; padding: 20px; font-size: 16px; color: #fff; } .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap textarea { resize: none; border-radius: 12px; border: 1px solid #323340; background-color: #262730; padding: 20px; font-size: 16px; color: #fff; } .container .image--section img { width: 100%; height: 100vh; -o-object-fit: cover; object-fit: cover; display: block; } .container .image--section:nth-child(2) { z-index: 2; } .container .image--section:nth-child(3) { z-index: 3; } .container .image--section .main--swiper { position: relative; } .container .image--section .main--swiper .swiper-slide .img--wrap { position: relative; } .container .image--section .main--swiper .swiper-slide .img--wrap::after { content: ""; position: absolute; width: 100%; z-index: 2; display: inline-block; height: 100%; background: linear-gradient(180deg, #1A1B20 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.4; top: 0; left: 0; } .container .image--section .main--swiper .swiper-slide .txt--wrap { position: absolute; display: flex; max-width: 1600px; width: 100%; left: 50%; top: 20%; transform: translateX(-50%); flex-direction: column; } .container .image--section .main--swiper .swiper-slide .txt--wrap > span { color: #fff; font-size: 23px; font-weight: 500; margin-bottom: 35px; letter-spacing: -0.46px; text-transform: capitalize; } .container .image--section .main--swiper .swiper-slide .txt--wrap > h2 { font-size: 120px; color: #fff; margin-bottom: 65px; font-weight: 900; letter-spacing: -2.4px; text-transform: uppercase; } .container .image--section .main--swiper .swiper-slide .txt--wrap > h2 strong { color: #ec3237; } .container .image--section .main--swiper .swiper-slide .txt--wrap .btn--wrap a { display: flex; align-items: center; text-decoration: none; gap: 10px; color: #ec3237; font-size: 14px; background-color: #fff; width: -moz-fit-content; width: fit-content; font-weight: 700; padding: 20px 30px; border-radius: 100px; } .container .image--section .main--swiper .swiper-slide .txt--wrap .btn--wrap a .ico { display: inline-block; background-image: url(../img/ico--arrow.svg); background-repeat: no-repeat; background-size: 100%; background-position: center; width: 16px; height: 16px; } .container .image--section .main--swiper .swiper--btn--wrap { display: none; position: absolute; right: 20px; display: flex; gap: 15px; width: 143px; height: 64px; bottom: 30px; } .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next, .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev { display: none; margin-top: 0; top: 0; background-image: url(../img/ico--arrow--swiper.svg); background-size: 25px 25px; width: 64px; height: 64px; background-repeat: no-repeat; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background-position: center; } .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next::after, .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev::after { display: none; } .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev { left: 0; transform: rotate(180deg); } .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next { right: 0; left: auto; } .container .image--section .main--swiper .swiper--pag--wrap { display: none; position: absolute; width: calc(100% - 240px); height: 64px; bottom: 30px; left: 30px; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag { position: relative; height: 100%; width: 100%; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag p { font-weight: 700; font-size: 17px; color: #fff; text-transform: uppercase; position: absolute; z-index: 1; top: 0; left: 0; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span { display: inline-block; position: absolute; z-index: 1; color: rgba(255, 255, 255, 0.5); font-size: 15px; font-weight: 700; bottom: 0; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span.active { color: #fff; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span.num--6 { right: 0; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb .swiper-pagination { position: absolute; top: auto; border-radius: 100px; height: 5px; width: calc(100% - 60px); margin: 5px 0; left: 30px; overflow: hidden; bottom: 0; background-color: #4A494D; } .container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb .swiper-pagination .swiper-pagination-progressbar-fill { background-color: #fff; } .container .image--section .main--swiper .main--swiper--tab { position: absolute; max-width: 1600px; left: 50%; transform: translateX(-50%); width: 100%; bottom: 0; display: flex; z-index: 5; } .container .image--section .main--swiper .main--swiper--tab .tab--wrap { cursor: pointer; transition: all 0.3s; word-break: keep-all; width: 16.6666666667%; padding: 70px 35px 50px; } .container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner { padding-top: 20px; border-top: 1px solid #fff; } .container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dt { color: #fff; font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 30px; } .container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dd { font-size: 14px; color: #fff; font-weight: 400; line-height: 1.7; } .container .image--section .main--swiper .main--swiper--tab .tab--wrap.active { background-color: #ec3237; }/*# sourceMappingURL=style.css.map */