@charset 'utf-8';

/*************** common ***************/
* {margin: 0 auto; padding: 0;}
body, h1, h2, h3, h4, input, select, button, textarea {font-family: "malgun gothic","맑은고딕","dotum","돋움",  sans-serif; line-height: 20px; letter-spacing: -1px;}
img {width: 100%; border: 0; vertical-align: top;}
.png24 {tmp:expression(setPng24(this));}
ul {margin:0; padding:0;}
li {list-style:none;}
a {text-decoration: none;}

/*************** layout ****************/
/*** index ***/
#wrap {width:100%; max-width:640px;margin:0 auto;}
#header {width: 100%;}
#header a {width: 100%; height: 100%; display: block;}

#content {position: relative;}
#content .player {width: 71%; height: 74%; position: absolute; top: 24.7%; left: 12.3%;}
#content .survey {width: 13%; height: 33%; position: absolute; top: 24.7%; right: 3.3%}
#content .survey a {width: 100%; height: 100%; display: inline-block; text-indent: -9999px;}

#event_menu {width: 100%; position: relative;}
#event_menu .menu_btn {width: 86%; height: 73%; padding: 5% 7%; position: absolute; top: 0; left: 0;}
#event_menu .menu_btn a {width: 31.3%; height: 100%; margin: 0 1%; float: left; display: inline-block; text-indent: -9999px;}

#footer {width: 96%; height: 60px; position: relative; background-color: #67d0d6; font-size: 22px; color: #4a898d; line-height: 60px; padding: 0 2%;}
#footer span {font-size: 0.2em; letter-spacing: -0.5px;  display: inline-block;}
#footer .social_link {width: 48%; position: absolute; top: 50%; right: 2%; margin-top: -3.5%;}
#footer .social_link ul:after {content: ""; display: block; clear: both;}
#footer .social_link ul li {width: 14.3%; float: left; margin-left: 2%;}
#footer .social_link ul li a {width: 100%; height: 100%; display: block;}



/*** event ***/

/* event01 */
#event01 {width: 100%; height: 100%; position: relative;}
#event01 .con02 {position: relative;}
#event01 .con02 .con02_con {width: 96%; position: absolute; top: 3%; left: 2%;}
#event01 .con02 .con02_con ul {width: 100%;}
#event01 .con02 .con02_con ul:after {content: ""; display: block; clear: both;}
#event01 .con02 .con02_con ul li {float: left; padding: 0; line-height: 0;}
#event01 .con02 .con02_con ul li img {display: none;}
#event01 .con02 .con02_con ul li a {width: 100%; height: 100%; display: inline-block;}
#event01 .con02 .btn {width: 96%; height: 13.5%; position: absolute; bottom: 5%; left: 2%;}
#event01 .con02 .btn a {width: 100%; height: 100%; display: inline-block;}

/* event02 */
#event02 .con02 {position: relative;}
#event02 .con02 .con02_con > ul > li {display: none;}
#event02 .con02 .con02_con ul li {position: relative;}
#event02 .con02 .con02_con ul li .btn {width: 86%; height: 23%; position: absolute; left: 7%; bottom: 5%;}
#event02 .con02 .con02_con ul li .btn ul {width: 100%; height: 100%; overflow: hidden;}
#event02 .con02 .con02_con ul li .btn ul li {float: left; width: 45%; height: 100%;}
#event02 .con02 .con02_con ul li .btn ul .btn01 {margin-right: 10%;}
#event02 .con02 .con02_con ul li .btn ul li a {width: 100%; height: 100%; display: inline-block;}


/* event03 */
#event03 .con01 {position: relative;}
#event03 .con01 .btn {width: 96%; height: 15%; position: absolute; bottom: 5%; left: 2%;}
#event03 .con01 .btn a {width: 100%; height: 100%; display: inline-block;}