<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>M.A.C COSMETIC</title>
<link rel="stylesheet" type="text" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="top">
<div class="logo">
<a href="#"><img src="https://s29.postimg.org/dit1bpag7/logo.jpg"></a>
</div>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">LOGIN</a></li>
<li><a href="#">Q&A</a></li>
</ul>
</div>
<div class="one">
<ul>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">WHAT'S NEW</a></li>
<li><a href="#">BESTSELLER</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">REVIEW</a></li>
</ul>
<div class="main" style="background-image:url(https://s30.postimg.org/4kel7sws1/main.png)">
<div class="lip"><img src="https://s28.postimg.org/xnnvmacwt/lip.png"></div>
</div>
<div class="lipstick"><img src="https://s24.postimg.org/krtvt31xh/1p_lipstick.png">
<div>
<p>LIP stick</p>
<p>A lipstick with hundreds of hues. <br> The iconic product that made <br> M.A.C famous. A lipstick with hundreds <br> of hues. The iconic product that <br> made M.A.C famous.</p>
</div>
<div></div>
</div>
<div class="btnn">
<div>
<a href="#"><img src="https://s29.postimg.org/nw26kh0ev/image.png"></a>
<div>
<a href="#"><img src="https://s29.postimg.org/a2tkg4jwn/image.png"></a>
</div>
</div>
<div>
<a href="#"><img src="https://s30.postimg.org/o6awwsw6p/image.png"></a>
<div>
<a href="#"><img src="https://s29.postimg.org/9bwe1vg6f/image.png"></a>
</div>
</div>
<div>
<a href="#"><img src="https://s30.postimg.org/s3qdmhafl/image.png"></a>
<div>
<a href="#"><img src="https://s30.postimg.org/ai8np8dlt/image.png"></a>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="two">
<div class="image">
<img src="https://s27.postimg.org/yfbdzua43/2p_1.jpg">
<img src="https://s28.postimg.org/719mrny8t/2p_2.jpg">
<div>
<p>NUTcracker sweet</p>
<p>Formulated to shade, define and showcase the lips. Four hues, two different textures. The iconic product that made M∙A∙C famous. Special packaging with the Star Trek logo in metallic silver.</p>
</div>
<div>
<div>LIPTENSITY</div>
<div>
<p>Five limited-edition colours in two textures. Features a butterfly embossed into the Lipstick bullet. Luxurious packaging in silver glitter with champagne gold accents and Mariah’s signature.</p>
<p>Six cult-favourite shades in three textures. From the seductive red Ruby Woo to the flirtatious Candy Yum-Yum, there’s a unique Lipstick for everyone.</p>
<p>An iconic Lipstick with package shade-matched to the Lipstick colour.</p>
</div>
</div>
</div>
<div class="lip">
<img src="https://s28.postimg.org/496qny16l/2p_lip.jpg">
</div>
<div class="btn">
<div><img src="https://s27.postimg.org/3vattp2gz/image.png">
<div><img src="https://s27.postimg.org/9vjszw777/up2.png"></div>
</div>
<div><img src="https://s28.postimg.org/byfjztd59/down.png">
<div><img src="https://s29.postimg.org/ow4rzk3h3/down2.png"></div>
</div>
</div>
<div class="underline">
<div></div>
<div></div>
</div>
</div>
<div class="linee"></div>
<div class="three">
<div class="side"><img src="https://s30.postimg.org/g60vdypz5/3p_mac.jpg">
<div>
<p>M.A.C</p>
<p>A lipstick in five shades and five textures. Original Price: $18.</p>
</div>
</div>
<div class="image">
<img src="https://s29.postimg.org/4td7yz6bb/image.png">
<img src="https://s27.postimg.org/e7m6u4i9f/3p_woman.png">
<img src="https://s30.postimg.org/5rhlk2l4x/text.png">
<div>Ariana Grande's shades of VIVA GLAM Lipstick. Her fresh and cheeky matte orchid pink and her deep dark, matte plum in our iconic Lipstick formula. Wear it alone or under Lipglass / VIVA GLAM Ariana Grande.
</div>
</div>
<div class="video">
<iframe width="519" height="292" src="https://www.youtube.com/embed/2OyFzoPnruQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="lip"><img src="https://s29.postimg.org/nvdazw7tz/3p_lipstick.png"></div>
<div class="btn">
<div><img src="https://s27.postimg.org/3vattp2gz/image.png">
<div><img src="https://s27.postimg.org/9vjszw777/up2.png"></div>
</div>
<div><img src="https://s28.postimg.org/byfjztd59/down.png">
<div><img src="https://s29.postimg.org/ow4rzk3h3/down2.png"></div>
</div>
</div>
<div class="lips"><img src="https://s23.postimg.org/yzr70vfzv/lips.png"></div>
</div>
<div class="lineee"></div>
<div class="four">
<div class="main">
<div class="slider" data-autoplay="1" data-autoplay-interval="3000" style="background-image:url(https://s24.postimg.org/4oylcg8kl/image.png)">
<div class="side-bar left"><i class="fa fa-angle-left fa-inverse fa-2x" aria-hidden="true"></i></div>
<div class="side-bar right"><i class="fa fa-angle-right fa-inverse fa-2x" aria-hidden="true"></i></div>
<div class="slides-wrap">
<div class="slides">
<div class="active"><img src="https://s24.postimg.org/4oylcg8kl/image.png"></div>
<div><img src="https://s28.postimg.org/ofqv5ts8t/4p_3.png"></div>
<div><img src="https://s30.postimg.org/c31ouax4x/4p_4.png"></div>
<div><img src="https://s27.postimg.org/dwux5onkz/4p_5.png"></div>
<div><img src="https://s24.postimg.org/9mh9htgdx/4p_6.png"></div>
</div>
</div>
</div>
<div class="image"><img src="https://s30.postimg.org/esfvh5dvl/4p_w.png"><a href="#"><i class="fa fa-angle-right" aria-hidden="true"></i> NUTCRACKER SWEET PINK LIPSTICK KIT</a></div>
<div class="text">
<div>
<p>IN the spotlight</p>
<p>A lipstick in five hues, packaged in limited-edition silver glitter and champagne gold. Five limited-edition colours in two textures. Features a butterfly embossed into the Lipstick bullet. Luxurious packaging in silver glitter with
champagne gold accents and Mariah’s signature.A pencil designed for shaping, lining or filling in the lip in two shades. Lip Pencils’ smooth, creamy texture is perfect for outlining or colouring in lips. A brilliant formula that
pushes the boundaries of colour. Each Lipstick holds intense amounts of pigment, resulting in extreme colour intensity, clarity and vibrancy. This luxurious gelled base melts on contact, providing fully saturated colour with a
satin finish in one stroke.Six cult-favourite shades in three textures. From the seductive red Ruby Woo to the flirtatious Candy Yum-Yum, there’s a unique Lipstick for everyone. Package is shade-matched to the Lipstick colour.
Ariana Grande's shades of VIVA GLAM Lipstick. Her fresh and cheeky matte orchid pink and her deep dark, matte plum in our iconic Lipstick formula. </p>
</div>
<div>
<p>STAR track</p>
<p>A lipstick in four hues, featuring the Star Trek logo in metallic silver. Formulated to shade, define and showcase the lips. Four hues, two different textures. The iconic product that made M∙A∙C famous. Special packaging with the Star
Trek logo in metallic silver. A lip colour that provides a splash of colour in a liquid-suede finish that lingers. </p>
</div>
</div>
<div class="lip">
<img src="https://s29.postimg.org/yjq2ah52f/lip4.png">
</div>
<div class="lips"><img src="https://s27.postimg.org/hr2dnzaoj/4lip.png"></div>
<div class="side">
<img src="https://s30.postimg.org/mxd2l8hwh/img4.png">
<div>
<p>PLUSHGLASS</p>
<p>A sheer lip colour with a glossy finish that gives a cool-warm buzz to the lips.</p>
</div>
</div>
<div class="underline">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="btn">
<div><img src="https://s27.postimg.org/3vattp2gz/image.png">
<div><img src="https://s27.postimg.org/9vjszw777/up2.png"></div>
</div>
<div><img src="https://s28.postimg.org/byfjztd59/down.png">
<div><img src="https://s29.postimg.org/ow4rzk3h3/down2.png"></div>
</div>
</div>
</div>
<div class="lineeee"></div>
<div class="five">
<div class="info">
<img src="https://s27.postimg.org/alur4j64j/5info1.png">
<img src="https://s24.postimg.org/cuc57j40l/5info2.png">
<img src="https://s27.postimg.org/xpztb1m0j/5info3.png">
<img src="https://s27.postimg.org/5gzqwky6b/5info4.png">
<img src="https://s29.postimg.org/tkn5osng7/5plip.png">
<div class="title">
<div>Lip Stick</div>
<div>Eye Liner</div>
<div>Eye Brow</div>
<div>Eye Shadow</div>
</div>
<div class="text">
<div>A unique lip gloss available in four colours that creates a high gloss, glass-like finish or a subtle sheen. </div>
<div>A mechanical pencil-style liner. Its formula is soft and creamy with intense, rich colour.</div>
<div>Self-propelling, self-sharpening, brow-defining. Confidently adds what you need:</div>
<div>Highly pigmented powder. Applies evenly, blends well. Can be used wet or dry.</div>
</div>
</div>
<div class="circle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="bottom">
<ul>
<li><a href="#">YOUR M.A.C STORE</a>
<ul>
<li><a href="#">FINO A STORE / EVENT</a></li>
<li><a href="#">MAKEUP SERVICES</a></li>
</ul>
</li>
<li><a href="#">CUSTOMER SERVICE</a>
<ul>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">1,800,588,0070</a></li>
<li><a href="#">FAQS</a></li>
<li><a href="#">SHIPING INFO</a></li>
<li><a href="#">RETURN POLICY</a></li>
<li><a href="#">OFFER DETAILS</a></li>
<li><a href="#">SITE FEEDBACK</a></li>
</ul>
</li>
<li><a href="#">ABOUT US</a>
<ul>
<li><a href="#">OUR STORY</a></li>
<li><a href="#">M.A.C. AIDS FUND</a></li>
<li><a href="#">M.A.C PRO MEMBERSHIP</a></li>
<li><a href="#">M.A.C SELECT PROGRAM</a></li>
<li><a href="#">BACK TO M.A.C</a></li>
<li><a href="#">CAREERS</a></li>
<li><a href="#">ANIMAL TESTING</a></li>
</ul>
</li>
<li><a href="#">YOUR ACCOUNT</a>
<ul>
<li><a href="#">MY M.A.C</a></li>
<li><a href="#">ORDER STATUS</a></li>
<li><a href="#">MY FAVOURITES</a></li>
</ul>
</li>
<li><a href="#">GIFT CARDS</a>
<ul>
<li><a href="#">GIFT CARDS</a></li>
<li><a href="#">EGIFT CARDS</a></li>
<li><a href="#">CHECK BALANCE</a></li>
<li><a href="#">ABOUT GIFT CARDS</a></li>
</ul>
</li>
</ul>
</div>
<div class="last">
<ul>
<li><a href="#">PRIVACY POLICY</a></li>
<li><a href="#">INTEREST.BASED ADS</a></li>
<li><a href="#">TERMS & CONDITIONS</a></li>
<li><a href="#">SUPPLIER RELATIONS</a></li>
<li><a href="#">COUNTERFEIT EDUCATION</a></li>
<li>@ MAKE-UP COSMETICS.</li>
</ul>
<div class="end">CHAT LIVE <i class="fa fa-commenting-o" aria-hidden="true"></i></div>
</div>
</body>
</html>
body,
div,
ul,
li,
a,
img {
margin: 0 auto;
padding: 0;
text-align: center;
}
body {
width: 1024px;
height: 5000px;
}
.top {
width: 1024px;
height: 50px;
position: fixed;
background-color: white;
z-index: 3;
}
.top .logo {
width: 150px;
height: 40px;
float: left;
margin-left: 30px;
margin-top: 10px;
}
.top ul {
width: 500px;
height: 30px;
float: right;
margin-top: 10px;
z-index: 3;
}
.top ul li {
position: relative;
z-index: 3;
}
.top ul li {
display: inline-block;
width: 95px;
text-align: right;
}
.top ul li:first-child {
margin-right: 10px;
margin-left: -30px;
}
.top ul li:last-child {
margin-left: -10px;
}
.one ul {
width: 200px;
height: 500px;
position: relative;
top: 10px;
left: -380px;
display: inline-block;
z-index: 2;
}
.one ul li {
position: absolute;
display: inline-block;
width: 95px;
text-align: right;
}
.one ul li:nth-child(1) {
top: 140px;
left: 70px
}
.one ul li:nth-child(2) {
top: 195px;
left: 50px;
}
.one ul li:nth-child(3) {
top: 250px;
left: 15px;
}
.one ul li:nth-child(4) {
top: 365px;
left: 70px;
}
.one ul li:nth-child(5) {
top: 420px;
left: 95px;
}
.top ul li a {
color: #848484;
text-decoration: none;
font-size: 13px;
letter-spacing: 1px;
font-weight: 300;
font-family: 'AvantGardEF';
transition: 0.3s;
}
.top ul li a:hover {
color: #c2c2c2;
}
.one {
width: 1024px;
height: 780px;
position: relative;
}
.one ul li a {
color: #848484;
text-decoration: none;
font-size: 13px;
letter-spacing: 1px;
font-weight: 300;
font-family: 'AvantGardEF';
transition: 0.3s;
}
.one ul li a:hover {
color: #c2c2c2;
}
.one .main {
width: 1024px;
height: 706px;
margin-top: -465px;
}
.one .main .lip {
width: 725px;
height: 551px;
position: relative;
top: 37px;
left: -112px;
cursor: pointer;
}
.one .lipstick {
width: 400px;
height: 275px;
position: relative;
top: -255px;
left: -260px;
}
.one .lipstick img {
float: left;
}
.one .lipstick div {
width: 250px;
height: 148px;
position: absolute;
top: auto;
bottom: 0;
left: auto;
right: 0;
font-family: 'AvantGardEF';
text-align: left;
font-size: 11px;
line-height: 16px;
color: gray;
}
.one .lipstick div p:nth-child(1) {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.5px;
}
.one .lipstick div p:nth-child(2) {
font-weight: lighter;
letter-spacing: 1.6px;
word-spacing: -1px;
margin-top: -9px;
}
.one .lipstick div:last-child {
position: absolute;
top: 164px;
left: -80px;
background-color: #e0e0e0;
width: 22px;
height: 2px;
}
.one .btnn {
width: 150px;
height: 40px;
float: right;
position: relative;
top: auto;
bottom: 290px;
left: auto;
right: 30px;
}
.one .btnn div {
width: 31px;
height: 31px;
display: inline-block;
position: relative;
}
.one .btnn div div {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.3s;
}
.one .btnn div:hover div {
opacity: 1;
}
.line {
width: 66.5%;
height: 2px;
background-color: #e7e7e7;
float: right;
position: absolute;
top: 790px;
left: auto;
right: 0;
}
.two {
width: 1024px;
height: 690px;
position: relative;
}
.two .image {
width: 820px;
height: 420px;
position: relative;
top: 15%;
bottom: auto;
}
.two .image img:nth-child(1) {
position: absolute;
top: 0;
left: 100px;
}
.two .image img:nth-child(2) {
position: absolute;
top: auto;
bottom: 0;
left: 0;
}
.two .image div {
position: absolute;
font-family: 'AvantGardEF';
text-align: left;
font-size: 11px;
line-height: 16px;
color: gray;
}
.two .image div:nth-child(3) {
width: 320px;
height: 105px;
top: auto;
bottom: 0px;
left: 235px;
}
.two .image div:nth-child(4) {
width: 250px;
height: 290px;
top: 0;
left: auto;
right: 0;
}
.two .image div:nth-child(3) p:nth-child(1) {
font-size: 18px;
font-weight: 600;
letter-spacing: 0.7px;
margin-top: 5px;
}
.two .image div:nth-child(3) p:nth-child(2) {
font-weight: lighter;
letter-spacing: 1.5px;
word-spacing: -1px;
margin-top: -3px;
}
.two .image div div:nth-child(1) {
transform: rotate(90deg);
width: 150px;
height: 30px;
top: 62px;
left: -55px;
font-size: 18px;
font-weight: 600;
letter-spacing: 1.2px;
}
.two .image div div:nth-child(2) {
width: 187px;
height: 300px;
font-weight: lighter;
letter-spacing: 1.7px;
word-spacing: -3px;
line-height: 16px;
left: auto;
right: 0;
text-align: justify;
margin-top: -10px;
}
.two .lip {
position: absolute;
top: auto;
bottom: -15px;
left: auto;
right: 90px;
}
.two .btn {
display: inline-block;
width: 100px;
height: 32px;
}
.two .btn > div {
display: inline-block;
position: relative;
cursor: pointer;
top: 200px;
left: -410px;
}
.two .btn div div {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: 0.4s;
}
.two .btn div:hover div {
opacity: 1;
}
.two .underline {
width : 1024px;
height : 500px;
position : relative;
top : -450px;
left : 0;
}
.two .underline div {
position: absolute;
background-color: #e0e0e0;
width: 32px;
height: 2px;
}
.two .underline div:nth-child(1) {
top : 438px;
left : 337px;
}
.two .underline div:nth-child(2) {
top : 112px;
left : auto;
right: 295px;
transform : rotate(90deg);
width : 25px;
}
.linee {
width: 65%;
height: 2px;
background-color: #e7e7e7;
position: absolute;
top: 1490px;
left: 0;
float: left;
right: auto;
}
.three {
width : 1024px;
height: 900px;
position : relative;
font-family: 'AvantGardEF';
text-align: left;
font-size: 10px;
color: gray;
}
.three .side {
float : left;
margin-left : 95px;
margin-top : 85px;
width : 230px;
height : 67px;
text-align : left;
}
.three .side img {
float : left;
}
.three .side div {
width : 150px;
height : 60px;
float : right;
}
.three .side div p:nth-child(1) {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 1px;
text-align : left;
}
.three .side div p:nth-child(2) {
font-weight: lighter;
letter-spacing: 1.7px;
word-spacing: 1px;
margin-top: -9px;
line-height : 13px;
text-align : left;
}
.three .image {
width : 1024px;
height : 800px;
}
.three .image img:nth-child(1) {
position : absolute;
top : 280px;
left : 130px;
}
.three .image img:nth-child(2) {
position : absolute;
top : -60px;
left : 558px;
z-index : 2;
}
.three .image img:nth-child(3) {
position : absolute;
top : 195px;
left : 267px;
}
.three .image div {
width : 350px;
height : 150px;
position : absolute;
top : 630px;
left : 215px;
font-family: 'AvantGardEF';
text-align: center;
font-size: 11px;
line-height: 16px;
color: gray;
word-spacing : 3px;
letter-spacing : 1.4px;
}
.three .video {
width : 519px;
height : 293px;
position : absolute;
top : 289px;
left : 143px;
}
.three .lip {
position : absolute;
top : auto;
bottom : 100px;
left : auto;
right : 0;
}
.three .btn {
display: inline-block;
width: 100px;
height: 32px;
float : right ;
margin-right: 5px;
margin-top : 25px;
}
.three .btn > div {
display: inline-block;
position: relative;
cursor: pointer;
top: 0;
left: 0;
}
.three .btn div div {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: 0.4s;
}
.three .btn div:hover div {
opacity: 1;
}
.three .lips {
width : 275px;
height ; 214px;
position : absolute;
top : auto;
bottom : -120px;
left : 50px;
right: auto;
}
.lineee {
width: 65%;
height: 2px;
background-color: #e7e7e7;
position: absolute;
top: 2370px;
left: auto;
float: right;
right: 0;
}
.four {
width : 1024px;
height: 1050px;
position : relative;
}
.four .main {
width : 707px;
height : 675px;
position : relative;
margin-top : 130px;
}
.four .main .slider {
width : 334px;
height : 468px;
position : relative;
float : left;
background-color: black;
}
.four .main .slider .side-bar {
width : 40%;
height: 100%;
position : absolute;
z-index : 2;
opacity : 0.5;
cursor : pointer;
}
.four .main .slider .side-bar.left {
top : 0;
left : 0;
}
.four .main .slider .side-bar.right {
left : auto;
right : 0;
}
.four .main .slider .side-bar i {
position : absolute;
z-index : 3;
top : 50%;
transition : 0.3s;
}
.four .main .slider .side-bar.left:active i {
transform : translateX(-2px);
}
.four .main .slider .side-bar.left i {
left : 15px;
transform : translateX(5px);
}
.four .main .slider .side-bar.right i {
right : 15px;
transform : translateX(-5px);
}
.four .main .slider .side-bar.right:active i {
transform : translateX(2px);
}
.four .main .slider .slides-wrap {
width : 100%;
height : 100%;
float : left;
}
.four .main .slider .slides-wrap .slides {
width : 332px;
height : 100%;
float: left;
}
.four .main .slider .slides-wrap .slides div {
width : 332px;
height : 100%;
float : left;
position : absolute;
top : 0;
left : 0;
opacity : 0;
}
.four .main .slider .slides-wrap .slides .active {
opacity : 1;
}
.four .main .image {
position : absolute;
top : 440px;
left : 355px;
width : 355px;
height : 280px;
text-align : left;
}
.four .main .image a {
font-size : 11px;
color : #c0c0c0;
letter-spacing : 1.6px;
transition : 0.4s;
}
.four .main .image a:hover {
color : gray;
}
.four .main .text {
font-family: 'AvantGardEF';
text-align: left;
font-size: 11px;
line-height: 20px;
color: gray;
}
.four .main .text div:first-child {
width : 345px;
height : 430px;
position : absolute;
top : 0;
left : 51%;
text-align : justify;
letter-spacing : 1.4px;
}
.four .main .text div:nth-child(1) p:nth-child(1) {
font-size : 18px;
font-weight : 600;
margin-top : 0px;
letter-spacing : 0.8px;
}
.four .main .text div:last-child {
width : 330px;
height : 190px;
position : absolute;
top : 73%;
left : 0;
text-align : justify;
letter-spacing : 1.4px;
}
.four .main .text div:last-child p:nth-child(1) {
font-size : 18px;
font-weight : 600;
margin-top : 0;
}
.four .lip {
position : absolute;
top : 770px;
left : 100%
}
.four .lips {
position : absolute;
top : 800px;
left : 38%;
}
.four .side {
float : left;
width : 275px;
height: 79px;
font-family: 'AvantGardEF';
text-align: left;
font-size: 10px;
color: gray;
position : relative;
top : 850px;
left : -400px;
}
.four .side img {
float : left;
}
.four .side div {
width : 185px;
height : 79px;
float : right;
poition : absolute;
top : 0;
left : 0;
}
.four .side div p:nth-child(1) {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.9px;
margin-top: 12px;
text-align : left;
}
.four .side div p:nth-child(2) {
font-weight: lighter;
letter-spacing: 1.3px;
word-spacing: 1px;
margin-top: -5px;
line-height : 13px;
text-align : left;
}
.four .main .underline {
width : 700px;
height : 1000px;
position : relative;
top : 0px;
left : 0px;
}
.four .main .underline div {
background-color: #e0e0e0;
width: 24px;
height: 2px;
position : absolute;
}
.four .main .underline div:nth-child(1) {
top : 25px;
left : 355px;
}
.four .main .underline div:nth-child(2) {
top : 516px;
left : -4px;
width : 48px;
}
.four .main .underline div:nth-child(3) {
top : auto;
bottom : 115px;
left : 20px;
width : 19px;
}
.four .btn {
display: inline-block;
width: 100px;
height: 32px;
}
.four .btn > div {
display: inline-block;
position: relative;
cursor: pointer;
top: 280px;
left: -420px;
}
.four .btn div div {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: 0.4s;
}
.four .btn div:hover div {
opacity: 1;
}
.lineeee {
width: 65%;
height: 2px;
background-color: #e7e7e7;
position: absolute;
top: 3525px;
left: 0;
float: left;
right: auto;
}
.five {
width : 100%;
height : 1050px;
}
.five .info {
width : 1000px;
height: 1030px;
position : relative;
}
.five .info img {
margin-left : 5px;
}
.five .info img:nth-child(1),.five .info img:nth-child(3) {
margin-left : 0;
}
.five .info img:nth-child(5) {
position : absolute;
top : 375px;
left : 417px;
}
.five .info .title {
width : 1000px;
height : 1030px;
position : absolute;
top : 0;
left : 0;
font-family : "Edwardian Script ITC";
font-size : 90px;
font-weight : lighter;
color : white;
letter-spacing : 4px;
}
.five .info .title div {
position : absolute;
}
.five .info .title div:nth-child(1) {
top : 35px;
left : 100px;
}
.five .info .title div:nth-child(2) {
top : 35px;
left : 567px;
}
.five .info .title div:nth-child(3) {
top : 550px;
left : 71px;
}
.five .info .title div:nth-child(4) {
top : 550px;
left : 544px;
}
.five .info .text {
width : 1000px;
height : 1030px;
position : absolute;
top : 0;
left : 0;
font-size: 11px;
letter-spacing: 2px;
font-weight: lighter;
word-spacing : 3px;
font-family: 'AvantGardEF';
color : white;
line-height : 20px;
opacity : 0.8;
}
.five .info .text div {
position : absolute;
width : 180px;
height : 150px;
}
.five .info .text div:nth-child(1) {
top : 320px;
left : 275px;
}
.five .info .text div:nth-child(2) {
top : 320px;
left : 555px;
}
.five .info .text div:nth-child(3) {
top : 850px;
left : 280px;
}
.five .info .text div:nth-child(4) {
top : 850px;
left : 555px;
}
.five .circle {
position : relative;
top : -1030px;
left : 0px;
width : 800px;
height : 1000px;
}
.five .circle div {
position : absolute;
top : 183px;
left : 12px;
float : left;
border-radius : 50%;
width : 70px;
height : 70px;
background-color : white;
opacity : 0;
cursor : pointer;
transition : 0.2s;
}
.five .circle div:nth-child(2) {
left : 117px;
}
.five .circle div:nth-child(3) {
left : 218px;
}
.five .circle div:nth-child(4) {
left : 509px;
}
.five .circle div:nth-child(5) {
left : 618px;
}
.five .circle div:nth-child(6) {
left : 720px;
}
.five .circle div:nth-child(7) {
top : 690px;
left : 513px;
}
.five .circle div:nth-child(8) {
top : 690px;
left : 620px;
}
.five .circle div:nth-child(9) {
top : 690px;
left : 725px;
}
.five .circle div:nth-child(10) {
top : 690px;
left : 224px;
}
.five .circle div:nth-child(11) {
top : 690px;
left : 119px;
}
.five .circle div:nth-child(12) {
top : 690px;
left : 12px;
}
.five .circle div:hover {
opacity : 0.3;
}
.bottom {
width : 100%;
height : 300px;
float : left;
position : absolute;
left : 0;
right : auto;
background-color : #eaeaea;
}
.bottom > ul {
width : 1024px;
height : 50px;
position : relative;
top : 28px;
left : 23px;
font-family : "AvantGardEF";
word-spacing : 2px;
letter-spacing : 0.5px;
}
.bottom ul li {
width : 195px;
height : 50px;
float : left;
display : inline-block;
}
.bottom ul ul {
width : 200px;
height : 300px;
position : absolute;
top :80%;
}
.bottom ul ul li {
height : 30px;
text-align : left;
margin-left : 38px;
}
.bottom > ul > li:nth-child(2) {
margin-left :20px;
}
.bottom > ul > li:nth-child(3) {
margin-left :-20px;
}
.bottom > ul > li:nth-child(4) {
margin-left :30px;
}
.bottom > ul > li:nth-child(5) {
margin-left :-22px;
}
.bottom ul li:nth-child(3) ul {
margin-left : 30px;
}
.bottom ul li:nth-child(4) ul {
margin-left : 10px;
}
.bottom ul li:nth-child(5) ul {
margin-left : 22px;
}
.bottom ul li a {
text-decoration : none;
color : #4e4e4e;
font-size : 13px;
font-weight : bold;
}
.bottom ul ul li a {
color : #808080;
font-weight : lighter;
font-size : 12px;
letter-spacing : 0.5px;
}
.last {
width : 100%;
height : 100px;
background-color: #cecece;
float : left;
position : absolute;
top : 4900px;
left : 0;
right: auto;
z-index : 3;
}
.last ul {
width : 1024px;
height : 100px;
display : inline-block;
position : relative;
left : 20px;
font-family : "AvantGardEF";
font-weight : 500;
letter-spacing : 0.5px;
}
.last ul li {
display : inline-block;
width : 155px;
height : 20px;
float : left;
margin-top : 37px;
margin-left : 5px;
}
.last ul li a {
text-decoration : none;
font-size : 12px;
color : #757474;
}
.last ul li:last-child {
font-size : 10px;
margin-top : 42px;
margin-left : 30px;
color : #616161;
}
.last div {
position : absolute;
top : auto;
bottom : 30px;
left : 10%;
height : 5px;
font-family : "AvantGardEF";
font-size : 12px;
color : #616161;
letter-spacing : 1.5px;
word-spacing : 1px;
font-weight : nomal;
}
$(function() {
$('.one .main .lip').mouseover(function() {
$('.one .main .lip img').animate({
opacity: "1"
}, 1000);
});
$('.one .main .lip').mouseout(function() {
$('.one .main .lip img').animate({
opacity: "0"
}, 1000);
});
$('.four .main .slider .side-bar').click(function() {
var $clickedBtn = $(this);
var $slider = $clickedBtn.parent();
var $currentSlide = $slider.find('.slides > .active');
var $postSlide = null;
var $firstSlide = $slider.find('.slides div:first-child');
var $lastSlide = $slider.find('.slides div:last-child')
var rs = $clickedBtn.hasClass('left');
if (rs) {
$postSlide = $currentSlide.prev();
if ($postSlide.length == 0) {
$postSlide = $lastSlide
}
} else {
$postSlide = $currentSlide.next();
if ($postSlide.length == 0) {
$postSlide = $firstSlide
}
}
$currentSlide.removeClass('active');
$postSlide.addClass('active');
});
$('.slider').mouseover(function() {
var $Slider = $(this);
$Slider.data('autoplay-current','0');
});
$('.slider').mouseout(function() {
var $Slider = $(this);
$Slider.data('autoplay-current', '1');
});
$('.slider').each(function(index, node) {
var $Slider = $(node);
var interval = $Slider.data('autoplay-interval');
if(!interval) {
interval=5000;
} else {
interval*=1;
}
});
$('.btn > div').click(function() {
$(document.body).scrollTop(0);
});
$('.btn > div:last-child').click(function() {
$(document.body).scrollTop($(document.body).height());
});
});
