CSS 스타일링

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

ul,li{
list-style: none;
}

a{
text-decoration: none;
color: black;
}

img{
width: 100%;
display: block;
}

body{
font-family: Arial, "맑은 고딕", sans-serif;
color: #333;
}

.menu_wrap{
width: 620px;
height: 100px;
background-color: #ff6a00;
position: absolute;
top: 0;
left: 0;
padding: 20px 30px;
}

.logo{
width: 220px;
float: left;
margin-top: 6px;
}

.company_name{
width: 240px;
float: left;
margin-top: 20px;
}

.company_name p{
font-size: 26px;
color: #fff;
font-weight: 900;
line-height: 1.2;
}

/* =========================
메인 비주얼
========================= */
.main_visual{
width: 100%;
height: 980px;
background: url("img/main.webp") no-repeat center / cover;

}

.section_1{
height: 900px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}

.section_2{
height: 900px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}

.section_2_inner{
height: 800px;

}

.section_3{
height: 900px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}

.section_3_inner{
height: 800px;

}

.section_4{
height: 900px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}

.section_5{
height: 900px;
padding: 100px 0;
background-color: rgb(228, 230, 230);
}

/* =========================
세션 1번째
========================= */
.card_text{
width: 1800px;
height: 150px;
margin: 0 auto;
font-size: 30px;
color: #222;
font-weight: 900;
margin-bottom: 30px;
}

.card_wrap{
width: 1800px;
height: 500px;
margin: 0 auto;

}
.card1{
width: 500px;
float: left;

margin-right: 30px;
}
.card2{
width: 500px;
float: left;

margin-right: 30px;
}
.card3{
width: 500px;
float: left;
}

.card1,.card2,.card3{
position: relative;
}

.circle_hover{
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #ff6a00;
position: absolute;
top: 42px;
left: 42px;
display: none;
color: #fff;
font-size: 22px;
font-weight: bold;
text-align: center;
line-height: 400px;
}

.card1:hover .circle_hover,
.card2:hover .circle_hover,
.card3:hover .circle_hover{
display: block;
}

/* =========================
세션 2번째
========================= */

.brand_text{
width: 1800px;
height: 150px;
margin: 0 auto;
font-size: 30px;
color: #222;
font-weight: 900;
margin-bottom: 30px;
}

.brand_wrap{
width: 1800px;
height: 500px;
margin: 0 auto;

}
.brand_left{
width: 500px;
float: left;
margin-right: 30px;
}

.brand_right{
width: 1000px;
float: right;
}

.brand_left,.brand_right{
position: relative;
}

.card_text p,
.brand_text p{
line-height: 1.4;
}

.arrow_left{
width: 46px;
height: 46px;
border: 2px solid #bdbdbd;
border-radius: 50%;
text-align: center;
line-height: 42px;
font-size: 28px;
color: #8a8a8a;
position: absolute;
top: 200px;
left: 10px;
}

.arrow_right{
width: 46px;
height: 46px;
border: 2px solid #bdbdbd;
border-radius: 50%;
text-align: center;
line-height: 42px;
font-size: 28px;
color: #8a8a8a;
position: absolute;
top: 200px;
right: 50px;
}

.brand_right img{
width: 100%;
height: 600px;
}

.brand_left img{
width: 100%;
height: 600px;
}


/* =========================
세션 3번째
========================= */
.now_left{
width:500px;
height: 500px;
float: left;

}

.now_right{
width:1200px;
height: 500px;
float: right;
}

.now_left,.now_right{
position: relative;
}


/* =========================
세션 4번째
========================= */
.intro_wrap{
width: 1600px;
height: 500px;
margin: 0 auto;

}
.intro1{
width: 400px;
float: left;
position: relative;
}
.intro2{
width: 400px;
float: left;
position: relative;
}
.intro3{
width: 400px;
float: left;
position: relative;
}

.intro4{
width: 400px;
float: left;
position: relative;
}
.intro5{
width: 400px;
float: left;
position: relative;
}
.intro6{
width: 400px;
float: left;
position: relative;
}
.intro7{
width: 400px;
float: left;
position: relative;
}
.intro8{
width: 400px;
float: left;
position: relative;
}

