You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

312 lines
5.2 KiB
CSS

2 years ago
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
2 years ago
@charset "UTF-8";
2 years ago
html {
font-feature-settings: "ss01", "ss02", "ss08";
scroll-behavior: smooth !important;
}
body {
color: #212121;
letter-spacing: -1px;
font-family: "Noto Sans KR", sans-serif !important;
overflow-y: auto;
overflow-x: hidden;
}
a {
color: #212121 !important;
text-decoration: none !important;
}
.jost {
font-family: "Jost", serif !important;
}
.k-input {
font-weight: 300;
font-size: 18px;
line-height: 140%;
2 years ago
padding: 10px;
2 years ago
border: 0;
border: 1px solid #bbb;
2 years ago
width: 100%;
margin-bottom: 25px;
2 years ago
}
.k-input:focus, .k-input:focus-visible {
outline: none;
}
2 years ago
.black-submit-button {
font-size: 14px;
color: #fff;
2 years ago
background: #212121;
border-radius: 100px;
padding: 11px 20px;
cursor: pointer;
display: inline-block;
2 years ago
border: 0;
2 years ago
}
2 years ago
.container {
max-width: 1140px;
2 years ago
}
2 years ago
.logo {
max-width: 177px;
}
.solar-header {
2 years ago
padding-top: 0px;
2 years ago
}
2 years ago
header {
position: fixed;
width: 100%;
border-top: 5px solid #24469B;
background-color: white;
2 years ago
z-index: 99;
2 years ago
}
2 years ago
.open-sidebar {
overflow: hidden;
}
.sidebar {
height: 100vh;
width: 100%;
background: white;
position: absolute;
left: -100%;
}
.sidebar.show {
left: 0;
2 years ago
transition: all 0.5s ease;
2 years ago
}
.sidebar .sidebar-item {
padding-left: 15px;
}
.sidebar .sidebar-item.active {
background: #f7f7f7;
}
.inquiry-link.active, .portfolio-link.active, .introduce-link.active {
color: #24469B !important;
font-weight: 700;
}
2 years ago
.intro-image-box {
background: url("/images/middle-banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
2 years ago
text-align: center;
margin-bottom: 30px;
min-height: 280px;
2 years ago
}
2 years ago
.intro-text-box {
text-align: center;
2 years ago
}
2 years ago
.intro-text-box .text-image img {
max-width: 270px;
2 years ago
}
2 years ago
.intro-text-box .text-desc {
font-size: 16px;
line-height: 130%;
letter-spacing: -0.5px;
2 years ago
}
2 years ago
.ai-hr {
margin: 60px 0px;
border-color: #E8E8E8;
2 years ago
}
2 years ago
.inquiry-message-box {
padding: 40px 0px 50px;
2 years ago
font-size: 16px;
line-height: 130%;
letter-spacing: -0.5px;
2 years ago
}
2 years ago
.inquiry-box {
margin-bottom: 20px;
2 years ago
width: 100%;
}
2 years ago
.inquiry-box .inquiry-box-title {
font-size: 24px;
2 years ago
font-weight: 700;
2 years ago
margin-bottom: 10px;
2 years ago
}
2 years ago
.inquiry-box .inquiry-box-desc {
font-size: 18px;
2 years ago
}
2 years ago
.main-introduce::before, .main-inquiry-container::before {
content: "";
display: block;
height: 80px; /* fixed header 높이 만큼 부여 or 브라우저 상단에서 띄워놓기 원하는 높이 */
margin-top: -80px; /* 위에서 설정한 높이와 동일한 만큼을 음수로 제공 */
visibility: hidden;
}
2 years ago
.main-inquiry {
2 years ago
padding-bottom: 40px;
}
2 years ago
.main-portfolio {
2 years ago
padding: 120px 0px 40px;
2 years ago
}
.portfolio {
cursor: pointer;
position: relative;
}
.portfolio:hover .portfolio-img img {
transform: scale(1.2);
}
.portfolio:hover .portfolio-inner {
opacity: 1;
transition: all 0.7s ease-in-out;
}
.middle-btn-box {
margin-top: 40px;
}
.middle-btn {
padding: 10px 25px;
border: 1px solid #381E1F;
border-radius: 100px;
margin: 0px 8px;
display: inline-flex;
}
.middle-btn .middle-btn-logo {
width: 34px;
}
.middle-btn .btn-text-eng {
font-size: 13px;
line-height: 100%;
}
.middle-btn .btn-text-kor {
font-size: 19px;
line-height: 100%;
font-weight: 500;
}
.btn-pinterest {
border-color: #CE0F19 !important;
color: #CE0F19 !important;
}
.btn-talk {
border-color: #3CAE43 !important;
color: #3CAE43 !important;
}
.btn-kakao {
border-color: #381E1F !important;
color: #381E1F !important;
}
2 years ago
.portfolio-inner {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 14%;
}
.portfolio-inner .portfolio-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
padding: 0px 20px;
}
.portfolio-inner .portfolio-box .portfolio-title {
width: 100%;
color: white;
font-size: 16px;
line-height: 130%;
letter-spacing: -0.5px;
}
.portfolio-inner .portfolio-box .portfolio-hr {
width: 18px;
height: 1px;
background: #E8E8E8;
2 years ago
margin: 10px auto;
}
.portfolio-inner .portfolio-box .portfolio-desc {
font-size: 12px;
color: #999;
letter-spacing: -0.5px;
line-height: 130%;
}
.portfolio-img {
width: 100%;
padding-bottom: 100%;
position: relative;
display: block;
overflow: hidden;
}
.portfolio-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s;
}
.more-button {
font-size: 14px;
color: #212121;
border: 1px solid #c0c0c0;
border-radius: 100px;
padding: 11px 20px;
cursor: pointer;
display: inline-block;
margin-top: 20px;
}
.footer-logo {
max-width: 120px;
margin-right: 40px;
}
.footer-text {
font-size: 14px;
line-height: 130%;
letter-spacing: -0.5px;
}
footer {
padding-bottom: 100px;
}
2 years ago
/************ BreakPoints ************/
@media (max-width: 768px) {
.ai-hr {
margin: 30px 0px;
}
.inquiry-message-box {
padding: 20px 0px 30px;
}
.main-inquiry {
padding-bottom: 20px;
}
footer {
padding-bottom: 40px;
}
2 years ago
.solar-header {
padding-top: 0px;
}
}