* { margin: 0; padding: 0; text-decoration: none; list-style: none; } @keyframes key-ani { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 10% { -webkit-transform: translatey(-50%); transform: translatey(-50%); } 20% { -webkit-transform: translatey(0); transform: translatey(0); } 30% { -webkit-transform: translatey(-25%); transform: translatey(-25%); } 40% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(-10%); transform: translatey(-10%); } 60% { -webkit-transform: translatey(0); transform: translatey(0); } 70% { -webkit-transform: translatey(0); transform: translatey(0); } 80% { -webkit-transform: translatey(0); transform: translatey(0); } 100% { -webkit-transform: translatey(0); transform: translatey(0); } } .factoryreserve { --fontsize35: calc(35 / 1920 * 100 * 1vw); --fontsize60: calc(60 / 1920 * 100 * 1vw); --fontsize36: calc(36 / 1920 * 100 * 1vw); --fontsize20: calc(20 / 1920 * 100 * 1vw); --fontsize22: calc(22 / 1920 * 100 * 1vw); --fontsize24: calc(20 / 1920 * 100 * 1vw); --fontfamily-light: "hyundaisansheadcn-light"; --fontfamily-lighter: "hyundaisansheadcn-lighter"; --fontfamily-medium: "hyundaisansheadcn-medium"; --fontfamily-regular: "hyundaisansheadcn"; margin: 0 auto; } .factoryreserve .container { width: 100%; } .factoryreserve .container .safe-area { margin: 0 auto; } .factoryreserve .container .safe-area .entry-container { background-color: #e4e3e1; display: flex; justify-content: center; text-align: center; padding: 4vw 0; margin-top: 5vw; } .factoryreserve .container .safe-area .entry-container div { width: 41.5vw; width: 64%; margin: 0 auto; } .factoryreserve .container .safe-area .entry-container a { color: #002c60; font-size: var(--fontsize35); font-family: var(--fontfamily-regular); } .factoryreserve .container .safe-area .entry-container .item-entry { border-right: 0.1vw solid #002c60; } .factoryreserve .container .safe-area .entry-container .entry-img { display: flex; justify-content: center; } .factoryreserve .container .safe-area .entry-container .entry-img img { width: 4vw; } .factoryreserve .container .safe-area .entry-container .entry-text { padding-top: 2vw; font-size: var(--fontsize35); } .factoryreserve .container .safe-area .entry-container .entry-text :after { content: ""; display: inline-block; width: 1vw; height: 1vw; transform: rotate(45deg); border: 0.01rem solid #002c60; border-bottom: none; border-left: none; margin-left: 1.7vw; } .factoryreserve .container .safe-area .give-text { margin: 7vw 0; } .factoryreserve .container .safe-area .give-text .text { font-size: var(--fontsize60); margin-bottom: 2.083vw; color: #002c60; font-weight: bold; } .factoryreserve .container .safe-area .give-text .sub_text { display: flex; font-size: var(--fontsize22); font-family: var(--fontfamily-light); text-align: justify; line-height: 1.6; font-weight: 300; } .factoryreserve .container .safe-area .give-text .sub_text div { width: 39vw; } .factoryreserve .container .safe-area .give-text .sub_text .sub1 { margin-right: 4vw; } .factoryreserve .container #swiper_video_box { position: relative; width: 100%; margin: 0 auto; padding-bottom: 4vw; } .factoryreserve .container #swiper_video_box img { display: block; height: auto; } .factoryreserve .container #swiper_video_box .video_cover { position: relative; object-fit: cover; width: 100%; max-height: 100vh; } .factoryreserve .container #swiper_video_box .play_btn { display: block; width: 4.5vw; height: 4.5vw; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: no-repeat; background-size: contain; z-index: 2; cursor: pointer; } .factoryreserve .container #swiper_video_box .video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background-color: #000; display: none; } .factoryreserve .container #swiper_video_box .text-wrap { position: absolute; left: 9vw; bottom: 6vw; color: #ffffff; } .factoryreserve .container #swiper_video_box .text-wrap .text-title { font-size: var(--fontsize36); font-family: var(--fontfamily-medium); padding-bottom: 1vw; } .factoryreserve .container #swiper_video_box .text-wrap .text-detail { font-size: var(--fontsize20); font-family: var(--fontfamily-lighter); } @media (max-width: 767px) { .factoryreserve { --fontsize35: calc(45 / 1920 * 100 * 1vw); --fontsize48: calc(55 / 1920 * 100 * 1vw); --fontsize60: calc(78 / 1920 * 100 * 1vw); --fontsize24: calc(60 / 1920 * 100 * 1vw); --fontsize36: calc(55 / 1920 * 100 * 1vw); --fontsize37: calc(68 / 1920 * 100 * 1vw); --fontsize20: calc(45 / 1920 * 100 * 1vw); --fontsize62: calc(84 / 1920 * 100 * 1vw); font-size: var(--fontsize12); font-family: var(--fontfamily-regular); letter-spacing: 0.15em; letter-spacing: 0.1em; } .factoryreserve .container .safe-area .entry-container { display: block; padding: 0; padding-top: 6vw 0; background-color: transparent; } .factoryreserve .container .safe-area .entry-container a { font-size: var(--fontsize15); } .factoryreserve .container .safe-area .entry-container div { width: 100%; background-color: #e4e3e1; } .factoryreserve .container .safe-area .entry-container .gap { padding: 8vw 0; } .factoryreserve .container .safe-area .entry-container .distance { margin-bottom: 3vw; } .factoryreserve .container .safe-area .entry-container .entry-text { padding-top: 3vw; font-size: var(--fontsize37); } .factoryreserve .container .safe-area .give-text { margin: 9vw 0; } .factoryreserve .container .safe-area .give-text .text { font-size: var(--fontsize62); margin-bottom: 3vw; } .factoryreserve .container .safe-area .give-text .sub_text { display: block; font-size: var(--fontsize48); font-weight: 500; font-family: var(--fontfamily-regular); } .factoryreserve .container .safe-area .give-text .sub_text div { width: 100%; } .factoryreserve .container .safe-area .give-text .sub_text .sub1 { padding-bottom: 5vw; } .factoryreserve .container #swiper_video_box { padding-bottom: 8vw; } .factoryreserve .container #swiper_video_box .text-wrap { position: absolute; left: 8vw; bottom: 4vw; } .factoryreserve .container .safe-area .entry-container .entry-text :after { width: 1.7vw; height: 1.7vw; } .factoryreserve .container .safe-area .entry-container .entry-img img { width: 8vw; } .factoryreserve .container #swiper_video_box .play_btn { width: 8vw; height: 8vw; } } /*# sourcemappingurl=index.css.map */