@charset "UTF-8";
/* Reset */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
*:before,
*:after { -webkit-box-sizing: inherit; box-sizing: inherit; }
a { color: inherit; text-decoration: none; outline: 0; }
img { max-width: 100%; height: auto; border: 0; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
input { font-family: inherit; }
select { font-family: inherit; }
textarea { font-family: inherit; resize: vertical; }
button { font-family: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; outline: 0; }
/* Fonts */
@font-face { font-family: Pretendard; font-weight: 200; src: url("../fonts/Pretendard-ExtraLight.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 300; src: url("../fonts/Pretendard-Light.woff2") format("woff2"); }
@font-face { font-display: swap; font-family: Pretendard; font-weight: 400; src: url("../fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 500; src: url("../fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 600; src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 700; src: url("../fonts/Pretendard-Bold.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 800; src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: Pretendard; font-weight: 900; src: url("../fonts/Pretendard-Black.woff2") format("woff2"); }
@font-face { font-family: SUIT; src: url("../fonts/SUIT-Variable.woff2") format("woff2-variations"); font-weight: 100 900; }
@font-face { font-family: Montserrat; src: url("../fonts/Montserrat-VF.woff2") format("woff2-variations"); font-weight: 100 1000; }
/* Helper Classes */
.sr-text { display: block; position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; font-size: 1px; color: transparent; white-space: nowrap; overflow: hidden; border: 0; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.lg-hidden { display: none !important; }
@media screen and (max-width:1024px) {
.lg-hidden { display: block !important; }
}
@media screen and (max-width:1024px) {
.sm-hidden { display: none !important; }
}
/* Animation */
@-webkit-keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
@-webkit-keyframes floating {
0%,
100% { -webkit-transform: translateY(0); transform: translateY(0); }
50% { -webkit-transform: translateY(7px); transform: translateY(7px); }
}
@keyframes floating {
0%,
100% { -webkit-transform: translateY(0); transform: translateY(0); }
50% { -webkit-transform: translateY(7px); transform: translateY(7px); }
}
@-webkit-keyframes floatingL {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(-4px, 6px); transform: translate(-4px, 6px); }
}
@keyframes floatingL {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(-4px, 6px); transform: translate(-4px, 6px); }
}
@-webkit-keyframes floatingR {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(4px, 6px); transform: translate(4px, 6px); }
}
@keyframes floatingR {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(4px, 6px); transform: translate(4px, 6px); }
}
@-webkit-keyframes floatingL2 {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(-4px, -6px); transform: translate(-4px, -6px); }
}
@keyframes floatingL2 {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(-4px, -6px); transform: translate(-4px, -6px); }
}
@-webkit-keyframes floatingR2 {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(4px, -6px); transform: translate(4px, -6px); }
}
@keyframes floatingR2 {
0%,
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
50% { -webkit-transform: translate(4px, -6px); transform: translate(4px, -6px); }
}
@-webkit-keyframes rotate180 {
0% { -webkit-transform: rotate(0); transform: rotate(0); }
100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
@keyframes rotate180 {
0% { -webkit-transform: rotate(0); transform: rotate(0); }
100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
}
@-webkit-keyframes dot-outer {
0% { opacity: 0.2; -webkit-transform: scale(1); transform: scale(1); }
50% { opacity: 0.2; -webkit-transform: scale(1.61); transform: scale(1.61); }
100% { opacity: 0; -webkit-transform: scale(2.61); transform: scale(2.61); }
}
@keyframes dot-outer {
0% { opacity: 0.2; -webkit-transform: scale(1); transform: scale(1); }
50% { opacity: 0.2; -webkit-transform: scale(1.61); transform: scale(1.61); }
100% { opacity: 0; -webkit-transform: scale(2.61); transform: scale(2.61); }
}
@-webkit-keyframes dot {
0%,
100% { -webkit-transform: scale(0.8); transform: scale(0.8); }
50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes dot {
0%,
100% { -webkit-transform: scale(0.8); transform: scale(0.8); }
50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
/* Button */
.btn-done { display: inline-block; min-width: 11.3636363636em; padding: 1.2272727273em 1.2727272727em; font-size: 1.375rem; font-weight: 700; color: #fff; letter-spacing: -0.05em; border: 0; border-radius: 0.625rem; background: var(--color-point); text-align: center; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-done:hover { background-color: var(--color-hover); }
@media screen and (max-width:1024px) {
.btn-done { min-width: 10.6666666667em; padding: 1em 1.3333333333em; font-size: 0.9375rem; border-radius: 0.3333333333em; }
}
.btn-cancel { display: inline-block; min-width: 11.3636363636em; padding: 1.2272727273em 1.2727272727em; font-size: 1.375rem; font-weight: 700; color: #fff; letter-spacing: -0.05em; border: 0; border-radius: 0.625rem; background: var(--color-gray); text-align: center; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-cancel:hover { background-color: #404344; }
@media screen and (max-width:1024px) {
.btn-cancel { min-width: 10.6666666667em; padding: 1em 1.3333333333em; border-radius: 0.3333333333em; }
}
.btn-download { display: inline-block; position: relative; width: 14.25em; padding: 0 2.125em 0 1.125em; font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; line-height: 2.375; border: 1px solid; background: #fff; vertical-align: middle; }
.btn-download:after { content: ""; display: block; position: absolute; top: 0; right: 0.5625em; bottom: 0; width: 1.5em; height: 1.5em; margin: auto; background: url("../img/ic_download.svg") no-repeat 0 0; background-size: contain; }
.btn-download:hover { color: #fff; border-color: var(--color-point); background-color: var(--color-point); }
.btn-download:hover:after { -webkit-filter: brightness(0) saturate(100%) invert(97%) sepia(97%) saturate(13%) hue-rotate(224deg) brightness(104%) contrast(105%); filter: brightness(0) saturate(100%) invert(97%) sepia(97%) saturate(13%) hue-rotate(224deg) brightness(104%) contrast(105%); }
@media screen and (max-width:1024px) {
.btn-download { width: 13.0769230769em; font-size: 0.8125rem; }
}
.btn-download-lg { display: inline-block; position: relative; min-width: 11.3636363636em; padding: 1.2272727273em 2.9090909091em 1.2272727273em 1.2727272727em; font-size: 1.375rem; font-weight: 700; color: #fff; letter-spacing: -0.05em; border: 0; border-radius: 0.625rem; background: var(--color-point); text-align: left; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-download-lg:after { content: ""; display: block; position: absolute; top: 0; right: 0.9090909091em; bottom: 0; width: 1.0909090909em; height: 1.0909090909em; margin: auto; background: url("../img/ic_download_wh.svg") no-repeat 0 0; background-size: contain; }
.btn-download-lg:hover { background-color: var(--color-hover); }
@media screen and (max-width:1024px) {
.btn-download-lg { min-width: 10.6666666667em; padding: 1em 2.7333333333em 1em 1.3333333333em; font-size: 0.9375rem; border-radius: 0.3333333333em; }
}
.btn-rounded { display: block; width: 13.6363636364em; margin: 1em auto 0; padding: 0 1em; font-size: 1.375rem; font-weight: 800; line-height: 3.0909090909; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 100px; text-align: center; }
.btn-rounded:hover { color: var(--color-point); border-color: rgb(255, 255, 255); background-color: #fff; }
@media screen and (max-width:1024px) {
.btn-rounded { width: 13.4666666667em; margin-top: 1.3333333333em; font-size: 0.9375rem; }
}
.btn-box { display: inline-block; padding: 0 2.2727272727em; font-size: 1.375rem; font-weight: 700; line-height: 3.5454545455; border: 1px solid #fff; border-radius: 0.4545454545em; vertical-align: middle; }
.btn-box:hover { color: var(--color-point); background: #fff; }
@media screen and (max-width:1024px) {
.btn-box { padding: 0 2.4666666667em; font-size: 0.9375rem; line-height: 3.2; border-radius: 0.3333333333em; }
}
.btn-wrap { margin-top: 3.125rem; text-align: center; }
@media screen and (max-width:1024px) {
.btn-wrap { margin-top: 1.5625rem; }
}
.action-group { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 3.125rem -0.3125rem -0.625rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.action-group.pull-right { max-width: 18.75rem; position: absolute; bottom: -1.25rem; right: 0; margin-top: 0; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.action-group [class*=btn-] { margin: 0 0.3125rem 0.625rem; }
@media screen and (max-width:1024px) {
.action-group { margin: 1.5625rem -0.3125rem -0.625rem; }
.action-group.pull-right { max-width: none; position: static; bottom: 0; margin-top: 1.5625rem; }
}
/* Forms */
.form-selectbox { display: inline-block; position: relative; width: 100%; height: 3.75rem; vertical-align: middle; }
.form-selectbox:after { content: ""; display: block; position: absolute; top: 0; right: 1.875rem; bottom: 0; width: 1.125rem; height: 0.625rem; margin: auto; background: url("../img/ic_caret.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.form-selectbox select { width: 100%; height: 100%; padding: 0 3.125rem 0 1.5rem; font-size: inherit; font-weight: 500; border: 1px solid #C2C2C2; border-radius: 0; background: #fff; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s; transition: border 0.3s, -webkit-box-shadow 0.3s; transition: border 0.3s, box-shadow 0.3s; transition: border 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.form-selectbox select:focus { border-color: var(--color-point); -webkit-box-shadow: inset 0 0 0 3px var(--color-point); box-shadow: inset 0 0 0 3px var(--color-point); }
.form-selectbox select:invalid,
.form-selectbox option[disabled] { color: #C2C2C2; }
.form-selectbox option { font-size: 1rem; color: #000; }
.form-selectbox select:focus { border-color: var(--color-point); -webkit-box-shadow: inset 0 0 0 3px var(--color-point); box-shadow: inset 0 0 0 3px var(--color-point); }
@media screen and (max-width:1024px) {
.form-selectbox { height: 2.5rem; }
.form-selectbox:after { right: 0.75rem; width: 0.625rem; height: 0.375rem; }
.form-selectbox select { padding: 0 1.875rem 0 0.75rem; }
.form-selectbox select:focus { border-color: var(--color-point); -webkit-box-shadow: inset 0 0 0 2px var(--color-point); box-shadow: inset 0 0 0 2px var(--color-point); }
}
.input-wrap { display: inline-block; position: relative; width: 100%; vertical-align: middle; }
/* Dropdown */
.dropdown { position: relative; }
.dropdown-content { position: absolute; top: 100%; left: 0; min-width: 100%; clip-path: polygon(0 0, 100% 0, 100% 0, 0% 0); pointer-events: none; visibility: hidden; -webkit-transition: clip-path 0.3s, visibility 0s 0.3s; transition: clip-path 0.3s, visibility 0s 0.3s; }
.dropdown-content.on { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); -webkit-transition-delay: 0s; transition-delay: 0s; pointer-events: initial; visibility: visible; }
/* List */
.dot-list { list-style: none; color: var(--color-gray); line-height: 1.3888888889; }
.dot-list li { padding-left: 1em; }
.dot-list li:before { content: "・"; margin-left: -1em; }
/* Accordion List */
.list-accordion-panel { display: none; position: relative; }
.list-accordion-panel.on { display: block; }
/* Table */
.table { border-left: hidden; border-right: hidden; }
.table caption { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.table th,
.table td { height: 3.75rem; padding: 0.625rem 0.25rem; font-size: 1.125em; border-bottom: 1px solid #D9D9E4; text-align: center; }
.table td { background: #fff; }
.table .text-left,
.table .text-right { padding-left: 2.375%; padding-right: 2.375%; }
.table thead th { font-weight: 500; color: #fff; border-left: 1px solid #D9D9E4; border-right: 1px solid #D9D9E4; background: #949494; }
.table thead tr:only-child th { border: 0; }
.table tbody th { font-weight: 400; background: #F7F7F7; }
.table tfoot td { font-weight: 800; background: #F7F7F7; }
@media screen and (max-width:1024px) {
.table th,
.table td { height: 3.0769230769em; font-size: 0.8125em; }
.table .text-left,
.table .text-right { padding-left: 1.6%; padding-right: 1.6%; }
}
/* Tab List */
.tab-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.5625rem; font-weight: 700; color: #C2C2C2; line-height: 1; text-align: center; }
.tab-list > li { min-height: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.tab-list .tab { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; height: 100%; padding: 0 0 1.2em; -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; border-bottom: 1px solid #F2F2F2; background: #fff; -webkit-transition: color 0.3s; transition: color 0.3s; }
.tab-list .tab:hover { color: #000; }
.tab-list .tab:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 4px solid #4F5556; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.tab-list .on .tab { color: #000; border-color: transparent; pointer-events: none; }
.tab-list .on .tab:after { opacity: 1; }
@media screen and (max-width:1024px) {
.tab-list { font-size: 1.09375rem; }
.tab-list .tab { padding-bottom: 0.5142857143em; }
.tab-list .tab:after { border-width: 2px; }
}
.tab-panel { position: relative; padding-top: 3.5625rem; }
.tab-panel[role=tabpanel] { display: none; }
.tab-panel.on { display: block; }
/* Horizontal Scrollbar */
.scroll-container { position: relative; padding-bottom: 1px; overflow: hidden; pointer-events: none; }
.scroll-container .scroll-content { position: relative; width: 100%; height: 100%; overflow: auto; }
.scroll-container .scroll-content > * { pointer-events: all; }
.scroll-container .scroll-content::-webkit-scrollbar { display: none; }
.scroll-container .progressbar { position: absolute; bottom: 0; left: 0; right: 0; width: 83.3333333333vw; height: 1px; margin: auto; background: #DADADA; overflow: hidden; pointer-events: none; }
.scroll-container .progressbar .bar { position: absolute; top: 0; left: 0; bottom: 0; max-width: 100%; background: #000; }
@media screen and (max-width:1024px) {
.scroll-container { pointer-events: all; }
.scroll-container .scroll-content::-webkit-scrollbar { display: none; }
.scroll-container .progressbar { display: none; }
}
/* 모달팝업 */
.in-modal { overflow: hidden; }
.popup-wrap { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: rgba(0, 0, 0, 0.6); overflow: hidden; pointer-events: none; -webkit-transition: opacity 0.3s 0.2s, visibility 0.3s 0.2s; transition: opacity 0.3s 0.2s, visibility 0.3s 0.2s; visibility: hidden; z-index: 99; }
.popup-wrap:target,
.popup-wrap.in { opacity: 1; pointer-events: initial; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: visible; }
.popup { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 50%; left: 50%; max-width: 90%; max-height: 90%; margin: 0 auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8); -ms-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; z-index: 1; }
.popup-wrap:target,
.in .popup { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.btn-close-popup { position: absolute; top: 0.6875em; right: 0.875em; width: 2.625em; height: 2.625em; border: 0; border-radius: 50%; background: #4F5556 url("../img/ic_close_wh.svg") no-repeat 50% 50%; background-size: 37.2093023256% auto; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-close-popup:hover { background-color: var(--color-point); }
.btn-close-popup:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
@media screen and (max-width:1024px) {
.btn-close-popup { top: 0.3125em; right: 0.375em; width: 1.25em; height: 1.25em; }
}
.popup-header { position: relative; padding: 1.5em 4.625em 1.5em 1.75em; color: #fff; background: var(--color-point); }
.popup-header .btn-close-popup { top: 0; right: 0; height: 100%; border-radius: 0; }
@media screen and (max-width:1024px) {
.popup-header { padding: 0.75em 2.3125em 0.75em 0.875em; }
}
.popup-title { font-size: 1.5625em; font-weight: 700; }
@media screen and (max-width:1024px) {
.popup-title { font-size: 1.125em; }
}
.popup-body { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; overflow: hidden; }
.popup-body .scrollbar-container { position: relative; height: 100%; }
.popup-body .scrollbar-container:hover,
.popup-body .scrollbar-container:active,
.popup-body .scrollbar-container:focus { overflow: auto; }
.popup-body .scrollbar-container::-webkit-scrollbar { width: 0.625rem; }
.popup-body .scrollbar-container::-webkit-scrollbar-button { width: 0.875rem; height: 0.875rem; }
.popup-body .scrollbar-container::-webkit-scrollbar-thumb { background-color: rgba(16, 13, 13, 0.2); border-radius: 100px; border: 0.1875rem solid #fff; opacity: 0; }
/* #Layout */
:root { --color-point: #90001E; --color-hover: #70001E; --color-gray: #4F5556; }
@media screen and (min-width:1920px) {
html { font-size: 0.8333333333vw; }
}
@media screen and (max-width:1400px) {
html { font-size: 1.1428571429vw; }
}
@media screen and (max-width:1024px) {
html { font-size: 1rem; }
}
@media screen and (max-width:414px) {
html { font-size: 3.8647342995vw; }
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100dvh; font-family: Pretendard, sans-serif; color: #000; letter-spacing: -0.01em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; overflow-y: auto; word-break: keep-all; word-wrap: break-word; }
.skip { display: block; position: fixed; top: 1em; left: 1em; padding: 1.4em 2.4em; font-weight: bold; color: #fff; text-align: center; opacity: 0; background: var(--color-point); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); z-index: -1; }
.skip:focus,
.skip:active { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); z-index: 99; }
.container { width: 100%; max-width: 83.3333333333vw; margin: 0 auto; }
@media screen and (max-width:1024px) {
.container { max-width: 90.3381642512vw; }
}
/* Header */
.header { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; top: 0; left: 0; width: 100%; padding-left: 2.7083333333%; color: #fff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; z-index: 10; }
.header:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: -200%; background: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(rgb(0, 0, 0))); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 100%); opacity: 0.8; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: -1; }
@media screen and (max-width:1024px) {
.header { height: 3.5625rem; padding: 0 4.5893719807%; }
}
.header:has(.top-menu:hover),
.header:has(.top-menu:focus-within),.is-scrolled .header { color: inherit; background-color: #fff; }
.header:has(.top-menu:hover):before,
.header:has(.top-menu:focus-within):before,.is-scrolled .header:before { display: none; }
.site-logo { width: 16.3125rem; height: 2.5625rem; overflow: hidden; }
.site-logo a { display: block; position: relative; width: 100%; height: 100%; }
.site-logo span { display: block; width: 100%; height: 100%; overflow: hidden; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
.site-logo span:before,
.site-logo span:after { content: ""; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; -webkit-transition: -webkit-transform 0.2s 0.1s; transition: -webkit-transform 0.2s 0.1s; transition: transform 0.2s 0.1s; transition: transform 0.2s 0.1s, -webkit-transform 0.2s 0.1s; }
.site-logo .light:before,
.site-logo .light:after { background-image: url("../img/site_logo_wh.svg"); }
.site-logo .dark { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.site-logo .dark:before,
.site-logo .dark:after { background-image: url("../img/site_logo.svg"); }
.site-logo a:hover span:before,
.site-logo a:hover span:after { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
@media screen and (max-width:1024px) {
.site-logo { width: 11.9375rem; height: 1.84375rem; margin: 0 auto; }
}
.header:has(.top-menu:hover) .site-logo .light,
.header:has(.top-menu:focus-within) .site-logo .light,.is-scrolled .site-logo .light { opacity: 0; pointer-events: none; }
.header:has(.top-menu:hover) .site-logo .dark,
.header:has(.top-menu:focus-within) .site-logo .dark,.is-scrolled .site-logo .dark { opacity: 1; pointer-events: initial; }
.site-lang { margin-left: 1.6875rem; }
.site-lang .btn-dropdown-trigger { display: block; position: relative; padding: 0 1.125em 0 2em; letter-spacing: -0.03em; line-height: 1.875; border: 0; background: none; }
.site-lang .btn-dropdown-trigger .icon { display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 1.5em; height: 1.5em; margin: auto; background: url("../img/ic_globe_wh.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.site-lang .btn-dropdown-trigger .icon:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/ic_globe.svg") no-repeat 0 0; background-size: contain; opacity: 0; }
.site-lang .btn-dropdown-trigger .caret { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 0.6875em; height: 0.6875em; margin: auto; background: url("../img/ic_caret_xs_wh.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.site-lang .btn-dropdown-trigger .caret:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/ic_caret_xs.svg") no-repeat 0 0; background-size: contain; opacity: 0; }
.site-lang .btn-dropdown-trigger[aria-expanded=true] .caret { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
@media screen and (max-width:1024px) {
.site-lang { margin: 0; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; }
.site-lang .btn-dropdown-trigger { width: 1.375rem; height: 1.375rem; padding: 0; overflow: hidden; }
.site-lang .btn-dropdown-trigger .icon { width: 100%; height: 100%; }
.site-lang .btn-dropdown-trigger .current { position: absolute; top: 0; display: block; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.site-lang .btn-dropdown-trigger .caret { display: none; }
}
.header:has(.top-menu:hover) .site-lang .icon:after,
.header:has(.top-menu:focus-within) .site-lang .icon:after,.is-scrolled .site-lang .icon:after { opacity: 1; }
.header:has(.top-menu:hover) .site-lang .caret:after,
.header:has(.top-menu:focus-within) .site-lang .caret:after,.is-scrolled .site-lang .caret:after { opacity: 1; }
.lang-list { width: 100%; margin-top: 0.2857142857em; font-size: 0.875em; color: #fff; letter-spacing: 0; list-style: none; border-radius: 0.3571428571em; overflow: hidden; }
.lang-list li + li { border-top: 1px solid var(--color-gray); }
.lang-list a { display: block; padding: 0.75em 1.4em; text-align: center; background: #000; }
.lang-list a:hover { background-color: var(--color-gray); }
.gnb { margin-left: auto; }
@media screen and (max-width:1024px) {
.gnb { position: absolute; top: 0; right: 0; opacity: 0; pointer-events: none; visibility: hidden; }
}
.btn-show-menu { position: relative; width: 2.125em; height: 2.125em; margin-left: 4.2708333333vw; border: 0; border-radius: 0; background: none; -webkit-box-shadow: none; box-shadow: none; }
.btn-show-menu:before,
.btn-show-menu:after,
.btn-show-menu .liner { display: block; height: 3px; margin: 0 0.25em; border-radius: 20px; background: #fff; }
.btn-show-menu:before,
.btn-show-menu:after { content: ""; position: absolute; left: 0; right: 0; }
.btn-show-menu:before { top: 0.375em; }
.btn-show-menu:after { bottom: 0.375em; }
.btn-show-menu .liner { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(0.6); -ms-transform: scaleX(0.6); transform: scaleX(0.6); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; }
.btn-show-menu:hover .liner { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
@media screen and (max-width:1600px) {
.btn-show-menu { margin-left: 2.5vw; }
}
@media screen and (max-width:1300px) {
.btn-show-menu:before,
.btn-show-menu:after,
.btn-show-menu .liner { height: 2px; }
}
@media screen and (max-width:1024px) {
.btn-show-menu { width: 1.375rem; height: 1.375rem; font-size: 0.5rem; margin-left: 0; letter-spacing: 0.01em;}
}
.header:has(.top-menu:hover) .btn-show-menu:before,
.header:has(.top-menu:hover) .btn-show-menu:after,
.header:has(.top-menu:hover) .btn-show-menu .liner,
.header:has(.top-menu:focus-within) .btn-show-menu:before,
.header:has(.top-menu:focus-within) .btn-show-menu:after,
.header:has(.top-menu:focus-within) .btn-show-menu .liner,.is-scrolled .btn-show-menu:before,.is-scrolled .btn-show-menu:after,.is-scrolled .btn-show-menu .liner { background-color: #000; }
.relate-links { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 2.1875vw; }
.relate-links a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 6.1538461538em; height: 6.1538461538em; font-size: 0.8125rem; font-weight: 500; color: #fff; line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.relate-links a:before { content: ""; display: block; width: 30%; height: 30%; margin: 0 auto 3px; background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
.relate-links li:nth-child(1) a { background-color: var(--color-gray); }
.relate-links li:nth-child(1) a:before { background-image: url("../img/ic_petition.svg"); }
.relate-links li:nth-child(1) a:hover { background-color: #3f3f3f; }
.relate-links li:nth-child(2) a { background-color: #272727; }
.relate-links li:nth-child(2) a:before { background-image: url("../img/ic_nlobby.svg"); }
.relate-links li:nth-child(2) a:hover { background-color: #111; }
@media screen and (max-width:1024px) {
.relate-links { display: none; }
}
.top-menu { --underline-width: 0; --underline-offset-x: 0; --menu-height: 254px; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.1875rem; letter-spacing: 0.02em; line-height: 4.2105263158; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.top-menu:before { content: ""; display: block; position: absolute; bottom: 0; width: var(--underline-width); border-top: 3px solid; -webkit-transform: translateX(var(--underline-offset-x)); -ms-transform: translateX(var(--underline-offset-x)); transform: translateX(var(--underline-offset-x)); -webkit-transition: width 0.4s; transition: width 0.4s; pointer-events: none; z-index: 1; }
.top-menu.has-movement:before { -webkit-transition: width 0.4s, -webkit-transform 0.4s; transition: width 0.4s, -webkit-transform 0.4s; transition: transform 0.4s, width 0.4s; transition: transform 0.4s, width 0.4s, -webkit-transform 0.4s; }
.top-menu:after { content: ""; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: var(--menu-height); background: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 529px 148px 0px rgba(0, 0, 0, 0.01), 0px 339px 136px 0px rgba(0, 0, 0, 0.11), 0px 191px 114px 0px rgba(0, 0, 0, 0.38), 0px 85px 85px 0px rgba(0, 0, 0, 0.64), 0px 21px 47px 0px rgba(0, 0, 0, 0.74); box-shadow: 0px 529px 148px 0px rgba(0, 0, 0, 0.01), 0px 339px 136px 0px rgba(0, 0, 0, 0.11), 0px 191px 114px 0px rgba(0, 0, 0, 0.38), 0px 85px 85px 0px rgba(0, 0, 0, 0.64), 0px 21px 47px 0px rgba(0, 0, 0, 0.74); opacity: 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); visibility: hidden; -webkit-transition: opacity 0.4s, visibility 0s, -webkit-transform 0.4s; transition: opacity 0.4s, visibility 0s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s, visibility 0s; transition: opacity 0.4s, transform 0.4s, visibility 0s, -webkit-transform 0.4s; z-index: -1; }
.top-menu:hover:after,
.top-menu:has(.active):after { opacity: 1; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition: opacity 0.4s 0.3s, visibility 0s, -webkit-transform 0.4s 0.3s; transition: opacity 0.4s 0.3s, visibility 0s, -webkit-transform 0.4s 0.3s; transition: opacity 0.4s 0.3s, transform 0.4s 0.3s, visibility 0s; transition: opacity 0.4s 0.3s, transform 0.4s 0.3s, visibility 0s, -webkit-transform 0.4s 0.3s; visibility: visible; }
.top-menu .btn { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 2.6041666667vw; font-size: inherit; letter-spacing: inherit; line-height: inherit; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 0; background: transparent; }
.top-menu .btn span { font-weight: 200; pointer-events: none; }
.top-menu > li { position: relative; }
.top-menu > li:first-child .btn { padding-left: 0; }
.top-menu > li:last-child .btn { padding-right: 0; }
.top-menu .inner-content { position: absolute; top: 100%; left: 2.6041666667vw; right: 0; min-width: 7.25em; opacity: 0; pointer-events: none; visibility: hidden; }
.top-menu > li:first-child .inner-content { left: 0; }
.top-menu:hover .inner-content,
.top-menu:has(.active) .inner-content { opacity: 1; pointer-events: initial; -webkit-transition: opacity 0.4s 0.3s, visibility 0s; transition: opacity 0.4s 0.3s, visibility 0s; visibility: visible; }
.top-menu .sub-menu { list-style: none; padding: 1.1875em 0 2.1875em; font-size: 0.8421052632em; color: #C2C2C2; letter-spacing: -0.03em; line-height: 2.5; }
.top-menu .sub-menu a { display: inline-block; line-height: 1.1; vertical-align: middle; -webkit-transition: color 0.3s; transition: color 0.3s; }
.top-menu .sub-menu a:hover,
.top-menu .sub-menu a:focus { font-weight: 500; color: #fff; }
@media screen and (max-width:1600px) {
.top-menu > li { min-width: 4.5263157895em; }
.top-menu .btn { padding: 0 1.625vw; }
.top-menu .inner-content { left: 1.625vw; }
}
@media screen and (max-width:1024px) {
.top-menu { display: none; }
.top-menu .inner-content { min-width: 0; }
}
.top-menu:hover .btn span,
.header:has(.top-menu:focus-within) .top-menu .btn span,
.is-scrolled:not(:has(.main-content)) .top-menu .btn span{ -webkit-text-stroke: 0.5px;}
.site-menu { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; padding: 11.2962962963dvh 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; visibility: hidden; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-transition: opacity 0.2s, visibility 0s 0.2s, -webkit-transform 0s 0.2s; transition: opacity 0.2s, visibility 0s 0.2s, -webkit-transform 0s 0.2s; transition: opacity 0.2s, visibility 0s 0.2s, transform 0s 0.2s; transition: opacity 0.2s, visibility 0s 0.2s, transform 0s 0.2s, -webkit-transform 0s 0.2s; z-index: 1; }
.site-menu .container { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.site-menu .menu-list { list-style: 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-flex: 1; -ms-flex: 1; flex: 0.9; }
.site-menu .menu-list > li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 5.3703703704dvh; padding: 0 0 2.7777777778dvh; font-size: 1.3625rem; letter-spacing: 0.02em; color: #fff; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; letter-spacing: -0.03em; line-height: 1.4; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translateY(2.8125rem); -ms-transform: translateY(2.8125rem); transform: translateY(2.8125rem); -webkit-transition: opacity 0s, visibility 0s, -webkit-transform 0s; transition: opacity 0s, visibility 0s, -webkit-transform 0s; transition: opacity 0s, visibility 0s, transform 0s; transition: opacity 0s, visibility 0s, transform 0s, -webkit-transform 0s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.site-menu .menu-list > li:last-child { margin-bottom: 0; }
.site-menu .headline { font-size: 1.2em; line-height: 1; letter-spacing: 0.02em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.site-menu .headline strong { font-weight: inherit; }
.site-menu .list-accordion-title { display: none; }
.site-menu .inner-content { width: 71.875%; margin-left: auto; -webkit-box-flex: 0; -ms-flex: 0 0 71.875%; flex: 0 0 71.875%; }
.site-menu .inner-content[hidden] { display: block; }
.site-menu .sub-menu { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; }
.site-menu .sub-menu > li { min-width: 20%; padding-right: 1em; }
.site-menu .sub-menu a { position: relative; }
.site-menu .sub-menu a:hover { border-bottom: 1px solid #fff; }
.site-menu .child-menu { list-style: none; margin: 0.8888888889em 0 -0.3333333333em; font-size: 0.72em; font-weight: 200; color: rgba(255, 255, 255, 0.5); }
@media screen and (max-width:1024px) {
.site-menu { padding: 9.2633928571dvh 0 8.7053571429dvh; overflow-y: auto; }
.site-menu .container { max-width: 74.7584541063vw; }
.site-menu .menu-list > li { margin-bottom: 3.3482142857dvh; padding-bottom: 3.0133928571dvh; font-size: 0.9375rem; line-height: 1; -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.site-menu .headline { display: none; }
.site-menu .list-accordion-title { display: block; margin-top: auto; }
.site-menu .btn { display: block; position: relative; width: 100%; padding-right: 1em; font-size: 1.6666666667em; border: 0; line-height: inherit; background: transparent; text-align: left; }
.site-menu .btn:after { content: ""; display: block; position: absolute; top: 0; right: 4px; bottom: 0; width: 0.64em; height: 0.36em; margin: auto; background: url("../img/ic_menu_angle.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.site-menu .btn.on:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.site-menu .inner-content { --content-height: 0; width: auto; height: 0; margin: 0; overflow: hidden; -ms-flex-preferred-size: auto; flex-basis: auto; pointer-events: none; visibility: hidden; -webkit-transition: height 0.5s, visibility 0s 0.5s; transition: height 0.5s, visibility 0s 0.5s; }
.site-menu .inner-content.on { height: var(--content-height); pointer-events: initial; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; }
.site-menu .sub-menu { display: block; padding-top: 1.3333333333em; }
.site-menu .sub-menu > li { min-width: 0; padding: 0.8666666667em 0; }
.site-menu .child-menu { font-size: 0.8666666667em; }
.site-menu .child-menu > li { padding: 0.5em 0; }
}
.btn-close-menu { position: absolute; top: 1.5rem; right: 2.6875rem; width: 2.3125rem; height: 2.3125rem; border: 0; border-radius: 3px; background: url("../img/ic_close_wh.svg") no-repeat 50% 50%; background-size: 56.7567567568% auto; opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity 0s 0.2s, -webkit-transform 0s 0.2s; transition: opacity 0s 0.2s, -webkit-transform 0s 0.2s; transition: opacity 0s 0.2s, transform 0s 0.2s; transition: opacity 0s 0.2s, transform 0s 0.2s, -webkit-transform 0s 0.2s; z-index: 1; }
.btn-close-menu:hover { background-color: var(--color-point); }
@media screen and (max-width:1024px) {
.btn-close-menu { top: 0.8928571429dvh; right: 2.4154589372vw; width: 2.125rem; height: 2.125rem; }
}
.is-menu-expanded { overflow: hidden; }
.is-menu-expanded .site-menu { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-delay: 0s; transition-delay: 0s; pointer-events: initial; visibility: visible; }
.is-menu-expanded .site-menu .menu-list > li { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.7s, visibility 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, visibility 0.7s, -webkit-transform 0.7s; transition: opacity 0.7s, visibility 0.7s, transform 0.7s; transition: opacity 0.7s, visibility 0.7s, transform 0.7s, -webkit-transform 0.7s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; visibility: visible; }
.is-menu-expanded .site-menu .menu-list > li:nth-child(2) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.is-menu-expanded .site-menu .menu-list > li:nth-child(3) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
.is-menu-expanded .site-menu .menu-list > li:nth-child(4) { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }
.is-menu-expanded .site-menu .menu-list > li:nth-child(5) { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; }
.is-menu-expanded .site-menu .menu-list > li:nth-child(6) { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; }
.is-menu-expanded .btn-close-menu { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: background-color 0.3s, opacity 0.3s 0.2s, -webkit-transform 0.3s 0.2s; transition: background-color 0.3s, opacity 0.3s 0.2s, -webkit-transform 0.3s 0.2s; transition: background-color 0.3s, opacity 0.3s 0.2s, transform 0.3s 0.2s; transition: background-color 0.3s, opacity 0.3s 0.2s, transform 0.3s 0.2s, -webkit-transform 0.3s 0.2s; }
/* Footer */
.footer { position: relative; margin-top: auto; padding: 4.875rem 0; color: #fff; background: #222; z-index: 1; }
@media screen and (max-width:1024px) {
.footer { padding: 2.75rem 0 1.125rem 0; }
}
.footer-logo { width: 16.3125rem; height: 2.5625rem; }
.footer-logo img { display: block; width: 100%; max-width: none; height: 100%; }
@media screen and (max-width:1024px) {
.footer-logo { width: 11.9375rem; height: 1.84375rem; }
}
.footer-info { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2.8571428571em; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); letter-spacing: -0.03em; line-height: 1.5714285714; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.footer-info p { position: relative; margin-right: 0.5714285714em; padding: 0 0.7142857143em 0 1.4285714286em; background-repeat: no-repeat; background-position: 0 50%; background-size: 1em auto; }
.footer-info p:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; height: 0.7142857143em; margin: auto; border-right: 1px solid rgba(255, 255, 255, 0.3); }
.footer-info p:last-child { margin-right: 0; padding-right: 0; }
.footer-info p:last-child:after { content: none; }
.footer-info .address { background-image: url("../img/ic_pin.svg"); }
.footer-info .tel { background-image: url("../img/ic_tel.svg"); }
.footer-info .fax { background-image: url("../img/ic_fax.svg"); }
@media screen and (max-width:1024px) {
.footer-info { margin-top: 1.25em; font-size: 0.75rem; line-height: 1.4166666667; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.footer-info p { margin-right: 0; padding-right: 0; }
.footer-info p:after { content: none; }
}
.footer .copyright { margin-top: 0.3846153846em; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.4); letter-spacing: -0.03em; line-height: 1.5384615385; }
@media screen and (max-width:1024px) {
.footer .copyright { font-size: 0.6875rem; }
}
.footer .slogan { margin-top: -1.875rem; font-family: Montserrat, sans-serif; font-size: 1.875rem; font-weight: 700; letter-spacing: 0; line-height: 1; opacity: 0.5; white-space: nowrap; float: right; }
.footer .slogan i { display: inline-block; width: 0.3666666667em; height: 1em; line-height: 1; font-style: normal; color: rgba(255, 255, 255, 0); background: url("../img/footer_slogan.svg") no-repeat 50% 0; background-size: contain; vertical-align: middle; }
@media screen and (max-width:1024px) {
.footer .slogan { width: 11.1em; height: 1em; font-size: 0.9375rem; margin-top: 1.2em; }
.footer .slogan i { width: 0.4em; height: 1.0666666667em; margin-top: -2px; }
}
.btn-top { position: absolute; top: 1.75rem; right: 2.25rem; width: 3.375rem; height: 3.375rem; border: 0; border-radius: 50%; background: #000; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.btn-top img { display: block; width: 24.0740740741%; max-width: none; margin: auto; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
.btn-top:hover { background-color: var(--color-point); }
.btn-top:hover img { -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); }
.btn-top.is-ended { position: absolute !important; top: 1.75rem !important; bottom: auto !important; }
@media screen and (max-width:1024px) {
.btn-top { top: 1.0625rem; right: 1.25rem; width: 2.625rem; height: 2.625rem; }
.btn-top.is-ended { top: 1.0625rem !important; }
}
.is-scrolled .btn-top { position: fixed; top: auto; bottom: 1.75rem; }
@media screen and (max-width:1024px) {
.is-scrolled .btn-top { bottom: 1.0625rem; }
}
/* 페이지 공통 레이아웃 */
.page { position: relative; background: #fff; z-index: 1; }
.page-title { font-size: 4rem; font-weight: 800; letter-spacing: 0; line-height: 1.25; }
@media screen and (max-width:1024px) {
.page-title { font-size: 2.5rem; line-height: 1; }
}
.secondary-title { margin-bottom: 0.92em; font-size: 2.5rem; letter-spacing: 0.01em; font-weight: 800; line-height: 1; }
@media screen and (max-width:1024px) {
.secondary-title { margin-bottom: 0.6em; font-size: 1.5625rem; }
}
.tertiary-title { margin-bottom: 0.5em; font-size: 3.125em; font-weight: 900; line-height: 1; text-align: center; }
.tertiary-title small { display: block; font-size: 0.4em; font-weight: 400; line-height: 1.5; }
.tertiary-title .mt20 { margin-top: 1.25em; }
@media screen and (max-width:1024px) {
.tertiary-title { font-size: 1.5625em; }
}
.page-header { position: relative; width: 100%; padding: 17.875rem 0; color: #fff; background: #000; overflow: hidden; z-index: -1; }
.page-header .bg-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; overflow: hidden; z-index: -1; }
.page-header .bg-video video { position: absolute; top: 50%; left: 50%; width: 110%; height: 110%; -o-object-fit: cover; object-fit: cover; transform: translate(-50%, -50%); }
.page-header .bg-video video[poster*=sub_header_bg1_3] { -o-object-position: center 90%; object-position: center 90%; }
.page-header .bg-video:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); }
.page-header .page-title { margin: 0 auto; text-align: center; }
.page-header .current-page { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; margin-top: 0.625rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 200; letter-spacing: -0.02em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.page-header .current-page li { position: relative; padding: 0 0.625em; }
.page-header .current-page li:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; height: 1em; margin: auto; border-right: 1px solid; }
.page-header .current-page li:last-child { font-weight: 700; }
.page-header .current-page li:last-child:after { content: none; }
.page-header .current-page a:hover { border-bottom: 1px solid; }
@media screen and (max-width:1024px) {
.page-header { padding: 13.375rem 0 14.1875rem; }
.page-header .page-title { max-width: 9em; }
.page-header .current-page { font-size: 0.75rem; }
}
@media screen and (max-width:700px) {
.page-header .bg-video video[poster*=bg6_1] { left: auto; right: -15%; width: auto; min-width: 100%; height: 100%; }
}
.page-nav { margin-top: -4.375rem; }
.page-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 4.375rem; list-style: none; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); }
.page-nav li { position: relative; min-height: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.page-nav li:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; height: 0.875rem; margin: auto; border-right: 1px solid #fff; opacity: 0.2; }
.page-nav li:last-child:after { content: none; }
.page-nav a,
.page-nav span { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; padding: 0 1rem; font-size: 1.25rem; font-weight: 300; color: #fff; line-height: 1.25; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0.6; text-align: center; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.page-nav a:hover { opacity: 1; }
.page-nav .on span { color: #000; font-weight: 700; background: #fff; opacity: 1; }
@media screen and (max-width:1024px) {
.page-nav { margin-top: -3.125rem; }
.page-nav .container { max-width: none; padding: 0; }
.page-nav ul { min-height: 3.125rem; }
.page-nav li:after { height: 0.75rem; }
.page-nav a,
.page-nav span { font-size: 0.875rem; }
}
.page-body { padding: 6.25rem 0 9.375rem; background: inherit; }
@media screen and (max-width:1024px) {
.page-body { padding: 3.125rem 0 4.375rem; }
}
.page-overview { font-size: 2.7rem; font-weight: 800; line-height: 1.4; }
.page-overview.is-thin { font-weight: 400; }
@media screen and (max-width:1024px) {
.page-overview { font-size: 1.5625rem; }
}
.section { margin-bottom: 6.25rem; }
.section:last-child { margin-bottom: 0; }
@media screen and (max-width:1024px) {
.section { margin-bottom: 2.1875rem; }
}
.section-title { margin-bottom: 1em; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
@media screen and (max-width:1024px) {
.section-title { margin-bottom: 0.5em; font-size: 1.25rem; }
}
.section-banner { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 16em; margin: 2em 0 3.2em; font-size: 1.5625rem; color: #fff; letter-spacing: -0.03em; line-height: 1.6; -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; background: #000; overflow: hidden; text-align: center; z-index: 0; }
.section-banner:first-child { margin-top: 0; }
.section-banner .secondary-title { margin-bottom: 0.3em; }
.section-banner .bg { position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; min-height: 150%; background: #000; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; }
.section-banner .bg img { display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; -o-object-fit: contain; object-fit: contain; }
@media screen and (max-width:1600px) {
.section-banner .bg img { -o-object-fit: cover; object-fit: cover; }
}
@media screen and (max-width:1024px) {
.section-banner { margin-bottom: 3.5384615385em; font-size: 0.8125rem; }
}
@media screen and (max-width:700px) {
.section-banner { height: 54.1062801932vw; }
.section-banner .bg { left: 0; width: 100%; height: 100%; min-height: 0; -webkit-transform: none !important; -ms-transform: none !important; transform: none !important; }
}
.js-sticky-menu { list-style: none; position: sticky; top: 5rem; left: 0; padding: 1.25em 0 0 1.25em; font-weight: 500; letter-spacing: -0.03em; line-height: 2; float: left; z-index: 2; }
.js-sticky-menu a { display: inline-block; min-width: 3.125em; padding: 0 1em; color: #111; border-radius: 100px; vertical-align: top; }
.js-sticky-menu .on { margin-top: 6px; margin-bottom: 6px; }
.js-sticky-menu .on a { color: #fff; line-height: 2.4; background-color: #000; }
.js-sticky-menu li:first-child .on { margin-top: 0; }
.js-sticky-menu li:last-child(1) .on { margin-bottom: 0; }
@media screen and (min-width:1025px) {
.js-sticky-menu.is-light a { color: #fff; }
}
@media screen and (max-width:1024px) {
.js-sticky-menu { display: none; top: 4.3846153846em; padding: 0.7692307692em 1.5384615385em; font-size: 0.8125em; line-height: 2.3076923077; background: #fff; overflow-x: auto; float: none; }
.js-sticky-menu::-webkit-scrollbar { opacity: 0; }
.js-sticky-menu li + li { margin-left: 3.2085561497%; }
.js-sticky-menu a { padding: 0 1.1538461538em; white-space: nowrap; }
.js-sticky-menu .on { margin-top: 0; margin-bottom: 0; }
.js-sticky-menu .on a { line-height: 2.3076923077; }
.js-sticky-menu.show { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-animation: fade-in 0.2s; animation: fade-in 0.2s; }
}
/* 게시판 */
.pagination { margin: 3.125rem 18.75rem 0; font-size: 0; letter-spacing: 0; line-height: 1; text-align: center; }
.pagination a { font-size: 1.25rem; line-height: 1; vertical-align: middle; }
.pagination .page { margin: 0 0.6em 3px; padding: 0 4px; }
.pagination .page:hover { text-decoration: underline; }
.pagination .current { margin-bottom: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.35; border-bottom: 3px solid var(--color-gray); pointer-events: none; vertical-align: middle; }
.pagination [class^=btn-page-] { display: inline-block; width: 1.85em; height: 1.85em; border: 1px solid #C2C2C2; background-color: #fff; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; }
.pagination [class^=btn-page-]:hover { border-color: #000; }
.pagination .btn-page-first { margin-right: 3px; background-image: url("../img/ic_page_first.svg"); }
.pagination .btn-page-prev { margin-right: 1em; background-image: url("../img/ic_page_prev.svg"); }
.pagination .btn-page-next { margin-left: 1em; background-image: url("../img/ic_page_next.svg"); }
.pagination .btn-page-last { margin-left: 3px; background-image: url("../img/ic_page_last.svg"); }
@media screen and (max-width:1024px) {
.pagination { margin: 1.75rem 0 0; }
.pagination a { font-size: 1.0625rem; }
.pagination .page { margin: 0 0.6470588235em 3px; }
.pagination .current { font-size: 1.0625rem; }
.pagination [class^=btn-page-] { width: 1.7647058824em; height: 1.7647058824em; }
}
.board-top { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2.5rem; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
@media screen and (max-width:1024px) {
.board-top { display: block; margin-bottom: 0.9375rem; }
}
.board-footer { position: relative; }
.search-form { position: relative; width: 23.375%; margin-left: auto; padding: 0 1.0909090909em 0.8181818182em 0; font-size: 1.375rem; border-bottom: 1px solid; }
.search-form input[name=keyword] { display: inline-block; width: 100%; font-size: inherit; font-weight: 700; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; background: transparent; -webkit-box-shadow: none; box-shadow: none; outline: 0; }
.search-form input[name=keyword]::-ms-clear { display: none !important; }
.search-form input[name=keyword]::-webkit-search-cancel-button { display: none; }
.search-form input[name=keyword]::-webkit-input-placeholder { color: #C7C7C7; }
.search-form input[name=keyword]::-moz-placeholder { color: #C7C7C7; }
.search-form input[name=keyword]:-ms-input-placeholder { color: #C7C7C7; }
.search-form input[name=keyword]::-ms-input-placeholder { color: #C7C7C7; }
.search-form input[name=keyword]::placeholder { color: #C7C7C7; }
.search-form .btn-search { position: absolute; top: 0; right: 0; border: 0; width: 1.0909090909em; height: 1.0909090909em; border-radius: 0; background: none; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
.search-form .btn-search img { display: block; width: 100%; max-width: none; height: 100%; }
.search-form .btn-search:hover { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
@media screen and (max-width:1024px) {
.search-form { width: 56.7632850242%; max-width: 14.6875rem; padding: 1em 2.3076923077em 1.1538461538em 0; font-size: 0.8125rem; }
.search-form .btn-search { bottom: 0; width: 2.1538461538em; height: 2.1538461538em; margin: auto; }
}
.list-thumb { position: relative; height: 0; overflow: hidden; background: url("../img/sub/placeholder_pic.svg") no-repeat 50% 50%; background-size: 50.78125% auto; }
.list-thumb .thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; }
.list-thumb a:hover .thumb { -webkit-transform: scale(1.06); -ms-transform: scale(1.06); transform: scale(1.06); }
.list-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; color: var(--color-gray); -ms-flex-wrap: wrap; flex-wrap: wrap; }
.list-meta p { position: relative; margin-right: 0.5em; padding-right: 0.625em; }
.list-meta p:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; height: 0.9375em; margin: auto; border-right: 1px solid #DCDCDC; }
.list-meta p:last-child { margin-right: 0; padding-right: 0; }
.list-meta p:last-child:after { content: none; }
.list-date { padding-left: 1.75em; background: url("../img/ic_date.svg") no-repeat 0 50%; background-size: 1.5em auto; }
@media screen and (max-width:1024px) {
.list-date { padding-left: 1.2727272727em; background-size: 1.0909090909em auto; }
}
.list-persons { padding-left: 1.75em; background: url("../img/ic_writer.svg") no-repeat 0 50%; background-size: 1.5em auto; }
.list-persons em { font-style: normal; }
@media screen and (max-width:1024px) {
.list-persons { padding-left: 1.2727272727em; background-size: 1.0909090909em auto; }
}
.list-writer { letter-spacing: 0; }
.list-badge { display: inline-block; min-width: 4.0625em; padding: 0 0.875em; font-weight: 500; line-height: 1.6875; border-radius: 5px; text-align: center; vertical-align: top; }
.list-badge.color1 { color: #fff; background: var(--color-point); }
.list-badge.color2 { color: #fff; background: var(--color-gray); }
@media screen and (max-width:1024px) {
.list-badge { min-width: 4em; font-size: 0.5rem; padding: 0 0.75em; border-radius: 2px; }
}
.file-badge { display: inline-block; width: 1.5rem; height: 1.5rem; margin-top: -2px; overflow: hidden; vertical-align: middle; }
.file-badge img { display: block; width: 100%; max-width: none; height: 100%; }
@media screen and (max-width:1024px) {
.file-badge { width: 0.75rem; height: 0.75rem; }
}
.datatable { padding-top: 1.875em; }
.datatable .row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.875em; padding-bottom: 1.375em; border-bottom: 1px solid #DBDBDB; }
.datatable .row:last-child { margin-bottom: 0; }
.datatable .col { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.datatable .label { width: 6.0625em; font-weight: 700; -webkit-box-flex: 0; -ms-flex: 0 0 6.0625em; flex: 0 0 6.0625em; }
.datatable .value { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
@media screen and (max-width:1024px) {
.datatable { padding-top: 1.4285714286em; font-size: 0.875rem; }
.datatable .row { margin-bottom: 1.4285714286em; padding-bottom: 0.5714285714em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.datatable .label { width: 100%; margin-bottom: 0.5714285714em; font-size: 0.8571428571em; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
}
.board-list { list-style: none; border-top: 1px solid; }
.board-list > li { margin-bottom: 1.25rem; }
.board-list .list-item { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 0; height: 6.25rem; padding: 0 4.5%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #DCDCDC; background: #fff; -webkit-transition: background-color 0.3s, border-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, border-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.board-list .list-item > *:not(:last-child) { margin-right: 0.875em; }
.board-list .list-item:hover { border-color: var(--color-point); -webkit-box-shadow: inset 0 0 0 1px var(--color-point); box-shadow: inset 0 0 0 1px var(--color-point); background-color: #f3f3f3; }
.board-list .list-item a:hover { text-decoration: underline; }
.board-list .list-item.important { background-color: #F7F7F7; }
.board-list .list-item.important:hover { background-color: #eaeaea; }
.board-list .list-no { position: relative; min-width: 4.5em; padding-right: 0.875em; font-weight: 500; letter-spacing: -0.05em; text-align: center; white-space: nowrap; }
.board-list .list-no:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; height: 0.9375em; margin: auto; border-right: 1px solid #DCDCDC; }
.board-list .list-no .list-badge { min-width: 0; }
.board-list .list-title { min-width: 0; padding-right: 1em; font-size: 1.375em; font-weight: 700; letter-spacing: -0.05em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width:1024px) {
.board-list > li { margin-bottom: 0.625rem; }
.board-list .list-item { display: block; height: auto; padding: 1.0625rem 13.698630137% 1.0625rem 1.25rem; }
.board-list .list-item > *:not(:last-child) { margin-right: 0; }
.board-list .list-no { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; min-width: 0; margin-right: 8px !important; font-size: 0.6875rem; text-align: left; white-space: normal; line-height: 1.2727272727; vertical-align: middle; }
.board-list .important .list-no { padding-right: 0; }
.board-list .important .list-no:after { content: none; }
.board-list .list-title { display: -webkit-box; max-height: 2.5714285714em; margin-bottom: 5px; padding-right: 0; font-size: 1.125rem; line-height: 1.2857142857; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.board-list .list-title:not(:first-child) { margin-top: 0.1666666667em; }
.board-list .list-meta { font-size: 0.6875rem; }
.board-list .list-status { line-height: 1; }
.board-list .list-no + .list-status { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; }
}
.card-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin: -1.75rem -1.75% 0 0; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.card-list > li { width: 31.5724815725%; margin: 1.75rem 1.7199017199% 0 0; -webkit-box-flex: 0; -ms-flex: 0 0 31.5724815725%; flex: 0 0 31.5724815725%; }
.card-list .card { position: relative; border: 1px solid #C2C2C2; background: #fff; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.card-list a:hover .card { border-color: var(--color-point); -webkit-box-shadow: 0 0 0 2px var(--color-point); box-shadow: 0 0 0 2px var(--color-point); }
.card-list a:hover .card .thumb { -webkit-transform: scale(1.06); -ms-transform: scale(1.06); transform: scale(1.06); }
.card-list a:hover .card .list-title { text-decoration: underline; }
.card-list .list-thumb { padding-top: 56.2015503876%; }
.card-list .card-body { padding: 2.875em 2.625em 3.375em; }
.card-list .list-title { display: -webkit-box; height: 2.8em; margin-bottom: 0.4em; font-size: 1.5625em; font-weight: 700; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.card-list .list-summary { display: -webkit-box; height: 4.1666666667em; margin-bottom: 1.6666666667em; font-size: 1.125em; line-height: 1.3888888889; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
@media screen and (max-width:1024px) {
.card-list { margin: -1.3636363636em -0.9375% 0 0; font-size: 0.6875em; }
.card-list > li { width: 32.3839009288%; margin: 1.3636363636em 0.9287925697% 0 0; -webkit-box-flex: 0; -ms-flex: 0 0 32.3839009288%; flex: 0 0 32.3839009288%; }
.card-list .card-body { padding: 3.0454545455em 1.9545454545em 3.2727272727em; }
.card-list .list-title { font-size: 1.6363636364em; }
.card-list .list-summary { margin-bottom: 1.6923076923em; font-size: 1.1818181818em; }
}
@media screen and (max-width:700px) {
.card-list { margin-right: 0; }
.card-list > li { width: 100%; margin-right: 0; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; }
.card-list .list-title { margin-right: 2.2222222222em; }
}
.board-table { list-style: none; border-top: 2px solid #000; }
.board-table > li { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 6.625em; padding: 1em 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #C2C2C2; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.board-table > li > * { margin-right: 1.875em; }
.board-table > li > *:last-child { margin-right: 0; }
.board-table .list-no { position: relative; min-width: 3.625em; padding-right: 1.875em; font-weight: 500; }
.board-table .list-no:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; height: 0.9375em; margin: auto; border-right: 1px solid #DCDCDC; }
.board-table .list-title { min-width: 0; font-size: 1.5625rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.board-table .list-attachment { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.board-table .list-attachment .btn-download:not(:only-child) { width: 8.75em; margin-left: 0.375em; }
.board-table .list-attachment .btn-download:first-child { margin-left: 0; }
@media screen and (max-width:1024px) {
.board-table { font-size: 0.875rem; }
.board-table > li { min-height: 5.7142857143em; }
.board-table > li > * { margin-right: 0.7142857143em; }
.board-table .list-no { min-width: 0; padding-right: 0.625em; }
.board-table .list-title { font-size: 1em; }
.board-table .list-attachment .btn-download { width: 7.8461538462em; }
.board-table .sm-w100 { width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
}
.board .view-header { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 2.1875em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.board .view-header .list-title { margin-bottom: 0.875rem; padding: 0; font-size: 2.1875rem; font-weight: 700; text-align: center; }
.board .view-header .list-badge { margin-bottom: 0.625rem; padding: 0 1.125em; }
.board .view-body { border-top: 2px solid; border-bottom: 2px solid; }
.board .view-body .form-table { font-size: 1rem; border-top: 0; }
.board .view-body .form-row { padding: 1.625em 0 1.625em; border-color: #000; }
.board .view-body .form-row:last-child { border: 0; }
.board .view-body .value { display: block; }
.board .view-body .long-desc { display: block; min-height: 30em; font-size: 1.25em; overflow: hidden; word-break: break-all; }
.board .view-body .long-desc img { display: block; }
.board .view-content { padding: 4.0625rem 3.125% 4.625rem; font-size: 1.25rem; font-weight: 500; overflow: hidden; }
.board .view-content-recruit { padding: 3.5rem 0 1.375rem; }
.view-content-recruit .top-banner { display: block; width: 100%; margin-bottom: 3.4375rem; }
.view-content-recruit .top-banner img { display: block; width: 100%; max-width: none; }
@media screen and (max-width:1024px) {
.view-content-recruit .top-banner { margin-bottom: 0.625rem; }
}
.board .view-attachment { min-height: 4.25em; padding: 1.375em 0.625em; letter-spacing: -0.05em; border-top: 1px solid #C2C2C2; }
.board .view-attachment a { display: inline-block; min-height: 1.5em; padding-left: 2em; color: #3641C0; line-height: 1.5; background: url("../img/ic_file.svg") no-repeat 0 0; background-size: 1.5em auto; text-decoration: underline; vertical-align: middle; }
.board .view-attachment a:hover { font-weight: 700; }
.board .view-footer { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; border-bottom: 2px solid; }
.board .view-footer [class*=list-] { display: block; min-width: 0; max-width: 46.875%; padding: 1.3888888889em 1.5555555556em; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.05em; background-repeat: no-repeat; background-size: 0.5em auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .view-footer [class*=list-]:before { content: ""; display: block; margin-bottom: 2px; font-size: 0.7777777778em; font-weight: 400; }
.board .view-footer [class*=list-]:hover strong { text-decoration: underline; }
.board .view-footer .list-prev { margin-right: auto; background-position: 0 50%; background-image: url("../img/ic_list_prev.svg"); }
.board .view-footer .list-prev:before { content: "이전글"; }
.board .view-footer .list-next { margin-left: auto; background-image: url("../img/ic_list_next.svg"); background-position: 100% 50%; text-align: right; }
.board .view-footer .list-next:before { content: "다음글"; }
.board .view-footer .btn-listview { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 3.75rem; height: 3.75rem; margin: auto; border-radius: 0.625rem; background: var(--color-gray) url("../img/ic_listview.svg") no-repeat 50% 50%; background-size: 38.3333333333% auto; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.board .view-footer .btn-listview:hover { background-color: #404344; }
@media screen and (max-width:1024px) {
.board .view-header { margin-bottom: 1.5625em; }
.board .view-header .list-title { display: block; margin-bottom: 0.5652173913em; font-size: 1.25rem; }
.board .view-header .list-meta { font-size: 0.6875em; }
.board .view-body .form-table { padding-top: 1.5625em; font-size: 0.8125rem; }
.board .view-body .form-row { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 1.5625em; padding: 0 0 1.5625em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.board .view-body .form-label { width: 9.3846153846em; margin-bottom: 0; -webkit-box-flex: 0; -ms-flex: 0 0 9.3846153846em; flex: 0 0 9.3846153846em; }
.board .view-body .long-desc { min-height: 23em; font-size: 0.875em; }
.board .view-content { padding: 1.875rem 0 2.5rem; font-size: 0.875rem; line-height: 1.6071428571; }
.board .view-content-recruit { padding: 1.75rem 0 2.625rem; }
.board .view-attachment { min-height: 3.0769230769em; padding: 0.7857142857em; font-size: 0.8125rem; }
.board .view-footer [class*=list-] { max-width: 36.231884058%; padding: 1.7857142857em 1.2142857143em; font-size: 0.875rem; white-space: normal; }
.board .view-footer [class*=list-]:before { margin-bottom: 1px; font-size: 0.7857142857em; font-weight: 300; }
.board .view-footer [class*=list-] strong { display: -webkit-box; max-height: 2.4em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.board .view-footer .btn-listview { width: 2.375rem; height: 2.375rem; border-radius: 0.3125rem; }
}
/* #Pages */
/* Home */
.intro { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #222; z-index: 20; }
.intro .logo-wrap { position: relative; margin: 0 auto; width: 35.625vw; opacity: 0; -webkit-filter: blur(20px); filter: blur(20px); }
.intro .logo { width: 100%; }
.intro img { display: block; width: 100%; max-width: none; height: 100%; }
.intro .dot { position: absolute; top: -157.1428571429%; left: 49.269005848%; width: 2.485380117%; height: 21.4285714286%; background: #E61709; }
@media screen and (max-width:1024px) {
.intro .logo-wrap { width: 82.6086956522vw; max-width: 21.375rem; }
}
.intro ~ .header,
.intro ~ .page,
.intro ~ .footer { height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.sticky-page-menu { list-style: none; position: fixed; top: 50%; left: 2.25rem; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; }
.sticky-page-menu li + li { margin-top: 1.875rem; }
.sticky-page-menu a { display: block; width: 0.625rem; height: 0.625rem; background: #fff; opacity: 0.2; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity 0.3s, background-color 0.3s; transition: opacity 0.3s, background-color 0.3s; }
.sticky-page-menu a:hover { opacity: 1; }
.sticky-page-menu .on { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.sticky-page-menu .on a { background-color: var(--color-point); opacity: 1; }
@media screen and (max-width:1024px) {
.sticky-page-menu { left: 0.9375rem; }
.sticky-page-menu li + li { margin-top: 1.5625rem; }
.sticky-page-menu a { width: 0.5625rem; height: 0.5625rem; }
}
body:has(.main-content) { overflow: hidden; }
body:has(.main-content) .page { background: #222; }
.main-content .section { position: relative; height: 100dvh; margin: 0; color: #fff; background: #222; overflow: hidden; will-change: transform; z-index: 0; }
.main-content .outer { height: 100%; will-change: transform; }
.main-content .backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.main-content .backdrop video { position: absolute; top: 50%; left: 50%; width: 100vw; min-width: 177.77vh; height: 56.25vw; min-height: 100vh; background-color: #222; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.main-content .backdrop img { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.t-child { overflow: hidden; opacity: 0; -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); }
.t-word { overflow: hidden; }
.t-word .word { opacity: 0; -webkit-transform: translateY(75px); -ms-transform: translateY(75px); transform: translateY(75px); }
@media screen and (max-width:1024px) {
.t-word .word { -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); }
}
.main-headline { font-size: 3.5rem; font-weight: 800; }
@media screen and (max-width:1024px) {
.main-headline { font-size: 2.1875rem; }
}
.twrapper { overflow: hidden; }
.main-visual .container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.main-visual .slogan { margin-bottom: 0.2222222222em; font-family: Montserrat, sans-serif; font-size: 5.625em; font-weight: 700; letter-spacing: -0.03em; }
.main-visual .desc { margin-bottom: 2.4em; font-size: 1.2em; font-weight: 200; line-height: 1.2; letter-spacing: 0.02em; }
.main-visual .progressbar { --progress: 0; position: relative; width: 3.625em; height: 3.625em; margin: 0 0 10dvh; border-radius: 50%; background: url("../img/main/ic_play.svg") no-repeat 50% 50%; background-size: 17.2413793103% auto; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.main-visual .progressbar .bar { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: conic-gradient(hsl(255, 100%, 100%), hsl(255, 100%, 100%), hsl(255, 100%, 100%) var(--progress, 0%), rgba(255, 255, 255, 0) var(--progress, 0%) 100%); -webkit-mask-image: radial-gradient(transparent 63%, black calc(63% + 1px)); mask-image: radial-gradient(transparent 63%, black calc(63% + 1px)); }
.main-visual .scroll-down { position: absolute; bottom: 3.9814814815dvh; right: 2.8125vw; font-size: 1.125em; font-weight: 200; letter-spacing: 0; line-height: 1.6666666667; }
.main-visual .scroll-down .icon { display: block; width: 0.4444444444em; height: 1.3333333333em; margin: 0 auto 0.3333333333em; -webkit-animation: floating 1s linear infinite both; animation: floating 1s linear infinite both; }
.main-visual .scroll-down img { display: block; width: 100%; max-width: none; height: 100%; }
.main-visual .backdrop { opacity: 0; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.main-visual .backdrop video { background-image: url("../img/main/main1_bg.jpg"); }
.main-visual .backdrop:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.2); z-index: 1; }
@media screen and (max-width:1024px) {
.main-visual .container { max-width: 82.6086956522%; }
.main-visual .slogan { max-width: 5.5888888889em; font-size: 2.8125em; }
.main-visual .desc { margin-bottom: 2.6428571429em; font-size: 0.875em; line-height: 1.4285714286; }
.main-visual .progressbar { width: 3.3125em; height: 3.3125em; margin-bottom: 8.4821428571dvh; }
.main-visual .scroll-down { display: none; }
}
.main-about-us .container { height: 100%; padding-top: 15.7407407407dvh; }
.main-about-us .slogan { margin-bottom: 1.7592592593dvh; font-size: 2.3em; font-weight: 400; line-height: 1.5; text-align: center; letter-spacing: 0.02em; }
.main-about-us .logo { display: block; width: 23.3125em; height: 1.875em; margin: 0 auto; }
.main-about-us .logo img { display: block; width: 100%; max-width: none; height: 100%; }
.main-about-us .backdrop { background: #000; }
@media screen and (max-width:1024px) {
.main-about-us .container { padding-top: 18.6941964286dvh; }
.main-about-us .slogan { margin-bottom: 1.6741071429dvh; font-size: 1.5625em; }
.main-about-us .logo { width: 11.65625em; height: 0.9375em; }
}
.main-status .container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.main-status ul { list-style: none; margin: 0 -2em 0 4em; display: -webkit-box; display: -ms-flexbox; display: flex; }
.main-status li { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 1.4375em 0 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.main-status li:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 2em; border: 1px solid rgba(255, 255, 255, 0.1); border-width: 0 1px 0 0; }
.main-status li:last-child:after { content: none; }
.main-status .wrapper { min-width: 14.1875em; }
.main-status .icon { display: block; margin-bottom: 3.5em; width: 7.375em; }
.main-status .icon img { display: block; width: 100%; max-width: none; }
.main-status .title { letter-spacing: 0; line-height: 1; }
.main-status .title strong { display: block; margin-bottom: 0.3333333333em; font-size: 1.5em; }
.main-status .title small { display: block; font-size: inherit; font-weight: 200; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; }
.main-status .cnt { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; font-size: 1.2em; font-weight: 700; line-height: 1; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; white-space: nowrap; }
.main-status .num { display: inline-block; height: 1em; font-size: 3.9em; font-style: normal; font-weight: 800; letter-spacing: -0.03em; text-align: center; vertical-align: bottom; }
.main-status .unit { position: relative; left: 4px; bottom: 0.75em; white-space: nowrap; }
.main-status .backdrop:after { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); z-index: 1; }
@media screen and (max-width:1600px) {
.main-status li { font-size: 0.75rem; }
}
@media screen and (max-width:1024px) {
.main-status .container { max-width: none; padding: 15.0669642857dvh 0 9.0401785714dvh; }
.main-status ul { margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.main-status li { height: 25%; padding: 0 0 0 18.5990338164%; font-size: 0.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.main-status li:after { top: auto; left: 0; bottom: 0; width: 100%; border-width: 0 0 1px 0; }
.main-status .wrapper { position: relative; min-width: 0; padding-left: 13.5em; }
.main-status .icon { position: absolute; top: 0; left: 0; bottom: 0; width: 9.5em; height: 9.5em; margin: auto; }
}
.t-word { overflow: hidden; }
.main-esg .container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.main-esg .main-headline { width: 100%; max-width: 10.6060606061em; margin-top: 1.5em; font-size: 3.7em; font-weight: 700; letter-spacing: 0.02em;}
.main-esg ul { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; width: 100%; max-width: 34.0625rem; margin: -1.5625rem 0 -4.5625rem auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.main-esg ul > li { width: 36.3302752294%; margin-bottom: 4.5625em; text-align: center; text-transform: uppercase; }
.main-esg ul > li:nth-child(2n) { width: 63.6697247706%; }
.main-esg .icon { display: block; width: 7.375em; max-width: 100%; margin: 0 auto 1em; }
.main-esg .icon img { display: block; width: 100%; max-width: none; }
.main-esg strong { display: block; margin-bottom: 2px; font-size: 1.6em; }
.main-esg em { display: block; font-family: SUIT, sans-serif; font-size: 0.8125em; font-style: normal; letter-spacing: 0; line-height: 1; }
.main-esg .backdrop::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 19, 15, 0.5); z-index: 1; }
@media screen and (max-width:1024px) {
.main-esg .main-headline { margin: auto 0 2.9924242424em; font-size: 2.0625em; }
.main-esg ul { max-width: 20.375rem; margin: 0 auto -2.8125rem; }
.main-esg ul > li { width: 36.8098159509%; margin-bottom: 2.8125em; }
.main-esg ul > li:nth-child(2n) { width: 53.6809815951%; }
.main-esg .icon { width: 4.3125em; margin-bottom: 0.625em; }
.main-esg strong { font-size: 1.25em; }
.main-esg em { font-size: 0.5em; }
}
.main-careers .container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.main-careers .box { width: 100%; max-width: 53.75em; margin: 0 auto; }
@media screen and (max-width:1024px) {
.main-careers .container { padding-top: 14.3415178571dvh; padding-bottom: 14.3415178571dvh; }
}
/* 회사소개 */
.about-us-content { margin-bottom: -9.375rem; }
@media screen and (max-width:1024px) {
.about-us-content { margin-bottom: -4.375rem; }
}
.about-vision { margin-bottom: 0; padding-top: 1.25em; font-size: 1.25em; line-height: 1.5; }
.about-vision .headline { margin-bottom: 6px; font-size: 2em; line-height: 1.5; }
.about-vision .section-banner { margin: 1.6875rem auto 0; height: 25.2604166667vw; background: transparent; }
.about-vision .section-banner .bg { background: transparent; }
@media screen and (max-width:1024px) {
.about-vision { font-size: 0.875em; }
.about-vision .headline { font-size: 1.7857142857em; }
.about-vision .section-banner { margin-top: 1.5rem; }
}
@media screen and (max-width:700px) {
.about-vision .section-banner { height: 54.1062801932vw; }
}
.about-greeting { margin: -5.5em 0 0; padding: 5.5em 0 7.8125em; background: #F7F7F7; }
.about-greeting .container { background-repeat: no-repeat; background-position: 100% 7.3125em; }
.about-greeting .wrapper { margin-right: 41.8125%; padding-top: 7.3125em; }
.about-greeting .title { font-family: "Montserrat", sans-serif; font-weight: 500; color: var(--color-point); letter-spacing: 0; line-height: 2.1875; }
.about-greeting .secondary-title { margin-bottom: 0.58em; line-height: 1.2; }
.about-greeting .msg { max-width: 38.2em; font-size: 1.25em; color: #222; line-height: 1.25; }
.about-greeting .msg p { margin-top: 1.25em; }
.about-greeting .msg p:first-child { margin-top: 0; }
.about-greeting .msg .sign { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0.32em 0.5235602094% 0 0; font-size: 1.25em; font-weight: 700; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.about-greeting .msg .sign img { display: block; max-width: none; margin-left: 8px; mix-blend-mode: multiply; }
@media screen and (min-width:1025px) {
.about-greeting .container { background-image: url("../img/sub/about_ceo.jpg"); background-size: 41.8125% auto; }
}
@media screen and (max-width:1024px) {
.about-greeting { margin-top: -2.75rem; padding: 2.75em 0 2.125em; }
.about-greeting .container { font-size: 0.8125em; background-image: url("../img/sub/about_ceo_sm.jpg"); background-position: 100% 100%; background-size: auto 20.8461538462em; }
.about-greeting .wrapper { max-width: none; margin-right: 0; padding: 5.5384615385em 0 16.9230769231em; }
.about-greeting .title { font-size: 0.8461538462em; }
.about-greeting .msg { max-width: none; font-size: 1em; line-height: 1.3846153846; }
.about-greeting .msg p { margin-top: 1.3846153846em; }
.about-greeting .msg .sign { display: block; margin: 1.3846153846em 0 0; font-size: 1.4615384615em; }
}
.about-motto { margin-bottom: 0; padding: 9.25em 0; }
.about-motto .table-list { list-style: none; max-width: 90.5em; }
.about-motto .table-list > li { display: grid; grid-template-columns: 33.1491712707% 66.2983425414%; margin-bottom: 3.25em; }
.about-motto .table-list > li:last-child { margin-bottom: 0; }
.about-motto .table-list .list-content { font-size: 1.2em; line-height: 1.5909090909; text-align: center; }
.about-motto .philosophy-label { display: inline-block; margin-bottom: 0.4909090909em; padding: 0 1.0727272727em; font-size: 1.6em; font-weight: 700; color: #fff; line-height: 1.6; letter-spacing: 0.02em; border-radius: 100px; background: var(--color-point); vertical-align: middle; }
.about-motto .cite { margin-bottom: 0.4888888889em; font-size: 1.6em; font-weight: 500; line-height: 1.4444444444; }
@media screen and (max-width:1024px) {
.about-motto { padding: 3.71875em 0 5.3125em; }
.about-motto .table-list { list-style: none; }
.about-motto .table-list > li { display: grid; grid-template-columns: 1fr; margin-bottom: 1.25em; text-align: center; }
.about-motto .table-list .list-content { font-size: 0.875em; }
.about-motto .philosophy-label { margin-bottom: 0.5714285714em; padding: 0 1.6785714286em; font-size: 2em; line-height: 1.3; }
.about-motto .cite { margin-bottom: 0.3636363636em; font-size: 1.5714285714em; }
}
.motto-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 30.5357142857em; margin: 0 auto; font-size: 1.2727272727em; font-weight: 700; letter-spacing: -0.03em; line-height: 1; text-align: center; }
.motto-list li { position: relative; width: 33.3%; min-height: 0; padding: 20.8187134503% 0 5.96491%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, color-stop(48.5%, #FFF), to(#FAF1F1)); background: linear-gradient(180deg, #FFF 48.5%, #FAF1F1 100%); -webkit-box-shadow: 9px 23px 15px 0 rgba(225, 193, 193, 0.15), 3px 11px 11px 0 rgba(225, 193, 193, 0.26), 1px 2px 6px 0 rgba(225, 193, 193, 0.3); box-shadow: 9px 23px 15px 0 rgba(225, 193, 193, 0.15), 3px 11px 11px 0 rgba(225, 193, 193, 0.26), 1px 2px 6px 0 rgba(225, 193, 193, 0.3); }
.motto-list li:before { content: ""; display: block; position: absolute; top: 23.1578947368%; left: 0; right: 0; width: 29.4736842105%; height: 31.5789473684%; margin: 0 auto; background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
.motto-list li:nth-child(1):before { background-image: url("../img/sub/ic_about_motto1.svg"); }
.motto-list li:nth-child(2):before { background-image: url("../img/sub/ic_about_motto2.svg"); }
.motto-list li:nth-child(3):before { background-image: url("../img/sub/ic_about_motto3.svg"); }
.motto-list li:after { content: ""; display: block; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background: url("../img/sub/about_motto_line_top.svg") no-repeat -1px 0; background-size: 100.701754386% auto; z-index: 1; }
.motto-list li:nth-child(even):after { background-image: url("../img/sub/about_motto_line_bottom.svg"); background-position: -1px 100%; }
.motto-list span:before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 9.1228070175%; height: 9.1228070175%; margin: auto 0 auto -4.5614035088%; background: url("../img/sub/about_motto_dot.svg") no-repeat 0 0; background-size: contain; }
.motto-list span:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 9.1228070175%; height: 9.1228070175%; margin: auto -4.5614035088% auto 0; background: url("../img/sub/about_motto_dot.svg") no-repeat 0 0; background-size: contain; }
@media screen and (max-width:1024px) {
.motto-list { max-width: 28.84615384615385em; padding: 0 0.3125em; font-size: 0.9285714285714286em; }
.motto-list li:after { top: 1px; background-position: 0 0; background-size: 100% auto; }
.motto-list li:nth-child(even):after { background-position: 0 100%; }
}
.about-slogan { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 34.8em; margin-bottom: 0; font-size: 1.5625em; color: #fff; line-height: 1.6; -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; overflow: hidden; text-align: center; z-index: 0; }
.about-slogan .slogan { margin-bottom: 0.4571428571em; font-family: "Montserrat", sans-serif; font-size: 2.8em; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.about-slogan .slogan small { display: block; margin-top: 0.4571428571em; font-size: 0.5em; font-weight: 500; line-height: 2; }
.about-slogan .bg-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.about-slogan .bg-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; -o-object-fit: cover; object-fit: cover; }
.about-slogan .bg-video:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 13, 37, 0.5); }
@media screen and (max-width:1024px) {
.about-slogan { height: 72.5446428571dvh; max-height: 46.4285714286em; font-size: 0.875em; line-height: 1.4285714286; }
.about-slogan .slogan { margin-bottom: 0.4545454545em; font-size: 2.3571428571em; }
.about-slogan .slogan small { margin-bottom: 0.8333333333em; font-size: 0.5454545455em; line-height: 1.2777777778; }
}
.about-history { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 100dvh; margin-bottom: 0; padding-top: 7.5em; font-size: 1.375em; color: #fff; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #000; z-index: 0; }
.about-history .container { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.about-history .secondary-title { margin-bottom: 0; font-family: "Montserrat", sans-serif; font-size: 3.1818181818em; letter-spacing: 0; }
.about-history .scroll-wrap { position: relative; width: 42.5%; height: 100%; min-height: 0; margin-left: auto; padding: 0 0.75rem; overflow: hidden; }
.about-history .scroll-content { height: 100%; }
.about-history .scrollbar { position: absolute; top: 0; right: 0; bottom: 1em; width: 7px; }
.about-history .scrollbar-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 13.5632183908%; border-radius: 40px; background: rgba(255, 255, 255, 0.5); }
.about-history .bg-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.about-history .bg-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #222; -o-object-fit: cover; object-fit: cover; }
.about-history .bg-video:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 64, 182, 0.1); }
@media screen and (max-width:1024px) {
.about-history { padding-top: 10.6153846154em; font-size: 0.8125em; }
.about-history .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.about-history .secondary-title { margin-bottom: 1.2121212121em; font-size: 2.5384615385em; }
.about-history .scroll-wrap { width: 100%; margin-left: 0; padding: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.about-history .scrollbar { width: 5px; }
.about-history .scrollbar-thumb { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
}
.history-list { list-style: none; margin: -2.0454545455em 0 -2.4545454545em; }
.history-list > li { padding: 2.0454545455em 0 2.4545454545em; border-top: 1px solid #fff; }
.history-list > li:last-child { border-bottom: 0; }
.history-list .title { margin-bottom: 0.8666666667em; font-size: 1.3636363636em; font-weight: 700; line-height: 1; }
.history-list ul { list-style: none; }
.history-list ul > li { margin-top: 0.5454545455em; }
@media screen and (max-width:1024px) {
.history-list { margin: -2.6923076923em 0; }
.history-list > li { padding: 2.6923076923em 0; }
.history-list .title { margin-bottom: 0.8333333333em; font-size: 1.3846153846em; }
.history-list ul > li { margin-top: 1em; }
}
.about-ci { padding: 12.5em 0; background: #fff; }
@media screen and (max-width:1024px) {
.about-ci { padding: 5.9375em 0 4.375em; }
}
.ci-grid { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; max-width: 45.0625em; height: 16.9375em; margin: 0 auto 1.6875em; -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; background: url("../img/sub/about_ci_bg.png") repeat 0 0; background-size: 0.625em auto; overflow: hidden; }
.ci-grid img { display: block; width: 67.2676837725%; max-width: none; margin: 0 auto; }
@media screen and (max-width:1024px) {
.ci-grid { max-width: none; height: 8.5em; margin-bottom: 0.8125em; background-size: 0.3125em auto; }
}
.ci-info { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 45.0625em; margin: 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.ci-info .color { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 3.6061026352% 0 0; font-family: "Montserrat", sans-serif; font-weight: 700; letter-spacing: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.ci-info .color:before { content: ""; display: block; width: 3em; height: 3em; margin-right: 0.625em; border-radius: 50%; background: #E61709; }
.ci-info .color:nth-child(2):before { background: #4F5556; }
.ci-info .btn-group { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.ci-info .btn-download { width: 10em; color: #4F5556; margin-left: 0.625em; font-weight: 500; line-height: 2.8125; }
.ci-info .btn-download:hover { color: #fff; }
@media screen and (max-width:1024px) {
.ci-info { max-width: none; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.ci-info .color { margin: 0 0.6666666667em; font-size: 0.75em; }
.ci-info .color:before { width: 2em; height: 2em; }
.ci-info .btn-group { margin: 1.5em 0 0 -0.5em; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.ci-info .btn-download { width: 10em; color: #4F5556; margin-left: 0.625em; font-weight: 500; line-height: 2.8125; }
.ci-info .btn-download:hover { color: #fff; }
}
.about-companies { padding: 7.625em 0 8.3125em; background: #F7F7F7; }
.about-companies .slider-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; margin-top: 3.4375em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; }
.about-companies .slider-nav { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; margin-top: 1.25em; font-size: 1.375em; font-weight: 500; color: #B6B6B6; line-height: 1.5909090909; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.about-companies .paging { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 1em; font-family: "Montserrat", sans-serif; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
.about-companies .paging em { font-style: normal; font-weight: 800; color: #000; }
.about-companies [class^=btn-slide] { display: block; width: 4.0909090909em; height: 1.1818181818em; border: 0; background: transparent url("../img/sub/ic_half_angle_prev.svg") no-repeat 0 0; background-size: 100% auto; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.about-companies [class^=btn-slide]:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.about-companies .btn-slide-next { background-image: url("../img/sub/ic_half_angle_next.svg"); -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
@media screen and (max-width:1024px) {
.about-companies { padding: 5.375em 0 4.0625em; }
.about-companies .slider-wrap { position: relative; margin-top: 2.375em; }
.about-companies .slider-nav { font-size: 0.625em; }
}
.companies-slider { list-style: none; 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; }
.companies-slider .slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; opacity: 0.4; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.companies-slider .slide:last-child { opacity: 0.7; }
.companies-slider .on { position: relative; width: 50.125rem; -webkit-box-flex: 0; -ms-flex: 0 0 50.125rem; flex: 0 0 50.125rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 1; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; z-index: 1; }
.companies-slider .on + .slide { opacity: 0.7; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; }
.companies-slider .on + .slide + .slide { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; }
.companies-slider .list-thumb { position: relative; width: 18.4375em; margin: 0 auto; padding-top: 18.4375em; -webkit-box-flex: 0; -ms-flex: 0 0 18.4375em; flex: 0 0 18.4375em; border-radius: 50%; overflow: hidden; pointer-events: none; -webkit-transform: scale(0.652) !important; -ms-transform: scale(0.652) !important; transform: scale(0.652) !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.companies-slider .thumb { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.companies-slider .is-on { opacity: 0; }
.companies-slider .on .list-thumb { margin: 0; -webkit-transform: scale(1) !important; -ms-transform: scale(1) !important; transform: scale(1) !important; -webkit-transition: -webkit-transform 0.7s; transition: -webkit-transform 0.7s; transition: transform 0.7s; transition: transform 0.7s, -webkit-transform 0.7s; }
.companies-slider .on .is-on { opacity: 1; }
.companies-slider .on .is-off { opacity: 0; }
.companies-slider .list-info { display: none; margin-left: 1.7708333333vw; letter-spacing: 0; line-height: 1.5625; }
.companies-slider .list-title { font-size: 2.5em; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.companies-slider .list-info ul { list-style: none; margin-top: 1.25em; }
.companies-slider .on .list-info { display: block; }
@media screen and (max-width:1024px) {
.companies-slider { width: 100%; min-width: 46.0625rem; margin: 0 auto; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.companies-slider .slide { width: 7.5rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 0; -ms-flex: 0 0 7.5rem; flex: 0 0 7.5rem; }
.companies-slider .on { position: relative; width: 16.0625rem; margin: 0; -ms-flex-preferred-size: 16.0625rem; flex-basis: 16.0625rem; }
.companies-slider .list-thumb { width: 11.5em; padding-top: 11.5em; -ms-flex-preferred-size: 11.5em; flex-basis: 11.5em; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; }
.companies-slider .on .list-thumb { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.companies-slider .on ~ .slide { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; }
.companies-slider .list-info { width: 90.3381642512vw; margin: 2.4615384615em 0 0; font-size: 0.8125em; line-height: 1.5384615385; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.companies-slider .list-title { font-size: 1.9230769231em; text-align: center; }
.companies-slider .list-info ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}
.grid-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.grid-group .secondary-title { width: 28.75%; -webkit-box-flex: 0; -ms-flex: 0 0 28.75%; flex: 0 0 28.75%; }
.grid-group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.0454545455em 2.7027027027%; font-size: 1.375rem; font-weight: 500; color: #4F5556; letter-spacing: -0.02em; line-height: 1.3636363636; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; }
.grid-group .thumb-wrap { position: relative; margin-bottom: 0.6818181818em; padding-top: 59.2696629213%; border: 1px solid #C2C2C2; }
.grid-group .thumb { display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; -o-object-fit: cover; object-fit: cover; }
@media screen and (max-width:1600px) and (min-width:1025px) {
.grid-group .secondary-title { font-size: 2.5rem; }
}
@media screen and (max-width:1024px) {
.grid-group { margin-top: 4.6875rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.grid-group .secondary-title { width: auto; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; }
.grid-group ul { width: 100%; grid-template-columns: 1fr 1fr; margin-top: 1.9230769231em; font-size: 0.8125rem; }
.grid-group .thumb-wrap { margin-bottom: 1.3846153846em; }
}
/* 연구개발 */
.rnd-parts1 { margin-bottom: 0; font-size: 1.25em; line-height: 1.5; }
.rnd-parts1 .headline { margin-bottom: 6px; font-size: 2em; line-height: 1.5; }
.rnd-parts1 .section-banner { height: 28.9583333333vw; margin: 3.375rem auto 0; background: transparent; z-index: 2; }
.rnd-parts1 .section-banner .bg { background: transparent; }
.rnd-parts1 .wrapper { position: absolute; top: 0; right: 8.4375%; bottom: 0; width: 26.375%; height: 78.7769784173%; margin: auto; font-size: 0.8333333333vw; }
.rnd-parts1 .feature-slogan { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 84.3601895735%; height: 81.2785388128%; margin: auto; padding: 0 5.6179775281%; font-size: 0.8125em; font-weight: 200; line-height: 1.5384615385; color: #fff; -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; border-radius: 50%; background: rgba(0, 0, 0, 0.4); text-align: center; }
.rnd-parts1 .feature-slogan strong { display: block; width: 10em; margin: 0 auto 6px; font-family: Montserrat, sans-serif; font-size: 1.9230769231em; font-weight: 700; letter-spacing: 0; line-height: 1.12; }
.rnd-parts1 .feature-slogan .liner { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background: url("../img/sub/rnd1_item_outline.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.rnd-parts1 .feature-list { list-style: none; }
.rnd-parts1 .feature-list li { position: absolute; width: 36.7298578199%; height: 35.3881278539%; padding: 17.1232876712% 4.7393364929% 0; font-size: 0.65em; font-weight: 200; color: rgba(255, 255, 255, 0.6); line-height: 1.3333333333; border-radius: 50%; background: rgba(144, 0, 30, 0.8); backdrop-filter: blur(25px); background-repeat: no-repeat; background-position: 50% 11.6129032258%; background-size: 36.1290322581% auto; text-align: center; }
.rnd-parts1 .feature-list li:nth-child(1) { top: 0; left: 0; background-image: url("../img/sub/ic_rnd1_1.svg"); }
.rnd-parts1 .feature-list li:nth-child(2) { top: 0; right: 0; background-image: url("../img/sub/ic_rnd1_2.svg"); }
.rnd-parts1 .feature-list li:nth-child(3) { bottom: 0; left: 0; background-image: url("../img/sub/ic_rnd1_3.svg"); }
.rnd-parts1 .feature-list li:nth-child(4) { bottom: 0; right: 0; background-image: url("../img/sub/ic_rnd1_4.svg"); }
.rnd-parts1 .feature-list .title { display: block; margin-bottom: 0.4666666667em; font-size: 1.25em; font-weight: 700; color: rgb(255, 255, 255); line-height: 1; }
@media screen and (max-width:1024px) {
.rnd-parts1 { font-size: 0.875em; }
.rnd-parts1 .headline { font-size: 1.7857142857em; }
.rnd-parts1 .section-banner { height: 73.6714975845vw; max-height: 19.0625rem; margin-top: 0.8125rem; }
.rnd-parts1 .wrapper { right: 0.84375em; width: 13.1875em; height: 13.6875em; font-size: 1rem; }
.rnd-parts1 .feature-slogan { font-size: 0.40625em; }
.rnd-parts1 .feature-slogan strong { margin-bottom: 3px; }
.rnd-parts1 .feature-list li { font-size: 0.375em; }
.rnd-parts1 .feature-list .title { font-size: 0.625em; }
}
.rnd-parts2 { margin-top: -8.25rem; padding-top: 11.75rem; background: #F7F7F7; }
.rnd-parts2 .secondary-title { margin-bottom: 1.6em; }
@media screen and (max-width:1024px) {
.rnd-parts2 { margin-top: -2.8125rem; padding-top: 5.75rem; }
.rnd-parts2 .secondary-title { margin-bottom: 0.88em; }
}
.rnd-status { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 75vh; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; }
.rnd-status .years { list-style: none; position: relative; top: 0; left: 0; width: 31.625em; }
.rnd-status .years li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1.25em; font-size: 2.5em; color: #4F5556; font-weight: 700; line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.5; -webkit-transition: color 0.3s; transition: color 0.3s; }
.rnd-status .years li:first-child { margin-top: 0; }
.rnd-status .years li:after { content: ""; display: block; width: 24.5059288538%; height: 0.15em; margin-left: 0.15em; background: var(--color-point); -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
.rnd-status .years .btn { font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; border: 0; background: none; }
.rnd-status .years .on { color: inherit; opacity: 1; }
.rnd-status .years .on:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.rnd-status .products { min-height: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; }
.rnd-status .products ol { list-style: none; display: grid; margin-top: 2em; grid-template-columns: 1fr 1fr; gap: 2em 7.323943662%; }
.rnd-status .products ol:first-child { margin-top: 0; }
.rnd-status .products li { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 0; color: #4F5556; line-height: 1.25; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-animation: fade-in 0.3s; animation: fade-in 0.3s; float: left; }
.rnd-status .products .is-prev2,
.rnd-status .products .is-prev2 ~ li { opacity: 0.2; }
.rnd-status .products .is-prev,
.rnd-status .products .is-prev ~ li,
.rnd-status .products .is-next,
.rnd-status .products .is-next ~ li { opacity: 0.5; }
.rnd-status .products li.is-next2,
.rnd-status .products .is-next2 ~ li { opacity: 0.2; }
.rnd-status .products .is-next2 ~ .year,
.rnd-status .products .is-next2 ~ .year ~ li { opacity: 0; }
.rnd-status .products li.on { opacity: 1; }
.rnd-status .products dl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.rnd-status .products dt { margin-right: 4px; -webkit-box-flex: 0; -ms-flex: 0; flex: 0; white-space: nowrap; }
.rnd-status .products dd { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.rnd-status .products .break-line { height: 0; -ms-flex-preferred-size: 100%; flex-basis: 100%; }
.rnd-status .products dd span { display: inline-block; }
.rnd-status .list-thumb { width: 6.25em; margin-right: 6.0851926978%; padding-top: 6.25em; }
.rnd-status .list-title { margin-bottom: 0.4545454545em; font-size: 1.375em; font-weight: 700; color: #000; line-height: 1.1363636364; }
.rnd-status .list-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
@media screen and (max-width:1024px) {
.rnd-status { margin: 0 -4.8309178744%; height: 78.90625vh; padding: 0 4.8309178744%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.rnd-status .years { display: -webkit-box; display: -ms-flexbox; display: flex; width: auto; margin: 0 -1.25rem 2.28125rem; padding: 0 1.25rem; white-space: nowrap; overflow-x: auto; }
.rnd-status .years::-webkit-scrollbar { opacity: 0; }
.rnd-status .years li { display: block; position: relative; margin: 0 1.5em 0 0; padding-bottom: 1.2em; font-size: 0.9375em; white-space: nowrap; }
.rnd-status .years li:last-child { margin-right: 0; }
.rnd-status .years li:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2em; margin-left: 0; }
.rnd-status .products ol { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
.rnd-status .products li { margin-bottom: 1.5em; font-size: 0.8125em; }
.rnd-status .list-thumb { width: 5.8461538462em; margin-right: 6.0160427807%; padding-top: 5.8461538462em; }
.rnd-status .list-title { font-size: 1.1538461538em; }
}
.title-group { display: -webkit-box; display: -ms-flexbox; display: flex; }
.title-group .secondary-title { width: 19.5625%; margin-bottom: 0; -webkit-box-flex: 0; -ms-flex: 0 0 19.5625%; flex: 0 0 19.5625%; }
.title-group .secondary-title small { display: block; margin-top: 0.32em; font-size: 0.5em; }
.title-group .desc { font-size: 1.375em; letter-spacing: -0.03em; line-height: 1.5909090909; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
@media screen and (max-width:1024px) {
.title-group { display: block; }
.title-group .secondary-title { width: auto; margin-bottom: 0.6em; }
.title-group .secondary-title small { display: inline; margin: 0 0 0 4px; font-size: 0.6em; }
.title-group .desc { font-size: 0.875em; }
}
.rnd-design-list { list-style: none; display: grid; margin-top: 1.875em; grid-template-columns: 1fr 1fr; gap: 1.875em 1.875%; }
.rnd-design-list > li { position: relative; color: #fff; border-radius: 1.25em; background: #ccc; }
.rnd-design-list .backdrop img { display: block; width: 100%; max-width: none; height: auto; -o-object-fit: contain; object-fit: contain; }
.rnd-design-list .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 2.9375em 3.9375em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
.rnd-design-list .list-title { margin-bottom: 0.24em; font-size: 1.5625em; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.rnd-design-list .dot-list { margin-left: -0.25em; font-weight: 200; color: rgba(255, 255, 255, 0.7); }
@media screen and (max-width:1024px) {
.rnd-design-list { margin: 1.5625em 0 4.6875em; grid-template-columns: 1fr; gap: 0; }
.rnd-design-list > li { margin-top: 1.2727272727em; font-size: 0.6875em; border-radius: 0.9090909091em; }
.rnd-design-list .wrapper { padding: 1.8181818182em 2.7272727273em; }
.rnd-design-list .list-title { margin-bottom: 0.5454545455em; font-size: 1.125em; }
}
.rnd-analysis-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.5555555556em; font-size: 1.125em; letter-spacing: -0.03em; line-height: 1.3888888889; }
.rnd-analysis-list li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2.2222222222em 0.625% 2.2222222222em 0; color: #4F5556; border-bottom: 1px dashed #000; }
.rnd-analysis-list li:nth-child(2n) { padding-left: 0.625%; padding-right: 0; }
.rnd-analysis-list .list-thumb { width: 43.375%; padding-top: 30%; border: 1px solid #E2E2E2; }
.rnd-analysis-list .list-info { margin-left: 3.75%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.rnd-analysis-list .list-title { margin-bottom: 0.4em; font-size: 1.3888888889em; font-weight: 800; letter-spacing: 0; line-height: 1.2; color: #000; }
@media screen and (max-width:1024px) {
.rnd-analysis-list { margin: 1.1538461538em 0 5.7692307692em; grid-template-columns: 1fr; font-size: 0.8125em; }
.rnd-analysis-list li { padding: 1.9230769231em 0; }
.rnd-analysis-list li:first-child { padding-top: 0; }
.rnd-analysis-list li:nth-child(2n) { padding-left: 0; }
.rnd-analysis-list .list-thumb { width: 46.3903743316%; padding-top: 25.3164556962%; }
.rnd-analysis-list .list-info { margin-left: 4.0106951872%; }
.rnd-analysis-list .list-title { margin-bottom: 0.3846153846em; font-size: 1.3846153846em; }
}
.rnd-new1 { font-size: 1.25em; line-height: 1.5; overflow: hidden; }
.rnd-new1 .headline { margin-bottom: 6px; font-size: 2em; line-height: 1.5; }
.rnd-new1 .section-banner { height: 21.1979166667vw; margin: 3.375rem auto; background: transparent; z-index: 2; }
.rnd-new1 .section-banner .bg { background: transparent; }
@media screen and (max-width:1024px) {
.rnd-new1 { font-size: 0.875em; }
.rnd-new1 .headline { font-size: 1.7857142857em; }
.rnd-new1 .section-banner { margin-top: 0.8125rem; }
.rnd-new1 .secondary-title { margin-right: -1em; }
}
@media screen and (max-width:700px) {
.rnd-new1 .section-banner { height: 88.0434782609vw; }
}
.mobility-feature { list-style: none; display: grid; width: 100%; max-width: 87.1428571429em; margin: 4.6875rem auto 0; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.8032786885%; font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); line-height: 1.2857142857; background: url("../img/sub/rnd2_feature_bg.svg") no-repeat 50% 50%; background-size: 16.9672131148% auto; }
.mobility-feature li { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; min-height: 11.9285714286em; padding: 0 31.27090301% 0 9.364548495%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid var(--color-point); border-radius: 200px; background: #fff; }
.mobility-feature li:nth-child(2n) { padding: 0 9.364548495% 0 31.27090301%; }
.mobility-feature .icon { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; right: 1.5050167224%; bottom: 0; width: 25.9197324415%; height: 92.8143712575%; margin: auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 50%; background: var(--color-point); }
.mobility-feature .icon img { display: block; width: 50.3225806452%; max-width: none; }
.mobility-feature li:nth-child(2n) .icon { left: 1.5050167224%; right: auto; }
.mobility-feature .list-title { margin-bottom: 0.4em; font-size: 1.4285714286em; font-weight: 700; color: rgb(0, 0, 0); line-height: 1; }
@media screen and (max-width:1024px) {
.mobility-feature { max-width: 34em; margin-top: 1.3636363636em; gap: 0.9090909091em 3.4759358289%; font-size: 0.6875rem; background-size: 27.6737967914% auto; }
.mobility-feature li { min-height: 17.2727272727em; padding: 1.8181818182em 1.0909090909em 1.3636363636em; border-radius: 1.3636363636em; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.mobility-feature li:nth-child(2n) { padding: 1.8181818182em 1.0909090909em 1.3636363636em; text-align: right; }
.mobility-feature .icon { top: auto; right: 3.5812672176%; bottom: 0.7272727273em; width: 5.8181818182em; height: 5.8181818182em; }
.mobility-feature .icon img { width: 50%; }
.mobility-feature li:nth-child(2n) .icon { left: 3.5812672176%; }
.mobility-feature li:nth-child(3) .icon,
.mobility-feature li:nth-child(4) .icon { top: 0.7272727273em; bottom: auto; }
.mobility-feature .list-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.mobility-feature .list-title { font-size: 1.3636363636em; }
.mobility-feature li:nth-child(3) .list-info,
.mobility-feature li:nth-child(4) .list-info { 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: end; -ms-flex-pack: end; justify-content: flex-end; }
.mobility-feature li:nth-child(3) .list-info .list-title,
.mobility-feature li:nth-child(4) .list-info .list-title { margin-bottom: auto; }
.mobility-feature .shape { width: 5.4545454545em; height: 5.4545454545em; margin: 1em; shape-outside: circle(); float: right; }
.mobility-feature .shape.lt { float: left; }
.mobility-feature .shape.sm { width: 3.6363636364em; height: 3.6363636364em; }
.mobility-feature .shape.triangle { width: 3.6363636364em; height: 3.6363636364em; shape-outside: polygon(28% 0, 100% 0, 100% 100%, 73% 100%); }
.mobility-feature .shape.pill { width: 1em; height: 1em; shape-outside: ellipse(9% 50% at 50% 50%); }
}
.rnd-new2 { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 6.125em; -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; background: #f7f7f7; }
.rnd-new2 .rnd-status { height: 67.5925925926dvh; }
.rnd-new2 .products li { opacity: 0.4 !important; }
.rnd-new2 .products .list-thumb { width: 51.888667992%; padding-top: 31.6103379722%; }
.rnd-new2 .products .on { opacity: 1 !important; }
@media screen and (max-width:1024px) {
.rnd-new2 { margin-bottom: 3.5625em; padding-top: 3.0625em; }
.rnd-new2 .rnd-status { height: 58.1473214286dvh; }
.rnd-new2 .products .list-thumb { width: 34.8930481283%; padding-top: 21.256684492%; }
}
.prd-spec-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.625em 1.625%; }
.prd-spec-list .thumb-wrap { position: relative; padding-top: 59.8837209302%; border-radius: 1.25em; background: #000; overflow: hidden; }
.prd-spec-list .btn-view-spec { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; }
.prd-spec-list .btn-view-spec:hover .thumb { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.prd-spec-list .thumb { display: block; width: 100%; max-width: none; height: 100%; border-radius: inherit; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }
.prd-spec-list .product-spec-content { display: none; }
@media screen and (max-width:1024px) {
.prd-spec-list { grid-template-columns: 1fr; gap: 1.1875em 0; }
.prd-spec-list .thumb-wrap { border-radius: 0.875em; }
}
#specPopup .popup { width: 36.25em; border-radius: 1.25em; overflow: hidden; }
#specPopup .popup-body { position: relative; height: 100%; }
#specPopup .product-spec-content { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; padding: 1.375em 2em 3em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; }
#specPopup .popup-title { margin-bottom: 5px; font-size: 2.5em; font-weight: 800; line-height: 1.25; }
#specPopup .thumb-wrap { position: relative; margin-bottom: 1.375em; padding-top: 59.8837209302%; border-radius: 1.25em; background: #000; overflow: hidden; }
#specPopup .thumb { display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; border-radius: inherit; -o-object-fit: cover; object-fit: cover; }
#specPopup .scrollbar-container { margin: 0 -2em -3em; padding: 0 2em 3em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; }
@media screen and (max-width:1024px) {
#specPopup .popup { border-radius: 0.8125em; }
#specPopup .product-spec-content { padding: 0.875em 1.25em 1.875em; }
#specPopup .popup-title { margin-bottom: 3px; font-size: 1.5625em; }
#specPopup .thumb-wrap { margin-bottom: 0.875em; border-radius: 0.8125em; }
#specPopup .scrollbar-container { margin: 0 -1.25em -1.875em; padding: 0 1.25em 1.875em; }
}
.colored-table { border: hidden; border-bottom: 1px solid; }
.colored-table th,
.colored-table td { height: 3.125em; color: #5A5A5A; letter-spacing: 0; line-height: 1.4; text-align: center; }
.colored-table tr { background: #DEDEDE; }
.colored-table tr:nth-child(2n) { background: #fff; }
.colored-table .thead { border: 1px solid; border-width: 1px 0; background: #fff; }
.colored-table .thead ~ tr { background: #DEDEDE; }
.colored-table .thead ~ tr:nth-child(2n+1) { background: #fff; }
.colored-table .text-left { padding-left: 10%; }
@media screen and (max-width:1024px) {
.colored-table th,
.colored-table td { font-size: 0.8125em; }
}
.rnd-new-cert { position: relative; padding-top: 9.875em; overflow: hidden; z-index: 0; }
.rnd-new-cert .section-banner { position: absolute; top: 0; left: 0; width: 100%; height: 38.9375rem; z-index: -1; }
.rnd-new-cert .secondary-title { margin-bottom: 4.875rem; color: #fff; }
.rnd-new-cert .scroll-container { margin: 0 -7.8125vw; -ms-touch-action: pan-y; touch-action: pan-y; }
.rnd-new-cert .scroll-content { padding: 0 7.8125vw; }
.rnd-new-cert .book-list { margin-bottom: 4.125em; }
.rnd-new-cert .book-list .list-thumb { padding-top: 113.9534883721%; background: url("../img/sub/cert_thumb_bg.jpg") no-repeat 0 0; background-size: contain; }
.rnd-new-cert .btn-zoom { border: 0; background: transparent; }
.rnd-new-cert .thumb { display: block; top: 0; left: 0; right: 0; width: 73.023255814%; margin: auto; -o-object-fit: contain; object-fit: contain; }
@media screen and (max-width:1024px) {
.rnd-new-cert { padding-top: 4.3125em; }
.rnd-new-cert .section-banner { height: 59.2995169082vw; max-height: 15.34375rem; }
.rnd-new-cert .secondary-title { margin-bottom: 2.34375rem; }
.rnd-new-cert .scroll-container { margin: 0 -4.8309178744vw; }
.rnd-new-cert .scroll-content { padding: 0 4.8309178744vw; }
.rnd-new-cert .book-list { margin-bottom: 0; }
}
#zoomPopup .origin { display: block; max-width: 90vw; max-height: 90dvh; }
#zoomPopup.in .origin { -webkit-animation: fade-in 0.3s 0.4s both; animation: fade-in 0.3s 0.4s both; }
.loc-type1,
.global .map { --type-color: #90001E; }
.loc-type1 .name,
.global .map .name { background-image: url("../img/sub/ic_pin1.svg"); }
.loc-type2 { --type-color: #008589; }
.loc-type2 .name { background-image: url("../img/sub/ic_pin2.svg"); }
.location-map { position: relative; margin-bottom: 6.0625rem; padding-top: 40.625%; background: #F2F2F2; overflow: hidden; }
.location-map .map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 43.125%; height: 100%; margin: auto; background: url("../img/sub/location_map.svg") no-repeat 0 0; background-size: contain; }
.location-map.global { padding-top: 31.25%; }
.location-map.global .map { background-image: url("../img/sub/location_map2.svg"); }
.location-map ol { list-style: none; font-size: 0.8vw; line-height: 1.2; }
.location-map ol > li { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.location-map .name { position: relative; padding: 0 0 0.35em 1.4em; font-weight: 700; color: #000; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; background-size: 1.15em auto; }
.location-map .name:after { content: ""; display: block; position: absolute; top: 0.4em; right: -0.7em; width: 0.5em; height: 0.5em; background: url("../img/sub/ic_map_link.svg") no-repeat 0 0; background-size: contain; -webkit-filter: brightness(0) saturate(100%); filter: brightness(0) saturate(100%); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.location-map .name:hover:after { opacity: 1; }
.location-map .line-box { display: block; position: absolute; bottom: 0; left: 5px; right: 5px; padding-top: 1px; pointer-events: none; z-index: 0; }
.location-map .line-box.bottom { top: 100%; bottom: auto; }
.location-map .line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, var(--type-color), var(--type-color) 2px, transparent 2px, transparent 4px) repeat-x left bottom, repeating-linear-gradient(180deg, var(--type-color), var(--type-color) 2px, transparent 2px, transparent 4px) repeat-y right top; background-size: 100% 1px, 1px 100%; z-index: -1; }
.location-map .bottom .line { background-position: left top, right top; }
.location-map .dot { display: block; position: absolute; top: 0; right: 0; width: 0.65em; height: 0.65em; margin: -0.3em -0.3em 0 0; -webkit-animation: dot 2s linear infinite; animation: dot 2s linear infinite; border-radius: 50%; background: var(--type-color); z-index: 1; }
.location-map .dot:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: dot-outer 2s linear infinite; animation: dot-outer 2s linear infinite; border-radius: 50%; background: inherit; opacity: 0.2; -webkit-transform: scale(1.61); -ms-transform: scale(1.61); transform: scale(1.61); z-index: -1; }
.location-map .bottom .dot { top: 100%; margin-top: 0; }
@media screen and (max-width:1024px) {
.location-map { margin-bottom: 2.8125rem; padding-top: 24.375rem; }
.location-map .map { width: 100%; max-width: 25.875rem; }
.location-map.global { padding-top: 24.375rem; }
.location-map.global .map { background-position: 0.75rem 50%; }
.location-map ol { font-size: 0.625rem; }
.location-map .line { background-image: repeating-linear-gradient(90deg, var(--type-color), var(--type-color) 2px, transparent 2px, transparent 3px), repeating-linear-gradient(180deg, var(--type-color), var(--type-color) 2px, transparent 2px, transparent 3px); }
.location-map .line-box { left: 2px; right: 2px; }
}
.map .loc-type1 .name { margin-right: 5px; }
.map .loc-type1 .line { background-position: left bottom, left top; }
.map .loc-type1 .bottom .line { background-position: left top, left top; }
.map .loc-type1 .dot { left: 0; right: auto; margin-right: 0; margin-left: -0.3em; }
.map .loc-type1 li { right: 11.1111111111%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; text-align: right; }
.map .loc-type1 li:nth-child(1) { top: 20.3846153846%; right: 5.4347826087%; width: 53.1400966184%; }
.map .loc-type1 li:nth-child(1) .line-box { padding-top: 11.5909090909%; }
.map .loc-type1 li:nth-child(2) { top: 29.6153846154%; width: 45.2898550725%; }
.map .loc-type1 li:nth-child(2) .line-box { padding-top: 5.3333333333%; }
.map .loc-type1 li:nth-child(3) { top: 38.3333333333%; left: 7.8502415459%; right: auto; width: 25.845410628%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; }
.map .loc-type1 li:nth-child(3) .name { margin-right: 0; }
.map .loc-type1 li:nth-child(3) .line-box { padding-top: 27.1028037383%; }
.map .loc-type1 li:nth-child(3) .line { background-position: left bottom, right top; }
.map .loc-type1 li:nth-child(3) .line .line { position: absolute; top: 0; left: 100%; width: 19.1588785047%; height: 1px; }
.map .loc-type1 li:nth-child(3) .dot { left: auto; right: -19.1588785047%; margin-left: 0; margin-right: -0.3em; }
.map .loc-type1 li:nth-child(4) { top: 38.7179487179%; width: 39.3719806763%; }
.map .loc-type1 li:nth-child(4) .line-box { padding-top: 11.6564417178%; }
@media screen and (max-width:1024px) {
.map .loc-type1 .name { margin-right: 2px; }
.map .loc-type1 li { right: 10.1449275362%; }
.map .loc-type1 li:nth-child(1) { right: 4.4685990338%; width: 53.8647342995%; }
.map .loc-type1 li:nth-child(1) .line-box { padding-top: 11.4349775785%; }
.map .loc-type1 li:nth-child(2) { width: 46.0144927536%; }
.map .loc-type1 li:nth-child(2) .line-box { padding-top: 5.7742782152%; }
.map .loc-type1 li:nth-child(3) { left: 6.6425120773%; width: 26.5700483092%; }
.map .loc-type1 li:nth-child(3) .line-box { padding-top: 24.5454545455%; }
.map .loc-type1 li:nth-child(3) .line .line { width: 20%; }
.map .loc-type1 li:nth-child(3) .dot { right: -22.7272727273%; }
.map .loc-type1 li:nth-child(4) { width: 39.8550724638%; }
.map .loc-type1 li:nth-child(4) .line-box { padding-top: 11.5151515152%; }
}
.map .loc-type2 li { left: 7.8502415459%; }
.map .loc-type2 li:nth-child(1) { top: 28.7179487179%; width: 32.6086956522%; }
.map .loc-type2 li:nth-child(1) .line-box { padding-top: 2.5925925926%; }
.map .loc-type2 li:nth-child(1) .line .line { position: absolute; top: 100%; left: 100%; width: 2.962962963%; height: 1px; margin: -1px 0 0 -1px; }
.map .loc-type2 li:nth-child(1) .dot { top: calc(100% - 6px); left: auto; right: -4.8148148148%; }
.map .loc-type2 li:nth-child(2) { top: 19.358974359%; width: 32.6086956522%; }
.map .loc-type2 li:nth-child(2) .line-box { padding-top: 13.3333333333%; }
.map .loc-type2 li:nth-child(3) { top: 47.6923076923%; width: 29.9516908213%; }
.map .loc-type2 li:nth-child(3) .line-box { padding-top: 44.3548387097%; }
@media screen and (max-width:1024px) {
.map .loc-type2 li { left: 6.6425120773%; }
.map .loc-type2 li:nth-child(1) { width: 33.0917874396%; }
.map .loc-type2 li:nth-child(1) .line-box { padding-top: 2.5547445255%; }
.map .loc-type2 li:nth-child(1) .line .line { width: 5.8394160584%; }
.map .loc-type2 li:nth-child(1) .dot { top: calc(100% - 3px); right: -7.6642335766%; }
.map .loc-type2 li:nth-child(2) { width: 33.3333333333%; }
.map .loc-type2 li:nth-child(2) .line-box { padding-top: 13.0434782609%; }
.map .loc-type2 li:nth-child(3) { width: 31.1594202899%; }
.map .loc-type2 li:nth-child(3) .line-box { padding-top: 42.6356589147%; }
}
.global .map .rt { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; text-align: right; }
.global .map .rt .name { margin-right: 5px; }
.global .map .rt .line { background-position: left bottom, left top; }
.global .map .rt .bottom .line { background-position: left top, left top; }
.global .map .rt .dot { left: 0; right: auto; margin-right: 0; margin-left: -0.3em; }
.global .map li:nth-child(1) { top: 42.8333333333%; right: -9.9033816425%; width: 42.270531401%; }
@media screen and (max-width:1024px) {
.global .map li:nth-child(1) { top: 44.6153846154%; right: 4.8309178744%; width: 24.154589372%; }
}
.location-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: 0 2.375%; margin-bottom: -2.5rem; }
.location-list > li { margin-bottom: 2.5em; }
.location-list .loc-type1 { grid-column: 1; }
.location-list .loc-type2 { grid-column: 2; }
.location-list .card { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; border-radius: 1.25em; background: #F2F2F2; overflow: hidden; }
.location-list .card-thumb { position: relative; width: 47.8205128205%; min-height: 0; padding-top: 52.0512820513%; min-height: 0; -webkit-box-flex: 0; -ms-flex: 0 0 47.8205128205%; flex: 0 0 47.8205128205%; background: url("../img/sub/placeholder_pic.svg") no-repeat 50% 50%; background-size: 69.9731903485% auto; overflow: hidden; }
.location-list .card-thumb:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); }
.location-list .thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -o-object-fit: cover; object-fit: cover; }
.location-list .card-body { padding: 11.4102564103% 5.8974358974% 7.1794871795%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.location-list .title-wrap { position: relative; padding-bottom: 1.625em; border-bottom: 1px solid; }
.location-list .list-type { font-weight: 700; color: var(--type-color); }
.location-list .list-type em { font-style: normal; }
.location-list .list-title { margin-right: 3.6em; font-size: 1.5625em; line-height: 1.2; }
.location-list .btn-map { display: block; position: absolute; bottom: 1.5em; right: 0; width: 5.375em; color: #fff; font-weight: 700; line-height: 2.25; border: 0; border-radius: 0.3125em; background: #4F5556; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.location-list .btn-map:after { content: ""; display: inline-block; width: 0.625em; height: 0.625em; margin: -2px 0 0 0.25em; background: url("../img/sub/ic_map_link.svg") no-repeat 0 0; background-size: contain; vertical-align: middle; }
.location-list .btn-map:hover { background-color: #333; }
.location-list .btn-map:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }
.location-list .list-detail { margin-top: 1.3333333333em; padding-left: 1em; font-size: 0.9em; line-height: 1.3888888889; color: #494949; }
.location-list .list-detail dt { margin: 0 0 5px -1em; padding: inherit; font-weight: 700; color: #000; letter-spacing: 0; line-height: 1; background-repeat: no-repeat; background-position: 0 1px; background-size: 0.8333333333em auto; }
.location-list .list-detail dd + dt { margin-top: 1.6666666667em; }
.location-list .address-label { background-image: url("../img/sub/ic_address.svg"); }
.location-list .tel-label { background-image: url("../img/sub/ic_tel.svg"); }
@media screen and (max-width:1024px) {
.location-list { display: block; margin-bottom: -1.25rem; }
.location-list > li { margin-bottom: 1.6666666667em; font-size: 0.75em; }
.location-list > li.loc-type2 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.location-list .card { height: auto; border-radius: 0.8333333333em; }
.location-list .card-body { padding: 10.6951871658% 4.0106951872% 6.6844919786% 5.0802139037%; }
.location-list .title-wrap { padding-bottom: 1.0833333333em; }
.location-list .list-type { font-size: 0.9166666667em; }
.location-list .list-title { margin-right: 3.8333333333em; font-size: 1em; }
.location-list .btn-map { bottom: 0.8333333333em; width: 4.5em; line-height: 2.0833333333; border-radius: 0.25em; }
.location-list .list-detail { margin-top: 1em; padding-left: 1.0833333333em; font-size: 1em; }
.location-list .list-detail dt { margin: 0 0 2px -1.0833333333em; background-size: 0.8333333333em auto; }
.location-list .list-detail dd + dt { margin-top: 1.25em; }
}
#mapPopup .popup { width: 50rem; border-radius: 1.25rem; overflow: hidden; }
@media screen and (max-width:1024px) {
#mapPopup .popup { border-radius: 0.625rem; }
}
.location-map-view .map-wrap { position: relative; padding-top: 66.625%; background: #D9D9D9; overflow: hidden; }
.location-map-view .js-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.location-map-view .map-detail { padding: 2.8125em 3.25em; }
.location-map-view .list-type { min-height: 1.2em; font-weight: 700; color: var(--type-color); }
.location-map-view .list-type em { font-style: normal; }
.location-map-view .list-title { margin-bottom: 0.8333333333em; font-size: 1.875em; line-height: 1; }
.location-map-view .list-detail { margin-bottom: -0.5555555556em; padding-left: 1em; font-size: 1.125em; color: #494949; }
.location-map-view .list-detail:after { content: ""; display: table; clear: both; }
.location-map-view .list-detail dt { width: 6.6666666667em; margin-left: -1em; padding: inherit; font-weight: 700; color: #000; letter-spacing: 0; line-height: 1.1; background-repeat: no-repeat; background-position: 0 2px; background-size: 0.8333333333em auto; float: left; clear: both; }
.location-map-view .list-detail dd { margin-bottom: 0.5555555556em; float: left; }
.location-map-view .address-label { background-image: url("../img/sub/ic_address.svg"); }
.location-map-view .tel-label { background-image: url("../img/sub/ic_tel.svg"); }
@media screen and (max-width:1024px) {
.location-map-view .map-wrap { padding-top: 15.625rem; }
.location-map-view .map-detail { padding: 1.8181818182em 2.1818181818em; font-size: 0.6875em; }
.location-map-view .list-type { font-size: 1.0909090909em; }
.location-map-view .list-title { margin-bottom: 1em; font-size: 1.6363636364em; }
.location-map-view .list-detail { margin-bottom: -0.5454545455em; padding-left: 0.9090909091em; font-size: 1em; }
.location-map-view .list-detail dt { margin-left: -0.9090909091em; background-size: 0.7272727273em auto; }
.location-map-view .list-detail dd { margin-bottom: 0.5454545455em; }
}
/* 제품소개 */
.exterior-content { --theme-color: var(--color-point); }
.interior-content { --theme-color: #008589; }
.filter-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; position: sticky; top: 5.9375rem; margin-bottom: 6.4375em; border: 1px solid #D7D7D7; background: #fff; -webkit-box-shadow: 0 0 0 0.9375rem #fff; box-shadow: 0 0 0 0.9375rem #fff; z-index: 2; }
.filter-list li { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid #D7D7D7; }
.filter-list li:last-child { border-right: 0; }
.filter-list .btn-filter { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 3.75em; padding: 0.8125em 0.625%; color: #929292; line-height: 1; letter-spacing: -0.02em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 0; background: transparent; }
.filter-list .btn-filter:hover { color: #fff; background: var(--theme-color); }
.filter-list .on { opacity: 1 !important; }
.filter-list .on .btn-filter { color: #fff; background: var(--theme-color); -webkit-box-shadow: 0 0 0 var(--theme-color); box-shadow: 0 0 0 var(--theme-color); }
@media screen and (max-width:1024px) {
.filter-list { display: grid; top: 3.75rem; margin-bottom: 3.4375em; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-width: 1px 0 0 1px; -webkit-box-shadow: 0 0 0 0.625rem #fff; box-shadow: 0 0 0 0.625rem #fff; }
.filter-list li { border-bottom: 1px solid #D7D7D7; }
.filter-list li:first-child { display: none; }
.filter-list li:last-child { border-right: 1px solid #D7D7D7; }
.filter-list .btn-filter { padding: 0.6153846154em 0.3076923077em; font-size: 0.8125em; }
}
.showcase { position: relative; width: 100%; max-width: 84.6875em; height: 48.3333333333vw; margin: 0 auto; font-size: 0.8333333333vw; }
.showcase .car { position: absolute; left: 0; right: 0; bottom: 0; -o-object-fit: contain; object-fit: contain; }
.showcase .car img { display: block; width: 100%; max-width: none; }
.filterize-list { list-style: none; }
.showcase .filter-item { -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.showcase .on .filter-item { opacity: 0; visibility: hidden; }
.showcase .filter-item.on { opacity: 1; visibility: visible; }
.showcase .card { position: absolute; top: 0; left: 0; width: 19.1881918819%; border: 1px solid var(--theme-color); }
.showcase .list-thumb { padding-top: 53.8461538462%; }
.showcase .card-body { padding: 1.0625em 0 1.25em; color: #fff; border-top: 1px solid var(--theme-color); background: #4F5556; text-align: center; }
.showcase .list-title { font-size: 1.2625em; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2352941176; }
.showcase .list-meta { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 3px; font-size: 0.75em; font-weight: 200; color: rgba(255, 255, 255, 0.8); line-height: 1.1666666667; letter-spacing: -0.02em; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; }
.showcase .list-meta dt { margin-right: 4px; }
.showcase .line-wrap { position: absolute; top: 32.5581395349%; left: calc(100% - 0.25em); pointer-events: none; z-index: 1; }
.showcase .line { display: block; width: 100%; }
.showcase .line img { display: block; width: 100%; max-width: none; }
.showcase .pointer { display: block; position: absolute; bottom: -0.8125em; right: -0.8125em; width: 1.625em; height: 1.625em; margin: 0 auto; border: 0; border-radius: 50%; background: var(--theme-color) url("../img/sub/ic_showcase_pointer.svg") no-repeat 0 0; background-size: contain; pointer-events: all; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; }
.showcase .pointer:hover { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }
@media screen and (max-width:1024px) {
.showcase { max-width: 23.375em; height: 38.40625em; font-size: 1rem; }
.showcase .car { left: -1.25em; right: -1.25em; }
.showcase .card { width: 52.1390374332%; }
.showcase .list-thumb { padding-top: 54.8717948718%; }
.showcase .card-body { padding: 0.8125em 0; }
.showcase .list-title { font-size: 0.8125em; }
.showcase .list-meta { font-size: 0.5625em; }
.showcase .line-wrap { top: calc(100% - 0.25em); left: 0; }
.showcase .pointer { bottom: -0.75em; right: -0.125em; width: 0.75em; height: 0.75em; }
}
.filter-item[data-filter=bumper] .card:nth-child(1) { top: 49.6767241379%; }
.filter-item[data-filter=bumper] .card:nth-child(1) .line-wrap { width: 40.3846153846%; }
.filter-item[data-filter=bumper] .card:nth-child(2) { top: auto; left: auto; right: 0; bottom: 2.8739224138%; }
.filter-item[data-filter=bumper] .card:nth-child(2) .line-wrap { top: auto; left: auto; right: calc(100% - 0.25em); bottom: 79.5348837209%; width: 18.0769230769%; }
.filter-item[data-filter=bumper] .card:nth-child(2) .pointer { top: -0.8125em; left: -0.8125em; right: auto; bottom: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=bumper] .card:nth-child(1) { top: 0; }
.filter-item[data-filter=bumper] .card:nth-child(1) .line-wrap { left: 14.1025641026%; width: 3.6082474227%; }
.filter-item[data-filter=bumper] .card:nth-child(1) .pointer { bottom: -0.5em; }
.filter-item[data-filter=bumper] .card:nth-child(2) { bottom: 0; }
.filter-item[data-filter=bumper] .card:nth-child(2) .line-wrap { top: auto; right: 4.6153846154%; bottom: calc(100% - 0.1875em); width: 3.0927835052%; }
.filter-item[data-filter=bumper] .card:nth-child(2) .pointer { top: -0.5em; left: -0.1875em; }
}
.filter-item[data-filter=ragr] .card .line-wrap { top: 29.7674418605%; width: 50.3846153846%; }
.filter-item[data-filter=ragr] .card .pointer { bottom: -1.5em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=ragr] .card { left: 23.3957219251%; }
.filter-item[data-filter=ragr] .card .line-wrap { top: 47.8527607362%; left: auto; right: calc(100% - 0.1875em); width: 24.1025641026%; }
.filter-item[data-filter=ragr] .card .pointer { left: -0.375em; right: auto; bottom: -0.625em; }
}
.filter-item[data-filter=ssm] .card { left: 46.6420664207%; }
.filter-item[data-filter=ssm] .card .line-wrap { top: calc(100% - 0.25em); left: auto; right: 12.6923076923%; width: 3.4615384615%; }
.filter-item[data-filter=ssm] .card .pointer { right: -0.625em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=ssm] .card { left: 24.1978609626%; }
.filter-item[data-filter=ssm] .card .line-wrap { top: calc(100% - 0.25em); right: 6.1538461538%; width: 3.6082474227%; }
.filter-item[data-filter=ssm] .card .pointer { right: -0.125em; bottom: -0.625em; }
}
.filter-item[data-filter=bpm] .card { top: auto; left: auto; right: 0; bottom: 26.9396551724%; }
.filter-item[data-filter=bpm] .card .line-wrap { top: auto; left: auto; right: calc(100% - 0.25em); bottom: 73.488372093%; width: 21.9230769231%; }
.filter-item[data-filter=bpm] .card .pointer { top: -0.625em; left: -1.5em; right: auto; bottom: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=bpm] .card { top: 0; right: 23.5294117647%; bottom: auto; }
.filter-item[data-filter=bpm] .card .line-wrap { top: 30.0613496933%; left: calc(100% - 0.25em); right: auto; bottom: auto; width: 37.4358974359%; }
.filter-item[data-filter=bpm] .card .pointer { top: auto; left: auto; right: -0.375em; bottom: -0.625em; }
}
.filter-item[data-filter=fem] .card { top: auto; bottom: 2.1551724138%; }
.filter-item[data-filter=fem] .card .line-wrap { top: auto; bottom: 70.2325581395%; width: 70.7692307692%; }
.filter-item[data-filter=fem] .card .pointer { top: -0.625em; bottom: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=fem] .card { top: 0; bottom: auto; left: 23.3957219251%; }
.filter-item[data-filter=fem] .card .line-wrap { top: 38.036809816%; left: auto; right: calc(100% - 0.25em); bottom: auto; width: 11.7948717949%; }
.filter-item[data-filter=fem] .card .pointer { top: auto; right: auto; bottom: 0; left: -0.375em; }
}
.filter-item[data-filter=siga] .card { top: auto; left: 53.3579335793%; bottom: 0; }
.filter-item[data-filter=siga] .card .line-wrap { top: auto; left: 14.6153846154%; bottom: calc(100% - 0.25em); width: 3.0769230769%; }
.filter-item[data-filter=siga] .card .pointer { top: -1.125em; right: -0.5625em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=siga] .card { top: 0; left: 24.1978609626%; bottom: auto; }
.filter-item[data-filter=siga] .card .line-wrap { top: calc(100% - 0.25em); left: auto; right: 25.641025641%; bottom: auto; width: 3.6082474227%; }
.filter-item[data-filter=siga] .card .pointer { top: auto; right: -0.125em; bottom: -0.125em; }
}
.filter-item[data-filter=scc] .card { top: 24.8922413793%; }
.filter-item[data-filter=scc] .card .line-wrap { top: 28.3720930233%; width: 27.6923076923%; }
.filter-item[data-filter=scc] .card .pointer { bottom: -1.625em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=scc] .card { top: 0; left: 22.7272727273%; }
.filter-item[data-filter=scc] .card .line-wrap { top: 32.5153374233%; left: auto; right: calc(100% - 0.25em); width: 37.9487179487%; }
.filter-item[data-filter=scc] .card .pointer { left: -0.375em; right: auto; bottom: -0.625em; }
}
.filter-item[data-filter=exga] .card { left: auto; right: 0; }
.filter-item[data-filter=exga] .card .line-wrap { top: 37.2093023256%; left: auto; right: calc(100% - 0.25em); width: 45.7692307692%; }
.filter-item[data-filter=exga] .card .pointer { left: -0.75em; right: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=exga] .card { right: 23.3957219251%; }
.filter-item[data-filter=exga] .card .line-wrap { top: 29.1411042945%; left: calc(100% - 0.25em); width: 24.1025641026%; }
.filter-item[data-filter=exga] .card .pointer { left: auto; right: -0.375em; bottom: -0.625em; }
}
.filter-item[data-filter=crc] .card { top: 24.4612068966%; left: auto; right: 0; }
.filter-item[data-filter=crc] .card .line-wrap { top: 34.4186046512%; left: auto; right: calc(100% - 0.25em); width: 34.2307692308%; }
.filter-item[data-filter=crc] .card .pointer { left: -0.75em; right: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=crc] .card { top: 0; right: 23.5294117647%; }
.filter-item[data-filter=crc] .card .line-wrap { top: 30.0613496933%; left: calc(100% - 0.25em); right: auto; width: 31.7948717949%; }
.filter-item[data-filter=crc] .card .pointer { left: auto; right: -0.375em; }
}
.filter-item[data-filter=cpm] .card { top: 25.3232758621%; }
.filter-item[data-filter=cpm] .card .line-wrap { top: 40%; width: 126.9230769231%; }
.filter-item[data-filter=cpm] .card .pointer { bottom: -1.4375em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=cpm] .card { top: 0; left: 23.3957219251%; }
.filter-item[data-filter=cpm] .card .line-wrap { top: calc(100% - 0.25em); left: 24.1025641026%; width: 3.0769230769%; }
.filter-item[data-filter=cpm] .card .pointer { bottom: -0.625em; }
}
.filter-item[data-filter=pitr] .card { left: 47.685525349%; }
.filter-item[data-filter=pitr] .card .line-wrap { top: calc(100% - 0.25em); left: auto; right: 18.8461538462%; width: 3.4615384615%; }
.filter-item[data-filter=pitr] .card .pointer { right: -0.5em; bottom: -1.4375em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=pitr] .card { left: 23.5294117647%; }
.filter-item[data-filter=pitr] .card .line-wrap { top: calc(100% - 0.25em); left: auto; right: 7.4358974359%; width: 3.0769230769%; }
.filter-item[data-filter=pitr] .card .pointer { right: -0.1875em; bottom: -0.5em; }
}
.filter-item[data-filter=lust] .card { top: 24.5689655172%; left: auto; right: 0; }
.filter-item[data-filter=lust] .card .line-wrap { top: auto; left: auto; right: calc(100% - 0.3125em); bottom: 16.2790697674%; width: 27.3076923077%; }
.filter-item[data-filter=lust] .card .pointer { top: -0.8125em; left: -0.8125em; right: auto; bottom: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=lust] .card { top: 0; right: 24.1978609626%; }
.filter-item[data-filter=lust] .card .line-wrap { top: 36.8098159509%; left: calc(100% - 0.25em); right: auto; bottom: auto; width: 36.4102564103%; }
.filter-item[data-filter=lust] .card .pointer { top: auto; left: auto; right: -0.375em; bottom: 0; }
}
.filter-item[data-filter=glbo] .card .line-wrap { top: 34.4186046512%; width: 103.4615384615%; }
.filter-item[data-filter=glbo] .card .pointer { bottom: -1.4375em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=glbo] .card { left: 23.2620320856%; }
.filter-item[data-filter=glbo] .card .line-wrap { top: calc(100% - 0.25em); left: 8.9743589744%; width: 3.0769230769%; }
.filter-item[data-filter=glbo] .card .pointer { bottom: -0.5em; }
}
.filter-item[data-filter=cst] .card { top: auto; bottom: 25.8620689655%; }
.filter-item[data-filter=cst] .card .line-wrap { top: 38.1395348837%; width: 183.8461538462%; }
.filter-item[data-filter=cst] .card .pointer { top: auto; bottom: -1.4375em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=cst] .card { top: 0; left: 23.3957219251%; bottom: auto; }
.filter-item[data-filter=cst] .card .line-wrap { top: calc(100% - 0.25em); left: 58.7179487179%; width: 3.0769230769%; }
.filter-item[data-filter=cst] .card .pointer { bottom: -0.625em; }
}
.filter-item[data-filter=tra] .card { left: auto; right: 0; }
.filter-item[data-filter=tra] .card .line-wrap { top: 38.1395348837%; left: auto; right: calc(100% - 0.3125em); width: 17.3076923077%; }
.filter-item[data-filter=tra] .card .pointer { right: auto; left: -0.8125em; bottom: -1.4375em; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=tra] .card { right: 24.1978609626%; }
.filter-item[data-filter=tra] .card .line-wrap { top: 32.5153374233%; left: calc(100% - 0.25em); right: auto; width: 43.0769230769%; }
.filter-item[data-filter=tra] .card .pointer { right: -0.375em; left: auto; bottom: 0; }
}
.filter-item[data-filter=dost] .card { top: auto; left: auto; right: 23.5121234386%; bottom: 0; }
.filter-item[data-filter=dost] .card .line-wrap { top: auto; left: 20.7692307692%; bottom: calc(100% - 0.25em); width: 3.4615384615%; }
.filter-item[data-filter=dost] .card .pointer { top: -1.4375em; right: -0.5em; bottom: auto; }
@media screen and (max-width:1024px) {
.filter-item[data-filter=dost] .card { top: 0; left: 23.5294117647%; right: auto; bottom: auto; }
.filter-item[data-filter=dost] .card .line-wrap { top: calc(100% - 0.25em); left: auto; right: 12.3076923077%; bottom: auto; width: 3.0769230769%; }
.filter-item[data-filter=dost] .card .pointer { top: auto; right: -0.1875em; bottom: -0.625em; }
}
.mold-content .secondary-title { margin-bottom: 0.48em; }
@media screen and (max-width:1024px) {
.mold-content .secondary-title { margin-bottom: 0.72em; }
}
.mold-overview { font-size: 1.25em; line-height: 1.5; }
.mold-overview .headline { margin-bottom: 6px; font-size: 2em; line-height: 1.5; }
@media screen and (max-width:1024px) {
.mold-overview { margin-bottom: 4.1785714286em; font-size: 0.875em; }
.mold-overview .headline { font-size: 1.7857142857em; }
.mold-overview .desc { max-width: 21.6071428571em; }
}
.mold1 { margin-bottom: 4.1875em; }
.mold1 .section-banner { height: 16.76em; margin: 0; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; border-radius: 0.8em; }
.mold1 .section-banner p { width: 50%; padding: 2.2em 1.65em; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.5; text-align: right; z-index: 0; }
.mold1 .section-banner p:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(52.5%, rgba(33, 30, 61, 0)), color-stop(84.62%, rgba(33, 30, 61, 0.7))), -webkit-gradient(linear, left bottom, left top, from(rgba(11, 7, 7, 0.2)), to(rgba(0, 0, 0, 0.2))); background: linear-gradient(90deg, rgba(33, 30, 61, 0) 52.5%, rgba(33, 30, 61, 0.7) 84.62%), linear-gradient(0deg, rgba(11, 7, 7, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); z-index: -1; }
@media screen and (max-width:1024px) {
.mold1 { margin-bottom: 3.65625em; }
.mold1 .section-banner { height: 62.8019323671vw; max-height: 20em; -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; border-radius: 0.7692307692em; }
.mold1 .section-banner p { width: auto; padding: 1.1785714286em 2.6737967914% 1.1785714286em 5.8823529412%; font-size: 0.875rem; text-align: left; }
.mold1 .section-banner p:after { background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(33, 30, 61, 0)), color-stop(84.61%, rgba(33, 30, 61, 0.7))), -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))); background: linear-gradient(180deg, rgba(33, 30, 61, 0) 40%, rgba(33, 30, 61, 0.7) 84.61%), linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); }
}
.mold2 ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75em 2%; }
.mold2 li { position: relative; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
.mold2 li:after { content: ""; display: block; position: absolute; top: 50%; right: -5.8673469388%; width: 7.6530612245%; height: 0; padding-top: 7.6530612245%; margin-top: -3.8265306122%; border-radius: 100%; background: #fff url("../img/sub/ic_process_next_rt.svg") no-repeat 55% 50%; background-size: 20% auto; z-index: 1; }
.mold2 li:nth-child(2n):after { top: 100%; right: 50%; margin: -2.0408163265% -3.8265306122% 0 0; background-image: url("../img/sub/ic_process_next_dw.svg"); background-position: 50% 52%; background-size: 35% auto; }
.mold2 li:nth-child(3n):after { right: 100%; margin-right: -1.7857142857%; background-image: url("../img/sub/ic_process_next_lt.svg"); background-position: 45% 50%; }
.mold2 li:nth-child(4n) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
.mold2 li:nth-child(1),
.mold2 li:nth-child(2) { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; }
.mold2 li:last-child:after { content: none; }
.mold2 .list-thumb { padding-top: 74.7448979592%; border-radius: 1.25em; }
.mold2 .list-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.7em 8.0357142857%; font-size: 1.25em; font-weight: 200; color: rgba(255, 255, 255, 0.6); letter-spacing: -0.03em; line-height: 1.5; }
.mold2 .list-title { margin-bottom: 0.32em; font-size: 1.25em; font-weight: 500; color: #fff; line-height: 1.2; }
@media screen and (max-width:1024px) {
.mold2 ol { grid-template-columns: 1fr; gap: 1.1875em 0; }
.mold2 li:nth-child(1n) { -webkit-box-ordinal-group: initial; -ms-flex-order: initial; order: initial; }
.mold2 li:nth-child(1n):after { top: 100%; right: 50%; width: 2.6875em; margin: -0.75em -1.3125em 0 0; padding-top: 2.6875em; background-image: url("../img/sub/ic_process_next_dw.svg"); background-position: 50% 52%; background-size: 34.8837209302% auto; }
.mold2 .list-thumb { padding-top: 74.7448979592%; border-radius: 0.625em; }
.mold2 .list-info { padding: 1.4285714286em 8.0213903743%; font-size: 0.875em; }
.mold2 .list-title { margin-bottom: 0.4444444444em; font-size: 1.2857142857em; }
}
/* ESG */
.strategy-content { margin-bottom: -9.375rem; }
@media screen and (max-width:1024px) {
.strategy-content { margin-bottom: -4.375rem; }
}
.strategy1 { position: relative; }
.strategy1 .desc { margin-bottom: 4.2333333333em; font-size: 1.875rem; font-weight: 500; line-height: 1.6666666667; }
.strategy1 .bg { position: absolute; top: 30.625rem; right: 0; width: 48.9583333333%; pointer-events: none; z-index: -1; }
.strategy1 .bg img { display: block; width: 100%; height: 100%; }
@media screen and (max-width:1024px) {
.strategy1 .desc { margin-bottom: 2.5em; font-size: 0.875rem; }
.strategy1 .bg { top: 24.46875rem; width: 6.96875rem; }
}
.esg-banner { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 25rem; margin: 4.75rem 0 6.625rem; padding-left: 11.5%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #75AA48; overflow: hidden; }
.esg-banner:before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, right top, left top, color-stop(34.62%, rgba(117, 170, 72, 0)), color-stop(57%, #75AA48)); background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(270deg, rgba(117, 170, 72, 0) 34.62%, #75AA48 57%); z-index: 1; }
.esg-banner .title { position: relative; width: 18.5%; z-index: 1; }
.esg-banner .title img { display: block; width: 100%; max-width: none; height: 100%; }
.esg-banner .bg-video { position: absolute; top: 0; right: -1px; width: 69.75%; height: 100%; overflow: hidden; pointer-events: none; }
.esg-banner video { position: absolute; top: 50%; left: 0; width: 100%; height: auto; min-height: 150%; -webkit-transform: translate(0, -58%); -ms-transform: translate(0, -58%); transform: translate(0, -58%); -o-object-fit: cover; object-fit: cover; }
@media screen and (max-width:1024px) {
.esg-banner { height: 12.5rem; margin: 1.5625rem 0; padding-left: 7.7540106952%; }
.esg-banner:before { background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, right top, left top, color-stop(45.38%, rgba(78, 144, 50, 0)), color-stop(68.81%, #4E9032)); background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(270deg, rgba(78, 144, 50, 0) 45.38%, #4E9032 68.81%); }
.esg-banner .title { width: 7.9375rem; }
.esg-banner .bg-video { width: 90.5797101449%; }
.esg-banner video { top: 0; left: 15%; min-height: 100%; -webkit-transform: none; -ms-transform: none; transform: none; }
}
.strategy1-list { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin: 0 auto; font-size: 0.9375vw; letter-spacing: -0.03em; line-height: 1.1363636364; }
.strategy1-list > li { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 50%; right: -2.3076923077%; min-height: 0; padding: 1.5909090909em 19.2660550459% 1.5909090909em 6.7278287462%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 18.1818181818em; background: #EAF2EB; mix-blend-mode: multiply; }
.strategy1-list > li:nth-child(2) { left: -2.3076923077%; padding-left: 19.2660550459%; padding-right: 6.7278287462%; background: #E2E6F0; }
.strategy1-list .title { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0.3636363636em; right: 0.3636363636em; bottom: 0.3636363636em; width: 33.0275229358%; font-size: 1.3636363636em; color: #fff; letter-spacing: -0.05em; line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 50%; background: #367443; }
.strategy1-list li:nth-child(2) .title { left: 0.3636363636em; right: auto; background: #4067AB; }
.strategy1-list .icon { display: block; width: 39.3518518519%; margin: 0 auto 0.1666666667em; }
.strategy1-list .icon img { display: block; width: 100%; max-width: none; }
.strategy1-list .dot-list { color: #000; }
.strategy1-list .dot-list li + li { margin-top: 0.3636363636em; }
@media screen and (max-width:1024px) {
.strategy1-list { padding-top: 4.0833333333em; font-size: 0.75em; }
.strategy1-list > li { width: 50%; right: 0; min-height: 0; padding: 6.0833333333em 4.347826087% 1.875em 1.690821256%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; border-radius: 0.8333333333em; }
.strategy1-list > li:nth-child(2) { left: 0; padding-left: 1.690821256%; padding-right: 4.347826087%; }
.strategy1-list .title { top: -28%; right: -0.625em; bottom: auto; width: 6.625em; height: 6.625em; font-size: 1.3333333333em; }
.strategy1-list li:nth-child(2) .title { left: -0.625em; }
.strategy1-list .dot-list li + li { margin-top: 0.3636363636em; }
}
.esg-version { margin-bottom: 2.1538461538em; font-size: 1.625em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1538461538; text-align: center; }
.esg-version .label { display: inline-block; margin: -3px 0.5882352941em 0 0; padding: 0 0.5882352941em; font-size: 0.6538461538em; letter-spacing: 0; line-height: 1.6470588235; border: 1px solid; vertical-align: middle; }
@media screen and (max-width:1024px) {
.esg-version { margin-bottom: 2.9230769231em; font-size: 0.8125em; }
}
.strategy2 { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 100dvh; margin: 0; -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: 7em 0 9.0625em; color: #fff; z-index: 0; }
.strategy2 table { width: 100%; max-width: 64.625rem; margin: 0 auto; border: hidden; }
.strategy2 table td { width: 28.33655706%; padding: 1.25% 2.1176470588em; font-size: 0.8854166667vw; color: #C2C2C2; letter-spacing: -0.03em; line-height: 1.3529411765; text-align: center; }
.strategy2 table thead th { padding-bottom: 3px; font-size: 0.625vw; color: #949494; letter-spacing: 0; }
.strategy2 table .icon { display: block; width: 5em; margin: 0 auto 0.5em; }
.strategy2 table .icon img { display: block; width: 100%; max-width: none; }
.strategy2 table tbody th { width: 7.7em; font-size: 1.0416666667vw; letter-spacing: -0.03em; }
.strategy2 table tbody th em { display: block; margin-top: 0.3125em; font-size: 0.8em; font-style: normal; font-weight: 500; }
.strategy2 table tbody th span { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.strategy2 table th.v-top { padding-top: 1em; vertical-align: top; }
.strategy2 table .liner { display: inline-block; position: relative; width: 27.2727272727%; height: 0.1em; margin-left: auto; background: #949494; vertical-align: middle; }
.strategy2 table .liner:after { content: ""; display: block; position: absolute; top: -0.1em; right: -0.15em; width: 0.3em; height: 0.3em; border-radius: 50%; background: #949494; }
.strategy2 table tbody tr:first-child th { padding-bottom: 0.8em; }
.strategy2 table .important { padding: 0 0 0.5714285714em; font-size: 1.4583333333vw; font-weight: 700; color: #fff; vertical-align: middle; }
.strategy2 table .important2 { padding-left: 0; padding-right: 0; font-size: 0.9375vw; font-weight: 500; }
.strategy2 table dl { padding: 0.625em 0.875em; font-size: 0.9411764706em; color: #fff; border-radius: 0.625em; background: rgba(236, 236, 236, 0.4); backdrop-filter: blur(20px); }
.strategy2 table dt { font-weight: 200; }
.strategy2 table dd { font-weight: 700; }
.strategy2 table dd + dt { margin-top: 0.25em; padding-top: 0.25em; border-top: 1px dashed #949494; }
.strategy2 .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: -1; }
.strategy2 .bg img { display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: left center; object-position: left center; }
@media screen and (max-width:1024px) {
.strategy2 { padding: 4.75em 0 8.9375em; }
.strategy2 table { max-width: none; }
.strategy2 table td { width: 26.7379679144%; padding: 1.0695187166% 0.3em; font-size: 0.5625rem; font-size: 0.5625em; }
.strategy2 table thead th { font-size: 0.3125em; }
.strategy2 table tbody th { width: 19.7860962567%; padding-right: 1.1111111111em; font-size: 0.5625em; }
.strategy2 table .important { font-size: 0.8125em; }
.strategy2 table .important2 { font-size: 0.625em; }
.strategy2 table .liner { height: 1px; }
.strategy2 table .liner:after { top: -1px; right: -1px; width: 3px; height: 3px; border-radius: 50%; background: #949494; }
.strategy2 table dl { font-size: 0.7em; }
}
.strategy3 { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: 100dvh; padding: 9.125em 0 15.5em; color: #fff; -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; z-index: 0; }
.strategy3 .group-chart { display: block; width: 87.8125%; margin: 4.25em -0.25% 0 auto; }
.strategy3 .group-chart img { display: block; width: 100%; max-width: none; height: auto; }
.strategy3 .bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: -1; }
.strategy3 .bg img { display: block; position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: left center; object-position: left center; }
@media screen and (max-width:1024px) {
.strategy3 { padding: 3.875em 0 6.6875em; }
.strategy3 .group-chart { width: 70.0483091787%; margin: 1.375em auto 0; -webkit-transform: translateX(13%); -ms-transform: translateX(13%); transform: translateX(13%); }
}
.grid-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4.875% 4.875%; }
@media screen and (max-width:1024px) {
.grid-list { display: block; }
.grid-list li:not(:nth-child(1)) > .board-table { border-top: 0; }
.grid-list .board-table > li { -webkit-box-align: initial; -ms-flex-align: initial; align-items: initial; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.grid-list .board-table .list-title { margin-bottom: 0.8333333333em; font-size: 1.125em; }
}
@media screen and (min-width:1025px) {
.esg-statement-content .js-sticky-menu:not(.show) a { color: #fff; }
}
.statement1 { position: relative; padding: 9.875em 0 4.6875em; color: #fff; z-index: 0; }
.statement1 .bg-video { position: absolute; top: 0; left: 0; right: 0; height: 54.375em; overflow: hidden; pointer-events: none; z-index: -1; }
.statement1 .bg-video video { position: absolute; top: 50%; left: 50%; min-width: 177.77vh; height: 56.25vw; min-height: 100%; background: #222; -o-object-fit: cover; object-fit: cover; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.statement1 .bg-video:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.statement1 .desc { margin-bottom: 6.5em; font-size: 1.375em; font-weight: 200; letter-spacing: -0.03em; line-height: 1.3636363636; }
.statement1 .scroll-container { margin: 0 -7.8125vw; -ms-touch-action: pan-y; touch-action: pan-y; }
.statement1 .scroll-content { padding: 0 7.8125vw; }
@media screen and (max-width:1024px) {
.statement1 { padding: 4.3125em 0 0; font-size: 0.8125em; }
.statement1 .bg-video { height: 33.4615384615em; }
.statement1 .desc { width: 23.8461538462em; margin: 0 auto 4.7307692308em; font-size: inherit; }
.statement1 .scroll-container { margin: 0 -4.8309178744vw; }
.statement1 .scroll-content { padding: 0 4.8309178744vw; }
}
.book-list { --list-width: 100%; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--list-width); color: #000; white-space: nowrap; }
.book-list > li { width: 21.5em; margin-right: 2.5em; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1; white-space: normal; -webkit-box-flex: 0; -ms-flex: 0 0 21.5em; flex: 0 0 21.5em; }
.book-list .list-thumb { padding-top: 114.8837209302%; }
.book-list .content-body { padding: 1.9em 0 3.1em; }
.book-list .list-year { margin-bottom: 0.5em; font-weight: 500; color: #4F5556; }
.book-list .list-year em { font-style: normal; }
.book-list .list-title { margin-bottom: 1em; font-size: 1.25em; font-weight: 700; }
.book-list .list-attachment { display: -webkit-box; display: -ms-flexbox; display: flex; }
.book-list .btn-download { width: 8.75em; margin-right: 0.375em; }
@media screen and (max-width:1024px) {
.book-list > li { margin-right: 2.7272727273em; font-size: 0.6875rem; }
.book-list .list-title { font-size: 1.2727272727em; }
}
.statement2 { padding: 6.875em 0 6.5em; background: #F7F7F7; }
.statement2 .scroll-container { width: 100vw; margin: 0 -8.3333333333vw; -ms-touch-action: pan-y; touch-action: pan-y; }
.statement2 .scroll-content { padding: 0 8.3333333333vw; }
.statement2 .btn-download:not(:hover) { background: transparent; }
@media screen and (max-width:1024px) {
.statement2 { padding: 3.125em 0 3.25em; }
.statement2 .scroll-container { margin: 0 -4.8309178744vw; }
.statement2 .scroll-content { padding: 0 4.8309178744vw; }
}
.statement3 ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5% 2.5%; }
.statement3 li { font-size: 1.5625rem; font-weight: 700; letter-spacing: -0.03em; }
.statement3 .list-thumb { margin-bottom: 1.2em; padding-top: 71.9367588933%; border: 1px solid #C2C2C2; }
.statement3 .list-thumb .thumb { -o-object-fit: contain; object-fit: contain; }
@media screen and (max-width:1024px) {
.statement3 ol { grid-template-columns: auto; }
.statement3 li { font-size: 0.875rem; text-align: center; }
.statement3 .list-thumb { margin-bottom: 1.0714285714em; padding-top: 48.7282463186%; }
}
.env-policy1 ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5em 2.5%; counter-reset: num; }
.env-policy1 ol li { position: relative; padding: 14.8333333333em 6.7193675889% 3.8888888889em; font-size: 1.125em; line-height: 1.3888888889; counter-increment: num; border: 1px solid #C2C2C2; text-align: center; }
.env-policy1 ol li:before { content: counter(num); display: block; position: absolute; top: 0; left: 4.743083004%; font-size: 11.1111111111em; font-weight: 800; color: #EFEFEF; line-height: 1; }
.env-policy1 .icon { position: absolute; top: 5.2777777778em; left: 0; right: 0; width: 9.2222222222em; margin: auto; overflow: hidden; }
.env-policy1 .icon img { display: block; width: 100%; max-width: none; }
.env-policy1 .list-title { margin-bottom: 0.64em; font-size: 1.3888888889em; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.env-policy1 .list-detail { color: #4F5556; }
@media screen and (max-width:1024px) {
.env-policy1 { margin-bottom: 4.6875rem; }
.env-policy1 ol { grid-template-columns: 1fr 1fr; gap: 0.4375em 1.871657754%; }
.env-policy1 ol li { padding: 9.5833333333em 6.5217391304% 2.5em; font-size: 0.75em; }
.env-policy1 ol li:before { left: 4.8913043478%; font-size: 6em; }
.env-policy1 .icon { top: 15.2173913043%; width: 6.9166666667em; }
.env-policy1 .list-title { margin-bottom: 2px; font-size: 1.25em; }
}
.env-policy2 ol { list-style: none; counter-reset: num; }
.env-policy2 ol li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 2.2222222222em 0; counter-increment: num; font-size: 1.125rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-bottom: 1px solid #C2C2C2; }
.env-policy2 ol li:first-child { padding-top: 0; }
.env-policy2 ol li:before { content: counter(num); display: block; width: 2em; margin-right: 0.8em; font-size: 1.3888888889em; font-weight: 500; line-height: 2; border: 1px solid; text-align: center; -webkit-box-flex: 0; -ms-flex: 0 0 2em; flex: 0 0 2em; }
.env-policy2 .list-title { margin-bottom: 0.2em; font-size: 1.3888888889em; font-weight: 500; letter-spacing: -0.03em; }
.env-policy2 .list-detail { color: #4F5556; line-height: 1.4; }
.env-policy2 .ceo-sign { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2em; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; line-height: 1; }
.env-policy2 .ceo-sign img { display: block; max-width: none; }
.env-policy2 .ceo-sign .name { display: block; width: 9em; margin-left: 1em; }
.env-policy2 .ceo-sign .sign { display: block; width: 12.5em; max-width: none; }
@media screen and (max-width:1024px) {
.env-policy2 ol li { font-size: 0.8125rem; }
.env-policy2 ol li:before { font-size: 1em; line-height: 1.8461538462; }
.env-policy2 .list-title { font-size: 1.1538461538em; }
.env-policy2 .ceo-sign { font-size: 0.5em; }
}
/* 주주총회 */
.agm-article { padding-top: 1.875rem; border-top: 2px solid; }
@media screen and (max-width:1024px) {
.agm-article { padding-top: 0.9375rem; }
}
.load-form { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 28.65em; height: 3em; margin: 0 auto 1.2em; font-size: 1.25rem; }
.load-form form { display: inherit; width: inherit; height: inherit; }
.load-form .form-selectbox { width: 81.3263525305%; height: 100%; }
.load-form .btn-load { width: 17.4520069808%; height: 100%; margin-left: auto; font-size: 1.1em; color: #fff; border: 0; border-radius: 0.625rem; background: var(--color-gray); -webkit-transition: background-color 0.3s; transition: background-color 0.3s; }
.load-form .btn-load:hover { background-color: #404344; }
@media screen and (max-width:1024px) {
.load-form { max-width: 16.4615384615em; height: 2.3076923077em; font-size: 0.8125rem; }
.load-form .form-selectbox { width: 70.5607476636%; }
.load-form .btn-load { width: 28.0373831776%; border-radius: 0.3125rem; }
}
.agm-article-content { margin-bottom: 3.125rem; }
.agm-article-content .view-header { padding-bottom: 1.875em; text-align: center; }
.agm-article-content .title { margin-bottom: 0.25em; font-size: 2.5em; font-weight: 700; line-height: 1; }
.agm-article-content .total-info { margin-bottom: 0.4545454545em; font-size: 1.375em; line-height: 1; }
.agm-article-content .total-info em { font-style: normal; }
.agm-article-content .date { font-size: 1.125em; color: var(--color-gray); line-height: 1.3888888889; }
.agm-article-content .date span { margin: 0 0.2222222222em; }
.agm-article-content .view-body { padding-top: 5.5555555556em; border-top: 2px solid; }
.agm-article-content .table tbody th:nth-child(1) { width: 14.5%; }
.agm-article-content .table td:nth-child(3) { width: 16.5%; }
.agm-article-content .table td:nth-child(4) { width: 16.5%; }
@media screen and (max-width:1024px) {
.agm-article-content { margin-bottom: 1.5625rem; }
.agm-article-content .view-header { padding-bottom: 1.125em; }
.agm-article-content .title { font-size: 1.5625em; }
.agm-article-content .total-info { font-size: 0.8125em; }
.agm-article-content .date { font-size: 0.75em; }
.agm-article-content .view-body { padding-top: 2.1428571429em; }
}
@media screen and (max-width:700px) {
.agm-article-content .table tbody th:nth-child(1) { width: 19%; }
.agm-article-content .table td:nth-child(3) { width: 23%; }
.agm-article-content .table td:nth-child(4) { width: 16%; }
}
.shareholders-guarantees { font-size: 1.125rem; }
.shareholders-guarantees .headline { margin-bottom: 1.6em; font-size: 1.3888888889em; font-weight: 700; letter-spacing: -0.03em; line-height: 1.4; }
.shareholders-guarantees dl { width: 100%; max-width: 72.9113924051%; }
.shareholders-guarantees dl dt { margin-bottom: 0.4545454545em; font-size: 1.2222222222em; font-weight: 700; line-height: 1; }
.shareholders-guarantees dl dd { margin-bottom: 2.2222222222em; }
.shareholders-guarantees dl dd:last-child { margin-bottom: 0; }
@media screen and (max-width:1024px) {
.shareholders-guarantees { font-size: 0.8125rem; }
.shareholders-guarantees .headline { margin-bottom: 1.25em; font-size: 1.2307692308em; }
.shareholders-guarantees dl dt { font-size: 1.0769230769em; }
.shareholders-guarantees dl dd { margin-bottom: 1.5384615385em; }
}
@media screen and (max-width:700px) {
.shareholders-guarantees dl { max-width: none; }
}
/* 인사채용 */
.careers-content { margin-bottom: -9.375rem; }
@media screen and (max-width:1024px) {
.careers-content { margin-bottom: -4.375rem; }
}
.plakor-people-chart { position: relative; width: 65.5rem; height: 47.1875rem; margin: 5.9375rem auto 0; }
.plakor-people-chart .item1 { position: absolute; top: 10.3311258278%; left: 23.7595419847%; width: 62.8816793893%; opacity: 0; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; }
.plakor-people-chart.show .item1 { opacity: 1; }
.plakor-people-chart .item2 { position: absolute; top: 15.2317880795%; left: 27.2900763359%; width: 45.9923664122%; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s; }
.plakor-people-chart.show .item2 { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-animation: rotate180 15s 1s linear infinite; animation: rotate180 15s 1s linear infinite; }
.plakor-people-chart .item3 { position: absolute; top: 0; left: 4.961832061068702%; width: 30.3435114504%; opacity: 0; -webkit-transform: scale(0.8) translateY(25px); -ms-transform: scale(0.8) translateY(25px); transform: scale(0.8) translateY(25px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.plakor-people-chart.show .item3 { opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition-delay: 1.1s; transition-delay: 1.1s; -webkit-animation: floatingL 2s 1.6s infinite; animation: floatingL 2s 1.6s infinite; }
.plakor-people-chart .item4 { position: absolute; top: 0; right: 0.9541984732824427%; width: 33.0152671756%; opacity: 0; -webkit-transform: scale(0.8) translateY(-25px); -ms-transform: scale(0.8) translateY(-25px); transform: scale(0.8) translateY(-25px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.plakor-people-chart.show .item4 { opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition-delay: 1.2s; transition-delay: 1.2s; -webkit-animation: floatingR 2.2s 1.7s infinite; animation: floatingR 2.2s 1.7s infinite; }
.plakor-people-chart .item5 { position: absolute; right: -1.240458015267176%; bottom: 0; width: 33.4923664122%; opacity: 0; -webkit-transform: scale(0.8) translateY(25px); -ms-transform: scale(0.8) translateY(25px); transform: scale(0.8) translateY(25px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.plakor-people-chart.show .item5 { opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition-delay: 1.3s; transition-delay: 1.3s; -webkit-animation: floatingR2 2s 1.8s infinite; animation: floatingR2 2s 1.8s infinite; }
.plakor-people-chart .item6 { position: absolute; left: -3.530534351145038%; bottom: 0; width: 34.1603053435%; opacity: 0; -webkit-transform: scale(0.8) translateY(-25px); -ms-transform: scale(0.8) translateY(-25px); transform: scale(0.8) translateY(-25px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }
.plakor-people-chart.show .item6 { opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition-delay: 1.4s; transition-delay: 1.4s; -webkit-animation: floatingL2 2.2s 1.9s infinite; animation: floatingL2 2.2s 1.9s infinite; }
.plakor-people-chart img { display: block; width: 100%; max-width: none; height: auto; }
@media screen and (max-width:1024px) {
.plakor-people-chart { width: 100%; max-width: 23.375rem; height: 31.5625rem; margin-top: 2.375rem; }
.plakor-people-chart .item1 { top: 20.198019802%; left: 13.7700534759%; width: 88.1016042781%; }
.plakor-people-chart .item2 { top: 23.8613861386%; left: 18.7165775401%; width: 64.4385026738%; }
.plakor-people-chart .item3 { left: -2.13903743315508%; width: 45.0534759358%; }
.plakor-people-chart .item4 { right: -1.871657754010695%; width: 45.1871657754%; }
.plakor-people-chart .item5 { right: -1.336898395721925%; width: 45.1871657754%; }
.plakor-people-chart .item6 { bottom: -3.168316831683168%; width: 45.320855615%; }
}
.careers2 { position: relative; padding: 10.375rem 0 8.875rem; color: #fff; background: #000; z-index: 0; }
.careers2 ol { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 53.44em; margin: 2.16em auto 2.88em; font-size: 1.5625rem; font-weight: 700; line-height: 1; counter-reset: num; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: center; }
.careers2 ol li { position: relative; width: 18.1137724551%; padding-top: 18.1137724551%; counter-increment: num; -webkit-box-flex: 0; -ms-flex: 0 0 18.1137724551%; flex: 0 0 18.1137724551%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); background-repeat: no-repeat; background-position: 50% 24.7933884298%; background-size: 30.5785123967% auto; backdrop-filter: blur(15px); }
.careers2 ol li:after { content: ""; display: block; position: absolute; top: 50%; left: 100%; width: 13.2231404959%; margin-top: -6.6115702479%; padding-top: 13.2231404959%; background: url("../img/sub/ic_step_next.svg") no-repeat 50% 50%; background-size: 31.25% auto; }
.careers2 ol li:last-child { background-color: #90001E; }
.careers2 ol li:last-child:after { content: none; }
.careers2 li:nth-child(1) { background-image: url("../img/sub/ic_recruit_step1.svg"); }
.careers2 li:nth-child(2) { background-image: url("../img/sub/ic_recruit_step2.svg"); }
.careers2 li:nth-child(3) { background-image: url("../img/sub/ic_recruit_step3.svg"); }
.careers2 li:nth-child(4) { background-image: url("../img/sub/ic_recruit_step4.svg"); }
.careers2 li:nth-child(5) { background-image: url("../img/sub/ic_recruit_step5.svg"); }
.careers2 .list-title { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 51.2396694215% 0.4375em 0; }
.careers2 .list-title:before { content: counter(num, decimal-leading-zero); display: block; font-size: 0.72em; margin-bottom: 0.4444444444em; }
.careers2 .bg { position: absolute; top: 0; right: 0; width: 100%; height: 110%; overflow: hidden; pointer-events: none; z-index: -1; }
.careers2 .bg img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
@media screen and (max-width:1024px) {
.careers2 { margin-top: 5.9375rem; padding: 7rem 0 6.875rem; }
.careers2 ol { max-width: 27.0769230769em; margin: 1.9230769231em auto 1.5384615385em; font-size: 0.8125rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.careers2 ol li { width: 29.5454545455%; margin-right: 3.6931818182%; padding-top: 29.5454545455%; -ms-flex-preferred-size: 29.5454545455%; flex-basis: 29.5454545455%; background-position: 50% 25%; background-size: 31.7307692308% auto; }
.careers2 ol li:after { width: 12.5%; margin-top: -5.7692307692%; padding-top: 12.5%; background-size: 30.7692307692% auto; }
.careers2 .list-title { padding-top: 51.9230769231%; }
.careers2 .list-title:before { font-size: 0.6153846154em; }
}
.benefit-content .section { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 6.25rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.benefit-content .section-title { width: 28.75%; font-size: 2.0em; -webkit-box-flex: 0; -ms-flex: 0 0 28.75%; flex: 0 0 28.75%; }
.benefit-content ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4.8em 6.4864864865%; margin-top: 0.6666666667em; font-size: 0.9375rem; line-height: 1.3333333333; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; }
.benefit-content ul .icon { width: 6.1333333333em; height: 5.8666666667em; margin: 0 auto 0.8em; }
.benefit-content ul .icon img { display: block; width: 100%; max-width: none; height: 100%; }
.benefit-content ul .list-title { margin-bottom: 0.4em; font-size: 1.6666666667em; font-weight: 800; line-height: 1; }
.benefit-content ul .list-title strong { font-weight: inherit; }
.benefit-content ul .list-desc { color: #949494; }
@media screen and (max-width:1600px) {
.benefit-content ul br { display: none; }
}
@media screen and (max-width:1024px) {
.benefit-content .section { margin-top: 3.125rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.benefit-content .section-title { width: auto; font-size: 1.4375em; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; }
.benefit-content ul { display: block; margin-top: 1.9230769231em; font-size: 0.8125rem; line-height: 1.3461538462; -webkit-box-flex: initial; -ms-flex: initial; flex: initial; text-align: left; }
.benefit-content ul li { position: relative; margin-bottom: 2.7692307692em; padding-left: 6.3076923077em; }
.benefit-content ul li:last-child { margin-bottom: 0; }
.benefit-content ul .icon { position: absolute; top: 0; left: 1em; bottom: 0; width: 4.3076923077em; height: 4.1538461538em; margin: auto; }
.benefit-content ul .list-title { margin-bottom: 0.5555555556em; font-size: 1.3846153846em; }
}
@media screen and (max-width:700px) {
.benefit-content ul br { display: initial; }
}
/* 자료실 */
.archive-list { list-style: none; }
.archive-list > li { position: relative; margin-bottom: 1.25rem; padding: 3.125rem 4.875% 1.375rem; border: 1px solid #C2C2C2; background: #fff; -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, -webkit-box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s; transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s; }
.archive-list > li:has(.btn-trigger:hover) { background-color: #f5f5f5; border-color: var(--color-point); -webkit-box-shadow: inset 0 0 0 1px var(--color-point); box-shadow: inset 0 0 0 1px var(--color-point); }
.archive-list .list-accordion-title { font-size: 2.5rem; font-weight: 800; line-height: 1; }
.archive-list .btn-trigger { display: block; position: relative; width: 100%; padding: 0 0.85em 1.75rem 0; line-height: 1; border: 0; border-radius: 0; background: none; text-align: left; -webkit-transition: color 0.3s; transition: color 0.3s; }
.archive-list .btn-trigger:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 1.75rem; -webkit-transform: scaleX(1.1) scaleY(3.5); -ms-transform: scaleX(1.1) scaleY(3.5); transform: scaleX(1.1) scaleY(3.5); }
.archive-list .btn-trigger.on:before { bottom: 0; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleX(1.1) scaleY(1.7); -ms-transform: scaleX(1.1) scaleY(1.7); transform: scaleX(1.1) scaleY(1.7); }
.archive-list .btn-trigger:after { content: ""; display: block; position: absolute; top: 0.075em; right: 0; width: 0.825em; height: 0.825em; background: url("../img/ic_accordion_angle.svg") no-repeat 0 0; background-size: contain; pointer-events: none; }
.archive-list .btn-trigger.on:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.archive-list .btn-trigger:hover { color: var(--color-point); }
@media screen and (max-width:1024px) {
.archive-list > li { margin-bottom: 0.9375rem; padding: 1.3125rem 6.1497326203% 0.625rem; }
.archive-list .list-accordion-title { font-size: 1.5625rem; }
.archive-list .btn-trigger { padding: 0 0.68em 0.75rem 0; }
.archive-list .btn-trigger:before { bottom: 0.4em; -webkit-transform: scaleX(1.1) scaleY(2.5); -ms-transform: scaleX(1.1) scaleY(2.5); transform: scaleX(1.1) scaleY(2.5); }
.archive-list .btn-trigger.on:before { -webkit-transform: scaleX(1.1) scaleY(1.5); -ms-transform: scaleX(1.1) scaleY(1.5); transform: scaleX(1.1) scaleY(1.5); }
}
.list-accordion-panel { padding-bottom: 2.375rem; }
@media screen and (max-width:1024px) {
.list-accordion-panel { padding-bottom: 1.75rem; }
}
/* 주식정보 */
.top-annot { margin-bottom: 1.25rem; letter-spacing: 0; text-align: right; }
.top-annot em { font-style: normal; }
.top-annot.dimmed { margin-bottom: 0.9375em; color: #949494; }
@media screen and (max-width:1024px) {
.top-annot { font-size: 0.6875rem; }
}
.table-wrap { position: relative; }
.table-wrap .top-annot { position: absolute; top: -2.5em; right: 0; }
@media screen and (max-width:1024px) {
.table-wrap .top-annot { top: -2.1818181818em; }
}
.stock-table { table-layout: fixed; border-left: hidden; border-right: hidden; }
.stock-table caption { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.stock-table td { height: 3.2em; font-size: 1.5625rem; font-weight: 600; line-height: 1; border: 1px solid #C2C2C2; text-align: center; }
.stock-table tr:nth-child(1) td { border-top: 2px solid #000; }
.stock-table tr:last-child td { border-bottom: 2px solid #000; }
.stock-table em { font-style: normal; }
.stock-table .red { color: var(--color-point); }
.stock-table .blue { color: #3641C0; }
.stock-table tbody tr:nth-child(1) td { height: 7.2em; }
.stock-table .num1 strong { font-size: 3.125rem; font-weight: 800; line-height: 1; }
.stock-table .num1 strong:after { position: relative; top: -4px; margin-left: 0.5em; font-size: 0.4em; vertical-align: middle; }
.stock-table .num1 .red:after { content: "▲"; }
.stock-table .num1 .blue:after { content: "▼"; }
.stock-table .num2 { padding-left: 7.125%; padding-right: 7.125%; text-align: left; }
.stock-table .num2 em { display: block; margin-top: 0.32em; }
.stock-table .standard { font-size: 0.8em; font-weight: 400; }
.stock-table .label { margin-right: 0.375em; font-size: 0.64em; font-weight: 400; color: #949494; vertical-align: middle; }
.stock-table .value { vertical-align: middle; }
@media screen and (max-width:1024px) {
.stock-table td { height: 3.9285714286em; padding: 0 2.6737967914%; font-size: 0.875rem; text-align: left; }
.stock-table .num1 { text-align: center; }
.stock-table .num1 strong { font-size: 1.5625rem; }
.stock-table .num1 strong:after { top: -1px; }
.stock-table .num2 { padding: 0 2.6737967914%; }
.stock-table .num2 em { font-size: 0.9375rem; }
.stock-table .label { display: block; margin-bottom: 3px; }
}
@media screen and (max-width:1024px) {
.table.is-duplicated colgroup,
.table.is-new colgroup { display: none !important; }
}
.table.is-new { display: none !important; }
@media screen and (max-width:1024px) {
.table.is-new { display: table !important; }
}
.total-row td { font-weight: 800; background-color: #F7F7F7; }
td .align-num { display: inline-block; min-width: 3.8888888889em; text-align: right; vertical-align: middle; }
/* #Print */
@media print {
@page { size: auto; margin: 10mm; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.header,
.footer,
.page-header,
.page-nav,
.action-group,
.pagination,
.board .view-footer,
.board-top { display: none !important; }
.page-body { padding: 0; }
.container { max-width: none; padding: 0; }
li,
th,
td,
dt,
dd { page-break-inside: avoid; }
img { max-width: 100% !important; page-break-inside: avoid; }
}