Stack/CSS
[CSS / SCSS] SCSS로 Style 적용하기 5 (현대삼호중공업)
7ingout
2022. 4. 22. 12:22
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style_teacher.css">
</head>
<body>
<div>
<header>
<h1><img src="images/logo.png" alt=""></h1>
<nav>
<ul class="menu">
<li><a href="#">회사소개</a></li>
<li><a href="#">사업분야</a></li>
<li><a href="#">지속가능경영</a></li>
<li><a href="#">미디어센터</a></li>
<li><a href="#">동반성장</a></li>
<li><a href="#">인재채용</a></li>
<li><a href="#">투자자정보</a></li>
</ul>
</nav>
<div>
<ul class="gnb">
<li><a href="#">ENG</a></li>
<li>
<button>FAMILY SITE</button>
<div>
<ul>
<li><a href="#">한국조선해양</a></li>
<li><a href="#">HHI Group</a></li>
<li><a href="#">현대중공업</a></li>
<li><a href="#">현대미포조선</a></li>
<li><a href="#">동반성장</a></li>
<li><a href="#">인재채용</a></li>
<li><a href="#">투자자정보</a></li>
<li><a href="#">한국조선해양</a></li>
</ul>
</div>
</li>
</ul>
<div class="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<div id="content">
<!-- 비주얼 부분 -->
<section id="visual">
<div class="inner">
<div class="tit">
<h2>
<strong>
GREEN TECHNOLOGIES<br>
FOR A BETTER FUTURE</strong>
</h2>
<p> 현대삼호중공업은 친환경 기술과 스마트 기술을 통해<span class="bk">
보다 나은 미래를 준비하고 새로운 도전을 이어가고 있습니다.</span>
</p>
<a href="#" class="visual_btn">
COMPANY MORE
<span></span>
</a>
</div>
<div class="scroll"><span>SCROLL DOWN</span></div>
</div>
</section>
<!-- 비주얼 부분 /-->
<!-- 비즈니스 부분 -->
<section id="business">
<div>
<div class="txbox">
<div class="tit">
<h2>HSHI <strong class="bk">BUSINESS</strong></h2>
<p>
현대삼호중공업의
<span class="bk">조선, 산업설비, 해양사업분야를</span>
한 눈에 볼 수 있습니다.
</p>
</div>
<a href="#">
BUSINESS MORE
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i></a>
</div>
<ul>
<li class="on">
<a href="#">
<em>01</em>
<span>Shipbuilding</span>
<strong>조선분야</strong>
<p>세계 최고의 선박을 만드는 현대삼호중공업은 <span class="bk">첨단 설비와 기술로 고객만족을 실현하고 </span>첨단 3차원 설계시스템 지원 및 대고객 소통 활성화를 <span class="bk">통해 무결점 선박을 적기 인도하고 있습니다.</span></p>
<i>VIEW MORE</i>
</a>
</li>
<li>
<a href="#">
<em>02</em>
<span>Offshore Business</span>
<strong>해양사업</strong>
<p>조선 분야에서 쌓아온 경험과 기술을 바탕으로 <span class="bk">2008년과 2015년 현대중공업과 공동으로 </span>FPSO와 FPU의 건조에 착수했으며, 2018년에는 <span class="bk"> 노르웨이 시탱커에 반잠수식시추선을 건조해</span></p>
<i>VIEW MORE</i>
</a>
</li>
<li>
<a href="#">
<em>03</em>
<span>Shipbuilding</span>
<strong>조선분야</strong>
<p>세계 최고의 선박을 만드는 현대삼호중공업은 <span class="bk">첨단 설비와 기술로 고객만족을 실현하고 </span>첨단 3차원 설계시스템 지원 및 대고객 소통 활성화를 <span class="bk">통해 무결점 선박을 적기 인도하고 있습니다.</span></p>
<i>VIEW MORE</i>
</a>
</li>
</ul>
</div>
</section>
<!-- 비즈니스 부분 /-->
<!-- 지속가능성 부분 -->
<section id="susta">
<div class="inner">
<ul>
<li>
<div class="tit">
<h2>HSHI <strong class="bk">SUSTAINABILITY</strong></h2>
<p>현대삼호중공업은 지속적인 성장을 통한 기업가치 증대를 추구하며 <span class="bk">기업의 사회적 책임을 실천합니다.</span></p>
</div>
</li>
<li>
<a href="#">
<h3>안전·보건·환경</h3>
<p>다 함께 안전하고 행복한 <span class="bk">일터를 만들어 나가겠습니다.</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>윤리경영</h3>
<p>다 함께 안전하고 행복한 <span class="bk">일터를 만들어 나가겠습니다.</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>품질경영</h3>
<p>최고의 품질로 고객에게 <span class="bk">감동과 신뢰를</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>동반성장</h3>
<p>함께하는, 아름답고 <span class="bk">풍요로운</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
<li>
<a href="#">
<h3>사회공헌</h3>
<p>사회적 책임을 다하는 <span class="bk">깨끗하고 정직한 기업이 되겠습니다.</span></p>
<i class="btn_more">
<span class="blind">자세히 보기</span>
</i>
</a>
</li>
</ul>
</div>
</section>
<!-- 지속가능성 부분 /-->
<!-- 미디어센터 부분 -->
<section id="media">
<div class="inner">
<div>
<div class="tit">
<h2>MEDIA <strong class="bk">CENTER</strong></h2>
<p>현대삼호중공업의<span class="bk">다양한 소식을 전달합니다.</span></p>
</div>
<ul>
<li>사보</li>
<li>홍보영화</li>
<li>문의전화</li>
</ul>
</div>
<ul>
<li><a href="#">보도자료</a>
<ul>
<li>
<div>
<h3>현대중공업그룹, LNG DF 선박 기술 워크숍!</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-09-07</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>세계 최초 LNG추진 컨테이너선 건조</h3>
<p>현대중공업그룹이 세계 최초로 LNG(액화천연가스) 추진 초대형 컨테이너선을 건조 </p>
<span>2020-08-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>회사 봉사단, 구례에서 수해 복구 봉사활동</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-28-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
</ul>
</li>
<li><a href="#">브로슈어</a>
<ul>
<li>
<div>
<h3>현대중공업그룹, LNG DF 선박 기술 워크숍!</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-09-07</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>세계 최초 LNG추진 컨테이너선 건조</h3>
<p>현대중공업그룹이 세계 최초로 LNG(액화천연가스) 추진 초대형 컨테이너선을 건조 </p>
<span>2020-08-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>회사 봉사단, 구례에서 수해 복구 봉사활동</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-28-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
</ul>
</li>
<li><a href="#">브로슈어</a>
<ul>
<li>
<div>
<h3>현대중공업그룹, LNG DF 선박 기술 워크숍!</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-09-07</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>세계 최초 LNG추진 컨테이너선 건조</h3>
<p>현대중공업그룹이 세계 최초로 LNG(액화천연가스) 추진 초대형 컨테이너선을 건조 </p>
<span>2020-08-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
<li>
<div>
<h3>회사 봉사단, 구례에서 수해 복구 봉사활동</h3>
<p>- 영상회의 방식으로 진행......8일(화) LNG DF 선박 현장 견학 </p>
<span>2020-28-24</span>
<div class="tx">보도<br>자료</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</section>
<!-- 미디어센터 부분 /-->
<!-- 투자 부분 -->
<section id="relations">
<div class="inner">
<div class="tit">
<h2>INVEST <strong class="bk">RELATIONS </strong></h2>
<p>현대삼호중공업은 항상 투자자 여러분과 함께하며 더 나은 편의제공을 위해 최선을 다하고 있습니다.
<span class="bk">현대삼호중공업의 경영현황을 신속하고 정확하게 제공해드립니다.</span></p>
</div>
<div>
<div class="left">
<h3>투자자정보
<a href="#"><i class="btn_more">
<span class="blind">자세히 보기</span>
</i></a>
</h3>
<ul>
<li><a href="#"><i class="ico ico1"></i>공시·공고</a></li>
<li><a href="#"><i class="ico ico2"></i>지배구조</a></li>
<li><a href="#"><i class="ico ico3"></i>재무정보</a></li>
<li><a href="#"><i class="ico ico4"></i>IR자료실</a></li>
</ul>
</div>
<div class="right">
<h3>IR자료실
<a href="#"><i class="btn_more">
<span class="blind">자세히 보기</span>
</i></a>
</h3>
<ul>
<li><a href="#">반기사업보고서(2020.06)<span>2020-08-18</span></a></li>
<li><a href="#">반기사업보고서(2020.06)<span>2020-06-06</span></a></li>
<li><a href="#">반기사업보고서(2020.06)<span>2020-06-02</span></a></li>
<li><a href="#">반기사업보고서(2020.06)<span>2020-05-16</span></a></li>
</ul>
</div>
</div>
</div>
</section>
</div>
<footer>
<div>
<div class="inner">
<ul>
<li>개인정보취급방침</li>
<li>법적고지</li>
<li>영상정보처리기기운영방침</li>
<li>이메일무단수집거부</li>
</ul>
</div>
</div>
<div class="inner">
<div>현대삼호중공업 주소 : 우편번호 58462 전남 영암군 삼호읍 대불로 93 전화번호 : 061-460-2114<br>
copyright ⓒ 2020 HYUNDAI SAMHO HEAVY INDUSTRIES CO.,LTD. ALL RIGHTS RESERVED.
퇴직자 제증명 신청SITE LINK
</div>
<div>
<ul>
<li>퇴직자 제증명 신청</li>
<li>sitelink</li>
</ul>
<span>웹표준마크</span>
</div>
</div>
</footer>
</div>
</body>
</html>
reset.css
* { margin: 0; padding: 0; box-sizing: border-box;}
a {text-decoration: none; color:inherit; }
img { vertical-align: top; }
table {
border-collapse: collapse;
}
li { list-style: none;}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
address {
font-style: normal;
}
input, select {
outline: none;
}
style.scss (hover은 안하고 디자인만 한 상태)
body {
font-size: 14px;
}
header {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 82px;
background: #fff;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
color: #2d2d2d;
h1 {
margin-top: 5px;
width: 11%;
img {
width: 100%;
}
}
.menu {
display: flex;
align-items: center;
transition: 0.5s;
li {
padding: 30px 20px;
position: relative;
&:hover a {
color: #0054a6;
}
&::before {
content: "";
display: block;
position: absolute;
left: 10px;
right: 10px;
top: 78px;
bottom: 0;
border-bottom: 2px solid #0053a5;
transform: scaleX(0);
transition: 0.4s;
}
&:hover::before {
transform: scaleX(1);
}
}
}
div {
display: flex;
align-items: center;
.gnb {
display: flex;
align-items: center;
padding-right: 50px;
ul {
display: none;
}
&:hover ul{
display: block;
background:#0053a5;
color: #fff;
font-size: 12px;
margin-top: 50px;
li {
margin: 3px auto;
}
}
li:first-child {
padding-right: 10px;
border-right: 1px solid #ccc;
color: #3c3c3c;
background-image: url(../images/ico_gb_color.png);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
padding-left: 20px;
opacity: 60%;
&:hover {
opacity: 100%;
}
}
li:nth-child(2) {
padding-left: 10px;
padding-right: 10px;
button {
border: none;
color: #3c3c3c;
font-size: 12px;
}
}
}
.toggle {
display: flex;
flex-direction: column;
padding-right: 25px;
span {
width: 28px;
height: 1.5px;
background-color: #333;
&:not(:first-child) {
margin-top: 8px;
}
}
}
}
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bk {
display: block;
}
.blind {
display: none;
}
#content {
#visual {
position: relative;
background-image: url(../images/main_visual_new1.jpg);
background-repeat: no-repeat;
background-size: 120%;
background-position: center 70%;
height: 100vh;
.tit {
color: #fff;
padding-top: 400px;
h2 {
font-size: 44px;
}
p {
padding-top: 20px;
font-weight: bold;
font-size: 14px;
}
.visual_btn {
display: block;
padding: 40px 0;
font-size: 14px;
font-weight: bold;
}
}
.scroll {
span {
position: absolute;
color: #fff;
font-weight: bold;
font-size: 14px;
top: 93%;
left: 50%;
transform: translate(-50%, 0);
}
}
}
#business {
position: relative;
background-image: url(../images/bg_sct2_1.jpg);
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
color : #fff;
> div {
padding: 250px 150px 0;
.txbox {
display: flex;
flex-direction: column;
width: 25%;
h2 {
font-size: 42px;
}
p {
padding-top: 20px;
font-size: 14px;
font-weight: bold;
}
a {
padding-top: 20px;
font-size: 14px;
font-weight: bold;
}
}
}
ul {
width: 75%;
li {
padding-top: 10px;
em {
display: block;
}
span {
display: block;
}
&:first-child {
position: absolute;
left: 28%;
top: 25%;
em {
color: #00baff;
font-style: normal;
font-size: 42px;
font-weight: bold;
}
em+span {
color: #00baff;
font-size: 16px;
font-weight: bold;
padding-top: 8px;
}
strong {
font-size: 30px;
font-weight: bold;
color: #fff;
}
p {
padding: 25px 0;
font-size: 13px;
font-weight: 600;
}
i {
font-style: normal;
font-size: 13px;
}
}
&:nth-child(2) {
position: absolute;
left: 52%;
top: 25%;
em {
font-style: normal;
font-size: 20px;
font-weight: bold;
}
em+span {
font-size: 16px;
font-weight: bold;
}
strong {
font-size: 20px;
font-weight: bold;
color: #fff;
}
p {
padding: 25px 0;
font-size: 13px;
font-weight: 600;
}
i {
font-style: normal;
font-size: 13px;
}
}
&:nth-child(3) {
position: absolute;
left: 80%;
top: 25%;
em {
font-style: normal;
font-size: 20px;
font-weight: bold;
}
em+span {
font-size: 16px;
font-weight: bold;
}
strong {
font-size: 20px;
font-weight: bold;
color: #fff;
}
p {
padding: 25px 0;
font-size: 13px;
font-weight: 600;
}
i {
font-style: normal;
font-size: 13px;
}
}
}
}
}
#susta {
position: relative;
background-image: url(../images/bg_sct3.jpg);
background-repeat: no-repeat;
background-position: center center;
display: flex;
align-items: center;
height: 100vh;
ul {
/* position: absolute; absoulte 주면 높이가 사라짐 */
display: flex;
justify-content: space-between;
align-content: center;
flex-wrap: wrap;
li {
h3 {
color: #fff;
}
h3+p {
color: #fff;
}
&:first-child, &:nth-child(2) {
width: 49%;
height: 200px;
}
&:first-child {
.tit {
h2 {
font-size: 42px;
}
p {
padding-top: 15px;
}
}
}
&:nth-child(2) {
// background-color: #2389cb;
padding: 30px;
p {
padding-top: 10px;
}
background-image: url(../images/bg_sct3_1.jpg);
background-repeat: no-repeat;
background-position: right top;
background-size: cover;
}
&:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(6) {
margin-top: 12px;
width: 24%;
height: 200px;
}
&:nth-child(3) {
background-color: #2389cb;
padding: 30px;
p {
padding-top: 10px;
}
}
&:nth-child(4) {
background-color: #5d7081;
padding: 30px;
p {
padding-top: 10px;
}
}
&:nth-child(5) {
padding: 30px;
p {
padding-top: 10px;
}
background-image: url(../images/bg_sct3_2.jpg);
background-repeat: no-repeat;
background-position: right top;
background-size: cover;
}
&:nth-child(6) {
background-color: #0054a6;
padding: 30px;
p {
padding-top: 10px;
}
}
}
}
}
#media {
background: #f0f0f0;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
.inner {
display: flex;
justify-content: space-between;
align-items: center;
.tit {
h2 {
font-size: 42px;
}
p {
padding: 18px 0;
}
}
.tit+ul {
margin-top: 50px;
}
> ul {
width: 900px;
padding-top: 200px;
}
ul > li{
display: flex;
padding-bottom: 30px;
font-size: 18px;
a {
width: 120px;
}
li {
font-size: 14px;
&:first-child {
position: relative;
background: #fff;
background-image: url(../images/news1.jpg);
background-size: 240px auto;
background-repeat: no-repeat;
padding: 20px 20px 20px 320px;
margin-bottom: 40px;
div {
padding-left: 15px;
.tx {
position: absolute;
background: #0053a5;
padding: 5px;
color: #fff;
top: 0;
left: 240px;
}
p {
padding: 10px 0;
}
}
}
&:nth-child(2) {
position: relative;
background: #fff;
background-image: url(../images/new2.jpg);
background-size: 240px auto;
background-repeat: no-repeat;
padding: 20px 20px 20px 300px;
margin-bottom: 40px;
div {
padding-left: 15px;
.tx {
position: absolute;
background: #0053a5;
padding: 5px;
color: #fff;
top: 0;
left: 240px;
}
p {
padding: 10px 0;
}
}
}
&:nth-child(3) {
position: relative;
background: #fff;
background-image: url(../images/news3.jpg);
background-size: 240px auto;
background-repeat: no-repeat;
padding: 20px 20px 20px 300px;
div {
padding-left: 15px;
.tx {
position: absolute;
background: #0053a5;
padding: 5px;
color: #fff;
top: 0;
left: 240px;
}
p {
padding: 10px 0;
}
}
}
}
}
ul {
margin-top: -120px;
li {
&:nth-child(1) {
li {
display: none;
}
&::before {
content: "";
display: block;
width: 50px;
height: 2px;
background: #0053a5;
position: absolute;
top: 20px;
left: -30px;
z-index: 10;
}
}
}
}
ul {
li {
&:nth-child(2) {
li {
display: none;
}
}
}
}
}
}
#relations {
position: relative;
background-repeat: no-repeat;
background-position: center center;
display: flex;
align-items: center;
height: 100vh;
color: #fff;
background-image: url(../images/bg_sct4.jpg);
.inner {
.tit {
h2 {
font-size: 48px;
}
p {
padding: 20px 0;
font-size: 13px;
border-bottom: 1px solid #fff;
}
}
div {
width: 100%;
h3 {
font-size: 20px;
font-weight: bold;
}
padding-top: 20px;
&:nth-child(2) {
display: flex;
justify-content: space-between;
.left
{
width: 50%;
padding-right: 50px;
border-right: 1px solid #fff;
ul {
display: flex;
li {
margin-top: 20px;
border: 1px solid #fff;
padding: 25px 35px;
&:first-child {
background-image: url(../images/);
}
}
}
}
.right {
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 50px;
h3 {
padding-bottom: 20px;
}
span {
margin-left: 300px;
}
}
}
}
}
}
}
footer {
background: #1c1c1c;
color: #fff;
height: 340px;
> div {
padding-top: 5px;
&:first-child {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
div {
ul {
display: flex;
padding: 30px;
li {
&:not(:last-child) {
border-right: 1px solid #ccc;
padding-right: 30px;
}
&:not(:first-child) {
padding-left: 30px;
}
}
}
}
}
&:nth-child(2) {
display: flex;
padding-top: 40px;
ul {
display: flex;
padding-left: 60px;
li {
&:first-child {
background-image: url(../images/btn_apply.jpg);
padding: 15px 15px;
margin-right: 5px;
}
&:nth-child(2) {
background: #444;
width: 150px;
padding-left: 5px;
padding-top: 15px;
}
}
}
div {
&:nth-child(2) {
display: flex;
flex-direction: column;
align-items: flex-end;
span {
background-image: url(../images/logo_wa.png);
font-size: 0;
background-repeat: no-repeat;
background-position: center right;
width: 300px;
height: 150px;
}
}
}
}
}
}
style_teacher.scss
$bluecolor: #00baff;
$darkbluecolor: #114c9f;
$fontcolor: #3d3d3d;
$padding: 16px;
$fontsize: 14px;
body { font-family: 'Roboto', 'Noto Sans KR', sans-serif;
color: $fontcolor; font-size: $fontsize;
line-height: 1.6;
}
.inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@mixin flexlayout(
$dir: row,
$wrap: nowrap,
$justify: space-between,
$align: center) {
display: flex;
flex-direction: $dir;
flex-wrap: $wrap;
justify-content: $justify;
align-items: $align;
}
@keyframes move {
0% { bottom: 50px; }
50% { bottom: 30px; }
100% { bottom: 50px; }
}
@keyframes imgscale {
0% { background-size: 130%; }
100% { background-size: 120%; }
}
header {
@include flexlayout();
position: fixed;
z-index: 1;
background: #fff;
width: 100%;
height: 80px;
padding: 0 $padding;
h1 {
width: 15%;
min-width: 200px;
img {
width: 100%;
}
}
nav {
ul {
@include flexlayout();
li {
font-size: $fontsize * 1.2;
padding: 0 $padding;
position: relative;
line-height: 80px;
&::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 4px;
background: $darkbluecolor;
transition: 0.5s;
}
&:hover {
&::after {
width: 100%;
}
}
}
}
}
> div {
@include flexlayout();
.gnb {
@include flexlayout();
padding-right: $padding * 3;
> li {
padding: 0 $padding;
&:nth-child(1) {
border-right: 1px solid #ccc;
background: url(../images/ico_gb.png) left center/15px no-repeat;
&:hover {
background-image: url(../images/ico_gb_color.png);
}
}
&:hover { /* 첫번째 li는 자식으로 div 안갖고 있어서 ㄱㅊ 자동으로 두번째 li div만 보임 */
div {
display: block;
}
}
button {
border: none;
background: transparent; /* transparent: 투명(배경없음) */
color: $fontcolor;
}
}
div {
position: absolute;
background: $darkbluecolor;
color: #fff;
padding: $padding;
display: none;
}
}
.toggle {
width: 50px;
height: 50px;
@include flexlayout($dir: column,$justify: center);
span {
width: 60%;
height: 3px;
background: $fontcolor;
&:not(:last-child) {
margin-bottom: 4px;
}
}
}
}
}
#content {
section {
height: 100vh;
position: relative;
}
}
// 메인 비주얼부분
.tit {
h2 {
font-size: $fontsize * 3;
padding-bottom: $padding;
line-height: 1;
strong {
font-weight: bold;
}
}
p {
padding-bottom: $padding;
}
}
a {
position: relative;
.btn_more {
&::before {
content: "";
display: block;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
right: -40px;
top: -5px;
transition: 0.5s;
}
.blind {
font-size: 0;
}
&::after {
content: "";
display: block;
width: 32px;
height: 20px;
background: url(../images/btn_arr.png) left top/32px no-repeat;
position: absolute;
right: -30px;
top: 4px;
transition: 0.5s;
}
}
&:hover {
.btn_more {
&::before {
right: -45px;
background: $bluecolor;
border: none;
}
&::after {
right: -35px;
}
}
}
}
#visual {
background: url(../images/main_visual_new1.jpg) center center no-repeat;
background-size: 130%;
padding-top: 20%;
animation: imgscale 2s forwards;
.tit {
color: #fff;
width: 40%;
.visual_btn {
position: relative;
line-height: 30px; /* bevore height랑 똑같은 30px */
padding-left: 10px;
padding-right: 30px;
&::before {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: 0.5s;
}
span {
display: block;
width: 25px;
height: 8px;
background: url(../images/btn_arr.png) left top/ 25px no-repeat;
position: absolute;
top: 3px;
right: 0;
z-index: 1;
transition: 0.5s;
}
&::after {
content: "";
display: block;
width: 100%;
height: 30px;
border-radius: 15px;
background: $bluecolor;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
opacity: 0;
transition: 0.5s;
}
&:hover {
&::before {
width: 100%;
opacity: 0;
}
&::after {
width: 30px;
opacity: 1;
}
span {
right: -10px;
}
}
}
}
.scroll {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
color: #fff;
animation: move 2s infinite;
}
}
// 메인 비즈니스 부분
#business {
background: url(../images/bg_sct2_1.jpg) center center / cover;
> div {
position: absolute;
left: 0;
right: 80px;
top: 0;
bottom: 0;
color: #fff;
@include flexlayout();
.txbox {
width: 30%;
height: 100%;
padding-top: 16%;
padding-left: 8%;
div {
width: 60%;
p {
width: 70%;
}
}
}
ul {
width: 70%;
height: 100%;
position: relative;
@include flexlayout();
padding-top: 16%;
li {
width: 33.3333%;
height: 100%;
> a {
@include flexlayout($dir:column, $justify: flex-start, $align:flex-start);
em {
font-style: normal;
font-weight: bold;
transition: 0.5s;
}
strong {
font-size: $fontsize * 1.3;
font-weight: bold;
padding-bottom: $padding;
transition: 0.5s;
}
p {
width: 70%;
padding-bottom: $padding;
opacity: 0;
transition: 0.5s 0.5s;
}
i {
padding-right: 40px;
font-style: normal;
opacity: 0;
transition: 0.5s 0.5s;
background: url(../images/btn_arr.png) right 5px/32px no-repeat;
}
}
&.on {
em {
font-size: $fontsize *3;
color: $bluecolor
}
span { color: $bluecolor; }
strong { font-size: $fontsize *2.4; }
p {
opacity: 1;
span {
color: #fff;
}
}
i { opacity: 1; }
&::before { height: 20%; }
&::after { height: 20%; }
}
&::before {
content:"";
display: block;
width: 1px;
height: 50%;
position: absolute;
top: 0;
left: 0;
background: #fff;
transition: 0.5s;
}
&::after {
content:"";
display: block;
width: 1px;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
transition: 0.5s;
}
&:nth-child(2) {
&::before {
left: 33.3333%;
}
&::after {
left: 33.3333%;
}
}
&:nth-child(3) {
&::before {
left: 66.6666%;
}
&::after {
left: 66.6666%;
}
}
&:hover {
&::before { height: 20%; }
&::after { height: 20%; }
em {
font-size: $fontsize *3;
color: $bluecolor
}
span { color: $bluecolor; }
strong { font-size: $fontsize *2.4; }
p {
opacity: 1;
span {
color: #fff;
}
}
i { opacity: 1; }
&::before { height: 20%; }
&::after { height: 20%; }
}
}
}
}
}
//지속 가능성 부분
#susta {
background: url(../images/bg_sct3.jpg) center center/ cover;
@include flexlayout($justify:center);
ul {
@include flexlayout($wrap:wrap);
align-content: center;
li {
padding: $padding * 2;
height: 200px;
color: #fff;
&:nth-child(1) {
width: 49%;
color: $fontcolor;
margin-bottom: 2%;
}
&:nth-child(2) {
width: 49%;
margin-bottom: 2%;
background: url(../images/bg_sct3_1.jpg) right top/cover;
}
&:nth-child(3) {
width: 23.5%;
background: $bluecolor;
}
&:nth-child(4) {
width: 23.5%;
background: #3d3d3d;
}
&:nth-child(5) {
width: 23.5%;
background: url(../images/bg_sct3_2.jpg) center center/ cover;
}
&:nth-child(6) {
width: 23.5%;
background: $darkbluecolor;
}
a {
display: block;
width: 100%; // a 태그에 크기가 있어야 이 기준으로 .btn_more 위치를 잡을 수 있음
height: 100%;
.btn_more {
position: absolute;
right: 30px;
bottom: 0;
}
}
}
}
}