웹디자인 기능사 실기 - COOKIT

COOKIT 사이트

웹디자인 기능사 실기 연습

원본 소스 보기

원본 사이트

---

1-1

코드보기

HTML

<div class="wrap">
    <header id="header" class="clearfix">
        <h1><a href="#"><img src="assets/images/logo.jpg" alt="Cookit"></a></h1>
        <nav class="nav">
            <ul class="clearfix">
                <li><a href="#">COOKIT 소개</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                    </ul>
                </li>
                <li><a href="#">COOKIT 메뉴</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                    </ul>
                </li>
                <li><a href="#">리뷰</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                    </ul>
                </li>
                <li><a href="#">이벤트</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                    </ul>
                </li>
                <li><a href="#">MY쿡킷</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <!-- //header  -->

    <section id="banner">
        <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 COOKIT 앱 런칭기념 이벤트">
    </section>
    <!-- //banner  -->

    <section id="content1" class="clearfix">
        <article class="left">
            <h2 class="title">우리집도 COOKIT 배송이 되나요?</h2>
            <p class="desc">배송이 가능한지 알려드려요</p>
            <a href="#" class="btn">배송지 검색</a>
        </article>
        <article class="right">
            <h2 class="title">7월 30일(화)에 받을 수 있어요</h2>
            <p class="desc">오전 7시까지 주문하시면 다음날 배송됩니다.</p>
            <a href="#" class="btn">63:28:32 <em>남은 시간</em></a>
        </article>
    </section>
    <!-- //content1  -->

    <section id="content2">
        <h2>실시간 베스트</h2>
        <div class="best">
            <figure>
                <img src="assets/images/best1.jpg" alt="평양식 어복쟁반">
                <figcaption>평양식 어복쟁반</figcaption>
            </figure>
            <figure>
                <img src="assets/images/best2.jpg" alt="새우주꾸미삼겹살">
                <figcaption>새우주꾸미삼겹살</figcaption>
            </figure>
            <figure>
                <img src="assets/images/best3.jpg" alt="방풀나물 아귀찜">
                <figcaption>방풀나물 아귀찜</figcaption>
            </figure>
        </div>
    </section>
    <!-- //content2  -->

    <footer id="footer">
    </footer>
    <!-- //footer  -->

</div>

css

/* reset */
* {
    margin: 0;
    padding: 0;
    font-size: 16px;
}
a {
    color: #333;
    text-decoration: none;
}
li {
    list-style: none;
}
.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* layout */
#wrap {
    width: 1000px;
    margin: 0 auto;
    background: #ccc;
    height: 1000px;
}
#header {
}
#banner {
}
#content1 {
}
#content2 {
}
#footer {
}

/* header */
#header h1 {
    float: left;
    padding: 15px 0 10px;
}
#header h1 img {
    width: 110px;
}
#header .nav {
    float: right;
    background: #ddd;
}
#header .nav li {
    float: left;
    position: relative;
    width: 140px;
    text-align: center;
}
#header .nav li a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding: 24px 20px 20px 20px;
}
#header .nav li ul.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 69;
}
#header .nav li ul.submenu li {
}
#header .nav li ul.submenu li a {
    padding: 10px;
    background: #888;
}

/* banner */
#banner {
}
#banner img {
    width: 100%;
}

/* content1 */
#content1 {
    margin-top: 20px;
}
#content1 .left {
    float: left;
    width: 49%;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 2%;
    background: #f2f2f2 url(../images/bg1.jpg) no-repeat right 20px center;
    background-size: 80px;
}
#content1 .left .title {
    font-size: 22px;
    padding-bottom: 5px;
}
#content1 .left .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}
#content1 .left .btn {
    background: url(../images/icon1.gif) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 3px;
}
#content1 .right {
    float: left;
    width: 49%;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 0;
    background: #f2f2f2 url(../images/bg2.jpg) no-repeat right 20px center;
    background-size: 80px;
}
#content1 .right .title {
    font-size: 22px;
    padding-bottom: 5px;
}
#content1 .right .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}
#content1 .right .btn {
    background: url(../images/icon2.gif) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 2px;
}
#content1 .right .btn em {
    font-size: 13px;
    color: #999;
    font-style: normal;
}                        

