@charset "utf-8";

body, html, p { margin:0; padding:0; font-family:'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif; }
#wrap { width:100%; margin:0 auto; padding:0; min-width:320px; position:relative; }
ul, ol, dl { list-style: none; margin:0; padding:0; }
a { border:0; margin:0; padding:0; }
div { line-height:1.3; border:0; height:auto; vertical-align:top; display:block; margin:0 auto; }
img{ border:0; height:auto; vertical-align:top; display:block; margin:0 auto; width:100%; }
table  {border-collapse:collapse; border-spacing:0 }

.wrap { min-width:320px; }
.conInner { position:relative; width:1080px; margin:0 auto; }

@keyframes top_tit {
  0% { opacity:0.5; width:65% }
  100% { opacity:1; width:60%; }
}

/* 상단 */
#evt01 .topArea { position:relative; background:#fff374 url(http://img.dongascience.com/polymath/event/open/images/e1_top_bg.png) repeat-x; background-position:center 0; display:block; overflow:hidden; }
#evt01 .topInner { position:relative; background:url(http://img.dongascience.com/polymath/event/open/images/e1_top_bg.gif) no-repeat; background-position:center 0; display:block; overflow:hidden; background-size:100%; }
#evt02 .topArea { position:relative; background:#fff474 url(http://img.dongascience.com/polymath/event/open/images/e2_top_bg.jpg) repeat-x; background-position:center 0; display:block; overflow:hidden; }
#evt02 .topInner { position:relative; background:url(http://img.dongascience.com/polymath/event/open/images/e2_top_bg.gif) no-repeat; background-position:center 0; display:block; background-size:100%; }

.light { z-index:20; }
.light .light1 { position:absolute; top:55.5%; left:17.5%; width:5%; }
.light .light2 { position:absolute; top:16%; right:19%; width:5%; }
.light .light3 { position:absolute; top:19.5%; right:16.5%; width:5%; }
#evt02 .light .light1 { top:30%; }
#evt02 .light .light2 { top:9%; }
#evt02 .light .light3 { top:11.5%; }

.topArea .tit { margin:0 auto; animation-name:top_tit; animation:top_tit 0.5s linear forwards; animation-delay:0s; opacity:0; }
.topArea .tit img { width:100%; }

/* 이벤트1 */
#evt01 .event1 { position:relative; background:#fff url(http://img.dongascience.com/polymath/event/open/images/e1_event1_bg.png) no-repeat; background-position:center 0; display:block; overflow:hidden; }
#evt01 .event2 { position:relative; background:#e5eeff url(http://img.dongascience.com/polymath/event/open/images/e1_event2_bg.png) no-repeat; background-position:center 0; display:block; overflow:hidden; }

/* 이벤트2 */
#evt02 .cont1 { position:relative; background:#fff url(http://img.dongascience.com/polymath/event/open/images/e2_con1_bg.png) no-repeat; background-position:center 0; display:block; overflow:hidden; margin-bottom:60px; }
#evt02 .cont2 { position:relative; background:#f6f4ff url(http://img.dongascience.com/polymath/event/open/images/e2_con2_bg.png) no-repeat; background-position:center 0; display:block; overflow:hidden; }
.contWrap { max-width:980px; margin:0 auto; }

#evt02 .cont1 .tit .count { margin:0 auto; background:#002a78; color:#fff; text-align:center; width:300px; height:60px; font-size:28px; border-radius:30px; line-height:60px; letter-spacing:-0.07em; }
#evt02 .cont1 .tit .count span { font-weight:bold; color:#fff474; }
#evt02 .cont1 .calendar table { width:100%; margin:40px auto 0; text-align:center; }
#evt02 .cont1 .calendar table tr { width:100%; }
#evt02 .cont1 .calendar table tr:first-child { border-top:5px solid #002a78; border-bottom:3px solid #002a78; padding:15px 0; font-size:20px; color:#002a78; height:57px; }
#evt02 .cont1 .calendar table tr th { width:14.28%; }
#evt02 .cont1 .calendar table tr th:first-child, #evt02 .cont1 .calendar table tr td:first-child { color:#ff3232; }
#evt02 .cont1 .calendar table tr td { height:115px; border-bottom:1px solid #ddd; font-size:18px; font-weight:bold; color:#555; }
.state { width:46px; height:46px; border:3px solid #ddd; line-height:46px; border-radius:100%; margin-top:10px; overflow:hidden; background:url(http://img.dongascience.com/polymath/event/open/images/state.png) no-repeat center; background-size:100% !important; }
.state.ok { border-color:#ff5454; background:#ff5454 url(http://img.dongascience.com/polymath/event/open/images/state_ok.png) no-repeat center; }
.state.ok:after { content:'정답'; font-size:0; }
.state.no { border-color:#a3a3a3; background:#fff url(http://img.dongascience.com/polymath/event/open/images/state_no.png) no-repeat center; }
.state.no:after { content:'오답'; font-size:0; }
.desc { text-align:center; font-size:21px; color:#002a78; margin-top:30px; }

#evt02 .cont2 .tit { text-align:center; }
#evt02 .cont2 .tit img { display:inline; }
#evt02 .cont2 .tit .date { width:10%; height:auto; background:url(http://img.dongascience.com/polymath/event/open/images/e2_cont2_tit_bg.png) no-repeat center; font-size:2em; }
.question { width:calc(94% - 10px); /*height:120px;*/ border:5px solid #dedbe9; border-radius:10px; display:block; /*overflow-y:scroll;*/ background:#fff; padding:3%;font-size:20px; color:#555; }
.question table { width:100%; max-width:280px; border:1px solid #ddd; margin:15px 0 0; text-align:center; font-size:17px; }
.question table td { padding:10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
.question table td strong { color:#ff4444; }
.answer { padding:30px; font-size:20px; color:#555; }
.answer li { margin-bottom:10px; }
#evt02 .cont2 .answerBtn { width:100%; border-top:1px solid #d4d0e6; padding-top:40px; text-align:center; }
#evt02 .cont2 .answerBtn input { width:200px; margin:0 auto; height:65px; text-align:center; background:#ff5454; border:0; color:#fff; font-size:25px; font-weight:bold; line-height:1.3em; border-radius:10px; letter-spacing:-0.05em; cursor:pointer; }
.answerInfo .desc { font-size:25px; color:#ff5454; letter-spacing:-0.05em; margin-bottom:70px; }
.answerInfo .box { margin:50px 0 70px; overflow:hidden; }
.answerInfo .box .tit { width:94%; font-size:25px; font-weight:bold; padding:15px 3%; background:#002a78; color:#fff; border-radius:10px 10px 0 0; letter-spacing:-0.05em; }
.answerInfo .box .txt { width:calc(94% - 10px); border:5px solid #002a78; border-top:0; border-radius:0 0 10px 10px; padding:20px 3%; color:#555; line-height:1.5em; }


/* 안내 */
.infoArea { display:block; background:#2b2f36; }

#sns{ position:fixed; z-index:100; top:20px; right:20px; width:40px; display:none; }
#sns li{ margin-bottom:8px}
#sns li img{ width:100%; height:auto}
#sns .btn_close{ display:none; cursor:pointer; position:absolute; width:40px; height:40px; top:-50px; right:0px; }
#sns #liKaKaoTalk { display:none; }
#moreSnsBtn{ display:none; position:absolute; right:10px; top:10px; width:40px; cursor:pointer}
#moreSnsBtn img{ width:100%; }

@media screen and (max-width:1079px) {
    div, .conInner { width:100%; }
    .contWrap { width:90%; }
    img { width:100%; }
    #evt01 .topArea, #evt02 .topArea { background-size:185%; }
    #evt01 .event1 { background-size:95%; }
    #evt01 .event2 { background-size:115%; }
}

@media (max-width:1024px){
    #sns{right:30px;}
}

@media (max-width:640px){
    #moreSnsBtn{ display:none; position:fixed; z-index:30; }
    #sns{ display:none; position:fixed; right:10px; top:60px; width:auto; }
    #sns .btn_close{ display:none; }
    #sns li { float:none; margin-bottom:7px; width:40px; height:40px; display:block; }
    #sns #liKaKaoTalk { display:block; }
    
    .state { width:30px; height:30px; margin-top:5px; }
    #evt02 .cont1 .tit .count { width:200px; height:40px; font-size:19px; line-height:40px; }
    #evt02 .cont1 .calendar table { margin:20px auto 0; }
    #evt02 .cont1 { margin-bottom:40px; }
    #evt02 .cont1 .calendar table tr td { height:85px; font-size:15px; }
    #evt02 .cont1 .calendar table tr:first-child { height:47px; font-size:15px; }

    #evt02 .cont2 .question, .answerInfo .box .txt { font-size:15px; }
    #evt02 .cont2 .answerBtn { padding-top:25px; }
    #evt02 .cont2 .answerBtn input { width:150px; height:45px; font-size:20px; }
    .desc { font-size:15px; margin-top:20px; }
    .answer { font-size:15px; padding:20px; }
    .answerInfo .desc { font-size:15px; margin-bottom:40px; }
    .answerInfo .box { margin:30px 0 30px;  }
    .answerInfo .box .tit { font-size:15px; padding:10px 3%; }
    
}