.intro_circle_hover{
width: 350px;
height: 350px;
border-radius: 50%;
background-color: #ff6a00;
position: absolute;
top: 42px;
left: 42px;
display: none;
color: #fff;
font-size: 22px;
font-weight: bold;
text-align: center;
line-height: 400px;
}

.intro1:hover .intro_circle_hover,
.intro2:hover .intro_circle_hover,
.intro3:hover .intro_circle_hover,
.intro4:hover .intro_circle_hover,
.intro5:hover .intro_circle_hover,
.intro6:hover .intro_circle_hover,
.intro7:hover .intro_circle_hover,
.intro8:hover .intro_circle_hover{
display: block;
}

/* =========================
footer
========================= */
.footer{
width: 100%;
height: 180px;
background-color: #333333;
}

.footer_inner{
width: 1548px;
height: 180px;
margin: 0 auto;
padding-top: 32px;
}

.footer_line{
width: 1548px;
height: 1px;
background-color: #c2c2c2;
margin-bottom: 26px;
}

.copyright{
font-size: 24px;
font-weight: bold;
color: #ffffff;
}

</style>
</head>
<body>

<!-- header start -->
<div class="main_visual">
<div class="menu_wrap">
<div class="logo">
<a href="#">
<img src="img/logo.png" alt="로고">
</a>
</div>

<div class="company_name">
<p>삼양라운드스퀘어</p>
</div>

</div>
</div>
<!-- header end -->

<!-- section1 start -->
<section class="section_1">
<div class="card_text">
<p>Inside Roundsquare <br>
라운드스퀘어 자세히 보기</p>
</div>
<div class="card_wrap">
<div class="card1">
<a href="#">
<img src="img/image01.WEBP" alt="New CI">
</a>
<div class="circle_hover">
역사와 미래가 담긴 새 얼굴
</div>
<h3>New CI</h3>

</div>
<div class="card2">
<a href="#">
<img src="img/image02.WEBP" alt="Business">
</a>
<div class="circle_hover">
성장과 전략을 담은 사업 이야기
</div>
<h3>Business</h3>
</div>
<div class="card3">
<a href="#">
<img src="img/image03.WEBP" alt="삼양people">
</a>
<div class="circle_hover">
삼양을 만드는 사람들의 이야기
</div>
<h3>삼양 <span>People</span></h3>
</div>
</div>
</section>
<!-- section1 end -->

<!-- section2 start -->
<section class="section_2">
<div class="section_2_inner">

<div class="brand_text">
<p>Our Brand <br>
라운드스퀘어 브랜드 이야기</p>
</div>
<div class="brand_wrap">
<div class="brand_left">
<div class="arrow_left">&#10094;</div>

<a href="#">
<img src="img/buldak.webp" alt="samall">
</a>


<div class="arrow_right">&#10095;</div>

<h3 class="brand_name">불닭볶음면</h3>
<p class="brand_desc">
상상 그 이상의,<br>
세상에 없던 매운맛 라면
</p>

<a href="#" class="read_more">Read More</a>
</div>
<div class="brand_right">
<a href="#">
<img src="img/buldak.webp" alt="detail">
</a>
</div>
</div>
</div>
</section>
<!-- section2 end -->

<!-- section3 start -->
<section class="section_3">
<div class="section_2_inner">
<div class="now_left">
<div class="now_box">
<div class="now_line"></div>
<h3 class="now_category">Roundsquare Now <br> 라운드스퀘어 소식</h3>
</div>
</div>

<div class="now_right">
<div class="now_box">
<div class="now_line"></div>
<h3 class="now_category">News</h3>
<p class="now_title">김정수 삼양식품 부회장, '대한민국 경영자대...' </p>
<p class="now_desc">K-푸드 세계화 및 사회적 책임 경영 제도화 등 공로 인정<br>(왼쪽)양희동 한국경영학회 회장과 김정수 삼양식품 부회장...</p>
<a href="#" class="now_link">전체보기</a>
<div class="now_arrow">&rarr;</div>
</div>

