콘디쌤2017.05.19 09:26

<!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>
            
        </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; 
}















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