144 lines
2.2 KiB
CSS
144 lines
2.2 KiB
CSS
@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%;
|
|
}
|
|
} |