콘디쌤2017.05.24 09:40

.content {
    overflow: hidden;
    background-color: #f4f4f4;
}

.content .sign {
    position: absolute;
    left: 0; right: 0;
    top: 0; height: 178px;
    background-image: url(../img/top-banner.jpg);
    background-position: center top;
    min-width: 980px;
}

.content .inner {
    width: 980px;
    margin: 0 auto;
    min-height: 850px;
    
}

.content aside {
    position: absolute;
    top: -178px; left: 0;
    width: 203px;
    bottom: 0;

    background-color: #4b3229;
    border-bottom: 1px solid #3e562d;
}

.content article {
    margin: 178px 0 0 203px;
    
}
.content article .title {
    position: absolute;
    top: 60px; left: 60px;
}
.content article .info {
    position: absolute;
    top: 0px; right: 0;
}
.content article .cont {
    
    position: absolute;
    top: 150px; left: 60px;
}
.content article .bottom {
    position: absolute;
    right: 0; 
    top: 700px;
}
.content aside .title {
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #6d4d41;
    width: 203px;
}
.content aside .snb-wrap {
    margin-top: 14px;
    background-color: rgba(0, 0, 0, 0.1);
    height: 400px;
}
.content aside .snb {
    margin: 0 auto 1px;
    width: 189px;
    height: 44px;
    background-color: #60453b;
    border: 1px solid #805f53;
    
    background-repeat: no-repeat;
    background-position-x: 10px;
}
.content aside .snb a {
    display: block;
    line-height: 44px;
    text-indent: -9999px;
}

.content aside .snb:nth-child(1) {
    background-position-y: 14px;
}
.content aside .snb:nth-child(2) {
    background-position-y: -32px;
}
.content aside .snb:nth-child(3) {
    background-position-y: -78px;
}
.content aside .snb:nth-child(4) {
    background-position-y: -124px;
}
.content aside .snb:hover {
    background-position-x: -190px;
}
.content aside .snb.sel {
    background-position-x: -190px;
}




.content.kibos article .title {
    background-image: url(../img/h4-tit1-01.gif);
    width: 142px;
    height: 30px;
}
.content.kibos .info {
    background-image: url(../img/pic-info.jpg); 
    width: 448px;
    height: 296px;
}
.content.kibos .cont {
    background-image: url(../img/kibos-info.png); 
    width: 691px;
    height: 600px;
}
.content.kibos .bottom {
    background-image: url(../img/info-img.jpg); 
    width: 448px;
    height: 163px;
}
.content.kibos aside .title {
    height: 178px;
    background-image: url(../img/h3-company.png);
}
.content.kibos aside .snb {
    background-image: url(../img/lnb-company.png);
}


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content kibos">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb sel"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb"><a href="greeting.html">인사말</a></div>
                    <div class="snb"><a href="history.html">연혁</a></div>
                    <div class="snb"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont"></div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content kibos">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb sel"><a href="greeting.html">인사말</a></div>
                    <div class="snb"><a href="history.html">연혁</a></div>
                    <div class="snb"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont"></div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content kibos">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb"><a href="greeting.html">인사말</a></div>
                    <div class="snb sel"><a href="history.html">연혁</a></div>
                    <div class="snb"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont"></div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content kibos">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb"><a href="greeting.html">인사말</a></div>
                    <div class="snb"><a href="history.html">연혁</a></div>
                    <div class="snb sel"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont"></div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>





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