๐ ๋ฐฐ๋ ์์ญ ๋ง๋ค๊ธฐ
ํฐ์ ๋ฐฐ๊ฒฝ์ ๊ฐ์ด๋ฐ ์ปจํ ์ธ ์์ญ๋ง ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด๋ค. ๊ฐ์ด๋ฐ ์ ๋ ฌ์ธ ์ปจํ ์ธ ๋ค์ ํฐ ๋ฐฐ๊ฒฝ์ด ์๋ ์ ์ด๋ค.
์ ๋ถ๋ถ๋ง ๋ฐ๋ก ๋ฌถ์ด์ค ๊ฒ์ด๋ค.
์ข์ธก์ ul , li ์์๋ก ๊ตฌ์ฑํด์ ๊ฐ๊ฐ ๋ฐฐ๋๋ฅผ ํํํ ๊ฒ์ด๊ณ , ์ฐ์ธก์ ์ ํ์ฐพ๊ธฐ ( ๊ฒ์ ) ์์ญ์ด๋ค.
<!-- ๋ฐฐ๋ ์์ญ ์์ -->
<section class="notice">
<div> <!--๊ฐ์ด๋ฐ ์ ๋ ฌ์ฉ-->
<div class="top"> <!--๋ฒ ๋ ์์ญ ์ค ์๋ถ๋ถ-->
<ul>
<li><a href="#a">ํ
๋ง ๊ฐค๋ฌ๋ฆฌ</a></li>
<li><a href="#a">๋ธ๋ก๊ทธ</a></li>
<li><a href="#a">๋๋ฆฌ์ ์ฐพ๊ธฐ</a></li>
</ul>
<div>
<h2>์ ํ ์ฐพ๊ธฐ</h2>
<div>
<select title="๊ฒ์์กฐ๊ฑด ๊ฒ์">
<option>์ ํ ์ ์ฒด๊ฒ์</option>
</select>
</div>
<div><input type="search" title="๋ชจ๋ธ๋ช
์
๋ ฅ" placeholder="๋ชจ๋ธ๋ช
์ ์
๋ ฅํ์ธ์."></div>
<div><a href="#a">๊ฒ์ํ๊ธฐ</a></div>
</div>
</div>
</div>
</section><!-- ๋ฐฐ๋ ์์ญ ๋ -->section : ํฐ์ ๋ฐํ์ด ๋ ๋ถ๋ถ.
<div> : ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๋๋ ์์ญ์ด๋ค.
class = "top" : ๋ฐฐ๋ ์์ญ ์ค ์๋ถ๋ถ.
<ul> , <li> : ์ข์ธก ๋ฐฐ๋ ์์ญ.
<div> : ๊ฒ์ ์์ญ.
์ด ๋ถ๋ถ์ ๊ฒ์ ์ ๋ ฅ์นธ, ๊ฒ์ ๋ฒํผ์ ul,li ์์ or div ์์๋ก ํํํ๋ฉด๋๋ค.
ํ์ง๋ง div ์์๋ก ๊ตฌ์ฑํ๋ ๊ฒ์ด ์ข๋ค. ๊ทธ ์ด์ ๋ ul, li๋ ์๊ฐ์ฅ์ ์ธ ๋ถ๋ค์ด ์ฌ์ฉํ์๋ ์ผ์ค๋ฆฌ๋์์ list๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ฉด ์์์ฒ๋ผ ๋ค๋ฆฐ๋ค.
๐ค placeholder๊ฐ input ์ค๋ช ์ ๋์ฒดํ ์ ์๋๊ฐ?
<div><input type="search" title="๋ชจ๋ธ๋ช
์
๋ ฅ" placeholder="๋ชจ๋ธ๋ช
์ ์
๋ ฅํ์ธ์."></div>placeholder๊ฐ input์ ๋ํ ์ค๋ช
์ ๋์ ํ ์ ์๋ค.
์น ์ ๊ทผ์ฑ ์ง์นจ์ name ํน์ title๋ก ์ค๋ช
์ ์ถ๊ฐํด์ผํ๋ค.
๋๋ณด๊ธฐ
<!DOCTYPE html>
<html lang="ko"> <!--์ ๊ทผ์ฑ์ ์งํค๊ธฐ ์ํด์ lang์์์ ko (ํ๊ตญ์ด ์ฌ์ดํธ)-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ ํ๋ฐ์ฝ</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<a href="#contents" class="skip">๋ณธ๋ฌธ๋ฐ๋ก๊ฐ๊ธฐ</a>
<header>
<!--๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ ๊ทธ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ ๋์ฒด ํ
์คํธ๊ฐ ํ์ํ๋ค.-->
<h1><a href="#a">ํ์ํ๋ฐํฌ</a></h1>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๋๋ฉ๋ด</h2>
<nav class="lnb"> <!--๋ค๋น๊ฒ์ด์
๋ฉ๋ด-->
<ul>
<li><a href="#a"><span>์๊ณต์ฌ๋ก</span></a></li>
<li><a href="#a"><span>์ ํ์ ๋ณด</span></a></li>
<li><a href="#a"><span>๊ณ ๊ฐ์ผํฐ</span></a></li>
<li><a href="#a"><span>๊ธฐ์
์๊ฐ</span></a></li>
<li><a href="#a"><span>์ง์๊ฐ๋ฅ๊ฒฝ์</span></a></li>
<li><a href="#a"><span>์ฌ์
๋ถ์ผ</span></a></li>
</ul>
</nav>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๋ จ์๋น์ค</h2>
<nav class="spot">
<ul>
<li><a href="#a">๋งค์ฅ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์ ํ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์นดํ๋ก๊ทธ</a></li>
<li><a href="#a">SITEMAP</a></li>
<li><a href="#a">ENGLISH</a></li>
</ul>
</nav>
<!-- ๋น์ฃผ์ผ ์์ญ ์์ -->
<section class="visual slide">
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๊ณ ์์ญ</h2>
<a href="#a" class="prev">์ด์ </a>
<a href="#a" class="next">๋ค์</a>
<div class="control">
<div>
<div>
<a href="#a" class="play on">์์</a>
<a href="#a" class="pause">์ผ์์ ์ง</a>
</div>
<ul>
<li class="on"><a href="#a">ํ์ํ๋ฐ์ฝ ๋น์ </a></li>
<li><a href="#a">xxx ์ ์ํ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
</ul>
</div>
</div>
<div class="con">
<div class="slide">
<div class="txt">
๊ฐ๊ตฌ์์ฌ์์<br>
์ธํ
๋ฆฌ์ด ์์ฌ๊น์ง
<p>ํ์ํ๋ฐ์ฝ ํธ๋ฆฌํ๊ณ ํ๋ณตํ ๊ณต๊ฐ์ ๋ง๋ค์ด ๊ฐ๋๋ค.</p>
</div>
</div>
</div>
</section> <!-- ๋น์ฃผ์ผ ์์ญ ๋ -->
<!-- ์ ํ ์ ๋ณด ์์ญ ์์ -->
<section class="product">
<h2 class="hide">์ ํ์ ๋ณด</h2> <!-- ๊ฐ์์ ์ ๋ณด -->
<ul>
<li><a href="#a">๋ฐ๋ฅ์ฌ</a></li>
<li><a href="#a">๋ฒฝ๋ฉด์ฌ</a></li>
<li><a href="#a">๋์ด์ฌ</a></li>
<li><a href="#a">๋ชฐ๋ฉ์ฌ</a></li>
<li><a href="#a">์ํธ์ฌ</a></li>
<li><a href="#a">๊ฐ๊ตฌ์ฌ</a></li>
</ul>
</section> <!-- ์ ํ ์ ๋ณด ์์ญ ๋ -->
<!-- ๋งค๊ฑฐ์ง ์์ญ ์์ -->
<section class="slide magazine">
<h2>MAGAZINE</h2>
<p>ํ์ํ๋ฐ์ฝ์ ๋ค์ํ ์์์ ๋ง๋๋ณด์ธ์.</p>
<a href="#a" class="prev">์ด์ </a>
<a href="#a" class="next">๋ค์</a>
<div class="control">
<div>
<div>
<a href="#a" class="play on">์์</a>
<a href="#a" class="pause">์ผ์์ ์ง</a>
</div>
<ul>
<li class="on"><a href="#a">ํ์ํ๋ฐ์ฝ ๋น์ </a></li>
<li><a href="#a">xxx ์ ์ํ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
</ul>
</div>
</div>
<div class="slide_box"> <!-- ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง div ์์ญ ์ก๊ธฐ / ๊ฐ๊ฐ์ slide๊ฐ ๋ค์ด๊ฐ ๊ฒ์ด๋ค. -->
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
</div>
</section> <!-- ๋งค๊ฑฐ์ง ์์ญ ๋ -->
<!-- ๋ฐฐ๋ ์์ญ ์์ -->
<section class="notice">
<div> <!--๊ฐ์ด๋ฐ ์ ๋ ฌ์ฉ-->
<div class="top"> <!--๋ฒ ๋ ์์ญ ์ค ์๋ถ๋ถ-->
<ul>
<li><a href="#a">ํ
๋ง ๊ฐค๋ฌ๋ฆฌ</a></li>
<li><a href="#a">๋ธ๋ก๊ทธ</a></li>
<li><a href="#a">๋๋ฆฌ์ ์ฐพ๊ธฐ</a></li>
</ul>
<div>
<h2>์ ํ ์ฐพ๊ธฐ</h2>
<div>
<select title="๊ฒ์์กฐ๊ฑด ๊ฒ์">
<option>์ ํ ์ ์ฒด๊ฒ์</option>
</select>
</div>
<div><input type="search" title="๋ชจ๋ธ๋ช
์
๋ ฅ" placeholder="๋ชจ๋ธ๋ช
์ ์
๋ ฅํ์ธ์."></div>
<div><a href="#a">๊ฒ์ํ๊ธฐ</a></div>
</div>
</div>
</div>
</section><!-- ๋ฐฐ๋ ์์ญ ๋ -->
</header>
</body>
</html>
๋๋ณด๊ธฐ
/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
.product a {
color: #001829;
font-size: 15px;
display: block; /*block ์์์ ํน์ง ๊ฐ๋ก ์ฌ์ด์ฆ๋ 100%์ด๋ค.*/
}
.product a:hover { /*๊ธ์ ์์ด์ฝ์ ์ปค์ ๊ฐ๊น์ด ํ์ ๋*/
color: #2d5b79; /*์ ๋ฐ๋๊ฒ*/
font-weight: bold; /*๊ตต๊ธฐ ๋ฐ๋๊ฒ*/
}
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
margin: 0 0 20px; /*์ ์ข์ฐ ํ*/
}
.product li { /*li ๊ฐ๋ก ๋ฐฐ์น*/
/*float: left;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
text-align: center;
padding: 0 55px;
display: inline-block; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
}
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
/*width: 1044px;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*margin: 0 auto;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*//block*/
padding: 46px 0 41px; /*์ ์ข์ฐ ํ*/
text-align: center; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
font-size: 0;
}
.product li:nth-child(1) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -3px -118px;
}
.product li:nth-child(2) a:before {
background-position: -75px -118px;
}
.product li:nth-child(3) a:before {
background-position: -148px -118px;
}
.product li:nth-child(4) a:before {
background-position: -219px -118px;
}
.product li:nth-child(5) a:before {
background-position: -292px -118px;
}
.product li:nth-child(6) a:before {
background-position: -364px -118px;
}
/*a:before ์์์ ์ขํ ๋ฐ๊พธ๊ธฐ*/
/*a์ hoverํ์ ๋ ์ด์ ์ ์๋ ์ปจํ
์ธ ๋ฅผ ์ก๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ขํ ์ฌ์ค์ ํ๋ค. y์ถ์ด ๋ฐ๋์ด์ผ๊ฒ ๋ค.*/
.product li:nth-child(1) a:hover:before {
background-position: -3px -184px;
}
.product li:nth-child(2) a:hover:before {
background-position: -75px -184px;
}
.product li:nth-child(3) a:hover:before {
background-position: -148px -184px;
}
.product li:nth-child(4) a:hover:before {
background-position: -219px -184px;
}
.product li:nth-child(5) a:hover:before {
background-position: -292px -184px;
}
.product li:nth-child(6) a:hover:before {
background-position: -364px -184px;
}
/*๋งค๊ฑฐ์ง ์์ญ*/
.magazine {
background: #dfd9d1;
position: relative;
height: 670px;
overflow: hidden; /*๊ฐ๋ก์คํฌ๋กค ๋ง๊ธฐ*/
}
.magazine h2 { /*h2 ์ก์์ ์คํ์ผ์ฃผ๊ณ ๊ฐ์ด๋ฐ ์ ๋ ฌํ๊ธฐ*/
font-size: 30px;
color: #000;
text-align: center;
padding: 44px 0 15px; /*์ ์ข์ฐ ํ*/
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
.magazine p {
font-size: 14px;
color: #3a3b36;
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
padding: 0 0 35px 0;
}
.magazine.slide .control { /*์ฌ๋ผ์ด๋ ๋ฐ์ค ์ ์ปจํธ๋กค ์์น ์์ */
bottom: 35px;
}
.magazine .slide_box > div { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
width: 1180px;
height: 430px;
position: absolute; left: 50%;
transform:translate(-50%,0);
top: 150px;
}
/*1๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(1) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: -1280px;
}
/*3๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(3) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: 1280px;
}
.magazine .slide_box .left {
float: left;
width: 800px; /*์ผ์ชฝ ์์ญ ํฌ๊ธฐ ์ก๊ธฐ*/
height: 430px;
overflow: hidden; /*์์์ ์ง์ ํฌ๊ธฐ ์์์ ๋์น์ง ์๊ฒ ์ก์*/
position: relative; /*ํ
์คํธ ์์ญ์ ๋ถ์ด๊ธฐ ์์*/
}
.magazine .slide_box .left img {
/*๋ถ๋ชจ left ํฌ๊ธฐ 800px์ ๋ง์ถฐ์ง,
์ธ๋ก ์ฌ์ด์ฆ๋ ์ด๋ฏธ์ง์ ๋ณธ๋ ์ฌ์ด์ฆ์ ๋น๋กํด์ ๋ง์ถฐ์ง๋ค. */
width: 100%;
}
.magazine .slide_box .left div {
background: rgba(0,0,0,0.5); /*ํฌ๋ช
๋*/
position: absolute;
right: 0;
top: 0;
width: 200px; /*ํฌ๊ธฐ ์ง์ */
height: 100%;
padding: 47px 20px 0; /*์ ์ข์ฐ ํ*/
box-sizing: border-box; /*padding๊ณผ ๊ฐ๋ก ์ฌ์ด์ฆ ์๋ ๊ณ์ฐ*/
}
.magazine .slide_box .left div h3 {
color: #fff;
font-size: 20px;
text-align: left;
line-height: 32px;
}
.magazine .slide_box .left div span {
font-weight: normal;
display: block;
text-align: left;
}
.magazine .slide_box .left div p {
font-size: 16px;
color: #fff;
text-align: left;
line-height: 24px;
padding: 9px 0 0; /*์ ์ข์ฐ ํ*/
}
.magazine .slide_box .left div a {
width: 160px; height: 45px;
border: 1px solid #fff;
display: block;
font-size: 16px; color: #fff; text-align: center; line-height: 45px;
position: absolute; right: 20px; bottom: 40px;
}
.magazine .slide_box .right {
float: right;
width: 380px; height: 430px; background: #fff;
padding: 20px 20px 0; /*์ ์ข์ฐ ํ*/
box-sizing: border-box; /*์๋ ๊ณ์ฐ*/
}
.magazine .slide_box .right li {
padding: 0 0 20px;
}
.magazine .slide_box .right li img {
width: 82px;
height: 82px;
}
.magazine .slide_box .right li a {
display: table; /*block์ table๋ก ๋ฐ๊ฟ*/
width: 100%;
}
.magazine .slide_box .right li a div {
display: table-cell; height: 82px; vertical-align: middle;
padding: 0 0 0 100px;
position: relative;
font-size: 16px; color: #333;
text-align: left;
}
.magazine .slide_box .right li a strong {
font-size: 13px; color: #000;
display: block;
}
.magazine .slide_box .right li a img {
position: absolute; left: 0; top: 0;
}
.magazine.slide .prev {
left: 50%;
margin: 30px 0 0 -640px;
}
.magazine.slide .next {
right: 50%;
margin: 30px -640px 0 0;
}
/*๋งค๊ฑฐ์ง ์์ญ ๋*/
๋๋ณด๊ธฐ
/*์ ํ ์ฌ์ด์ฆ๋ณด๋ค ์ค๋ฉด ๊ฐ๋ก ์คํฌ๋กค์ด ์๊ธฐ๋๋ก*/
body {
min-width: 1680px;
}
/*ํค๋ ์์ญ*/
header {
text-align: center; /*๋๋ฉ๋ด ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
height: 81px; /*ํค๋ ๋์ด*/
/*overflow: ; ํ๋จ ๋ฉ๋ด ํ์*/
position: relative; /*์ ์ฒด ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ ์ ํด์ ธ ์๊ฒ ํ๋ค.=> ๊ฒน์ณ์ง๋ ํ์์ด ์์ด์ง๋ค.*/
}
header h1 {
position: absolute;
left: 50px; /*์ผ์ชฝ ์ฌ๋ฐฑ*/
top: 0; /*์ค๋ฅธ์ชฝ*/
padding: 14px 0 0; /*์์ชฝ ์ฌ๋ฐฑ*/
}
header h1 a {
/*a์ ํฌ๊ธฐ๋ฅผ ์ฃผ๋ ์ด์ : ๋ก๊ณ ๋ฅผ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์*/
display: block; /*a์์๋ lnline์ด๋ผ ๊ฐ๋ก,์ธ๋ก๊ฐ ์์กํ ์๋ค.
ํด๋ฆญ ์์ญ ์ค์ */
color: transparent; /*ํ
์คํธ ํฌ๋ช
์ ์ค์ */
width: 117px; /*์ด๋ฏธ์ง ๊ฐ๋ก ํฌ๊ธฐ*/
height: 50px; /*์ด๋ฏธ์ง ์ธ๋ก ํฌ๊ธฐ*/
background: url(../img/sp_com.png) no-repeat -426px 0; /*์ด๋ฏธ์ง ์ขํ ์ฐ๊ธฐ*/
}
header .spot {
position: absolute;
right: 50px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ*/
top: 0;
}
header .lnb li {
/* float: left; float์ text-align:center๊ฐ ์๋จนํ๋ค. */
display: inline-block; /*์ธ๋ผ์ธ์ ์์ฑ์ด ์๋ ๋ธ๋ญ, text-align:center๊ฐ ๋จนํ๋ค.
๋จ์ : ์ ์ฉ๋๋ ์ฝ๋ ์ฌ์ด์ ์ฌ๋ฐฑ์ด ์๊ธด๋ค. CSS๋ก ๋ณด์ํ ์ ์๋ค. */
position: relative;
}
header .lnb li a {
display: block;
height: 81px; /*ํค๋ ๋์ด*/
padding: 0 30px; /*์ข์ฐ ์ฌ๋ฐฑ*/
font-size: 18px;
color: #333;
line-height: 81px; /*๊ธ์ ๋์ด*/
}
/* ๊ธฐํ ๋ฉ๋ชจ ํ์ */
header .spot {
position: absolute;
right: 50px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ*/
top: 0;
}
header .spot li {
position: relative; /* ? */
float: left;
}
header .spot li:nth-child(n+2):before { /*li 2๋ฒ๋ถํฐ ์ดํ ๋ชจ๋ li*/
content: "";
position: absolute;
left: 10px;
top: 38px;
width: 1px;
height: 7px;
background: #cccccc;
}
header .spot li a {
/*a์ ํฌ๊ธฐ๋ฅผ ์ฃผ๋ ์ด์ : ๊ธ์๋ฅผ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์*/
display: block;
height: 81px;
padding: 0 0 0 20px; /*์ฒซ ๋ฒ์งธ:์,์๋ / ๋ ๋ฒ์งธ:์ผ์ชฝ,์ค๋ฅธ์ชฝ*/
line-height: 81px;
font-size: 14px;
}
header .lnb li a:hover { /*๋ง์ฐ์ค ํธ๋ฒ ์ ์ ๋ณ๊ฒฝ*/
color: #2d5b79;
font-weight: bold;
/*text-decoration: underline;*/
}
header .lnb li a span {
position: relative;
}
header .lnb li a:hover span:after {
position: absolute;
left: 0;
bottom: -9px; /*๋ฐ์ค ๊ฐ๊ฒฉ ์ฃผ๊ธฐ*/
content: "";
display: block;
height: 1px;
background: #2d5b79;
width: 100%;
}
/*๋น์ฃผ์ผ ์์ญ*/
.visual {
position: relative; /*๊ธฐ์ค์ขํ*/
padding: 0 50px;
}
/*์ฌ๋ผ์ด๋ ๋ฐ ์์ด์ฝ*/
.slide .prev, /*๊ณตํต ์์ ๋ฌถ๊ธฐ*/
.slide .next {
display: block;
position: absolute;
top:50%; width: 25px;
height: 47px;
transform: translateY(-50%);
background: url("../img/sp_com.png") no-repeat;
color: transparent; /*์ด์ ,๋ค์ ๊ธ์จ ์์ ๊ธฐ*/
z-index: 10; /*์์ด์ฝ ์ด๋ฏธ์ง ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
}
.slide .prev {
left: 82px; /*50+32 ์ฌ๋ฐฑ*/
background-position: -128px -60px;
}
.slide .next {
right: 82px; /*50+32 ์ฌ๋ฐฑ*/
background-position: -158px -60px;
}
.slide .control {
position: absolute;
left: 0;
bottom: 55px;
text-align: center; /*ํ
์คํธ๊ฐ ์ค๊ฐ์ด ์๋๋ค. ์๋? position์ด absolute์ด๋ฉด ๋ธ๋ก์ ๊ฐ๋ก ์ฌ์ด์ฆ๊ฐ ์ด๊ธฐํ๋์*/
width: 100%; /*๊ทธ๋์ ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ 100% ์ค์ ํ์.*/
}
.slide .control a {
color: transparent; /*๊ธ์ ํฌ๋ช
ํ๊ฒ*/
/*border: 1px solid red; !*์์ ์ *!*/
}
.slide .control > div {
display: inline-block; /*๊ฐ์ด๋ฐ ์ ๋ ฌ ์ํด*/
position: relative;
padding: 0 45px 0 0;
}
.slide .control ul {
display: inline-block; /*๋ง๋๊ธฐ๊ฐ ํ ์ค๋ก ๋ณด์ด๊ฒ ํจ, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ง๋๊ธฐ ์ฌ์ด ์ฌ๋ฐฑ์ด ์๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.*/
font-size: 0; /*์ด๋ ๊ฒ ํ๋ฉด ๋ง๋๊ธฐ ์ฌ๋ฐฑ์ด ์์ด์ง๋ค. ์ด ์ํ์์ ์ข์ฐ ์ฌ๋ฐฑ์ ์ค๋ค.*/
position: relative; /*relative๋ฅผ ์ด์ฉํด ๋ง๋๊ธฐ ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
top: -7px;
}
.slide .control li {
display: inline-block; /*๋ง๋๊ธฐ๊ฐ ํ ์ค๋ก ๋ณด์ด๊ฒ ํจ, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ง๋๊ธฐ ์ฌ์ด ์ฌ๋ฐฑ์ด ์๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.*/
padding: 0 3px; /*๋ง๋๊ธฐ ์ข์ฐ 3px*/
}
.slide .control li a { /*์ ๋ง๋ค๊ธฐ*/
display: block;
width: 50px;
height: 3px;
background: rgba(255, 255, 255, 0.5); /*๋ง๋๊ธฐ ํฌ๋ช
(๋นํ์ฑํ)*/
border: none; /*์ ํ
๋๋ฆฌ ์์ ๊ธฐ*/
}
.slide .control li.on a { /*๋ง๋๊ธฐ ํฐ์ (ํ์ฑํ)*/
background: #fff;
}
.slide .control > div > div {
position: absolute;
right: 0;
}
.slide .control > div > div a {
overflow: hidden; /*ํ
์คํธ๊ฐ ๋ฒ์๋ฅผ ๋๊ฐ์ง ์๋๋ก ๋ง๋ฌ*/
display: inline-block;
width: 8px;
height: 9px;
/*์ ์ฝ๋๋ง ํ๋ฉด ์ฌ๊ฐํ ๋ฐ์ค์ ๋ง๋๊ธฐ๊ฐ ์ ์๋๋ก ์ด๊ธ๋๋ค.๊ทธ๊ฑด div์ ul์ด ์ด๊ธ๋๊ฑฐ๋ค.*/
background:url("../img/sp_com.png") no-repeat center;
margin: 0 0 0 7px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ ์ฃผ๊ธฐ*/
opacity: 0.5; /*๋ถํฌ๋ช
๋*/
}
.slide .control > div > div a.on { /*์์ด์ฝ ํ์ฑํ๋๋ฉด*/
opacity: 1; /*๋ถํฌ๋ช
๋*/
}
.slide .control > div > div a.pause {
background-position: -108px -60px;
}
.slide .control > div > div a.play {
background-position: -108px -72px;
}
/*์ฌ๋ผ์ด๋ ๋ฐ ์์ด์ฝ ๋*/
.visual .con > div { /*์ปจํ
์ธ ์์ ์๋ ๋ชจ๋ ์์๋ค์ ๋์ด๋ฅผ 690px*/
height: 690px;
}
.visual .con .slide {
background:url("../img/bg_main09.jpg") no-repeat center;
color: #fff;
font-size: 32px;
line-height: 46px; /*์ค ๊ฐ๊ฒฉ*/
vertical-align: middle;
}
.visual .con .slide p {
font-size: 20px;
padding: 19px 0;
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
.visual .con .slide .txt {
position: absolute;
left: 50%; /*ํ๋ฉด ์ค์ผ ๋ ์ ๋์ ์ผ๋ก ์์ง์ด๊ฒ๋*/
top: 148px;
text-align: left;
}
/*notice ์ ์์ ์์ญ ์ ํํด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
.notice > div {
width: 1180px; margin: 0 auto;
}
/*notice ์ ์์ ์์ญ ์ ํํด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
.notice > div {
width: 1180px; margin: 0 auto;
}
/*notice ์ ์์ ์์ญ ์ ํํด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
.notice > div {
width: 1180px; margin: 0 auto;
padding: 55px 0; /*์ํ ์ข์ฐ*/
}
์ ์๋๋ก 55px์ ์ฃผ์๋ค.
3๊ฐ์ง ๋ฐฐ๋์ ๊ณตํต์ ์ ์ฃผ๋ ์คํ์ผ์ ์ค ๊ฒ์ด๋ค.
๋ฐฐ๋ ํฌ๊ธฐ๋งํผ ํด๋ฆญ ์์ญ์ ์ค ๊ฒ์ด๋ค.
.notice > div .top > ul a {
display: block; width: 280px; height: 280px;
text-align: center; padding: 100px 0 0; /*์ ์ข์ฐ ํ*/ box-sizing: border-box;
font-size: 17px; color: #000;
}
๊ฐ ๋ฐฐ๋๋ง๋ค ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๋ฅผ ๋ฃ์.
.notice > div .top > ul li:nth-child(1) a { /*li์์ 1๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product01.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(2) a { /*li์์ 2๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product02.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(3) a { /*li์์ 3๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product04.jpg") no-repeat;
}
ํ์ฌ li ์์๋๋ฌธ์ ์ธ๋ก๋ก ์ด๋ฏธ์ง๋ค์ด ๋์ด๋๊ณ ์๋ค.
li์์๋ฅผ float๋ฅผ ์ด์ฉํ์ฌ ์์ผ๋ก ๋์ด์ํจ๋ค.
.notice > div .top > ul li {
float: left;
}
/*๋ฐฐ๋ ์์ญ ์์*/
/*notice ์ ์์ ์์ญ ์ ํํด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
.notice > div {
width: 1180px; margin: 0 auto;
padding: 55px 0; /*์ํ ์ข์ฐ*/
}
.notice > div .top > ul a {
display: block; width: 280px; height: 280px;
text-align: center; padding: 100px 0 0; /*์ ์ข์ฐ ํ*/ box-sizing: border-box;
font-size: 17px; color: #fff; font-weight: bold;
}
.notice > div .top > ul li:nth-child(1) a { /*li์์ 1๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product01.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(2) a { /*li์์ 2๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product02.jpg") no-repeat;
color: #000;
}
.notice > div .top > ul li:nth-child(3) a { /*li์์ 3๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product04.jpg") no-repeat;
}
.notice > div .top > ul li {
float: left; padding: 0 20px 0 0;
}
/*๋ฐฐ๋ ์์ญ ๋*/
๊ฐ์ด๋ฐ ๋ฐฐ๋๋ง ๊ธ์จ๊ฐ ๊ฒ์ ์์ด๊ณ ๋๋จธ์ง๋ ํฐ์์ผ๋ก ๋ง์ถ๋ค.
๊ทธ๋ฆฌ๊ณ ๊ฐ ๋ฐฐ๋ ์ ์ค๋ฅธ์ชฝ์ padding 20px์ ์ค์ ๋จ์ด์ง๊ฒ๋ ํ๋ค.
์ง๊ธ ๋ช๊ฐ๋ ์ฌ๋ผ์์๊ณ ๋ช๊ฐ๋ ๋ฐ์ผ๋ก ๋จ์ด์ ธ์๋ค.
์ด์ ๋ li์ float์ด ์๋ ๋ฐ๋ฉด, ul๊ณผ div์๋ float์ด ์๋ค.
.notice > div .top > ul {
float: left;
}
.notice > div .top > div {
float: left;
}ul, div๋ ๋ธ๋ญ ์์์ด๋ค. ๊ทธ๋ฌ๋ฏ๋ก ์ด ์์์ float : left๋ฅผ ์ฃผ์ด์ ๋๋ํ ์ ๋ ฌ์ํจ๋ค.
๊ฒ์ ์์ญ ๋ง๋ค๊ธฐ
div์์๋ก ์์ญ์ ๋ง๋ค๊ณ , ๋ฐฐ๊ฒฝ์ ์ฃผ๊ณ , ํ ์คํธ ์์ญ์ ๊ฐ์ด๋ฐ ์ ๋ ฌํ๊ฒ ๋ค.
.notice > div .top > div {
float: left;
width: 280px; height: 280px; background: #f2f0ed;
padding: 36px 20px 0;
box-sizing: border-box; /*์๋ ๊ณ์ฐ*/
}
ํ์ฌ ์ ๋ ฅ ์นธ ๋ถ๋ถ์ ๋ชจ์๋ฆฌ๊ฐ ๋ฅ๊ธ๊ฒ ๋์ด์๋ค. ์ด๊ฒ์ derault.css ๋๋ฌธ์ธ๋ฐ ์ด๊ฒ์ ์ญ์ ํด์ผ ํ๋ค.
default.css์ ์๋ ์คํ์ผ ์ค border-radius๋ฅผ ์ญ์ ํ๋ค.
h2์ ํฌ๊ธฐ์ ์์ ์ฃผ๊ณ ์ค ๊ฐ๊ฒฉ์ ์ด๊ธฐํํ์.
.notice > div .top > div h2 {
font-size: 17px; color: #000;
text-align: center; line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
๋๋จธ์ง๋ฅผ ๋ง๋ค์ด๋ณด์.
.notice > div .top > div h2 {
font-size: 17px; color: #000;
text-align: center; line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
padding: 0 0 29px;
}
.notice > div .top > div select,
.notice > div .top > div input{
width: 100%; height: 45px; border: none;
text-indent: 20px; /*๋ค์ฌ์ฐ๊ธฐ*/
}
.notice > div .top > div input::-webkit-input-placeholder {
color: #949394; font-size: 14px;
}
.notice > div .top > div a {
display: block; height: 45px; line-height: 45px; text-align: center; color: #fff;
background: #2d5b79; font-size: 15px;
margin: 20px 0 0;
}
.notice > div .top > div div {
padding: 0 0 10px;
}
์ด์ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๋ฉด ์์ด ๋ฐ๋๋ ์คํ์ผ์ ์ ์ฉํด๋ณด์.
<ul>
<li><a href="#a">ํ
๋ง ๊ฐค๋ฌ๋ฆฌ<span>ํ์์ ํ๋ณตํ ์ถ์ ๊ณต๊ฐ ์ด์ผ๊ธฐ</span></a></li>
<li><a href="#a">๋ธ๋ก๊ทธ<span>์์ํ ํ์ ์ธํ
๋ฆฌ์ด ์ด์ผ๊ธฐ</span></a></li>
<li><a href="#a">๋๋ฆฌ์ ์ฐพ๊ธฐ<span>๊ฐ๊น์ด ํ์ํ๋ฐ์ฝ ๋งค์ฅ ์ด์ผ๊ธฐ</span></a></li>
</ul>.notice > div .top > ul a {
display: block; width: 280px; height: 280px;
text-align: center; padding: 100px 0 0; /*์ ์ข์ฐ ํ*/ box-sizing: border-box;
font-size: 17px; color: #fff; font-weight: bold;
transition: all 0.5s;
}
.notice > div .top > ul a span {
position: relative; /*ํ์ฌ ์์น๋ก๋ถํฐ*/
top: 10px; opacity: 0;
display: block;
transition: all 0.5s;
padding: 20px 0 0 ; font-weight: normal; font-size: 14px;
}
.notice > div .top > ul a:hover {
background: rgba(45,91,121,0.3);
}
.notice > div .top > ul a span {
font-weight: normal; font-size: 14px; padding: 20px 0 0;
}
.notice > div .top > ul a:hover span {
top: 0; opacity: 1;
}
.notice > div .top > ul li:nth-child(1) { /*li์์ 1๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product01.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(2) { /*li์์ 2๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product02.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(2) a {
color: #000;
}
.notice > div .top > ul li:nth-child(3) { /*li์์ 3๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product04.jpg") no-repeat;
}
<span>์์์๋ ์ ๋งํ ์คํ์ผ์ ๋ค ๋ฃ๊ณ , ๋ณํ๋๋ ๊ฒ๋ง a:hover span์ ๋ฃ๋๋ค.
.notice > div .top > ul a span {
position: relative; /*ํ์ฌ ์์น๋ก๋ถํฐ*/
top: 10px; opacity: 0;
display: block;
transition: all 0.5s;
padding: 20px 0 0 ; font-weight: normal; font-size: 14px;
}
.notice > div .top > ul a:hover span {
/*๋ณํ๋๋ ๊ฒ*/
top: 0; /*๋ฐ์ ๋จ์ด์ง ๊ฑธ ์ฌ๋ฆฌ๋ ๊ฒ*/
opacity: 1; /*์๋ณด์ด๋ ๊ฒ์ ๋ณด์ด๊ฒ*/
}๋๋ณด๊ธฐ
<!DOCTYPE html>
<html lang="ko"> <!--์ ๊ทผ์ฑ์ ์งํค๊ธฐ ์ํด์ lang์์์ ko (ํ๊ตญ์ด ์ฌ์ดํธ)-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ ํ๋ฐ์ฝ</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<a href="#contents" class="skip">๋ณธ๋ฌธ๋ฐ๋ก๊ฐ๊ธฐ</a>
<header>
<!--๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ ๊ทธ ์ด๋ฏธ์ง๋ฅผ ์ค๋ช
ํ ๋์ฒด ํ
์คํธ๊ฐ ํ์ํ๋ค.-->
<h1><a href="#a">ํ์ํ๋ฐํฌ</a></h1>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๋๋ฉ๋ด</h2>
<nav class="lnb"> <!--๋ค๋น๊ฒ์ด์
๋ฉ๋ด-->
<ul>
<li><a href="#a"><span>์๊ณต์ฌ๋ก</span></a></li>
<li><a href="#a"><span>์ ํ์ ๋ณด</span></a></li>
<li><a href="#a"><span>๊ณ ๊ฐ์ผํฐ</span></a></li>
<li><a href="#a"><span>๊ธฐ์
์๊ฐ</span></a></li>
<li><a href="#a"><span>์ง์๊ฐ๋ฅ๊ฒฝ์</span></a></li>
<li><a href="#a"><span>์ฌ์
๋ถ์ผ</span></a></li>
</ul>
</nav>
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๋ จ์๋น์ค</h2>
<nav class="spot">
<ul>
<li><a href="#a">๋งค์ฅ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์ ํ์ฐพ๊ธฐ</a></li>
<li><a href="#a">์นดํ๋ก๊ทธ</a></li>
<li><a href="#a">SITEMAP</a></li>
<li><a href="#a">ENGLISH</a></li>
</ul>
</nav>
<!-- ๋น์ฃผ์ผ ์์ญ ์์ -->
<section class="visual slide">
<!--์น ์ ๊ทผ์ฑ ์ง์นจ์ ์ํด์ ๋์์ธ์ด ์น์ด ์๋ณด์ด๋๋ผ๋ ๋งํฌ์
ํ ๋ ์ ๋ชฉ์ด ํ์ํ๋ค.-->
<h2 class="hide">๊ด๊ณ ์์ญ</h2>
<a href="#a" class="prev">์ด์ </a>
<a href="#a" class="next">๋ค์</a>
<div class="control">
<div>
<div>
<a href="#a" class="play on">์์</a>
<a href="#a" class="pause">์ผ์์ ์ง</a>
</div>
<ul>
<li class="on"><a href="#a">ํ์ํ๋ฐ์ฝ ๋น์ </a></li>
<li><a href="#a">xxx ์ ์ํ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
</ul>
</div>
</div>
<div class="con">
<div class="slide">
<div class="txt">
๊ฐ๊ตฌ์์ฌ์์<br>
์ธํ
๋ฆฌ์ด ์์ฌ๊น์ง
<p>ํ์ํ๋ฐ์ฝ ํธ๋ฆฌํ๊ณ ํ๋ณตํ ๊ณต๊ฐ์ ๋ง๋ค์ด ๊ฐ๋๋ค.</p>
</div>
</div>
</div>
</section> <!-- ๋น์ฃผ์ผ ์์ญ ๋ -->
<!-- ์ ํ ์ ๋ณด ์์ญ ์์ -->
<section class="product">
<h2 class="hide">์ ํ์ ๋ณด</h2> <!-- ๊ฐ์์ ์ ๋ณด -->
<ul>
<li><a href="#a">๋ฐ๋ฅ์ฌ</a></li>
<li><a href="#a">๋ฒฝ๋ฉด์ฌ</a></li>
<li><a href="#a">๋์ด์ฌ</a></li>
<li><a href="#a">๋ชฐ๋ฉ์ฌ</a></li>
<li><a href="#a">์ํธ์ฌ</a></li>
<li><a href="#a">๊ฐ๊ตฌ์ฌ</a></li>
</ul>
</section> <!-- ์ ํ ์ ๋ณด ์์ญ ๋ -->
<!-- ๋งค๊ฑฐ์ง ์์ญ ์์ -->
<section class="slide magazine">
<h2>MAGAZINE</h2>
<p>ํ์ํ๋ฐ์ฝ์ ๋ค์ํ ์์์ ๋ง๋๋ณด์ธ์.</p>
<a href="#a" class="prev">์ด์ </a>
<a href="#a" class="next">๋ค์</a>
<div class="control">
<div>
<div>
<a href="#a" class="play on">์์</a>
<a href="#a" class="pause">์ผ์์ ์ง</a>
</div>
<ul>
<li class="on"><a href="#a">ํ์ํ๋ฐ์ฝ ๋น์ </a></li>
<li><a href="#a">xxx ์ ์ํ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
<li><a href="#a">์ค๋ช
ํ
์คํธ</a></li>
</ul>
</div>
</div>
<div class="slide_box"> <!-- ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง div ์์ญ ์ก๊ธฐ / ๊ฐ๊ฐ์ slide๊ฐ ๋ค์ด๊ฐ ๊ฒ์ด๋ค. -->
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
<div>
<!-- ์บก์ณ๋ณธ ์ ๋นจ๊ฐ ๋ฐ์ค / ์ด๋ก ๋ฐ์ค ์์ญ ๋๋๊ธฐ -->
<div class="left">
<div> <!--ํ
์คํธ ์์ญ-->
<h3>๋ผ์๋ผ APP<span>[ํฐ์นํฐ์น]</span></h3>
<p>ํฐ์น ํ๋ฒ์ผ๋ก ์ธํ
๋ฆฌ์ด ์๋ฎฌ๋ ์ด์
</p>
<a href="#a">์์ธํ๋ณด๊ธฐ</a>
</div>
<img src="/img/sample.jpg" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
</div>
<!-- ๋ฆฌ์คํธ ์์ญ์ด๋๊น div๋ก ํด๋ ๋๋ก ul๋ก ํด๋ ๋๋ค. -->
<ul class="right">
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(21).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๊ฐ๊ตฌ์ฌ>์คํ ๋ฆฌ๋ณด๋ ๋ฐ๋>๋ฐ๋PET</strong>
ํ
๋ผ์ฝํ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(23).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฒฝ๋ฉด์ฌ>์ฝ๋ ํธ์>์ฝ๋ ํธ์</strong>
์ฐ์ ๋ํ์ดํธ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(24).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋ฐ๋ฅ์ฌ>sb๋ง๋ฃจ>๋ฆฌ์ผํ
์ค์ฒ</strong>
๋๋ด์ธ๋ด์คํฌ
</div>
</a>
</li>
<li>
<a href="#a">
<div>
<img src="/img/thumbview%20(18).do" alt=""> <!-- ์ด๋ฏธ์ง ์์ ์ค๋ช
๊ธ์ด ์์ผ๋ ๋์ฒดํ
์คํธ๋ ๋ฃ์ง ์๋๋ค. -->
<strong>๋์ด์ฌ>๋ฐฉ๋ฌธ๋์ด>ํ๋ฆฌ๋ฏธ์๋์ด</strong>
HMA-P01(๋์์ธํ์ดํผ)
</div>
</a>
</li>
</ul>
</div>
</div>
</section> <!-- ๋งค๊ฑฐ์ง ์์ญ ๋ -->
<!-- ๋ฐฐ๋ ์์ญ ์์ -->
<section class="notice">
<div class="clear"> <!--๊ฐ์ด๋ฐ ์ ๋ ฌ์ฉ-->
<div class="top"> <!--๋ฒ ๋ ์์ญ ์ค ์๋ถ๋ถ-->
<ul>
<li><a href="#a">ํ
๋ง ๊ฐค๋ฌ๋ฆฌ<span>ํ์์ ํ๋ณตํ ์ถ์ ๊ณต๊ฐ ์ด์ผ๊ธฐ</span></a></li>
<li><a href="#a">๋ธ๋ก๊ทธ<span>์์ํ ํ์ ์ธํ
๋ฆฌ์ด ์ด์ผ๊ธฐ</span></a></li>
<li><a href="#a">๋๋ฆฌ์ ์ฐพ๊ธฐ<span>๊ฐ๊น์ด ํ์ํ๋ฐ์ฝ ๋งค์ฅ ์ด์ผ๊ธฐ</span></a></li>
</ul>
<div>
<h2>์ ํ ์ฐพ๊ธฐ</h2>
<div>
<select title="๊ฒ์์กฐ๊ฑด ๊ฒ์">
<option>์ ํ ์ ์ฒด๊ฒ์</option>
</select>
</div>
<div><input type="search" title="๋ชจ๋ธ๋ช
์
๋ ฅ" placeholder="๋ชจ๋ธ๋ช
์ ์
๋ ฅํ์ธ์."></div>
<div><a href="#a">๊ฒ์ํ๊ธฐ</a></div>
</div>
</div>
</div>
</section><!-- ๋ฐฐ๋ ์์ญ ๋ -->
</header>
</body>
</html>
๋๋ณด๊ธฐ
/*HTML:5 ์ ๋ํ ์ด๊ธฐํ ์์
ํ์ผ*/
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* Reset */
* {outline:0 !important;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html, body{width:100%;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{width:100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body,input,select,textarea,button {border:none;font-size:12px; font-family:'Noto Sans KR', sans-serif;color:#727272;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#000;text-decoration:none;}
/* Form */
textarea { border:1px solid #dbdbdb;}
/*select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff;border-radius: 5px;}*/
select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
/*input[type=date],textarea {width:100%; height:30px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; border-radius: 5px; transition: all 0.5s; vertical-align:middle;}*/
input[type=date],textarea {width:100%; height:30px; font-size:13px; color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; transition: all 0.5s; vertical-align:middle;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size:12px; line-height:100%;}
textarea { padding:5px 0;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272;}
input[type=tel][readonly],
input[type=text][readonly],
input[type=password][readonly],
input[type=email][readonly],
input[type=search][readonly],
input[type=tel][disabled],
input[type=text][disabled],
input[type=password][disabled],
input[type=search][disabled],
input[type=email][disabled]{background:#eaeaea; border-color:#c0c0c0; color:#666; -webkit-appearance:none;font-size:12px;}
textarea[readonly],
textarea[disabled]{padding:11px; font-size:16px; color:#666; font-weight:normal; line-height:140%; height:78px; background:#eaeaea;border:1px solid #c0c0c0;}
.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}
/*์ถ๊ฐ*/
/*์ฝ๋ ์์ผ๋ก๋ ์ฝํ์ ธ์ผ ํ์ง๋ง, ํ๋ฉด์๋ ํ์์๋ ๊ฒ*/
.hide {
/* display: none; ํ๋ฉด๋ญ๋
๊ธฐ๊ฐ ์๋์ ์ํด์ ์ฌ์ฉX */
position: absolute;
left: -5000px; /*ํ๋ฉด ๋ฐ์ผ๋ก position์ ๋ ๋ฆฐ๋ค.*/
}
/*๋ณธ๋ฌธ ๋ฐ๋ก๊ฐ๊ธฐ๋ default์ ๋ฃ์ด์ ํ์ฉํ ๋ ์ธ ์ ์๊ฒ ํ๋ค.*/
.skip { position: absolute; left: 0; top: -100px; width: 100%; height: 50px; background: black; color: #fff; text-align: center; font-size: 14px; transition: 0.5s;}
.skip:focus { top: 0;}
๋๋ณด๊ธฐ
/*์ ํ ์ฌ์ด์ฆ๋ณด๋ค ์ค๋ฉด ๊ฐ๋ก ์คํฌ๋กค์ด ์๊ธฐ๋๋ก*/
body {
min-width: 1680px;
}
/*ํค๋ ์์ญ*/
header {
text-align: center; /*๋๋ฉ๋ด ๊ฐ์ด๋ฐ ์ ๋ ฌ*/
height: 81px; /*ํค๋ ๋์ด*/
/*overflow: ; ํ๋จ ๋ฉ๋ด ํ์*/
position: relative; /*์ ์ฒด ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ ์ ํด์ ธ ์๊ฒ ํ๋ค.=> ๊ฒน์ณ์ง๋ ํ์์ด ์์ด์ง๋ค.*/
}
header h1 {
position: absolute;
left: 50px; /*์ผ์ชฝ ์ฌ๋ฐฑ*/
top: 0; /*์ค๋ฅธ์ชฝ*/
padding: 14px 0 0; /*์์ชฝ ์ฌ๋ฐฑ*/
}
header h1 a {
/*a์ ํฌ๊ธฐ๋ฅผ ์ฃผ๋ ์ด์ : ๋ก๊ณ ๋ฅผ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์*/
display: block; /*a์์๋ lnline์ด๋ผ ๊ฐ๋ก,์ธ๋ก๊ฐ ์์กํ ์๋ค.
ํด๋ฆญ ์์ญ ์ค์ */
color: transparent; /*ํ
์คํธ ํฌ๋ช
์ ์ค์ */
width: 117px; /*์ด๋ฏธ์ง ๊ฐ๋ก ํฌ๊ธฐ*/
height: 50px; /*์ด๋ฏธ์ง ์ธ๋ก ํฌ๊ธฐ*/
background: url(../img/sp_com.png) no-repeat -426px 0; /*์ด๋ฏธ์ง ์ขํ ์ฐ๊ธฐ*/
}
header .spot {
position: absolute;
right: 50px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ*/
top: 0;
}
header .lnb li {
/* float: left; float์ text-align:center๊ฐ ์๋จนํ๋ค. */
display: inline-block; /*์ธ๋ผ์ธ์ ์์ฑ์ด ์๋ ๋ธ๋ญ, text-align:center๊ฐ ๋จนํ๋ค.
๋จ์ : ์ ์ฉ๋๋ ์ฝ๋ ์ฌ์ด์ ์ฌ๋ฐฑ์ด ์๊ธด๋ค. CSS๋ก ๋ณด์ํ ์ ์๋ค. */
position: relative;
}
header .lnb li a {
display: block;
height: 81px; /*ํค๋ ๋์ด*/
padding: 0 30px; /*์ข์ฐ ์ฌ๋ฐฑ*/
font-size: 18px;
color: #333;
line-height: 81px; /*๊ธ์ ๋์ด*/
}
/* ๊ธฐํ ๋ฉ๋ชจ ํ์ */
header .spot {
position: absolute;
right: 50px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ*/
top: 0;
}
header .spot li {
position: relative; /* ? */
float: left;
}
header .spot li:nth-child(n+2):before { /*li 2๋ฒ๋ถํฐ ์ดํ ๋ชจ๋ li*/
content: "";
position: absolute;
left: 10px;
top: 38px;
width: 1px;
height: 7px;
background: #cccccc;
}
header .spot li a {
/*a์ ํฌ๊ธฐ๋ฅผ ์ฃผ๋ ์ด์ : ๊ธ์๋ฅผ ํด๋ฆญํ๊ธฐ ๋๋ฌธ์*/
display: block;
height: 81px;
padding: 0 0 0 20px; /*์ฒซ ๋ฒ์งธ:์,์๋ / ๋ ๋ฒ์งธ:์ผ์ชฝ,์ค๋ฅธ์ชฝ*/
line-height: 81px;
font-size: 14px;
}
header .lnb li a:hover { /*๋ง์ฐ์ค ํธ๋ฒ ์ ์ ๋ณ๊ฒฝ*/
color: #2d5b79;
font-weight: bold;
/*text-decoration: underline;*/
}
header .lnb li a span {
position: relative;
}
header .lnb li a:hover span:after {
position: absolute;
left: 0;
bottom: -9px; /*๋ฐ์ค ๊ฐ๊ฒฉ ์ฃผ๊ธฐ*/
content: "";
display: block;
height: 1px;
background: #2d5b79;
width: 100%;
}
/*๋น์ฃผ์ผ ์์ญ*/
.visual {
position: relative; /*๊ธฐ์ค์ขํ*/
padding: 0 50px;
}
/*์ฌ๋ผ์ด๋ ๋ฐ ์์ด์ฝ*/
.slide .prev, /*๊ณตํต ์์ ๋ฌถ๊ธฐ*/
.slide .next {
display: block;
position: absolute;
top:50%; width: 25px;
height: 47px;
transform: translateY(-50%);
background: url("../img/sp_com.png") no-repeat;
color: transparent; /*์ด์ ,๋ค์ ๊ธ์จ ์์ ๊ธฐ*/
z-index: 10; /*์์ด์ฝ ์ด๋ฏธ์ง ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
}
.slide .prev {
left: 82px; /*50+32 ์ฌ๋ฐฑ*/
background-position: -128px -60px;
}
.slide .next {
right: 82px; /*50+32 ์ฌ๋ฐฑ*/
background-position: -158px -60px;
}
.slide .control {
position: absolute;
left: 0;
bottom: 55px;
text-align: center; /*ํ
์คํธ๊ฐ ์ค๊ฐ์ด ์๋๋ค. ์๋? position์ด absolute์ด๋ฉด ๋ธ๋ก์ ๊ฐ๋ก ์ฌ์ด์ฆ๊ฐ ์ด๊ธฐํ๋์*/
width: 100%; /*๊ทธ๋์ ๊ฐ๋ก์ฌ์ด์ฆ๋ฅผ 100% ์ค์ ํ์.*/
}
.slide .control a {
color: transparent; /*๊ธ์ ํฌ๋ช
ํ๊ฒ*/
/*border: 1px solid red; !*์์ ์ *!*/
}
.slide .control > div {
display: inline-block; /*๊ฐ์ด๋ฐ ์ ๋ ฌ ์ํด*/
position: relative;
padding: 0 45px 0 0;
}
.slide .control ul {
display: inline-block; /*๋ง๋๊ธฐ๊ฐ ํ ์ค๋ก ๋ณด์ด๊ฒ ํจ, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ง๋๊ธฐ ์ฌ์ด ์ฌ๋ฐฑ์ด ์๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.*/
font-size: 0; /*์ด๋ ๊ฒ ํ๋ฉด ๋ง๋๊ธฐ ์ฌ๋ฐฑ์ด ์์ด์ง๋ค. ์ด ์ํ์์ ์ข์ฐ ์ฌ๋ฐฑ์ ์ค๋ค.*/
position: relative; /*relative๋ฅผ ์ด์ฉํด ๋ง๋๊ธฐ ์๋ก ์ฌ๋ฆฌ๊ธฐ*/
top: -7px;
}
.slide .control li {
display: inline-block; /*๋ง๋๊ธฐ๊ฐ ํ ์ค๋ก ๋ณด์ด๊ฒ ํจ, ๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ง๋๊ธฐ ์ฌ์ด ์ฌ๋ฐฑ์ด ์๊ฒ ๋ง๋๋ ๊ฒ์ด๋ค.*/
padding: 0 3px; /*๋ง๋๊ธฐ ์ข์ฐ 3px*/
}
.slide .control li a { /*์ ๋ง๋ค๊ธฐ*/
display: block;
width: 50px;
height: 3px;
background: rgba(255, 255, 255, 0.5); /*๋ง๋๊ธฐ ํฌ๋ช
(๋นํ์ฑํ)*/
border: none; /*์ ํ
๋๋ฆฌ ์์ ๊ธฐ*/
}
.slide .control li.on a { /*๋ง๋๊ธฐ ํฐ์ (ํ์ฑํ)*/
background: #fff;
}
.slide .control > div > div {
position: absolute;
right: 0;
}
.slide .control > div > div a {
overflow: hidden; /*ํ
์คํธ๊ฐ ๋ฒ์๋ฅผ ๋๊ฐ์ง ์๋๋ก ๋ง๋ฌ*/
display: inline-block;
width: 8px;
height: 9px;
/*์ ์ฝ๋๋ง ํ๋ฉด ์ฌ๊ฐํ ๋ฐ์ค์ ๋ง๋๊ธฐ๊ฐ ์ ์๋๋ก ์ด๊ธ๋๋ค.๊ทธ๊ฑด div์ ul์ด ์ด๊ธ๋๊ฑฐ๋ค.*/
background:url("../img/sp_com.png") no-repeat center;
margin: 0 0 0 7px; /*์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ ์ฃผ๊ธฐ*/
opacity: 0.5; /*๋ถํฌ๋ช
๋*/
}
.slide .control > div > div a.on { /*์์ด์ฝ ํ์ฑํ๋๋ฉด*/
opacity: 1; /*๋ถํฌ๋ช
๋*/
}
.slide .control > div > div a.pause {
background-position: -108px -60px;
}
.slide .control > div > div a.play {
background-position: -108px -72px;
}
/*์ฌ๋ผ์ด๋ ๋ฐ ์์ด์ฝ ๋*/
.visual .con > div { /*์ปจํ
์ธ ์์ ์๋ ๋ชจ๋ ์์๋ค์ ๋์ด๋ฅผ 690px*/
height: 690px;
}
.visual .con .slide {
background:url("../img/bg_main09.jpg") no-repeat center;
color: #fff;
font-size: 32px;
line-height: 46px; /*์ค ๊ฐ๊ฒฉ*/
vertical-align: middle;
}
.visual .con .slide p {
font-size: 20px;
padding: 19px 0;
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
.visual .con .slide .txt {
position: absolute;
left: 50%; /*ํ๋ฉด ์ค์ผ ๋ ์ ๋์ ์ผ๋ก ์์ง์ด๊ฒ๋*/
top: 148px;
text-align: left;
}
/*๋ฐฐ๋ ์์ญ ์์*/
.notice { padding: 0 0 100px;} /*์์๋ก ํ๋จ ์ฌ๋ฐฑ ์ฃผ๊ธฐ*/
.notice > div {
width: 1180px; margin: 0 auto;
padding: 55px 0; /*์ํ ์ข์ฐ*/
}
.notice > div .top > ul {
float: left;
}
.notice > div .top > div {
float: left;
width: 280px; height: 280px; background: #f2f0ed;
padding: 36px 20px 0;
box-sizing: border-box; /*์๋ ๊ณ์ฐ*/
}
.notice > div .top > ul a {
display: block; width: 280px; height: 280px;
text-align: center; padding: 100px 0 0; /*์ ์ข์ฐ ํ*/ box-sizing: border-box;
font-size: 17px; color: #fff; font-weight: bold;
transition: all 0.5s;
}
.notice > div .top > ul a span {
position: relative; /*ํ์ฌ ์์น๋ก๋ถํฐ*/
top: 10px; opacity: 0;
display: block;
transition: all 0.5s;
padding: 20px 0 0 ; font-weight: normal; font-size: 14px;
}
.notice > div .top > ul a:hover {
background: rgba(45,91,121,0.3);
}
.notice > div .top > ul a span {
font-weight: normal; font-size: 14px; padding: 20px 0 0;
}
.notice > div .top > ul a:hover span {
top: 0; opacity: 1;
}
.notice > div .top > ul li:nth-child(1) { /*li์์ 1๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product01.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(2) { /*li์์ 2๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product02.jpg") no-repeat;
}
.notice > div .top > ul li:nth-child(2) a {
color: #000;
}
.notice > div .top > ul li:nth-child(3) { /*li์์ 3๋ฒ์งธ ์์ a ์ ๋ฐฐ๊ฒฝ*/
background: url("../img/product04.jpg") no-repeat;
}
.notice > div .top > ul li {
float: left; padding: 0 20px 0 0;
}
.notice > div .top > div h2 {
font-size: 17px; color: #000;
text-align: center; line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
padding: 0 0 29px;
}
.notice > div .top > div select,
.notice > div .top > div input{
width: 100%; height: 45px; border: none;
text-indent: 20px; /*๋ค์ฌ์ฐ๊ธฐ*/
}
.notice > div .top > div input::-webkit-input-placeholder {
color: #949394; font-size: 14px;
}
.notice > div .top > div a {
display: block; height: 45px; line-height: 45px; text-align: center; color: #fff;
background: #2d5b79; font-size: 15px;
margin: 20px 0 0;
}
.notice > div .top > div div {
padding: 0 0 10px;
}
/*๋ฐฐ๋ ์์ญ ๋*/
๋๋ณด๊ธฐ
/* ์ ํ ์ ๋ณด */
/* ์ ํ ์ ๋ณด ์์ญ ํฌ๊ธฐ 64*52*/
.product a {
color: #001829;
font-size: 15px;
display: block; /*block ์์์ ํน์ง ๊ฐ๋ก ์ฌ์ด์ฆ๋ 100%์ด๋ค.*/
}
.product a:hover { /*๊ธ์ ์์ด์ฝ์ ์ปค์ ๊ฐ๊น์ด ํ์ ๋*/
color: #2d5b79; /*์ ๋ฐ๋๊ฒ*/
font-weight: bold; /*๊ตต๊ธฐ ๋ฐ๋๊ฒ*/
}
.product a:before { /*a์์ ์ด์ */
content: ""; /*๊ฐ์์ ์ปจํ
์ธ ์์ฑ*/
background: url("../img/sp_com.png") no-repeat; /*๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง*/
/*๊ฐ์ ๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ถ์ฌ*/
display: block;
width: 64px;
height: 52px; /*์ด ์ฌ์ด์ฆ๋ก display block ํ๊ธฐ ๋๋ฌธ์ ์ฌ์ด์ฆ ๋ถ์ฌ๊ฐ ๊ฐ๋ฅ ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ก ์ธ๋ก ์ฌ์ด์ฆ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ๋์จ๋ค.*/
margin: 0 0 20px; /*์ ์ข์ฐ ํ*/
}
.product li { /*li ๊ฐ๋ก ๋ฐฐ์น*/
/*float: left;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
text-align: center;
padding: 0 55px;
display: inline-block; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
}
.product ul {
/*block ์์์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์กฐ๊ฑด์ ๊ฐ๋ก์ฌ์ด์ฆ๊ฐ ์์ด์ผ ํ๊ณ margin 0 auto๊ฐ ์์ด์ผ ํ๋ค.*/
/*width: 1044px;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*margin: 0 auto;*/ /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํด ๋บ๋ค.*/
/*//block*/
padding: 46px 0 41px; /*์ ์ข์ฐ ํ*/
text-align: center; /*์ ๋์ ์ธ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์ํ ๊ฒ*/
font-size: 0;
}
.product li:nth-child(1) a:before { /*ํน์ ๋ฒ์งธ์ ์์ ์ ํ. ์ฌ๊ธฐ์๋ 1๋ฒ์งธ ์์์ด๋ค. ์ฆ ์ฒซ๋ฒ์งธ ์์์ a์ ์์์ ์ด์ ์์*/
/*a์์ ์ด์ ์์๋ฅผ ์ก๋ ์ด์ ๋ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ปจํธ๋กคํ๊ธฐ ์ํด์ ์ด๋ค.*/
background-position: -3px -118px;
}
.product li:nth-child(2) a:before {
background-position: -75px -118px;
}
.product li:nth-child(3) a:before {
background-position: -148px -118px;
}
.product li:nth-child(4) a:before {
background-position: -219px -118px;
}
.product li:nth-child(5) a:before {
background-position: -292px -118px;
}
.product li:nth-child(6) a:before {
background-position: -364px -118px;
}
/*a:before ์์์ ์ขํ ๋ฐ๊พธ๊ธฐ*/
/*a์ hoverํ์ ๋ ์ด์ ์ ์๋ ์ปจํ
์ธ ๋ฅผ ์ก๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ขํ ์ฌ์ค์ ํ๋ค. y์ถ์ด ๋ฐ๋์ด์ผ๊ฒ ๋ค.*/
.product li:nth-child(1) a:hover:before {
background-position: -3px -184px;
}
.product li:nth-child(2) a:hover:before {
background-position: -75px -184px;
}
.product li:nth-child(3) a:hover:before {
background-position: -148px -184px;
}
.product li:nth-child(4) a:hover:before {
background-position: -219px -184px;
}
.product li:nth-child(5) a:hover:before {
background-position: -292px -184px;
}
.product li:nth-child(6) a:hover:before {
background-position: -364px -184px;
}
/*๋งค๊ฑฐ์ง ์์ญ*/
.magazine {
background: #dfd9d1;
position: relative;
height: 670px;
overflow: hidden; /*๊ฐ๋ก์คํฌ๋กค ๋ง๊ธฐ*/
}
.magazine h2 { /*h2 ์ก์์ ์คํ์ผ์ฃผ๊ณ ๊ฐ์ด๋ฐ ์ ๋ ฌํ๊ธฐ*/
font-size: 30px;
color: #000;
text-align: center;
padding: 44px 0 15px; /*์ ์ข์ฐ ํ*/
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
}
.magazine p {
font-size: 14px;
color: #3a3b36;
line-height: 100%; /*์ค ๊ฐ๊ฒฉ ์ด๊ธฐํ*/
padding: 0 0 35px 0;
}
.magazine.slide .control { /*์ฌ๋ผ์ด๋ ๋ฐ์ค ์ ์ปจํธ๋กค ์์น ์์ */
bottom: 35px;
}
.magazine .slide_box > div { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
width: 1180px;
height: 430px;
position: absolute; left: 50%;
transform:translate(-50%,0);
top: 150px;
}
/*1๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(1) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: -1280px;
}
/*3๋ฒ์งธ slide div*/
.magazine .slide_box > div:nth-child(3) { /*์ฌ๋ผ์ด๋ ๋ฐ์ค์ ์์์ ์ก์์ ํฌ๊ธฐ ์ง์ */
margin-left: 1280px;
}
.magazine .slide_box .left {
float: left;
width: 800px; /*์ผ์ชฝ ์์ญ ํฌ๊ธฐ ์ก๊ธฐ*/
height: 430px;
overflow: hidden; /*์์์ ์ง์ ํฌ๊ธฐ ์์์ ๋์น์ง ์๊ฒ ์ก์*/
position: relative; /*ํ
์คํธ ์์ญ์ ๋ถ์ด๊ธฐ ์์*/
}
.magazine .slide_box .left img {
/*๋ถ๋ชจ left ํฌ๊ธฐ 800px์ ๋ง์ถฐ์ง,
์ธ๋ก ์ฌ์ด์ฆ๋ ์ด๋ฏธ์ง์ ๋ณธ๋ ์ฌ์ด์ฆ์ ๋น๋กํด์ ๋ง์ถฐ์ง๋ค. */
width: 100%;
}
.magazine .slide_box .left div {
background: rgba(0,0,0,0.5); /*ํฌ๋ช
๋*/
position: absolute;
right: 0;
top: 0;
width: 200px; /*ํฌ๊ธฐ ์ง์ */
height: 100%;
padding: 47px 20px 0; /*์ ์ข์ฐ ํ*/
box-sizing: border-box; /*padding๊ณผ ๊ฐ๋ก ์ฌ์ด์ฆ ์๋ ๊ณ์ฐ*/
}
.magazine .slide_box .left div h3 {
color: #fff;
font-size: 20px;
text-align: left;
line-height: 32px;
}
.magazine .slide_box .left div span {
font-weight: normal;
display: block;
text-align: left;
}
.magazine .slide_box .left div p {
font-size: 16px;
color: #fff;
text-align: left;
line-height: 24px;
padding: 9px 0 0; /*์ ์ข์ฐ ํ*/
}
.magazine .slide_box .left div a {
width: 160px; height: 45px;
border: 1px solid #fff;
display: block;
font-size: 16px; color: #fff; text-align: center; line-height: 45px;
position: absolute; right: 20px; bottom: 40px;
}
.magazine .slide_box .right {
float: right;
width: 380px; height: 430px; background: #fff;
padding: 20px 20px 0; /*์ ์ข์ฐ ํ*/
box-sizing: border-box; /*์๋ ๊ณ์ฐ*/
}
.magazine .slide_box .right li {
padding: 0 0 20px;
}
.magazine .slide_box .right li img {
width: 82px;
height: 82px;
}
.magazine .slide_box .right li a {
display: table; /*block์ table๋ก ๋ฐ๊ฟ*/
width: 100%;
}
.magazine .slide_box .right li a div {
display: table-cell; height: 82px; vertical-align: middle;
padding: 0 0 0 100px;
position: relative;
font-size: 16px; color: #333;
text-align: left;
}
.magazine .slide_box .right li a strong {
font-size: 13px; color: #000;
display: block;
}
.magazine .slide_box .right li a img {
position: absolute; left: 0; top: 0;
}
.magazine.slide .prev {
left: 50%;
margin: 30px 0 0 -640px;
}
.magazine.slide .next {
right: 50%;
margin: 30px -640px 0 0;
}
/*๋งค๊ฑฐ์ง ์์ญ ๋*/๋๋ณด๊ธฐ
- (๊ฐ์ข)_์ธํ๋ฐ_์นํผ๋ธ๋ฆฌ์ ๊ฐ ์๋ ค์ฃผ๋ ์ค๋ฌด ์น์ฌ์ดํธ ๋ฐ๋ผ๋ง๋ค๊ธฐ Season1
[๋ฌด๋ฃ] ์นํผ๋ธ๋ฆฌ์ ๊ฐ ์๋ ค์ฃผ๋ ์ค๋ฌด ์น์ฌ์ดํธ ๋ฐ๋ผ๋ง๋ค๊ธฐ Season1 - ์ธํ๋ฐ | ๊ฐ์
๊ธฐ์ด๋ ์ด์ ๊ทธ๋ง~! ์ค์ ์ฌ์ดํธ๋ฅผ ์ ์ํด๋ณด๊ณ ๊ทธ์์์ html๊ณผ css๊ฐ ์ด๋ป๊ฒ ์กฐํ๋กญ๊ฒ ์ ์๋๋์ง ์์๋ณด์ธ์~, - ๊ฐ์ ์๊ฐ | ์ธํ๋ฐ
www.inflearn.com
