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.
186 lines
3.3 KiB
SCSS
186 lines
3.3 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:35px;
|
|
}
|
|
|
|
.intro-image-box{
|
|
background:rgb(244, 255, 143);
|
|
text-align: center;
|
|
padding:40px 0px;
|
|
img{
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
.intro-text-box{
|
|
padding:20px 0px;
|
|
text-align: center;
|
|
.text-image{
|
|
img{
|
|
max-width:250px;
|
|
}
|
|
}
|
|
.text-title{
|
|
font-size: 32px;
|
|
color:#24469c;
|
|
font-weight: bold;
|
|
}
|
|
.text-desc{
|
|
font-size:16px;
|
|
}
|
|
}
|
|
.ai-hr{
|
|
margin:20px 0px;
|
|
}
|
|
.inquiry-message-box{
|
|
padding:20px 0px;
|
|
.inquiry-message{
|
|
font-size:22px;
|
|
font-weight: 700;
|
|
}
|
|
.inquiry-team{
|
|
font-size:16px;
|
|
font-style: italic;
|
|
color:rgb(153, 153, 153);
|
|
}
|
|
}
|
|
.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-inquiry{
|
|
padding-bottom:40px;
|
|
}
|
|
.main-portfolio{
|
|
padding:40px 0px;
|
|
}
|
|
.portfolio{
|
|
cursor: pointer;
|
|
position:relative;
|
|
|
|
&:hover{
|
|
.portfolio-img{
|
|
img{
|
|
transform:scale(1.2)
|
|
}
|
|
}
|
|
.portfolio-inner{
|
|
opacity: 1;
|
|
transition: all .7s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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:#999;
|
|
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;
|
|
}
|
|
/************ BreakPoints ************/
|
|
// Small devices (landscape phones, 576px and up)
|
|
@media (max-width: 576px) {
|
|
}
|
|
|
|
// Medium devices (tablets, 768px and up)
|
|
@media (max-width: 768px) {
|
|
|
|
}
|
|
|
|
// 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) {
|
|
} |