1-2

코드보기

HTML

<div class="wrap">
    <header id="header" class="clearfix">
        <h1><a href="#"><img src="assets/images/logo.jpg" alt="Cookit"></a></h1>
        <nav class="nav">
            <ul class="clearfix">
                <li><a href="#">COOKIT 소개</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                        <li><a href="#">sub-menu1</a></li>
                    </ul>
                </li>
                <li><a href="#">COOKIT 메뉴</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                        <li><a href="#">sub-menu2</a></li>
                    </ul>
                </li>
                <li><a href="#">리뷰</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                        <li><a href="#">sub-menu3</a></li>
                    </ul>
                </li>
                <li><a href="#">이벤트</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                        <li><a href="#">sub-menu4</a></li>
                    </ul>
                </li>
                <li><a href="#">MY쿡킷</a>
                    <ul class="submenu">
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                        <li><a href="#">sub-menu5</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <!-- //header  -->

    <section id="banner">
        <div class="slideList">
            <div class="slideImg">
                <h2>이미지1</h2>
                <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 Cookit 앱 런칭기념 이벤트1">
            </div>
            <div class="slideImg">
                <h2>이미지2</h2>
                <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 Cookit 앱 런칭기념 이벤트2">
            </div>
            <div class="slideImg">
                <h2>이미지3</h2>
                <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 Cookit 앱 런칭기념 이벤트3">
            </div>
        </div>
    </section>
    <!-- //banner  -->

    <section id="content1" class="clearfix">
        <article class="left">
            <h2 class="title">우리집도 COOKIT 배송이 되나요?</h2>
            <p class="desc">배송이 가능한지 알려드려요</p>
            <a href="#" class="btn">배송지 검색</a>
        </article>
        <article class="right">
            <h2 class="title">7월 30일(화)에 받을 수 있어요</h2>
            <p class="desc">오전 7시까지 주문하시면 다음날 배송됩니다.</p>
            <a href="#" class="btn">63:28:32 <em>남은 시간</em></a>
        </article>
    </section>
    <!-- //content1  -->

    <section id="content2">
        <h2>실시간 베스트</h2>
        <div class="best clearfix">
            <figure>
                <img src="assets/images/best1.jpg" alt="평양식 어복쟁반">
                <figcaption>평양식 어복쟁반</figcaption>
            </figure>
            <figure>
                <img src="assets/images/best2.jpg" alt="새우주꾸미삼겹살">
                <figcaption>새우주꾸미삼겹살</figcaption>
            </figure>
            <figure>
                <img src="assets/images/best3.jpg" alt="방풀나물 아귀찜">
                <figcaption>방풀나물 아귀찜</figcaption>
            </figure>
        </div>
    </section>
    <!-- //content2  -->

    <footer id="footer" class="clearfix">
        <h2><img src="assets/images/logo-2.jpg" alt="Cookit"></h2>
        <div class="foot">
            <ul>
                <li><a href="#">이용 약관</a></li>
                <li><a href="#">개인정보처리 방침</a></li>
                <li><a href="#">법적 고지</a></li>
                <li><a href="#">사업자정보 확인</a></li>
            </ul>
            <address>
                씨제이제일제당(주) 대표자 : 신현재<br>
                주소: 서울 중구 동호로 330 CJ 제일제당 센터(우)04560 사업자등록번호 : 104-86-09535<br>
                통신판매업신고 중구 제 07767호 개인정보보호책임자 : 류화정<br>
            </address>
        </div>
    </footer>
    <!-- //footer  -->
</div>
<!-- //wrap -->

css

/* reset */
* {
    margin: 0;
    padding: 0;
    font-size: 16px;
}
a {
    color: #333;
    text-decoration: none;
}
li {
    list-style: none;
}
.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* layout */
#wrap {
    width: 1000px;
    margin: 0 auto;
}

