@charset "utf-8"; html, body { background-color: white; } .wrap { position:relative; max-width: 1920px; margin: 0 auto; min-width:280px } .wrap .center-wrap { position:relative; max-width: 1720px; margin: 0 auto; } .wrap .center-wrap2 { position:relative; max-width: 1520px; margin: 0 auto; } .wrap .mainMenuWrap { position:relative; max-width:1520px; margin:50px auto } .wrap .mainLogo { position:absolute; top:50%; transform:translateY(-50%) } .wrap .mainMenu { float:right; width:35%; text-align:right } .wrap .mainMenu .main-item.main-item-3 span { color:#ea5406 } .wrap .contentsWrap { } .flex.work { justify-content:flex-start; gap:40px 20px } .flex.work > li { flex:1 1 400px } .flex.work > li .work-img { position:relative; width:100%; aspect-ratio: 4 / 3; z-index:0; background:#000; overflow:hidden } .flex.work > li .work-img > img { width:100%; height:100%; object-fit:cover; opacity:1; transition: all 0.3s } .flex.work > li .con-ti { margin-top:15px; font-weight:500 } .flex.work > li a { color:#222 } .flex.work > li a:hover .con-ti { color:#999 } .flex.work > li a:hover .work-img > img { transform: scale(1.1); transition-duration: .6s; opacity:0.7; } .wrap > .bottom-wrap > .copyright { margin-top:80px; padding:80px 20px; color:#ea5406; text-align:center ; border-top:1px solid #ddd;} .wrap > .bottom-wrap > .copyright span + span { margin-left:15px } .wrap > .bottom-wrap > .copyright a { color:#ea5406 } .wrap .subBannerWrap { position: relative; } .wrap .subBanner { width: 1920px; margin: 0 auto; position: relative; left: 50%; margin-left: -960px; z-index: 1; } .wrap .contentsSubWrap { min-height: 450px; } .wrap .contentsSub { } .ez-popup-close { background:#000 !important } #mmenu-icon { display: none; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: #7d8289; } .label { font-weight: 500; } @media only screen and (max-width: 1720px) { .wrap .center-wrap { padding-left:20px; padding-right:20px } .wrap .mainMenuWrap { margin:20px 0; padding: 0 20px; } } @media only screen and (max-width: 1024px) { .wrap .mainLogo { position:relative; top:0; transform:translateY(0) } #mainMenu { display: none !important; } #mmenu-icon { position:absolute; top:10px; right:15px; display:block; } .hamburger { padding:0 } .hamburger-box { width:27px; height:20px } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width:27px; height:3px; background:#000 !important } .hamburger-inner::before { top:-7px } .hamburger-inner::after { bottom:-7px } .mmenu-container { background:#ea5406 !important } .nav-title-wrap { height:65px; border-bottom:0 !important } .nav-title { display:none } nav.mobileMenu { padding: 0 15px } nav.mobileMenu .nav-item-wrapper { padding:0 !important } nav.mobileMenu .nav-item-wrapper a { padding:15px !important; color:#fff !important; font-size:18px; font-weight:600; transition: all .25s ease } nav.mobileMenu .nav-item-wrapper a:hover { color:#000 !important } nav.mobileMenu .menu-sub2 { padding:0 !important; background-color:transparent !important } nav.mobileMenu .menu-sub2 .nav-item-wrapper a { padding:10px 20px !important; font-size:16px !important; font-weight:500; } .wrap > .bottom-wrap > .copyright { padding:50px 0 } } @media only screen and (max-width: 960px) { } @media only screen and (max-width: 768px) { } @media only screen and (max-width:540px) { .wrap .mainLogo img { width:155px } .wrap > .bottom-wrap > .copyright span { display:block } .wrap > .bottom-wrap > .copyright span + span { margin:0 } } body { padding-top: 0; } body.menu-fixed { padding-top: 100px; } body.menu-fixed .mainMenuWrap { position: fixed; top: 0; margin-top: 0; width: 100%; max-width: 1920px; background-color: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(3px); box-shadow: 0px 1px 5px gray; z-index: 1039; } body.menu-fixed .mainMenuWrap .ezMenuContainer, body.menu-fixed .mainMenuWrap .mainMenu { background: none; } body.menu-fixed .mainMenuWrap .ezMenuContainer > ul > li > a { color: #333; } body.menu-fixed .ez-subMenuBG { position: fixed !important; } @media only screen and (min-width: 1500px) { body.menu-fixed .mainMenuWrap { padding: 0 calc(50% - 750px); } } @media only screen and (min-width: 1920px) { body.menu-fixed .mainMenuWrap { padding: 0 210px; } }