/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, sub, sup):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 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; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } sub { vertical-align: baseline; font-size: 0.6em; } sup { font-size: 0.6em; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("../fonts/PretendardVariable/PretendardVariable.woff2") format("woff2-variations"); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; } @font-face { font-family: "Montserrat Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("../fonts/montserrat/Montserrat-VF.woff2") format("woff2-variations"); unicode-range: U+0041-005A, U+0061-007A, U+0030-0039; } footer { display: flex; justify-content: center; background-color: #000; padding: 80px 24px; } footer .footer-body { max-width: 1520px; width: 100%; } footer .footer-header { display: flex; align-items: center; justify-content: space-between; } footer .footer-header .terms-links { display: flex; gap: 0 30px; color: #ddd; } footer .footer-content { display: flex; flex-direction: column; gap: 15px 0; margin-top: 60px; } footer ul { display: flex; gap: 0 30px; } footer ul li { color: #888; } footer ul li span { color: #ddd; padding-right: 10px; } footer .cp { color: #ddd; } @media (max-width: 1200px) { footer .footer-header { flex-wrap: wrap; } footer .footer-header .terms-links { flex-wrap: wrap; margin-top: 50px; } footer .footer-header .terms-links a { margin: 5px 0; } footer .footer-content ul { flex-wrap: wrap; } footer .footer-content ul li { margin: 5px 0; line-height: 1.4em; } } header { z-index: 3; position: fixed; top: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0); padding: 35px 24px 25px 24px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: white; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05); transition: all 0.3s; } @media (hover: hover) { header:hover { background-color: white; color: #333; } header:hover .lang-btn { color: #D42A49; border-color: #D42A49 !important; } header:hover .inner .logo { background-image: url("../images/header-logo-red.svg"); } header:hover .hamburger .bar { background-color: black; } } header.active { box-shadow: none; } header.active .submenu-container { visibility: visible; opacity: 1; height: 86px; } header.scrolled { background-color: white; color: #333; } header.scrolled .lang-btn { color: #D42A49; border-color: #D42A49 !important; } header.scrolled .inner .logo { background-image: url("../images/header-logo-red.svg"); } header.scrolled .hamburger .bar { background-color: black; } header .inner { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1568px; width: 100%; } header .inner .logo { background-image: url("../images/logo-wt.svg"); background-repeat: no-repeat; background-size: contain; width: 215px; height: 40px; } header .inner nav { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: space-between; max-width: 560px; width: 100%; } header .inner nav .nav-link { position: relative; } header .inner nav .nav-link:hover { color: #D42A49; } header .inner nav .nav-link:hover .submenu { visibility: visible; opacity: 1; } header .inner nav .nav-link .submenu { visibility: hidden; opacity: 0; position: absolute; transition: opacity 0.6s; top: 22px; } header .inner nav .nav-link .submenu .inner { display: flex; align-items: center; gap: 60px; margin-top: 66px; margin-bottom: 29px; } header .inner nav .nav-link .submenu .inner a { white-space: nowrap; font-size: 1.125rem; color: #acacac; border-bottom: 1px solid transparent; padding-bottom: 4px; } header .inner nav .nav-link .submenu .inner a:hover { color: #D42A49; font-weight: 600; border-color: #D42A49; } header .inner .hamburger { touch-action: none; display: none; position: absolute; top: 50%; transform: translateY(-50%); right: 0; border-radius: 50vh; transition: all 0.3s; cursor: pointer; } header .inner .hamburger.active .bar:nth-of-type(1) { transform: translateY(9px) rotate(45deg); } header .inner .hamburger.active .bar:nth-of-type(2) { opacity: 0; } header .inner .hamburger.active .bar:nth-of-type(3) { transform: translateY(-9px) rotate(-45deg); } header .inner .bar { height: 3px; width: 30px; display: block; margin: 6px auto; position: relative; background-color: #fff; border-radius: 50vh; transition: all 0.3s; } header .inner .lang-btn-container { display: flex; flex-direction: column; position: relative; } /* @media (hover: hover) { header .inner .lang-btn-container:hover .lang-btn-list { visibility: visible; opacity: 1; } } 24.03.07*/ header .inner .lang-btn-container.show .lang-btn-list { z-index: 10; visibility: visible; opacity: 1; }/*24.03.07*/ header .inner .lang-btn-container .lang-btn-list { visibility: hidden; opacity: 0; position: absolute; top: 31px; } header .inner .lang-btn-container .lang-btn-list .inner { margin-top: 10px; } header .inner .lang-btn { font-size: 0.875rem; font-weight: 500; padding: 7px 14px; border: 1px solid white; border-radius: 5px; } @media (hover: hover) { header .inner .lang-btn:hover { background-color: #D42A49; color: white; } } header .inner .lang-btn.un-selected { background-color: #D42A49; color: white; } header .submenu-container { transition: opacity 0.3s; visibility: hidden; z-index: 3; opacity: 0; z-index: -1; box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05); background-color: white; border-top: 1px solid #ddd; position: absolute; top: 100px; left: 0; right: 0; display: flex; align-items: center; height: 0; transition: all 0.3s; } header .submenu-container .inner { display: flex; align-items: center; gap: 24px; width: 100vw; padding: 24px; background-color: rgba(0, 0, 0, 0.2); border-radius: 5px; } @media (max-width: 1200px) { header .inner .logo { width: 120px; height: 24px; } header .inner nav { display: none; } header .inner .hamburger { touch-action: auto; display: block; } header .inner .lang-btn { display: none; margin-right: 50px;/*24.03.07*/ font-size: 12px; } header .inner .lang-btn.show { display: block; }/*24.03.07*/ } .mobile-menu-container { z-index: 2; display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); color: white; padding: 100px 24px 0; } .mobile-menu-container.show { display: block; } .mobile-menu-container .mobile-menu-list { overflow-y: auto; height: 100%; font-size: 1.5rem; padding-bottom: 50px; } .mobile-menu-container .mobile-menu-list li:not(:last-child) { margin-bottom: 24px; } .mobile-menu-container .mobile-menu-list li.sub { font-size: 1.125rem; padding-left: 16px; } @media (max-width: 1366px) { html { font-size: 81.25%; } } body { font-family: "Pretendard Variable", "Montserrat Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; word-break: keep-all; } body.noScroll { position: fixed; top: 0; left: 0; } .mt-27 { margin-top: 27px; } .page-title { display: flex; align-items: center; color: #000; } .page-title h2 { font-size: 3.125rem; font-weight: 700; } .page-title h3 { font-size: 1.875rem; font-weight: 400; text-transform: capitalize; } .page-title span:not(.br) { margin: 0 2.5rem; width: 1px; height: 2.5rem; background-color: #000; } .page-title.center { flex-direction: column; border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .page-title.center span { margin: 1.875rem 0; width: 2.5rem; height: 1px; } .page-title.red { color: #D42A49; } .page-title.product { justify-content: center; border-bottom: 1px solid #e6e6e6; padding-bottom: 50px; } .page-title.product h1 { color: #D42A49; } .page-title.text-center { text-align: center; } @media all and (max-width: 1200px) { .page-title { flex-direction: column; align-items: center; justify-content: center; } .page-title h2 { width: 100%; font-size: 2.5rem; text-align: center; } .page-title h3 { font-size: 1.55rem; } .page-title span { width: 2.5rem; height: 1px; margin: 2.5rem 0; } .page-title span.br { display: block; padding: 10px 0; width: 100%; } } .submit-btn { padding: 11px 22px; border: 1px solid #D42A49; color: #D42A49; font-size: 1rem; line-height: 1.625rem; font-weight: 500; margin-left: 15px; } .form-table { display: flex; border: 1px solid #e6e6e6; margin-top: -1px; } .form-table.reply { background-color: #FBFBFB; border: none; } .form-table.reply .variant .value { flex: 0 400px !important; } .form-table .form-row { margin-top: -1px; flex: 1; display: flex; align-items: center; border-top: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; font-size: 1.125rem; color: #333; } .form-table .form-row.textarea { align-items: flex-start; } .form-table .form-row.textarea .value { padding: 10px 24px 10px 0 !important; } .form-table .form-row.variant { flex-direction: column; border-left: none; } .form-table .form-row.variant .label { flex: 1; width: 100%; text-align: center; border-bottom: 1px solid #e6e6e6; } .form-table .form-row.variant .value { border: none; flex: 0 400px; width: 100%; text-align: left; padding: 20px 12px; } .form-table .form-row .label { padding: 20px; flex: 0 1 270px; font-weight: 500; } .form-table .form-row .value { font-weight: 300; flex: 1; padding: 8px 30px 8px 20px; border-left: 1px solid #e6e6e6; } .form-table .form-row .value.tel { display: flex; align-items: center; } .form-table .form-row .value.tel span { margin: 0 10px; } .form-table .form-row .value.tel input { max-width: 181px; } .form-table .form-row .value.email { display: flex; align-items: center; } .form-table .form-row .value.email span { margin: 0 10px; } .form-table .form-row .value.email input { max-width: 282px; } .form-table.hasinput .form-row .value { padding: 0; border: none; padding-right: 24px; } .form-table input { border: 1px solid #e6e6e6; padding: 8px 20px; max-width: 600px; width: 100%; } .form-table input::-moz-placeholder { color: #e6e6e6; } .form-table input::placeholder { color: #e6e6e6; } .form-table input.full { max-width: unset; margin-right: 24px; } .form-table textarea { border: 1px solid #e6e6e6; padding: 8px 20px; width: 100%; resize: vertical; } .form-table textarea::-moz-placeholder { color: #e6e6e6; } .form-table textarea::placeholder { color: #e6e6e6; } @media (max-width: 1200px) { .form-table { display: block; } .form-table .form-row { flex-direction: column; align-items: flex-start; } .form-table .form-row .label { flex: 0; padding-bottom: 5px; } .form-table .form-row .value { padding-bottom: 17px; } .form-table.hasinput .form-row { display: block; } .form-table.hasinput .form-row .value { padding-right: 20px; padding-left: 20px; padding-bottom: 20px; } .form-table.hasinput .form-row.textarea .value { padding: 0 24px 10px 24px !important; } } .address-table { font-size: 1.125rem; border: 1px solid #e6e6e6; color: #333; margin-top: 50px; } .address-table .row { display: flex; align-items: center; padding: 20px; } .address-table .row:not(:last-child) { border-bottom: 1px solid #e6e6e6; } .address-table .row .label { flex: 0 1 250px; border-right: 1px solid #e6e6e6; font-weight: 500; } .address-table .row .content { flex: 1; padding-left: 20px; font-weight: 300; line-height: 2rem; } .address-table .row .content a:hover { text-decoration: underline; /*240115*/ } .address-table .row .content p:not(:last-child) { margin-bottom: 10px; } .address-table .row.variant { padding: 0; } .address-table .row.variant .label { flex: 0 1 270px; padding: 20px; } .address-table .row.variant .content { padding: 20px; } @media (max-width: 1200px) { .address-table .row { flex-direction: column; align-items: flex-start; } .address-table .row .label { flex: 0 1 34px; border: none; } .address-table .row .content { padding-left: 0; } .address-table .row.variant .label { flex: 0 1 34px; padding-bottom: 0; } } .patent-item { text-align: center; } .patent-item .figcaption { font-size: 1.25rem; font-weight: 500; margin-top: 20px; } .product-item { text-align: center; } .product-item .figcaption { font-size: 1.25rem; font-weight: 600; color: #000; margin-top: 20px; } .product-item.red figcaption { color: #D42A49; } .grid-box { display: grid; } .grid-box.col3 { grid-template-columns: 1fr 1fr 1fr; } .grid-box.purchase { gap: 10px; } .grid-box.patent { margin: 0 auto; max-width: 1360px; gap: 100px; } .grid-box.news-card-grid { gap: 100px; } @media (max-width: 1000px) { .grid-box.patent { gap: 30px; } } @media (max-width: 767px) { .grid-box.col3 { grid-template-columns: 1fr; } .grid-box.purchase { gap: 100px; } } .news-card { border: 1px solid #e6e6e6; color: #333; } .news-card figure { position: relative; display: block; padding-bottom: 70%; width: 100%; height: 0; } .news-card img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .news-card .card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; } .news-card .card-body h5 { font-size: 1.25rem; line-height: 1.875rem; font-weight: 500; } .news-card .card-body p { font-size: 1rem; line-height: 1.625rem; font-weight: 200; } .news-card .card-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 20px 20px; } .news-card .card-footer .date { font-size: 1rem; font-weight: 200; } .news-card .card-footer .more-link { position: relative; font-size: 1rem; margin-right: 20px; color: #333; } .news-card .card-footer .more-link::after { content: ""; position: absolute; top: 2px; right: -20px; background-image: url("../images/link-arrow.svg"); background-repeat: no-repeat; background-size: 10px 10px; width: 10px; height: 10px; } .privacy-list { color: #333; font-size: 1.125rem; } .privacy-list li:not(:last-child) { margin-bottom: 50px; } .privacy-list .heading { font-weight: 700; line-height: 1.875rem; margin-bottom: 20px; } .privacy-list p { font-weight: 400; line-height: 1.875rem; } .privacy-list p:not(:last-child) { margin-bottom: 5px; } .privacy-list p.sub { font-weight: 200; } .privacy-agreement { display: flex; flex-direction: column; gap: 50px; text-align: center; font-size: 1.25rem; line-height: 2rem; } .privacy-agreement span { color: #D42A49; font-size: 50px; } button { display: flex; align-items: center; justify-content: center; padding: 22px; border-radius: 5px; font-size: 1.375rem; font-weight: 600; cursor: pointer; } button.submit { margin-top: 50px; } button.full { width: 100%; } button.red { color: #D42A49; } button.line { border: 1px solid #D42A49; } button.center { margin-left: auto; margin-right: auto; } @media (max-width: 1200px) { button.submit { font-size: 20px; } } .board { table-layout: fixed; width: 100%; font-size: 1.125rem; } .board .flag { color: #D42A49; border: 1px solid #D42A49; font-size: 0.75rem; font-weight: 600; line-height: 1.375rem; padding: 0 8px; display: inline-block; margin-left: 18px; white-space: nowrap; } .board th { text-align: center; border-top: 1px solid #333; border-bottom: 1px solid #333; } .board th:nth-child(1) { width: 180px; border-right: 1px solid #333; } .board th:nth-child(2) { width: 100%; border-right: 1px solid #333; } .board th:nth-child(3) { width: 180px; border-right: 1px solid #333; } .board th:nth-child(4) { width: 180px; } .board th, .board td { padding: 20px 0; vertical-align: middle; } .board td { border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .board td:nth-child(1) { text-align: center; } .board td:nth-child(2) { display: flex; align-items: center; padding-left: 20px; padding-right: 20px; } .board td:nth-child(2) .post-title { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .board td:nth-child(3) { text-align: center; } .board td:nth-child(4) { text-align: center; } @media (max-width: 1200px) { .board { font-size: 1rem; } .board .flag { font-size: 0.625rem; margin-left: 0; margin-top: 5px; } .board th:nth-child(1) { display: none; } .board th:nth-child(3) { display: none; } .board th:nth-child(4) { width: 120px; } .board td:nth-child(1) { display: none; } .board td:nth-child(2) { display: block; } .board td:nth-child(3) { display: none; } } .search-ui { display: flex; justify-content: flex-end; gap: 15px; margin-bottom: 50px; } .search-ui .inner { position: relative; display: flex; } .search-ui input { width: 270px; border: 1px solid #e6e6e6; padding: 12px 15px 12px 51px; } .search-ui input::-moz-placeholder { color: #e6e6e6; } .search-ui input::placeholder { color: #e6e6e6; } .search-ui .icon-search { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; } @media (max-width: 1200px) { .search-ui input { width: 100%; } } .chart-row.mt { margin-top: 50px; } .chart-row .row { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; } .chart-row .row-title { font-size: 1.25rem; font-weight: 600; color: #AD0031; text-transform: capitalize; } .chart-row img { width: 100%; } @media (max-width: 1300px) { .chart-row .row { gap: 50px; } .chart-row .row-title { font-size: 1rem; } } @media (max-width: 1200px) { .chart-row .row { display: block; } .chart-row .row figure:not(:last-child) { margin-bottom: 50px; } } h3.title { font-size: 48px; font-weight: 700; line-height: 3.125rem; color: #000; margin-bottom: 50px; } h3.red { color: #AD0031; } @media (max-width: 1200px) { h3.title { font-size: 28px; margin-bottom: 25px; } } h4.title { font-size: 1.875rem; line-height: 1.875rem; margin-bottom: 20px; } .flex-col2 { display: flex; gap: 100px; } .flex-col2.between { justify-content: space-between; } @media (max-width: 1200px) { .flex-col2 { flex-direction: column; gap: 50px; } } .sem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 1110px; width: 100%; } .sem-grid .inner { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 30px; max-width: 430px; width: 100%; } .sem-grid img { width: 100%; } @media (max-width: 1200px) { .sem-grid { grid-template-columns: 1fr; } } .spec-table { table-layout: fixed; text-align: center; font-size: 1.25rem; line-height: 1.625rem; font-weight: 300; width: -moz-fit-content; width: fit-content; } .spec-table th, .spec-table td { padding: 12px 0; vertical-align: middle; } .spec-table th { background-color: #FBFBFB; border: 1px solid #e6e6e6; width: 270px; color: #333; } .spec-table td { border: 1px solid #e6e6e6; width: 364px; } @media (max-width: 1300px) { .spec-table th { width: 240px; } .spec-table td { width: 300px; } } @media (max-width: 1200px) { .spec-table { font-size: 1rem; width: 100%; } .spec-table th { width: 130px; } .spec-table td { width: 180px; } } .product-table-container { overflow-x: auto; } .product-table-container .product-table { table-layout: fixed; text-align: center; font-size: 1.25rem; line-height: 1.625rem; font-weight: 300; width: -moz-fit-content; width: fit-content; } .product-table-container .product-table th, .product-table-container .product-table td { padding: 12px 0; vertical-align: middle; width: 186px; } .product-table-container .product-table th { background-color: #FBFBFB; border: 1px solid #e6e6e6; font-weight: 500; color: #333; } .product-table-container .product-table td { border: 1px solid #e6e6e6; } .product-table-container .product-table .sticky { position: sticky; left: 0; } .product-table-container .product-table strong { font-weight: 600; } .product-table-container .product-table .unit { font-size: 16px; font-weight: 500; } @media (max-width: 1200px) { .product-table-container .product-table { font-size: 1rem; } .product-table-container .product-table th, .product-table-container .product-table td { width: 136px; } } ul.products-desc .heading { font-size: 1.375rem; font-weight: 700; line-height: 2rem; color: #333; margin-bottom: 20px; } ul.products-desc li { font-size: 1.375rem; font-weight: 200; line-height: 2rem; position: relative; padding-left: 20px; } ul.products-desc li::before { content: "-"; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .card-item { display: flex; gap: 100px; } .card-item .card-content { display: flex; flex-direction: column; gap: 50px; flex: 1; } .card-item .card-content h3.title { margin-bottom: 0; } .card-item .card-content h4.title { margin-top: 20px; margin-bottom: 0; } .card-item .card-content p { font-size: 1.125rem; line-height: 1.875rem; font-weight: 300; color: #333; } .card-item .card-content p strong { font-weight: 500; } @media (max-width: 1300px) { .card-item { gap: 50px; } } @media (max-width: 1200px) { .card-item { flex-direction: column; gap: 50px; } .card-item h3.title { line-height: 1.6em; } .card-item h4.title { font-size: 24px; } .card-item br { display: none; } } .download-link-container { text-align: center; width: -moz-fit-content; width: fit-content; /* border-bottom: 1px solid #888; 250425*/ /* padding: 0 5px 5px 5px; 250425*/ margin: 0 auto; } .download-link-container a{ /*border-bottom: 1px solid #888; */border: 1px solid #D42A49; margin: 0 .5rem; padding: .5rem; border-radius: .5rem; -webkit-border-radius: .5rem; -moz-border-radius: .5rem; -ms-border-radius: .5rem; -o-border-radius: .5rem; }/*250425*/ .download-link-container .download-link { font-size: 1.2rem; font-weight: 500; /* color: #888; */ color: #D42A49; } @media (max-width: 767px) { .download-link-container { display: flex; flex-direction: column; gap: 1rem; } } .product-desc-container { text-align: center; font-size: 1.25rem; line-height: 2rem; margin: 0 auto; } .product-desc-container h5 { font-weight: 700; } .product-desc-container p { font-weight: 300; color: #333; margin-top: 50px; } .product-desc-container.variant p { margin-top: 30px; } .product-desc-container.variant span { color: #D42A49; font-size: 40px; } .hero { background-color: gainsboro; width: 100%; height: 700px; display: flex; align-items: center; justify-content: center; text-align: right; padding: 116px 210px; background-position: center; background-size: cover; background-repeat: no-repeat; margin-bottom: 100px; } .hero .inner { display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero h1 { font-size: 7.5rem; font-weight: 200; color: white; text-transform: uppercase; } .hero .subheading { display: flex; align-items: center; font-size: 2.5rem; line-height: 3.125rem; font-weight: 700; color: white; } .hero .subheading span { display: inline-block; width: 1px; height: 36px; background-color: white; margin: 0 30px; } .hero.community { background-image: url("../images/community-hero.png"); } .hero.purchase { background-image: url("../images/purchase-hero.png"); } .hero.rnd { background-image: url("../images/rnd-hero.png"); } .hero.product { background-image: url("../images/product-hero.png"); } .hero.about { background-image: url("../images/about-hero.png"); } .hero.info { background-image: url("../images/info-hero.png"); } @media (max-width: 1200px) { .hero { padding: 0; height: 400px; } .hero .inner h1 { font-size: 3.5rem; } .hero .inner .subheading { font-size: 1.5rem; } .hero .subheading span { margin: 0 15px; } .hero.community .inner h1 { font-size: 3.2rem; } } section { display: flex; flex-direction: column; gap: 100px; max-width: 1568px; padding: 0 24px; width: 100%; margin: 0 auto 200px auto; } section.inner { margin-bottom: 0; padding: 0; } .pagination { display: flex; align-items: center; justify-content: center; gap: 0 10px; margin-top: 50px; } .pagination li { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } .pagination li.active { border-bottom: 1px solid #e6e6e6; } .pagination li.active a { color: #D42A49; } .pagination li a { font-size: 1rem; color: #888; } .privacy-container { display: flex; flex-direction: column; align-items: center; } .privacy-container .page-title { margin-bottom: 50px; text-align: center; } .privacy-container .agreement-box-container { display: flex; flex-direction: column; gap: 100px 0; border: 1px solid #e6e6e6; width: 100%; padding: 50px; } @media (max-width: 1200px) { .privacy-container .page-title h1 { font-size: 36px; text-align: left; } .privacy-container .agreement-box-container { padding: 24px; } } .div-line { width: 100%; height: 1px; background-color: #e6e6e6; margin: 50px 0; } .product-image-container { display: flex; justify-content: center; } .product-image-container figure { flex: 0 600px; } .center-content { display: flex; justify-content: center; } .product-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 100px; } @media (max-width: 1200px) { .product-page-grid { grid-template-columns: 1fr; } } .ceo-greetings-grid { display: grid; grid-template-columns: minmax(0, 595px) minmax(0, 926px); width: 100%; height: 500px; } @media all and (max-width: 47.9375rem) { .ceo-greetings-grid { display: block; height: auto; } } .ceo-image { justify-self: end; text-align: center; padding-right: 6.25rem; border-right: 1px solid #e6e6e6; } .ceo-image.noBorder { border: none; padding-right: 0; } .ceo-image figcaption { font-size: 1.125rem; font-weight: 400; line-height: 1.875rem; margin-top: 1.25rem; } .ceo-image figcaption.eng { margin-top: 0; } .ceo-image figcaption span { font-weight: 600; } .ceo-text { align-self: center; padding-left: 6.25rem; } .ceo-text p { font-size: 1.125rem; font-weight: 300; line-height: 2rem; } .ceo-text p:not(:last-child) { margin-bottom: 2.5rem; } .ceo-text p .br { display: block; } @media (max-width: 1200px) { .ceo-image { padding-right: 0; justify-self: center; border: none; } .ceo-image figcaption { font-size: 1.25rem; } .ceo-image figcaption.eng { margin-top: 0.3rem; } .ceo-text { margin-top: 6.25rem; padding-left: 0; justify-self: center; } .ceo-text p { font-size: 1.3em; line-height: 1, 4em; max-width: unset; } .ceo-text p .br { display: inline; } } .article-title { font-size: 3.625rem; font-weight: 700; line-height: 4.375rem; text-align: center; width: 100%; text-align: center; } .article-para { font-size: 1.25rem; font-weight: 300; line-height: 2rem; text-align: center; } .article-divider { width: 100%; height: 1px; background-color: #e6e6e6; margin: 3.125rem 0; } .red-logo { max-width: 411px; margin: 0 auto; } @media all and (max-width: 1200px) { .red-logo { width: 90%; } .article-para { font-size: 1.5rem; line-height: 1.6em; } .article-para br { display: none; } } .article-mid-text { display: flex; flex-direction: column; align-items: center; } .article-mid-text .sub-title { font-size: 1.375rem; font-weight: 700; line-height: 2rem; color: #D42A49; margin-bottom: 1.25rem; } .article-mid-text .sub-title span { margin: 0 10px; } .company-overview-grid { display: flex; justify-content: center; gap: 0 100px; } .company-overview-grid li figcaption { margin-top: 20px; text-align: center; } .company-overview-grid li figcaption .award-title { font-size: 1.25rem; font-weight: 500; line-height: 30px; } .company-overview-grid li figcaption .award-event { font-size: 1rem; font-weight: 300; line-height: 26px; margin-top: 10px; } @media (max-width: 1200px) { .company-overview-grid { flex-direction: column; gap: 0; align-items: center; } .company-overview-grid li:not(:last-child) { margin-bottom: 64px; } .company-overview-grid li figcaption { margin-top: 10px; } .company-overview-grid li figcaption .award-title { font-size: 16px; } .company-overview-grid li figcaption .award-event { font-size: 14px; line-height: 20px; margin-top: 5px; } .article-mid-text .sub-title { font-size: 1.5rem; } .article-mid-text .sub-title .br { display: block; } } .about02-title { text-align: center; } .about02-title .page-title+.desc { padding-top: 50px; font-size: 20px; font-family: "Pretendard Variable", sans-serif; color: #333; } .figcaption { margin-top: .4rem; font-weight: 400; font-family: "Montserrat Variable", sans-serif; } .figcaption .eng { font-weight: 600; } .history-flow { position: relative; } .history-flow::before { content: ""; position: absolute; top: 0; left: 51.7%; transform: translateX(-50%); width: 1px; height: 100%; background-color: #ddd; } .history-flow .year { font-family: "Montserrat Variable", sans-serif; font-size: 48px; font-weight: 100; color: #AD0031; } .history-flow .left { display: flex; justify-content: center; font-size: 20px; line-height: 32px; font-weight: 200; padding: 100px 0; } .history-flow .left.right { flex-direction: row-reverse; } .history-flow .left.right .info { text-align: right; margin-right: -101px; } .history-flow .left.right figure { padding-left: 0; padding-right: 50px; } .history-flow .left.right .div-line::after { left: -3px; } .history-flow p { color: #333; } .history-flow p:not(:last-child) { margin-bottom: 15px; } .history-flow .div-line { position: relative; width: 480px; height: 1px; background-color: #ddd; margin: 20px 0; } .history-flow .div-line::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -3px; width: 6px; height: 6px; border-radius: 50vh; background-color: #ddd; } .history-flow figure { padding-left: 50px; padding-top: 50px; } @media all and (max-width: 1000px) { .history-flow { width: 100%; } .history-flow::before { content: ""; display: none; } .history-flow .left { flex-direction: column; width: 100%; padding: 25px 0; } .history-flow .left.right { flex-direction: column; } .history-flow .left.right .info { margin-right: 0; } .history-flow .left.right figure { padding-right: 0; } .history-flow p { font-size: 16px; line-height: 24px; } .history-flow figure { padding: 0; width: 100%; margin-top: 24px; } .history-flow figure img { width: 100%; } .history-flow .div-line { width: 100%; } .history-flow .div-line:after { display: none; } } .map-container iframe { width: 100%; } .si-anode-spec-grid { display: flex; justify-content: space-between; max-width: 1420px; width: 100%; } .si-anode-spec-grid li { display: flex; flex-direction: column; position: relative; text-align: center; width: 290px; } .si-anode-spec-grid li .h-ani { overflow: hidden; position: relative; margin: .5rem; width: 280px; height: 280px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .si-anode-spec-grid li .h-ani img { width: inherit; height: inherit; } .si-anode-spec-grid li .h-ani .bg { width: calc(100% - 16px); height: calc(100% - 16px); border-radius: 100%; overflow: hidden; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: linear-gradient(253deg, #D42A49 5.57%, #FFF 75.95%); animation: turn 2s linear infinite; -webkit-animation: turn 2s linear infinite; position: absolute; top: 7px; left: 7px; } .si-anode-spec-grid li .h-ani .s-img { display: none; } .si-anode-spec-grid li .h-ani:hover { box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.06); } .si-anode-spec-grid li .h-ani:hover img { z-index: 99; overflow: hidden; } .si-anode-spec-grid li .h-ani:hover img.f-img { display: none; } .si-anode-spec-grid li .h-ani:hover img.s-img { display: block; } .si-anode-spec-grid li .h-ani:hover .figcaption { color: #D42A49; } .si-anode-spec-grid li .figure { position: relative; width: inherit; height: inherit; } .si-anode-spec-grid li .figure .figcaption { position: absolute; top: 78%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 1.25rem; font-weight: 400; } @keyframes turn { 0% { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } .si-anode-spec-grid li .item-desc { align-self: flex-start; color: #000; font-size: 1.125rem; line-height: 1.875rem; font-weight: 300; margin-top: 20px; width: 100%; } @media (max-width: 1300px) { .si-anode-spec-grid li .h-ani { margin: 0 auto; width: 200px; height: 200px; } } /* @media (max-width: 1200px) { } */ @media (max-width: 1000px) { .si-anode-spec-grid { flex-direction: column; align-items: center; gap: 60px; } .si-anode-spec-grid li .item-desc { margin-top: 20px; } } .fullpage-container { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; } .main-section { display: flex; flex-direction: column; align-items: center; justify-content: center; /* gap: 80px; */ gap: 60px; height: 100vh; width: 100%; } .main-section.section1 { padding: 0; } .main-section.section2 { background-image: url("../images/section-bg.svg"); background-repeat: no-repeat; background-position: bottom center; } .main-section.section4 { position: relative; height: auto; min-height: 100vh; /* padding-bottom: 120px; */ } .main-section.section4::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 60%; background-color: #FBFBFB; z-index: -1; } @media (max-width: 1300px) { .main-section { gap: 30px; } } @media (max-width: 1200px) { .main-section.section4::before { height: 70vh; } } @media (max-width: 1200px) { .main-section.section4 { gap: 60px; } } .main-section.section5 { height: auto; min-height: 100vh; background-color: #FBFBFB; } @media (max-width: 1300px) { .main-section { padding-left: 24px; padding-right: 24px; } } @media (max-width: 1200px) { .main-section { height: unset; padding: 100px 24px; } } .main-section-header { text-align: center; /* margin-top: 14.81vh; 24.03.07*/ margin-top: 50px; } .main-section.section2 .main-section-header { margin-top: 100px;/*24.03.07*/ } .main-section-header.space-between { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; text-align: left; padding: 0 24px; max-width: 1548px; /* margin: 14.81vh auto 0; 24.03.07*/ margin: 80px auto 0; } @media (min-width: 1921px) { .main-section-header { margin: 0 auto; } .main-section-header.space-between { margin: 0 auto; } } @media (max-width: 1300px) { .main-section-header { margin-top: 0; } .main-section-header.space-between { margin: 9vh auto 0; } } @media (max-width: 1000px) { .main-section-header.space-between { text-align: center; display: block; } } .main-section-header .subtitle { font-weight: 600; font-size: 1.125rem; line-height: 1.3125rem; } .main-section-header .title { display: inline-block; position: relative; font-weight: 700; font-size: 3.75rem; line-height: 4.5625rem; margin-top: 20px; width: -moz-fit-content; width: fit-content; } .main-section-header .title.grap-center br { display: none; } @media (max-width: 1200px) { .main-section-header .title.grap-center br { display: block; } .main-section-header .title.grap-center::after { right: -36px; } } .main-section-header .subinfo { font-weight: 300; font-size: 1.5rem; line-height: 1.4em; margin-top: 40px; } .main-section-header .btn-04 { display: inline-block; margin-top: 40px; } .main-product-item { display: flex; align-items: center; justify-content: center; /* padding: 80px 50px 50px 80px; 24.03.07*/ padding: 20px 50px 20px 80px; margin-right: 190px; gap: 0 100px; } @media (max-width: 1300px) { .main-product-item { gap: 0 30px; margin-right: 40px; padding: 40px 50px; } } @media (max-width: 1000px) { .main-product-item { padding-left: 0; flex-direction: column; justify-content: center; padding: 24px; margin-right: 0; } } .main-product-item-figure { display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12); max-width: 700px; width: 100%; height: 557px; position: relative; padding: 120px; } @media (max-width: 1300px) { .main-product-item-figure { max-width: 500px; height: 430px; } } @media (max-width: 1000px) { .main-product-item-figure { padding: 30px; height: 310px; } } .main-product-item-figure:hover .btn-04 { opacity: 1; } .main-product-item-figure:hover .btn-04:hover { background-color: #fff; } .main-product-item-figure figure img { width: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } @media (max-width: 1200px) { .main-product-item-figure figure { width: 100%; height: 100%; } } .main-product-item-figure .btn-04 { white-space: nowrap; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; border-color: white; } @media (max-width: 1200px) { .main-product-item-figure .btn-04 { opacity: 1; } } .fp-auto-height.sec6 { padding-top: 100px; background-color: #fbfbfb; } @media (max-width: 1000px) { .fp-auto-height.sec6 { padding-top: 0; } } .product-divider { width: 1px; height: 557px; background-color: #e6e6e6; } @media (max-width: 1300px) { .product-divider { display: none; } } .product-desc { color: #333; max-width: 520px; text-align: left; } @media (max-width: 1200px) { .product-desc { margin-top: 50px; } } .product-desc .product-title { font-size: 3rem; font-weight: 900; } .product-desc .product-info { font-size: 1.375rem; font-weight: 300; line-height: 2.125rem; margin-top: 20px; } .product-desc .dl-wrapper { margin-top: 60px; } @media (max-width: 1300px) { .product-desc .dl-wrapper { margin-top: 30px; } } @media (max-width: 1200px) { .product-desc .dl-wrapper { margin-top: 30px; } } .product-desc dl:not(:last-child) { margin-bottom: 20px; } .product-desc dl dt { font-size: 1.25rem; font-weight: 600; line-height: 2rem; } .product-desc dl dd { font-size: 1.125rem; font-weight: 200; line-height: 1.875rem; margin-top: 5px; } .btn-03 { display: inline-block; font-weight: 400; font-size: 1rem; line-height: 1.1875rem; border-radius: 5px; padding: 12px 30px; border: 1px solid white; border-radius: 5px; color: white; } .btn-03:hover { background-color: #282595; border-color: #282595; } .btn-04 { display: inline-block; font-weight: 400; font-size: 1rem; line-height: 1.1875rem; border-radius: 5px; padding: 12px 30px; border: 1px solid #888; color: #888; } .btn-04:hover { border-color: #000; color: #000; } .btn-06 { display: inline-block; color: #ddd; font-size: 0.875rem; line-height: 1.25rem; text-transform: lowercase; font-weight: 500; border-bottom: 1px solid transparent; } .btn-06:hover { font-weight: 400; color: #888; font-size: 1rem; text-transform: capitalize; border-color: #888; } @media (max-width: 1200px) { .btn-06 { font-weight: 400; color: #888; font-size: 1rem; text-transform: capitalize; border-color: #888; } } .rnd-swiper { max-width: 1190px; width: 100%; padding: 0 20px; } .col-box { display: flex; border: 1px solid #f5f5f5; background: #fff; box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.05); padding: 75px 0; margin: 0 auto; } .col-box li { display: flex; flex-direction: column; text-align: center; width: 100%; } .col-box li:not(:last-child) { border-right: 1px solid #e6e6e6; } .col-box li .figcaption { margin-top: 60px; } .col-box li .figcaption .kor { font-size: 1.875rem; font-weight: 500; } .col-box li .figcaption .eng { font-size: 1.125rem; font-weight: 200; line-height: 1.875rem; margin-top: 10px; } @media (max-width:1300px) { .col-box { padding: 50px 0; } } @media (max-width: 767px) { .col-box { flex-direction: column; gap: 10px; padding: 20px 0; } .col-box li:not(:last-child) { border-right: none; } .col-box li .figure { height: 60px; } .col-box li .figcaption { margin-top: 20px; } .col-box li .figcaption .kor { font-size: 1rem } .col-box li .figcaption .eng { font-size: 1rem } } .rnd-col { display: flex; gap: 50px; padding: .18px 0; } .rnd-col .col { box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.05); } .rnd-col .col img { display: block; } .rnd-col .col .figcaption { font-size: 1.875rem; font-weight: 500; padding: 18px 0; text-align: center; } @media (max-width: 1300px) { .rnd-col .col .figcaption { padding: 9px 0; } } @media (max-width: 767px) { .rnd-col { flex-direction: column; margin: 0 auto; width: 77%; min-width: 270px; } .rnd-col .col img { width: 100%; } .rnd-col .col .figcaption { font-size: 1rem; } } .center-grid { display: grid; grid-template-columns: repeat(4, minmax(200px, 371px)); gap: 12px; justify-content: center; } @media (max-width: 1000px) { .center-grid { display: flex; flex-direction: column; width: 100%; } } .center-grid .item { background-color: white; border: 1px solid #e6e6e6; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; } .center-grid .item:hover { box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1215686275); } .center-grid h3 { position: relative; font-size: 1.625rem; line-height: 1.9375rem; font-weight: 500; } .center-grid .company-intro { grid-row: 1/3; text-align: center; height: 540px; } .center-grid .company-intro h3 { margin-top: 30px; } .center-grid .company-intro .line-btn { display: block; margin-top: 30px; visibility: hidden; } .center-grid .company-intro:hover .line-btn { visibility: visible; } @media (max-width: 1000px) { .center-grid .company-intro { height: 400px; } } .center-grid .patents { height: 180px; } .center-grid .patents .line-btn { display: block; font-weight: 500; font-size: 0.875rem; line-height: 1.0625rem; color: #ddd; margin-top: 10px; border: none; padding: 0; } .center-grid .patents:hover .line-btn { font-weight: 400; font-size: 1rem; line-height: 1.1875rem; border-radius: 5px; padding: 12px 30px; border: 1px solid #888; color: #888; margin-top: 15px; } .center-grid .videos { height: 180px; } .center-grid .videos .line-btn { display: block; font-weight: 500; font-size: 0.875rem; line-height: 1.0625rem; color: #ddd; margin-top: 10px; border: none; padding: 0; } .center-grid .videos:hover .line-btn { font-weight: 400; font-size: 1rem; line-height: 1.1875rem; border-radius: 5px; padding: 12px 30px; border: 1px solid #888; color: #888; margin-top: 15px; } .center-grid .community { display: block; grid-column: 2/4; height: 350px; padding: 40px; text-align: left; } .center-grid .community .community-header { display: flex; align-items: center; justify-content: space-between; height: 40px; } /* .center-grid .community .community-header h3:after { content: ""; position: absolute; top: 0; right: -20px; background: url("../images/icon-link.svg") no-repeat; background-size: 10px 10px; width: 10px; height: 10px; } */ .center-grid .community .community-board-list { font-size: 1.125rem; line-height: 1.875rem; font-weight: 200; color: #333; margin-top: 10px; } @media (max-width: 1200px) { .center-grid .community .community-board-list { font-size: 1rem; } } .center-grid .community .community-board-list li { padding: 12px 0; border-bottom: 1px solid #ddd; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .center-grid .community .community-board-list span { font-weight: 400; padding: 0 10px; border-right: 1px solid #333; border-left: 1px solid #333; margin-right: 10px; } .center-grid .community .community-more { display: block; font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; color: #ddd; border: none; padding: 0; } .center-grid .community:hover .community-more { font-weight: 400; font-size: 1rem; line-height: 1.25rem; text-transform: capitalize; text-decoration: underline; color: #888; } .center-grid .buying { height: 180px; margin-top: 12px; } .center-grid .contact { grid-column: 4; grid-row: 1/3; border: none; display: flex; flex-direction: column; } .center-grid .contact .inner-contact { border: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 350px; background-color: white; cursor: pointer; } .center-grid .contact .inner-contact h3 { font-weight: 600; margin-top: 26px; } .center-grid .contact .inner-contact:hover { box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1215686275); } .center-grid .contact .inner-contact .line-btn { display: block; font-weight: 500; font-size: 0.875rem; line-height: 1.0625rem; color: #ddd; margin-top: 10px; border: none; padding: 0; } .center-grid .contact .inner-contact:hover .line-btn { font-weight: 400; font-size: 1rem; line-height: 1.1875rem; border-radius: 5px; padding: 12px 30px; border: 1px solid #888; color: #888; margin-top: 15px; } .center-grid .contact .more-view { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2.5rem; line-height: 3rem; color: #ddd; } @media (max-width: 1200px) { .center-grid .contact .more-view { margin-top: 40px; } } .center-grid .btn-06 { margin-top: 10px; } .view-page { position: relative; } .view-page .qna-tit { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-top: 1px solid #888; border-bottom: 1px solid #888; } .view-page .qna-tit .m-tit { font-size: 20px; font-weight: 600; } .view-page .qna-tit .qna-info { display: flex; } .view-page .qna-tit .qna-info p { font-size: 18px; color: #333; margin: 0 20px; position: relative; } .view-page .qna-tit .qna-info p::before { content: ""; width: 1px; height: 20px; background: #888; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .view-page .qna-tit .qna-info p:last-child { margin-right: 0; } .view-page .main-txt { padding: 20px; font-size: 18px; color: #333; min-height: 400px; } .view-page .file { display: flex; padding: 20px; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; } .view-page .file p { margin: 0 20px; position: relative; } .view-page .file p::before { content: ""; width: 1px; height: 20px; background: #E6E6E6; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .view-page .file p:first-child { margin-left: 0; } .view-page .file p:first-child::before { display: none; } .view-page .file p a { font-weight: 300; } .view-page .file p.download { font-weight: 300; color: #888; } .view-page .submit-btn { position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); margin-top: 52px; margin-left: 0; } @media (max-width: 767px) { .view-page .qna-tit { display: block; } .view-page .qna-tit .m-tit { font-size: 18px; } .view-page .qna-tit .qna-info { margin-top: 5px; } .view-page .qna-tit .qna-info p { font-size: 13px; margin: 0 10px; } .view-page .qna-tit .qna-info p::before { left: -10px; height: 13px; } .view-page .main-txt { font-size: 16px; } .view-page .file { display: block; } .view-page .file p { margin: 5px 0; } .view-page .file p::before { display: none; } } .comp-bg { background-color: gray; } .swiper-pagination { display: flex; align-items: center; justify-content: center; bottom: 25% !important; left: -19.5% !important; } @media (min-width: 1921px) { .swiper-pagination { left: -14.9% !important; } } @media (max-width: 1300px) { .swiper-pagination { left: -24.9% !important; bottom: 15% !important; } } @media (max-width: 1200px) { .swiper-pagination { bottom: 13px !important; left: 0 !important; } } .swiper-pagination-bullet { transition: width 0.3s, height 0.3s; width: 60px; height: 2px; background-color: white; border-radius: 0; } .swiper-pagination-bullet-active { width: 100px; height: 4px; background-color: white; } .header-anchor { z-index: 1; position: fixed; top: 0; left: 0; right: 0; max-width: 1612px; width: 100%; margin: 0 auto; touch-action: none; } .fullpage-menu { position: absolute; top: 140px; right: -7%; z-index: 10; margin-right: 24px; } .fullpage-menu .menu-links { fill: #EFEFEF; } .fullpage-menu .active { fill: black; } @media (max-width: 1200px) { .fullpage-menu { display: none; } } .checkbox-default input[type=checkbox] { display: none; } .checkbox-default input[type=checkbox]+label { font-size: 1.125rem; line-height: 1.875rem; font-weight: 400; color: #333; position: relative; padding-left: 30px; cursor: pointer; } .checkbox-default input[type=checkbox]+label::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background-image: url("../images/checkbox-unchecked.svg"); width: 18px; height: 18px; } .checkbox-default input[type=checkbox]:checked+label::before { background-image: url("../images/checkbox-checked.svg"); } .back-to-top-btn { position: fixed; right: 51px; bottom: 95px; z-index: 10; cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 1s; } .back-to-top-btn.show { visibility: visible; opacity: 1; } @media (max-width: 1200px) { .back-to-top-btn { right: 5%; bottom: 8%; } .back-to-top-btn img { width: 50px; } } .main-swiper { width: 100%; height: 100svh; } .main-swiper .slide1 { background-image: url("../images/main-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; } .main-swiper .slide2 { background-image: url("../images/main-bg2.png"); background-repeat: no-repeat; background-size: cover; background-position: center; } .main-swiper .slide3 { background-image: url("../images/main-bg3.png"); background-repeat: no-repeat; background-size: cover; background-position: center; } .main-swiper .inner-col1 { display: flex; width: 100%; height: 100svh; } .main-swiper .inner-col1 .left { flex: 1; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(50px); display: flex; align-items: center; justify-content: flex-end; } .main-swiper .inner-col1 .left .left-title-container { position: relative; width: 760px; text-align: center; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; } .main-swiper .inner-col1 .left .left-title-container .title { font-size: 4.375rem; font-weight: 300; text-transform: uppercase; } .main-swiper .inner-col1 .left .left-title-container .subtitle { font-size: 2.5rem; line-height: 3.125rem; font-weight: 700; margin: 40px 0; } .main-swiper .inner-col1 .right { flex: 1; display: flex; align-items: center; justify-content: flex-start; } .main-swiper .inner-col1 .right .right-title-container { max-width: 806px; width: 100%; height: 780px; text-align: right; padding-right: 25px; margin-top: 90px; color: white; } .main-swiper .inner-col1 .right .right-title-container .subtitle { font-size: 2.25rem; } .main-swiper .inner-col1 .right .right-title-container .title { font-size: 7.5rem; font-weight: 700; } @media (max-width: 1300px) { .main-swiper .inner-col1 .left .left-title-container { width: 640px; flex: 1; } .main-swiper .inner-col1 .right .right-title-container { max-width: 640px; width: 100%; flex: 1; padding-right: 24px; margin-top: 45%; } } @media (max-width: 1200px) { .main-swiper { padding: 0; } .main-swiper .inner-col1 { flex-direction: column; } .main-swiper .inner-col1 .left { order: 2; } .main-swiper .inner-col1 .left .left-title-container { width: 100%; height: unset; gap: 24px; } .main-swiper .inner-col1 .left .left-title-container .subtitle { font-size: 1.25rem; line-height: 1.4em; font-weight: 700; margin: 0; } .main-swiper .inner-col1 .left .left-title-container .title { font-size: 2.1875rem; font-weight: 300; } .main-swiper .inner-col1 .right { order: 1; } .main-swiper .inner-col1 .right .right-title-container { width: 100%; height: unset; margin-top: 61px; } .main-swiper .inner-col1 .right .right-title-container .subtitle { font-size: 1.25rem; } .main-swiper .inner-col1 .right .right-title-container .title { font-size: 4.25rem; } } @media (max-width: 1200px) { .fp-scrollable.fp-responsive .fp-is-overflow.fp-section:not(.fp-auto-height):not([data-percentage]), .fp-scrollable .fp-section:not(.fp-auto-height):not([data-percentage]), .fp-scrollable .fp-slide:not(.fp-auto-height):not([data-percentage]) { min-height: unset !important; } .fp-scrollable.fp-responsive .fp-is-overflow.fp-section, .fp-scrollable .fp-section, .fp-scrollable .fp-slide { height: unset !important; } .fp-overflow { max-height: unset !important; } } .allinfo { gap: 50px; } .allinfo .page-title.center { border-bottom: none; padding-bottom: 0; } .allinfo .prov { width: 100%; padding: 50px 30px; border: 1px solid #E6E6E6; } .allinfo .prov p { font-weight: 200; margin-bottom: 20px; line-height: 30px; } .allinfo .prov .small { font-weight: 500; } .allinfo .prov .big { font-weight: 700; } .allinfo .prov .red { font-size: 28px; font-weight: 600; color: #D42A49; } .allinfo .prov.center-txt { text-align: center; } @media (max-width: 1200px) { .allinfo { gap: 40px; } .allinfo .page-title h2 { font-size: 2.4rem; } } .red { color: #D42A49; } /* 모달 */ .modal-wrap { z-index: 9000; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .modal { position: absolute; left: 50%; top: 50%; width: 95%; max-width: 700px; max-height: 90vh; background-color: #fff;/*24.03.13*/ transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .modal iframe{ width: 100%; height: 500px; }/*24.03.15*/ .modal-inner { position: relative; } .modal-inner >.modal-close{/*24.03.13*/ position: absolute; right: 5px; top: 5px; padding: 10px; } .modal-body { overflow: hidden; display: flex; justify-content: center; align-items: center; padding: 20px; height: 100%; /* background-color: #fff; 24.03.13*/ } .modal-footer{ display: flex; justify-content: space-between; font-size: 0; }/*24.03.13*/ .modal-footer .btn{ flex-basis: 50%; height: 30px; line-height: 30px; text-align: center; font-size: 13px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } /*24.03.13*/ .modal-footer .modal-today-close{ color: #fff; background-color:#AD0031; } .modal-footer .modal-close{ color: #000; background-color:#E6E6E6; } /* 전송확인 */ .alert-wrap { z-index: 9000; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.05); } .alert { position: absolute; left: 50%; top: 50%; padding: 40px 70px; width: 80%; max-width: 323px; text-align: center; background-color: #fff; border-radius: 5px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10); transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .alert p { margin: 20px 0; line-height: 1.5; font-size: 22px; font-weight: 500; } .alert-close { display: inline-block; margin: 0 auto; padding: 6px 17.5px; font-size: 14px; font-weight: 600; color: #D42A49; border: 1px solid #D42A49; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } @media (max-width:1000px) { .alert { padding: 40px 20px; } .modal iframe{ width: 100%; height: 350px; }/*24.03.15*/ } .select-wrap { position: relative; } .select-wrap .select-box{ position: relative; border: 1px solid #e6e6e6; padding: 8px 20px; max-width: 600px; width: 100%; height: 42px; } .select-wrap .select-box .select{ max-width: calc(100% - 37px); } .select-wrap .select-btn{ z-index: 1; position: absolute; right: 0; top:0; padding: 0; border-left: 1px solid #e6e6e6; width: 36px; height: 100%; } .select-wrap .select-btn img{ transform: rotate(0); transition: transform .5s; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transition: transform .5s; -moz-transition: transform .5s; -ms-transition: transform .5s; -o-transition: transform .5s; } .select-wrap.active .select-btn img{ transform: rotate(180deg); transition: transform .5s; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } .select-wrap .option{ display: none; position: absolute; left:0; top:45px; max-width: 600px; width: 100%; border: 1px solid #e6e6e6; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } .select-wrap .option li{ padding: .5rem 1rem; background-color: #fff; } .select-wrap .option li:hover{ background-color: #ddd; } .select-zindex{ z-index: 10; position: relative; }