@charset "UTF-8";

@font-face {
    font-family: "nanumdinbold";
    src: url('/hellovenus/font/nanumdinbold.eot');
    src: url('/hellovenus/font/nanumdinbold.eot?#iefix') format('embedded-opentype'),
         url('/hellovenus/font/nanumdinbold.woff') format('woff'),
         url('/hellovenus/font/nanumdinbold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body { font-family: "nanumdinbold"; color: #fff; }
a { text-decoration: none; color: #fff; }
ul, ol, li { list-style: none; }
button { cursor: pointer; -webkit-appearance: none; }
img { border: 0 none; }

.blind { display: none; }
.ir { text-indent: -9999px; }

#wrap { position: relative; width: 100%; height: 100%; min-height: 800px; }

#header { z-index: 200; }
#section { z-index: 0; }
#bgWrap { z-index: 1; }
#albumList { z-index: 2; }
#albumInfo { z-index: 3; }
#albumView { z-index: 4; }
#arrows { z-index: 5; }
#footer { z-index: 100; }

#header, #footer { position: absolute; width: 100%; height: 50px; background-color: #7ac5ad; }
#header { top: 0; }
#footer { bottom: 0; }

#header h1 { position: relative; width: 100px; height: 18px; margin: 16px 10px; background: url(/hellovenus/images/logo.png) 50% 50% no-repeat; background-size: 100px 18px; }
#header h1 a { display: block; width: 100%; height: 100%; }
#sns { position: absolute; top: 14px; left: 130px; }
#sns ul li { float: left; margin-right: 5px; width: 20px; height: 20px; }
#sns ul li.fb { width: 12px; }
#sns ul li a { display: block; width: 100%; height: 100%; background: url(/hellovenus/images/sns.png) 0 0 no-repeat; background-size: 52px 40px; }
#sns ul li.fc a { background-position: 0 0; }
#sns ul li.yt a { background-position: -20px 0; }
#sns ul li.fb a { background-position: -40px 0; }
#sns ul li.tw a { background-position: 0 -20px; }
#sns ul li.me a { background-position: -20px -20px; }
#nav { position: absolute; top: 50px; right: 0; width: 100%; }
#nav h4 { position: absolute; top: -50px; right: 0px; width: 50px; height: 50px; background: url(/hellovenus/images/nav_icon.png) 50% 50% no-repeat; background-size: 25px 25px; cursor: pointer; }
#nav ul { height: 0; opacity: 0; overflow: hidden; }
#nav li { width: 100%; height: 49px; border-top: 1px solid #fff; background-color: #7ac5ad; }
#nav li a { display: block; padding: 16px 20px; font-size: 12px; font-weight: bold; }

#section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f0efdd; overflow: hidden; }
#bgWrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0 auto; }
#albumInfo { opacity: 0; position: absolute; top: 100px; left: 50%; width: 260px; height: 280px; padding: 20px; margin-left: -150px; background-color: #7ac5ad; }
#albumInfo h3 { font-size: 16px; }
#albumInfo h5 { font-size: 12px; margin-top: 10px; }
#albumInfo li { font-size: 12px; font-weight: normal; line-height: 1.8em; }
#albumInfo .close { display: block; position: absolute; top: -35px; right: 0; width: 30px; height: 30px; border: 0 none; background: none; background: url(/hellovenus/images/close.png) 0 0 no-repeat; background-size: 30px 30px; }
#albumView { display: none; position: absolute; top: 100px; left: 50%; width: 290px; height: 290px; margin-left: -150px; border: 5px solid #7ac5ad; }
#albumView .viewer { position: relative; width: 100%; height: 100%; overflow: hidden; }
#albumView ul { position: absolute; top: 0; left: 0; width: 1450px; }
#albumView li { position: relative; float: left; width: 290px; height: 290px; cursor: pointer; }
#albumView li img { display: block; width: 100%; height: 100%; }
#albumView .over { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
#albumView .over img { display: block; width: 100%; height: 100%; }
#albumView .over:hover { opacity: 1; }
#albumView .close { display: block; position: absolute; top: -40px; right: -5px; width: 30px; height: 30px; border: 0 none; background: none; background: url(/hellovenus/images/close.png) 0 0 no-repeat; background-size: 30px 30px; }
#albumList { opacity: 0; position: absolute; bottom: 20px; left: 0; width: 100%; height: 240px; }
#albumList ul { position: relative; width: 300px; height: 210px; margin: 0 auto; }
#albumList li { float: left; width: 80px; height: 80px; border: 5px solid #7ac5ad; margin: 0 15px 15px 0; background-color: #000;  cursor: pointer; }
#albumList li:nth-child(3n) { margin: 0 0 15px 0; }
#albumList li img { display: block; width: 100%; height: 100%; }
#albumList li.disable img { opacity: 0.5; }
#arrows { display: none; position: absolute; bottom: 270px; left: 50%; width: 0; height: 40px; }
#arrows button { position: absolute; display: block; top: 0; width: 40px; height: 40px; border: 0 none; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; background-size: 40px 40px; }
#arrows button.prev { background-image: url(/hellovenus/images/prev.png); left: -50px; }
#arrows button.next { background-image: url(/hellovenus/images/next.png); left: 10px; }

#section .mainLeft { position: absolute; top: 50%; left: 0; width: 200px; height: 675px; margin-top: -337.5px; }
#section .mainRight { position: absolute; top: 50%; right: 0; width: 200px; height: 675px; margin-top: -337.5px; }
#section.wide .mainLeft { position: absolute; top: 50%; left: 0; width: 320px; height: 1080px; margin-top: -540px; }
#section.wide .mainRight { position: absolute; top: 50%; right: 0; width: 320px; height: 1080px; margin-top: -540px; }

#footer address { position: relative; height: 30px; padding: 10px; font-style: normal; font-size: 10px; }
#footer address span { display: none; }
#footer address .enter { display: inline; }
#footer .author { display: none; }
#related { position: absolute; top: 0; right: 0; width: 100%; }
#related h4 { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url(/hellovenus/images/related_icon.png) 50% 50% no-repeat; background-size: 25px 25px; cursor: pointer; }
#related ul { position: absolute; bottom: 0; right: 0; width: 100%; height: 0; opacity: 0; overflow: hidden; }
#related ul li { width: 100%; height: 35px; padding: 7px 0; border-bottom: 1px solid #fff; background-color: #7ac5ad; }
#related ul li a { display: block; width: 100%; height: 100%; background: url(/hellovenus/images/related.png) 10px 0 no-repeat; background-size: 90px 105px; }
#related ul li.xxx a { background-position: 10px 0; }
#related ul li.yyy a { background-position: 10px -35px; }
#related ul li.zzz a { background-position: 10px -70px; }

@media all and (min-width:640px){
	#header h1 { width: 150px; height: 25px; margin: 12px 20px 13px; background-image: url(/hellovenus/images/logo2.png); background-size: 150px 25px; }
	#sns { top: 12px; left: 190px; }
	#sns ul li { margin-right: 10px; width: 25px; height: 25px; }
	#sns ul li.fb { width: 15px; }
	#sns ul li a { background-image: url(/hellovenus/images/sns2.png); background-size: 65px 50px; }
	#sns ul li.fc a { background-position: 0 0; }
	#sns ul li.yt a { background-position: -25px 0; }
	#sns ul li.fb a { background-position: -50px 0; }
	#sns ul li.tw a { background-position: 0 -25px; }
	#sns ul li.me a { background-position: -25px -25px; }
	#nav { width: auto; top: 20px; right: 20px; }
	#nav h4 { display: none; }
	#nav ul { width: auto; height: 30px !important; opacity: 1 !important; }
	#nav li { float: left; width: auto; height: 30px; border-top: 0; margin-left: 20px; }
	#nav li a { height: 26px; padding: 0; }
	#nav li a:hover, #nav li a.selected { border-bottom: 4px solid #fff; }
}

@media all and (min-width:768px){
	#wrap { min-height: 900px; }

	#albumInfo { top: 50%; width: 420px; height: 290px; padding: 25px 40px; margin-top: -220px; margin-left: -250px; }
	#albumInfo h3 { font-size: 26px; }
	#albumInfo h5 { margin-top: 10px; }
	#albumInfo .close { top: -40px; right: -40px; }
	#albumView { top: 50%; width: 630px; height: 630px; margin-top: -360px; margin-left: -320px; }
	#albumView .close { top: -40px; right: -40px; }
	#albumView ul { width: 3150px; }
	#albumView li { float: left; width: 630px; height: 630px; }
	#albumList { left: 0; width: 100%; height: 135px; }
	#albumList ul { width: 500px; height: 135px; margin: 0 auto; }
	#albumList li { margin: 0; margin-left: 12.5px; }
	#albumList li:nth-child(3n) { margin: 0; margin-left: 12.5px; }
	#albumList li:first-child { margin: 0; }
	#arrows { top: 50%; bottom: auto; left: 0; width: 100%; height: 0; }
	#arrows button { top: -50px; width: 50px; height: 100px;background-size: 50px 100px; }
	#arrows button.prev { background-image: url(/hellovenus/images/prev_big.png); left: 0; }
	#arrows button.next { background-image: url(/hellovenus/images/next_big.png); left: auto; right: 0; }

	#footer address { height: 14px; padding: 18px 20px; }
	#footer address span { display: inline; }	
	#footer address .enter { display: none; }
	#related { width: auto; }
	#related h4 { display: none; }
	#related ul { top: 8px; bottom: auto; right: 20px; width: 255px; height: 35px !important; opacity: 1 !important; }
	#related ul li { float: left; height: 35px; padding: 0; border-bottom: 0; margin-left: 10px; }
	#related ul li.xxx { width: 80px; }
	#related ul li.yyy { width: 90px; }
	#related ul li.zzz { width: 55px; }
	#related ul li.xxx a { background-position: 0 0; }
	#related ul li.yyy a { background-position: 0 -35px; }
	#related ul li.zzz a { background-position: 0 -70px; }
}

@media (min-width:768px) and (min-height:860px){

}

@media all and (min-width:1024px){
	#footer .author { display: block; position: absolute; top: 0; right: 280px; height: 14px; padding: 18px 0; font-size: 10px; }
	#footer .author a:hover { color: rgb( 239, 67, 67 ); }
}