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.

284 lines
5.2 KiB
SCSS

@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
$column: 16;
$font-sizes: 52;
@import 'custom.scss';
.container{
max-width:1140px;
}
.logo{
max-width: 177px;
}
.solar-header{
padding-top:0px;
}
header{
position:fixed;
width: 100%;
border-top:5px solid #24469B;
background-color: white;
z-index: 99;
}
.open-sidebar{
overflow: hidden;
}
.sidebar{
height:100vh;
width: 100%;
background: white;
position: absolute;
left:-100%;
&.show{
left:0;
transition: all .5s ease;
}
.sidebar-item{
padding-left:15px;
&.active{
background:#f7f7f7;
}
}
}
.inquiry-link, .portfolio-link, .introduce-link{
&.active{
color:#24469B !important;
font-weight: 700;
}
}
.intro-image-box{
background: url('/images/middle-img.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
text-align: center;
margin-bottom:30px;
min-height:280px;
}
.intro-text-box{
text-align: center;
.text-image{
img{
max-width:270px;
}
}
.text-desc{
font-size:16px;
line-height: 130%;
letter-spacing: -0.5px;
}
}
.ai-hr{
margin:60px 0px;
border-color:#E8E8E8;
}
.inquiry-message-box{
padding:40px 0px 50px;
font-size:16px;
line-height: 130%;
letter-spacing: -0.5px;
}
.inquiry-box{
margin-bottom:20px;
width: 100%;
.inquiry-box-title{
font-size:24px;
font-weight: 700;
margin-bottom:10px;
}
.inquiry-box-desc{
font-size:18px;
}
}
.main-introduce, .main-inquiry-container{
&::before{
content: "";
display: block;
height: 80px; /* fixed header 높이 만큼 부여 or 브라우저 상단에서 띄워놓기 원하는 높이 */
margin-top: -80px; /* 위에서 설정한 높이와 동일한 만큼을 음수로 제공 */
visibility: hidden;
}
}
.main-inquiry{
padding-bottom:40px;
}
.main-portfolio{
padding:120px 0px 40px;
}
.portfolio{
cursor: pointer;
position:relative;
&:hover{
.portfolio-img{
img{
transform:scale(1.2)
}
}
.portfolio-inner{
opacity: 1;
transition: all .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-logo{
width:34px;
}
.btn-text-eng{
font-size:13px;
line-height: 100%;
}
.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;
}
.portfolio-inner{
opacity: 0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:14%;
.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-title{
width: 100%;
color:white;
font-size:16px;
line-height:130%;
letter-spacing: -0.5px;
}
.portfolio-hr{
width:18px;
height:1px;
background:#E8E8E8;
margin:10px auto;
}
.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;
img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: transform .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;
}
/************ BreakPoints ************/
// Small devices (landscape phones, 576px and up)
@media (max-width: 576px) {
}
// Medium devices (tablets, 768px and up)
@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;
}
.solar-header{
padding-top:0px;
}
}
// Large devices (desktops, 992px and up)
@media (max-width: 992px) {
}
// X-Large devices (large desktops, 1200px and up)
@media (max-width: 1200px) {
}
// XX-Large devices (larger desktops, 1400px and up)
@media (max-width: 1400px) {
}