<div class="now_box">
<div class="now_line"></div>
<h3 class="now_category">News</h3>
<p class="now_title">불닭 먹으러 줄 섰다…삼양식품 "명동 팝업에..."</p>
<p class="now_desc">신사옥 명동 1층 로비서 진행 김정수 부회장 아이디어로 추진<br>삼양식품은 최근 서울 명동 사옥 1층에서 진행한 체험형...</p>
<a href="#" class="now_link">전체보기</a>
<div class="now_arrow">&rarr;</div>
</div>

<div class="now_box">
<div class="now_line"></div>
<h3 class="now_category">Media</h3>
<p class="now_title">영상으로 만나는 삼양라운드스퀘어</p>
<p class="now_desc"></p>
<a href="#" class="now_link">바로가기</a>
<div class="now_arrow">&rarr;</div>
</div>

<div class="now_box">
<div class="now_line"></div>
<h3 class="now_category">Careers</h3>
<p class="now_title">세상의 Food for Thought이 될 인재,<br>여러분입니다.</p>
<p class="now_desc"></p>
<a href="#" class="now_link">바로가기</a>
<div class="now_arrow">&rarr;</div>
</div>
</div>
</div>

</section>
<!-- section3 end -->

<!-- section4 start -->
<section class="section_4">
<div class="intro_wrap">
<div class="intro1">
<a href="#">
<img src="img/01_Group.WEBP" alt="Group">
</a>
<div class="intro_circle_hover">
Group 식품과 기술의 무한한 융합으로 더 건강하고 창의적인 미래를 만드는 삼양라운드스퀘어
</div>
</div>
<div class="intro2">
<a href="#">
<img src="img/02_Vision.WEBP" alt="Vision">
</a>
<div class="intro_circle_hover">
Vision Food for Thought 삶과 미래를 채우는 자양분이 되는 기업
</div>
</div>
<div class="intro3">
<a href="#">
<img src="img/JohnMaat_on_mobile_home_1.WEBP" alt="John Maat">
</a>
<div class="intro_circle_hover">
John Maat K-Food 문화를 전 세계로 확장시킬 삼양 AANI의 글로벌 IP
</div>
</div>
<div class="intro4">
<a href="#">
<img src="img/04.WEBP" alt="Squarelab">
</a>
<div class="intro_circle_hover">
Squarelab 더 넓은 식품의 영역으로 과학적 혁신을 이끌어갈 푸드테크의 원동력
</div>
</div>
<div class="intro5">
<a href="#">
<img src="img/05.WEBP" alt="Global">
</a>
<div class="intro_circle_hover">
Global 먹거리에서 놀거리로 전 세계를 향해 나아가는 글로벌 브랜드
</div>
</div>
<div class="intro6">
<a href="#">
<img src="img/06_logistics.WEBP" alt="Logistics">
</a>
<div class="intro_circle_hover">
Logistics 국내/외 운송업을 넘어 물류 경쟁력 확대를 통한 글로벌 물류시스템
</div>
</div>
<div class="intro7">
<a href="#">
<img src="img/07_foods_new.WEBP" alt="Foods">
</a>
<div class="intro_circle_hover">
Foods 세계최고 수준의 생산시설, 끊임없는 연구활동으로 선보이는 우수한 제품
</div>
</div>
<div class="intro8">
<a href="#">
<img src="img/08_roundhill.WEBP" alt="Roundhill">
</a>
<div class="intro_circle_hover">
Roundhill 대자연의 생명력과 인간의 마음을 풍요롭게 하는 친환경적 힐링공간
</div>
</div>
</div>

</section>
<!-- section4 end -->

<!-- footer start -->
<footer class="footer">
<div class="footer_inner">
<div class="footer_line"></div>
<p class="copyright">© 삼양라운드스퀘어(주). All Rights Reserved.</p>
</div>
</footer>
<!-- footer end -->

</body>
</html>