@charset "utf-8"; html, body { background-color: white; } .wrap { max-width: 1920px; margin: 0 auto; overflow: hidden; min-width: 320px; } .wrap .contentsQuick { display:none; position:fixed; bottom:0; z-index:9; width:100%; background:#4D3827 } .quick > li { width:50%; text-align:center } .quick > li a { padding:10px; color:#fff } .quick > li a img { margin-right:10px } .quick > li + li { border-left:1px solid #fff } .wrap .topWrap { position:absolute; width:100%; z-index:9999 } .wrap .mainMenuWrap { position:relative; display:flex; align-items:center; max-width:1660px; margin:0 auto; padding:30px } .wrap .mainMenu { position:absolute; right:125px } .wrap .top { position:absolute; right:0 } .wrap .bannerWrap { height: auto; position: relative; overflow: hidden; } .wrap .mainBanner { width: 1920px; position: relative; z-index: 0; } .wrap .bannerWrap { height: auto; position: relative; overflow: hidden; } .slogan { position:absolute; left:50%; top:50%; max-width:1076px; text-align:center; transform:translate(-50%, -50%) } .slogan-line { position:absolute; top:0; left:50%; display:flex; justify-content:space-between; width:100%; max-width:960px; height:100vh; transform:translateX(-50%) } .slogan-line > li { border-left:1px solid #adadad4d } .wrapper { position: relative; width: 100%; overflow: hidden; } .video-wrapper { position: relative; overflow: hidden; max-width: 1920px; height:100vh; margin: 0 auto; z-index:-99; } .video-bg { position:absolute; left:0; top:0; z-index:9; width:100%; height:100vh; background-color:rgba(0,0,0,0.6) } #video { position: relative; background: transparent; background-position: top center; background-repeat: no-repeat; bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; } .wrap .contentsWrap { position:relative } .wrap .contentAbout { } .about.flex { flex:1 1 auto; justify-content:normal; align-items:center; gap:70px } .about-img { width:522px } .about-info { max-width:100% } .wrap .contentsPeople .con-ti { padding:0 25% } .wrap .contentsPeople .btn-wrap { padding:500px 0 90px 0 } .wrap .contentHistory { } .counter.flex { justify-content:center; align-items:center; gap:100px } .counter.flex div { width:300px; height:300px; color:#fff; border:10px solid #ad9166; border-radius:50% } .counter.flex div p { color:#ad9166 } .counter.flex div h1 { font-size:46px; font-weight:700 } .flowing-text { position: relative; width: 100%; max-width:100%; height: auto; font-size:280px; font-weight:900; line-height:1em; letter-spacing:15px; color:#AD91663D; white-space: nowrap; overflow: hidden; animation: flowText 60s linear infinite; user-select: none; } @keyframes flowText { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .certi-wrap { padding:50px 0; background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 100%), url("/res/img/bg-certi.png") no-repeat top center } .certi.flex { margin:5% 0 3% 0; gap:30px } .certi.flex > li { width:calc((100% - 210px) / 8) } .wrap .contentsWork { display:flex; gap:20px } .work.flex { gap:20px; justify-content:space-between; align-items:center; } .work.flex .work-info { width:330px } .work.flex .work-list { justify-content:space-between; align-items:center; align-self:strech; gap:27px 45px; width:calc(100% - 350px) } .work.flex .work-list div { flex:1 1 auto; max-width:100%; } .work.flex .work-list div a { display:block; margin:30px 0; padding:25%; text-align:center; border:1px solid rgba(255,255,255,0.5); transition: all .25s ease} .work.flex .work-list div a img { width:72px } .work.flex .work-list div a p { color:#ad9166 } .work.flex .work-list div a h1 { font-size:24px; color:#fff } .work.flex .work-list div a .con-b { margin:15px 0 } .work.flex .work-list div a .con-b span { background:#fff } .work.flex .work-list div a:hover { background:#ad9166 } .work.flex .work-list div a:hover p { color:#fff } .work.flex .work-list div:nth-child(1) a, .work.flex .work-list div:nth-child(2) a { padding:10% } .wrap .contentsVideo .video-wrapper { z-index:9 } .wrap .contentsVideo iframe { z-index: 1; top: 0; left: 0; position: absolute; width: 100%; height: 100%; } .wrap .contentsOffice { } .office.flex { flex-direction:column; align-items:flex-end; gap:20px } .office.flex div { width:50%; padding:40px; text-align:left; background:#ededed; border-radius:10px } .office.flex div h1 { font-size:24px; font-weight:700 } .office.flex div strong { font-weight:900 !important } .office.flex div span + span { margin-left:25px } .wrap .contentsCenter { background:#ad9166 } .wrap .contentsCenter .flex { justify-content:space-around; align-items:center } .wrap .contentsCenter .flex2 { width:49%; gap:10px; padding:0 7% } .wrap > .bottom-wrap { padding-top:50px; padding-bottom:150px; background:#333 } .wrap > .bottom-wrap > .bottom { } .lst.copy-menu { margin-bottom:15px; text-align:right } .lst.copy-menu > li + li { margin-left:35px } .lst.copy-menu > li a { font-size:16px; color:#fff } .wrap .copyright { padding-top:35px; border-top:1px solid #999 } .wrap .copyright .flex div { flex:1 1 calc(100% / 3); font-size:14px; color:#aeaeae } .wrap .copyright .flex div .con-b { margin:15px 0 } .wrap .copyright .flex div:nth-child(3) { margin-top:55px } .wrap .copyright .flex div a { color:#aeaeae } .wrap .subBannerWrap { position: relative; } .wrap .subBanner { position: relative; left: 50%; width: 1920px; height:375px; margin: 0 auto; margin-left: -960px; background:url(/res/img/sub.jpg) no-repeat center center; background-size:cover; z-index: 1; } .sub-top-ti { position:absolute; top:55%; width:100%; text-align:center; transform:translateY(-55%); z-index:9; } .sub-top-ti h1 { margin-bottom:50px; font-size:36px; font-weight:700; color:#fff } .sub-top-ti p img { width:300px } .wrap .contentsSubWrap { min-height: 450px; } .wrap .contentsSub { } #mmenu-icon { display: none; } .nav-title-wrap { height:65px; border-bottom:0 !important } .nav-title { display:none } .hamburger { padding:0 } .hamburger-box { width:20px; height:17px } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width:20px; height:1px; background:#fff !important } .hamburger-inner::before { top:-7px } .hamburger-inner::after { bottom:-7px; right:0; width:12px } nav.mobileMenu { padding: 0 15px } nav.mobileMenu .nav-item-wrapper { padding:0 !important } nav.mobileMenu .nav-item-wrapper a { padding:10px 15px !important; color:#000 !important; font-size:18px; font-weight:600; text-align:center; border-bottom:0 } nav.mobileMenu .nav-item-wrapper a:hover { background-color:none } nav.mobileMenu .has-children.opened > .nav-item-wrapper > span a { color:#fff !important } nav.mobileMenu .has-children .nav-next { display:none } 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; } .mmenu-container { background:#ad9166 !important } .mmenu-container .con-b span { background:#fff } .nav-close { top:10px !important; right:10px !important } .nav-title-wrap .nav-close-button:before, .nav-title-wrap .nav-close-button:after { border-top:1px solid #fff !important } .nav-title-wrap .nav-close-button:after { top:24px !important } .wrap.yuln-center .mainMenuWrap { max-width:100% } .wrap.yuln-center .mainLogo img { width:255px } .wrap.yuln-center #mmenu-icon { display:block !important } .wrap.yuln-center .mainMenu { position:fixed; top:0; right:0; width:65px; height:100%; background:#2B2B2B; z-index:9999 } .wrap.yuln-center .mmenu-container { padding:20px; background:#2B2B2B !important } .wrap.yuln-center nav.mobileMenu ul li { float:left; width:calc(100% / 2) } .wrap.yuln-center nav.mobileMenu .nav-item-wrapper a { padding:5px !important } .wrap.yuln-center .hamburger-box { top:35px; left:50%; transform:translateX(-50%) } .wrap.yuln-center .mmenu-container > .flex { margin-bottom:30px; padding:0 20px } .wrap.yuln-center .mmenu-container > .flex div { width:calc(100% / 2) } .wrap.yuln-center .mmenu-container > .flex dt { font-weight:800; color:#fff } .wrap.yuln-center .mmenu-container > .flex .lst > li a { display:inline-block; font-size:15px; color:#fff } .wrap.yuln-center .contents-wrap { padding:30px 20px; border-top:1px solid #fff } .wrap.yuln-center .contents-wrap .con-ti { padding-left:45px; font-size:25px; font-weight:800; line-height:1.2em; background-position:0 center; background-repeat:no-repeat } .wrap.yuln-center .contents-wrap .con-ti.tel { background-image:url("/res/img/center/ico-phone.png") } .wrap.yuln-center .contents-wrap .con-ti.visit { background-image:url("/res/img/center/ico-visit.png") } .wrap.yuln-center .contents-wrap .con-ti a { display:inline-block; color:#fff } .wrap.yuln-center .contents-wrap .flex.center-frm { gap:20px } .wrap.yuln-center .contents-wrap .lst > li { margin:5px 0; padding-left:35px; display:block; background-position:0 center; background-repeat:no-repeat } .wrap.yuln-center .contents-wrap .lst > li:nth-child(1) { background-image:url("/res/img/center/ico-kakao.png") } .wrap.yuln-center .contents-wrap .lst > li:nth-child(2) { background-image:url("/res/img/center/ico-naver.png") } .wrap.yuln-center .contents-wrap .lst > li:nth-child(3) { background-image:url("/res/img/center/ico-location.png") } .wrap.yuln-center .contents-wrap .lst > li a { font-size:15px; color:#fff } .wrap.yuln-center .contentsCase { padding-top:100px } .label { font-weight: 500; } .ez-popup-close { background-color:#666 !important } @media only screen and (max-width: 1600px) { .wrap .bannerWrap { overflow: visible; } .wrap .mainBanner { width: 120vw; height: auto; margin: 0 auto; position: relative; left: 50%; margin-left: -60vw; z-index: 99; } } @media only screen and (max-width: 1140px) { } @media only screen and (max-width: 1024px) { .wrap .contentsQuick { display:block } .wrap .top { display:none } .wrap .mainMenuWrap { justify-content:space-between; padding:20px } .wrap .mainMenu { top:calc(50% - 8.5px); right:20px } .wrap .mainLogo img { width:120px } #mmenu-icon { display: inline-block; } #mainMenu { display: none !important; } #subMenuMobile { display: block !important; } #subMenu { display: none !important; } .sub-top-ti h1 { font-size:30px } .sub-top-ti p img { width:180px } .about-info { width:100% } .counter.flex { justify-content:center; align-items:center; gap:25px } .counter.flex div { width:300px; height:300px; color:#fff; border:10px solid #ad9166; border-radius:50% } .flowing-text { font-size:20vw } .certi.flex { gap:10px } .certi.flex > li { width:calc((100% - 70px) / 8) } .work.flex .work-info { width:100% } .work.flex .work-list { width:100% } .work.flex .work-list div a h1 { font-size:20px } .office.flex div { width:100% } .wrap .contentsCenter .flex { text-align:center } .wrap .contentsCenter .flex2 { width:100%; margin-top:50px; padding:0 } .wrap > .bottom-wrap { padding-top:25px; padding-bottom:75px } .wrap.yuln-center .mainMenu { height:50px; background:transparent } } @media only screen and (max-width: 768px) { .wrap .subBanner { height:225px } .slogan-line { display:none } .con-sti { font-size:18px } .con-ti { font-size:22px } .con-bg2 { background-position: bottom center; background-size:600px auto } .wrap .contentsPeople .con-ti { padding:0 30px } .wrap .contentsPeople .btn-wrap { padding:0 0 250px 0 } .office.flex div { padding:20px } .office.flex div h1 { font-size:20px } .office.flex div p span { display:block } .office.flex div span + span { margin-left:0 } .wrap > .bottom-wrap { padding-top:25px; padding-bottom:50px } .wrap .copyright .flex div { flex:1 1 100% } .wrap .copyright .flex div:nth-child(2) { margin-top:20px } .wrap .copyright .flex div:nth-child(3) { margin-top:20px } .wrap .copyright .flex div .con-b { margin:0 0 10px 0; line-height:0.1em } .lst.copy-menu { text-align:center } .lst.copy-menu > li a { font-size:14px } } @media only screen and (max-width: 540px) { .sub-top-ti { top:65%; transform:translateY(-65%) } .sub-top-ti h1 { margin-bottom:15px; font-size:22px } .counter.flex { justify-content:center; align-items:center; gap:25px } .counter.flex div { width:100%; height:auto; padding:10px 20px; border:none; border-radius:0; background:linear-gradient(180deg, #000000 23%, #FFFFFF00 91%) } .counter.flex .flex2 { justify-content:space-between; flex-direction:row } .counter.flex .flex2 p { color:#fff; } .counter.flex .flex2 h1 { font-size:37px } .work.flex .work-list { gap:10px } .work.flex .work-list div { display:block; flex-direction:row; text-align:center } .work.flex .work-list div a { margin:10px 0 } .work.flex .work-list div a h1 { font-size:16px } .work.flex .work-list div a img { width:30px } .work.flex .work-list div .con-b { display:none } .wrap .contentsCenter .flex .center-info { max-width:270px } } 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; padding:20px important; background-color: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(3px); z-index: 1039; } body.menu-fixed .mainMenuWrap .ezMenuContainer, body.menu-fixed .mainMenuWrap .mainMenu { background: none; } body.menu-fixed .mainMenuWrap .ezMenuContainer > ul > li > a { color: #fff; } body.menu-fixed .ez-subMenuBG { position: fixed !important; } @media only screen and (min-width: 1500px) { body.menu-fixed .mainMenuWrap { padding: 30px calc(50% - 750px); } }