<!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.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="shortcut icon" href="images/favicon.ico">
<style>
</style>
</head>
<body>
<!-- p#skipNav>a[href="#content"]{본문바로가기} -->
<p id="skipNav"><a href="#content">본문바로가기</a></p>
<!-- #wrap>header#header>.inner^section#visual+main#container.main>section#content>div.con-box.con$*4>.inner>h2+p^^^footer#gooter>.inner -->
<div id="wrap">
<header id="header">
<div class="inner">
<h1><a href="index.html"><img src="images/common/logo.png" alt="hwajin"></a></h1>
<ul class="top-menu">
<li><a href="#">홈</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">고객문의</a></li>
</ul>
<nav class="nav">
<ul class="gnb">
<li><a href="page/sub1/sub1.html">회사소개</a></li>
<li><a href="page/sub2/sub1.html">사업분야</a></li>
<li><a href="page/sub3/sub1.html">연구소</a></li>
<li><a href="page/sub4/sub1.html">제품소개</a></li>
<li><a href="page/sub5/sub1.html">화진뉴스</a></li>
<li><a href="page/sub6/sub1.html">고객문의</a></li>
</ul>
</nav>
</div>
</header>
<section id="visual">
<ul class="main-banner">
<li></li>
<li></li>
<li></li>
</ul>
<p class="btn-wrap">
<button class="btn prev"><i class="xi-angle-left"></i></button>
<button class="btn next"><i class="xi-angle-right"></i></button>
</p>
<ul class="paging">
<li class="on"></li>
<li></li>
<li></li>
</ul>
</section>
<main id="container" class="main">
<section id="content">
<div class="con-box con1">
<div class="inner">
<h2>한진 뉴스</h2>
<p>내용</p>
<ul>
<li>
<a href="">
<img src="./images/main/section1_1.jpg" alt="">
<span></span>
<div>
<i>제목</i>
<strong>설명</strong>
</div>
</a>
</li>
<li>
<a href="">
<img src="./images/main/section1_1.jpg" alt="">
<span></span>
<div>
<i>제목</i>
<strong>설명</strong>
</div>
</a>
</li>
<li>
<a href="">
<img src="./images/main/section1_1.jpg" alt="">
<span></span>
<div>
<i>제목</i>
<strong>설명</strong>
</div>
</a>
</li>
<li>
<a href="">
<img src="./images/main/section1_1.jpg" alt="">
<span></span>
<div>
<i>제목</i>
<strong>설명</strong>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="con-box con2">
<div class="inner">
<div class="box">
<em>내용</em>
<strong>타이틀 연습</strong>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit incidunt minus corporis ratione nostrum eum, neque aut blanditiis, ea aliquid, optio officia facere assumenda! Modi quam mollitia obcaecati aut nesciunt.</p>
</div>
</div>
</div>
<div class="con-box con3">
<div class="inner">
<h2>공지사항</h2>
<p>내용</p>
</div>
</div>
<div class="con-box con4">
<div class="inner">
<h2>한진 그룹 뉴스</h2>
<p>내용</p>
</div>
</div>
</section>
</main>
<footer id="footer">
<div class="inner"></div>
</footer>
</div>
</body>
</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.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="shortcut icon" href="../../images/favicon.ico">
</head>
<body>
<p id="skipNav"><a href="#content">본문바로가기</a></p>
<!-- #wrap>header#header>.inner^section#visual+main#container.main>seciton#content>div.con-box.con$*4>.inner>h2+p^^^footer#footer>.inner -->
<div id="wrap">
<header id="header">
<div class="inner">
<h1><a href="../../index.html">
<img src="../../images/common/logo.png" alt="hwajin"></a>
</h1>
<ul class="top-menu">
<li><a href="#">홈</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">고객문의</a></li>
</ul>
<nav class="nav">
<ul class="gnb">
<li><a href="sub1.html">회사소개</a></li>
<li><a href="../sub2/sub1.html">사업분야</a></li>
<li><a href="../sub3/sub1.html">연구소</a></li>
<li><a href="../sub4/sub1.html">제품소개</a></li>
<li><a href="../sub5/sub1.html">화진뉴스</a></li>
<li><a href="../sub6/sub1.html">고객문의</a></li>
</ul>
</nav>
</div>
</header>
<!-- //header -->
<section id="subVisual" class="subvis1">
<h2><span>회사소개</span></h2>
<nav>
<ul>
<li class="on"><a href="sub1.html">회사소개</a></li>
<li><a href="sub2.html">인사말</a></li>
<li><a href="sub3.html">연혁 & 비전</a></li>
<li><a href="sub4.html">수상실적</a></li>
<li><a href="sub5.html">사업파트너</a></li>
<li><a href="sub6.html">CI소개</a></li>
<li><a href="sub7.html">오시는길</a></li>
<li><a href="sub8.html">지속 가능 경영</a></li>
</ul>
</nav>
</section>
<!-- //visual -->
<main id="container" class="page sub1-1">
<seciton id="content">
<div class="inner">
<h3>
화진산업은 고기능성 필름 부문 차세대
<span>'글로벌 리딩 기업'</span>입니다.
</h3>
<div class="bg">
<ul>
<li><span><i class="xi-apple"></i></span><em> safety</em></li>
<li><span><i class="xi-dropbox"></i></span><em>global</em></li>
<li><span><i class="xi-hunie"></i></span><em>eco</em></li>
</ul>
</div>
<strong>㈜화진산업은 2013년 설립되어 제품의 안전과 사용자의 편리성을 제공하는<br>
고기능성 필름을 공급하는 대한민국 포장용 필름 회사입니다.</strong>
<!-- ul>li*3>span>i[class]^p -->
<ul>
<li>
<span><i class="xi-night"></i></span>
<p>수요자의 필요와 시장의 요구를 먼저 생각하는 고객중심의 사고를 기반으로 국내 네트워크를 구축하고, 경쟁력을 갖춘 산업용 필름, 농업용 필름 등의 제품을 국내에 공급하여
"고기능성 필름 기업"으로서 성장하고 있습니다.</p>
</li>
<li>
<span><i class="xi-sunset"></i></span>
<p>현재 고기능성 필름을 중심으로 생활 자재에서의 시장 지배력을 강화하고 친환경 산업 소재 분야로 사업을 확대 하며 미래 지향적 사업 포트폴리오를 구성하고 있습니다.</p>
</li>
<li>
<span><i class="xi-snowy"></i></span>
<p>화진산업은 "고객의 성공이 곧 우리의 성공"이라는 경영철학을 실현하며 고객에게 새로운 가치를 제공하는 대한민국 대표 기업이 되겠습니다.</p>
</li>
</ul>
</div>
</seciton>
</main>
<footer id="footer">
<div class="inner"></div>
</footer>
</div>
</body>
</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.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
<link rel="shortcut icon" href="../../images/favicon.ico">
<style>
</style>
</head>
<body>
<!-- p#skipNav>a[href="#content"]{본문바로가기} -->
<p id="skipNav"><a href="#content">본문바로가기</a></p>
<!-- #wrap>header#header>.inner^section#visual+main#container.main>section#content>div.con-box.con$*4>.inner>h2+p^^^footer#gooter>.inner -->
<div id="wrap">
<header id="header">
<div class="inner">
<h1><a href="../../index.html"><img src="../../images/common/logo.png" alt="hwajin"></a></h1>
<ul class="top-menu">
<li><a href="#">홈</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">고객문의</a></li>
</ul>
<nav class="nav">
<ul class="gnb">
<li><a href="sub1.html">회사소개</a></li>
<li><a href="../sub2/sub1.html">사업분야</a></li>
<li><a href="../sub3/sub1.html">연구소</a></li>
<li><a href="../sub4/sub1.html">제품소개</a></li>
<li><a href="../sub5/sub1.html">화진뉴스</a></li>
<li><a href="../sub6/sub1.html">고객문의</a></li>
</ul>
</nav>
</div>
</header>
<section id="subVisual" class="subvis1">
<h2><span>인사말</span></h2>
<nav>
<ul>
<li><a href="sub1.html">회사소개</a></li>
<li class="on"><a href="sub2.html">인사말</a></li>
<li><a href="sub3.html">연혁&비전</a></li>
<li><a href="sub4.html">수상실적</a></li>
<li><a href="sub5.html">사업파트너</a></li>
<li><a href="sub6.html">CI소개</a></li>
<li><a href="sub7.html">오시는길</a></li>
<li><a href="sub8.html">지속 가능 경영</a></li>
</ul>
</nav>
</section>
<main id="container" class="page sub1-2">
<section id="content">
<div class="inner">
<h3>CEO 인사말</h3>
<div class="pic">
<p>
우리가 사는 공동체를 위해,<br>
건강하고 안전한 바른 먹거리<br>
창출을 위해 노력합니다<br>
</p>
<strong>
(주)BC 대표이사
<b>비코딩</b>
</strong>
</div>
<div class="msg">
<div class="left">
<p> 안녕하십니까! BC 대표이사 비코딩입니다. </p>
<p>BC는 앞선 기술과 품질, 서비스 창출로 우리가 사는 공동체의 행복에 기여하는
냉동 가공식품 및 식자재 유통 전문기업입니다. 특히 냉동 치킨 가공품에서는 차별화된
글로벌 인프라를 기반으로 높은 품질과 안정적인 최고의 상품을 제공하고 있습니다. </p>
<p>최근 BC는 급변하는 시대에 맞춰 새로운 미래에 대한 도약으로, B2C로의 제품확장을
본격적으로 진행하고 있으며 유통에서도 온라인을 활성화를 통한 공급을 확대하고 있습니다.</p>
<p>국내 진천 생산공장은 HACCP에 이어 식품안전, 효율성 세계 인증제도인
FSSC 22000 획득을 기반으로 B2B 맞춤형 제품을 프랜차이즈, CVS, 대형마트에서
지속해서 공급을 확대해 나가며, 식품 가공 분야를 선도하고 있습니다.</p>
</div>
<div class="left">
<p>또한 물류센터 이전 및 관련 인프라 구축으로 지속적인 성장을 가속해 나가고 있습니다. BC의 최대 강점인 글로벌 네트워크를 활용 및 인프라를 바탕으로 태국, 베트남, 중국 등지에서
전략적 MOU와 M&A를 통해 개발, 생산, 유통을 강화해 나가고 있습니다.</p>
<p>이를 기반으로 수입 치킨 냉동식품 가공품 분야 연속 국내 1위의 쾌거를 이룩하였습니다. BC는 앞으로도 핵심가치인 고객의 건강과 행복에 기여하는 글로벌 종합식품 그룹으로
가치를 창출하고 사회적 책임과 국가발전에 기여하는 기업으로 책임경영을 다 하고자 합니다.</p>
<p>항상 고객의 안전과 행복을 최우선으로 하며 세계적인 식품 기업이 되고자 하는 비전을 통해
지속적인 혁신을 통한 끊임없는 노력해 나가겠습니다. 감사합니다. </p>
</div>
</div>
</div>
</section>
</main>
<footer id="footer">
<div class="inner"></div>
</footer>
</div>
</body>
</html>
/* 전체 페이지 공통 */
#wrap,
#header,
#container,
#visual,
#content,
#subVisual {
width: 100%;
}
#wrap {
min-width: 1600px;
}
.inner {
width: 1400px;
margin: auto;
position: relative;
box-sizing: border-box;
}
#header {}
#header .inner {
height: 150px;
}
#header h1 {
position: absolute;
left: 0;
top: 40px;
}
#header .top-menu {
position: absolute;
right: 0;
top: 10px;
display: flex;
}
#header .top-menu li {
margin-left: 20px;
position: relative;
}
#header .top-menu li::after {
content: "";
position: absolute;
display: block;
width: 1px;
height: 12px;
background: gray;
right: -15px;
top: 50%;
transform: translateY(-50%);
}
#header .top-menu li:last-child::after {
display: none;
}
#header .top-menu li a {
font-size: 14px;
}
#header .nav {
position: absolute;
right: 0;
top: 65px;
}
#header .nav .gnb {
display: flex;
}
#header .nav .gnb li {
margin-left: 70px;
}
#header .nav .gnb li a {
font-size: 18px;
font-weight: 500;
}
/* 서브 공통 구조 */
#subVisual {
width: 100%;
height: 410px;
background-repeat: no-repeat;
background-position: 50% 50%;
display: flex;
flex-direction: column;
}
#subVisual h2 {
height: 340px;
display: flex;
justify-content: center;
font-size: 50px;
font-weight: 700;
color: #fff;
align-items: center;
}
#subVisual nav {
height: 70px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
#subVisual nav ul {
display: flex;
justify-content: center;
}
#subVisual nav ul li {
position: relative;
margin-right: 55px;
}
#subVisual nav ul li::after {
content: "";
display: block;
height: 1px;
background: #fff;
position: absolute;
left: 0;
top: -1px;
width: 100%;
transition: 0.3s;
transform: scaleX(0);
}
#subVisual nav ul li:hover::after {
transform: scaleX(1);
}
#subVisual nav ul li.on::after {
transform: scaleX(1);
}
#subVisual nav ul li:last-child {
margin-right: 0;
}
#subVisual nav ul li a {
display: block;
padding: 0 15px;
line-height: 70px;
font-size: 18px;
color: #fff;
}
#subVisual nav ul .on {}
#subVisual.subvis1 {
background-image: url(../images/contents/sublayout/spot1.jpg);
}
#subVisual.subvis2 {
background-image: url(../images/contents/sublayout/spot2.jpg);
}
#subVisual.subvis3 {
background-image: url(../images/contents/sublayout/spot3.jpg);
}
#subVisual.subvis4 {
background-image: url(../images/contents/sublayout/spot4.jpg);
}
#subVisual.subvis5 {
background-image: url(../images/contents/sublayout/spot5.jpg);
}
#subVisual.subvis6 {
background-image: url(../images/contents/sublayout/spot5.jpg);
}
/* page 공통 */
.page {}
.page .inner {
padding: 100px 0;
}
.sub1-1 {}
.sub1-1 h3 {}
.sub1-1 h3::after {}
.sub1-1 .bg {}
.sub1-1 .bg ul {}
.sub1-1 .bg ul li {}
.sub1-1 .bg ul li span {}
.sub1-1 .bg ul li span i {}
.sub1-1 .bg ul li em {}
.sub1-1 .bg+strong {}
.sub1-2 {}
.sub1-2 h3 {
font-size: 40px;
margin-bottom: 75px;
text-align: center;
}
.sub1-2 {}
.sub1-2 h3 {
font-size: 40px;
margin-bottom: 75px;
}
.sub1-2 .pic {
width: 100%;
height: 480px;
box-sizing: border-box;
padding: 140px 240px;
background-repeat: no-repeat;
background-position: 800px 0;
background-size: contain;
background-image: url(../images/contents/sub1/GS.jpg);
margin-bottom: 65px;
}
.sub1-2 .pic p {
width: 440px;
font-size: 35px;
line-height: 1.3;
margin-bottom: 20px;
}
.sub1-2 .pic strong {
font-size: 20px;
}
.sub1-2 .pic strong b {
font-weight: 700;
}
.sub1-2 .msg {
display: flex;
justify-content: space-between;
}
.sub1-2 .msg div {
width: 670px;
}
.sub1-2 .msg div p {
margin-bottom: 25px;
font-size: 16px;
}
/* index page */
#visual {
height: 800px;
position: relative;
}
#visual .main-banner {
width: 100%;
height: 800px;
position: relative;
}
#visual .main-banner li {
width: 100%;
height: 800px;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}
#visual .main-banner li:nth-child(1) {
background-image: url(../images/main/visual1.jpg);
opacity: 1;
}
#visual .main-banner li:nth-child(2) {
background-image: url(../images/main/visual2.jpg);
opacity: 0;
}
#visual .main-banner li:nth-child(3) {
background-image: url(../images/main/visual3.jpg);
opacity: 0;
}
#visual .btn {
width: 70px;
height: 70px;
border-radius: 50%;
border: none;
background: white;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#visual .btn i {
line-height: 70px;
font-size: 40px;
}
#visual .prev {
position: absolute;
left: 50px;
}
#visual .next {
position: absolute;
right: 50px;
}
#visual .paging {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#visual .paging li {
display: inline-block;
height: 20px;
width: 20px;
background-color: #fff;
border-radius: 50%;
margin: 10px;
}
#visual .paging li.on {
background: orange;
}
.main {}
.main .con-box {
width: 100%;
}
.main .con-box h2 {
font-size: 45px;
text-align: center;
font-weight: 500;
line-height: 1;
margin-bottom: 10px;
}
.main .con-box h2+p {
font-size: 20px;
margin-bottom: 80px;
text-align: center;
}
.main .con-box .inner {
padding: 130px 0;
}
.main .con1 {}
.main .con1 ul {
display: flex;
justify-content: space-between;
}
.main .con1 li {
height: 390px;
width: 300px;
position: relative;
overflow: hidden;
}
.main .con1 li a {}
.main .con1 li a img {
width: 300px;
height: 390px;
}
.main .con1 li a span {
display: block;
width: 300px;
height: 390px;
position: absolute;
left: 0;
top: 0;
background: #000;
opacity: 0;
}
.main .con1 li:hover a span {
opacity: 0.6;
}
.main .con1 li a div {
position: absolute;
left: 0;
bottom: -100px;
padding: 20px;
color: white;
transition: 0.4s;
width: 100%;
box-sizing: border-box;
}
.main .con1 li:hover a div {
bottom: 0;
}
.main .con1 li a div i {
font-size: 30px;
}
.main .con1 li a div strong {
font-size: 30px;
display: block;
font-size: 35px;
margin-top: 20px;
margin-bottom: 30px;
}
.main .con1 li a div p {
width: 100%;
position: relative;
left: 0;
top: 30px;
opacity: 0.3;
transition: 0.5s;
}
.main .con2 {
background-image: url(../images/main/motive_bg.jpg);
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
background-size: cover;
height: 600px;
}
.main .con2 .inner .box {
position: relative;
}
.main .con2 .inner .box {
position: absolute;
background: white;
right: 0;
top: 0;
width: 400px;
height: 450px;
background: rgba(255, 255, 255, 0.5);
}
.main .con2 .inner .box em {}
.main .con2 .inner .box strong {}
.main .con2 .inner .box p {}