@charset "utf-8"; html, body { background-color: white; } .ez-popup-close { background-color:#222 !important; } .ez_menu_over .wrap .mainMenuWrap { background-color: white; transition: background-color 0s ease; border-bottom: 1px solid #e2e2e2; } .wrap { width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; min-width: 280px; .center-wrap { position: relative; width: 100%; margin: 0 auto; &.w1 { max-width:1720px; } &.w2 { max-width:1600px; } &.w3 { max-width:1200px; } } .bannerWrap { position: relative; height: auto; overflow: hidden; } .mainMenuWrap { position:absolute; width:100%; z-index:9999; .mainLogo { padding:15px 0; } } .mainBanner { width: 1920px; height: 900px; position: relative; left: 50%; transform: translateX(-50%); z-index: 0; } #mainSlider { [slogan-wrap] { position: absolute; z-index: 9993; top: 30%; left: 50%; transform: translate(-50%, -30%); [slogan] { position: absolute; width: 100%; max-width: 100vw; left: 50%; transform: translateX(-50%); div { position: relative; color: white; opacity: 0; margin-left: 10%; &.tit { span { display:inline-block; padding:0 10px; font-size:12px; line-height:30px; color:#0b1c35; background:#f59e0b; border-radius:4px; } p { margin:25px 0; font-size: 60px; line-height:1.2; font-weight:700; color:#fff; strong { color:#f59e0b; } } } &.con { p { color:#e4e6e8; font-weight:400; } ul { display:flex; flex-direction:column; gap:5px; margin-top:15px; > li { padding-left:35px; color:#f2f2f2; font-weight:400; background:url(/res/icon_check.png) no-repeat 0 center; } } } &.link { margin-top:25px; a { display:inline-block; padding-right:30px; color:#f59e0b; font-weight:500; background:url(/res/icon_arrow2.png) no-repeat calc(100% - 10px) center; &:hover { background-position:100% center; } } } } &.active { div { &.tit { animation: ani_mainSlider 6.0s ease-in-out 0.5s forwards; } &.con { animation: ani_mainSlider 6.0s ease-in-out 1.0s forwards; } &.link { animation: ani_mainSlider 6.0s ease-in-out 1.4s forwards; } } } } } } .contentsFix { position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:99999; a { position:relative; display:block; transition:0.2s all; &:nth-child(1) { background:#fee500; } &:nth-child(2) { background:#0b1c35; } &:nth-child(3) { background:#e7161b; } &:nth-child(4) { background:#f59e0b; } .txt { position: absolute; display:none; top:50%; right:60px; padding: 10px 20px 10px 10px; font-size:16px; line-height:100%; font-weight:500; border-radius: 7px 0 0 7px; white-space: nowrap; transform:translateY(-50%); transition:0.3s all; opacity:0; } &:hover { margin-left:-10px; .txt { display:block; opacity:100%; } &:nth-child(1) .txt { background:#fee500; } &:nth-child(2) .txt { color:#32b15b; background:#0b1c35; } &:nth-child(3) .txt { color:#fff; background:#e7161b; } &:nth-child(4) .txt { background:#f59e0b; } } } } .contentsAbout { .about.flex { align-items:stretch; > .items { display:inline-flex; flex-wrap:wrap; flex-direction:column; justify-content:space-between; gap:40px; } } } .contentsBusiness { background:#0b1c35; .business.flex { align-items:stretch; justify-content:flex-start; margin-top:40px; > li { width:calc(100% / 5); & + li { border-left:1px solid rgba(255,255,255,0.1); } &:hover { background:rgba(255,255,255,0.05); } a { display:flex; flex-wrap:wrap; flex-direction:column; align-items:stretch; justify-content:space-between; gap:20px; height:100%; padding:20px 40px; } img { display:inline-block; background:rgba(245,158,11,0.1); border-radius:7px; } .num { margin-top:15px; font-size:14px; color:rgba(255,255,255,0.5); } .con_ti { margin:5px 0 25px 0; color:#fff; } .tag.flex { justify-content:flex-start; gap:10px; span { display:inline-block; padding:0 10px; font-size:14px; line-height:27px; color:#f59e0b; border:1px solid #f59e0b; border-radius:4px; } } } } } .contentsGallery { .ezSliderContainer230915 { margin-top:60px; } .control.flex { gap:10px; button, a { margin:0; padding:0; border:0; background:#ccc; border-radius:50%; &.more { background:#0b1c35; } } } .gallery.flex { padding:0 20px; > li { padding:0 20px; .cate { display:inline-block; margin:25px 0 10px 0; padding:0 10px; font-size:14px; line-height:27px; font-weight:500; color:#444; border:1px solid #ccc; border-radius:4px; } .cls_ellipsis_subjct { font-size:20px; font-weight:600; } } } } .contentsWhy { background:#edf0f5; .why.flex { .items { &.video { .info { position:absolute; right:-20px; bottom:-20px; padding:20px 30px; text-align:center; background:#f59e0b; border-radius:10px; } } .check.flex { flex-direction:column; align-items:flex-start; gap:10px; > li { position:relative; padding-left:45px; &::before { position:absolute; left:0; content:""; width:30px; height:30px; background-image:url(/res/icon_check.png); background-color:rgba(245,158,11,0.2); border-radius:50%; } } } } } } .contentsConsulting { background:url(/res/consulting.jpg) no-repeat center center; background-size:cover; .call.flex { flex-direction:column; align-items:flex-start; gap:10px; margin-top:25px; > li { position:relative; padding-left:40px; font-weight:500; color:#fff; &::before { position:absolute; left:0; content:""; width:30px; height:30px; background-color:#f59e0b; border-radius:7px; } &:nth-child(1)::before { background-image:url(/res/icon_tel.png); } &:nth-child(2)::before { background-image:url(/res/icon_email.png); } } } .fr_wrap { padding:50px; .fr_con { position:relative; z-index:9; .flex { > li { flex:none; width:calc((100% - 20px) / 2); text-align:left; label { display:block; font-weight:500; color:#fff; } .ipt, .slt, .txta { width:100%; padding:0 10px; line-height:45px; border:0; background:rgba(255,255,255,0.7); border-radius:10px; outline:0; } .slt { height:45px; } .txta { height:125px; padding:10px; line-height:1.6; } } } } .fr_bg { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); backdrop-filter: blur(10px); z-index:0; } label { display: block !important; font-size: initial !important; } .ezform-label:has(+ .ez_required)::after, .ezform-label:has(+ * .ez_required)::after { color: white; margin-top: 2px; } } } > .bottom-wrap { position:relative; background:#0b1c35; overflow:hidden; .copy_eng { position:absolute; bottom:-50px; width:100%; font-size:10vw; font-weight:800; line-height:1; color:rgba(255,255,255,0.1); text-align:center; z-index:1; } .copy_info.flex { position:relative; z-index:9; dt { padding:20px 0 40px 60px; .sns.flex { justify-content:flex-start; gap:10px; a { display:inline-block; background:rgba(255,255,255,0.2); border-radius:50%; } } } dd { text-align:right; } } .copy.flex { position:relative; padding-top:40px; border-top:1px solid rgba(255,255,255,0.1); z-index:9; } } .subBannerWrap { position: relative; .subBanner { width: 1920px; margin: 0 auto; position: relative; left: 50%; transform: translateX(-50%); z-index: 1; .slogan { position:absolute; top:57%; width:100%; text-align:center; transform:translateY(-57%); z-index:9; h2 { font-size:5.5vw; line-height:1.05; font-weight:300; color:#fff; span { font-weight:800; background: linear-gradient(to right, #0d6fdf, #72e3cd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } h3 { font-size:24px; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.1); } } } } .subMenu-wrap { position:absolute; left:50%; bottom:60px; padding:0 50px; border-radius:0.5vw; transform:translateX(-50%); background:rgba(255,255,255,0.2); backdrop-filter: blur(5px); z-index:9; .flex { gap:20px; } } .contentsSubWrap { position:relative; min-height: 450px; .contentsSubTop { padding-top:5%; h1 { font-size:3.2vw; font-weight:700; line-height:1; text-align:center; } } } .label { font-weight: 500; } #mmenu-icon { display: none; } .hamburger-inner { background-color: #7d8289; &::before, &::after { background-color: #7d8289; } } nav.mobileMenu { height: calc(100dvh - 98px) !important; } @media only screen and (max-width: 1720px) { .center-wrap { padding-left:20px; padding-right:20px; } } @media only screen and (max-width: 1600px) { .bannerWrap { overflow: visible; } .mainBanner { width: calc(1920 / 1600 * 100vw); height: auto; } .subBannerWrap { .subBanner { width: calc(1920 / 1600 * 100vw); height: auto; } } } @media only screen and (max-width: 1024px) { .mainLogo img { width:220px; } #mmenu-icon { position: relative; display: flex; justify-content:flex-end; margin:0; padding:0; font-size:0; color: #222; background-color: transparent; border-radius: 5px; } .hamburger-box { width:25px; height:18px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width:25px; height:3px; background-color:#222; } .hamburger-inner::before { top:-8px } .hamburger-inner::after { bottom:-8px; } .nav-title-wrap { height:50px; border:0; h2 { display:none; } } .nav-title-wrap .nav-close-button:before, .nav-title-wrap .nav-close-button:after { border-color:#fff; } .mmenu-container { background-color:#0b1c35; } nav.mobileMenu ul { padding-left:0; } nav.mobileMenu .nav-item-wrapper { padding:10px 15px; } nav.mobileMenu .nav-item-wrapper a { font-size:18px; font-weight:500; color:#fff; } nav.mobileMenu .has-children .nav-next span::before { border-top-color:#fff; border-left-color:#fff; } nav.mobileMenu .menu-sub2 { padding-left:15px; background-color:transparent; } nav.mobileMenu .menu-sub2 .nav-item-wrapper { padding:5px 15px; } nav.mobileMenu .menu-sub2 .nav-item-wrapper a { font-weight:500; } #mainMenu { display: none !important; } #subMenuMobile { display: block !important; } #subMenu { display: none !important; } #mainSlider { [slogan-wrap] { [slogan] { div { &.tit { span { line-height:22px; } p {font-size: 40px; } } &.con { p { display:none; } ul { gap:5px; > li { padding-left:30px; } } } } } } } .subBannerWrap { .subBanner { .slogan { h3 { font-size:20px; color:#fff; text-shadow:1px 1px 5px rgba(0,0,0,0.1); } } } } .contentsSubWrap { .contentsSubTop { h1 { font-size:34px; } } } .contentsBusiness { .business.flex { > li { width:calc(100% / 3); margin-left:-1px; border:1px solid rgba(255,255,255,0.05); a { padding:20px 30px; } } } } .contentsGallery { .control.flex { button, a { width:35px; } } .gallery.flex { > li { padding:0 10px; .cate { margin-top:15px; } .cls_ellipsis_subjct { font-size:18px; } } } .ezSliderContainer230915 { margin-top:30px; } } .contentsConsulting { .call.flex { gap:10px; margin-top:15px; } .fr_wrap { margin-top:10px; padding:20px; .fr_con { .flex { > li { width:100%; .ipt, .slt, .txta { line-height:40px; } .slt { height:40px; } .txta { height:100px; } } } a { padding:0 25px; line-height:45px; } } } } } @media only screen and (max-width: 768px) { #mainSlider { [slogan-wrap] { [slogan] { div { &.tit { p { margin:15px 0; font-size:30px; } br { display:none; } } } } } } .contentsFix { a { img { width:50px; } .txt { right:50px; font-size:14px; } } } .contentsBusiness { .business.flex { > li { width:calc(100% / 2); } } } } @media only screen and (max-width: 540px) { .mainBanner { width: 100%; left: 0; transform: translateX(0); } #mainSlider { [slogan-wrap] {display:none; } } .subBannerWrap { .subBanner { .slogan { display:none; } } } .contentsSubWrap { .contentsSubTop { h1 { font-size:30px; } } } .contentsBusiness { dd { margin-top:15px; } .business.flex { > li { width:100%; margin:0; border:0; border-bottom:1px solid rgba(255,255,255,0.1); a { padding:20px 0; } & + li { border-left:0; } .con_ti { margin-bottom:10px; } } } } .contentsGallery { .ezSliderContainer230915 { margin-top:15px; } .control.flex { button, a { width:30px; } } .gallery.flex { > li { .cate { margin:10px 0 3px 0; padding:0 7px; line-height:24px; } .cls_ellipsis_subjct { font-size:17px; } } } } .contentsWhy { .why.flex { gap:40px; .items { flex:auto; .check.flex { padding-left:0; > li { padding-left:35px; &::before { width:25px; height:25px; background-size:cover; } } } &.video { .info { padding:10px 20px; } } } } } > .bottom-wrap { .logo { width:225px; } .copy_info.flex { flex-direction:column; align-items:flex-start; dt { padding:20px 0; .sns.flex { margin-top:5px; } } dd { padding-bottom:20px; text-align:left; } } .copy.flex { padding-top:20px; } } } @media only screen and (max-width: 320px) { .contentsGallery { .gallery.flex { > li { .cate { margin:5px 0 2px 0; font-size:12px; line-height:20px; } .cls_ellipsis_subjct { font-size:16px; line-height:1; } } } } } } body { padding-top: 0; &.menu-fixed { .mainMenuWrap { position: fixed; top: 0; margin-top: 0; width: 100%; max-width: 1920px; background-color: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(5px); box-shadow: 0px 1px 5px gray; z-index: 1039; .ezMenuContainer, .mainMenu { background: none; } .ezMenuContainer > ul > li > a { color: #333; } } .ez-subMenuBG { position: fixed !important; } @media only screen and (min-width: 1500px) { .mainMenuWrap { padding: 0 calc(50% - 750px); } } @media only screen and (min-width: 1920px) { .mainMenuWrap { padding: 0 210px; } } } } @keyframes ani_mainSlider { 0% { opacity: 0; top: 1em; } 20% { opacity: 1; top: 0; } 85% { opacity: 1; top: 0; } 100% { opacity: 0; top: 1em; } }