@charset "utf-8";

@import url( "//fonts.googleapis.com/earlyaccess/notosanskr.css" );

BODY  {margin:0px auto; font-size:12px; font-family:AppleSDGothicNeo-Regular,"Malgun Gothic","맑은 고딕",dotum,"돋움",sans-serif; text-align:center}
body,div,dl,dt,dd,ul,ol,li,form,p,button, h1 {margin:0;padding:0;}
img {border:0 none; }
ul,ol,li {list-style:none outside;}
em,address {font-style:normal}
button{border:none;background:none;cursor:pointer}

/*------  layout ------*/
#wrap {padding:0;}
#top{width:100%;}
.contents_w {width:100%; background-color:#ffecea}
.contents{width:1025px; margin:0 auto}

/*------  SNB ------*/
#snb_v4 {position:relative; height:47px; z-index:1000; background-color:#fff}
#snb_v4 .snb_m_v4, #s_snb_v4 .snb_m_v4 {width:1025px; margin:0 auto; position:relative; text-align:left;}
#snb_v4 .snb_m_v4 h1{position:absolute; top:10px}

.snbwrap_v4 {position:absolute; top:12px; right:5px; margin:0; font-size:12px;}
.snbwrap_v4 ul {float:left}
.snbwrap_v4 li {float:left; font-size:12px; margin:5px 0 0 12px}
.snbwrap_v4 li a, .snbWrap_v4 li a:link, .snbWrap_v4 li a:hover, .snbWrap_v4 li a:visited {color:#606060; text-decoration:none }
.snbwrap_v4 li a:hover {text-decoration:underline}
.snbwrap_v4 .login_v4 {float:left; margin-right:7px;}
.snbwrap_v4 .login_v4 strong a, .snbwrap_v4 .login_v4 .member {color:#343434; text-decoration:none; font-weight:normal}
.snbwrap_v4 .login_v4 strong a:hover {text-decoration:underline}
.snbwrap_v4 .login_v4 .member {display:inline-block; padding:5px 3px 0 0; margin-top:-2px; margin-left:-3px; vertical-align:middle}
.snbwrap_v4 .login_v4 .btn_log img {vertical-align:middle;}
.snbwrap_v4 .login_v4 img {vertical-align:middle}

/* contents */
.ox_content {width:100%; padding-bottom:40px; background-color:#e4e5e8; overflow: hidden}
.ox_cont1 {position:relative; width:828px; text-align:center; margin:0 auto}
.ox_cont1 .ox_copy {margin:70px 0 90px 0}

.ox_q_box { position: relative; width:828px; min-height:570px; padding-top:50px; padding-bottom:50px; box-sizing: border-box; border-radius:40px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 24px;}
.ox_top {z-index:200; position: absolute; left:50px; top:-30px; display:block; width:240px; height:70px; background:url('/images/event/quizOX/ox_tit.png') no-repeat 0 0}
.ox_q_box { font-family:'Noto Sans CJK KR',"Malgun Gothic","맑은 고딕",sans-serif}
.ox_q_box .ox_tit {min-height:87px; padding:55px 40px 45px 40px; box-sizing: border-box; line-height:150%; font-size:26px; font-weight:400; color: #202020; letter-spacing: -1px; background-color: #eceff5; border-top-left-radius:40px; border-top-right-radius:40px; margin-top:-50px;}
.ox_q_box .ox_tit em {color:#273995; padding-right:5px}
.ox_quiz_area {position: relative; padding:100px 0 50px 0}
.ox_quiz_area .txt_o {display: inline-block; width:184px; height:168px; margin:0 30px; background-color: #7188dc; border-radius:10px }
.ox_quiz_area .txt_o:hover, .ox_quiz_area .txt_o.on  {background-color: #4360cb}
.ox_quiz_area .txt_x {display: inline-block; width:184px; height:168px; margin:0 30px; background-color: #e584aa; border-radius:10px }
.ox_quiz_area .txt_x:hover, .ox_quiz_area .txt_x.on {background-color: #dd6e9a}
.ox_quiz_area .txt_o.off, .ox_quiz_area .txt_x.off {background-color: #cacfda}
.ox_quiz_area .txt_o .ico_o {display:block; width:63px; height:62px; margin:53px 0 0 59px; background:url('/images/event/quizOX/txt_o.png') no-repeat 0 0}
.ox_quiz_area .txt_x .ico_x {display:block; width:47px; height:59px; margin:53px 0 0 68px; background:url('/images/event/quizOX/txt_x.png') no-repeat 0 0}
.btn_ox_hint { position: absolute; right:30px; top:30px; display:block; width:85px; height:38px; line-height:38px;; background-color:#a8aaae; color:#fff; font-size:15px; text-align: center; border-radius:4px; text-decoration: none}
.btn_ox_hint:hover {background-color:#656b76}
.ox_result {margin: 0 120px; padding:85px 0 40px 0; border-bottom: 1px dashed #afafaf}
.ox_result_q {font-size:19px; color: #888; padding-top:40px}
.ox_result_q em { display: inline-block; width:36px; height:36px}
.ox_result_q em.correct { background:url('/images/event/quizOX/correct_img.png') no-repeat 0 0; padding-top: 2px}
.ox_result_q em.incorrect { background:url('/images/event/quizOX/incorrect_img.png') no-repeat 0 0}
.ox_result_q2 {width:300px; font-size:19px; color: #555; margin:13px auto 30px auto; background-color:#f1f1f1; padding:16px 15px 17px 15px; border-radius:8px}
.ox_result_q2 em {width:40px; height:35px; margin-left:10px; line-height:33px; vertical-align:-1px; border-radius:4px; display: inline-block; font-size: 25px; color: #fff; font-weight: bold; background-color:#7188dc}
.ox_result_q2 em.sel_x {background-color:#e584aa}

.quiz_result {padding-top:130px}