@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Kalam);
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body {font-family:orbitron; }


#wrap {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; min-width: 1400px; min-height: 780px; background-image: url(http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1444253482/DG2015-paris.jpg?itok=XH81cBH9); background-size: cover; transition: all 1.4s;}

/*로고*/
#wrap h1 {width: 90px; height: 80px; position: fixed; top: 15%; left: 48%; background-image: url(../img/logo1.png); background-size: contain; background-repeat: no-repeat;}

#gnb {position: fixed; top: 60px; right: 50px;}
#gnb li {float: left; margin-left: 20px;}
#gnb li a {font: 15px Kalam; font-weight: bold; color: #ddd;}

#sns {position: fixed; top: 20px; right: 50px;}
#sns li {float: left; margin-left: 30px;  transition: all 0.4s; opacity: 0.6;}
#sns li a {font-size: 16px; color: #ddd; }
#sns li:hover {opacity: 1;}

article {position: fixed; top: 24%; left: 39%; text-align: center; }
article p {font: 30px arial; color: #333;}
article p strong {color: #111;}
article em {font-size: 14px; font-style: normal; color: #444;}

/*시계*/
figure {position: absolute; top: 30%; left: 38%; transition: all 2s;}
figure p {font:80px kalam; font-weight: bold; color: #000;}

/*일정*/
nav {position: fixed; top: 8%; left:1%; width: 59.5%;}
nav li {width: 16%; text-align: center; margin-bottom:100px; background: #fff; opacity: 0.8; border-radius: 0 20px 0 0; transition: all 0.4s; border-bottom: 3px solid #2989D8; box-sizing: border-box;}
nav li a {display: block; width: 80%; height: 50px;  margin: 0 auto;  font: 18px Kalam; font-weight: bold; line-height: 3; letter-spacing: 1px; box-sizing: border-box; padding-bottom: 5px; z-index:1; position: relative; color:#000; opacity:0.8; margin-bottom: -10px;}
nav li:hover {opacity: 1; background: #2989D8; color: #fff;}

/*구름구름*/
#wrap>img:nth-child(1) {position: absolute; top: 0px; left: -1146px; animation: ani1 110s linear infinite; opacity: 0.6;}
#wrap>img:nth-child(2) {position: absolute; top: 30px; left: 0px; animation: ani2 100s linear infinite; opacity: 0.6;}

@keyframes ani1 {
  0%{left: -1146px;}
  100%{left: 1950px;}
}
@keyframes ani2 {
  0%{left: 0px;}
  50%{left: 1950px; opacity: 0;}
  50.001%{left: -1840px; opacity: 0.6;}
  100%{left: 0px;}
}

/*일정*/
/*박물관*/
#wrap.Louvre {background-image: url(http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1444253482/DG2015-paris.jpg?itok=XH81cBH9);}
#wrap.Louvre h1 {background-image: url(../img/logo1.png);}
#wrap.Louvre #gnb a {color: #ddd;}
#wrap.Louvre #sns i {color: #ddd;}
#wrap.Louvre article p {color: #333;}
#wrap.Louvre article p strong {color: #111;}
#wrap.Louvre article em {color: #333;}
#wrap.Louvre figure p {color: #333;}
#wrap.Louvre nav ul li:hover {background: #2989D8; color: #fff;}
#wrap.Louvre nav li:nth-child(1) {background: #2989D8; color: #fff;}
#wrap.Louvre nav li.on {background: #2989D8; color: #fff; border: 2px solid #bbb;}
#wrap.Louvre>img:nth-child(1) {opacity: 1;}
#wrap.Louvre>img:nth-child(2) {opacity: 1;}

/*,사원*/
#wrap.SacreCoeur {background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/30/Basilique_du_Sacr%C3%A9-C%C5%93ur_de_Montmartre_1.jpg);}
#wrap.SacreCoeur h1 {background-image: url(../img/logo1.png);}
#wrap.SacreCoeur #gnb a {color: #777;}
#wrap.SacreCoeur #sns i {color: #555;}
#wrap.SacreCoeur article p {color: #eee;}
#wrap.SacreCoeur article p strong {color: #111;}
#wrap.SacreCoeur article em {color: #333;}
#wrap.SacreCoeur figure p {color: #333;}
#wrap.SacreCoeur nav ul li:hover {background: #2989D8; color: #fff;}
#wrap.SacreCoeur nav li:nth-child(2) {background: #2989D8; color: #fff;}
#wrap.SacreCoeur nav li.on {background: #2989D8; color: #fff; border: 2px solid #bbb;}
#wrap.SacreCoeur>img:nth-child(1) {opacity: 1;}
#wrap.SacreCoeur>img:nth-child(2) {opacity: 1;}

/*에펠탑*/
#wrap.Eiffel {background-image: url(https://i.imgur.com/kApTrja.jpg);}
#wrap.Eiffel h1 {background-image: url(../img/logo1.png);}
#wrap.Eiffel #gnb a {color: #ccc;}
#wrap.Eiffel #sns i {color: #fff;}
#wrap.Eiffel article p {color: #ddd;}
#wrap.Eiffel article p strong {color: #fff;}
#wrap.Eiffel article em {color: #333;}
#wrap.Eiffel figure p {color: #fff;}
#wrap.Eiffel nav ul li:hover {background: #2989D8; color: #fff;}
#wrap.Eiffel nav li:nth-child(3) {background: #2989D8; color: #fff;}
#wrap.Eiffel nav li.on {background: #2989D8; color: #fff; border: 2px solid #bbb;}
#wrap.Eiffel>img:nth-child(1) {opacity: 0.6;}
#wrap.Eiffel>img:nth-child(2) {opacity: 0.6;}

/*전망대*/
#wrap.Montparnasse {background-image: url(https://www.thetimes.co.uk/travel/s3/growthtravel-prod/uploads/2016/04/Paris-on-a-budget.jpg);}
#wrap.Montparnasse h1 {background-image: url(../img/logo1.png);}
#wrap.Montparnasse #gnb a {color: #777;}
#wrap.Montparnasse #sns i {color: #555;}
#wrap.Montparnasse article p {color: #777;}
#wrap.Montparnasse article p strong {color: #222;}
#wrap.Montparnasse article em {color: #888;}
#wrap.Montparnasse figure p {color: #333;}
#wrap.Montparnasse nav ul li:hover {background: #2989D8; color: #fff;}
#wrap.Montparnasse nav li:nth-child(4) {background: #2989D8; color: #fff;}
#wrap.Montparnasse nav li.on {background: #2989D8; color: #fff; border: 2px solid #bbb;}
#wrap.Montparnasse>img:nth-child(1) {opacity: 0.1;}
#wrap.Montparnasse>img:nth-child(2) {opacity: 0.1;}
#wrap.Montparnasse figure p img.cl1 {opacity: 0.4;}
#wrap.Montparnasse figure p img.cl2 {opacity: 0.4;}

/*강*/
#wrap.Seine {background-image: url(https://www.walldevil.com/wallpapers/a89/paris-notre-night-lights-city-river-wallpaper-france.jpg);}
#wrap.Seine h1 {background-image: url(../img/logo1.png);}
#wrap.Seine #gnb a {color: #ccc;}
#wrap.Seine #sns i {color: #fff;}
#wrap.Seine article p {color: #ddd;}
#wrap.Seine article p strong {color: #fff;}
#wrap.Seine article em {color: #ddd;}
#wrap.Seine figure p {color: #fff;}
#wrap.Seine nav ul li:hover {background: #2989D8; color: #fff;}
#wrap.Seine nav li:nth-child(5) {background: #2989D8; color: #fff;}
#wrap.Seine nav li.on {background: #2989D8; color: #fff; border: 2px solid #bbb;}
#wrap.Seine>img:nth-child(1) {opacity: 0.1;}
#wrap.Seine>img:nth-child(2) {opacity: 0.1;}
#wrap.Seine figure p img.cl1 {opacity: 0.4;}
#wrap.Seine figure p img.cl2 {opacity: 0.4;}