body, ul, li, h1, h2, address, p, ul, li {margin: 0; padding: 0; box-sizing: border-box;}
body {background: radial-gradient(circle, #576373 0%, #3e4650 100%); height: 100vh; overflow: hidden;}

body {font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-variation-settings: "wdth" 100;}

li {list-style: none;}
b {color: #ff0;}
a {color: #ff0; text-decoration: none;}
a:hover {text-decoration: none; color: #ff0;}
button {cursor: pointer; border: none; border-radius: 30px; padding: 10px 15px; text-transform: uppercase; font-weight: bold; background-color: rgba(255, 255, 255, 0.5);}
button:hover {background-color: rgba(255, 255, 255, 1);}
input:focus {outline: none;}

.blind {display: none;}
.no-select {user-select: none; -webkit-user-select: none;-moz-user-select: none;}
.pointColor {color: #ff3000;}
.button1 {border: 2px solid white; color: white; font-size: 15px; width: fit-content; line-height: 25px; padding: 4px 15px; border-radius: 50px; margin: 0 auto; margin-top: 50px; background-color: rgba(0, 0, 0, 0.5); transition: all .8s;}
.button1:hover {background-color: rgba(0, 0, 0, 0.7);}

#logo {z-index: 98;}
#mainMenu {z-index: 100;}

/* #logo {border: 2px solid red;} */
#logo {background-image: url("../images/zlogo.png"); background-size: 50px; background-repeat: no-repeat; padding-left: 50px; background-size: contain;}
#logo a {font-size: 35px; color: white; cursor: pointer; display: block; margin-top: 0px;}
#logo:hover a {color: #ff0;}

#mainMenu {position: fixed; display: flex; justify-content: space-between;  box-sizing: border-box; width: 100%; transition: transform 0.8s ease-in-out; padding: 20px 25px; background-color: rgba(0, 0, 0, 1);}
#mainMenu {box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);} /* x, y, blur, color */
/* #mainMenu.active {transform: translateX(-230px);} */
#mainMenu ul {display: flex; align-items: center;}
#mainMenu ul li {margin: 0 20px; position: relative;}
#mainMenu ul li a:hover::before {content: ""; position: absolute; bottom: -10px; width: 0%; border-bottom: 2px solid #ff0; transition: all 0.5s; animation: borderAni 0.8s forwards;}
#mainMenu ul a {color: white;}
#mainMenu ul li a:hover {color: #ff0;}

footer {z-index: 300;}
footer {border-top: 8px solid #005379; box-sizing: border-box; padding: 50px 60px; display: flex; justify-content: space-between; height: fit-content; background-color: white; font-size: 14px;}

footer a, footer b {color: black;}
footer a:hover {color: #f37321; position: relative;}
footer ul {display: flex; margin-bottom: 40px;}
footer h2 {font-size: 20px; margin-right: 40px; margin-top: -3px; color: #666;}
footer #content {display: flex;}
footer #content ul {margin-bottom: 40px; border-bottom: 1px solid #ccc; padding-bottom: 30px;}
footer #content ul li {font-size: 16px; margin-right: 15px; font-weight: bold;}
footer #content ul li a {padding-bottom: 6px;}
footer #content ul #model1 a {border-bottom: 2px solid #f37321;}
footer #content ul a:hover::before {content: ""; position: absolute; bottom: -2px; width: 0%; border-bottom: 2px solid #f37321; transition: all 0.5s; animation: borderAni 0.8s forwards;}
@keyframes borderAni {from {width: 0;} to {width: 100%;}}

footer #content address {font-style: normal;}
footer #content p {margin: 5px 0;}
footer #content #mail {margin-bottom: 20px;}
footer #content .copyright {margin-top: 40px;}
footer #other li {margin-left: 15px;}
footer #other ul {margin-bottom: 10px;}
footer #other #sns {display: block; text-align: right;}
footer #other #sns li {display: inline-block;}
footer #other #sns li a {display: block; width: 30px; height: 30px; font-size: 0;}
footer #other #sns #facebook a {background-image: url("../images/facebook1.png"); background-size: 30px;}
footer #other #sns #youtube a {background-image: url("../images/youtube1.png"); background-size: 30px;}
footer #other #sns #facebook a:hover {background-image: url("../images/facebook2.png");}
footer #other #sns #youtube a:hover  {background-image: url("../images/youtube2.png");}

@media screen and (max-width: 1920px) {

}

@media screen and (max-width: 1024px) {
    .desktop {display: none;}

    #logo {height: 40px;}
    #logo a {font-size: 20px; margin-top: 7px;}

    #mainMenu {padding: 10px 15px;}
    #mainMenu ul {display: none;}

    footer {display: block; padding: 30px; line-height: 180%;}
    footer #content {display: block;}
    footer #content ul {margin-bottom: 15px; border-bottom: none;}
    footer #other ul {display: block;}
    footer #other li {margin-left: 0px;}
    footer #other #sns li {display: block;}
    footer h2 {margin-bottom: 20px;}
    @keyframes submitView {from {} to {opacity: 1; bottom: 100px;}}
}

@media screen and (max-width: 1024px) {
    
}

@media screen and (max-width: 768px) {
    footer {bottom: -420px;}
}

@media screen and (max-width: 425px) {
  
}