@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean'); */
/* @import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css'); */

/* reset */
*{ -webkit-text-size-adjust:none; -webkit-tap-highlight-color:rgba(255,255,255,0);}
html {-webkit-overflow-scrolling:touch;} /* 아이폰 스크롤링 자연스럽지 못한 현상 */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{ margin:0; padding:0; border: 0;}
body,input,textarea,select,button,table,h1,h2,h3,h4,h5{ font-family:'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', '나눔고딕', 'Nanum Gothic', 'Apple Gothic', Helvetica Neue, '돋움', Dotum, sans-serif; font-size:16px; font-weight:300; letter-spacing: -0.065em;  color:#323232}
ul,ol,li{ list-style:none}
img{ border:0px none}
img,input,select,button,label{ vertical-align:top; border-radius: 0; display: inline-block}
i,em,address{ font-style:normal}
a{ text-decoration:none;color:#222}
a:hover{ text-decoration:none}
table{ border-collapse:collapse; border-spacing:0; table-layout:fixed}
article,aside,hgroup,header,footer,figure,figcaption,nav,section{ display:block}
caption, legend, .skip{ position: absolute; width: 0; height: 0; left: -30000% !important; overflow: hidden}
button, button[disabled], html input[disabled], input[type=reset], input[type=submit], label{ cursor: pointer;}
a:focus, button:focus{ outline: 1px dashed black;}

/* 퀴즈 이벤트 */
#event_quiz{ background: url(/images/quiz/bg.jpg);  text-align: center; padding: 0 0 30px;}
#event_quiz>div{ width: 100%; max-width: 720px; margin: -40px auto 0; position: relative; background: #fff; border-radius: 10px; padding: 20px 20px 70px; box-sizing: border-box; text-align: left}
#event_quiz img{ max-width: 100%}
#event_quiz .quiz_tp{ border-bottom: 1px solid #c4c4c4; position: relative}
#event_quiz .quiz_tp:after{ content: ''; display: block; background: url(/images/quiz/vis.png) no-repeat; width: 350px; height: 196px; position: absolute; right: -60px; bottom: -25px}
#event_quiz .quiz_tp li{ margin-bottom: 8px; padding: 0 0 0 140px; box-sizing: border-box; position: relative; font-size: 1.1rem; font-weight: 500;}
#event_quiz .quiz_tp li strong{ display: block; width: 130px; border-radius: 25px; line-height: 25px; color: #fff; background: #1a9bbb; text-align: center; position: absolute; left: 0; top: 0; font-weight: 400; font-size: 0.9em}
#event_quiz .agreeArea{ margin: 60px 0 30px}
#event_quiz .agreeArea:before{ content: ''; display: block; width: 100%; height: 10px; background: #f0e5a2; position: absolute; left: 0;}
#event_quiz .agreeBox{ padding-top: 30px}
#event_quiz .agreeBox>p{ font-size: 23px; color: #000; font-weight: 500; line-height: 50px}
#event_quiz .agreeBox>div{ background: #e4e4e4; padding: 10px 25px; font-size: 15px}
#event_quiz .agreeBox>div ul>li{ margin: 10px 0; list-style: decimal inside none; color: #323232}
#event_quiz .agreeChk{ text-align: center; margin: 10px 0 0}
#event_quiz .orangeChk{ display: inline-block; position: relative; margin: 5px 35px 5px 0}
#event_quiz .orangeChk:last-child{ margin-right: 0}
#event_quiz .orangeChk input{ appearance: none; -webkit-appearance: none; position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; overflow: hidden; padding: 0; opacity: 0;}
#event_quiz .orangeChk label{ display: inline-block; font-size: 16px; font-weight: 300; padding: 0 0 0 35px; position: relative;}
#event_quiz .orangeChk label:before{ content: ''; display: inline-block; width: 13px; height: 13px; border: 8px solid transparent; border-radius: 50%; background-image: linear-gradient(to right, #90b4d0 0%, #7ba3c2 100%); background-origin: border-box; box-shadow: 2px 50px 1px #fff inset; vertical-align: middle; margin-right: 8px; position: absolute; left: 0;}
/* #event_quiz .orangeChk.chkbox label:before{ border-radius: 0; width: 12px; height: 12px; border: 6px solid transparent;}*/
#event_quiz .orangeChk input:checked+label{ font-weight: 500}
#event_quiz .orangeChk input:checked+label:before{ background-image: linear-gradient(to right, #f28d27 0%, #fd654f 100%);}
#event_quiz .orangeChk input:checked+label:after{ content: '\2714'; display: block; position: absolute; left: 8px; top: -8px; font-size: 23px; color: #77190b; font-weight: 600;}
#event_quiz .orangeChk.chkbox input:checked+label:after{ left: 5px}
#event_quiz .dList{ margin:55px 0 50px}
#event_quiz .dList dt{ position: relative; font-size: 18px; color: #000; font-weight: 500; letter-spacing: -0.085rem; margin-bottom: 10px; text-align: center; line-height: 1.3; word-break: keep-all}
#event_quiz .dList dt strong{ display: block; font-size: 30px; color: #da4800; font-weight: 800; letter-spacing: -0.1em; margin-bottom: 5px}
#event_quiz .dList dt p{ margin: 10px 0 0; background: #f5f5f5; padding: 10px; font-size: 0.875em; font-weight: 400}
#event_quiz .dList dd{ margin-bottom: 40px}
#event_quiz .dList .inD li{ display: inline-block; width: 20%}
#event_quiz .dList .quiz_hint{ margin-top: 30px; background: #ffde00; height: 42px; line-height: 20px; border-radius: 40px; padding: 0 130px 0 85px; position: relative; font-size: 14px; color: #000}
#event_quiz .dList .quiz_hint:before{ content: ''; display: block; position: absolute; left: 20px; top: -10px; background: url(/images/quiz/deco.png) no-repeat; width: 54px; height: 58px}
#event_quiz .dList .quiz_hint a{ display: block; position: absolute; top: 0; right: 0; border-radius: 40px; line-height: 40px; padding: 0 25px; background: #ffa800; font-size: 0.95rem; font-weight: 400}
#event_quiz .dList .quiz_hint a:after{ content: '\261E'; display: inline-block; margin-left: 5px; font-size: 1.2rem}
#event_quiz .usrC{ background: #f0e6a9; padding: 10px}
#event_quiz .usrC li{ padding: 5px 20px; display: inline-block; width: 49%; box-sizing: border-box}
#event_quiz .usrC li.w100{ width: 100%}
#event_quiz .usrC li label{ display: inline-block; width: 120px; line-height: 35px; font-size: 16px; color: #000}
#event_quiz .usrC li .inputData{ background: #fff; padding: 3px 10px; box-sizing: border-box; height: 35px; width: 160px;}
#event_quiz .usrC li .inputData.zip{ width: calc(75% + 20px);}
#event_quiz .btnArea{ text-align: center}
#event_quiz .btnArea .btnM{ position:relative; padding:0; display:block; text-decoration:none !important; border:0; white-space:nowrap; vertical-align:top; overflow:visible; cursor: pointer; box-sizing: border-box; height: 50px; line-height: 50px; border: 1px solid transparent; padding: 0 50px; background: #fb6e46; color: #fff;}
#event_quiz>div>p{ background: #363636; color: #fff; text-align: center; padding: 10px 0; position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 0 0 10px 10px;}

@media (max-width: 1000px){
	#event_quiz>div{ margin-top: 0}
	#event_quiz .quiz_tp ul{ padding: 15px 10px 20px}	
	#event_quiz .dList{ margin: 35px 10px 50px}
	#event_quiz .dList dd{ padding: 0}
	#event_quiz .dList .quiz_hint{ border-radius: 0; height: auto; line-height: 1.5; padding: 10px 0 10px 85px;}
	#event_quiz .dList .quiz_hint a{ display: inline-block; position: static; background: transparent; line-height: 1.5}
}
@media (max-width: 820px){
	#event_quiz .quiz_tp:after{ right: 0}
}
@media (max-width: 768px){
	#event_quiz{ padding: 0}
	#event_quiz .quiz_tp:after, #event_quiz .quiz_tp li br{ display: none}
	#event_quiz>div{ padding: 20px 10px 70px; border-radius: 0}
	#event_quiz .dList{ margin: 35px 0 50px}
	#event_quiz .dList .quiz_hint{ padding: 20px 5px 5px}
	#event_quiz .dList .quiz_hint:before{ left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); top: -30px}
	#event_quiz .dList .quiz_hint a{ display: block; margin: 10px 0 0; text-align: center; background: rgba(255,255,255,.5); border-radius: 0;}
	#event_quiz .quiz_tp ul li, #event_quiz .usrC li{ width: 100%}
	#event_quiz .agreeArea, #event_quiz .usrC{ margin: 60px 10px 30px;}
	#event_quiz .usrC{ padding: 10px; margin: 0}
	#event_quiz .usrC li .inputData, #event_quiz .usrC li .inputData.zip{ width: 100%}
	#event_quiz .orangeChk label{ position: relative; padding: 0 0 0 35px;}
	#event_quiz .orangeChk label:before{ position: absolute; left: 0;}
	#event_quiz>div>p{ border-radius: 0}
}