/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-family: "NotoSansKR", "Malgun Gothic"; font-weight: 400; font-size: 16px; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* ---------------------------------------------------------- # Font face ---------------------------------------------------------- */ @font-face { font-family: "NotoSansKR"; src: local("NotoSans-Regular"), url("../fonts/NotoSans-Regular.woff") format("woff"), url("../fonts/NotoSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "NotoSansKR"; src: local("NotoSans-Medium"), url("../fonts/NotoSans-Medium.woff") format("woff"), url("../fonts/NotoSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; } @font-face { font-family: "NotoSansKR"; src: local("NotoSans-Bold"), url("../fonts/NotoSans-Bold.woff") format("woff"), url("../fonts/NotoSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Bonanova"; src: local("BonaNova-Regular"), url("../fonts/BonaNova-Regular.woff") format("woff"), url("../fonts/BonaNova-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Bonanova"; src: local("BonaNova-Bold"), url("../fonts/BonaNova-Bold.woff") format("woff"), url("../fonts/BonaNova-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } :root { color-scheme: light only; } html, body { font-family: "NotoSansKR", "Malgun Gothic"; font-weight: 400; font-size: 16px; color: var(--color, #353535); line-height: 1.25; } html *, body * { -webkit-transition: all 0.25s; transition: all 0.25s; } dt { font-weight: 700; font-size: 18px; } dd { font-weight: 400; } ol, ul, li { word-break: break-word; } table { border-spacing: 0; border-collapse: collapse; word-break: keep-all; } table th, table td { padding: 0; } a, button { cursor: pointer; } a:disabled, button:disabled { pointer-events: none; cursor: default; } ::-webkit-input-placeholder { color: #787878; font-size: 14px; font-weight: 400; } ::-moz-placeholder { color: #787878; font-size: 14px; font-weight: 400; } :-ms-input-placeholder { color: #787878; font-size: 14px; font-weight: 400; } ::-ms-input-placeholder { color: #787878; font-size: 14px; font-weight: 400; } ::placeholder { color: #787878; font-size: 14px; font-weight: 400; } textarea { border: 1px solid #ccc; width: 100%; padding: 20px; height: 150px; resize: none; } @media (min-width: 1024px) { .br-pc { display: initial; } .br-mo { display: none; } } @media (max-width: 1023px) { .br-pc { display: none; } .br-mo { display: initial; } } /* ############################## # layout - Header ################################*/ .header { position: fixed; top: 0; width: 100%; opacity: 1; -webkit-transition: 0.3s; transition: 0.3s; z-index: 99; } .header.is-hide { opacity: 0; } .header-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 1400px; height: 60px; margin: 0 auto; padding: 14px 20px; } .header .h-logo { display: block; background: url("../images/logo_m_header.png") no-repeat 50% 50%/cover; width: 100px; height: 16px; font-size: 0; color: transparent; z-index: 99; } .h-btn-toggle { position: relative; display: block; width: 20px; height: 32px; z-index: 99; } .h-btn-toggle span { position: absolute; top: 0; width: 20px; height: 2px; border-radius: 2px; background-color: #fff; -webkit-transition: top 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out; transition: top 0.2s ease-in-out 0.4s, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out; transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out, -webkit-transform 0.4s ease-in-out; -webkit-transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; -ms-transition: top 0.2s ease-in-out 0.4s, transform 0.4s ease-in-out, opacity 0.2s ease-in-out 0.2s, left 0.2s ease-in-out; } .h-btn-toggle span:nth-child(1) { top: 9px; } .h-btn-toggle span:nth-child(2), .h-btn-toggle span:nth-child(4) { top: 16px; } .h-btn-toggle span:nth-child(3) { top: 23px; } .h-btn-toggle.is-active span { -webkit-transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s, -webkit-transform 0.4s ease-in-out 0.2s; -webkit-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; -moz-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; -ms-transition: top 0.2s ease-in-out, transform 0.4s ease-in-out 0.2s, opacity 0.1s ease-in-out 0.2s; } .h-btn-toggle.is-active span:nth-child(1) { top: 16px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .h-btn-toggle.is-active span:nth-child(2) { top: 16px; opacity: 0; } .h-btn-toggle.is-active span:nth-child(3) { top: 16px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media (min-width: 1024px) { .header .h-logo, .header .h-btn-toggle { display: none; } .nav { position: absolute; right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .nav-btn { position: relative; width: 40px; height: 40px; font-size: 0; color: transparent; } .nav-btn::before { content: ""; display: block; position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); background: radial-gradient(50.87% 50.87% at 50% 50%, #888 48.96%, rgba(136, 136, 136, 0) 100%); border-radius: 50%; width: 16px; height: 16px; } .nav-btn::after { content: ""; display: block; position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); border: 1px solid transparent; border-radius: 50%; width: 24px; height: 24px; -webkit-transition: 0.3s; transition: 0.3s; } .nav-btn.is-active::before { background: #2196f3; } .nav-btn.is-active::after { border-color: #2196f3; } } @media (max-width: 1023px) { .header { background-color: rgba(0, 0, 0, 0.8); } .nav { position: fixed; left: 100vw; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; background-color: rgba(0, 0, 0, 0.8); width: 100vw; height: 100vh; padding: 110px 20px 0; z-index: 9; -webkit-transition: all 0.3s; transition: all 0.3s; } .nav.is-show { left: 0; } .nav-btn { display: block; padding: 17px 10px; font-size: 20px; font-weight: 700; color: #fff; } .nav-btn.is-active { color: #2196f3; text-decoration: underline; } } /* ############################## # layout - footer ################################*/ .footer { background-color: #001331; color: #eee; } .footer-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; max-width: 1400px; margin: 0 auto; padding: 126px 0; } .footer .f-info { gap: 10px; } .footer .f-info .info-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .footer .f-info .info-tit { font-size: 12px; font-weight: inherit; } .footer .f-info .info-desc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; font-weight: inherit; gap: 10px; } .footer .f-info .info-desc::before { content: ""; display: block; background-color: #fff; border-radius: 2px; width: 1px; height: 12px; } .footer .f-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: stretch; align-self: stretch; } .footer .f-logo { display: block; position: absolute; right: 30px; background: url("../images/logo_footer.png") no-repeat 50% 50%/cover; width: 190px; height: 31px; margin-bottom: auto; margin-left: auto; font-size: 0; color: transparent; } .footer .f-copy { position: absolute; right: 30px; bottom: 126px; font-size: 12px; } @media (max-width: 1023px) { .footer-container { max-width: 100vw; padding: 36px 20px 20px; } .footer .f-info .info-group { gap: 4px; } .footer .f-info .info-tit { font-size: 10px; } .footer .f-info .info-desc { gap: 8px; font-size: 10px; } .footer .f-logo { top: 36px; right: 20px; width: 83px; height: 13px; } .footer .f-copy { right: 20px; bottom: 20px; font-size: 10px; } } /* ############################## # layout - container ################################*/ .wrap { position: relative; min-height: 100vh; } .l-section { position: relative; height: 100vh; margin: 0 auto; padding-top: 97px; overflow: hidden; } .l-container { width: 100%; max-width: 1400px; margin: 0 auto; } .sec-header { width: 100%; max-width: 1400px; margin: 0 auto; text-align: center; } .sec-title { font-size: 46px; font-weight: 700; } .sec-desc { margin-top: 36px; } .btn-top { display: block; position: fixed; bottom: 55px; right: 55px; border-radius: 50px; width: 40px; height: 40px; -webkit-box-shadow: inset 0 0 0 2px #9e9e9e; box-shadow: inset 0 0 0 2px #9e9e9e; opacity: 0; visibility: hidden; -webkit-transform: translateY(15px); transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; cursor: pointer; z-index: 99; } .btn-top::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background: transparent url("./../images/btn_top.png") no-repeat 50% 50%; width: 16px; height: 16px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn-top.is-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .btn-top svg.circle path { fill: none; stroke: transparent; stroke-width: 4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } @media (max-width: 1023px) { .wrap { padding-top: 60px; } .l-section { padding-top: 60px; } .l-container { max-width: 100vw; padding-left: 20px; padding-right: 20px; } .sec-header { padding: 27px 20px 0; } .sec-title { font-size: 20px; } .sec-desc { margin-top: 15px; font-size: 12px; } .btn-top { right: 24px; bottom: 47px; } } :root { --swiper-pagination-bullet-size: 16px; --swiper-pagination-bullet-border-radius: 16px; --swiper-pagination-bullet-inactive-color: #9e9e9e; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 10px; --swiper-pagination-color: #424242; --swiper-pagination-bottom: 0; } .swiper { padding-bottom: 60px; } .swiper-button { position: absolute; top: calc(50% - 60px); background: no-repeat 50% 50%/cover; width: 40px; height: 40px; z-index: 10; cursor: pointer; } .swiper-button.prev { left: calc(50% - 660px); background-image: url("./../images/btn_swiper_prev.png"); } .swiper-button.next { right: calc(50% - 660px); background-image: url("./../images/btn_swiper_next.png"); } .swiper-pagination-bullet-active { width: 40px; } @media (max-width: 1023px) { :root { --swiper-pagination-bullet-size: 10px; --swiper-pagination-bullet-horizontal-gap: 5px; } .swiper { padding-bottom: 40px; } .swiper-pagination-bullet-active { width: 25px; } } .tab-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tab-content { display: none; } .tab-content.is-active { display: block; } .trns { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .isPageActive .trns { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } /* ############################## # section - visual ################################*/ .visual { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 60px; color: #353535; } .visual-particles { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(135deg, #8bd0f5, #73c4e6, #a1aeff, #ffd7e3, #f58b93, #8bd0f5, #73c4e6); background-size: 700% 700%; -webkit-animation: rolling-gradient 15s linear infinite; animation: rolling-gradient 15s linear infinite; } .visual-logo { display: block; position: absolute; top: 44px; right: 60px; background: url("../images/logo_visual.png") no-repeat 50% 50%/cover; width: 305px; height: 50px; font-size: 0; color: transparent; } .visual-title { font-family: "Bonanova"; font-size: 108px; font-weight: 700; } .visual-sub { font-family: "Bonanova"; margin-top: 80px; font-size: 32px; } .visual-desc { margin-top: 40px; } .visual .icon-scroll { position: absolute; bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: url("./../images/icon_scroll_down.png") no-repeat 50% 0%; padding-top: 66px; font-size: 12px; text-align: center; } @-webkit-keyframes rolling-gradient { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @keyframes rolling-gradient { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @media (max-width: 1023px) { .visual { text-align: center; } .visual-logo { display: none; } .visual-title { font-size: 44px; } .visual-sub { margin-top: 94px; font-size: 28px; } .visual-desc { margin-top: 10px; line-height: 1.6; font-size: 12px; } .visual .icon-scroll { bottom: 70px; background-image: url("./../images/icon_scroll_down_m.png"); padding-top: 30px; } } /* ############################## # section - business ################################*/ .business { padding-top: 0; } .business .sec-header { background-color: #f5f5f5; max-width: none; padding-top: min(10vh, 97px); padding-bottom: min(4.78vh, 44px); margin-bottom: min(5.984vh, 55px); } .business-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; margin: min(7.29vh, 67px) auto 0; } .business-nav .b-nav { border-radius: 35px; background-color: #9e9e9e; width: auto; height: 35px; padding: 3px 15px; font-size: 20px; font-weight: 500; color: #fff; white-space: nowrap; cursor: pointer; } .business-nav .b-nav.is-active { background-color: #2196f3; } .swiper-business .swiper-wrapper { padding: 27px 0; } .business-slide { -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; border: 1px solid #9e9e9e; border-radius: 20px; width: 880px; height: 380px; overflow: hidden; -webkit-box-shadow: 16px 16px 12px -9px rgba(0, 0, 0, 0.12); box-shadow: 16px 16px 12px -9px rgba(0, 0, 0, 0.12); -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .business-slide.swiper-slide-active { border-color: #2196f3; opacity: 1; } .business-slide:not(.swiper-slide-active) { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.3; } .business-slide .b-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 56px 30px 40px; } .business-slide .b-title { font-size: 24px; font-weight: 700; } .business-slide .b-desc { margin-top: 20px; margin-bottom: auto; } .business-slide .b-icon { display: block; width: 140px; height: 140px; margin-left: auto; overflow: hidden; } .business-slide .b-icon img { width: 100%; } .business-slide .b-img { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 380px; height: 380px; overflow: hidden; } .business-slide .b-img img { width: 100%; } @media (max-width: 1023px) { .business { padding-top: 60px; } .business .sec-header { padding: 27px 0 20px; margin-bottom: 20px; } .business-nav { margin-top: 40px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } .business-nav .b-nav { height: 26px; font-size: 14px; } .swiper-business .swiper-button { display: none; } .business-slide { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 295px; padding: 30px 0 40px; } .business-slide:not(.swiper-slide-active) { -webkit-box-shadow: none; box-shadow: none; } .business-slide:not(.swiper-slide-active)::after { content: none; } .business-slide .b-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 10px; } .business-slide .b-title { font-size: 16px; } .business-slide .b-desc { margin-top: 12px; font-size: 12px; } .business-slide .b-icon { display: none; } .business-slide .b-img { margin-top: auto; width: 100%; height: 170px; overflow: hidden; } .business-slide .b-img img { width: 100%; } } /* ############################## # section - works ################################*/ .works { background: url("./../images/bg_works.png") no-repeat 50% 0%/auto 65vh; } .works .filter-container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 17px; margin-top: clamp(10px, 3.984vh, 55px); margin-left: auto; margin-right: auto; margin-bottom: clamp(30px, 7.881vh, 100px); z-index: 2; } .select-container { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .select-container .select-box { border-radius: 4px; border: 1px solid #eeeeee; background-color: #fff; width: 172px; height: 40px; line-height: 40px; padding: 0 36px 0 16px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; } .select-container .select-box:hover { color: #2196f3; } .select-container .select-box::after { content: ""; display: block; position: absolute; top: 14px; right: 16px; width: 12px; height: 12px; background: url("../images/ico_dropdown.svg") no-repeat 50% 50%; } .select-container .select-box.active { color: #2196f3; } .select-container .select-box.active + .select-options { display: block; } .select-container .select-box.active:after { background-image: url("../images/ico_dropdown_active.svg"); } .select-container .select-options { display: none; position: absolute; top: 45px; left: 0; width: 100%; font-size: 14px; z-index: 99; -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.1); } .select-container .select-options .select-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; background: #fff; width: 100%; line-height: 40px; padding: 0 10px; color: #000; text-align: left; font-size: inherit; cursor: pointer; } .select-container .select-options .select-option:hover { background-color: #e3f2fd; } .select-container .select-options .select-chk { border: 1px solid #9e9e9e; border-radius: 2px; background: transparent no-repeat 50% 50%; width: 20px; height: 20px; } .select-container .select-options .select-chk:checked { border-color: #2196f3; background-color: #2196f3; background-image: url("../images/ico_checkbox.svg"); } .swiper-works { width: 100%; max-width: 1400px; margin: 0 auto; padding-bottom: 120px; } .swiper-works .swiper-button { top: auto; bottom: 56px; } .work-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid #2196f3; border-radius: 8px; width: 330px; height: min(49.51vh, 455px); -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } .work-slide .w-img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; width: 100%; height: 315px; overflow: hidden; } .work-slide .w-img img:not(.logo) { min-width: 100%; min-height: 100%; } .work-slide .w-img .logo { width: auto; max-width: 100%; } .work-slide .w-img .badge { position: absolute; top: 20px; left: 20px; display: inline-block; border-radius: 18px; background-color: #2196f3; height: 35px; line-height: 35px; padding: 0 14px; color: #fff; font-weight: 700; } .work-slide .w-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color: #f9f9f9; padding: 20px 24px; } .work-slide .w-title { color: #2196f3; font-size: 20px; font-weight: 700; } .work-slide .w-desc { margin-top: 19px; } .work-slide .w-category { margin-top: 12px; font-size: 12px; color: #9e9e9e; } @media (min-width: 1024px) { .works .sec-header { text-align: center; } } @media (max-width: 1023px) { .works { background: #fff; } .works .filter-container { gap: 17px; margin: 25px auto 40px; } .works .select-container .select-box { width: 100px; padding-left: 10px; font-size: 12px; } .works .select-container .select-options { font-size: 10px; } .works .select-container .select-options .select-chk { width: 16px; height: 16px; } .swiper-works { width: 100%; min-height: 465px; } .work-slide { width: 235px; height: 360px; } .work-slide .w-img { height: 240px; } .work-slide .w-img .badge { height: 32px; font-size: 14px; } .work-slide .w-content { padding: 20px 20px; } .work-slide .w-title { font-size: 16px; } .work-slide .w-desc { margin-top: 12px; font-size: 12px; } .work-slide .w-category { font-size: 10px; } } /* ############################## # section - client ################################*/ :root { --client-item: 6; } .client { background: url("./../images/bg_client.png") no-repeat 50% 50%/cover; } .client .sec-header { color: #fff; } .client-container { background-color: rgba(255, 255, 255, 0.9); width: 100%; margin-top: 60px; padding: 20px 0 80px; } .client-list { display: grid; grid-template-columns: repeat(var(--client-item), 1fr); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .client-item { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 8px; text-align: center; } .client-logo { width: 140px; height: auto; overflow: hidden; } .client-logo img { width: 100%; } .client-desc { margin-top: 6px; } .client-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; margin: 0 auto 50px; } .client-nav .c-nav { position: relative; padding: 8px 0; font-size: 24px; font-weight: 700; color: #9e9e9e; } .client-nav .c-nav::after { content: ""; display: block; position: absolute; left: 2px; right: 2px; bottom: 0; height: 2px; } .client-nav .c-nav.is-active { color: #2196f3; } .client-nav .c-nav.is-active::after { background-color: #2196f3; } @media (min-width: 1024px) { .client .sec-header { text-align: center; } .client-container { height: 600px; } } @media (max-width: 1023px) { .client-container { margin-top: 40px; padding: 20px 0; min-height: 495px; } .client-list { gap: 12px; border-bottom: 1px solid #c1c1c1; } .client-item { border: 0 none; width: 153px; padding: 12px 18px; } .client-logo { width: 153px; max-width: 100%; } .client-desc { margin-top: 0px; font-size: 14px; } .client-nav { gap: 28px; margin-bottom: 22px; } .client-nav .c-nav { font-size: 16px; } } /* ############################## # section - about ################################*/ .about.l-section .sec-title { text-align: center; } .about-team { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: min(10.446vh, 96px); } .about-team .team-item { background-color: #f7f7f7; border-radius: 4px 40px 4px 40px; width: min(22.72vw, 300px); height: min(38.08vh, 350px); padding: min(4.3525vh, 40px) min(2.3525vw, 40px); color: #616161; -webkit-box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.1); box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.1); } .about-team .team-item:nth-child(even) { margin-top: 50px; } .about-team .team-icon { width: min(max(120px, 27.27vw), 13.0576vh); aspect-ratio: 1/1; overflow: hidden; } .about-team .team-icon img { width: 100%; } .about-team .team-title { margin-top: min(7.0729vh, 65px); font-size: min(5.4545vw, 24px); font-weight: 700; } .about-team .team-title::after { content: ""; display: block; background: -webkit-gradient(linear, left top, right top, color-stop(52.22%, #155fea), to(rgba(21, 95, 234, 0))); background: linear-gradient(90deg, #155fea 52.22%, rgba(21, 95, 234, 0) 100%); width: min(21.76vh, 200px); height: 2px; margin-top: 10px; } .about-team .team-desc { margin-top: 10px; } .about-address { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 2px solid #9e9e9e; border-bottom: 2px solid #9e9e9e; margin-top: min(10.88vh, 100px); padding: 20px 0; text-align: center; } .about-address .add-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .about-address .add-item + .add-item { border-left: 1px solid #9e9e9e; } .about-address .add-title { font-size: 24px; font-weight: 700; } .about-address .add-desc { position: relative; display: inline-block; margin-top: 20px; } .about-address .add-desc::after { content: ""; display: block; background: rgba(21, 95, 234, 0.1); height: 11px; -webkit-transform: translate(0, -8px); transform: translate(0, -8px); } @media (min-width: 1024px) { .about .sec-header { text-align: center; } } @media (max-width: 1023px) { .about-team { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 37px; margin-top: 35px; } .about-team .team-item { border-radius: 2px 20px 2px 20px; width: 132px; height: 155px; padding: 10px; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1); } .about-team .team-item:nth-child(even) { margin-top: 20px; } .about-team .team-icon { width: 60px; height: 60px; } .about-team .team-title { margin-top: 27px; font-size: 14px; } .about-team .team-title::after { width: 100px; height: 1px; margin-top: 4px; } .about-team .team-desc { margin-top: 4px; font-size: 12px; } .about-address { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-top: 3px solid #eeeeee; border-bottom: 3px solid #eeeeee; margin-top: 30px; padding: 0 14px; } .about-address .add-item { width: 100%; padding: 12px 0; } .about-address .add-item + .add-item { border-top: 1px solid #eeeeee; border-left: 0 none; } .about-address .add-title { font-size: 14px; } .about-address .add-desc { height: 20px; margin-top: 10px; font-size: 12px; } } /* ############################## # section - history ################################*/ .history { background: -webkit-gradient(linear, left top, left bottom, color-stop(3.15%, rgba(21, 95, 234, 0.1)), color-stop(29.24%, rgba(249, 250, 254, 0.1)), color-stop(42.59%, rgba(194, 213, 249, 0)), to(rgba(21, 95, 234, 0.1))); background: linear-gradient(180deg, rgba(21, 95, 234, 0.1) 3.15%, rgba(249, 250, 254, 0.1) 29.24%, rgba(194, 213, 249, 0) 42.59%, rgba(21, 95, 234, 0.1) 100%); } .history::before { content: ""; } .history .sec-header { margin-bottom: min(7.7vh, 80px); } .history-nav-container { width: 100%; position: relative; } .history-nav-container::after { content: ""; display: block; position: absolute; left: 0; right: 0; height: 12px; background: -webkit-gradient(linear, left top, right top, color-stop(-2.25%, #155fea), to(rgba(21, 95, 234, 0))); background: linear-gradient(90deg, #155fea -2.25%, rgba(21, 95, 234, 0) 100%); } .history-nav-container .swiper-button { top: calc(50% - 20px); } .history-nav-container .swiper-button.prev { left: calc(50% - 680px); } .history-nav-container .swiper-button.next { right: calc(50% - 680px); } .history-nav { width: 1194px; margin: 0 auto; padding-bottom: 0; } .history-nav .h-nav { -ms-flex-item-align: center; align-self: center; width: 190px; font-size: 64px; font-weight: 700; text-align: center; color: #e7e7e7; cursor: pointer; } .history-nav .h-nav.is-active { font-size: 80px; color: #616161; } .history-container { width: 100%; margin: min(7.7vh, 80px) auto; } .history-list { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; width: 350px; margin: 0 0; } .history-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #9e9e9e; width: 100%; height: 63px; padding-left: 20px; word-break: keep-all; } .history-item::before { content: ""; position: absolute; left: 0; display: block; background: url("../images/ico_history_arrow.png") no-repeat 50% 50%; width: 11px; height: 14px; } .history-item:first-child { border-top: 1px solid #9e9e9e; } .history .history-list[data-group=group0]::before { display: block; position: absolute; left: -30px; background-color: #eaeff7; border-radius: 6px; width: 6px; height: 100%; } @media (min-width: 1024px) { .history-container { width: 1130px; } } @media (max-width: 1023px) { .history::before { content: none; } .history-list { width: 274px; height: 295px; } .history-item { height: 42px; font-size: 12px; } .history .sec-header { margin-bottom: 32px; } .history-nav-container { padding-left: 20px; padding-right: 20px; } .history-container { padding: 0; } .history-nav { padding: 0; } .history-nav::after { height: 8px; } .history-nav .h-nav { width: auto; height: 54px; font-size: 32px; } .history-nav .h-nav.is-active { font-size: 32px; } .history-list { margin-top: 40px; } } .l-section.ai { position: relative; padding: 170px 50px; } .l-section.ai .ai-title-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 30px; } .l-section.ai .ai-title { -webkit-box-flex: 0; -ms-flex: 0 none; flex: 0 none; text-align: left; } .l-section.ai .ai-title .sec-title { font-size: 46px; font-weight: bold; margin-bottom: 61px; } .l-section.ai .ai-title h2 { font-size: 32px; margin-bottom: 5px; font-weight: 500; line-height: 1; } .l-section.ai .ai-title .sub-desc { font-size: 24px; margin-bottom: 24px; color: #9e9e9e; } .l-section.ai .ai-title .sec-desc { font-size: 16px; margin-bottom: 24px; color: #9e9e9e; } .l-section.ai .ai-title .link-detail { display: block; border-radius: 50px; padding: 20px 0; width: 180px; color: #fff; font-weight: bold; text-align: center; font-size: 16px; background: -webkit-gradient(linear, left top, right top, from(#41baba), to(#7f5fc4)); background: linear-gradient(90deg, #41baba 0%, #7f5fc4 100%); line-height: 1; } .l-section.ai .visual-ai { position: absolute; top: 0; left: calc(50% - 97px); width: 1177px; height: 647px; background: url("../images/ai/visual_ai.png") no-repeat 0 0; } .l-section.ai .art-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .l-section.ai .art-list-tit { position: relative; font-size: 24px; margin-bottom: 32px; } .l-section.ai .art-list-tit::after { content: ""; display: block; position: absolute; top: 50%; left: 311px; right: 0; height: 1px; background-color: #ddd; } .l-section.ai .art-list-wrap { margin-top: 100px; text-align: left; } .l-section.ai .art-list__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; border-radius: 20px; background-color: #f4fafe; padding: 27px 25px; } .l-section.ai .art-list__item span { font-size: 12px; color: #9e9e9e; } .l-section.ai .art-list__item h3 { font-size: 18px; font-weight: 500; height: 48px; line-height: 24px; margin-top: 4px; margin-bottom: 12px; } .l-section.ai .art-list__item button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #2196f3; border-radius: 50px; width: 68px; padding: 4px 8px 4px 15px; line-height: 26px; height: 26px; text-align: center; font-size: 12px; color: #2196f3; } .l-section.ai .art-list__item button::after { content: ""; display: block; width: 12px; height: 12px; background: url("../images/ai/ico_arr.svg") no-repeat 0 0/cover; } @media (max-width: 1280px) { .l-section.ai .ai-title-wrap { margin: 0; } .l-section.ai .ai-title .sec-title { font-size: 36px; margin-bottom: 20px; } .l-section.ai .ai-title h2 { font-size: 18px; } .l-section.ai .ai-title .sub-desc { font-size: 16px; margin-bottom: 20px; } .l-section.ai .ai-title .sec-desc { font-size: 12px; } .l-section.ai .ai-title .link-detail { padding: 13px 0; height: 40px; width: 120px; font-size: 14px; } .l-section.ai .visual-ai { left: calc(50% - 215px); right: 0; width: none; height: 500px; background-size: contain; } .l-section.ai .art-list-wrap { margin-top: 70px; } .l-section.ai .art-list__item { padding: 18px 25px; min-width: 400px; } .l-section.ai .art-list__item h3 { font-size: 16px; font-weight: 500; height: 48px; line-height: 24px; } .l-section.ai .art-list__item button { width: 68px; padding: 4px 8px 4px 15px; line-height: 26px; height: 26px; font-size: 12px; } } @media (max-width: 1023px) { .l-section.ai { background-image: url("../images/ai/m_visual_01.png"), url("../images/ai/m_visual_02.png"); background-position: right top, left 187px; background-repeat: no-repeat, no-repeat; padding: 80px 0 0; } .l-section.ai .ai-title { width: 100%; text-align: center; } .l-section.ai .ai-title .sec-title { font-size: 32px; margin-bottom: 10px; } .l-section.ai .ai-title h2 { font-size: 16px; } .l-section.ai .ai-title .sub-desc { font-size: 14px; margin-bottom: 20px; } .l-section.ai .ai-title .link-detail { width: 100%; max-width: 200px; margin: 0 auto; } .l-section.ai .visual-ai { display: none; } .l-section.ai .art-list-wrap { margin-top: 40px; } .l-section.ai .art-list-tit { font-size: 16px; font-weight: 500; padding: 10px; border-bottom: 1px solid #ddd; margin-bottom: 20px; } .l-section.ai .art-list-tit::after { content: none; } .l-section.ai .art-list { gap: 10px; overflow-y: auto; overflow-x: hidden; } .l-section.ai .art-list__item { position: relative; border-radius: 10px; padding: 10px 15px; min-width: 100%; } .l-section.ai .art-list__item span { font-size: 10px; } .l-section.ai .art-list__item h3 { font-size: 12px; line-height: 1; height: auto; } .l-section.ai .art-list__item button { position: absolute; right: 15px; top: calc(50% - 13px); width: 68px; padding: 4px 8px 4px 15px; line-height: 26px; height: 26px; font-size: 12px; } } .wrap.type2 .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s; -webkit-perspective: 3000; perspective: 3000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .wrap.type2 .l-section { -webkit-transform: rotateX(180deg) scale(0.3); transform: rotateX(180deg) scale(0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; will-change: transform; } .wrap.type2 .isPageActive { -webkit-transform: scale(1); transform: scale(1); }