이벤트프로모션 업로드

2024-10-23 15:19:12 +09:00
parent 0826aca1d4
commit 3abc5fee89
6 changed files with 447 additions and 0 deletions
--- a/assets/css/kia/event/event-nba-lunching-promotion.css
+++ b/assets/css/kia/event/event-nba-lunching-promotion.css
@@ -0,0 +1,144 @@
+@font-face {
+    font-family: 'kiabold';
+    src: url('/kr/assets/font/kia/event/KiaSignatureFixOTFBold.otf') format('truetype');
+}
+@font-face {
+    font-family: 'kiaregular';
+    src: url('/kr/assets/font/kia/event/KiaSignatureFixOTFRegular.otf') format('truetype');
+}
+
+img {
+    max-width: 100%;
+}
+
+.top{
+    position: static;
+    top: 140px;
+    left: 300px;
+}
+
+#video{
+    display: block;
+    position: absolute;
+    top: 46.5%;
+    left: 29%;
+    width: 610px;
+    transform: translateX(-50%);
+    transition: top .2s ease;
+}
+
+.video{
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 16/9;
+}
+
+#head{
+    text-align: center;
+    font-family: 'kiabold';
+    font-size: 22pt;
+    margin-top: 0;
+    margin-bottom: 15px
+}
+
+#code {
+    display: block;
+    position: relative;
+    margin-top: -30px;
+}
+
+#inform {
+    display: block;
+    position: relative;
+    margin-top: -50px;
+}
+
+@media only screen and (max-width: 1240px) {
+    #video {
+        top: 47.2%;
+        left: 31%;
+    }
+}
+
+@media only screen and (max-width: 1215px) {
+    #video {
+        left: 67px;
+        transform: none;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    #video {
+        top: 47.1%;
+    }
+}
+
+@media only screen and (max-width: 740px) {
+     #video {
+         top: 47%;
+         left: 7.5%;
+         width: 85%;
+     }
+}
+
+@media only screen and (max-width: 640px) {
+    #code {
+        margin-top: -20px;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    #video {
+        top: 47%;
+        left: 8.3%;
+        width:83%;
+    }
+}
+
+@media only screen and (max-width: 580px) {
+    #video {
+        top: 46.5%;
+    }
+    #code {
+        margin-top: -15px;
+    }
+    #inform {
+        margin-top: -40px;
+    }
+}
+
+@media only screen and (max-width: 520px) {
+    #video {
+        top: 46.7%;
+        left: 8.5%;
+        width:82%;
+    }
+    #inform {
+        margin-top: -30px;
+    }
+}
+
+@media only screen and (max-width: 457px) {
+    #video {
+        top: 47%;
+        left: 8.5%;
+        width:82%;
+    }
+    #code {
+        margin-top: -10px;
+    }
+}
+
+@media only screen and (max-width: 410px) {
+    #code {
+        margin-top: -5px;
+    }
+}
+
+@media only screen and (max-width: 318px) {
+    #video {
+        top: 46.7%;
+        left: 10.4%;
+        width:80%;
+    }
+}