@charset "utf-8";
.wrap {position:relative; overflow:hidden;}
.wrap>div {float:left;}
div.gnb ul {overflow:hidden;}
div.gnb ul li{float:left; height:80px; text-align:center;}
div.gnb ul li a {display:block; padding-top:30px;}
div.gnb ul li.login a {background:url(../img/login.gif) no-repeat center top;}
div.gnb ul li.logout a {background:url(../img/logout.gif) no-repeat center top;}
div.gnb ul li.join a {background:url(../img/join.gif) no-repeat center top;}
div.gnb ul li.mypage a {background: url(../img/mypage.gif) no-repeat center top;}
div.gnb a {position:relative; display:block; margin-bottom:5px;}
div.gnb a span{position:absolute; right:0; top:3px; display:inline-block; padding:2px 10px; color:#fff; border-radius:40px; font-size:13px; font-weight:500; background:#1b27ba; }
div.box {position:relative; padding:1.5% 2%; background:#2333ff; color:#fff; text-align:center; border-right:2px solid #fff; border-bottom:2px solid #fff;}
div.box .process {color:#31d6ff; font-size:18px; font-weight:500;}
div.box .event {position:absolute; right:5px; top:5px; width:71px; height:72px; font-size:0; line-height:0; background:url(../img/event-blue.png) no-repeat left top;}
div.box .title {margin-top:25px; font-size:20px; word-break:keep-all;}
div.box .dday {margin-top:25px; font-size:16px; color:#091285;}
div.box .rate {margin-top:10px;}
div.box .rate>span{display:inline-block; width:50px;}
div.box .rate>div {display:inline-block; vertical-align:middle; width:80%; height:14px; margin-right:5px; background:#fff; border-radius:20px;}
div.box .rate>div>span {display:block; height:14px; background:#1b27ba;}
div.box .join {position:absolute; left:0; bottom:25px; width:100%; font-size:22px; font-weight:500;}
div.box.end {background:#333;}
div.box.end .process {color:#fff;}
div.box.end .event {background:url(../img/event-black.png) no-repeat left top;}
div.box.end .dday {color:#000;}
div.box.end .join {color:#fcff00}
div.title p {color:#000; font-weight:200;}
div.title p span {font-weight:700;}
div.title p:first-child {margin-left:6px; font-size:16px; font-weight:400; color:#666; letter-spacing:0;}
div.notice {padding:40px}
div.notice p {line-height:24px; font-size:13px; color:#666; word-break:keep-all;}
div.notice p:first-child {margin-bottom:30px; font-size:21px; font-weight:500; color:#000;}
div.notice a {display:block; margin-top:30px; font-size:14px; font-weight:500;}
div.num {font-weight:700; text-align:center; color:#484848; }
div.num span, div.num a{display:block; margin-top:20px; font-weight:400;}
div.num.num-end {color:#2333ff;}
div.num.align-R {float:right;}
.footer {padding:40px; color:#666; font-size:13px; letter-spacing:.5px;}
/* .footer {padding:85px 0; text-align:center; color:#666; font-size:13px; letter-spacing:.5px; background:#f5f5f5;} */

/*web*/
@media all and (min-width:1267px){
	div.logo {width:20%; padding:140px 0 0 40px;}
	div.gnb {float:right; width:20%; padding:0 3%;}
	div.gnb ul{margin:60px 0 50px;}
	div.gnb ul li{width:50%;}
	div.gnb p a {margin-top:20px;}
	div.box {width:20%; height:320px;}
	div.box.sub {width:100%; height: 100%; border-right: 0;}
	div.title, div.notice {width:40%;}
	div.title {padding:120px 0 0 40px;}
	div.title p {font-size:50px;}
	div.notice, div.num {height:auto;}
	div.num {width:20%; padding:80px 0; font-size:51px; border-right:1px solid #ddd;}
	div.num span, div.num a{font-size:21px;}
	div.num.num-end {border:none;}
	div.footer {float:left;margin-top:80px;}

	.wb {display:none;}
	.mb {display:block;}
}
@media screen and (min-width:1500px){
	div.title p {font-size:60px;}
}

@media screen and (max-width:1266px){
	div.logo {position:absolute; left:10px; top:20px; width:120px;}
	div.gnb ul {position:absolute; right:10px; top:20px;}
	div.gnb ul li {margin:0 10px;}
	div.gnb ul li a {font-size:14px;}
	div.gnb p {display:none;}
	div.box {width:33.3%; height:300px;}
	div.box.sub {width:100%; height: 100%; border-right: 0;}
	div.box .process {margin-top:20px;}
	div.box .title {margin-top:17px;}
	div.title, div.notice {width:100%;}
	div.title {padding:20px 0 40px; text-align:center;}
	div.title p {font-size:50px;}
	div.notice {padding:2%; background:#f5f5f5}
	div.num {width:33.3%; padding:40px 20px; font-size:40px;}
	div.num span, div.num a{font-size:16px;}
	div.footer {float:left; width:100%; text-align:center; background:#f5f5f5;}
	.wb {display:block;}
	.mb {display:none;}
}

/*tablet*/
@media screen and (max-width:900px){
	div.gnb ul li a {display:block; line-height:25px; padding-top:0; padding-left:32px}
	div.gnb ul li.login a, div.gnb ul li.logout a, div.gnb ul li.join a, .gnb ul li.mypage a {background-position:left top !important;}
	div.box {width:50%; height:300px;}
	div.box.sub {width:100%; height: 100%; border-right: 0;}
	div.box .title {width:80%; margin:30px auto 0; font-size:20px; line-height:28px; word-break:keep-all;}
	div.box .dday {margin-top:10px;}
	div.title {padding:100px 0 40px; text-align:center;}
	div.title p {margin-top:5px; font-size:40px;}
}

/*mobile*/
@media screen and (max-width:600px){
	div.box {width:100%; height:260px;}
	div.box.sub {width:100%; height: 100%; border-right: 0;}
}

/*mini*/
@media screen and (max-width:600px){
	div.box {height:300px;}
	div.box.sub {width:100%; height: 100%; border-right: 0;}
}