@charset "utf-8";
/*ÁÖ¹ÎÂü¿©¿¹»ê ÀÎŬ·çµå¶§¹®¿¡ Ãß°¡Àû¿ë*/
.survey_layout {position:relative; overflow:hidden; margin-top:30px;}
.survey_layout>.box {float:left; width:25%; box-sizing:border-box;}
.survey_layout .paging_mb {position:static; min-width:300px; margin:20px auto 0;}
.survey_layout .page_btn{color:#333 !mportant}
.survey_layout .page_btn:after,
.survey_layout .page_btn:before{transform:scale(.8,.8); background:#333 !important}
.survey_layout .page_btn.next,
.survey_layout .paging_mb .wfont{color:#333}
.survey_layout .box {width:24.4%; margin:.3%;; background:#53c50f; box-shadow: inset 0px 1px 1px rgba(0,0,0,.2);  box-shadow:none; border-radius:8px; overflow:hidden}
.survey_layout .box.end{background:#eee; border:1px solid #e5e5e5}
.survey_layout .box .process{display:none; position:relative; font-size:16px; color:#b4f72f}
.survey_layout .box .process:After{display:block; content:''; position:absolute; left:50%; bottom:-10px; margin-left:-2px; width:4px; height:4px; background:#b4f72f; border-radius:50px}
.survey_layout .box.end .process{color:#888}
.survey_layout .box.end .process:After{background:#aaa}
.survey_layout .box .title{height:60px; overflow:hidden}
.survey_layout .box.end .title{color:#484848}
.survey_layout .box .rate{margin-top:0px}
.survey_layout .box .rate>div{height:10px; overflow:hidden; background:#47ac0b; box-shadow: inset 0px 1px 1px rgba(0,0,0,.2);}
.survey_layout .box .rate>div>span{height:10px; background:#b4f72f; border-radius:20px}
.survey_layout .box .dday{display:inline-block; margin-top:55px; padding:0px 15px; font-size:15px; background:rgba(255,255,255,.7); border-radius:5px; color:#333 }
.survey_layout .box.ing .join a,
.survey_layout .box.box.end .join a,
.survey_layout .box.box.end .join span{padding:4px 16px; background:#fff; border-radius:100px; color:#333; font-size:16px; font-weight:bold; line-height:150%; box-shadow:0px 1px 2px rgba(0,0,0,.2)}
.survey_layout .box.box.end .join span{border:1px solid #ccc; background:transparent; color:#666; box-shadow:none}
.survey_layout .box.end .event,
.survey_layout .box .event{right:-52px; top:-52px; font-size:14px; letter-spacing:-2px; font-weight:bold; width:100px; height:100px; line-height:165px; background:#fcff00; color:#333; transform:rotate(45deg); -webkit-transform:rotate(45deg); box-shadow:0px 0px 5px rgba(0,0,0,.3)}
.survey_layout .box.end .event{background:#aaa}

/*ÁÖ¹ÎÂü¿©¿¹»ê ÀÎŬ·çµå¶§¹®¿¡ Ãß°¡Àû¿ë end */

.box {position:relative; padding:1.5% 2%; background:#2333ff; color:#fff; text-align:center; border-right:2px solid #fff; border-bottom:2px solid #fff;}
.box .process {color:#31d6ff; font-size:18px; font-weight:500;}
.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;}
.box .title {margin-top:25px; font-size:20px; color:#fff; word-break:keep-all;}
.box .dday {margin-top:25px; font-size:16px; color:#091285;}
.box .rate {margin-top:10px;}
.box .rate>span{display:inline-block; width:50px;}
.box .rate>div {display:inline-block; vertical-align:middle; width:80%; height:14px; margin-right:5px; background:#fff; border-radius:20px;}
.box .rate>div>span {display:block; height:14px; background:#1b27ba;}
.box .join {position:absolute; left:0; bottom:25px; width:100%; font-size:22px; font-weight:500;}
.box.ing .join a{color:#fff;}
.box.end .join a{color: #fcff00;}
.box.end .join{color: #fcff00;} 
.box.end {background:#333;}
.box.end .rate {display:none;}
.box.end .process {color:#fff;}
.box.end .event {background:url(../img/event-black.png) no-repeat left top;}
.box.end .dday {color:#000;}

.box-tit {position:relative; padding:1.5% 2%; width:100%; height:240px; background:#2333ff; color:#fff; text-align:center; border-right:2px solid #fff; border-bottom:2px solid #fff;}
.box-tit .process {color:#31d6ff; font-size:18px; font-weight:500;}
.box-tit .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;}
.box-tit .title {margin-top:25px; font-size:20px; word-break:keep-all;}
.box-tit .dday {margin-top:25px; font-size:16px; color:#091285;}
.box-tit .rate {margin-top:10px;}
.box-tit .rate>span{display:inline-block; width:50px;}
.box-tit .rate>div {display:inline-block; vertical-align:middle; width:80%; height:14px; margin-right:5px; background:#fff; border-radius:20px;}
.box-tit .rate>div>span {display:block; height:14px; background:#1b27ba;}
.box-tit .join {position:absolute; left:0; bottom:25px; width:100%; font-size:22px; font-weight:500;}
.box-tit.end {background:#333;}
.box-tit.end .rate {display:none;}
.box-tit.end .process {color:#fff;}
.box-tit.end .event {background:url(../img/event-black.png) no-repeat left top;}
.box-tit.end .dday {color:#000;}
.box-tit.end .join {color:#fcff00}

.paging,
.page_go {display:none !important;}
.paging_mb {position:absolute; right:0; bottom:95px; text-align:center; width:20%; font-size:0;}
.paging_mb.dp_mb {display:block !important;}
.page_btn {display:inline-block; vertical-align:middle; position:relative; width:auto !Important; height:auto !important; text-indent:0 !Important; padding-top:65px; margin:10px; font-size:16px; border:0 !Important; transition:.5s; box-sizing:border-box;}
.page_btn.next {color:#2333ff;}
.page_btn:before {display:block; content:""; position:absolute; left:50%; margin-left:-29px; top:0; width:58px; height:58px; border-radius:50%; background:#333;}
.page_btn.next:before {background:#2333ff;}
.page_btn:after {display:block; content:""; position:absolute; left:50%; top:50%; width:15px; height:15px; margin-top:-24px; border-left:3px solid #fff; border-bottom:3px solid #fff;}
.page_btn.prev:after {margin-left:-6px; transform:rotate(45deg);}
.page_btn.next:after {margin-left:-12px; transform:rotate(-135deg);}
.paging_mb span {display:inline-block; vertical-align:middle; margin-bottom:26px; font-size:19px;}
.paging_mb .wfont {color:#2333ff;}

.nodata {padding:20px; text-align:center; border:6px solid #ddd;}

/*web*/
@media all and (min-width:1267px){
	.box {width:20%; height:280px;}
	div.box.sub {width:100%; height:100%; border-right: 0;}

	.box-tit .process {font-size:20px;}
	.box-tit .title {margin-top:10px; font-size:30px;}
	.box-tit .dday {font-size:20px;}
}

@media screen and (max-width:1266px){	
	.survey_layout>.box {width:49%;}
	.survey_layout .box .title{height:85px}
	.survey_layout .box .dday{margin-top:10px}
	.box {width:33.3%; height:300px;}
	.box.sub {width:100%; height: 100%; border-right: 0;}
	.box .process {margin-top:20px;}
	.box .title {margin-top:17px;}
	.paging_mb {width:100%}
	.paging_mb {bottom:50px;}
}

/*tablet*/
@media screen and (max-width:900px){
	.box {width:50%; height:300px;}
	.box.sub {width:100%; height: 100%; border-right: 0;}
	.box .title {width:80%; margin:30px auto 0; font-size:20px; line-height:28px; word-break:keep-all;}
	.box .dday {margin-top:10px;}
}

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

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