제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...
제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...
익스플로러 창을 최대크기로 했을때는 메뉴바 드롭다운이 제대로 되는데요...
익스플로러 창을 좁히고 보면 메뉴바가 슬라이드 밑으로 들어가서 보이지 않습니다.
고수님들 도움을 부탁드립니다.
소스는 아래입니다....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SPGLOBAL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<style>
/* head_tail */
.head_tail{
/*background-color:#666;*/
color:#333;
margin-top:20px;
margin-bottom:20px;
}
/* 네비게이션 색상변경 시작 */
.menu{
margin-bottom:0px;/* 메뉴바와 슬라이더 간격 -> 메뉴바 아래 여백 */
}
/* navbar */
.navbar-default {
background: #795548; /* 메뉴배경색상 */
border:none;
border-radius:0px;
}
/* Brand 색상 */
.navbar-default .navbar-brand {
color: #fff;
}
/* Brand 위로 마우스 올렸을 때 색상 */
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ff9800;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #fff; /* 메뉴 색상 */
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ff9800; /* 마우스 올렸을때 메뉴 글자색상 */
background-color:#5d4037; /* 마우스 올렸을때 메뉴배경 색상 */
}
/* Active 색상 배경 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background: #ff9800;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #fff;
background: #ff9800;
}
/* 드롭다운 서브메뉴 배경색상 */
.dropdown-menu {background-color:#ffa726;}
/* 드롭다운 서브메뉴에 마우스 올렸을때 서브메뉴 배경색상 */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {background: #8d6e63;}
/* 드롭다운 서브메뉴에 마우스 올렸을때 서브메뉴 변경색상 */
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {color:#fff;}
/* caret 드롭다운 삼각형*/
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #ff9800;
border-bottom-color: #ff9800;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar, .navbar-default{
height:50px; /* 메뉴바 두께 */
padding-top:0px; /* 메뉴바 상단 여백 */
font-size:16px; /* 메뉴바 폰트크기 */
letter-spacing:2px; /* 메뉴바 글자간격 */
word-spacing:5px;
}
.navbar {
border: 0;
font-size: 16px !important; /* 폰트 크기 */
letter-spacing: 1.5px;/* 글자간격 */
border-radius: 0;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 768px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu{
background-color:#212121;
}
.navbar-default .navbar-nav{
background-color:#333;
}
}
/* 네비게이션 색상변경 끝 */
/* 슬라이더 시작 */
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #ff5722;
/* margin-left:150px; 슬라이드 왼쪽 화살표 왼쪽 위치변경 */
/* margin-right:150px; 슬라이드 오른쪽 화살표 왼쪽 위치변경 */
margin-top:auto; /* 슬라이드 화살표 수직위치변경 */
}
.carousel-indicators li {
border-color: #f4511e;
}
.carousel-indicators li.active {
background-color: #f4511e;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
height:100%;
margin: auto;
min-height:200px;
}
/* 슬라이더 끝 */
.area{
margin-top:20px;
color:#3e2723;
/*background-color:#e91e63;*/
}
/* Set black background color, white text and some padding */
footer {
background-color:#78909c;
color: white;
height:100px;
padding-top:30px;
margin-top:30px;
}
/* 스크롤 위로 */
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
/*상품 줌 아이콘 */
.caption{margin-bottom:0px;}
/*.thumbnail { border-radius: 0; position: relative; z-index: 1; border: 2px solid #fff; outline: 1px solid #ccc; }*/
.red { color: #FF0000}
.black { color: #000}
ul.block { height: 60px;}
/*상품 줌 아이콘 */
.zoom {
position:absolute;
left:50%;
top:30%;
width:60px;
height:60px;
margin:-30px 0 0 -30px;
background: url(zoom.png) no-repeat center center;
z-index:5;
display:block;
text-indent:-9999px;
opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.thumbnail:hover { border: 2px solid red; outline: 0}
.thumbnail a:hover { text-decoration: none}
.thumbnail:hover img{
opacity: 0.3;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.thumbnail:hover .zoom {
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
.tab-content {padding: 10px 0;} /* 공지사항 사업문의 */
/*hr{
border-color:#78909c;
} 수평선 색상 */
.youtubewrap { /* 유튜브 동영상 */
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.youtubewrap iframe {
position: absolute;
width: 100%;
height: 100%;
}
/* 아이콘 부분 */
.service {margin: 40px;}
.service a { display: block;}
.icons {
float: left;
display: block;
font-size: 30px;
color: #fff;
background-color: #ff9800;
border-radius: 50%;
text-align: center;
margin-right: 15px ;
padding: 20px;
border:4px solid #FF8040;
transition: all 0.3s;
}
.service a:hover .icons { background-color:#607d8b;}
.service a:hover .icontxt h4 { color: #607d8b; }
.icontxt { display: block; color: #2E2F28; text-align: left; }
.icontxt h4 {font-weight: bold; font-family: 'Source Sans Pro'; font-size: 20px; text-transform: uppercase; text-align: left;}
@media (min-width: 768px) {
.icons { margin: 0 auto; position: relative; left: 30%;}
.icontxt h4 { text-align: center;}
}
@media (max-width: 360px) {
.icontxt p { display: none; }
.icontxt {line-height:10px; padding: 0; margin: 0;}
.icontxt h4 { display: none; }
.icons { padding: 20px; margin: 10px 0 10px 20px; }
.book img { width: 50%; height: auto;}
.control { display: none;}
}
</style>
</head>
<body>
<!-- head_tail 시작 -->
<div class="container text-right head_tail">
<small>Home · 회원가입 · Contact Us</small>
</div>
<!-- head_tail 끝 -->
<!--네비게이션 시작 -->
<nav class="navbar navbar-default menu">
<div class="container-fluid">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<!-- slider 시작 -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="slider1-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>Sell $</h3>
<p>Money Money.</p>
</div>
</div>
<div class="item">
<img src="slider2-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="item">
<img src="slider3-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="item">
<img src="slider4-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
<div class="item">
<img src="slider5-1800_500.gif" alt="Image">
<div class="carousel-caption">
<h3>More Sell $</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- slider 끝 -->
<!-- 아이콘 부분 시작 -->
<div class="container area">
<h3><span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span> SPGLOBAL Business Area</h3>
<div class="row service text-center">
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-12"> <span class="glyphicon glyphicon-dashboard icons"> </span></div>
<div class="col-md-12 icontxt">
<h4>Development</h4>
<p class="text-center">For convergence & idea products</p>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-12"> <span class="glyphicon glyphicon-barcode icons"> </span></div>
<div class="col-md-12 icontxt">
<h4>Distribution</h4>
<p class="text-center">For small business idea goods</p>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-12"><span class="glyphicon glyphicon-globe icons"> </span></div>
<div class="col-md-12 icontxt">
<h4>Trade & Consulting</h4>
<p class="text-center">Export for small business idea goods</p>
</div>
</a>
</div>
</div>
<div class="col-md-3">
<div class="row">
<a href="#">
<div class="col-md-12"><span class="glyphicon glyphicon-compressed icons"> </span></div>
<div class="col-md-12 icontxt">
<h4>Manufacture</h4>
<p class="text-center">Small business OEM , ODM</p>
</div>
</a>
</div>
</div>
</div>
</div> <!-- 아이콘 끝-->
<!-- 제품보기 시작 -->
<div class="container-fluid product">
<div class="container">
<h3><span class="glyphicon glyphicon-gift" aria-hidden="true"></span> SPGLOBAL Product</h3>
<div id="carousel-example-generic" class="carousel2 slide">
<div class="carousel-inner">
<div class="item active">
<div class="row"> <!-- 슬라이드 one -->
<div class="col-md-3">
<div class="thumbnail">
<a href="myo2.gif"><img src="myo2.gif" alt="myo2.gif"></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div> <!-- 슬라이드 one end -->
</div>
<div class="item">
<div class="row"> <!-- 슬라이드 one -->
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="ocimple.gif"><img src="ocimple.gif" alt="..."></a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div> <!-- 슬라이드 one end -->
</div>
</div>
</div>
<hr>
</div>
</div>
<!-- 제품보기 끝 -->
<!-- content 시작 -->
<div class="container-fluid content">
<div class="container">
<div class="row">
<div class="col-md-4 con_1">
<!--<h4><span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> SPGLOBAL Community</h4>-->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">공지사항</a></li>
<li><a href="#tab1" data-toggle="tab">사업문의</a></li>
<li><a href="#tab2" data-toggle="tab">FAQ</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<ul>
<li>중부지방 물폭탄..서울·경기·강원 호우특보</li>
<li>주노 탐사선 목성 궤도 안착 성공 "웰컴 투 주피터"</li>
<li>'햇살론이 아닌 햇쌀론?' 서민금융상품 유사명칭</li>
<li>유경준 통계청장 "국민의 모든 생활이 통계다"</li>
<li>조선파업, 깃발은 들었지만..무작정 파업도 부담</li>
<li>갈림길에 선 최경환..전대 출마냐, 불출마냐</li>
<li>김영란법 부정청탁, 국회의원 예외 논란의 진실</li>
</ul>
</div>
<div class="tab-pane" id="tab1">
<ul>
<li>김현수는 '1루 베이스' 밟는 것을 가장 잘 한다</li>
<li>이대호의 AL 신인왕, 얼마나 가능성 있을까</li>
<li>류현진의 복귀전 과제, 구속 우려 불식시킬까</li>
<li>WKBL, 첼시 리 영구제명, 혼혈선수제 폐지</li>
<li>비 오는 마산구장, NC 4경기 연속 취소되나</li>
<li>'장마효과' 꼬여버린 한화 로테이션 해법될까</li>
<li>'3G 연속 장타' 추신수, 그린 몬스터에 빼앗긴 홈런</li>
</ul>
</div>
<div class="tab-pane" id="tab2">
<ul>
<li>현대차, 남양연구소 내 '자율주행택시' 실운행 돌입</li>
<li>G80 사전계약 1만대 돌파..고급차 시장 안착</li>
<li>페라리 슈퍼카 유일 국내서 중고차 사업 추진</li>
<li>'2016 서울오토살롱' 7월 7일 개막</li>
<li>수입차 서비스 '전국망' 어디까지 왔나</li>
<li>쿠페 감성에 RV의 기능성 갖춘 혼다 HR-V</li>
<li>7인승으로 넉넉하게, 티구안 LWB 중국에서 포착</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 con_2">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<i class="fa fa-volume-control-phone fa-4x" aria-hidden="true"></i>
</div>
<div class="col-md-9">
<h4>Customer Center</h4>
<h3><strong><font color="#e65100">031. 293. 1550</font></strong></h3>
<p><abbr title="Hours">H</abbr> : <small><font color="#FF0000">Monday</font>~<font color="#0000FF">Friday</font> : AM 9:00 ~ PM 6:00</small></p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<i class="fa fa-car fa-3x" aria-hidden="true"></i>
</div>
<div class="col-md-9">
<h4>Contact Us</h4>
<p>경기도 수원시 권선구 칠보로 243</br>
(호매실동 79-1) (우)16395</p>
<p><abbr title="Email">E</abbr> : <a href="mailto:spcarer@naver.com"> spcarer@naver.com</a> </p>
</div>
</div>
</div>
</div>
<!--<h4><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> SPGLOBAL Gallery</h4>-->
<div class="col-md-4 con_3">
<!--<h4><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Heal Foot Movie</h4>-->
<!-- 푸티 동영상 넣기 시작 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3 youtubewrap">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vKYMVRpL3oU"></iframe>
</div>
<!-- 푸티 동영상 넣기 끝 4:3 aspect ratio -->
</div>
</div>
</div>
</div>
<!-- content 끝 -->
<!-- footer 시작 -->
<footer class="container-fluid text-center">
<p>(우)16395 경기도 수원시 권선구 칠보로 243 (호매실동 79-1) | 대표 : 박 태 원 | Tel : 031-293-1550 | Fax : 031-293-1540</p>
<p>Copyright © 2016 SPGLOBAL All Rights Reserved.</p>
</footer>
<!-- footer 끝 -->
<!-- 스크롤 처음으로 시작 -->
<div class="scroll-top-wrapper ">
<span class="scroll-top-inner">
<i class="fa fa-arrow-circle-up fa-2x"></i>
<!--<span class="glyphicon glyphicon-circle-arrow-up" aria-hidden="true"></span>-->
</span>
</div>
<!-- 스크롤 처음으로 끝 -->
<script type="text/javascript">
<!-- 스크롤 위로 시작 -->
//Thanks to: http://www.webtipblog.com/adding-scroll-top-button-website/
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>
<!-- 스크롤 위로 끝 -->
<script>
$('.carousel').carousel()
$('.carousel2').carousel({interval: 5000 })
//* fancybox 실행 스크립트 */
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</body>
</html>