/* header */
#header h1 {
    float: left;
    padding: 15px 0 10px;
}
#header h1 img {
    width: 110px;
}
#header .nav {
    float: right;
    background: #ddd;
}
#header .nav li {
    float: left;
    position: relative;
    width: 150px;
    text-align: center;
}
#header .nav li a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding: 24px 20px 20px 20px;
}
#header .nav li a:hover {
    background: #ccc;
}
#header .nav li ul.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 67px;
    z-index: 100;
}
#header .nav li ul.submenu li {
}
#header .nav li ul.submenu li a {
    padding: 10px;
    background: #888;
}
#header .nav li ul.submenu li a:hover {
    background: #666;
}

/* banner */
#banner {
    height: 389px;
    overflow: hidden;
}
#banner img {
    width: 100%;
    display: block;
}

/* 상하
.slideList {
    position: relative; 
    width: 1000px; 
    height: 389px;
}
.slideList .slideImg {
    position: relative;
}
.slideList .slideImg h2 {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%,-50%); 
    background: rgba(0,0,0,0.4); 
    padding: 10px 30px;
    border-radius: 20px;
}
*/

/* 좌우 */
.slideList {
    position: relative;
    width: 3000px;
    z-index: 50;
}

.slideList .slideImg {
    position: relative;
    width: 1000px;
    float: left;
    /* 가로로 정렬 float width 지정 */
}

.slideList .slideImg h2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 30px;
    border-radius: 20px;
}

/* content1 */
#content1 {
    margin-top: 20px;
}
#content1 .left {
    float: left;
    width: 49%;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 2%;
    background: #f2f2f2 url(../images/bg1.jpg) no-repeat right 20px center;
    background-size: 80px;
}
#content1 .left .title {
    font-size: 22px;
    padding-bottom: 5px;
}
#content1 .left .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}
#content1 .left .btn {
    background: url(../images/icon1.gif) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 3px;
}
#content1 .right {
    float: left;
    width: 49%;
    padding: 20px;
    box-sizing: border-box;
    margin-right: 0;
    background: #f2f2f2 url(../images/bg2.jpg) no-repeat right 20px center;
    background-size: 80px;
}
#content1 .right .title {
    font-size: 22px;
    padding-bottom: 5px;
}
#content1 .right .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}
#content1 .right .btn {
    background: url(../images/icon2.gif) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 2px;
}
#content1 .right .btn em {
    font-size: 13px;
    color: #999;
    font-style: normal;
}

/* content2 */
#content2 {
    margin-top: 30px;
}
#content2 h2 {
    font-size: 24px;
    padding-bottom: 10px;
}
#content2 .best {
}
#content2 .best figure {
    float: left;
    width: 32%;
    margin-right: 2%;
}
#content2 .best figure img {
    width: 100%;
}
#content2 .best figure:last-child {
    margin-right: 0;
}
#content2 .best figcaption {
}

/* footer */
#footer {
    padding: 20px 0;
    background: #202020;
    margin-top: 30px;
}

#footer h2 {
    float: left;
    padding-left: 20px;
}

#footer h2 img {
    width: 150px;
}

#footer .foot {
    float: right;
    padding-right: 30px;
}

#footer .foot ul {
    padding-bottom: 10px;
}

#footer .foot ul li {
    display: inline;
}

#footer .foot ul li a {
    color: #fff;
    padding-right: 10px;
}

#footer .foot address {
    font-style: normal;
    color: #ccc;
}

js

// 내비게이션
$(".nav > ul > li").mouseover(function () {
    $(this).find(".submenu").stop().slideDown(200);
});
$(".nav > ul > li").mouseout(function () {
    $(this).find(".submenu").stop().slideUp(200);
});

//currentIndex = 0; 첫번째 이미지 : 0
//currentIndex = 1; 두번째 이미지 : -389
//currentIndex = 2; 세번째 이미지 : -778

// 이미지 슬라이드 (상하)
// var currentIndex = 0; //첫번째 이미지
// 
// setInterval(function(){
//     if(currentIndex < 2){
//         currentIndex++;
//     } else {
//         currentIndex = 0;
//     }
//     var slidePosition = currentIndex * (-389)+"px";
//     $(".slideList").animate({top: slidePosition},400);
//     
// }, 3000);

