콘디쌤2017.05.22 09:44


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title></title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/index.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
<script src="js/index.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content">
    
        <section class="visual">
            <div class="slide">
                <div class="image"><img src="img/main-A.jpg" /></div>
                <div class="sign"><img src="img/main-top01_sub.png" /></div>
            </div>    
            <div class="slide">
                <div class="image"><img src="img/main-B.jpg" /></div>
                <div class="sign"><img src="img/main-top02_sub.png" /></div>
            </div>
            <div class="slide">
                <div class="image"><img src="img/main-C.jpg" /></div>
                <div class="sign"><img src="img/main-top03_sub.png" /></div>
            </div>
            
            <div class="page-wrap">
                <div class="page sel"></div>
                <div class="page"></div>
                <div class="page"></div>
            </div>
            
            <div class="prev"></div>
            <div class="next"></div>
            
        </section> 
        
        <section class="brand">
        
            <div class="tview-wrap">
                <div class="tview sel">
                    <div class="tleft"><img src="img/main-brand04.jpg"/></div>
                    <div class="tright"></div>
                </div>
                <div class="tview">
                    <div class="tleft"><img src="img/main-brand05.jpg"/></div>
                    <div class="tright"></div>
                </div>
                <div class="tview">
                    <div class="tleft"><img src="img/main-brand01.jpg"/></div>
                    <div class="tright"></div>
                </div>
                <div class="tview">
                    <div class="tleft"><img src="img/main-brand02.jpg"/></div>
                    <div class="tright"></div>
                </div>
                <div class="tview">
                    <div class="tleft"><img src="img/main-brand03.jpg"/></div>
                    <div class="tright"></div>
                </div>
            </div>
            
            <div class="tab-wrap">
                <div class="tab sel"></div>
                <div class="tab"></div>
                <div class="tab"></div>
                <div class="tab"></div>
                <div class="tab"></div>
                <div class="tab"></div>
            </div>
        
        </section>
        
        <section class="community">
            
            <div class="board">
                <div class="list-wrap">
                    <div class="list">
                        <div class="day">10</div>
                        <div class="month">2016.10</div>
                        <div class="subject">밀크앤소다 패밀리세일 진행!</div>
                    </div>
                    <div class="list">
                        <div class="day">12</div>
                        <div class="month">2016.09</div>
                        <div class="subject">[신세계백화점 스타필드 하남] 밀크앤소다 GRAND OP</div>
                    </div>
                    <div class="list"></div>
                    <div class="list"></div>
                </div>
                
            </div>
        
        
        </section>
        
        
        
    
    </div>
     
    <footer></footer>
</body>
</html>

section.visual {
    padding-top: 47.4%;
    background-color: antiquewhite;
}
section.visual .slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
}
section.visual .slide:first-child {
    display: block;
}
section.visual .slide .image img {
    width: 100%;
}
section.visual .slide .sign {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background-image: url(../img/main-top.png);
}
section.visual .slide .sign img {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

section.visual .page-wrap {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
}

section.visual .page {
    float: left;
    width: 13px;
    height: 21px;
    margin: 0 5px;
    background-image: url(../img/main-top-dot.png);
    background-position: -19px -72px; 
    cursor: pointer;
}
section.visual .page.sel {
    background-position: 0px -72px; 
}
section.visual .prev {
    position: absolute;
    top: 80px;
    left: calc(50% - 440px);
    width: 26px;
    height: 49px;
    background-image: url(../img/main-top-dot.png);
    cursor: pointer;
}
section.visual .next {
    position: absolute;
    top: 80px;
    left: calc(50% + 414px);
    width: 26px;
    height: 49px;
    background-image: url(../img/main-top-dot.png);
    background-position: right top;
    cursor: pointer;
}

section.brand {
    min-width: 1992px;
    height: 933px;
    left: 50%;
    transform: translateX(-50%);
} 
section.brand .tview {
    display: none;
}
section.brand .tview.sel {
    display: block;
}
section.brand .tview .tleft {
    width: 50%;
    float: left;
}
section.brand .tview .tright {
    width: 50%;
    float: left;
}
section.brand .tview .tleft img {
    width: 100%;
}
section.brand .tab-wrap {
    position: absolute;
    top: 0;
    right: 50%;
}
section.brand .tab {
    width: 96px;
    height: 84px;
    float: left;
    background-image: url(../img/main-brand-select.png);
    margin-left: 1px;
    cursor: pointer;
}
section.brand .tab.sel {
    background-position-x: -140px;
}

section.brand .tab:nth-child(1) {
    background-position-y: -300px;
}
section.brand .tab:nth-child(2) {
    background-position-y: -500px;
}
section.brand .tab:nth-child(3) {
    background-position-y: 0px;
}
section.brand .tab:nth-child(4) {
    background-position-y: -100px;
}
section.brand .tab:nth-child(5) {
    background-position-y: -200px;
}
section.brand .tab:nth-child(6) {
    background-position-y: -400px;
}

section.community {
    width: 1400px;
    height: 974px;
    margin: 0 auto;
    background-image: url(../img/main-conts-c.jpg);
    background-position: center top;
}


section.community .board {
    position: absolute;
    top: 100px;
    left: calc(50% - 110px);
    width: 590px;
    height: 281px;
    background-color: #6d4d41;
    
    background-image: url(../img/main-news.gif);
    background-repeat: no-repeat;
    
}



section.community .board .list-wrap {
    position: absolute;
    width: 411px;
    height: inherit;
    right: 0;
    top: 0;
    background-color: #fff;
}
section.community .board .list {
    overflow: hidden;
    height: 80px;
    border-bottom: 1px dotted #aaa;
}
section.community .board .list:first-child {
    margin-top: 14px;
}
section.community .board .day {
    float: left;
    margin: 20px;
    font-size: 30px;
    color: #888;
}
section.community .board .month {
    float: left;
    font-size: 13px;
    margin-top: 54px;
    margin-left: -60px;
    color: #aaa;
}
section.community .board .subject {
    float: left;
    margin: 40px 0 0 0px;
    color: #aaa;
    width: 300px;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    
}








문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)