/****************************** INITIALIZE ******************************/ * {margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; } html, body {width: 100%; min-height: 100%; height: 100%; background-color: #fff; color: #000; word-break:break-word ;} .not_scroll{position: fixed; overflow: hidden; width: 100%; height: 100%} /****************************** UI KIT ******************************/ /* Custom */ .red-100 {color: #cf0000;} .blue-100 {color: #1c6aba;} .blue-200 {color: #0073da;} .blue-300 {color: #0044CF;} .line-1 {display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .box-shadow {border-radius: 20px; box-shadow: 12px 12px 40px -8px rgb(0 0 0 / 48%);} .emphasis {position: relative; font-weight: 700;} .emphasis::after {content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; background-color: #1c6aba; border-radius: 50%;} .quotes {position: relative; display: inline-block;} .quotes::before {content: ""; position: absolute; top: -8px; left: -24px; width: 18px; height: 18px; background: url("../img/quote-alt-left-solid-24.png"); background-size: cover;} .quotes::after {content: ""; position: absolute; top: -8px; right: -24px; width: 18px; height: 18px; background: url("../img/quote-alt-right-solid-24.png"); background-size: cover;} /* Table */ .table-wrapper {position: relative; padding-bottom: 20px;} .table-wrapper .table-header {} .table-wrapper .table-header h5 {font-size: 24px; font-weight: 600;} .table-wrapper .table {margin-top: 20px; border-top: 3px solid #222; } .table-wrapper .table .table-body {min-width: 1000px; width: 100%; background-color: #fff;} .table-wrapper .table .table-body .item-list .t-item {display: flex;} .table-wrapper .table .table-body .item-list .t-item .td {display: inline-flex; align-items: center; justify-content: center; min-height: 32px; font-size: 16px; font-weight: 400; word-break: break-all; color: #383838;} .table-wrapper .table .table-body .item-list .t-item .td:last-child {border-right: none; margin-right: 0;} .table-wrapper .table .table-body .item-list .t-item .td span {display: inline-flex; align-items: center; padding: 0 20px; min-height: 56px;} .table-wrapper .table .table-body .item-list .t-item .td .tdd:not(:last-child) {width: 100%; border-bottom: 1px solid #e5e5e5;} .table-wrapper .table .table-body .item-list.ti-standard .t-item .td[data-align="left"] {align-items: flex-start;} .table-wrapper .table .table-body .item-list.ti-standard .t-item .td[data-align="center"] {align-items: center;} .table-wrapper .table .table-body .item-list.ti-standard {} .table-wrapper .table .table-body .item-list.ti-standard .t-item {} .table-wrapper .table .table-body .item-list.ti-standard .t-item .td {flex-direction: column; align-items: flex-start; border-bottom: 1px solid #e5e5e5; padding: 0; font-size: 16px; min-height: 56px;} .table-wrapper .table .table-body .item-list.ti-header {border-bottom: 1px solid #e5e5e5; background-color: #f7f7f7;} .table-wrapper .table .table-body .item-list.ti-header.hide {display: none;} .table-wrapper .table .table-body .item-list.ti-header .t-item .td {position: relative; justify-content: center; font-weight: 600; font-size: 16px; min-height: 60px; border: none;} .table-wrapper .table-pagination {margin: 40px 0; display: flex; justify-content: center; align-items: center;} .table-wrapper .table-pagination > div {} .table-wrapper .table-pagination .tp-prev {cursor: pointer; margin-left: 12px;} .table-wrapper .table-pagination .tp-nav {margin: 0 20px;} .table-wrapper .table-pagination .tp-nav .pg_num {font-weight: 700; color: #999; margin: 10px; cursor: pointer;} .table-wrapper .table-pagination .tp-nav .pg_num.active {color: #283046;} .table-wrapper .table-pagination .tp-next {cursor: pointer; margin-right: 12px;} .table-wrapper .table-pagination img {width: 60%; vertical-align: baseline;} /* Checkbox */ .checks {position: relative; text-align: left;} .checks input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} .checks input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size: 18px; margin-bottom: 0;} .checks input[type="checkbox"] + label:before {content: ' '; display: inline-block; width: 21px; height: 21px; line-height: 21px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #fff; border: 1px solid #0044cf; border-radius : 50%;} .checks input[type="checkbox"] + label em {color: #0044cf; font-weight: 600;} .checks input[type="checkbox"]:checked + label:before {content: '\2714'; color: #0044cf; font-size: 14px; text-shadow: 1px 1px #fff; background: #fff; border-color: #0044cf;} .checks2 {position: relative; text-align: left; display: flex; flex-wrap: wrap; gap: 8px;} .checks2 input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} .checks2 input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size: 15px; margin-bottom: 0;} .checks2 input[type="checkbox"] + label:before {content: ' '; display: inline-block; width: 18px; height: 18px; line-height: 18px; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; background: #fff; border: 1px solid #b1b1b1; border-radius : 2px;} .checks2 input[type="checkbox"] + label em {color: #0044cf; font-weight: 600;} .checks2 input[type="checkbox"]:checked + label:before {content: '\2714'; color: #000; font-size: 14px; text-shadow: 1px 1px #fff; background: #fff; border-color: #b1b1b1;} /* input password autocomplete off*/ input.password {-webkit-text-security: disc;} /* Scrollbar */ ::-webkit-scrollbar {width: 10px;} ::-webkit-scrollbar-thumb {background-color: #bcbcbc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;} ::-webkit-scrollbar-track {background-color: none; border-radius: 10px; box-shadow: inset 0px 0px 5px white;} /****************************** Library ******************************/ /* Animation */ .scroll-01[data-scroll] {position: relative; opacity: 0; will-change: top, left, right, bottom, transform, scale, opacity; transform: translateY(8rem) scale(0.85); transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);} .scroll-01[data-scroll="in"] {opacity: 1; transform: translateY(0) scale(1);} .scroll-01[data-scroll="out"] {opacity: 0;} /* tossing */ .tossing {position: relative; animation: tossing 6.5s infinite;} @keyframes tossing { 0% {transform: rotate(-4deg);} 50% {transform: rotate(4deg);} 100% {transform: rotate(-4deg);} } /* bubbles */ .bubbles {overflow: hidden; border-radius: 51% 49% 52% 48% / 57% 56% 44% 43%; animation: bubbles 20s linear infinite; z-index: -1;} @keyframes bubbles { 0% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;} 10% {border-radius: 53% 47% 33% 67% / 60% 30% 70% 40%;} 20% {border-radius: 71% 29% 38% 62% / 72% 48% 52% 28%;} 30% {border-radius: 41% 59% 45% 55% / 33% 56% 44% 67%;} 40% {border-radius: 55% 45% 67% 33% / 77% 48% 52% 23%;} 50% {border-radius: 44% 56% 22% 78% / 31% 74% 26% 69%;} 60% {border-radius: 46% 54% 48% 52% / 61% 59% 41% 39%;} 70% {border-radius: 44% 56% 60% 40% / 63% 36% 64% 37%;} 80% {border-radius: 20% 80% 45% 55% / 31% 79% 21% 69%;} 90% {border-radius: 66% 34% 57% 43% / 49% 51% 49% 51%;} 100% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;} } /* Snow Animation */ .snow {display: none; position: absolute; min-width: 100%; min-height: 100%; height: 100%; width: 100%; top: 0; left: 0;} .snow .svg {position: absolute; width: 100%; height: 100%;} #snow-top-layer {will-change: transform; transform: translateY(-768px); animation: fall 22.5s infinite linear;} #snow-bottom-layer {will-change: transform; transform: translateY(-768px); animation: fall 45s infinite linear;} @keyframes fall { 100% { transform: translateY(0); } } /* Swiper - progress bar */ #main-banner .swiper-pagination {bottom: 40px;} #main-banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin :0; margin-right: 20px;} #main-banner .swiper-pagination-bullet {position: relative; width: 140px; height: auto; text-align: center; border-radius: 0; opacity: 1; margin: 0 20px !important; background-color: transparent;} #main-banner .swiper-pagination-bullet em {display: none; font-size: 28px; font-weight: 500; letter-spacing: -0.38px; color: #fff;} #main-banner .swiper-pagination-bullet i {position: absolute; bottom: -8px; left: 0; z-index: 1; width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.3);} #main-banner .swiper-pagination-bullet b {position: absolute; bottom: -8px; left: 0; z-index: 2; width: 0%; height: 4px; background-color: rgba(255, 255, 255, 1);} #main-banner .swiper-pagination-bullet-active {background-color: transparent;} #main-banner .swiper-pagination-bullet-active b {animation-name: countingBar; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards;} #vision-banner .swiper-pagination {bottom: unset; top: 40px; left: calc((100vw - 1200px) / 2); text-align: left;} #vision-banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin :0; margin-right: 20px;} #vision-banner .swiper-pagination-bullet {position: relative; width: 140px; height: auto; text-align: center; border-radius: 0; opacity: 1; margin: 0 20px !important; background-color: transparent; outline: none; border: none;} #vision-banner .swiper-pagination-bullet em {font-size: 21px; font-weight: 500; letter-spacing: -0.38px; color: #000;} #vision-banner .swiper-pagination-bullet i {position: absolute; bottom: -8px; left: 0; z-index: 1; width: 100%; height: 4px; background-color: rgba(0, 0, 0, 0.3);} #vision-banner .swiper-pagination-bullet b {position: absolute; bottom: -8px; left: 0; z-index: 2; width: 0%; height: 4px; background-color: rgba(0, 0, 0, 1);} #vision-banner .swiper-pagination-bullet-active {background-color: transparent;} #vision-banner .swiper-pagination-bullet-active b {animation-name: countingBar; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards;} #items-slide .swiper-pagination {display: flex; top: 0; bottom: unset;} #items-slide .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin :0; margin-right: 20px;} #items-slide .swiper-pagination-bullet {position: relative; flex: 1; height: auto; text-align: center; border-radius: 0; opacity: 1; margin: 0 20px !important; background-color: transparent;} #items-slide .swiper-pagination-bullet em {font-size: 28px; font-weight: 500; letter-spacing: -0.38px; color: #777;} #items-slide .swiper-pagination-bullet i {position: absolute; bottom: -8px; left: 0; z-index: 1; width: 100%; height: 4px; background-color: rgba(0, 0, 0, 0.3);} #items-slide .swiper-pagination-bullet b {position: absolute; bottom: -8px; left: 0; z-index: 2; width: 0%; height: 4px; background-color: rgba(28, 106, 186, 1);} #items-slide .swiper-pagination-bullet-active em {background-color: transparent; color: #1c6aba;} #items-slide .swiper-pagination-bullet-active b {animation-name: countingBar; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards;} @keyframes countingBar { 0% {width: 0;} 100% {width:100%;} } /****************************** COMMON ******************************/ .container {position: relative; max-width: 100%; width: 1200px; margin: 0 auto; padding: 0;} .pc {display: block;} .mobile {display: none;} /* dim-layer */ #layer {position: fixed; visibility: hidden; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; overflow: hidden; background-color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;} #layer.dimmed {visibility: visible; opacity: 0.65; z-index: 110;} /* Menu */ #menu {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 115; background-color: #35b1dc; transform: translateY(-100%); transition: transform 0.4s;} #menu.opened {transform: translateY(0);} #menu .logo {position: absolute; top: 40px; left: 40px;} #menu .logo img {width: 100%; max-width: 120px;} #menu nav {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; max-height: 90%;} #menu nav .nav-list {} #menu nav .nav-list .nav-item {margin-bottom: 20px;} #menu nav .nav-list .nav-item .nav-tit {display: flex; justify-content: flex-end; align-items: center;} #menu nav .nav-list .nav-item .nav-tit > h5 {position: relative; width: 16px; display: block; text-align: left; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: -0.3px; transform: translateZ(0); transition: width 0.2s ease-in-out; margin-right: 20px;} #menu nav .nav-list .nav-item .nav-tit > h5::before {position: absolute; content: ''; width: calc(100% - 47px); height: 1px; top: 50%; left: 31px; transform: translateY(-50%); background-color: #fff;} #menu nav .nav-list .nav-item .nav-tit:hover > h5 {width: 191px;} #menu nav .nav-list .nav-item .nav-tit > span {display: inline-block; width: 300px; font-size: 52px; font-weight: 700; letter-spacing: -0.93px; color: hsla(0, 0%, 100%, 0); -webkit-text-stroke: 1px #fff; transition: color 0.2s ease-in-out;} #menu nav .nav-list .nav-item .nav-tit > span:hover {color: #fff; cursor:pointer;} #menu nav .nav-list .nav-item ul {display: none;} #menu nav .nav-list .nav-item ul li {margin: 8px 10px 8px auto; width: 60%; text-align:left; cursor:pointer;} #menu nav .nav-list .nav-item ul li a {position: relative; font-size: 18px; color: #fff; padding-left: 12px;} #menu nav .nav-list .nav-item ul li a::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; background-color: #fff; border-radius: 50%;} #menu .slogan {position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 500; line-height: 1.44; text-align: center; color: #d8d8d8;} #menu .slogan strong {letter-spacing: 1.5px; font-size: 24px; font-weight: 700; color: #fff;} /* Menu Opened - Header */ #menu.opened ~ header #header #gnb > ul {display: none;} #menu.opened ~ header #header:hover #sub_menu {visibility: hidden; opacity: 0; z-index: -1;} #menu.opened ~ header #header:hover .logo img.logo-white {display: block;} #menu.opened ~ header #header:hover .logo img.logo-black {display: none;} #menu.opened ~ header #header:hover {background-color: transparent; color: #fff;} #menu.opened ~ header #header:hover #gnb > ul > li .subs_tit {color: #fff;} #menu.opened ~ header #header:hover .btn-toggle_gnb span {background-color: #fff;} body:not(#home) #menu.opened ~ header #header .logo img.logo-white {display: block;} body:not(#home) #menu.opened ~ header #header .logo img.logo-black {display: none;} body:not(#home) #menu.opened ~ header #header {background-color: transparent; box-shadow: unset; color: #fff;} body:not(#home) #menu.opened ~ header #header .btn-toggle_gnb span {background-color: #fff;} body:not(#home) #menu.opened ~ header #header #gnb > ul > li .subs_tit {color: #fff;} /* Header */ header {width: 100%;} #header {position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 86px; background-color: transparent; box-shadow: 0px 0px 0px rgb(0 0 0 / 0%); border-bottom: 1px solid transparent; color: #fff; z-index: 120; transition: top 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;} #header > .container {display: flex; align-items: center; justify-content: space-between; height: 100%;} #header .logo {} #header .logo img {width: 164px;} #header .logo img.logo-white {display: block;} #header .logo img.logo-black {display: none;} /* Global Navigation Bar */ #header #gnb {display: flex; align-items: center; gap: 80px; height: 100%;} #header #gnb > ul {display: flex; gap: 80px; height: 100%;} #header #gnb > ul > li {position: relative; display: inline-flex; align-items: center; height: 100%;} #header #gnb > ul > li .subs_tit {position: relative; display: inline-flex; align-items: center; height: 100%; font-size: 22px; color: #fff;} #header #gnb > ul > li .sub_menu {position: absolute; top: 100%; left: 0; display: flex; flex-direction: column; width: 125px; gap: 18px; padding: 30px 0; visibility: hidden; opacity: 0; z-index: -1; line-height:1.2; } #header #gnb > ul > li .sub_menu > li {} #header #gnb > ul > li .sub_menu > li > a {font-size: 18px; transition: color 0.15s;} #header #gnb > ul > li .sub_menu > li > a:hover {color: #1c6aba;} #header #gnb > ul > li:hover .subs_tit {color: #1c6aba;} #header #gnb > ul > li:hover .subs_tit::after {content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #1c6aba;} #header:hover #gnb > ul > li .sub_menu {visibility: visible; opacity: 1; z-index: 11;} /* Hamburger Menu */ #header .btn-toggle_gnb {position: relative; z-index: 202; display: none; flex-direction: column; justify-content: center; width: 24px; cursor: pointer; margin-bottom: 0;} #header .btn-toggle_gnb span {background-color: #fff; border-radius: 10px; height: 3px; margin: 2px 0; transition: transform 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6);} #header .btn-toggle_gnb span.scrolled {background-color: #fff;} #header .btn-toggle_gnb span:nth-of-type(1) {width: 50%;} #header .btn-toggle_gnb span:nth-of-type(2) {width: 100%;} #header .btn-toggle_gnb span:nth-of-type(3) {width: 75%;} #header .btn-toggle_gnb input[type="checkbox"] {display: none;} #header .btn-toggle_gnb input[type="checkbox"]:checked ~ span:nth-of-type(1) {transform-origin: bottom; transform: rotatez(45deg) translate(3px, 0px)} #header .btn-toggle_gnb input[type="checkbox"]:checked ~ span:nth-of-type(2) {transform-origin: top; transform: rotatez(-45deg)} #header .btn-toggle_gnb input[type="checkbox"]:checked ~ span:nth-of-type(3) {transform-origin: bottom; width: 50%; transform: translate(10px, -3px) rotatez(45deg);} /* Header scroll & hover */ body:not(#home) #header .logo img.logo-white {display: none;} body:not(#home) #header .logo img.logo-black {display: block;} body:not(#home) #header {background-color: #fff; box-shadow: 2px 6px 6px rgb(0 0 0 / 4%); color: #000;} body:not(#home) #header .btn-toggle_gnb span {background-color: #000;} body:not(#home) #header #gnb > ul > li .subs_tit {color: #000;} #header.scrolled .logo img.logo-white {display: none;} #header.scrolled .logo img.logo-black {display: block;} #header.scrolled {background-color: #fff; box-shadow: 2px 6px 6px rgb(0 0 0 / 4%); color: #000;} #header.scrolled #gnb > ul > li .subs_tit {color: #000;} #header.scrolled .btn-toggle_gnb span {background-color: #000;} #header:hover .logo img.logo-white {display: none;} #header:hover .logo img.logo-black {display: block;} #header:hover {background-color: #fff; color: #000;} #header:hover #gnb > ul > li .subs_tit {color: #000;} #header:hover .btn-toggle_gnb span {background-color: #000;} /* Sub Menu */ #header #sub_menu {visibility: hidden; opacity: 0; z-index: -1; position: absolute; top: 100%; left: 0; width: 100%; background-color: #fff; border-top: 1px solid #ddd; color: #000; padding: 30px 0 80px 0;} #header:hover #sub_menu {visibility: visible; opacity: 1; z-index: 10;} #header #sub_menu .news {display: flex; gap: 24px; max-width: 650px;} #header #sub_menu .news .news-img {width: 280px; height: 200px; flex-shrink: 0;} #header #sub_menu .news .news-img img {object-fit: cover; width: 100%;} #header #sub_menu .news .news-contents {width: calc(100% - 404px);} #header #sub_menu .news .news-contents > h5 {margin-bottom: 20px;} #header #sub_menu .news .news-contents > ul {display: flex; flex-direction: column; gap: 4px;} #header #sub_menu .news .news-contents > ul > li {} #header #sub_menu .news .news-contents > ul > li > a {font-size: 15px;} /* Footer */ footer {width: 100%; background-color: #2e2e2e; font-size: 16px; color: #999;} #footer {position: relative; padding: 60px 0 80px 0;} #footer .corp_info {padding-top: 25px; margin-top: 25px; border-top: 1px solid #606060;} #footer .info_details {color: #efefef;} #footer .info_details > span {position: relative; margin-right: 3px; padding-right: 8px;} #footer .info_details > span:not(:last-child):after {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 80%; background-color: #606060;} #footer .corp_info .copyright {font-size: 14px; margin-top: 4px;} #footer .fnb {display: flex; gap: 100px;} #footer .fnb .menu {} #footer .fnb .menu > a {display: inline-block; color: #efefef; font-size: 17px; margin-bottom: 10px;} #footer .fnb .menu ul li:not(:last-child) {margin-bottom: 3px;} #footer .logo {text-align: center; margin-top: 60px;} /* Popup */ #popup {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1200px; max-width: calc(100vw - 40px); height: 800px; max-height: 100vh; z-index: 115;} #popup.active {display: block;} #popup .inner {position: relative; width: 100%; height: 100%; border: 1px solid khaki;} #popup .inner .btn-close_popup {position: absolute; top: -80px; right: -0px;} #popup .inner .frame-wrapper {position: relative; width: 100%; height: 100%; z-index: 10;} #popup .inner .frame-wrapper iframe {width: 100%; height: 100%;} #popup .inner #loading {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;} #popup .inner #loading .round:after {position: absolute; box-sizing: border-box; content: ''; top: 50%; left: 50%; width: 4rem; height: 4rem; margin-top: -2rem; margin-left: -2rem; border-radius: 50%; border: 0.3rem solid rgba(40, 48, 70, 0.2); border-top-color: khaki; border-right-color: khaki; animation: spinner 1.2s linear infinite;} @keyframes spinner { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } /* Main */ main {width: 100%; min-height: 100%; background-color: #fff;} #main {position: relative;} section {position: relative;} /* Sub - Local Nav */ #lnb {position: relative; padding-top: 86px;} #lnb .bg {position: relative; width: 100%; height: 600px;} #lnb .bg .inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #lnb .bg .inner h2 {font-size: 42px; font-weight: 500; color: #fff;} #lnb .bg .inner p {font-size: 20px; color: #fff; margin-top: 10px;} #lnb nav {position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background-color: rgba(0, 0, 0, 0.2);} #lnb nav > .container {display: flex; align-items: center; height: 100%;} #lnb nav > .container > div {display: inline-flex; justify-content: center; align-items: center; height: 100%; padding: 0 20px; border-left: 1px solid #d1d1d1;} #lnb nav > .container > div:last-child {border-right: 1px solid #d1d1d1;} #lnb nav .home_link {} #lnb nav .home_link > a {display: inline-block;} #lnb nav .home_link > a > img {width: 28px;} #lnb nav .global_link {} #lnb nav .local_link {} #lnb .selectric {background-color: transparent; border-color: transparent;} #lnb .selectric .label {margin: 0 80px 0 10px; font-size: 16px; color: #fff;} #lnb .selectric .button {background-color: transparent;} #lnb .selectric .button:after {border-top-color: #fff;} #lnb .selectric-items ul, .selectric-items li {font-size: 14px;} /* QuickTop */ #quick {position: fixed; bottom: 60px; right: 32px; z-index: 10; cursor: pointer;} #quick svg {position: sticky; transform: rotate(-90deg);} #quick svg circle {stroke: rgba(0,0,0,0.1); stroke-width: 4px; stroke-linecap: round; fill: transparent;} #quick svg .progress-bar {fill: #fff; stroke: url(#grad); transition: stroke-dashoffset 0s linear; filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));} #quick .pct {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);} #quick .quick-path {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.35s;} #quick.scrolled .quick-path {transform: translate(-50%, -50%) rotate(-90deg);} /* Section */ section {position: relative;} /****************************** INDIVIDUAL ******************************/ /* 홈 */ #home {} #home #main-banner {width: 100%; height: 800px; max-height: 100vh;} #home #main-banner .banner-list {width: 100%; height: 100%;} #home #main-banner .banner-list .banner-item {position: relative; width: 100%; height: 100%;} #home #main-banner .banner-list .banner-item.swiper-slide-active {animation: zoomout 12s;} @keyframes zoomout { 0% {transform: rotate(0.001deg) scale(1.1);} 100% {transform: rotate(0.001deg) scale(1);} } #home #main-banner .banner-list .banner-item .bg-cell {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #home #main-banner .banner-list .banner-item.swiper-slide-active .bg-cell {animation: upAndDown 5s forwards ease-in-out; /* transform-origin: 66.1% 43.5%; */} @keyframes upAndDown { 0% {transform: translateY(-1px) rotate(1deg)} 25% {transform: translateY(1px) rotate(-1deg)} 50% {transform: translateY(-1px) rotate(1deg)} 75% {transform: translateY(1px) rotate(-1deg)} 100% {transform: translateY(0px) rotate(0deg)} } /* 2022-07-13 */ #home #main-banner .banner-list .banner-item .item-inner {position: absolute; display: flex; flex-direction: column; gap: 12px; text-align: right;} #home #main-banner .banner-list .banner-item#banner_01 .item-inner {bottom: 30%; right: calc((100vw - 1200px) / 2);} #home #main-banner .banner-list .banner-item#banner_02 .item-inner {bottom: 32%; left: calc((100vw - 1200px) / 2); text-align: left;} #home #main-banner .banner-list .banner-item .item-inner h4 {font-size: 72px; font-weight: 700; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);} #home #main-banner .banner-list .banner-item .item-inner h6 {font-size: 36px; font-weight: 700; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);} #home #main-banner .banner-list .banner-item .item-inner p {font-size: 24px; color: #fff;} /* //2022-07-13 */ #home #main_banner_next {right: 40px; width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);} #home #main_banner_next::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; background-image: url("../img/east_black_24dp.svg"); background-size: cover;} #home #intro-mind {padding: 80px 0;} #home #intro-mind > .container {display: flex; gap: 60px;} #home #intro-mind .intro-img {width: 320px; height: 480px; flex-shrink: 0;} #home #intro-mind .intro-img img {object-fit: cover; width: 100%; height: 100%;} #home #intro-mind .thumbs {width: calc(100% - 380px);} #home #intro-mind .thumbs h3 {font-size: 26px; color: #777;} #home #intro-mind .thumbs h3 strong, #home #intro-mind .thumbs h3 em {font-size: 40px; color: #1c6aba;} #home #intro-mind .thumbs .thumbs-list {margin-top: 20px;} #home #intro-mind .thumbs .thumbs-list .thumbs-item {width: 300px;} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-img {position: relative;} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-img::after {background: rgba(0, 0, 0, 0); transition: background 0.35s;} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-img img {} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-contents {opacity: 0; margin-top: 12px; text-align: center; transition: opacity 0.65s;} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-contents h6 {font-size: 20px; font-weight: 700;} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-contents p {font-size: 18px; margin-top: 8px; color: #777;} #home #intro-mind .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents {opacity: 1;} #home #intro-mind .thumbs .thumbs-list .thumbs-item.swiper-slide-next + .thumbs-item .item-img::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 1) 100%); background-size: cover;} /* slide custom */ #home #intro-mind #mind-slide {overflow: unset; overflow-x: clip;} #home #intro-mind #mind-slide .swiper-scrollbar {bottom: -60px;} #home #intro-mind .swiper-button-prev, #home #intro-mind .swiper-button-next {top: unset; left: unset; bottom: -20px; width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);} #home #intro-mind .swiper-button-prev::after, #home #intro-mind .swiper-button-next::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px;} #home #intro-mind .swiper-button-prev {right: 70px;} #home #intro-mind .swiper-button-prev::after {background: url("../img/arrow_back_ios_new_black_48dp.svg"); background-size: cover;} #home #intro-mind .swiper-button-next {right: 10px;} #home #intro-mind .swiper-button-next::after {background: url("../img/arrow_forward_ios_black_48dp.svg"); background-size: cover;} #home #intro-mind .swiper-scrollbar-drag {background: #1c6aba;} /* TODO UPDATE 2022-06-24 (1) */ #home #intro-workers {padding: 0 0 160px 0; background: #888; z-index: 1;} #home #intro-workers .sticky-logo {position: sticky; top: 100px; left: 0; z-index: 1; padding-top: 80px;} #home #intro-workers .sticky-logo .bg-logo {position: absolute; top: 80px; left: 45%; opacity: 0.4;} #home #intro-workers .sticky-logo .bg-logo img {width: 100%; height: 100%;} #home #intro-workers .sticky-logo .txt {} #home #intro-workers .sticky-logo .txt p {font-size: 112px; line-height: 1.12; color: #5eaebd; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);} #home #intro-workers .sticky-logo .txt p em {font-size: 72px; font-weight: 700;} #home #intro-workers .sticky-logo .logo {position: absolute; top: 450px; margin: 20px; height: 120px; width: 120px; background-color: transparent; border-radius: 50%;} @media(max-width:420px){#home #intro-workers .sticky-logo .logo{margin-right:0px;}} #home #intro-workers .sticky-logo .spinner-logo {position: absolute; left: -10px; top: -10px; width: 140px; height: 140px; color: #fff;} #home #intro-workers .sticky-logo .spinner-logo::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: url("../img/logo_bg.svg") center center no-repeat; background-size: cover;} #home #intro-workers .sticky-logo .spinner-logo img {width: 100%; height: 100%; animation: spin 10s linear infinite;} #home #intro-workers .sticky-logo .spinner-logo svg {width: 100%; height: 100%; animation: spin 10s linear infinite;} #home #intro-workers .sticky-logo .spinner-logo circle {stroke-width: 5; stroke-dasharray: 120, 20; fill: none; stroke: #fff;} @keyframes spin { 100% {transform: rotate(360deg);} } #home #intro-workers .video-bg {position: sticky; top: 0; height: auto; z-index: -1;} #home #intro-workers .video-bg video {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; vertical-align: bottom;} #home #intro-workers .item-list {position: relative; display: flex; flex-direction: column; gap: 120px; z-index: 2;} #home #intro-workers .item-list .item {display: flex; justify-content: flex-end;} #home #intro-workers .item-list .item:nth-child(2n) {justify-content: flex-start;} #home #intro-workers .item-list .item .item-img {position: relative; width: 480px; height: 640px;} #home #intro-workers .item-list .item .item-img img {width: 100%; height: 100%; object-fit: cover; border-radius: 24px;} #home #intro-workers .item-list .item .item-text {width: 25px; height: 100%; position: absolute; top: 0; left: 0%; height: 100%; max-height: 100%; overflow-y: hidden; margin-left: 4px;} #home #intro-workers .item-list .item .item-text marquee {height: 100%; font-size: 17px; color: #fff; writing-mode: vertical-lr; transform: rotate(180deg);} #home #intro-workers .item-list .item .item-text p {white-space: nowrap; will-change: transform; animation: marquee 12s linear infinite; font-size: 17px; color: #fff; writing-mode: vertical-lr; transform: rotate(180deg);} @keyframes marquee { from {transform: rotate(180deg) translateY(0);} to {transform: rotate(180deg) translateY(50%);} } #home #intro-workers .item-list .item[data-scroll] {opacity: 0; will-change: transform, scale, opacity; transform: translateY(8rem) scale(0.85); transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);} #home #intro-workers .item-list .item[data-scroll="in"] {opacity: 1; transform: translateY(0) scale(1);} #home #intro-workers .item-list .item[data-scroll="out"] {opacity: 0;} #home #intro-workers .item-list .item .item-desc-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 24px; z-index: -1;} #home #intro-workers .item-list .item .item-desc-box .idb-1 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; border-radius: 24px 0 0 24px; background-color: rgb(50 168 222 / 60%); transition: transform 1s 0.2s;} #home #intro-workers .item-list .item .item-desc-box .idb-1 .idb-pos {font-size: 12px; font-weight: 400; color: #fff;} #home #intro-workers .item-list .item .item-desc-box .idb-1 .idb-name {font-size: 16px; font-weight: 700; color: #fff;} #home #intro-workers .item-list .item .item-desc-box .idb-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; padding: 24px 200px 24px 24px; border-radius: 24px 0 0 24px; background-color: rgb(50 168 222 / 60%); transition: transform 1s 0.2s, width 1s 0.2s;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .btn-idb {position: absolute; top: 50%; left: 24px; transform: translateY(-50%) translateX(0); width: 48px; height: 48px; background: url("../img/keyboard_double_arrow_left_white_48dp.svg") center center no-repeat; background-size: cover; animation: dragging 1.4s linear infinite; transition: opacity 0.35s, transform 0.35s; opacity: 0;} @keyframes dragging { 0% {transform: translateY(-50%) translateX(0); opacity: 0;} 100% {transform: translateY(-50%) translateX(-12px); opacity: 1;} } #home #intro-workers .item-list .item .item-desc-box .idb-2 .qna-list {position: absolute; opacity: 0; visibility: hidden; transition: opacity 0.35s 1s; width: 100%; height: 100%; padding-right: 24px; overflow-y: scroll;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .qna-list::-webkit-scrollbar {width: 10px;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .qna-list::-webkit-scrollbar-thumb {background-color: #bcbcbc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .qna-list::-webkit-scrollbar-track {background-color: none; border-radius: 10px; box-shadow: none;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna {} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna .q {background-color: #fff; border-radius: 0 4px 0 4px; padding: 4px 8px; font-size: 16px; font-weight: 500; color: #000;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna .q > em {font-weight: 500;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna .a {padding: 8px 8px 20px 8px; font-size: 16px; font-weight: 300; color: #fff;} #home #intro-workers .item-list .item.active .item-desc-box .idb-2 .btn-idb {display: none;} #home #intro-workers .item-list .item.active .item-desc-box .idb-2 .qna-list {position: relative; opacity: 1; visibility: visible;} #home #intro-workers .item-list .item.active #standing_img{display:none;} #home #intro-workers .item-list .item.active #standup_img{display:block;}a #home #intro-workers .item-list .item[data-scroll="in"] .item-desc-box .idb-1 {transform: translateX(-160px);} #home #intro-workers .item-list .item[data-scroll="out"] .item-desc-box .idb-1 {transform: translateX(0);} #home #intro-workers .item-list .item[data-scroll="in"] .item-desc-box .idb-2 {transform: translateX(-240px);} #home #intro-workers .item-list .item[data-scroll="out"] .item-desc-box .idb-2 {transform: translateX(0);} #home #intro-workers .item-list .item[data-scroll="in"].active .item-desc-box .idb-2 {transform: translateX(-690px); width: 700px;} #home #intro-workers .item-list .item[data-scroll="out"].active .item-desc-box .idb-2 {transform: translateX(0); width: 100%;} /* 2n */ #home #intro-workers .item-list .item:nth-child(2n) .item-desc-box .idb-1 {align-items: flex-end; border-radius: 0 24px 24px 0;} #home #intro-workers .item-list .item:nth-child(2n) .item-desc-box .idb-2 {border-radius: 0 24px 24px 0; padding: 24px 24px 24px 200px;} #home #intro-workers .item-list .item:nth-child(2n) .item-desc-box .idb-2 .btn-idb {left: unset; right: 24px; background: url("../img/keyboard_double_arrow_right_white_48dp.svg") center center no-repeat; background-size: cover; animation: dragging2 1.4s linear infinite;} @keyframes dragging2 { 0% {transform: translateY(-50%) translateX(0); opacity: 0;} 100% {transform: translateY(-50%) translateX(12px); opacity: 1;} } #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="in"] .item-desc-box .idb-1 {transform: translateX(160px);} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="out"] .item-desc-box .idb-1 {transform: translateX(0);} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="in"] .item-desc-box .idb-2 {transform: translateX(240px);} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="out"] .item-desc-box .idb-2 {transform: translateX(0);} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="in"].active .item-desc-box .idb-2 {transform: translateX(470px); width: 700px;} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="out"].active .item-desc-box .idb-2 {transform: translateX(0); width: 100%;} /* TODO FINISH */ #home #intro-items {padding: 80px 0; z-index: 2; background-color: #fff;} #home #intro-items > .container {display: flex; gap: 200px;} #home #intro-items .thumbs {position: relative; display: flex; justify-content: center; align-items: center; width: 400px; height: 372px; flex-shrink: 0; text-align: center;} #home #intro-items .thumbs .bubble {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 51% 49% 52% 48% / 57% 56% 44% 43%; animation: shape1 20s linear infinite; z-index: -1;} #home #intro-items .thumbs .bubble .bub {width: 250px; height: 250px; background-color: #c5e2f1;} @keyframes shape1 { 0% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;} 10% {border-radius: 53% 47% 33% 67% / 60% 30% 70% 40%;} 20% {border-radius: 71% 29% 38% 62% / 72% 48% 52% 28%;} 30% {border-radius: 41% 59% 45% 55% / 33% 56% 44% 67%;} 40% {border-radius: 55% 45% 67% 33% / 77% 48% 52% 23%;} 50% {border-radius: 44% 56% 22% 78% / 31% 74% 26% 69%;} 60% {border-radius: 46% 54% 48% 52% / 61% 59% 41% 39%;} 70% {border-radius: 44% 56% 60% 40% / 63% 36% 64% 37%;} 80% {border-radius: 20% 80% 45% 55% / 31% 79% 21% 69%;} 90% {border-radius: 66% 34% 57% 43% / 49% 51% 49% 51%;} 100% {border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;} } #home #intro-items .thumbs .thumb-img {max-width: 400px;; margin: 0 auto;} #home #intro-items .thumbs .thumb-img img {width: 100%; height: 100%; max-height: 372px; object-fit: contain;} #home #intro-items .item-list {width: 600px; padding-top: 120px;} #home #intro-items .item-list .item {} #home #intro-items .item-list .item h6 {font-size: 28px; font-weight: 600; color: #1c6aba;} #home #intro-items .item-list .item h5 {font-size: 36px; font-weight: 700; margin-top: 8px;} #home #intro-items .item-list .item p {font-size: 16px; color: #777; margin-top: 8px;} #home #intro-items .item-list .item a {display: inline-flex; justify-content: space-between; align-items: center; width: 160px; max-width: 100%; padding: 10px 20px; border: 1px solid #777; border-radius: 24px; margin-top: 40px; font-size: 17px; color: #777;} #home #intro-items .item-list .item a img {} /* TODO UPDATE 2022-06-24 (2) */ #home #intro-iframe {width: 100%; height: 800px; z-index: 1;} /* TODO FINISH */ #home #intro-iframe .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;} #home #intro-iframe .bg.active {opacity: 1;} /* #home #intro-iframe {width: 100%; height: 800px; background: url("../img/1920x800.png") center center no-repeat; background-size: cover;} */ #home #intro-iframe > .container {position: relative; display: flex; gap: 80px; height: 100%;} #home #intro-iframe .layer-summary {width: 440px; height: 100%; flex-shrink: 0; background-color: rgba(0, 0, 0, 0.35); padding: 80px 40px;} #home #intro-iframe .layer-summary h6 {font-size: 40px; font-weight: 700; color: #fff; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);} #home #intro-iframe .layer-summary h5 {font-size: 72px; font-weight: 700; color: #fff;} #home #intro-iframe .layer-summary .btn-show_meta {font-size: 28px; color: #ccc; margin-top: 70px;} #home #intro-iframe .layer-summary .btn-show_meta img{width:50px;} #home #intro-iframe .layer-contents {} #home #intro-iframe .layer-pagination {display: flex;} #home #intro-iframe .layer-pagination button {position: relative; flex: 1;} #home #intro-iframe .layer-pagination button h6 {font-size: 25px; color: #fff; font-weight: 700;} #home #intro-iframe .layer-pagination button h5 {font-size: 40px; color: #fff; font-weight: 700;} #home #intro-iframe .layer-pagination button#layer-pagination-prev::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 35px; height: 72px; background: url("../img/arrow_back_ios_new_white_48dp.svg") center center no-repeat; background-size: cover;} #home #intro-iframe .layer-pagination button#layer-pagination-next::before {content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 35px; height: 72px; background: url("../img/arrow_forward_ios_white_48dp.svg") center center no-repeat; background-size: cover;} #home #intro-iframe .layer-item {padding: 80px 0;} #home #intro-iframe .layer-item .desc {font-size: 16px; color: #fff; display:none;} #home #intro-iframe .layer-item .layer {width: 680px; height: 400px; max-width: 100%; margin-top: 12px;} #home #intro-iframe .layer-item .layer img {width: 100%; height: 100%; object-fit: cover;} #home #intro-iframe #layer-button-prev {position: absolute; top: unset; bottom: 60px; left: -60px;} #home #intro-iframe #layer-button-next {position: absolute; top: unset; bottom: 60px; left: -60px;} #home #intro-iframe #layer-button-prev, #home #intro-iframe #layer-button-next {top: unset; left: unset; bottom: 60px; width: 60px; height: 60px; background: transparent; border-radius: 50%; border: 1px solid #fff;} #home #intro-iframe #layer-button-prev::after, #home #intro-iframe #layer-button-next::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px;} #home #intro-iframe #layer-button-prev {left: -180px;} #home #intro-iframe #layer-button-prev::after {background: url("../img/arrow_back_ios_new_white_48dp.svg"); background-size: cover;} #home #intro-iframe #layer-button-next {left: -100px;} #home #intro-iframe #layer-button-next::after {background: url("../img/arrow_forward_ios_white_48dp.svg"); background-size: cover;} /*헤더*/ #menu nav .nav-list .nav-item ul{text-align:center;} /* 소개 */ #intro {} #intro main {background-color: #ebe9e4;} #intro #greeting {padding: 0 0 0 0;} /* #intro #greeting {padding: 300px 0 0 0; width: 100%; height: 1000px; z-index: 1; background: url("../img/bg-ceo_wide.png") center center no-repeat; background-size: cover;} */ #intro #greeting .contents {position: absolute; top: 50%; right: calc((100vw - 1200px) / 2); transform: translateY(-60%); max-width: 100%; z-index: 2;} #intro #greeting .contents > h5 {font-size: 26px; font-weight: 700; line-height: 1.44; text-align: center;} #intro #greeting .contents .more-detail {margin-top: 70px; text-align: right;} #intro #greeting .contents .tit {font-size: 32px;} #intro #greeting .contents .tit em {font-size: 42px; font-weight: 700; color: #1c6aba;} #intro #greeting .contents .desc {font-size: 20px; margin-top: 40px;} #intro #greeting .contents .writer {display: flex; justify-content: center; align-items: center; font-size: 22px; text-align: right; margin-top: 24px; letter-spacing: 1.5px;} #intro #greeting .contents .writer strong {font-size: 36px; font-weight: 400; letter-spacing: 7.5px;} #intro #greeting .contents .writer img {width: 100%; max-width: 180px; margin-left: 18px;} #intro #greeting .image {width: 100%; z-index: 1;} /* #intro #greeting .image {width: 100%; height: 800px; z-index: 1; background: url("../img/bg-ceo_wide.png") center center no-repeat; background-size: cover;} */ #intro #greeting .image img {width: 100%; max-height: 1200px; object-fit: cover;} #intro #ceo {padding: 40px 0 80px 0;} #intro #ceo .top-img {width: 100%;} #intro #ceo .top-img img {width: 100%;} #intro #ceo .top-desc {padding: 60px 80px;} #intro #ceo .top-desc > h6 {font-size: 36px; font-weight: 700;} #intro #ceo .top-desc > p {font-size: 20px; font-weight: 400; margin-top: 30px;} #intro #ceo .strategy {display: flex; align-items: center; margin-top: 80px; gap: 80px;} #intro #ceo .strategy .img {width: 480px; flex-shrink: 0;} #intro #ceo .strategy .img img {width: 100%;} #intro #ceo .strategy .desc {width: 100%;} #intro #ceo .strategy .desc > h6 {font-size: 36px; font-weight: 700;} #intro #ceo .strategy .desc > p {font-size: 20px; font-weight: 400; margin-top: 30px;} #intro #ceo .name {display: inline-block; font-size: 22px; font-weight: 700; margin-bottom: 40px;} #intro #ceo .qna-list {display: flex; flex-direction: column; gap: 40px;} #intro #ceo .qna-list .qna-item {} #intro #ceo .qna-list .qna-item .q {position: relative; font-size: 18px; font-weight: 700;} #intro #ceo .qna-list .qna-item .q::before {content: "Q."; position: relative; margin-right: 10px; color: #0044CF; font-size: 18px; font-weight: 700;} #intro #ceo .qna-list .qna-item .a {position: relative; font-size: 18px; margin-top: 8px;} #intro #ceo .qna-list .qna-item .a::before {content: "A."; position: relative; margin-right: 10px; color: #0044CF; font-size: 18px; font-weight: 700;} /* 에스티젠바이오 사람들 */ #peoples {} #peoples #intro-workers {padding: 80px 0 160px 0; background: #888;} #peoples #intro-workers {padding: 80px 0 160px 0; background: #888; z-index: 1;} #peoples #intro-workers .sticky-logo {position: sticky; top: 100px; left: 0; z-index: 1;} #peoples #intro-workers .sticky-logo .bg-logo {position: absolute; top: 80px; left: 45%; opacity: 0.4;} #peoples #intro-workers .sticky-logo .bg-logo img {width: 100%; height: 100%;} #peoples #intro-workers .sticky-logo .txt {} #peoples #intro-workers .sticky-logo .txt p {font-size: 70px; line-height: 1.12; color: #01abcd; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);} #peoples #intro-workers .sticky-logo .txt p em {font-size: 30px; font-weight: 700;} #peoples #intro-workers .sticky-logo .logo {position: absolute; top: 450px; left: 0; margin: 20px; height: 120px; width: 120px; background-color: transparent; border-radius: 50%;} #peoples #intro-workers .sticky-logo .spinner-logo {position: absolute; left: -10px; top: -10px; width: 140px; height: 140px; color: #fff;} #peoples #intro-workers .sticky-logo .spinner-logo::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: url("../img/logo_bg.svg") center center no-repeat; background-size: cover;} #peoples #intro-workers .sticky-logo .spinner-logo img {width: 100%; height: 100%; animation: spin 10s linear infinite;} #peoples #intro-workers .sticky-logo .spinner-logo svg {width: 100%; height: 100%; animation: spin 10s linear infinite;} #peoples #intro-workers .sticky-logo .spinner-logo circle {stroke-width: 5; stroke-dasharray: 120, 20; fill: none; stroke: #fff;} @keyframes spin { 100% {transform: rotate(360deg);} } #peoples #intro-workers .item-list {position: relative; display: flex; flex-direction: column; gap: 120px; z-index: 2;} #peoples #intro-workers .item-list .item {position: relative; display: flex; justify-content: flex-end;} #peoples #intro-workers .item-list .item:nth-child(2n) {justify-content: flex-start;} #peoples #intro-workers .item-list .item > a {display: flex; justify-content: flex-end;} #peoples #intro-workers .item-list .item .item-img {width: 480px; height: 640px; border-radius: 24px; overflow: ;} #peoples #intro-workers .item-list .item .item-img img {width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.45s;} #peoples #intro-workers .item-list .item .item-text {margin-left: 4px;} #peoples #intro-workers .item-list .item .item-text p {font-size: 17px; color: #000; writing-mode: vertical-lr; transform: rotate(180deg); transition: color 0.45s;} #peoples #intro-workers .item-list .item .item-img:hover img {transform: scale(1.1);} #peoples #intro-workers .item-list .item .item-img:hover ~ .item-text p {} #peoples #intro-workers .item-list .item[data-scroll] {opacity: 0; will-change: transform, scale, opacity; transform: translateY(8rem) scale(0.85); transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);} #peoples #intro-workers .item-list .item[data-scroll="in"] {opacity: 1; transform: translateY(0) scale(1);} #peoples #intro-workers .item-list .item[data-scroll="out"] {opacity: 0;} /* 공간 소개 */ #place {} #place .container {height: 100%;} #place #intro-place {position: relative; height: calc(100vh - 86px); background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/factory_stgen.jpeg") center center no-repeat; background-size: cover;; padding: 0; overflow: hidden;} #place #intro-place .frame-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: gainsboro; transform: translateY(-100%); transition: transform 0.75s; z-index: 4;} #place #intro-place .frame-container.active {transform: translateY(0);} #place #intro-place .frame-container #btn-close_frame {position: absolute; top: 100px; left: 24px; font-size: 28px; color: #fff; font-weight: 700; transition: color 0.35s;} #place #intro-place .frame-container #btn-close_frame:hover {color: #0044CF;} #place #intro-place .frame-container .frame-wrapper {width: 100%; height: 100%;} #place #intro-place .frame-container .frame-wrapper iframe {width: 100%; height: 100%;} #place #intro-place .bg {position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%;} #place #intro-place .bg .bg-item {opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 0; height: 100%; transform: scale(1); transition: opacity 0.35s, transform 1.2s 1.55s, width 1s 0.5s, left 1.25s 0.25s;} /* TODO UPDATE 2022-06-24 (3) */ #place #intro-place .bg .bg-item[data-bg="1"] {left: 0; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/vr배경사진7.png") center center no-repeat; background-size: cover;} #place #intro-place .bg .bg-item[data-bg="2"] {left: 0%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/vr배경사진2.png") center center no-repeat; background-size: cover;} #place #intro-place .bg .bg-item[data-bg="3"] {left: 0%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/vr배경사진8.png") center center no-repeat; background-size: cover;} #place #intro-place .bg .bg-item[data-bg="4"] {left: 0%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/place_04.png") center center no-repeat; background-size: cover;} /* TODO FINISH */ #place #intro-place .bg .bg-item.active {width: 100%; transform: scale(1.15); left: 0; opacity: 1; visibility: visible;} #place #intro-place .tit {position: absolute; top: 80px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 1;} #place #intro-place .tit h4 {font-size: 60px; color: #fff; white-space: nowrap;} #place #intro-place .tit img {max-width: 300px;} #place #intro-place .place-list {position: relative; display: flex; justify-content: space-between; align-items: center; height: 100%; z-index: 2; overflow: hidden; } #place #intro-place .place-list .place-item {position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.15);} #place #intro-place .place-list .place-item:first-child {border-left: 1px solid rgba(255, 255, 255, 0.15);} #place #intro-place .place-list .place-item::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transform: translateY(100%); transition: transform 0.75s;} #place #intro-place .place-list .place-item:hover::after {transform: translateY(0);} #place #intro-place .place-list .place-item[data-item="1"]::after {background-color: rgba(101, 134, 224, 0.65);} #place #intro-place .place-list .place-item[data-item="2"]::after {background-color: rgba(114, 208, 219, 0.65);} #place #intro-place .place-list .place-item[data-item="3"]::after {background-color: rgba(220, 158, 114, 0.65);} #place #intro-place .place-list .place-item[data-item="4"]::after {background-color: rgba(228, 169, 89, 0.65);} #place #intro-place .place-list .place-item .inner {position: relative;} #place #intro-place .place-list .place-item .item-name {font-size: 28px; color: #fff; transform: translateY(100%); transition: transform 0.75s;} #place #intro-place .place-list .place-item .btn-view_more {display: inline-flex; justify-content: center; align-items: center; height: 54px; padding: 0 40px; margin-top: 40px; border: 1px solid #fff; border-radius: 24px; font-size: 16px; color: #fff; background-color: transparent; opacity: 0; transform: translateY(100%); transition: color 0.35s, background-color 0.35s, opacity 0.75s 0.25s, transform 0.75s;} #place #intro-place .place-list .place-item .btn-view_more:hover {background-color: #fff; color: #1c6aba;} #place #intro-place .place-list .place-item:hover .item-name {transform: translateY(0);} #place #intro-place .place-list .place-item:hover .btn-view_more {opacity: 1; transform: translateY(0);} /* 비전&미션 */ #vision {} #vision #vision-01 {padding: 200px 0; overflow: hidden;} #vision #vision-01 .vision-cells {position: absolute; top: 0; left: 0; z-index: 1;} #vision #vision-01 .vision-cells .cell-wrap {position: relative;} #vision #vision-01 .vision-cells .cell {position: absolute; display: inline-flex; justify-content: center; align-items: center; background: rgb(31 38 135 / 37%); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(15px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); font-weight: 500; color: #fff;} #vision #vision-01 .vision-cells .cell[data-scroll] {opacity: 0; will-change: transform, scale, opacity; transform: translateY(4rem) scale(0); transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);} #vision #vision-01 .vision-cells .cell[data-scroll="in"] {opacity: 1; transform: translateY(0) scale(1);} #vision #vision-01 .vision-cells .cell[data-scroll="out"] {opacity: 0; transform: translateY(4rem) scale(0);} #vision #vision-01 .vision-cells .cell.cell1 {top: 60px; left: 40px; width: 360px; height: 360px; font-size: 28px; z-index: 4; transition-delay: 0.25s; animation-delay: 0.25s;} #vision #vision-01 .vision-cells .cell.cell2 {top: 8px; left: 0; width: 110px; height: 110px; font-size: 24px; z-index: 3; transition-delay: 0.5s; animation-delay: 1.5s;} #vision #vision-01 .vision-cells .cell.cell3 {top: 18px; left: 320px; width: 180px; height: 180px; font-size: 26px; z-index: 3; transition-delay: 0.75s; animation-delay: 0.75s;} #vision #vision-01 .vision-cells .cell.cell4 {top: 350px; left: 12px; width: 140px; height: 140px; font-size: 12px; z-index: 5; transition-delay: 1s; animation-delay: 1s;} #vision #vision-01 .vision-cells .cell.cell5 {top: 378px; left: 297px; width: 110px; height: 110px; font-size: 20px; z-index: 3; transition-delay: 1.25s; animation-delay: 1.35s;} #vision #vision-01 .contents {position: relative; text-align: right; z-index: 2;} #vision #vision-01 h3 {position: relative; font-size: 25px; font-weight: 700;} #vision #vision-01 h3::after {content: ""; position: absolute; bottom: -12px; right: 0; height: 1px; background-color: #777;} #vision #vision-01 h3[data-scroll]::after {width: 0; will-change: width; transition: all 1.2s 1s;} #vision #vision-01 h3[data-scroll="in"]::after {width: 125px;} #vision #vision-01 h3[data-scroll="out"]::after {width: 0;} #vision #vision-01 .sub-txt {font-size: 17px; font-weight: 500; margin-top: 80px; transition-delay: 0.25s;} #vision #vision-01 .thr-txt {font-size: 18px; font-weight: 400; margin-top: 40px; transition-delay: 0.5s;} #vision #vision-banner {width: 100%; max-height: 75vh;} #vision #vision-banner .banner-list {width: 100%; height: 100%;} #vision #vision-banner .banner-list .banner-item {position: relative; width: 100%; height: 800px;} #vision #vision-banner .banner-list .banner-item.bg01 {background: url('/theme/stgenbio/assets/img/bg-communication.png') center center no-repeat; background-size: contain;} #vision #vision-banner .banner-list .banner-item.bg02 {background: url('/theme/stgenbio/assets/img/bg-innovation.png') center center no-repeat; background-size: contain;} #vision #vision-banner .banner-list .banner-item.bg03 {background: url('/theme/stgenbio/assets/img/bg-dedication.png') center center no-repeat; background-size: contain;} #vision #vision-banner .banner-list .banner-item .item-inner {position: absolute; top: 50%; left: calc((100vw - 1200px) / 2); transform: translateY(-50%); text-align: left;} #vision #vision-banner .banner-list .banner-item .item-inner h4 {position: relative; top: 4rem; opacity: 0; font-size: 48px; font-weight: 700; color: #000; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); transition: top 0.35s, opacity 0.35s;} #vision #vision-banner .banner-list .banner-item .item-inner p {position: relative; top: 4rem; opacity: 0; font-size: 20px; color: #000; margin: 40px 0 0 0; transition: top 0.85s, opacity 0.85s;} #vision #vision-banner .banner-list .banner-item .item-bg-bottom {position: absolute; bottom: 0; left: 0; width: 100%;} #vision #vision-banner .banner-list .banner-item .item-bg-bottom img {position: relative; width: 100%; height: 320px; z-index: -1;} #vision #vision-banner .banner-list .banner-item.swiper-slide-active h4 {top: 0; opacity: 1;} #vision #vision-banner .banner-list .banner-item.swiper-slide-active p {top: 0; opacity: 1;} /* 역사 */ #history {} #history #history-01 {padding: 200px 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("../img/bg-history1.png") center center no-repeat; background-size: cover;} #history #history-01 .history {display: flex; align-items: center; gap: 80px;} #history #history-01 .history .img {display: inline-flex; align-items: center; width: 300px; height: 360px; flex-shrink: 0; padding: 0 20px; background-color: #fff; border-radius: 4px;} #history #history-01 .history .img img {width: 100%; object-fit: cover;} #history #history-01 .history .txt {font-size: 22px; font-weight: 500; color: #fff; opacity: 0.9;} #history #intro-history {padding: 80px 0; background-color: #f2f2f2; overflow-x: hidden;} #history #intro-history {} #history #intro-history h3 {display: inline-flex; align-items: center; font-size: 40px; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); color: #01abcd;} #history #intro-history h3 strong {color: #fff;} #history #intro-history h3 img {width: 100%; max-width: 48px; margin-left: 12px; display: none;} #history #intro-history .thumbs #history-slide {padding-bottom: 140px; overflow: inherit;} #history #intro-history .thumbs .thumbs-list {margin-top: 60px;} #history #intro-history .thumbs .thumbs-list .thumbs-item {display: flex; flex-direction: column; justify-content: space-between; width: 320px; height: 420px;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: -1; opacity: 0; transition: opacity 1s;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-img img {width: 100%; height: 100%; object-fit: cover; opacity: 0.6;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 10px 40px 10px; transition: padding 0.55s;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents h6 {position: relative; top: 0; left: 0; font-size: 24px; font-weight: 700; color: #01abcd; transition: top 1.3s, left 0.5s, font-size 0.65s 0.65s, color 0.65s 0.65s;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents .detail {} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents .detail .txt {position: relative; font-size: 18px; color: #01abcd; margin: 12px 0 8px 0; padding-bottom: 8px; transition: color 0.65s 0.65s;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents .detail .txt::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #01abcd; z-index: 1; transition: width 0.65s;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents .detail .txt::after {content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #fff; z-index: 2; transition: width 0.65s 0.65s;} #history #intro-history .thumbs .thumbs-list .thumbs-item .item-contents .detail .time {height: 36px; font-size: 20px; font-weight: 300; color: #01abcd; text-align: right; transition: font-size 0.65s 0.65s, color 0.65s 0.65s;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-next + .thumbs-item .item-img::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents {padding: 40px 30px 40px 30px;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-img {opacity: 1;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents h6 {position: relative; top: -180px; left: 0; font-size: 36px; color: #fff;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents .detail .txt {color: #fff;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents .detail .time {font-size: 24px; color: #fff;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents .detail .txt::before {width: 0;} #history #intro-history .thumbs .thumbs-list .thumbs-item.swiper-slide-active .item-contents .detail .txt::after {width: 100%;} /* slide custom */ #history #intro-history .swiper-button-prev, #history #intro-history .swiper-button-next {top: unset; right: unset; left: 0; bottom: 10px; width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);} #history #intro-history .swiper-button-prev::after, #history #intro-history .swiper-button-next::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px;} #history #intro-history .swiper-button-prev {margin-left: 0;} #history #intro-history .swiper-button-prev::after {background: url("../img/arrow_back_ios_new_black_48dp.svg"); background-size: cover;} #history #intro-history .swiper-button-next {margin-left: 70px;} #history #intro-history .swiper-button-next::after {background: url("../img/arrow_forward_ios_black_48dp.svg"); background-size: cover;} /* 공정개발 */ #process {} #process #process-01 {position: relative; width: 100%; height: 100vh;} #process #process-01 .bg-list {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} #process #process-01 .bg-list .bg {opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0s;} #process #process-01 .bg-list .bg .tab-inner {padding-top: 300px;} #process #process-01 .bg-list .bg .tab-inner h6 {position: relative; top: -6rem; font-size: 60px; font-weight: 700; color: #fff; opacity: 0; transition: opacity 0.5s 0.15s, top 0.5s 0.15s;} #process #process-01 .bg-list .bg.active {opacity: 1; visibility: visible;} #process #process-01 .bg-list .bg.active .tab-inner h6 {opacity: 1; top: 0;} #process #process-01 > .container {height: 100%; z-index: 2;} #process #process-01 .logo {position: absolute; top: 80px; right: 0; width: 220px; text-align: center;} #process #process-01 .logo img {} #process #process-01 .process-list {position: absolute; top: 50%; right: 0; transform: translateY(-50%);} #process #process-01 .process-list > h4 {text-align: center; font-size: 32px; font-weight: 500; color: #fff;} #process #process-01 .process-list ul {display: flex; flex-direction: column; gap: 36px; margin-top: 40px;} #process #process-01 .process-list ul li {} #process #process-01 .process-list ul li button {position: relative; width: 220px; height: 56px; background: transparent; border: 1px solid #ccc; border-radius: 32px; font-size: 18px; color: #ccc; z-index: 1; overflow: hidden; transition: all 0.25s; opacity: 0.5; transition: opacity 0.35s, background-color 0.35s;} #process #process-01 .process-list ul li button:hover {opacity: 1;} /* PROCESS BUTTON STYLING */ /* #process #process-01 .process-list ul li button::after {content: ""; position: absolute; background: rgba(255, 255, 255, 0.75); transition: all 0.3s; z-index: -1; height: 100%; left: -35%; top: 0; transform: skew(50deg); transition-duration: 0.6s; transform-origin: top left; width: 0;} #process #process-01 .process-list ul li button:hover {color: #0044cf; border-color: #0044CF;} #process #process-01 .process-list ul li button:hover:after {height: 100%; width: 135%;} */ #process #process-01 .process-list ul li button.active {opacity: 1; border: 1px solid #0044CF; color: #0044cf; background-color: #fff;} /* Plant Overview */ #overview {} #overview-01 {padding: 120px 0 240px 0;} #overview-01 > .container {display: flex; justify-content: space-between;} #overview-01 .step-wrapper {display: flex; flex-direction: column; width: calc(100% - 750px); flex-shrink: 0;} #overview-01 .step-wrapper .step {position: relative; width: 100%; max-width: 380px;} #overview-01 .step-wrapper .step[data-step="2"] {margin-top: 400px;} #overview-01 .step-wrapper .step[data-step="2"] h5::after {transition-delay: 0.25s;} #overview-01 .step-wrapper .step h5 {position: relative; display: inline-block; font-size: 26px; font-weight: 700; z-index: 1;} #overview-01 .step-wrapper .step h5::after {position: absolute; display: block; content: '\00a0'; width: 0; left: 0; right: 0; top: 50%; height: 45%; background-color: #ffe360; transform: skew(-5deg); z-index: -1;} #overview-01 .step-wrapper .step h5[data-scroll]::after {transition: width 1.2s;} #overview-01 .step-wrapper .step h5[data-scroll="in"]::after {width: 100%;} #overview-01 .step-wrapper .step h5[data-scroll="out"]::after {width: 0;} #overview-01 .step-wrapper .step h5 em {color: #0044CF; font-weight: 700;} #overview-01 .floors {position: relative; margin: 80px 0 0 100px;} #overview-01 .floors .floor {position: absolute; top: 0; left: 0; width: 180px; height: 180px; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); cursor: pointer; transform: scale(1) translate(0, 0) rotate(45deg) skew(-20deg, -20deg); transition: top 0.65s, left 0.65s, box-shadow 0.65s, transform 0.65s, margin 0.65s;} #overview-01 .floors .floor[data-floor="5"] {top: 0; background-color: #00abcd; z-index: 5;} #overview-01 .floors .floor[data-floor="4"] {top: 40px; background-color: #00abcd; z-index: 4;} #overview-01 .floors .floor[data-floor="3"] {top: 80px; background-color: #00abcd; z-index: 3;} #overview-01 .floors .floor[data-floor="2"] {top: 120px; background-color: #00abcd; z-index: 2;} #overview-01 .floors .floor[data-floor="1"] {top: 160px; background-color: #00abcd; z-index: 1;} #overview-01 .floors .floor > span {display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 48px; font-weight: 700; color: #fff; opacity: 0; transform: scale(1) translate(0, 0) rotate(-45deg) skew(0deg, 0deg); transition: opacity 0.65s, transform 0.65s;} #overview-01 .floors .floor.active {box-shadow: 8px 8px 12px rgba(255, 255, 255, 0.9); transform: scale(1.15) rotate(45deg) translate(0, 0) skew(-20deg, -20deg); background-color:#005e70;} #overview-01 .floors .floor.active > span {opacity: 1; transform: scale(1) translate(0, 0) rotate(-45deg) skew(0deg, 0deg);} #overview-01 .place-list {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 60px; } #overview-01 .place-list .place {width: calc((100% / 3) - 8px); background-color: #ddd; border-radius: 18px; padding: 20px 0; font-size: 18px; font-weight: 400; color: #fff; transition: background-color 0.35s; margin-top: 0;} #overview-01 .place-list .place.active {background-color: #0044CF; margin-top: 0;} @keyframes motion { 0% {margin-top: 0px;} 100% {margin-top: 10px;} } #overview-01 .step-place-image {margin-top: 0;} #overview-01 .step-place-image .place-image-wrapper {} #overview-01 .step-place-image .place-image-description {margin-top: 20px; padding: 20px;} #overview-01 .step-place-image .place-image-description .desc {font-size: 18px; font-weight: 400; color: #000;} #overview-01 .step-place-image .place-image-item {display: none; position: relative; width: 700px;} #overview-01 .step-place-image .place-image-item.active {display: block;} #overview-01 .step-place-image .place-bg {} #overview-01 .step-place-image .place-bg img {width: 100%;} #overview-01 .step-place-image .place-image-list {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #overview-01 .step-place-image .place-image-list .place-image {position: absolute; cursor: pointer;} #overview-01 .step-place-image .place-image-list .place-image.active {} #overview-01 .step-place-image .place-image-list .place-image img {position: relative; transition: top 0.65s, transform 0.65s, opacity 0.35s;} #overview-01 .step-place-image .place-image-list .place-image img:nth-child(1) {opacity: 1; visibility: visible;} #overview-01 .step-place-image .place-image-list .place-image img:nth-child(2) {position: absolute; opacity: 0; visibility: hidden; transform: translateY(12px);} #overview-01 .step-place-image .place-image-list .place-image.active img:nth-child(1) {position: absolute; opacity: 0; visibility: hidden;} #overview-01 .step-place-image .place-image-list .place-image.active img:nth-child(2) {position: relative; opacity: 1; visibility: visible; transform: translateY(0); z-index: 2;} #overview-01 .place-image-item[data-place-floor="1"] .place-image[data-place-location="1"] {} #overview-01 .place-image-item[data-place-floor="1"] .place-image[data-place-location="2"] {} #overview-01 .place-image-item[data-place-floor="1"] .place-image[data-place-location="3"] {} #overview-01 .place-image-item[data-place-floor="2"] .place-image[data-place-location="1"] {} #overview-01 .place-image-item[data-place-floor="2"] .place-image[data-place-location="2"] {} #overview-01 .place-image-item[data-place-floor="2"] .place-image[data-place-location="3"] {} /* 제조 */ /* 2022-06-29 수정 */ #manufacturing {} #manufacturing #manufacturing-01 {background-color: #ebe9e4; padding: 120px 0;} #manufacturing #manufacturing-01 .tab-header {position: absolute; top: 0; left: 0; z-index: 5;} #manufacturing #manufacturing-01 .tab-header ul {display: flex; gap: 20px; width: 500px; max-width: 100%;} #manufacturing #manufacturing-01 .tab-header ul li {width: 50%; flex: 1; flex-shrink: 0;} #manufacturing #manufacturing-01 .tab-header ul li button {width: 100%; font-size: 30px; font-weight: 700;} #manufacturing #manufacturing-01 .tab-header ul li button > span {position: relative; display: inline-block; width: 100%; text-align: center; padding: 10px 0; font-size: 24px; font-weight: 700;} #manufacturing #manufacturing-01 .tab-header ul li button > span::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #fff; transition: width 0.35s;} #manufacturing #manufacturing-01 .tab-header ul li button > span::after {content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: #00abcd; transition: width 0.35s;} #manufacturing #manufacturing-01 .tab-header ul li button.active span::before {width: 0;} #manufacturing #manufacturing-01 .tab-header ul li button.active span::after {width: 100%;} #manufacturing #manufacturing-01 .tab-header ul li button > p {display: none; font-size: 18px; font-weight: 400; text-align: left;} .impact_font{ color:#00abcd;} #manufacturing #manufacturing-01 .tab-header ul li button.active {} #manufacturing #manufacturing-01 .tab-header ul li button.active p {display: block; position: absolute; top: 80px; left: 0; word-break:break-word;} #manufacturing #manufacturing-01 .tab-wrapper {overflow: clip; height: 1252px;} #manufacturing #manufacturing-01 .tab-wrapper .tab {position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; display: flex; flex-wrap: wrap; gap: 80px 40px;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active {position: relative; top: unset; left: unset; opacity: 1; visibility: visible; display: flex; flex-wrap: wrap;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item {position: relative; display: flex; width: auto; padding-right: 26px; transition: transform 0.85s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure {position: relative; display: flex;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 24px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure figcaption {position: relative; left: 100%; font-size: 17px; color: #000; text-align: right; writing-mode: vertical-lr; transform: rotate(180deg); margin-left: 4px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item .desc {font-size: 16px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item1 {width: 580px; align-items: flex-end; transform: translateX(-100%); transition-delay: 0.1s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 {width: calc(100% - 620px); transform: translateX(100%); transition-delay: 0.65s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item3 {width: 70%; transform: translateY(100%); transition-delay: 1.2s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item4 {width: calc(30% - 40px); flex-direction: column; justify-content: space-around; align-items: center; transform: translateX(100%); transition-delay: 1.85s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item1 figure {width: 400px; height: 400px; margin-top: 300px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 figure {width: 600px; height: 720px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item3 figure {width: 100%; height: 420px;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active {} #manufacturing #manufacturing-01 .tab-wrapper .tab.active .item {transform: translateX(0) translateY(0);} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .bef-box h6 {font-size: 40px; margin-bottom:20px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(30px); transition: opacity 0.35s 0.1s, transform 0.75s 0.1s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .bef-box p {font-size: 20px; font-weight: 400; color: #fff; margin-top: 8px; opacity: 0; transform: translateY(30px); transition: opacity 0.35s 0.75s, transform 0.75s 0.75s;} #manufacturing #manufacturing-01 .tab-header ul li button .btn-toggle_view {position: relative; display: inline-flex; justify-content: space-between; align-items: center; min-width: 180px; background-color: transparent; border-radius: 24px; padding: 12px 16px; margin-top: 24px; font-size: 16px; font-weight: 500; overflow: hidden;} #manufacturing #manufacturing-01 .tab-header ul li button .btn-toggle_view::before {content: ""; position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; background-color: #fff; z-index: -1;} #manufacturing #manufacturing-01 .tab-header ul li button.active .btn-toggle_view::after {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(255, 171, 157, 1); transition: width 0.35s; animation: buttonfull 5s linear forwards; z-index: -1; transition: background-color 0.35s;} #manufacturing #manufacturing-01 .tab-header ul li button.active .btn-toggle_view.animation-paused::after {animation-play-state: paused;} #manufacturing #manufacturing-01 .tab-header ul li button.active .btn-toggle_view:hover::after {background-color: rgba(255, 171, 157, 0.5);} @keyframes buttonfull { 0% {width: 0;} 100% {width: 100%;} } #manufacturing #manufacturing-01 .tab-header ul li button.active_bef .btn-toggle_view::after {content: ""; width: 100%; animation: unset;} /* #manufacturing #manufacturing-01 .tab-header ul li button:not(.active_bef) .btn-toggle_view::after {content: ""; width: 0; animation: none;} */ #manufacturing #manufacturing-01 .tab-header ul li button > p > .ori-txt {display: block;} #manufacturing #manufacturing-01 .tab-header ul li button > p > .bef-txt {display: none;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .ori-img {opacity: 1; transition: opacity 0.5s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .bef-img {opacity: 0; transition: opacity 0.5s 0.15s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .bef-box {opacity: 0; transition: opacity 0.5s 0.15s; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); border-radius: 24px; padding: 24px;} #manufacturing #manufacturing-01 .tab-header ul li button.active_bef > p > .ori-txt {display: none; } #manufacturing #manufacturing-01 .tab-header ul li button.active_bef > p > .bef-txt {display: block;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active_bef .item figure .ori-img {opacity: 0;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active_bef .item figure .bef-img {opacity: 1;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active_bef .item figure .bef-box {opacity: 1;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active_bef .item figure .bef-box h6 {transform: translateY(0); opacity: 1;} #manufacturing #manufacturing-01 .tab-wrapper .tab.active_bef .item figure .bef-box p {transform: translateY(0); opacity: 1;} /* 2022-06-29 수정 끝 */ .btn-cta {position: relative; margin: auto; padding: 19px 22px; transition: all .2s ease;} .btn-cta::before {content: ""; position: absolute; top: 0; left: 0; display: block; border-radius: 28px; background: rgba(255, 171, 157, 0.5); width: 56px; height: 56px; transition: all .3s ease;} .btn-cta span {position: relative; font-size: 18px; font-weight: 700; vertical-align: middle;} .btn-cta svg {position: relative; top: 0 !important; margin-left: 25px; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: #111; stroke-width: 2; transform: translateX(-5px); transition: all .3s ease;} .btn-cta:hover::before {width: 100%; background: rgba(255, 171, 157, 1);} .btn-cta:hover svg {transform: translateX(0);} .btn-cta:hover:active {transform: scale(.96);} .btn-cta:hover > .item .item1{display:none;} /* 분석 */ #analysis {} #analysis #analysis-01 {padding: 120px 0;} #analysis #analysis-01 .main-txt {padding: 0 80px;} #analysis #analysis-01 .main-txt > p {font-size: 18px;} #analysis #analysis-01 .main-txt > h6 {font-size: 20px; margin-top: 24px;} #analysis #analysis-01 .analysis {width: 100%; margin-top: 60px;} /* item-1 type1*/ #analysis #analysis-01 .item-1.type1 {display: flex; flex-direction: column; gap: 40px;} #analysis #analysis-01 .item-1.type1 .img {width: 100%;} #analysis #analysis-01 .item-1.type1 .img img {width: 100%; height: 480px; object-fit: cover;} #analysis #analysis-01 .item-1.type1 .desc {display: flex; justify-content: space-between; align-items: center;} #analysis #analysis-01 .item-1.type1 .desc > h6 {width: 300px; flex-shrink: 0; font-size: 40px; font-weight: 700; text-align: center; transition-delay: 0.45s;} #analysis #analysis-01 .item-1.type1 .desc > p {font-size: 18px; font-weight: 500; margin-right: 80px; transition-delay: 0.65s;} #analysis #analysis-01 .item-1.type1 .desc .btn-area {display: flex; flex-direction: column; gap: 20px; width: 200px; flex-shrink: 0; transition-delay: 0.85s;} #analysis #analysis-01 .item-1.type1 .desc .btn-area > button {display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 56px; background-color: #0044CF; border-radius: 18px; font-size: 18px; color: #fff;} [data-animate="animate01"] {opacity: 0; transform: translateX(100%); transition: opacity 0.65s, transform 0.65s;} /* 오른쪽에서 fade in*/ [data-animate="animate02"] {opacity: 0; transform: translateY(100%); transition: opacity 0.65s, transform 0.65s;} /* 아레에서 fade in*/ [data-animate="animate03"] {opacity: 0; transform: translateX(-100%); transition: opacity 0.65s, transform 0.65s;} /* 왼쪽에서 fade in*/ .swiper-slide-active [data-animate="animate01"] {opacity: 1; transform: translateX(0);} .swiper-slide-active [data-animate="animate02"] {opacity: 1; transform: translateY(0);} .swiper-slide-active [data-animate="animate03"] {opacity: 1; transform: translateY(0);} /* item-1 type2 */ #analysis #analysis-01 .item-1.type2 {display: flex; flex-direction: row; gap: 60px;} #analysis #analysis-01 .item-1.type2 .img {width: 800px; flex-shrink: 0; transition-delay: 0s;} #analysis #analysis-01 .item-1.type2 .img img {width: 100%; height: 340px; object-fit: cover;} #analysis #analysis-01 .item-1.type2 .desc {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;} #analysis #analysis-01 .item-1.type2 .desc > h6 {width: 300px; flex-shrink: 0; font-size: 40px; font-weight: 700; text-align: left; transition-delay: 0.45s;} #analysis #analysis-01 .item-1.type2 .desc > p {font-size: 18px; font-weight: 500; transition-delay: 0.65s;} #analysis #analysis-01 .item-1.type2 .desc .btn-area {display: flex; flex-direction: row; gap: 20px; width: 100%; flex-shrink: 0; transition-delay: 0.85s;} #analysis #analysis-01 .item-1.type2 .desc .btn-area > button {flex: 1; display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 56px; background-color: #0044CF; border-radius: 18px; font-size: 18px; color: #fff;} /* item-2 */ #analysis #analysis-01 .item-2 {position: relative; display: flex; justify-content: space-between; gap: 60px; margin-top: 60px; padding-top: 30px; border-top: 1px solid #0044CF;} #analysis #analysis-01 .item-2::before {content: "STgen 도움말"; position: absolute; top: 0; left: 0; width: auto; padding: 12px 20px; background-color: #0044cf; border-radius: 12px 12px 0 0; transform: translateX(-100%) translateY(-100%); font-size: 24px; font-weight: 500; color: #fff; transition: opacity 0.65s, transform 0.65s; transition-delay: 1s;} #analysis #analysis-01 .swiper-slide-active .item-2::before {transform: translateX(0) translateY(-100%);} #analysis #analysis-01 .item-2 .desc {transition-delay: 1.45s;} #analysis #analysis-01 .item-2 .desc > p {font-size: 18px; font-weight: 500;} #analysis #analysis-01 .item-2 .img {display: flex; gap: 20px; flex-shrink: 0; transition-delay: 1.85s;} #analysis #analysis-01 .item-2 .img img {} #analysis #analysis-01 .item-2 .img img:nth-child(1) {width: 280px; height: 360px; object-fit: cover; border-radius: 18px;} #analysis #analysis-01 .item-2 .img img:nth-child(2) {width: 280px; height: 360px; object-fit: cover; border-radius: 18px;} /* item-3 */ #analysis #analysis-01 .item-3 {position: relative; display: flex; justify-content: space-between; margin-top: 60px; padding-top: 60px; border-top: 1px solid #0044CF;} #analysis #analysis-01 .item-3::before {content: "추가"; position: absolute; top: 0; left: 50%; transform: translateY(-50%) translateX(100%); width: auto; padding: 12px 40px; background-color: #0044cf; border-radius: 12px; font-size: 24px; font-weight: 500; color: #fff; transition: opacity 0.65s, transform 0.65s; opacity: 0; transition-delay: 1s;} #analysis #analysis-01 .swiper-slide-active .item-3::before {opacity: 1; transform: translateX(-50%) translateY(-50%);} #analysis #analysis-01 .item-3 .img-item {width: 360px;} #analysis #analysis-01 .item-3 .img-item:nth-child(1) {transition-delay: 1.45s;} #analysis #analysis-01 .item-3 .img-item:nth-child(2) {transition-delay: 1.65s;} #analysis #analysis-01 .item-3 .img-item:nth-child(3) {transition-delay: 1.85s;} #analysis #analysis-01 .item-3 .img-item .img {} #analysis #analysis-01 .item-3 .img-item .img img {width: 360px; height: 280px; object-fit: cover;} #analysis #analysis-01 .item-3 .img-item .desc {margin-top: 30px;} #analysis #analysis-01 .item-3 .img-item .desc p {font-size: 18px; font-weight: 500;} /* Analysis Swiper */ .analysis-thumbs {width: 100%; padding: 0; overflow: hidden;} .analysis-thumbs .swiper-slide {width: 280px; height: 360px; text-align: center; overflow: hidden; opacity: .45;} .analysis-thumbs .swiper-slide-active {opacity: 1;} .analysis-thumbs .swiper-slide img {width: auto; height: 100%;} .analysis-slider {width: 100%; height: auto; margin: 40px 0 0 0;} .analysis-slider .swiper-slide {width: auto; height: auto;} .analysis-slider .swiper-slide img {display: block; width: auto; height: 100%; margin: 0 auto;} /* 개인정보처리방침 */ #terms {} #terms #terms-01 {padding: 120px 0;} #terms #terms-01 .float-news {} #terms #terms-01 .float-news img {width: 550px; height: 480px; object-fit: cover; float: right; margin: 40px;} #terms #terms-01 .float-news h4 {font-size: 32px; font-weight: 700; line-height: 1.44;} #terms #terms-01 .float-news p {font-size: 22px; font-weight: 400; color: #777; margin-top: 40px;} /* 문의하기 */ #contact {} #contact #app-contact {padding: 200px 0;} #contact #app-contact .inner-title {margin-bottom: 100px;} #contact #app-contact .inner-title h2 {font-size: 50px; font-weight: 700;} #contact #app-contact .inner-body {display: flex;} #contact #app-contact .service-info {width: 40%;} #contact #app-contact .grid-form {width: 60%;} #contact #app-contact .service-info .sticky-info-wrapper {max-width: 450px} #contact #app-contact .service-info .sticky-info-wrapper.sticky {position: fixed; margin-top: 100px;} #contact #app-contact .service-info .sticky-info-wrapper p {font-size: 24px; font-weight: 700; color: #212529; line-height: 1.56} #contact #app-contact .service-info .sticky-info-wrapper p span {display: inline-block; font-weight: 700; color: #bbb} #contact #app-contact .service-info .sticky-info-wrapper p span.active {color: #01abcd} #contact #app-contact .service-info .sticky-info-wrapper p + p {margin-top: 24px} #contact #app-contact .grid-form .form-group {position: relative; margin-bottom: 80px} #contact #app-contact .grid-form .form-group .disabled-overlay {position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 10px); background-color: rgba(255,255,255,.8); z-index: 5} #contact #app-contact .grid-form .form-group .group-header {margin-bottom: 32px} #contact #app-contact .grid-form .form-group .group-header h3 {font-size: 32px; font-weight: 700; color: #212529; letter-spacing: -0.015em} #contact #app-contact .grid-form .form-group .group-content .check-label-button {position: relative} #contact #app-contact .grid-form .form-group .group-content .check-label-button label {display: block; width: 100%; font-size: 17px; font-weight: 600; color: #666; letter-spacing: -0.015em; text-align: center; margin-bottom: 0; padding: 20px 10px; border: 1px solid #ced4da; border-radius: 16px; background-color: #fff; cursor: pointer; transition: .2s} #contact #app-contact .grid-form .form-group .group-content .check-label-button label:hover {background-color: #f8f9fa} #contact #app-contact .grid-form .form-group .group-content .check-label-button input[type='checkbox'] {position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); visibility: hidden} #contact #app-contact .grid-form .form-group .group-content .check-label-button input[type='checkbox'] {position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0); visibility: hidden} #contact #app-contact .grid-form .form-group .group-content .check-label-button input[type='checkbox']:checked + label {color: #fff; border-color: #01abcd; background-color: #01abcd; box-shadow: 0 6px 14px 0 rgba(217,72,15,.24)} #contact #app-contact .grid-form .form-group .group-content .selectric {border: 1px solid #ced4da; border-radius: 10px; background-color: #fff; transition: .2s} #contact #app-contact .grid-form .form-group .group-content .selectric-wrapper:not(.selectric-disabled) .selectric:hover {background-color: #f8f9fa} #contact #app-contact .grid-form .form-group .group-content .selectric-open .selectric {border-color: #212529; background-color: #f8f9fa} #contact #app-contact .grid-form .form-group .group-content .selectric .label {font-size: 16px; font-weight: 500; color: #868e96; letter-spacing: -0.015em; text-align: left; line-height: 60px; height: 60px; margin: 0; padding: 0 24px} #contact #app-contact .grid-form .form-group .group-content .selectric-open .selectric .label {color: #212529} #contact #app-contact .grid-form .form-group .group-content .selectric .button {width: 50px; height: 60px; padding: 0; color: #666; line-height: 48px; background-color: transparent} #contact #app-contact .grid-form .form-group .group-content .selectric .button:after {top: 50%; left: 50%; bottom: auto; right: auto; width: 17px; height: 10px; border: 0; background-image: url("../img/selectric_dropdown_arrow.svg"); background-size: 100%; background-position: center; background-repeat: no-repeat; transform: translate(-50%,-50%)} #contact #app-contact .grid-form .form-group .group-content .selectric-items {margin-top: 4px; border: 0; border-color: transparent; border-radius: 10px; background-color: #fff; box-shadow: 0 8px 20px 0 rgba(0,0,0,.14); overflow: hidden} #contact #app-contact .grid-form .form-group .group-content .selectric-above .selectric-items {margin-bottom: -1px} #contact #app-contact .grid-form .form-group .group-content .selectric-items ul, .contact-form .grid-form .form-group .group-content .selectric-items li {font-size: 16px; font-weight: 500; color: #495057; letter-spacing: -0.015em} #contact #app-contact .grid-form .form-group .group-content .selectric-items li {padding: 14px 24px; cursor: pointer; font-size: 16px;} #contact #app-contact .grid-form .form-group .group-content .selectric-items li:hover {background-color: #f8f9fa} #contact #app-contact .grid-form .form-group .group-content .selectric-items li.highlighted {background-color: #f1f3f5} #contact #app-contact .grid-form .form-group .group-content .selectric-items li.selected {color: #000; background-color: #f1f3f5} #contact #app-contact .grid-form .contact-form-file {position: relative; display: block; width: 100%} #contact #app-contact .grid-form .contact-form-file input[type='file'] {position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; opacity: 0; visibility: hidden} #contact #app-contact .grid-form .contact-form-file input[type='text'] {width: calc(100% - 179px) !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important} #contact #app-contact .grid-form .contact-form-file input[type='file'] ~ label {position: absolute; top: 0; right: 0; display: inline-block; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.015em; line-height: 58px; text-align: center; width: 180px; height: 60px; margin-bottom: 0; border-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: #0044CF; cursor: pointer; transition: color .2s, background-color .2s, box-shadow .2s} #contact #app-contact .grid-form .contact-form-file input[type='file']:not(:disabled) ~ label:hover {background-color: #0044CF; box-shadow: 0 0 12px 0 rgba(217,72,15,.24)} #contact #app-contact .grid-form .contact-form-file input[type='file'] ~ label svg {margin-right: 0.5rem} #contact #app-contact .grid-form .contact-form-control {position: relative; display: block; width: 100%; height: 60px; font-size: 16px; font-weight: 500; color: #343a40; padding: 6px 24px; border: 1px solid #ced4da; border-radius: 10px; background-color: #f8f9fa; outline: 0; transition: .2s} #contact #app-contact .grid-form .contact-form-control::placeholder {color: #999} #contact #app-contact .grid-form .contact-form-control:focus {border-color: #ffd8a8; background-color: #fff; box-shadow: 0 0 0 3px #ffe8cc} #contact #app-contact .grid-form .input-group.required::after {content: ''; position: absolute; display: block; top: 12px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background-color: #e03131; z-index: 5} #contact #app-contact .grid-form textarea.contact-form-control {height: auto; padding: 24px; resize: none} #contact #app-contact .grid-form .attach-info {position: relative; font-size: 14px; font-weight: 500; color: #868e96; margin-top: 12px; padding-left: 20px} #contact #app-contact .grid-form .attach-info i {position: absolute; left: 0; vertical-align: 0} #contact #app-contact .grid-form .contact-form-check label {position: relative; font-size: 0; margin-bottom: 0; cursor: pointer; vertical-align: top} #contact #app-contact .grid-form .contact-form-check input[type='checkbox'] {position: absolute; top: -1px; left: -1px; width: 0; height: 0; opacity: 0; pointer-events: none; visibility: hidden} #contact #app-contact .grid-form .contact-form-check .check-helper {position: relative; top: 2px; display: inline-block; width: 32px; height: 32px; margin-right: 10px; border: 2px solid #ccc; border-radius: 50%; background-color: transparent; vertical-align: middle} #contact #app-contact .grid-form .contact-form-check .check-helper::before {content: ''; position: absolute; display: block; top: 50%; left: 50%; width: 8px; height: 14px; border-bottom: 2px solid #212529; border-right: 2px solid #212529; transform: translate(-50%,-60%) scale(0,0) rotate(45deg); transform-origin: 50% 50%; transition: transform .1s} #contact #app-contact .grid-form .contact-form-check label span {display: inline-block; font-size: 20px; font-weight: 500; color: #868e96; vertical-align: middle} #contact #app-contact .grid-form .contact-form-check label span em {font-style: normal} #contact #app-contact .grid-form .contact-form-check label:hover .check-helper, .contact-form .grid-form .contact-form-check input[type='checkbox']:checked + .check-helper {border-color: #212529} #contact #app-contact .grid-form .contact-form-check input[type='checkbox']:checked + .check-helper::before {transform: translate(-50%,-60%) scale(1,1) rotate(45deg)} #contact #app-contact .grid-form .contact-form-check input[type='checkbox']:checked ~ span {color: #212529} #contact #app-contact .grid-form .contact-form-check input[type='checkbox']:disabled + .check-helper {border-color: #ccc !important; opacity: .5} #contact #app-contact .grid-form .contact-form-check input[type='checkbox']:disabled ~ span {opacity: .5} #contact #app-contact .grid-form .contact-form-check label span a {display: inline-block; color: #0044CF; border-bottom: 1px solid #0044CF} #contact #app-contact .grid-form .error-container {margin-bottom: 60px} #contact #app-contact .grid-form .error-container ul li {position: relative; font-size: 15px; font-weight: 500; color: #f03e3e; letter-spacing: -0.04em; line-height: 1.6; padding-left: 14px} #contact #app-contact .grid-form .error-container ul li + li {margin-top: 4px} #contact #app-contact .grid-form .error-container ul li::before {content: ''; position: absolute; display: block; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #ffa8a8} #contact #app-contact .button-form-submit {font-size: 20px; font-weight: 600; color: #fff; width: 300px; height: 80px; border: 0; border-radius: 16px; background-color: #212529; outline: 0; box-shadow: 0 8px 20px 0 rgba(0,0,0,.28); transition: .2s} #contact #app-contact .button-form-submit:not(:disabled):hover {background-color: #343a40; box-shadow: none} #contact #app-contact .button-form-submit:disabled {opacity: .4} #contact #app-contact .item-list_4 {display: flex; flex-wrap: wrap; gap: 8px;} #contact #app-contact .item-list_4 > div {width: calc((100% / 4) - 6px);} #contact #app-contact .item-list_3 {display: flex; flex-wrap: wrap; gap: 8px;} #contact #app-contact .item-list_3 > div {width: calc((100% / 3) - 12px); position: relative;} #contact #app-contact .item-list_2 {display: flex; flex-wrap: wrap; gap: 8px;} #contact #app-contact .item-list_2 > div {width: calc((100% / 2) - 4px); position: relative;} #contact #app-contact .item-list_3 .division2 {width: calc((100% / 2) - 14px);} #contact #app-contact .item-list_3 .text-sm {font-size:15px;} /* 채용정보 */ #employ {} /* 뉴스&IR */ #news {} /* 게시판 */ #board {padding: 120px 0;} #board .board-header {text-align: center;} #board .board-header > h2 {font-size: 48px; font-weight: 600;} #board .board-header > p {font-size: 20px; color: #777; font-weight: 500; margin-top: 8px;} #board .board-wrapper {margin-top: 60px; border: solid #01abcd; border-width: 1px 0 1px 0; padding-bottom: 40px;} #board .board-wrapper .board-cnt {border-bottom: 3px solid #01abcd; padding: 12px 20px;} #board .board-wrapper .board-cnt > span {font-size: 16px;} #board .board-wrapper .board-list {display: flex; flex-direction: column; gap: 40px; margin-top: 40px; padding: 0 20px;} #board .board-wrapper .board-list .item {display: flex; gap: 80px;} #board .board-wrapper .board-list .item .date {display: flex; flex-direction: column; width: 120px; flex-shrink: 0;} #board .board-wrapper .board-list .item .date .date-year {font-size: 22px; color: #777;} #board .board-wrapper .board-list .item .date .date-monthday {font-size: 28px; font-weight: 700;} #board .board-wrapper .board-list .item .content {} #board .board-wrapper .board-list .item .content .title {font-size: 24px; font-weight: 600;} #board .board-wrapper .board-list .item .content .desc {font-size: 16px; margin-top: 20px;color:#777777;} /* 회사소개, 상세정보 */ #detail h6 {font-size: 24px; font-weight: 900;} #detail .desc-1 {font-size: 18px; margin: 40px 0 30px 0; padding-bottom: 30px; border-bottom: 1px solid #eee;} /* *************************************************** * 공용 페이지 CSS ***************************************************** */ #employ section:not(#lnb) {padding: 80px 0 80px 0;} #employ section:last-child {padding: 80px 0 160px 0 !important;} #employ h3 {font-size: 48px; font-weight: 700; line-height: 1.44;} #employ h4 {font-size: 36px; font-weight: 500; line-height: 1.34;} #employ h4 em {color: #01abcd; font-weight: 500;} #employ h5 {font-size: 28px; font-weight: 500; line-height: 1.22;} #employ #s01 .desc {font-size: 20px; line-height: 1.44; margin-top: 40px;} #employ #s01 .buttons {display: flex; margin-top: 40px;} #employ #s01 .buttons button {cursor: default; display: inline-flex; justify-content: center; align-items: center; padding: 8px 16px; border-radius: 8px; background-color: #0044CF; color: #fff; font-size: 16px;} #employ #s01 .buttons button:not(:last-child) {margin-right: 8px;} #employ #s02 {padding: 80px 0 80px 0; background-color: #e5e5e5;} #employ #s02 h4 {font-size: 36px; font-weight: 500;} #employ #s02 h4 em {position: relative; font-weight: 500; color: #0044CF;} #employ #s02 h4 em::after {content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background-color: #0044CF; width: 6px; height: 6px; border-radius: 50%;} #employ #s02 .indicate {display: flex; margin-top: 40px;} #employ #s02 .indicate .targets {width: 50%;} #employ #s02 .indicate .targets .target {position: relative; font-size: 18px; padding-left: 12px;} #employ #s02 .indicate .targets .target:hover::after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 80%; background-color: #0044CF;} #employ #s02 .indicate .targets .target:not(:last-child) {margin-bottom: 24px;} #employ #s02 .indicate .graph {width: 50%; display: flex;} #employ #s02 .indicate .graph .labels {width: 50px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between;} #employ #s02 .indicate .graph .labels span {font-size: 17px; font-weight: 500; text-align: center;} #employ #s02 .indicate .graph .chart {width: 100%; display: flex; justify-content: flex-start; align-items: flex-end; margin-left: 20px;} #employ #s02 .indicate .graph .chart .chart-item {position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 50px; height: 0; transform: scale(1); margin-right: 12px; opacity: 1; transition: transform 0.35s, height 0.55s, opacity 0.35s;} #employ #s02 .indicate .graph .chart .chart-item.active {transform: scale(1.15);} #employ #s02 .indicate .graph .chart .chart-item:not(.active) {opacity: 0.85;} #employ #s02 .indicate .graph .chart .chart-item > div {width: 100%; height: 10px;} #employ #s02 .indicate .graph .chart .chart-item > div.block-1 {background-color: #0044CF; opacity: 1;} #employ #s02 .indicate .graph .chart .chart-item > div.block-2 {background-color: #0044CF; opacity: 0.8;} #employ #s02 .indicate .graph .chart .chart-item > div.block-3 {background-color: #0044CF; opacity: 0.6;} #employ #s02 .indicate .graph .chart .chart-item > div.block-4 {background-color: #0044CF; opacity: 0.4;} #employ #s02 .indicate .graph .chart .chart-item > div.block-5 {background-color: #0044CF; opacity: 0.2;} #employ #s02 .indicate .graph .chart .chart-item > div.block-6 {background-color: #0044CF; opacity: 0.1;} #employ #s03 {padding: 80px 0 160px 0;} #employ #s03 .videos {margin-top: 60px;} #employ #s03 .videos .video-tit {font-size: 28px; font-weight: 500; color: #0044CF; text-align: center;} #employ #s03 .videos .video {width: 720px; height: 480px; margin: 20px auto 0 auto; border: 1px solid #ddd;} #employ #s04 {background-color: #e5e5e5;} #employ #s04 .item-list {display: flex; flex-direction: column; gap: 40px; margin-top: 60px;} #employ #s04 .item-list .item {display: flex; align-items: center; gap: 60px;} #employ #s04 .item-list .item .img {} #employ #s04 .item-list .item .img img {} #employ #s04 .item-list .item .content {} #employ #s04 .item-list .item .content h5 {font-size: 28px; font-weight: 600;} #employ #s04 .item-list .item .content h5 em {font-weight: 700; color: #979797; margin-right: 6px; font-size:20px;} #employ #s04 .item-list .item .content .desc {font-size: 20px; margin-top: 12px;} #employ #s05 {} #employ #s05 .tab-cont {margin-top: 80px;} #employ #s05 .tab-cont .tab-header {display: flex; width: 100%; background-color: #f8f8fd; border-radius: 10px;} #employ #s05 .tab-cont .tab-header .btn-tab {flex: 1; padding: 30px 42px; cursor: pointer; border: 2px solid #f8f8fd;} #employ #s05 .tab-cont .tab-header .btn-tab .tit-k {font-size: 28px; letter-spacing: -1.12px; color: #23232d; font-weight: 700;} #employ #s05 .tab-cont .tab-header .btn-tab .tit-e {font-size: 20px; color: #23232d; font-weight: 700; margin-top: 6px;} #employ #s05 .tab-cont .tab-header .btn-tab.active {background-color: #fff; border: 2px solid #0044CF; border-radius: 10px; box-shadow: 0 2px 15px -4px #29236be2; z-index: 5;} #employ #s05 .tab-cont .tab-header .btn-tab.active .tit-k {color: #0044CF;} #employ #s05 .tab-cont .tab-header .btn-tab.active .tit-e {color: #0044CF;} #employ #s05 .tab-cont .tab-body {margin-top: 80px;} #employ #s05 .tab-cont .tab-body .tab {display: none;} #employ #s05 .tab-cont .tab-body .tab.active {display: flex;} #employ #s05 .tab-cont .tab-body .tab .tc-img {flex-shrink: 0; width: 360px;} #employ #s05 .tab-cont .tab-body .tab .tc-img img {width: 360px; height: 273px;} #employ #s05 .tab-cont .tab-body .tab .tc-info {padding: 65px 0 0 76px;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-tit {display: flex; align-items: center;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-tit img {width: 38px; height: 38px;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .tm {font-size: 28px; letter-spacing: -1.12px; color: #0044CF; font-weight: 800; margin-left: 8px;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .ts {font-size: 28px; letter-spacing: -1.12px; color: #0044CF; font-weight: 700; margin-left: 12px;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-desc {font-size: 20px; letter-spacing: -0.8px; color: #24303d; line-height: 30px; font-weight: 700; margin-top: 46px;} #employ #s06 {background-color: #e5e5e5;} #employ #s06 {padding: 115px 0 95px 0;} #employ #s06 .sec-inner {display: flex; justify-content: space-between; align-items: flex-start; gap: 120px;} #employ #s06 .content .title {} #employ #s06 .content .service {margin-top: 30px;} #employ #s06 .content .service p {font-size: 20px;} #employ #s06 .img {width: 400px; flex-shrink: 0;} #employ #s06 .img > img {} #employ #s07 {} #employ #s07 .top {position: relative; display: flex; justify-content: space-between; gap: 24px;} #employ #s07 .top .content {} #employ #s07 .top .content .title {} #employ #s07 .top .content .title > img {} #employ #s07 .top .content .service {font-size: 18px; max-width: 600px; margin-top: 24px;} #employ #s07 .top .content .service > p {} #employ #s07 .top .img {} #employ #s07 .top .img > img {position: absolute; top: 0; right: -50px;} #employ #s07 .bottom {display: flex; flex-direction: column; gap: 20px; margin-top: 60px;} #employ #s07 .bottom .tb {display: flex; align-items: center;} #employ #s07 .bottom .tb > span {font-size: 1.25em; background-color: #0044CF; border-radius: 1px; padding: 4px 12px; box-sizing: border-box; color: #fff; margin-right: 10px;} #employ #s07 .bottom .tb > p {font-size: 16px;} #employ #s07 .bottom .tb > p > em {color: #0044CF; font-weight: 700;} #employ #s08 {background-color: #e5e5e5;} #employ #s08 .top {display: flex; justify-content: space-between; gap: 40px;} #employ #s08 .top .service {width: calc(100% / 3); height: 360px; padding: 24px; background-color: #fff; border-radius: 24px; box-shadow: 6px 8px 8px 0 rgb(61 95 158 / 10%); text-align: center;transition:all .4s} #employ #s08 .top .service:hover{transform:scale(1.1)} #employ #s08 .top .service > img {width: 75px; border-radius: 50%; box-shadow: 0px 10px 20px 5px rgba(61, 95, 158, 0.1); margin-bottom: 20px;} #employ #s08 .top .service > p {font-size: 18px; color: #888; margin-top: 20px;} #employ #s08 .bottom {text-align: center;} #employ #s08 .bottom > p {margin-top: 24px; font-size: 18px;} #employ #s09 {} #employ #s09 .service {width: 100%; padding: 32px; background-color: #fff; border-radius: 15px; box-shadow: 0px 2px 6px 2px rgb(0 0 0 / 10%);} #employ #s09 .service .content .text {display: flex; flex-direction: column; gap: 12px; margin-top: 30px;} #employ #s09 .service .content .text > p {position: relative; padding-left: 20px; font-size: 16px;} #employ #s09 .service .content .text > p:before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 3px; height: 12px; background-color: #0044CF; border-radius: 1px;} #greeting .more-detail img{width:158px;} @media screen and (max-width: 1200px) { .container {padding: 0 40px;} #header #sub_menu .news {visibility: hidden; opacity: 0;} #footer {padding: 60px 40px 80px 40px;} /* HOME */ #home #main-banner .banner-list .banner-item .item-inner {right: 40px;} #home #intro-items > .container {gap: 120px;} #home #intro-iframe .layer-pagination button h6 {font-size: 16px;} #home #intro-iframe .layer-pagination button h5 {font-size: 32px;} #home #intro-iframe .layer-pagination button#layer-pagination-prev::before {width: 25px; height: 40px;} #home #intro-iframe .layer-pagination button#layer-pagination-next::before {width: 25px; height: 40px;} #home #intro-iframe .layer-item .layer {height: 320px;} /* VISION */ #vision #vision-01 .vision-cells {top: -120px; left: 40px;} #vision #vision-banner .banner-list {padding: 0 40px;} #vision #vision-banner .banner-list .banner-item .item-inner {left: 40px;} #vision-banner .swiper-pagination {left: 40px;} /* INTRO */ #intro #greeting .contents {right: 40px;} #process #process-01 .process-list {right: 40px;} /* PROCESS */ #process #process-01 .logo {right: 40px;} /* MANUFACTURING */ #manufacturing #manufacturing-01 .tab-header {left: 40px;} #manufacturing #manufacturing-01 .tab-wrapper {height: auto;} #manufacturing #manufacturing-01 .tab-wrapper .tab {gap: 60px 40px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item1 {width: calc(50% - 20px);} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 {width: calc(50% - 20px);} #manufacturing #manufacturing-01 .tab-wrapper .tab .item1 figure {width: 100%; height: auto;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 figure {width: 100%; height: auto; margin-top: 200px;} /* ANALYSIS */ .analysis-thumbs .swiper-slide {height: 320px;} #analysis #analysis-01 .item-1.type2 .img {width: 60%;} #analysis #analysis-01 .item-1.type2 .desc {width: 40%;} #analysis #analysis-01 .item-3 {gap: 20px;} #analysis #analysis-01 .item-3 .img-item {width: calc(100% / 3);} /* EMPLOY */ #employ section:not(#lnb) {padding: 60px 0 60px 0;} #employ section:last-child {padding: 60px 0 120px 0 !important;} #employ h3 {font-size: 36px;} #employ h4 {font-size: 28px;} #employ h5 {font-size: 22px;} #employ #s01 {padding: 80px 16px;} #employ #s01 .desc {font-size: 17px;} #employ #s01 .buttons {flex-wrap: wrap; gap: 12px;} #employ #s01 .buttons button {width: calc((100% / 2) - 6px);} #employ #s01 .buttons button:not(:last-child) {margin-right: 0;} #employ #s02 {padding: 80px 16px;} #employ #s02 h4 {font-size: 32px;} #employ #s02 .indicate {flex-direction: column;} #employ #s02 .indicate .targets {width: 100%;} #employ #s02 .indicate .targets .target {padding-left: 0; font-size: 17px;} #employ #s02 .indicate .targets .target:not(:last-child) {margin-bottom: 12px;} #employ #s02 .indicate .targets .target:hover::after {left: -10px;} #employ #s02 .indicate .graph {width: 100%; margin-top: 30px;} #employ #s02 .indicate .graph .chart .chart-item {width: calc(100% / 5);} #employ #s02 .indicate .graph .chart .chart-item:last-child {margin-right: 0;} #employ #s03 {padding: 80px 16px;} #employ #s03 h4 {font-size: 32px; text-align: center;} #employ #s03 .videos .video-tit {font-size: 24px;} #employ #s03 .videos .video {width: 100%; height: 200px;} #employ #s04 .item-list .item {flex-direction: column; gap: 20px; align-items: flex-start;} #employ #s04 .item-list .item .content h5 {font-size: 22px;} #employ #s04 .item-list .item .content h5 em {margin-right: 0;} #employ #s04 .item-list .item .content .desc {font-size: 17px;} #employ #s05 .tab-cont {margin-top: 40px;} #employ #s05 .tab-cont .tab-header {flex-wrap: wrap;} #employ #s05 .tab-cont .tab-header .btn-tab {width: 50%;} #employ #s05 .tab-cont .tab-body {margin-top: 60px;} #employ #s05 .tab-cont .tab-body .tab {flex-direction: column;} #employ #s05 .tab-cont .tab-body .tab .tc-img {width: 100%;} #employ #s05 .tab-cont .tab-body .tab .tc-img img {width: 100%;} #employ #s05 .tab-cont .tab-body .tab .tc-info {padding: 20px 0;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .tm {margin-left: 0px; font-size: 24px;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-tit .ts {font-size: 24px;} #employ #s05 .tab-cont .tab-body .tab .tc-info .ti-desc {margin-top: 20px; font-size: 18px;} #employ #s05 .tab-cont .tab-header .btn-tab .tit-k {font-size: 25px;} #employ #s06 .sec-inner {flex-direction: column; gap: 30px;} #employ #s06 .content .service p {font-size: 18px;} #employ #s06 .img {width: 100%;} #employ #s07 .top .img > img {display: none;} #employ #s07 .top .content .service > p {font-size: 18px;} #employ #s07 .bottom {margin-top: 40px;} #employ #s07 .bottom .tb {align-items: flex-start;} #employ #s07 .bottom .tb > span {position: relative; top: 3px;} #employ #s08 .top {flex-direction: column;} #employ #s08 .top .service {width: 100%;} #employ #s09 .service .content .text > p {padding-left: 12px;} #employ #s09 .service .content .text > p:before {height: 80%;} } /****************************** TABLET ******************************/ @media screen and (max-width: 1024px) { /****************************** COMMON ******************************/ .container {width: 100%; padding: 0 24px;} /****************************** HEADER ******************************/ #header {height: 70px;} #header .logo img {width: 180px;} #header nav.desktop {display: none;} #header .mobile {display: block;} #header .mobile #btn-open_gnb {} #header .mobile #sidebar {position: fixed; top: 0; bottom: 0; right: -100%; background-color: #fff; z-index: 201; width: 40%; height: 100vh; overflow: auto; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;} #header .mobile #sidebar.active {right: 0;} #header .mobile #sidebar > ul {padding: 80px 0 0 60px;} #header .mobile #sidebar > ul > li {margin-bottom: 24px; cursor: pointer;} #header .mobile #sidebar > ul > li p {font-size: 20px; font-weight: 600; color: #0044CF;} #header .mobile #sidebar > ul > li > a {font-size: 20px; font-weight: 600; color: #0044CF;} #header .mobile #sidebar > ul > li .sub_menu {display: none; padding: 20px 0 0 20px;} #header .mobile #sidebar > ul > li .sub_menu > li {margin-bottom: 12px;} #header .mobile #sidebar > ul > li .sub_menu > li a {font-size: 18px;} /****************************** FOOTER ******************************/ #footer {padding: 60px 24px;} /* TABLE */ .table-wrapper .table .table-body {min-width: 100%;} /* SECTION */ #lnb {padding-top: 70px;} section:not(#lnb) {padding-left: 24px !important; padding-right: 24px !important;} section#banner {padding-left: 0 !important; padding-right: 0 !important;} #home #main-banner {padding-left: 0 !important; padding-right: 0 !important; height: 600px;} /****************************** INDIVIDUAL ******************************/ /* TODO UPDATE 2022-06-24 (4)*/ /* HOME */ #home #intro-workers .item-list .item .item-img {overflow: hidden;} #home #intro-workers .item-list .item .item-desc-box {background-color: transparent; z-index: 1;} #home #intro-workers .item-list .item .item-desc-box .idb-1 {top: unset; bottom: 0; height: 0; padding: 0; border-radius: 24px; transition: height 0.85s;} #home #intro-workers .item-list .item .item-desc-box .idb-1 .idb-pos {font-size: 18px; margin: 20px 0 0 20px;} #home #intro-workers .item-list .item .item-desc-box .idb-1 .idb-name {font-size: 22px; margin: 20px 20px 0 0;} #home #intro-workers .item-list .item .item-desc-box .idb-2 {top: unset; bottom: 0; height: 0; padding: 0; border-radius: 24px; transition: height 0.85s;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .btn-idb {top: 12px; left: 50% !important; right: unset !important; transform: translate(-50%, 0); width: 28px; height: 28px; background: url("../img/keyboard_double_arrow_up_white_48dp.svg") center center no-repeat !important; background-size: cover !important; animation: dragging3 1.4s linear infinite !important;} @keyframes dragging3 { 0% {transform: translate(-50%, 0); opacity: 0;} 100% {transform: translate(-50%, -8px); opacity: 1;} } #home #intro-workers .item-list .item .item-desc-box .idb-2 .qna-list {padding-right: 12px;} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna {} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna .q {} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna .q > em {} #home #intro-workers .item-list .item .item-desc-box .idb-2 .idb-qna .a {} #home #intro-workers .item-list .item.active .item-desc-box .idb-2 .btn-idb {} #home #intro-workers .item-list .item.active .item-desc-box .idb-2 .qna-list {} #home #intro-workers .item-list .item[data-scroll="in"] .item-desc-box .idb-1 {flex-direction: row; align-items: flex-start; justify-content: space-between; height: 100px; transform: unset; } #home #intro-workers .item-list .item[data-scroll="in"] .item-desc-box .idb-1 br {display: none;} #home #intro-workers .item-list .item[data-scroll="out"] .item-desc-box .idb-1 {} #home #intro-workers .item-list .item[data-scroll="in"] .item-desc-box .idb-2 {transform: unset; height: 140px;} #home #intro-workers .item-list .item[data-scroll="out"] .item-desc-box .idb-2 {} #home #intro-workers .item-list .item[data-scroll="in"].active .item-desc-box .idb-2 {width: 100%; height: 100%; padding-bottom: 100px !important; transform: unset; padding: 20px 12px;} #home #intro-workers .item-list .item[data-scroll="out"].active .item-desc-box .idb-2 {} /* 2n */ #home #intro-workers .item-list .item:nth-child(2n) .item-desc-box .idb-1 {border-radius: 24px;} #home #intro-workers .item-list .item:nth-child(2n) .item-desc-box .idb-2 {border-radius: 24px; padding: 0;} #home #intro-workers .item-list .item:nth-child(2n) .item-desc-box .idb-2 .btn-idb {} @keyframes dragging2 { 0% {transform: translateY(-50%) translateX(0); opacity: 0;} 100% {transform: translateY(-50%) translateX(12px); opacity: 1;} } #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="in"] .item-desc-box .idb-1 {transform: unset;} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="out"] .item-desc-box .idb-1 {} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="in"] .item-desc-box .idb-2 {transform: unset;} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="out"] .item-desc-box .idb-2 {} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="in"].active .item-desc-box .idb-2 {transform: unset; width: 100%;} #home #intro-workers .item-list .item:nth-child(2n)[data-scroll="out"].active .item-desc-box .idb-2 {} /* TODO FINISH */ /* TERMS */ #terms #terms-01 .float-news img {float: unset;} /* NEWS */ #board .board-wrapper .board-list .item {gap: 40px;} /* OVERVIEW */ #overview-01 > .container {flex-direction: column;} #overview-01 .floors .floor {width: 120px; height: 120px;} #overview-01 .step-wrapper {width: 100%; flex-direction: row; gap: 30px;} #overview-01 .step-wrapper .step[data-step="2"] {margin-top: 0;} #overview-01 .step-place-image {margin-top: 250px;} #overview-01 .step-place-image .place-image-item {width: 100%;} } @media screen and (max-width: 768px) { /* HEADER */ #header #gnb > ul {display: none;} #header #sub_menu {display: none;} /* 상단바 토글 */ #header .btn-toggle_gnb{display:flex;} /* SECTION */ #lnb .bg {height: 400px;} /* HOME */ #home #intro-items > .container {flex-direction: column; gap: 40px;} #home #intro-items .thumbs {width: 100%;} #home #intro-iframe {height: auto; padding-bottom: 120px;} #home #intro-iframe #layer-button-prev, #home #intro-iframe #layer-button-next {display: none;} #home #intro-iframe > .container {flex-direction: column; gap: 30px;} #home #intro-iframe .layer-summary {width: 100%; height: auto; padding: 40px;} #home #intro-iframe .layer-summary .btn-show_meta {margin-top: 30px;} #home #intro-iframe .layer-contents {width: 100%;} #home #intro-iframe .layer-item {padding: 20px 0; width: 100%;} #home #intro-iframe .layer-pagination {margin-top: 30px;} /* VISION */ #vision #vision-01 .vision-cells .cell.cell1 {width: 240px; height: 240px;} #vision #vision-01 .vision-cells .cell.cell2 {} #vision #vision-01 .vision-cells .cell.cell3 {width: 135px; height: 135px; left: 230px;} #vision #vision-01 .vision-cells .cell.cell4 {width: 110px; height: 110px; top: 250px;} #vision #vision-01 .vision-cells .cell.cell5 {width: 100px; height: 100px; top: 230px; left: 230px;} #vision #vision-01 h3 {font-size: 60px;} #vision #vision-01 .sub-txt {font-size: 22px;} #vision #vision-01 .thr-txt {font-size: 16px;} #vision #vision-banner {padding-left: 0 !important; padding-right: 0 !important;} #vision #vision-banner .banner-list .banner-item.bg01 {background: url('/theme/stgenbio/assets/img/bg-white_m.png') center center no-repeat; background-size: cover;} #vision #vision-banner .banner-list .banner-item.bg02 {background: url('/theme/stgenbio/assets/img/bg-white_m.png') center center no-repeat; background-size: cover;} #vision #vision-banner .banner-list .banner-item.bg03 {background: url('/theme/stgenbio/assets/img/bg-white_m.png') center center no-repeat; background-size: cover;} /* INTRO */ #intro #greeting {padding-left: 0 !important; padding-right: 0 !important;} #intro #greeting .contents > h5 {font-size: 24px;} #intro #ceo .top-desc {padding: 40px 0;} #intro #ceo .strategy {flex-direction: column; gap: 40px; margin-top: 0;} /* HISTORY */ #history #history-01 .history {flex-direction: column; gap: 40px;} /* MANUFACTURING */ #manufacturing #manufacturing-01 .tab-wrapper .tab {gap: 30px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item3 {width: 100%;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item4 {width: 100%;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item .desc {order: 1;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item .more-detail {order: 2; width: 100%; text-align: right; margin-top: 12px;} /* ANALYSIS */ #analysis #analysis-01 .main-txt {padding: 0 40px;} #analysis #analysis-01 .item-1.type2 {flex-direction: column; gap: 30px;} #analysis #analysis-01 .item-1.type2 .img {width: 100%;} #analysis #analysis-01 .item-1.type2 .desc {width: 100%;} #analysis #analysis-01 .item-1.type2 .desc > p {margin-top: 12px;} #analysis #analysis-01 .item-1.type2 .desc .btn-area {margin-top: 20px;} #analysis #analysis-01 .item-1.type2 .desc .btn-area > button {max-width: 160px;} #analysis #analysis-01 .item-1.type1 .img img {height: 320px;} #analysis #analysis-01 .item-1.type1 .desc {flex-direction: column; align-items: flex-start;} #analysis #analysis-01 .item-1.type1 .desc > h6 {text-align: left;} #analysis #analysis-01 .item-1.type1 .desc > p {margin: 12px 0 0 0;} #analysis #analysis-01 .item-1.type1 .desc .btn-area {width: 100%; flex-direction: row; margin-top: 20px;} #analysis #analysis-01 .item-1.type1 .desc .btn-area > button {max-width: 160px;} #analysis #analysis-01 .item-2 {margin-top: 80px; flex-direction: column;} /* CONTACT */ #contact #app-contact .inner-body {flex-direction: column;} #contact #app-contact .inner-title h2 {font-size: 40px;} #contact #app-contact .service-info {display: none;} #contact #app-contact .grid-form {width: 100%;} } /****************************** MOBILE ******************************/ @media screen and (max-width: 480px) { /****************************** COMMON ******************************/ .container {padding: 0 16px;} .pc {display: none;} .mobile {display: block;} /****************************** HEADER ******************************/ #header {height: 60px; left: 0; transform: unset;} #header .mobile #sidebar {width: 75%;} #header .logo img {width: 120px;} /****************************** FOOTER ******************************/ #footer {padding: 40px 16px 20px 16px;} #footer .info_details {display: flex; flex-direction: column;} #footer .info_details > span:not(:last-child):after {width: 0; height: 0; background-color: none;} #footer .corp_info {border-top: none; margin-top: 0; padding-top: 0;} #footer .fnb {display: none;} #footer .logo {margin-top: 0;} #footer .logo img {width: 240px;} #menu nav {width: 100%; padding: 100px 40px 10% 40px; top: unset; left: unset; transform: unset;} #menu nav .nav-list .nav-item .nav-tit > span {width: 240px; font-size: 32px;} #menu nav .nav-list .nav-item .nav-tit:hover > h5 {width: unset;} /* #menu nav .nav-list .nav-item.active .nav-tit > h5 {width: 190px;}*/ #menu .slogan {width: 100%; text-align: center; bottom: 10%;} /* LNB */ #lnb {padding-top: 60px;} #lnb .bg {height: 200px;} #lnb .bg .inner h2 {font-size: 32px; white-space: nowrap;} #lnb nav {position: relative; bottom: unset; left: unset; background-color: rgba(76, 76, 76, 1); border-top: 1px solid transparent;} #lnb nav > .container > div {border: none;} #lnb nav > .container > div:last-child {border: none;} #lnb nav > .container > div.home_link {display: none;} #lnb nav > .container > div.global_link {display: none;} /* Table */ .table-wrapper .table {overflow-x: scroll;} .table-wrapper .table .table-body .item-list .t-item .td span {padding: 0 12px;} .table-wrapper .table .table-body .item-list.ti-standard .t-item .td {font-size: 15px;} /* Section */ section:not(#lnb) {padding-left: 0 !important; padding-right: 0 !important;} section .sec-header h3 {font-size: 26px;} /****************************** INDIVIDUAL ******************************/ /* HOME */ #home #intro-mind {width: 100%; overflow-x: hidden;} #home #intro-mind > .container {flex-direction: column; gap: 20px; padding: 0 0 0 16px;} #home #main-banner .banner-list .banner-item .item-inner {right: 16px;} #home #main-banner .banner-list .banner-item .item-inner h4 {font-size: 36px;} #home #main-banner .banner-list .banner-item .item-inner p {font-size: 20px;} #main-banner .swiper-pagination-bullet {width: 100px; margin: 0 8px !important;} #home #main_banner_next {right: 16px;} #home #intro-mind .intro-img {display: none;} #home #intro-mind .thumbs {width: 100%;} #home #intro-mind .thumbs h3 strong:nth-child(2) {margin-left: 120px;} #home #intro-mind .thumbs .thumbs-list {width: 100%; overflow-x: hidden;} #home #intro-mind .thumbs .thumbs-list .thumbs-item .item-img img {height: 180px; object-fit: cover;} #home #intro-mind .thumbs .thumbs-list .thumbs-item.swiper-slide-next .item-img::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 1) 100%); background-size: cover;} #home #intro-workers .sticky-logo .txt p {font-size: 72px;} #home #intro-workers .sticky-logo .txt p em {font-size: 40px;} #home #intro-workers .sticky-logo .logo {top: 280px; width:80px; right:0px;} #home #intro-workers .sticky-logo .spinner-logo {width: 80px; height: 80px;} #home #intro-workers .sticky-logo .spinner-logo::after {width: 40px; height: 40px;} /*07-13*/ #home #main-banner .banner-list .banner-item .item-inner {bottom: 20% !important; left: 18px !important; right: 18px !important; text-align: left;} #home #main-banner .banner-list .banner-item .item-inner h4 {font-size: 30px;} #home #main-banner .banner-list .banner-item .item-inner p {font-size: 14px;} /*07-13*/ #home #intro-workers .item-list {gap: 80px;} #home #intro-workers .item-list .item {justify-content: center;} #home #intro-workers .item-list .item:nth-child(2n) {justify-content: center;} #home #intro-workers .item-list .item .item-img {width: calc(100% - 30px); height: 480px;} /* TODO UPDATE 2022-06-24 (5)*/ #home #intro-workers .item-list .item .item-text marquee {font-size: 15px;} /* TODO FINISH */ #home #intro-workers .item-list .item .item-text p {font-size: 15px;} #items-slide {width: 100%;} #items-slide .swiper-pagination {flex-wrap: wrap; gap: 20px 12px; padding: 0 20px;} #items-slide .swiper-pagination-bullet {flex: unset; width: calc((100% / 4) - 9px); margin: 0 !important;} #items-slide .swiper-pagination-bullet em {font-size: 22px;} #home #intro-items {padding: 80px 0 40px 0;} #home #intro-items .thumbs {height: 240px;} #home #intro-items .item-list {width: 100%; padding-top: 80px;} #home #intro-items .item-list .item {padding: 20px;} #home #intro-items .item-list .item a {margin: 20px 0 12px 0;} #home #intro-iframe .layer-summary {padding: 30px;} #home #intro-iframe .layer-summary h6 {font-size: 32px;} #home #intro-iframe .layer-summary h5 {font-size: 48px;} #home #intro-iframe .layer-summary .btn-show_meta {margin-top: 20px; font-size: 24px;} #home #intro-iframe .layer-item {padding: 0;} #home #intro-iframe .layer-item .layer {height: 280px;} #home #intro-iframe .layer-pagination {padding: 0 30px;} #home #intro-iframe .layer-pagination button#layer-pagination-prev::before {width: 48px; height: 48px; left: -30px;} #home #intro-iframe .layer-pagination button#layer-pagination-next::before {width: 48px; height: 48px; right: -30px;} /* VISION */ #vision #vision-01 {padding: 200px 0 80px 0;} #vision #vision-01 .vision-cells .cell.cell1 {width: 180px; height: 180px; top: 30px; font-size: 14px;} #vision #vision-01 .vision-cells .cell.cell2 {width: 85px; height: 85px; top: -10px; font-size: 13px;} #vision #vision-01 .vision-cells .cell.cell3 {width: 110px; height: 110px; top: 0; left: 195px; font-size: 12px;} #vision #vision-01 .vision-cells .cell.cell4 {width: 90px; height: 90px; top: 170px; font-size: 12px;} #vision #vision-01 .vision-cells .cell.cell5 {top: 160px; left: 180px; font-size: 12px;} #vision #vision-01 h3 {padding-top: 180px; font-size: 16px;} #vision #vision-01 h3[data-scroll="in"]::after {width: 85px;} #vision #vision-01 .sub-txt {font-size: 15px; margin-top: 60px;} #vision #vision-01 .sub-txt br {display:none;} #vision #vision-01 .thr-txt {margin-top: 24px;} #vision-banner .swiper-pagination {display: flex; flex-wrap: wrap; gap: 20px 12px; padding: 0 20px; left: 0;} #vision-banner .swiper-pagination-bullet {flex: unset; width: calc((100% / 3) - 8px); margin: 0 !important;} #vision #vision-banner .banner-list .banner-item {height: 700px;} #vision #vision-banner .banner-list .banner-item .item-inner {left: 0; width: 100%; padding: 50px 40px 0 16px;} #vision #vision-banner .banner-list .banner-item .item-inner h4 {font-size: 24px;} #vision #vision-banner .banner-list .banner-item .item-inner h3 {font-size: 24px;} #vision #vision-banner .banner-list .banner-item .item-inner br {display:none;} #vision #vision-banner .banner-list .banner-item .item-inner p {font-size: 16px; margin-top: 24px;} #vision #vision-banner .pc_only {display:none;} #vision-banner .swiper-pagination-bullet em {font-size: 16px; font-weight: 500; letter-spacing: -0.38px; color: #000;} /* INTRO */ #intro #greeting {background: url("/theme/stgenbio/assets/img/bg-ceo_wide_l.png") center center no-repeat; background-size: cover; width: 100%; height: 600px;} #intro #greeting .image {display: none;} #intro #greeting .contents {top: 120px; right: 20px; transform: unset;} /* CEO */ #intro #ceo .top-desc > h6 {font-size: 24px;} #intro #ceo .top-desc > p {font-size: 18px; margin-top: 24px;} #intro #ceo .strategy .img {width: 100%;} #intro #ceo .strategy .desc > h6 {font-size: 24px;} #intro #ceo .strategy .desc > p {font-size: 18px; margin-top: 24px;} /* HISTORY */ #history #history-01 {padding: 120px 0;} #history #history-01 .history .img {width: 240px; height: 240px;} #history #history-01 .history .txt {font-size: 18px; padding: 0 20px;} #history #intro-history h3 {width: 100%; justify-content: center; flex-direction: column;} #history #intro-history .thumbs #history-slide {padding-bottom: 100px;} /* PEOPLES */ #peoples #intro-workers .sticky-logo .txt p {font-size: 72px;} #peoples #intro-workers .sticky-logo .txt p em {font-size: 40px;} #peoples #intro-workers .sticky-logo .logo {top: 280px;} #peoples #intro-workers .sticky-logo .spinner-logo {width: 120px; height: 120px;} #peoples #intro-workers .sticky-logo .spinner-logo::after {width: 60px; height: 60px;} #peoples #intro-workers .item-list {gap: 80px;} #peoples #intro-workers .item-list .item {width: 100%; justify-content: center;} #peoples #intro-workers .item-list .item:nth-child(2n) {justify-content: center;} #peoples #intro-workers .item-list .item .item-img {width: calc(100% - 30px); height: 480px;} #peoples #intro-workers .item-list .item .item-text p {font-size: 15px;} /* PLACE */ #place #intro-place .tit h4 {font-size: 32px;} #place #intro-place .tit img {max-width: 180px;} #place #intro-place .container {padding: 0 !important;} #place #intro-place .place-list .place-item {flex-shrink: 0; flex: unset; width: calc(100% / 3);} #place #intro-place .place-list .place-item .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 12px;} #place #intro-place .place-list .place-item .item-name {display: inline-flex; justify-content: center; align-items: center; height: 100px; font-size: 24px; text-align: center;} /* PLANT OVERVIEW */ #overview-01 .step-wrapper {flex-direction: column;} #overview-01 .step-wrapper .step[data-step="2"] {margin-top: 300px;} #overview-01 .step-place-image {margin-top: 40px;} /* PROCESS */ #process #process-01 > .container {padding: 0 !important;} #process #process-01 .logo {right: 16px; top: 40px;} #process #process-01 .logo img {width: 120px;} #process #process-01 .process-list {right: 16px;} #process #process-01 .process-list > h4 {font-size: 20px;} #process #process-01 .process-list ul {gap: 18px; margin-top: 24px;} #process #process-01 .process-list ul li button {width: 120px; height: 46px; font-size: 16px;} #process #process-01 .bg-list .bg .tab-inner {padding-top: 180px;} #process #process-01 .bg-list .bg .tab-inner h6 {font-size: 32px;} /* MANUFACTURING */ #manufacturing #manufacturing-01 {overflow: hidden;} #manufacturing #manufacturing-01 .tab-header {position: relative; left: unset; width: 100%;} #manufacturing #manufacturing-01 .tab-header ul {gap: 12px;} #manufacturing #manufacturing-01 .tab-header ul li {width: calc(100% / 3); flex: unset;} #manufacturing #manufacturing-01 .tab-header ul li button span {font-size: 18px;} #manufacturing #manufacturing-01 .tab-header ul li button.active p {top: 72px;} /* 2022-06-29 수정 */ #manufacturing #manufacturing-01 .tab-wrapper {margin-top: 200px;} #manufacturing #manufacturing-01 .tab-header ul li button .btn-toggle_view {position: absolute; top: 80px;} /* 2022-06-29 수정 끝 */ #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure {width: 300px; height: 340px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item1 {width: 100%;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item1 figure {margin-top: 0;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 {width: 100%; justify-content: flex-end; margin-right: 26px;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 figure {margin-top: 0;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 figure img {order: 2;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 figure figcaption {order: 1; margin: 0 0 0 4px;} /* #manufacturing #manufacturing-01 .tab-wrapper .tab .item2 figure figcaption {order: 1; margin: 0 0 0 4px; text-align: left; transform: rotate(0); writing-mode: vertical-rl;} */ #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .bef-box p {font-size: 14px; font-weight: 400; color: #fff; margin-top: 8px; opacity: 0; transform: translateY(30px); transition: opacity 0.35s 0.75s, transform 0.75s 0.75s;} #manufacturing #manufacturing-01 .tab-wrapper .tab .item figure .bef-box h6 {font-size: 30px; margin-bottom:20px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(30px); transition: opacity 0.35s 0.1s, transform 0.75s 0.1s;} /* ANALYSIS */ #analysis #analysis-01 {padding: 80px 0 120px 0;} #analysis #analysis-01 .main-txt {padding: 0;} #analysis #analysis-01 .analysis {margin-top: 40px;} #analysis #analysis-01 .item-1.type2 .img img {height: 280px;} #analysis #analysis-01 .item-1.type2 .desc > h6 {font-size: 36px;} #analysis #analysis-01 .item-1.type2 .desc > p {font-size: 17px;} #analysis #analysis-01 .item-3::before {padding: 8px 24px;} #analysis #analysis-01 .item-3 {flex-direction: column;} #analysis #analysis-01 .item-2 {gap: 30px;} #analysis #analysis-01 .item-3 .img-item {width: 100%;} #analysis #analysis-01 .item-2 .img {gap: 12px;} #analysis #analysis-01 .item-2 .img img:nth-child(1) {width: calc(50% - 6px); height: auto;} #analysis #analysis-01 .item-2 .img img:nth-child(2) {width: calc(50% - 6px); height: auto;} #analysis #analysis-01 .item-1.type1 .img img {height: 280px;} /* TERMS */ #terms #terms-01 {padding: 80px 0;} #terms #terms-01 .float-news img {width: 100%; height: auto; margin: 0;} #terms #terms-01 .float-news h4 {font-size: 24px; margin-top: 12px;} #terms #terms-01 .float-news p {font-size: 18px;} /* CONTACT */ #contact #app-contact {padding: 80px 0 120px 0;} #contact #app-contact .inner-title h2 {font-size: 32px;} #contact #app-contact .inner-title {margin-bottom: 60px;} #contact #app-contact .item-list_4 {gap: 12px;} #contact #app-contact .item-list_4 > div {width: calc((100% / 3) - 8px);} #contact #app-contact .grid-form .form-group .group-header h3 {font-size: 24px;} /* EMPLOY */ #detail h6 {margin-bottom: 8px;} /* NEWS */ #board .board-wrapper .board-list {margin-top: 20px; gap: 20px;} #board .board-wrapper .board-list .item {flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #eee;} #board .board-wrapper .board-list .item .content .desc {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 8px;} #board .board-wrapper .board-list .item .date .date-year {font-size: 20px;} #board .board-wrapper .board-list .item .date .date-monthday {font-size: 24px;} #board .board-wrapper .board-list .item .content .title {font-size: 22px;} } /* 2022-07-02 추가 : s */ .pie-wrapper {position: relative; margin-top: 40px; width: 320px; height: 320px; border-radius: 50%; overflow: hidden; box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2);} #pie-menu {transform: scale(0.2); transition: 0.3s ease-out all; list-style-type: none; margin: 0; padding: 0; position: relative; display: inline-block; width: 100%; height: 100%;} #pie-menu li {position: absolute; width: 160px; height: 160px; -webkit-transform-origin: 100% 100%; overflow: hidden; display: block; background: #f77b88;} #pie-menu li a {color: #fcd1d5; display: block; width: 320px; height: 320px; border-radius: 50%; text-align: center; background: #F6717F; font-size: 18px;} #pie-menu li a:hover {background: #f45969; color: white;} #pie-menu li a span {display: inline-block; padding-top: 12px;} #pie-menu li:nth-child(odd) a {background: #f77b88;} #pie-menu li:nth-child(1) {transform: rotate(51.4285714286deg) skew(38.5714285714deg);} #pie-menu li:nth-child(1) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} #pie-menu li:nth-child(2) {transform: rotate(102.8571428571deg) skew(38.5714285714deg);} #pie-menu li:nth-child(2) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} #pie-menu li:nth-child(3) {transform: rotate(154.2857142857deg) skew(38.5714285714deg);} #pie-menu li:nth-child(3) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} #pie-menu li:nth-child(4) {transform: rotate(205.7142857143deg) skew(38.5714285714deg);} #pie-menu li:nth-child(4) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} #pie-menu li:nth-child(5) {transform: rotate(257.1428571429deg) skew(38.5714285714deg);} #pie-menu li:nth-child(5) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} #pie-menu li:nth-child(6) {transform: rotate(308.5714285714deg) skew(38.5714285714deg);} #pie-menu li:nth-child(6) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} #pie-menu li:nth-child(7) {transform: rotate(360deg) skew(38.5714285714deg);} #pie-menu li:nth-child(7) a {transform: skew(-38.5714285714deg) rotate(-65.4545454545deg);} .pie_title {opacity: 1; width: 80px; height: 80px; background: white; border-radius: 50%; position: absolute; left: calc(50%); top: calc(50%); display: block; transform: scale(1) rotate(0) translate(-50%, -50%); transition: 0.3s ease-in-out all; -webkit-transform-origin: 50% 50%; z-index: 5;} .pie_title a {background: none; display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #ccc; cursor: default;} #pie-menu {animation: rotatePie 24s infinite linear;} @keyframes rotatePie { 0% {transform: rotate(0);} 50% {transform: rotate(180deg);} 100% {transform: rotate(360deg);} } #pie-menu li:nth-child(1) a { background-color: blue; } #quality-1 {padding: 0 0 120px 0;} #quality-1 .quality {} #quality-1 .quality .qitem:not(:last-child) {margin-bottom: 80px;} #quality-1 .quality .qitem > h2 {font-size: 40px; color: #01abcd; font-weight: 700; margin-bottom: 40px;} #quality-1 .quality .qitem > h3 {font-size: 28px; color: #01abcd; font-weight: 500; margin-bottom: 8px;} #quality-1 .quality .qitem > p {font-size: 18px; color: #000; font-weight: 400;} #quality-1 .quality .qitem .img {display: inline-block; margin-top: 20px;} #quality-1 .quality .qitem .img > img:nth-child(1) {display: block; width: 100%;} #quality-1 .quality .qitem .img > img:nth-child(2) {display: none; width: 100%;} #quality-1 .quality .qitem .desc {margin-top: 80px; max-width: 840px; font-size:18px; font-weight: 400;} #quality-1 .quality .qitem .pyramid {} #quality-1 .quality .qitem .pyramid {} .pyramid-container {text-align: center; margin-top: 80px;} .pyramid-item {position: relative; border-left: 40px solid transparent; border-right: 40px solid transparent; height: 0; margin: 0 auto; border-bottom: 80px solid white; font-size: 18px; color: #fff; transition: transform 0.5s; cursor: pointer;} #pyramid-1 {border-bottom: 80px solid #4795c3; width: 50px;} #pyramid-2 {border-bottom: 80px solid #ecc64b; width: 160px;} #pyramid-3 {border-bottom: 80px solid #0b9ea6; width: 240px;} #pyramid-4 {border-bottom: 80px solid #fe6667; width: 320px;} .pyramid-item .pi-txt {position: absolute; top: 42px; left: 50%; transform: translateX(-50%) scale(1); display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: transform 0.5s;} .pyramid-item .pi-txt::after {content: ""; position: absolute; top: -2px; left: calc(100% + 25px); width: 0; height: 1px; background-color: #ddd; transition: width 0.5s;} .pyramid-item .level {position: absolute; top: 28px; left: calc(100% + 100px); white-space: nowrap; font-size: 17px; color: #000; opacity: 0; transition: opacity 0.5s 0.5s;} .pyramid-item.active {transform: scale(1.12); z-index: 10;} .pyramid-item.active .pi-txt::after {width: 70px;} .pyramid-item.active .level {opacity: 1;} #quality-2 {width: 100%;} #quality-2 h2 {font-size: 40px; color: #01abcd; font-weight: 700; margin-bottom: 40px;} #quality-2 .q2-head {display: flex; justify-content: space-between; align-items: center; gap: 30px;} #quality-2 .q2-head .item {position: relative; padding: 24px 40px; border: 1px solid #ddd; border-radius: 12px; text-align: center; transition: box-shadow 0.35s;} #quality-2 .q2-head .item:hover {box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.12);} #quality-2 .q2-head .item .num {position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; background-color: transparent; border: 1px solid transparent; font-size: 24px; font-weight: 700; color: #0044cf;} #quality-2 .q2-head .item .img {} #quality-2 .q2-head .item .img > img {width: 100%;} #quality-2 .q2-head .item .txt {display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin-top: 12px;} #quality-2 .q2-head .item .txt > b {color: #01abcd; font-weight: 900; font-size: 24px; margin-right: 8px;} #quality-2 .q2-body {margin-top: 150px;} #quality-2 .q2-body .qb-item {margin-bottom: 150px;} #quality-2 .q2-body .qb-item .qi-slider {display: flex;} #quality-2 .q2-body .qb-item .qi-slider .slide {} #quality-2 .q2-body .qb-item .qi-slider .slide > img {} #quality-2 .swiper-button-prev, #quality-2 .swiper-button-next {top: 50%; left: unset; width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 2px 2px 8px rgb(0 0 0 / 20%);} #quality-2 .swiper-button-prev::after, #quality-2 .swiper-button-next::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px;} #quality-2 .swiper-button-prev {} #quality-2 .swiper-button-prev::after {background: url("../img/arrow_back_ios_new_black_48dp.svg"); background-size: cover;} #quality-2 .swiper-button-next {} #quality-2 .swiper-button-next::after {background: url("../img/arrow_forward_ios_black_48dp.svg"); background-size: cover;} #quality-2 .swiper-scrollbar-drag {background: #1c6aba;} #quality-2 .q2-body .qb-item .qb-txt {padding: 0 40px; margin-top: 20px;} #quality-2 .q2-body .qb-item .qb-txt .qb-tit {font-size: 28px; color: #01abcd; font-weight: 700;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc {display: flex; align-items: flex-start; gap: 40px; margin-top: 30px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdt {font-size: 32px; color: #01abcd; font-weight: 500;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdd {display: flex; flex-direction: column; gap: 6px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdd > p {position: relative; font-size: 17px; color: #000; font-weight: 400; padding-left: 8px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdd > p::before {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 4px; background-color: #000; border-radius: 50%;} #quality-2 .q2-body .qb-infodesc {max-width: 840px; font-size: 18px; color: #000; font-weight: 400;} @media screen and (max-width: 480px) { #employ #s05 .tab-cont .tab-header .btn-tab {padding: 20px 30px;} #quality-1 .quality .qitem .img > img:nth-child(1) {display: none;} #quality-1 .quality .qitem .img > img:nth-child(2) {display: block;} #quality-1 .quality .qitem > h2 {font-size: 36px;} #quality-1 .quality .qitem > h3 {font-size: 24px;} #quality-1 .quality .qitem > p {font-size: 16px;} .pyramid-container {width: 200px;} .pyramid-item {border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid white; font-size: 14px;} #pyramid-1 {border-bottom: 50px solid #4795c3; width: 50px;} #pyramid-2 {border-bottom: 50px solid #ecc64b; width: 100px;} #pyramid-3 {border-bottom: 50px solid #0b9ea6; width: 150px;} #pyramid-4 {border-bottom: 50px solid #fe6667; width: 200px;} .pyramid-item .pi-txt {top: 26px;} .pyramid-item .level {top: 14px; font-size: 15px;} #quality-2 h2 {font-size: 36px;} #quality-2 .q2-head {gap: 20px; flex-direction: column;} #quality-2 .q2-head .item {display: flex; align-items: center; gap: 20px; width: calc(100%); padding: 12px 0; border-width: 0 0 1px 0; border-radius: 0;} #quality-2 .q2-head .item .img {width: 180px; flex-shrink: 0;} #quality-2 .q2-head .item .txt {font-size: 20px; align-items: flex-start; justify-content: flex-start;} #quality-2 .q2-head .item .txt > b {font-size: 22px;} #quality-2 .q2-body .qb-item .qb-txt {padding: 0 20px;} #quality-2 .q2-body .qb-item .qb-txt .qb-tit {font-size: 22px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc {flex-direction: column; gap: 20px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdt {font-size: 20px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdd > p {font-size: 16px;} #quality-2 .q2-body .qb-item .qb-txt .qb-desc .qbdd > p::before {top: 10px; transform: unset;} #quality-2 .q2-body .qb-infodesc {font-size: 16px;} } /* 2022-07-02 추가 : e */ /* 2022-07-08 추가 :: s */ #overview-01 > .container {overflow: hidden;} #overview-01 .step-place-image .place-image-wrapper {margin-top: 150px; transform: scale(1);} #overview-01 .place-image-description {padding: 60px 0 100px 0;} #overview-01 .place-image-description .desc {display: flex; flex-wrap: wrap; gap: 40px; font-size: 18px; font-weight: 400; color: #000;} #overview-01 .place-image-description .desc img {flex: 1; width: calc(100% / 2); object-fit: cover;} #overview-01 .place-image-item {display: none; position: relative; width: 700px;} #overview-01 .place-image-item.active {display: block;} /* 2022-07-08 추가 :: e */ /* 2022-07-11 추가 :: s*/ #employ #quality .tab-header {z-index: 5; margin-bottom: 80px;} #employ #quality .tab-header ul {display: flex; gap: 20px; width: 500px; max-width: 100%;} #employ #quality .tab-header ul li {flex-shrink: 0;} #employ #quality .tab-header ul li button {width: 100%; font-size: 30px; font-weight: 700;} #employ #quality .tab-header ul li button > span {position: relative; display: inline-block; width: 100%; text-align: center; padding: 18px 24px; font-size: 36px; font-weight: 700;} #employ #quality .tab-header ul li button > span::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: rgba(0, 0, 0, 0.12); transition: width 0.35s;} #employ #quality .tab-header ul li button > span::after {content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: rgba(255, 171, 157, 1); transition: width 0.35s;} #employ #quality .tab-header ul li button.active span::before {width: 0;} #employ #quality .tab-header ul li button.active span::after {width: 100%;} #employ #quality .tab-header ul li button > p {display: none; font-size: 18px; font-weight: 400; text-align: left;} #employ #quality .tab-header ul li button.active {} #employ #quality .tab-header ul li button.active p {display: block; position: absolute; top: 80px; left: 0;} #employ #quality .tab-header ul li button .btn-toggle_view {position: relative; display: inline-flex; justify-content: space-between; align-items: center; min-width: 180px; background-color: transparent; border-radius: 24px; padding: 12px 16px; margin-top: 24px; font-size: 16px; font-weight: 500; overflow: hidden;} #employ #quality .tab-header ul li button .btn-toggle_view::before {content: ""; position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; background-color: #fff; z-index: -1;} #employ #quality .tab-header ul li button.active .btn-toggle_view::after {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(255, 171, 157, 1); transition: width 0.35s; animation: buttonfull 5s linear forwards; z-index: -1; transition: background-color 0.35s;} #employ #quality .tab-header ul li button.active .btn-toggle_view.animation-paused::after {animation-play-state: paused;} #employ #quality .tab-header ul li button.active .btn-toggle_view:hover::after {background-color: rgba(255, 171, 157, 0.5);} @keyframes buttonfull { 0% {width: 0;} 100% {width: 100%;} } #employ #quality .tab-header ul li button.active_bef .btn-toggle_view::after {content: ""; width: 100%; animation: unset;} #employ #quality .tab-cont .tab-body .tab {display: none;} #employ #quality .tab-cont .tab-body .tab.active {display: flex;} @media screen and (max-width: 480px) { #employ #quality .tab-header ul {gap: 12px;} #employ #quality .tab-header ul li {width: calc(50% - 6px);} #employ #quality .tab-header ul li button > span {padding: 12px 18px; font-size: 24px;} } /* 2022-07-11 추가 :: e*/ .tab.tab01{display:none;} .tab.tab01.active{display:block;} .tab.tab02{display:none;} .tab.tab02.active{display:block;} /************************ /* card /************************/ .card_section{ margin-top:90px; } .card{ height:200px; } .card_section .card{ border-radius: 4px; background: #fff; box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05); transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12); padding: 14px 80px 18px 36px; cursor: pointer; } .card_section .card:hover{ transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); } .card_section .card h3{ font-weight: 600; } .card_section .card img{ position: absolute; top: 20px; right: 15px; max-height: 200px; } .card_section .card-1{ background-image: url(../img/KTH_8381-1.png); background-repeat: no-repeat; background-size: cover; background-position: center; color:white; /*background-size: 80px;*/ } .card_section .card-2{ background-image: url(../img/KTH_8088-1.png); background-repeat: no-repeat; background-size: cover; background-position: center; color:white; /*background-size: 80px;*/ } .card_section .card-3{ background-image: url(../img/ms-3-1.png); background-repeat: no-repeat; background-size: cover; background-position: center; color:white; } .card_section .card-4{ background-image: url(../img/ms-4-1.png); background-repeat: no-repeat; background-size: cover; color:white; background-position: center; } .card_section h3{ font-size: 40px; margin-top:10px; } .card_section .card p{ font-size: 20px; position: absolute; bottom: 20px; } .card_section h2{ display: inline-block; font-size: 56px; background-image: linear-gradient(120deg, #01abcd 35%, #01abcd 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom:32px; } .card_section h2 .sm_type{ font-size:34px; } .card_section .count_num1, .count_num2, .count_num3, .count_num4{ display:inline; } @media(max-width: 990px){ .card_section .card{ margin: 20px; } } @media(max-width: 450px){ .card_section h2{margin-bottom:20px;} .card_section h3{font-size: 24px; margin-top: 5px;} .card_section .card p{font-size: 16px; bottom:17px;} .card{height:130px;} .logo_ct img{width:100%;margin-left:15px;} } /******************** /* thumnail_analysis /********************/ .thumbnail { position: relative; /*width: 400px;*/ border-radius: 6%; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.8); overflow: hidden; cursor: pointer; transition: box-shadow 0.35s ease; /* Hover transition */ } .thumbnail:before { content: ""; display: block; width: 100%; padding-bottom: 100%; } .thumbnail:hover { box-shadow: 0 20px 15px -8px rgba(0, 0, 0, 0.8); } .thumbnail__container { display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .thumbnail__img { flex: 4 0 auto; background-position: center; background-size: cover; transform: scale(1.2); transition: transform 0.35s ease; /* Hover transition */ } .thumbnail:hover .thumbnail__img { transform: scale(1); } .thumbnail__img:before, .thumbnail__img:after { position: absolute; } .thumbnail__img:before { top: 50%; left: 50%; z-index: 10; color: #F8F8F8; font-family: "Open Sans", sans-serif; font-size: 17px; font-weight: 300; letter-spacing: 5px; line-height: 2; text-transform: uppercase; background-image: linear-gradient(to right, #F8F8F8 0%, #F8F8F8 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 45% 3%; transform: translate(-50%, -50%); transition: opacity 0.35s linear, transform 0.35s ease; /* Hover transition */ } .card_1st:before {content:"Instrument analysis"; text-align: center;} .card_2nd:before {content:"Sample / Stability"; text-align: center;} .card_3rd:before {content:"Microbial / Bioassay"; text-align: center;} .thumbnail:hover .thumbnail__img:before { opacity: 0; transform: translate(-50%, -500%) scale(0.5); } .thumbnail__img:after { content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; transition: opacity 0.35s linear; /* Hover transition */ } .thumbnail:hover .thumbnail__img:after { opacity: 0; } .thumbnail__content { display: flex; align-items: center; justify-content: center; flex: 0 0 0; background-color: #F8F8F8; overflow: hidden; transition: flex-grow 0.35s ease; /* Hover transition */ } .thumbnail:hover .thumbnail__content { flex-grow: 1; } .thumbnail__caption { color: #ABABAB; font-family: "Open Sans", sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5; overflow: hidden; opacity: 0; transform: scale(0.5) translateY(100%); transition: opacity 0.35s linear, transform 0.35s ease; /* Hover transition */ } .thumbnail:hover .thumbnail__caption { transform: scale(1); opacity: 1; } .quality_sub_tx, .on_sm{display:none;} .analysis_1st {margin-bottom:140px;} .card_section .sub_des{ display: inline-block; font-size: 20px; background-image: linear-gradient(120deg, #01abcd 35%, #01abcd 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 55px; line-height:2; margin-top:12px; } .logo_ct {margin-bottom:20px;} .logo_ct img{width:100%} .logo_block img{ overflow: hidden; display: flex; align-items: center; justify-content: center; } #manufacturing-01 .regulatory{ margin-top : 100px; margin-bottom : 100px; } @media(max-width:700px){ .quality_sub_tx{display:block;} .on_sm{display:block;} .card_1st:before {content:""} .card_2nd:before {content:""} .card_3rd:before {content:""} .thumbnail__content,.thumbnail__caption{display:none;} } @media(max-width:800px){ .thumbnail__img:before{font-size:14px;} } @media(max-width:850px){ .card_section h3 {font-size:27px;} .thumbnail__img:before{font-size:12px;} .thumbnail{margin:10px 10px 10px 0;} .mo_site{position:absolute; bottom:10px; width: 90%;} .mo_site .end-tx{text-align:right; margin-top:10px;} .analysis_1st .mo_site h3{font-size:15px !important;} .analysis_1st .mo_site h3:after {content:"";display:block;border-bottom:2px solid #00abcd;} .card_section .sub_des{margin-left:25px; font-size:14px;} } /*report*/ .sec-inner h4{ font-size: 36px; font-weight: 500; line-height: 1.34; } .sec-inner h4 em{ color: #0044CF; font-weight: 500; } #s08{padding:80px 0 80px 0} .shadow li{background-color:#f6f6f6;} .multi-button .multi-button { background-color: white; border: 1px solid white; border-radius: 14px; padding: 7px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 15px 0 rgba(0, 0, 0, 0.1); place-items: center; } .multi-button #copy { background-color: rgb(1,154,195); border: 1px solid rgb(1,154,195); } .multi-button .button { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.09), 0 6px 15px 0 rgba(0, 0, 0, 0.09); padding: 10px 17px 10px 17px; font: 15px Ubuntu; color: white; border-radius: 7px; } .multi-button .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .multi-button .button span:after { position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .multi-button .button:hover span { padding-right: 25px; } .multi-button .button:hover span:after { opacity: 1; right: 0; } .multi-button #copy span:after { font-family: FontAwesome; content: "\f0c5"; } .multi-button{ place-items:center: display:grid; margin-top:10px; }