// 이미지 슬라이드 (좌우)
var currentIndex = 0;

setInterval(function () {
    if (currentIndex < 2) {
        currentIndex++;
    } else {
        currentIndex = 0;
    }
    var slidePosition = currentIndex * (-1000) + "px";
    $(".slideList").animate({ left: slidePosition }, 400);
}, 3000);              

1-3

코드보기

HTML

<div id="warp">
<header id="header" class="clearfix">
    <h1><a href="#"><img src="assets/images/logo.jpg" alt="Cookit"></a></h1>
    <nav class="nav">
        <ul class="clearfix">
            <li><a href="#">COOKIT 소개</a>
                <ul class="submenu">
                    <li><a href="#">sub-menu1</a></li>
                    <li><a href="#">sub-menu1</a></li>
                    <li><a href="#">sub-menu1</a></li>
                    <li><a href="#">sub-menu1</a></li>
                </ul>
            </li>
            <li><a href="#">COOKIT 메뉴</a>
                <ul class="submenu">
                    <li><a href="#">sub-menu2</a></li>
                    <li><a href="#">sub-menu2</a></li>
                    <li><a href="#">sub-menu2</a></li>
                    <li><a href="#">sub-menu2</a></li>
                </ul>
            </li>
            <li><a href="#">리뷰</a>
                <ul class="submenu">
                    <li><a href="#">sub-menu3</a></li>
                    <li><a href="#">sub-menu3</a></li>
                    <li><a href="#">sub-menu3</a></li>
                    <li><a href="#">sub-menu3</a></li>
                </ul>
            </li>
            <li><a href="#">이벤트</a>
                <ul class="submenu">
                    <li><a href="#">sub-menu4</a></li>
                    <li><a href="#">sub-menu4</a></li>
                    <li><a href="#">sub-menu4</a></li>
                    <li><a href="#">sub-menu4</a></li>
                </ul>
            </li>
            <li><a href="#">My쿡킷</a>
                <ul class="submenu">
                    <li><a href="#">sub-menu5</a></li>
                    <li><a href="#">sub-menu5</a></li>
                    <li><a href="#">sub-menu5</a></li>
                    <li><a href="#">sub-menu5</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
<!-- // header-->

<section id="banner">
    <div class="slideList">
        <div class="slideImg">
            <h2>이미지1</h2>
            <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 Cookit 앱 런칭기념 이벤트1">
        </div>
        <div class="slideImg">
            <h2>이미지2</h2>
            <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 Cookit 앱 런칭기념 이벤트2">
        </div>
        <div class="slideImg">
            <h2>이미지3</h2>
            <img src="assets/images/banner.jpg" alt="쿡킷을 더 편리하게 Cookit 앱 런칭기념 이벤트3">
        </div>
    </div>
</section>
<!-- // banner -->

<section id="content1" class="clearfix">
    <article class="left">
        <h2 class="title">우리집도 COOKIT 배송이 되나요?</h2>
        <p class="desc">배송이 가능한지 알려드려요</p>
        <a href="#" class="btn">배송지 검색</a>
    </article>
    <article class="right">
        <h2 class="title">7월 30일(화)에 받을 수 있어요</h2>
        <p class="desc">오전 7시까지 주문하시면 다음날 배송됩니다.</p>
        <a href="#" class="btn">63:28:32 <em>남은 시간</em></a>
    </article>
</section>
<!-- // content1 -->

