@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);

/*  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(../img/bg_morning.jpg);background-size:cover;transition:all 2s;}

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

/* 주메뉴 */
#gnb {position:fixed; top:50px; right:200px;}
#gnb li {float:left; margin-left:30px;}
#gnb li a {font-size:14px; font-weight:bold; color:#555;}

/* sns버튼 */
#sns {position:fixed; top:50px; right:50px;}
#sns li {float:left; margin-left:20px;}
#sns li i {font-size: 18px; color: #555;}

/* 텍스트박스 */
article {position:absolute; top:350px; left:150px; width:450px;}
article p {font-size:50px; color:#666;}
article p strong {color:#111;}
article em {font-size:14px;font-style:normal; color:#333;}

/* 모바일 영역 */
figure {position:absolute; top:200px; right:-300px; width:1226px; height:809px; background-image:url(../img/phone_morning.png); transition:all 2s; }
figure p {position:absolute; top:100px; left:137px; width:540px; height:307px; overflow:hidden; font-size:60px; font-weight:bold; color:#333;line-height:4.6; box-sizing:border-box; padding-left: 50px;}
figure p span {position:relative; z-index:5;}

/* 테마버튼 */
nav {position:fixed; bottom:70px; left:6%; width:88%;}
nav li {float:left; width:25%;}
nav li a {display:block; width:98%; height:35%; background:#fff; color:#111; margin:0 auto; transition:all 0.5s; font-size:12px; font-weight: bold; line-height:3; letter-spacing:3px; box-sizing:border-box;padding-left:30px;opacity:0.6;z-index:1;}
nav li:hover a {background:#111; color:#ff0;opacity:0.9;}
nav li.on a {background:#111; color:#f00;opacity:0.9;}

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

/* 모바일구름 */
figure p img.cl1 {width:600px; height:auto; position:absolute; top:30px;left:-600px; animation: ani3 110s linear infinite; z-index:4;}
figure p img.cl2 {width:700px; height:auto; position:absolute; top:20px;left:0px; animation: ani4 100s linear infinite; z-index:4;}

/* 구름모션 */
@keyframes ani1 {
	0% {left:-1146px;}
	100% {left:1950px;}
}
@keyframes ani2 {
	0% {left:0px;}
	50% {left:1950px;opacity:0;}
	50% {left:-1840px;opacity:0.8;}
	100% {left:0px;}
}
@keyframes ani3 {
	0% {left:-600px;}
	100% {left:540px;}
}
@keyframes ani4 {
	0% {left:0px;}
	50% {left:540px;opacity:0;}
	50% {left:-700px;opacity:1;}
	100% {left:0px;}
}

 /*아침 테마*/
#wrap.morning { background-image:url(../img/bg_morning.jpg);}
#wrap.morning h1 { background-image:url(../img/logo_b.png);}
#wrap.morning #gnb a { color:#555;}
#wrap.morning #sns i { color:#555;}
#wrap.morning figure { background-image:url(../img/phone_morning.png);}
#wrap.morning article p { color:#666;}
#wrap.morning article p strong { color:#111;}
#wrap.morning article em { color:#333;}
#wrap.morning figure p { color:#333;}
#wrap.morning>img:nth-child(1) { opacity:1;}
#wrap.morning>img:nth-child(2) { opacity:1;}

 /*오후 테마*/
#wrap.afternoon { background-image:url(../img/bg_afternoon.jpg);}
#wrap.afternoon h1 { background-image:url(../img/logo_b.png);}
#wrap.afternoon #gnb a { color:#555;}
#wrap.afternoon #sns i { color:#555;}
#wrap.afternoon figure { background-image:url(../img/phone_afternoon.png);}
#wrap.afternoon article p { color:#666;}
#wrap.afternoon article p strong { color:#111;}
#wrap.afternoon article em { color:#333;}
#wrap.afternoon figure p { color:#333;}
#wrap.afternoon>img:nth-child(1) { opacity:1;}
#wrap.afternoon>img:nth-child(2) { opacity:1;}

 /*저녁 테마*/
#wrap.evening { background-image:url(../img/bg_evening.jpg);}
#wrap.evening h1 { background-image:url(../img/logo_w.png);}
#wrap.evening #gnb a { color:#fff;}
#wrap.evening #sns i { color:#fff;}
#wrap.evening figure { background-image:url(../img/phone_evening.png);}
#wrap.evening article p { color:#444;}
#wrap.evening article p strong { color:#fff;}
#wrap.evening article em { color:#333;}
#wrap.evening figure p { color:#fff;}
#wrap.evening>img:nth-child(1) { opacity:0.6;}
#wrap.evening>img:nth-child(2) { opacity:0.6;}

 /*밤 테마*/
#wrap.night { background-image:url(../img/bg_night.jpg);}
#wrap.night h1 { background-image:url(../img/logo_w.png);}
#wrap.night #gnb a { color:#fff;}
#wrap.night #sns i { color:#fff;}
#wrap.night figure { background-image:url(../img/phone_night.png);}
#wrap.night article p { color:#bbb;}
#wrap.night article p strong { color:#fff;}
#wrap.night article em { color:#888;}
#wrap.night figure p { color:#fff;}
#wrap.night>img:nth-child(1) { opacity:0.1;}
#wrap.night>img:nth-child(2) { opacity:0.1;}
#wrap.night figure p img.cl1 { opacity:0.4;}
#wrap.night figure p img.cl2 { opacity:0.4;}