@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
html{-webkit-text-size-adjust:auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form {margin:0;padding:0;}
body{font-family:"nanumgothiccoding" }
a{text-decoration:none;}
ul,ol,dl {list-style:none;}
li {display:inline;}
img {border:0;}

form, fieldset, input, textarea, select{margin:0;padding:0;}
label, select, input, textarea {vertical-align:middle;	}
fieldset {border:none;}




/*PC*/

#wrap-pc { width:100%; margin:0 auto;}
#top-pc { width:100%; margin:0 auto; text-align:center; background: url("./images/bg_01_s.png") repeat-x; height:782px;}
.top-v { width:1663px;  margin:0 auto; text-align:center; background: url("./images/bg_01.png") no-repeat; }
.btn-play { margin:419px 0 225px -320px }


#con-pc { width:100%; margin:0 auto; text-align:center; background: url("./images/bg_con.png") repeat-x; height:1562px;}
.solution { width:100%; height:526px; margin:0 auto; text-align:center;}
.solution ul {}
.solution li {}


#event-pc { width:100%; margin:0 auto; text-align:center; background-color:#f1f1f1; padding:100px 0 100px 0; }

.pad_01{ padding-left:17px;}
.grade-btn { margin:0 auto; padding-top:60px; width:1000px;  height:40px;  text-align:center; }
.grade-btn  ul { }
.btn-off a { padding:16px 37px; background-color:#273041; font-weight:bold; font-size:24px; color:#fff;  }
.btn-off a:hover { padding:16px 37px; background-color:#ff3600; font-weight:bold; font-size:24px; color:#fff; }
.btn-on a { padding:16px 37px; background-color:#ff3600; font-weight:bold; font-size:24px; color:#fff; }

.question  {  margin:0 auto; width:1000px;  height:76px;  margin-top:60px;}
.question-bg { background: url("./images/txt_grade_bg.png") no-repeat; height:76px;}
.question  ul{  padding:27px 0 0 150px; margin-left:59px;}
.question  li{}
.question-off a { font-weight:bold; font-size:20px; color:#010101; vertical-align:top;  padding-top:5px; }
.question-off a:hover { font-weight:bold; font-size:20px; color:#ff3600; vertical-align:top; padding-top:5px; }
.question-on a { font-weight:bold; font-size:20px; color:#ff3600; vertical-align:top; padding-top:5px; }
.pad_02{ padding-right:70px;}
.pad_03{ padding-right:45px; padding-top:5px;}


.data { width:100%; height:465px; margin:0 auto; text-align:center; margin:0 auto;}
.data .down { background: url("./images/data_bg.png") no-repeat; height:239px; width:920px; margin:0 auto; }
.pad_04 { padding-bottom:60px; }
.data-btn { width:366px; height:37px; padding:140px 0 0px 44px; float:left;}
.data-btn ul { }
.data-btn li {}

.dbtn-off a { padding:9px 17px; background-color:#273041; font-weight:bold; font-size:20px; color:#fff;  }
.dbtn-off a:hover { padding:9px 17px; background-color:#ff3600; font-weight:bold; font-size:20px; color:#fff; }
.dbtn-on a { padding:9px 17px; background-color:#ff3600; font-weight:bold; font-size:20px; color:#fff; }
.pad_05 { padding-left:95px;}





.site { width:100%; margin:0 auto; text-align:center; padding-top:85px; }
.site-btn { padding-top:39px; margin:0 auto; width:916px; }
.site ul {}
.site li { float:left; }
.pad_06 { padding-left:89px;}








/*Mobile*/

#wrap-m { width:100%; margin:0 auto; position:relative;  position:relative; }
.m-top { width:100%; }

.m-con { width:100%; background-color:#f1f1f1;}
.m-tit {}
.m-book-go { padding:7% 0;  text-align:center; }
.m-question { width:94%; padding:3%; background-color:#e2e2e2;  letter-spacing:-0.06em;}
.m-question ul {  }
.m-question li { padding-right:3%;}
.m-question-off a { font-weight:bold; font-size:14px; color:#010101;  }
.m-question-off a:hover { font-weight:bold; font-size:14px; color:#ff3600;  }
.m-question-on a { font-weight:bold; font-size:14px; color:#ff3600; }

.m-txt { color:#010101; font-size:12px; padding:5%; text-align:center; line-height:140%;  letter-spacing:-0.12em;}
.m-red { color:#ff3600;}
.m-site { background-color:#434159; text-align:center; padding-bottom:10%;}
.m-pad-01 { padding-right:2%; }


.m-grade-btn { margin:0 auto; padding-top:7%; width:95%; text-align:center; letter-spacing:-0.06em; }
.m-btn-off a { width:15%; padding:2% 1.4%; background-color:#273041; font-weight:bold; font-size:13px; color:#fff;  }
.m-btn-off a:hover { width:15%; padding:2% 1.4%; background-color:#ff3600; font-weight:bold; font-size:13px; color:#fff; }
.m-btn-on a {width:15%; padding:2% 1.4%; background-color:#ff3600; font-weight:bold; font-size:13px; color:#fff; }
.m-pad-02 { padding-right:1%; }
.m-pad-03 { padding-bottom:7%; }


.m-event { background-color:#f1f1f1; text-align:center; padding:10% 0 10% 0;}