/*@import url('//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothiclight.css');*/
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

* { padding: 0; margin: 0; }
html, body { width: 100%; height: 100%; color: #666; font-size: 10pt; font-family: 'Nanum Gothic', sans-serif; background-color: #fff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
img { border: 0; text-decoration: none; -webkit-touch-callout: none; }
a { cursor: pointer; display: block; border: 0; text-decoration: none; color: #666; }
ul, li { list-style: none; }

.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.btn_share { width: 200px; height: 100px; background-color: red; color: #fff; line-height: 100px; font-size: 14pt; text-align: center; margin: 0 auto; cursor: pointer; }


/* ----------- Standard ----------- */

.wrap { position: relative; width: 100%; height:100%; min-height: 100%; background-color: #f8ff3c; overflow-y: auto; }

.question_wrap { background-image: url('../img/bg_dot.png'); background-repeat: repeat-x; background-size: auto 286px; display: block; }
.question_wrap .intro_title { width: 320px; height: 286px; margin: 0 auto; background-image: url('../img/title_320.png'); background-repeat: no-repeat; background-position: 0px 0px; }
.question_wrap .intro_content { width: 320px; height: 280px; margin: 0 auto; padding: 10px; }
.question_wrap .intro_content_box { width: 100%; height: 100%; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-image: url('../img/btn_enter.png'); background-repeat: no-repeat; background-size: 90%; background-position: 50% 50%; }
.question_wrap .question_title { width: 320px; height: 286px; margin: 0 auto; background-image: url('../img/title_320.png'); background-repeat: no-repeat; background-position: -320px 0px; }
.question_wrap .question_content { width: 320px; min-height: 280px; margin: 0 auto; padding: 10px; display: none; }
.question_wrap .question_content_box { width: 100%; height: 100%; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding: 15px 0; }
.question_wrap .question_content_box .question { width: 100%; height: 40px; font-weight: bold; font-size: 14px; text-align: left; color: #464646; padding: 0px 14px 0px; margin-bottom: 8px; line-height: 40px; }
.question_wrap .question_content_box .question span { display: inline-block; vertical-align: middle; line-height: 18px; }
.question_wrap .question_content_box .question span.q { width: 40px; height: 40px; line-height: 38px; background-image: url('../img/circles.png'); background-repeat: no-repeat; background-size: 40px auto; background-position: 0px 0px; color: #fff; text-align: center; }
.question_wrap .question_content_box .question span.qt { width: 232px; padding: 0px 0px 0px 11px; }
.question_wrap .question_content_box .answer { width: 82%; position: relative; text-align: center; color: #666; font-weight: bold; font-size: 14px; min-height: 50px; line-height: 50px; margin: 0 auto 6px; padding: 0 28px 0 20px; }
.question_wrap .question_content_box .answer span { display: inline-block; vertical-align: middle; line-height: 18px; }
.question_wrap .question_content_box .answer .arrow { position: absolute; top: 50%; right: 11px; margin-top: -7px; width: 8px; height: 14px; background-image: url('../img/arrows.png'); background-repeat: no-repeat; background-size: 32px 14px; }
.question_wrap .question_content_box .answer1 { background-color: #ffdcdc; }
.question_wrap .question_content_box .answer1 .arrow { background-position: 0px 0px; }
.question_wrap .question_content_box .answer2 { background-color: #fdffc3; }
.question_wrap .question_content_box .answer2 .arrow { background-position: -8px 0px; }
.question_wrap .question_content_box .answer3 { background-color: #d5ffbb; }
.question_wrap .question_content_box .answer3 .arrow { background-position: -16px 0px; }
.question_wrap .question_content_box .answer4 { background-color: #c7f2ff; }
.question_wrap .question_content_box .answer4 .arrow { background-position: -24px 0px; }

.result_wrap { text-align: center; background-image: url('../img/bg_dot.png'); background-repeat: repeat-x; background-size: auto 286px; display: none; }
.result_wrap .result_content { width: 320px; margin: 0 auto; padding: 10px; }
.result_wrap .result_content_box { width: 100%; height: 100%; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
.result_wrap .result_content_box .result_image { width: 100%; }
.result_wrap .result_content_box .result_button_normal { width: 100%; }
.result_wrap .result_content_box .result_button_sp1 { width: 100%; display: none; }
.result_wrap .result_content_box .result_button_sp2 { width: 100%; display: none; }
.result_wrap .share_title { width: 320px; margin: 10px auto 10px; padding: 0 15px; }
.result_wrap .share_title img { width: 100%; }
.result_wrap .share_button { display: inline-block; width: 320px; margin: 0 auto; padding: 0 15px 10px; }
.result_wrap .share_button .facebook { float: left; width: 48%; }
.result_wrap .share_button .kakaostory { float: right; width: 52%; }
.result_wrap .share_button img { width: 100%; }


/* PC */
.pc .question_wrap { background-image: url('../img/bg_dot_pc.png'); background-repeat: repeat-x; display: block; }
.pc .question_wrap .intro_title { width: 400px; height: 358px; margin: 0 auto; background-image: url('../img/150610_title_pc.png'); background-repeat: no-repeat; background-position: -1px 0px; }
.pc .question_wrap .intro_content { width: 400px; height: 358px; margin: 0 auto; padding: 10px; }
.pc .question_wrap .intro_content_box { /*display: none;*/ width: 100%; height: 100%; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; background-image: url('../img/btn_enter_pc.png'); background-repeat: no-repeat; background-position: 50% 50%; }
.pc .question_wrap .question_title { width: 400px; height: 358px; margin: 0 auto; background-image: url('../img/150610_title_pc.png'); background-repeat: no-repeat; background-position: -400px 0px; }
.pc .question_wrap .question_content { width: 400px; min-height: 358px; margin: 0 auto; padding: 10px; display: none; behavior: url(js/PIE.htc); position: relative;  }
.pc .question_wrap .question_content_box { width: 100%; height: 100%; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding: 18px 0; cursor: default; }
.pc .question_wrap .question_content_box .question { width: 100%; height: 50px; font-weight: bold; font-size: 15px; text-align: left; color: #464646; padding: 0px 18px 0px; margin-bottom: 10px; line-height: 38px; }
.pc .question_wrap .question_content_box .question span { display: inline-block; vertical-align: middle; line-height: 18px; }
.pc .question_wrap .question_content_box .question span.q { width: 50px; height: 50px; line-height: 48px; background-image: url('../img/circles.png'); background-repeat: no-repeat; background-size: 50px auto; background-position: 0px 0px; color: #fff; text-align: center; }
.pc .question_wrap .question_content_box .question span.qt { width: 294px; padding: 0px 0px 0px 14px; }
.pc .question_wrap .question_content_box .answer { width: 82%; position: relative; text-align: center; color: #666; font-weight: bold; font-size: 15px; min-height: 50px; line-height: 48px; margin: 0 auto 7px; padding: 0 31px 0 20px; }
.pc .question_wrap .question_content_box .answer span { display: inline-block; vertical-align: middle; line-height: 18px; }
.pc .question_wrap .question_content_box .answer .arrow { position: absolute; top: 50%; right: 13px; margin-top: -9px; width: 11px; height: 17px; background-image: url('../img/arrows_pc.png'); background-repeat: no-repeat; background-size: 44px 18px; }
.pc .question_wrap .question_content_box .answer1 { background-color: #ffdcdc; }
.pc .question_wrap .question_content_box .answer1 .arrow { background-position: 0px 0px; }
.pc .question_wrap .question_content_box .answer2 { background-color: #fdffc3; }
.pc .question_wrap .question_content_box .answer2 .arrow { background-position: -11px 0px; }
.pc .question_wrap .question_content_box .answer3 { background-color: #d5ffbb; }
.pc .question_wrap .question_content_box .answer3 .arrow { background-position: -22px 0px; }
.pc .question_wrap .question_content_box .answer4 { background-color: #c7f2ff; }
.pc .question_wrap .question_content_box .answer4 .arrow { background-position: -33px 0px; }

.pc .result_wrap { text-align: center; background-image: url('../img/bg_dot_pc.png'); background-repeat: repeat-x; display: none; }
.pc .result_wrap .result_content { width: 400px; margin: 0 auto; padding: 10px; }
.pc .result_wrap .result_content_box { width: 100%; height: 100%; background-color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }
.pc .result_wrap .result_content_box .result_image { width: 100%; }
.pc .result_wrap .result_content_box .result_button_normal { width: 100%; }
.pc .result_wrap .result_content_box .result_button_sp1 { width: 100%; display: none; }
.pc .result_wrap .result_content_box .result_button_sp2 { width: 100%; display: none; }
.pc .result_wrap .share_title { width: 400px; margin: 10px auto 10px; padding: 0 15px; }
.pc .result_wrap .share_title img { width: 100%; }
.pc .result_wrap .share_button { display: inline-block; width: 400px; margin: 0 auto; padding: 0 15px 10px; }
.pc .result_wrap .share_button .facebook { float: left; width: 48%; }
.pc .result_wrap .share_button .kakaostory { float: right; width: 52%; }
.pc .result_wrap .share_button img { width: 100%; }


@media
only screen and (-webkit-min-device-pixel-ratio :1.5) and (max-width :767px),
only screen and (min-device-pixel-ratio :1.5) and (max-width :767px) {

	.question_wrap .intro_title { background-image: url('../img/title_480.png'); background-repeat: no-repeat; -webkit-background-size: 3520px 286px; background-size: 3520px 286px; background-position: 0px 0px; }
	.question_wrap .question_title { background-image: url('../img/title_480.png'); background-repeat: no-repeat; -webkit-background-size: 3520px 286px; background-size: 3520px 286px; background-position: -320px 0px; }

}

@media
only screen and (-webkit-min-device-pixel-ratio :2) and (max-width :767px),
only screen and (min-device-pixel-ratio :2) and (max-width :767px) {

	.question_wrap .intro_title { background-image: url('../img/title_640.png'); background-repeat: no-repeat; -webkit-background-size: 3520px 286px; background-size: 3520px 286px; background-position: 0px 0px; }
	.question_wrap .question_title { background-image: url('../img/title_640.png'); background-repeat: no-repeat; -webkit-background-size: 3520px 286px; background-size: 3520px 286px; background-position: -320px 0px; }

}