<section id="content2">
    <div class="tab-menu">
        <div class="tab-btn">
            <ul>
                <li class="active"><a href="#">실시간 베스트</a></li>
                <li><a href="#">생생한 리뷰</a></li>
            </ul>
        </div>
        <div class="tab-cont">
            <div class="best clearfix">
                <figure>
                    <img src="assets/images/best1.jpg" alt="평양식 어복쟁반">
                    <figcaption>평양식 어복쟁반</figcaption>
                </figure>
                <figure>
                    <img src="assets/images/best2.jpg" alt="새우주꾸미삼겹살">
                    <figcaption>새우주꾸미삼겹살</figcaption>
                </figure>
                <figure>
                    <img src="assets/images/best3.jpg" alt="방풀나물 아귀찜">
                    <figcaption>방풀나물 아귀찜</figcaption>
                </figure>
            </div>
            <div class="best clearfix">
                <figure>
                    <img src="assets/images/best3.jpg" alt="평양식 어복쟁반">
                    <figcaption>방풀나물 아귀찜</figcaption>
                </figure>
                <figure>
                    <img src="assets/images/best2.jpg" alt="새우주꾸미삼겹살">
                    <figcaption>새우주꾸미삼겹살</figcaption>
                </figure>
                <figure>
                    <img src="assets/images/best1.jpg" alt="방풀나물 아귀찜">
                    <figcaption>평양식 어복쟁반</figcaption>
                </figure>
            </div>
        </div>
    </div>
</section>
<!-- // content2 -->

<footer id="footer" class="clearfix">
    <h2><img src="assets/images/logo-2.jpg" alt="Cookit footer logo"></h2>
    <div class="foot">
        <ul>
            <li><a href="#">이용 약관</a></li>
            <li><a href="#">개인정보처리 방침</a></li>
            <li><a href="#">법적 고지</a></li>
            <li><a href="#">사업자정보 확인</a></li>
        </ul>
        <address>
            씨제이제일제당(주) 대표자 : 신현재<br>
            주소: 서울 중구 동호로 330 CJ 제일제당 센터(우)04560 사업자등록번호 : 104-86-09535<br>
            통신판매업신고 중구 제 07767호 개인정보보호책임자 : 류화정<br>
        </address>
    </div>
</footer>
<!-- //footer-->
</div>
<!-- //warp-->

<!-- layer -->
<div class="layer_bg"></div>
<div class="layer">
<h2>제목</h2>
<a href="#" class="close">닫기</a>
</div>

css

/* reset */
* {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

a {
    color: #333;
    text-decoration: none;
}

li {
    list-style: none;
}

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* warp */
#warp {
    width: 1000px;
    margin: 0 auto;
}

/* header */
#header h1 {
    float: left;
    padding: 15px 0 10px;
}

#header h1 img {
    width: 110px;
}

#header .nav {
    float: right;
}

#header .nav li {
    position: relative;
    float: left;
    width: 150px;
    text-align: center;
}

#header .nav li a {
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 24px 20px 20px 20px;
}

#header .nav li a:hover {
    background: #ccc;
}

#header .nav li ul.submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 67px;
    z-index: 100;
}

#header .nav li ul.submenu li a {
    padding: 10px;
    background: #888;
}

#header .nav li ul.submenu li a:hover {
    background: #666;
}

/* banner */
#banner {
    height: 389px;
    overflow: hidden;
}

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

/* 상하
.slideList {
    position: relative; 
    width: 1000px; 
    height: 389px;
}
.slideList .slideImg {
    position: relative;
}
.slideList .slideImg h2 {
    position: absolute; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%,-50%); 
    background: rgba(0,0,0,0.4); 
    padding: 10px 30px;
    border-radius: 20px;
}
*/

/* 좌우 */
.slideList {
    position: relative;
    width: 3000px;
    z-index: 50;
}

.slideList .slideImg {
    position: relative;
    width: 1000px;
    float: left;
}

.slideList .slideImg h2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 30px;
    border-radius: 20px;
}

/* content1 */
#content1 {
    margin-top: 20px;
}

#content1 .left {
    float: left;
    width: 49%;
    padding: 20px;
    background: #f2f2f2 url(../images/bg1.jpg) no-repeat right 20px center;
    background-size: 80px;
    box-sizing: border-box;
    margin-right: 2%;
}

#content1 .left .title {
    font-size: 22px;
    padding-bottom: 5px;
}

#content1 .left .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}

#content1 .left .btn {
    background: url(../images/icon1.gif) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 3px;
}

#content1 .right {
    float: left;
    width: 49%;
    padding: 20px;
    background: #f2f2f2 url(../images/bg2.jpg) no-repeat right 20px center;
    background-size: 80px;
    box-sizing: border-box;
    margin-right: 0;
}

#content1 .right .title {
    font-size: 22px;
    padding-bottom: 5px;
}

#content1 .right .desc {
    font-size: 14px;
    color: #666;
    padding-bottom: 15px;
}

#content1 .right .btn {
    background: url(../images/icon2.gif) no-repeat left top;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 2px;
}

#content1 .right .btn em {
    font-size: 13px;
    color: 999;
    font-style: normal;
}

/* content2 */
#content2 {
    margin-top: 30px;
}

.tab-menu .tab-btn ul {
    overflow: hidden;
}

.tab-menu .tab-btn li {
    float: left;
    margin-right: 15px;
}

.tab-menu .tab-btn li a {
    display: block;
    color: #999;
    font-size: 24px;
    padding-bottom: 10px;
}

.tab-menu .tab-btn li.active a {
    color: #000;
}

.tab-cont .best figure {
    float: left;
    width: 32%;
    margin-right: 2%;
}

.tab-cont .best figure img {
    width: 100%;
}

.tab-cont .best figure:last-child {
    margin-right: 0;
}

#content2 h2 {
    font-size: 24px;
    padding-bottom: 10px;
}

#content2 .best figure {
    float: left;
    width: 32%;
    margin-right: 2%;
}

#content2 .best figure img {
    width: 100%;
}

#content2 .best figure:last-child {
    margin-right: 0;
}

/* footer */
#footer {
    padding: 20px 0;
    background: #202020;
    margin-top: 30px;
}

#footer h2 {
    float: left;
    padding-left: 20px;
}

#footer h2 img {
    width: 150px;
}

#footer .foot {
    float: right;
    padding-right: 30px;
}

#footer .foot ul {
    padding-bottom: 10px;
}

#footer .foot ul li {
    display: inline;
}

#footer .foot ul li a {
    color: #fff;
    padding-right: 10px;
}

#footer .foot address {
    font-style: normal;
    color: #ccc;
}

/* layer */
.layer_bg {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.layer {
    display: none;
    position: absolute;
    left: 30px;
    top: 30px;
    z-index: 1000;
    width: 500px;
    height: 500px;
    border: 3px solid #000;
    background: #fff;
}

.layer h2 {
    padding: 20px;
    color: #000;
}

.layer .close {
    position: absolute;
    bottom: 20px;
    right: 20px;
}                             

js

// 내비게이션
$(".nav > ul > li").mouseover(function () {
    $(this).find(".submenu").stop().slideDown(200);
});
$(".nav > ul > li").mouseout(function () {
    $(this).find(".submenu").stop().slideUp(200);
});

//currentIndex = 0; 첫번째 이미지 : 0
//currentIndex = 1; 두번째 이미지 : -389
//currentIndex = 2; 세번째 이미지 : -778

// 이미지 슬라이드 (상하)
// var currentIndex = 0; //첫번째 이미지
// 
// setInterval(function(){
//     if(currentIndex < 2){
//         currentIndex++;
//     } else {
//         currentIndex = 0;
//     }
//     var slidePosition = currentIndex * (-389)+"px";
//     $(".slideList").animate({top: slidePosition},400);
//     
// }, 3000);

// 이미지 슬라이드 (좌우)
var currentIndex = 0;

setInterval(function () {
    if (currentIndex < 2) {
        currentIndex++;
    } else {
        currentIndex = 0;
    }
    var slidePosition = currentIndex * (-1000) + "px";
    $(".slideList").animate({ left: slidePosition }, 400);
}, 3000);

// 탭 메뉴
var tabBtn = $(".tab-btn > ul > li");
var tabCont = $(".tab-cont > div");

tabCont.hide().eq(0).show();

tabBtn.click(function (event) {
    event.preventDefault();
    var target = $(this);
    var index = target.index();
    //alert(index);
    tabBtn.removeClass("active");
    target.addClass("active");
    tabCont.css("display", "none");
    tabCont.eq(index).css("display", "block");
});

// 레이어 팝업
$("#content1 .right").click(function () {
    $(".layer").slideDown(300);
    $(".layer_bg").show();
});
$(".layer .close").click(function () {
    $(".layer").slideUp(300);
    $(".layer_bg").hide();
});