@charset "utf-8";
/*reset*/
* {margin:0;padding:0;border:none;text-decoration:none;list-style:none;border-radius:0;}
.sound_only {display:none;}
img {display:block;}
html,body {height:100%}
#wrap {width:100%;min-height:100%;}
/*header*/
header {width:800px;margin:auto;overflow:hidden;}
#logo {float:left;margin-top:20px;position:relative;}
#logo a {font-size:0;width:117px;height:29px;background:center / cover no-repeat url("./Img/logo.gif");display:block;margin-left:15px;}
#logo span {position:absolute;font:400 8px/8px 'Noto Sans KR', sans-serif;color:#777;padding:3px;border-radius:2px;right:-50px;top:6px;border:1px solid #E1E1E1;}
#logo span:hover {cursor:pointer;background-color:#777;color:#fff;}
#gnb {float:right;}
#gnb li {float:left;}
#gnb a {font:400 16px/16px 'Noto Sans KR', sans-serif;color:#162a48;padding:27px;display:block;}
#gnb a:hover {color:#0080ff}
#gnb a.bold {font-weight:700;border-left:1px solid #d6e0ea;}
#gnb a.bold.start {background-color:#0080ff;color:#fff;}
#gnb a.bold.start:hover {background-color:#006aff;}
#release, #email, #about {position:fixed;background:rgba(0,0,0,0.50);width:100%;height:100%;left:0;top:0;z-index:1000;display:none;}
#release ul, #email ul, #about ul{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:600px;overflow:auto;background-color:#fff;padding:30px;box-sizing:border-box;max-width:80%;max-height:80%;}
#release li {font-size:14px;width:calc(100% - 100px);position:relative;}
#release h2,#email h2, #about h2{font:500 20px/20px 'Noto Sans KR', sans-serif;color:#333;margin:20px 0;}
#release .version {font-size:13px;background-color:#666;color:#fff;display:inline-block;padding:3px 10px 4px;border-radius:3px;margin-right:10px;}
#release date {position:absolute;color:#999;right:-100px;top:0;}
#about li:not(:first-child) {list-style:disc;margin-left:15px;font-size:13px;padding:5px 0;}
#email li:nth-child(2) {font-size:13px;margin:10px 0 15px;color:#777;}
#email li:nth-child(n+3) {}
#email label {display:block;font:400 13px/13px 'Noto Sans KR', sans-serif;color:#777;}
#email input,#email textarea {display:block;border:2px solid #eee;width:100%;margin:5px 0 20px;box-sizing:border-box;outline:none;font:400 13px/16px 'Noto Sans KR', sans-serif;color:#333;padding:20px;-webkit-appearance:none;}
#email input:focus, #email textarea:focus {border:2px solid #162a48;}
#email textarea {height:100px;}
#email button {background:#eee;outline:none;font:400 16px/16px 'Noto Sans KR', sans-serif;color:#333;width:100%;padding:10px 0;border-radius:5px;}
#email button:hover {background:#333;color:#eee;}
/*slider*/
#slider {background:#f4f8fc;position:relative;overflow:hidden;}
#slider ul {margin-top:50px;}
#slider li {height:260px;float:left;}
#slider div {position:absolute;left:50%;margin-top:220px;transform:translateX(-50%);}
#slider span {width:13px;height:13px;background-color:#e9ecf0;float:left;border-radius:50%;margin-right:10px;}
#slider span:hover {cursor:pointer;}
#slider span.on {background-color:#006aff;}
#slider p {text-align:center;font:500 28px/28px 'Noto Sans KR',sans-serif;color:#293c58;}
#slider p:nth-child(1) {margin-top:50px;}
#slider p:nth-child(2) {font-weight:400;font-size:16px;color:#676767;margin-top:20px;letter-spacing:-0.05em;}
/*info*/
.info {width:800px;margin:auto;}
.info ul {overflow:hidden;}
.info h2 {font:500 18px/18px 'Noto Sans KR',sans-serif;color:#293c58;text-indent:15px;padding:50px 0 10px;}
.info h2::before {position:absolute;background-color:#0080ff;width:9px;height:3px;content:"";margin-top:8px;margin-left:-15px;}
.info li {font:500 13px/13px 'Noto Sans KR',sans-serif;color:#989fa5;width:calc(100% / 4);float:left;box-sizing:border-box;text-align:center;height:auto;margin:10 10px;}
.info p {text-align:center;color:#4a4e52;}
.info i {font-size:30px;color:#48484e;display:block;height:30px;margin-top:30px;}
.info p i {display:block;}
.info p span {display:block;color:#a8abad;font-weight:300;font-size:12px;letter-spacing:-0.05em;margin:10px;}
/*footer*/
footer {background:#444;margin-top:50px;padding:50px 0 100px;}
footer div {width:800px;margin:auto;}
footer ul {float:right;margin-top:3px;}
footer h2+div li {float:left;}
footer p {display:inline-block;color:#8a8a8a;font:300 12px/12px 'Noto Sans KR',sans-serif;}
footer address,footer a{color:#8a8a8a;font:300 12px/12px 'Noto Sans KR',sans-serif;}
footer p a {position:absolute;margin-left:5px;}
footer li a {display:block;padding:0 10px;}
footer li:first-child a {border-right:1px solid #5d5d5d;}
footer div a:hover {color:#fff;}

@media screen and (max-width:800px) {
	#wrap {max-width:100%;}
	header {width:100%;}
	.pc {display:none;}
	#gnb a {padding:27px 12px;font-size:18px;}
	#logo span {right:0;transform:translateX(110%)}
	#slider ul {margin-top:0;}
	#slider li {height:auto;padding-bottom:70px;}
	#slider div {position:absolute;bottom:30px;}
	#slider p:nth-child(1) {margin-top:40px;}
	#slider p:nth-child(2) {;margin:10px 20px 0;}
	.info {width:100%;}
	.info h2 {font-size:16px;margin:30px 20px 10px;padding:20px 0 0;}
	.info h2::before {margin-top:8px;}
	#info li {padding:0 10px;}
	footer {padding:20px 20px 60px;position:relative;}
	footer a,footer p{color:#ccc;font-size:14px}
	footer div {width:100%;margin:0;padding:0;}
	footer a#email_bt {position:absolute;padding:20px;left:107px;top:5px;}
	#release ul,#email ul,#about ul {max-width:90%;height:auto;padding:15px;}
	#release h2,#email h2,#about h2 {margin:10px 0 20px;}
	#release li:not(:first-child) {width:100%;padding-top:30px;}
	#release .version {position:absolute;top:5px;padding-bottom:2px;}
	#release date {right:0;top:8px;}
	#email input,#email textarea {padding:10px 20px;}
}
@media screen and (max-width:380px) {
	#logo {float:none;display:block;}
	#logo>a {margin:13px auto;}
	#logo span {position:absolute;top:6px;right:auto;transform:none;left:50%;margin-left:65px;}
	#gnb {float:none;clear:both;overflow:hidden;margin-top:10px;}
	#gnb li {width:50%;}
	#gnb li a {text-align:center;padding:20px 0;}
	#gnb li a.bold{border-top:1px solid #d6e0ea;}
	.info li {width:50%;}
	.info li:nth-child(2n+3) {clear:both;}
	#info li:nth-child(n+3) {margin-top:30px;}
	footer ul, footer h2+div li,footer p {float:none;}
	footer h2+div ul {text-align:center;}
	footer h2+div li {display:inline-block;}
	footer li a {padding:10px;}
	footer p {text-align:center;display:block;padding-right:30px;}
	footer a#email_bt {left:auto;top:auto;padding:1px 10px 10px 5px;}
	footer li:first-child a {border-right:none}
	footer li:first-child a::after {content:"";border-right:1px solid #5d5d5d;position:absolute;height:10px;margin-left:13px;margin-top:2px;}
}