body, nav, main, footer, ul, li, h1, h2, address, p, ul, li, section, div, video, span, button, a, figure, img, iframe {margin: 0; padding: 0; box-sizing: border-box;} body {font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-variation-settings: "wdth" 100; font-size: 18px; line-height: 1.8;} 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;} iframe {border: none;} h1, h2 {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: bold;} ul {margin-bottom: 20px;} img {width: 100%;} p {margin-top: 50px; margin-bottom: 50px;} hr.inner { border-color: rgba(0, 0, 0, 0.1)} hr.inner {padding: 0 !important;} hr.padding {margin: 60px 0;} figure figcaption {color: #666; text-align: end; font-size: 15px;} figure figcaption::before {content: "- ";} figure figcaption::after {content: " -";} .material-symbols-rounded {font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;} .imgSet {margin-top: 50px; margin-bottom: 50px;} .imgSet figure div {margin-bottom: 30px; border: 1px solid #aaa; overflow: hidden;} .imgSet figure img {display: block; transition: all 1s;} .imgSet figure:hover img {transform: scale(1.2);} .imgSet2 {margin-top: 50px; margin-bottom: 50px;} #imgSet1 {display: flex;} #imgSet2 {display: flex; gap: 20px; margin: 30px 0; } #imgSet2 div {border: 1px solid #aaa; overflow: hidden; } #imgSet2 div img {display: block; height:100%; width: fit-content; transition: all 1s; width: 100%;} #imgSet2 div:hover img {transform: scale(1.2);} #imgSet3 {display: flex; gap: 20px; margin-top: 50px;} #imgSet3>div:nth-child(1) {flex: 1.2;} #imgSet3>div {flex: 1;} .set1 {background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/pts_1.png"); background-position-x: right; } .set1 {background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/pts_2.png"); background-position-x: left; } .setBg {background-repeat: no-repeat; background-size: cover;} .flex {display: flex;} .margin_bottom30 {margin-bottom: 30px !important;} .circle {position: fixed; width: 320px; height: 320px; border-radius: 50%; transform-origin: center; transform: scale(0) rotate(45deg); transition: transform 1.6s cubic-bezier(0.85, 0, 0.15, 1);} #circle1 {top: -180px; left: -180px; background: #082cbd; z-index: 401;} #circle2 {bottom: -180px; right: -180px; background: rgb(52, 127, 173); z-index: 402; transition-delay: 0.3s;} .scale {transform: scale(35) rotate(45deg);} .opacity {animation: bgHide 0.5s forwards;} @keyframes bgHide {from {} to {opacity: 0; display: none;}} #main {opacity: 1; z-index: 3; position: relative;} #main.ready {opacity: 1; transform: translateY(0);} .content h2 {margin-bottom: 50px; position: relative; padding-left: 20px; font-size: 40px; line-height: 1.2; color: black;} .content h2>span {color: #777;} .content h2::before {content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 100%; background-color: #ffde2f;} /* .content h2::after {content: "."; color: #ff3000;} */ .content #mainVisual h2::before {display: none;} .content #mainVisual h2::after {display: none;} .content h3 {margin-top: 100px; margin-bottom: 50px; position: relative; padding-left: 30px;} .content h3::before {content: ""; width: 15px; height: 5px; background-color: #ff3000; position: absolute; top: 15px; left: 0;} dl.dlSet {border-top: 4px solid black; border-bottom: 1px solid #333;} dl.dlSet dt {border-top: 1px solid #333; padding: 20px 30px; font-weight: bold; font-size: 20px; position: relative;} dl.dlSet dt::before {content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: #999; position: absolute; top: 35px; left: 12px;} /* dl.dlSet dt::after {content: ""; width: 0; height: 0; position: absolute; top: 35px; right: 12px; border-top: 10px solid #666; border-right: 7px solid transparent; border-bottom: 10px solid transparent; border-left: 7px solid transparent;} */ dl.dlSet dt.active::after {content: ""; width: 0; height: 0; position: absolute; top: 35px; right: 12px; border-top: 10px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #000; border-left: 7px solid transparent;} dl.dlSet dd {border-bottom: 1px solid #333; margin: 0; overflow: hidden; padding: 0px 20px 55px 50px;} ul.ulSet li {padding-top: 20px; list-style-type: square; margin-left: 30px;} ol>li {position: relative;} .content ol li h3 {margin-bottom: 0; margin-top: 0; padding-left: 40px;} ol>li h3 span {position: absolute; left: -8px; top: 3px; display: block; width: 30px; height: 30px; border-radius: 50%; background-color: #ff3000; color: white; text-align: center; line-height: 30px;} ol>li h3::before {display: none;} ol>li h3+p {margin-top: 10px; padding-left: 40px;} ol ul {padding-left: 60px; margin-bottom: 50px;} ol ul li {list-style:circle} .desktop {display: none;} .view_768 {display: none;} .view_1024{display: none;} .view_1440 {display: none;} .blind {display: none;} .select a {color: #ff0 !important;} .select a::before {content: "● ";} .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);} .inner {padding: 50px 40px;} .imgSet figcaption {text-align: center;} .bgBack {background-color: #eee;} .bgBack2 {background-color: #ccc;} .montserrat {font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600;} .button_important {background-color: black; color: white; padding: 10px 20px 10px 45px; display: block; margin: 50px auto; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); text-transform: uppercase; position: relative;} .button_important:hover {background-color: #ff3000; color: white;} .button_important span {position: absolute; margin-top: -12px; top:50%; left: 15px;} .selfCheckForm {border: 10px solid #aaaa; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); display: block; margin-bottom: 20px;} .buttonSet>div {display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 0;} .buttonSet a {display: block; margin: 0; text-align: center;} .buttonSet.scroll {position: fixed; background-color: black; width: 100%; bottom: 0; left: 0; z-index: 1; padding: 20px 0;} /* z-index ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #mainMenu #nav .subMenu {z-index: 100;} #topMenu {z-index: 4;} footer {z-index: 200;} #flag {z-index: 201; display: none;} #logo {z-index: 300;} #mainMenu {z-index: 303;} .subMenu {z-index: 305;} #menu {z-index: 306;} #modelQuick {z-index: 500;} #nav {z-index: 600;} /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #mainMenu {font-size: 16px; position: fixed; top: 0; display: flex; justify-content: space-between; width: 100%; transition: transform 0.8s ease-in-out; background-color: rgba(0, 0, 0, 1); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); transition: all 1.5s;} #logo {padding: 18px 25px 18px 58px; background-image: url("../images/zlogo.png"); background-size: 35px; background-repeat: no-repeat; background-position: 15px;} #logo a {font-size: 20px; color: white; cursor: pointer; display: block; width: 100%;} #logo:hover a {color: #ff0;} #mainMenu #menu, #menu span {display: inline-block; transition: all .4s; font-size: 0; background-color: transparent;} #mainMenu #menu {position: relative; width: 35px; height: 26px; top: 22px; right: 20px;} #mainMenu #menu span {position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 4px;} #mainMenu.active #menu span {background-color: black;} #mainMenu #menu.active span {background-color: white;} #mainMenu #menu span:nth-of-type(1) {top: 0;} #mainMenu #menu span:nth-of-type(2) {top: 12px;} #mainMenu #menu span:nth-of-type(3) {bottom: 0;} #mainMenu #menu.active span:nth-of-type(1) {-webkit-transform: translateY(12px) rotate(-45deg); transform: translateY(12px) rotate(-45deg);} #mainMenu #menu.active span:nth-of-type(2) {opacity: 0;} #mainMenu #menu.active span:nth-of-type(3) {-webkit-transform: translateY(-12px) rotate(45deg); transform: translateY(-12px) rotate(45deg);} #mainMenu.active {background-color: white;} #mainMenu.active #logo a {color: black;} #mainMenu #nav {position: fixed; top: 0; right: -350px; background-color: black; height: 100vh; padding: 90px 0px 25px; width: 350px; transition: all 1s; overflow-y: auto;} #mainMenu #nav.active {display: block; right: 0;} #mainMenu #nav a {color: white;} #mainMenu #nav>li a {display: block; padding: 20px 25px; transition: all 1s;} #mainMenu #nav>li>a {border-bottom: 1px solid #aaa;} #mainMenu #nav>li:hover>a {background-color: white; color: black;} #mainMenu #nav .subMenu {display: none;} #mainMenu #nav .subMenu.active {display: block;} #mainMenu #nav .subMenu>li a{padding-left: 60px;} #mainMenu #nav .subMenu>li:hover a {background-color: #aaa; color: black;} /* topMenu */ #topMenu {display: none;} /* mainVisual ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* #main #mainVisual {height: 50vh; font-size: 30px; color: white; display: flex; align-items: center; justify-content: center;} */ #main #mainVisual {height: 60vh; color: white; display: flex; align-items: center; justify-content: center; position: relative;} /* #main #mainVisual::before {content: ""; border: 3px solid red; position: absolute; width: 100%; height: 100%; background: linear-gradient(270deg, #0f43ac, #7873f5, #0bbac7, #0f43ac); background-size: 800% 800%;} */ #main #mainVisual .inner2 {background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 70px 30px 30px;} #main #mainVisual h2, #main #mainVisual p {margin: 0; padding: 0; color: white; line-height: 1.2; text-align: center; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);} #main #mainVisual h2 {font-size: 35px; margin-bottom: 10px;} #main #mainVisual p {font-size: 16px; margin-bottom: 20px;} #main #mainVisual p:nth-child(3) {font-size: 20px;} #main #mainVisual.motion {animation: gradientMotion 5s ease-in-out infinite;} #main #mainVisual.contactUS h2, #main #mainVisual.contactUS p {display: none;} @keyframes gradientMotion {0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }} /* popUp ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .popup-toggle {position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #666; color: white;} .popup-toggle {display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; } .popup-toggle {z-index: 1001; transition: all 0.3s;} .popup-toggle:hover {background-color: black;} .popup-toggle .icon, .popup-toggle .close {position: absolute; transition: opacity 0.3s ease, transform 0.3s ease;} .popup-toggle .icon {opacity: 1; transform: scale(1); font-size: 14px; font-weight: bold; padding-top: 16px; position: relative;} .popup-toggle .icon>span:nth-child(1) {position: absolute; top: 0; left: 2px;} .popup-toggle .close {opacity: 0;transform: scale(0); font-size: 30px; font-weight: bold;} .popup-toggle.active .icon {opacity: 0; transform: scale(0);} .popup-toggle.active .close {opacity: 1; transform: scale(1);} .bottom-popup {position: fixed; bottom: -300px; background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); width: 80%;} .bottom-popup {border: 1px solid #ddd; padding: 20px; opacity: 0; transition: bottom 0.4s ease, opacity 0.4s ease; z-index: 1000; margin-left: 10%;} .bottom-popup h2 {margin-bottom: 20px; line-height: 1.2;} .bottom-popup a {text-align: center; display: block; width: 100%; margin: 20px 0; padding: 8px 20px 10px 20px; font-size: 20px; border-color: transparent;} .bottom-popup a:hover {background-color: #e60012; color: white;} .bottom-popup.show {bottom: 100px; opacity: 1;} /* footer ----------------------------------------------------------------------------------------------------------------------------------------------------------------- */ footer {border-top: 8px solid #005379; font-size: 14px; line-height: 180%; background-color: white; transition: all 1s; position: relative;} footer a, footer b {color: black;} footer a:hover {color: #f37321; position: relative;} /* hover */ footer:hover {background-color: black; color: white;} footer:hover h2 {color: #ff0;} footer:hover a {color: #f37321; } footer:hover b {color: white;} footer:hover #modelMenu a {color: #ff0;} footer #content #sns #youtube a {background-image: url("../images/youtube2.png");} footer h2 {font-size: 20px; color: #666; margin-bottom: 20px; background-image: url("../images/zlogo.png"); background-size: 20px; background-repeat: no-repeat; padding-left: 25px;} /* footer #content #modelMenu {display: flex; margin-bottom: 40px; gap: 10px;} */ footer #content #partner {display: flex; gap: 10px; border-bottom: none;} footer #content #partner img {height: 70px; opacity: 0;} footer #content #partner li:nth-child(1) {background-image: url("../images/logo_dmc.png"); background-size: contain; background-repeat: no-repeat;} footer #content #partner li:nth-child(2) {background-image: url("../images/logo_ssii.png"); background-size: contain; background-repeat: no-repeat;} footer:hover #content #partner li:nth-child(1) {background-image: url("../images/logo_dmc_over.png"); background-size: contain; background-repeat: no-repeat;} footer:hover #content #partner li:nth-child(2) {background-image: url("../images/logo_ssii_over.png"); background-size: contain; background-repeat: no-repeat;} footer #content #bottomMenmu {border-top: 1px solid #ccc; padding-top: 30px; border-bottom: none;} footer #content ul {border-bottom: 1px solid #ccc; padding-bottom: 20px;} footer #content ul li {font-size: 16px; margin-right: 15px; font-weight: bold; margin-bottom: 10px;} 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 .copyright {margin-top: 0; margin-bottom: 0; padding-top: 0;} footer #content #sns li {display: inline-block; } footer #content #sns li a {display: block; width: 30px; height: 30px; font-size: 0;} footer #content #sns #facebook a {background-image: url("../images/facebook1.png"); background-size: 30px;} footer #content #sns #youtube a {background-image: url("../images/youtube1.png"); background-size: 30px;} footer #content #sns #facebook a:hover {background-image: url("../images/facebook2.png");} footer #content #sns #youtube a:hover {background-image: url("../images/youtube2.png");} /* contact_btn */ #contact_btn {position: fixed; right: 0px; top: 30%; background-color: black; border: 2px solid white; border-right: none; border-radius: 10px 0 0 10px; width: 40px; padding: 10px 5px; display: none; flex-direction: column; align-items: center; gap: 10px; z-index: 999; box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3)} #contact_btn span {color: #ff3000;} #contact_btn .icon {font-size: 30px; } #contact_btn .dot {font-size: 7px;} #contact_btn .text {writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; line-height: 1.2; text-align: center; color: white; padding-top: 10px; letter-spacing: 3px;} #contact_btn:hover {background-color: #ff3000;} #contact_btn:hover span {color: white;} /* index */ .index #video {background-image: url("../images/drone_2.png"); background-size: cover; background-position: center;} /* about us */ .about #main #text1 {margin: 30px 0 50px; display: grid; grid-template-columns: auto auto; text-align: center;justify-content: center; gap: 20px;} .about #main #text1 li {background-color: black; color: white; border-radius: 50%; text-align: center; width: 160px; height: 160px; padding-top: 40px; justify-content: center; line-height: 1.2; font-size: 18px;} .about #main #text1 li span {display: block; margin-top: 10px; font-size: 50px;} .about #main #mainVisual {background-image: url("../images/about_2.png"); background-size: cover; background-position-y: bottom; background-position-x: -400px;} .about #company {display: none;} /* hfob */ .hfob #main #mainVisual {background-image: url("../images/hfob_3.png"); background-size: cover; background-position: center;} .hfob #imgSet2 div {border: none;} /* drone */ .drone #main #mainVisual {background-image: url("../images/drone_2.png"); background-size: cover; background-position: center;} .drone #drone_youtube {width: 100%; height: 320px;} /* ddPakage */ .ddPakage #imgSet2 div {border: none;} .ddPakage #main #mainVisual {background-image: url("../images/ddPakage_22.png"); background-size: cover; background-position-x: right; background-position-y: bottom;} /* ddPakage */ .self_check #main #mainVisual {background-image: url("../images/Self_Check.JPG"); background-size: cover; background-position-x: center; background-position-y: center;} /* EmergencySparePart */ .EmergencySparePart #main #mainVisual {background-image: url("../images/EmergencySparePart.JPG"); background-size: cover; background-position-x: center; background-position-y: center;} /* olpd */ .olpd #main #mainVisual {background-image: url("../images/OLPD.JPG"); background-size: cover; background-position-x: center; background-position-y: center;} /* pts */ .pts #main #mainVisual {background-image: url("../images/PersonnelTransferSystem.png"); background-size: cover; background-position-x: center; background-position-y: center;} /* spob */ .spob #main #mainVisual {background-image: url("../images/SPOB.png"); background-size: cover; background-position-x: center; background-position-y: center;} /* purchasing */ .purchasing #main #mainVisual {background-image: url("../images/OnlinePurchasing.png"); background-size: cover; background-position-x: center; background-position-y: center;} /* troubleshooting */ .troubleshooting #main #mainVisual {background-image: url("../images/Troubleshooting_1.JPG"); background-size: cover; background-position-x: center; background-position-y: center;} /* model1 */ #modelQuick {position: fixed; top: 47%; left: 20px; width: 85px; height: 85px; animation: floatUpDown .8s ease-in-out infinite;} #modelQuick a strong {display: block; font-size: 21px; line-height: 0.9;} #modelQuick a {display: block; color: white; background-color: #ff3000; height: 100%; border-radius: 50%; font-size: 14px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all .5s; padding-top: 15px; border: 4px solid transparent;} #modelQuick a:hover {background-color: black; border: 4px solid white;} /* purchasingSet */ #purchasingSet {position: relative;} #purchasingSet::before {content: ""; position: absolute; width: 0; height: 0; top: 70px; left: 160px; border-top: 20px solid transparent; border-right: 40px solid #4b5562; border-bottom: 20px solid transparent; border-left: 40px solid transparent; display: none;} #purchasingSet #purchasingImg {position: absolute; width: 455px;; top: 0; left: 230px; display: block; overflow: hidden; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); display: none;} #purchasingSet #purchasingImg img {display: block; transition: all 1s;} .purchasingBtn {background-color: #ff3000; color: white; width: 180px; height: 180px; display: block; text-align: center; border-radius: 50%; line-height: 1.2; padding-top: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);} .purchasingBtn span {display: block; font-size: 16px;} .purchasingBtn span:nth-child(1) {font-size: 30px; font-weight: bold;} .purchasingBtn span:nth-child(4) {font-size: 35px; margin-top: 10px;} .purchasingBtn:hover {background-color: black; color: white;} #purchasingSet #purchasingImg:hover img {transform: scale(1.2);} @keyframes floatUpDown {0% {transform: translateY(0);}50% {transform: translateY(-6px);}100% {transform: translateY(0);}} #blockImg figcaption {text-align: center;} #HOISTINGImg figure {text-align: center;} #HOISTINGImg figure figcaption {text-align: center;} /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 768px) { #main #mainVisual h2 {font-size: 60px;} #main #mainVisual p:nth-child(3) {font-size: 25px;} .view_768 {display: block;} #contact_btn {display: flex;} /* popUp */ .bottom-popup {right: 20px; padding: 40px; width: 460px} .bottom-popup .popup-content {display: flex; justify-content: space-between; gap: 20px;} .bottom-popup .popup-content a {width: auto;} /* about us */ .about #main #text1 {display: flex; justify-content: space-between;} .about #main #mainVisual {background-size: cover;} .drone #drone_youtube {width: 100%; height: 500px;} #blockImg img {width: 600px;} #blockImg {text-align: left;} #blockImg figcaption {text-align: left;} } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 1024px) { hr {margin: 120px 0;} #mainMenu {position: relative;} .desktopFlex {display: flex;} .desktopFlex .item {flex: 1;} .mobile {display: none;} .inner {margin: 0 50px; padding: 50px 0;} .imgSet {display: flex; gap: 20px;} .view_1024 {display: block;} .setBg {background-size: contain;} #purchasingSet::before {display: block;} #purchasingSet #purchasingImg {display: block;} .index #video {padding-top: 70px;} #mainMenu #menu {display: none;} #mainMenu #nav {position: static; height: auto; display: flex; gap:5px; align-items: center; padding: 0; width: auto; background-color: transparent; padding-right: 30px; margin-bottom: 0;} #mainMenu #nav>li>a {border-bottom: none; padding: 10px;} #mainMenu #nav>li {position: relative;} #mainMenu #nav>li a:hover::after {content: ""; position: absolute; left: 0; bottom: 0px; width: 0%; border-bottom: 2px solid #ff0; transition: all 0.5s; animation: borderAni 0.8s forwards;} #mainMenu #nav>li>a.select {background-color: #ff3000; color: white !important; border-radius: 20px; padding: 5px 10px;} #mainMenu #nav li>a:hover {color: #ff3000;} #mainMenu #nav>li>a:hover::after {border-bottom: 2px solid #ff3000;} #mainMenu #nav>li>a.select:hover {color: white; background-color: #ff3000 !important;} #mainMenu #nav>li>a.select:hover::after {border-bottom: none;} #mainMenu #nav>li:hover>a {background-color: transparent;} #mainMenu.active #nav>li> a {color: black;} #mainMenu #nav .subMenu {position: fixed; top: 72px; left: 0; width: 100%; opacity: 0;} #mainMenu #nav .subMenu.active {display: flex; align-items: center; justify-content: space-between; background-color: black; padding: 0 20px; animation: subMenuMotion 0.8s forwards;} #mainMenu #nav .subMenu li {position: relative;} #mainMenu #nav .subMenu li a {padding: 10px 0px;} #mainMenu #nav .subMenu>li:hover a {background-color: transparent; color: #ff0 !important;} #mainMenu #nav>li.active>a {position: relative; color: white !important;} /* #mainMenu #nav>li.active::before {content: ""; background-color: #ff3000; padding: 10px; position: absolute; top: 0; left: -10px; width: 100%; height: 42px; border-radius: 7px 7px 0 0;} */ /* #mainMenu #nav>li.active>a {content: ""; background-color: blue; border-radius: 20px; padding: 5px 10px;} */ #mainMenu #nav>li.active>a {color: #ff3000 !important;} #mainMenu #nav>li.active>a::after {border-bottom: 2px solid #ff3000 !important;} #main #mainVisual {position: relative; height: 600px;} #topMenu {display: block; width: 100%; background-color: white; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; height: 45px; position: absolute; top: 627px;} #topMenu.fixed {position: fixed; top: 0 !important; border-top: none; box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);} #topMenu.fixed #topMain>li {padding: 8px 30px 8px; border-top: transparent;} #topMenu.fixed #topMain>li:hover {border-bottom: 1px solid #aaa; height: auto;} #topMenu a {color: black;} #topMenu a:hover {color: #ff3000;} #topMenu a:hover span {color: #ff3000 !important;} #topMenu .inner {padding-top: 0; padding-bottom: 0;} #topMenu #topMain {display: flex; position: relative; } #topMenu #topMain>li {border: 1px solid #aaa; border-top: none; background-color: white; position: absolute; padding: 8px 30px 7px; font-size: 16px;} #topMenu #topMain>li:hover {background-color: #efefef;} /* #topMenu #topMain>li>a {font-weight: bold;} */ #topMenu #topMain>li a.select {color: #ff3000 !important;} #topMenu #topMain>li:nth-child(1) {width: 150px; padding-left: 50px;} #topMenu #topMain>li:nth-child(2) {width: 250px; left: 149px;} #topMenu #topMain>li:nth-child(3) {width: 350px; left: 398px;} #topMenu #topMain>li>a>span {position: absolute; right: 20px; top: 17px; color: black;} #topMenu #topMain>li:nth-child(1)>a>span {position: absolute; left: 20px; top: 10px;} #topMenu #topMain .topSub {display: none;} #topMenu #topMain .topSub li {padding: 5px 0; position: relative;} #topMenu #topMain .topSub li:nth-child(1) {padding-top: 25px;} #topMenu #topMain .topSub li:nth-child(1)>a:hover span {top: 30px;} #topMenu #topMain .topSub li>a>span {display: none;} #topMenu #topMain .topSub li>a:hover span {display: block; position: absolute; right: -5px; top: 10px;} @keyframes subMenuMotion {from {} to {opacity: 1;}} /* about us */ .about #main #mainVisual {background-position-x: center;} .about #main #text1 {justify-content: end;} .about #main #text1 li {width: 200px; height: 200px; padding-top: 60px;} .about #company {display: block; padding: 0; position: relative; height: 900px; overflow: hidden;} .about #company img {width: 900px; display: block; position: absolute; top: 0; right: -120px;} .about #title {font-family: 'Ubuntu', sans-serif; font-weight: 300; line-height: 0.9; color: transparent; padding: 0; margin-top: -50px; position: absolute; z-index: 1; -webkit-text-stroke: 2px white; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);} .about h2#title::before {display: none;} .about h2#title::after {display: none;} .about #title span {color: transparent;} .about #title span:nth-child(1) {font-size: 80px; padding-right: 200px;} .about #title span:nth-child(2) {font-size: 100px; margin-right: -100px;} .about #title span:nth-child(3) {font-size: 70px; padding-right: 200px;} .about #title span:nth-child(4) {font-size: 100px; } .about #title span b {font-size: 130px; -webkit-text-stroke: 2px white; color: #e60012; text-shadow: 0 0 5px rgba(255, 0, 0, 1);} .drone #drone_youtube {width: 100%; height: 700px;} #HOISTINGImg img {width: 700px;} #Oil .item:nth-child(1) { flex: 0.7;} } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 1440px) { #logo a {font-size: 35px; margin-top: 0px;} .inner {width: 1200px; margin: 0 auto; padding: 100px 0;} footer .inner {padding: 50px 0;} .view_1440 {display: block;} .textFlex {display: flex;} .textFlex .item {flex: 1; gap: 15px;} .index #video {padding-top: 95px;} #topMenu {top: 654px;} #mainMenu #nav {padding-right: 60px; gap: 30px;} #mainMenu #nav .subMenu.active {top: 100px; justify-content: flex-end; gap: 40px;} #mainMenu #nav>li.active::before {height: 55px;} /* about us */ .about #main #text1 li {padding-top: 60px;} .about #main #text1 li {width: 250px; height: 250px;} .about #main #text1 li span {font-size: 90px;} #blockImg img {width: 700px;} #HOISTINGImg img {width: 800px;} footer .inner {position: relative;} footer .copyright {padding-top: 0;} footer #content {display: flex; justify-content:space-between;} footer #content #bottomMenmu {display: flex; gap: 30px; justify-content: space-between; border-top: 0; padding-top: 0;} footer #content ul li {margin-right: 0;} footer #content #sns {text-align: right; border-bottom: 0;} } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 1920px) { .inner {width: 1440px;} .drone #drone_youtube {width: 100%; height: 800px;} } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media screen and (min-width: 1921px) { } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */