@charset "utf-8";

:root {
	--color-primary:#ff8600;
	--color-quiz-type1: #02abb0;
	--color-quiz-type2: #318cff;
	--color-quiz-type3: #f8ac59;
	--color-quiz-type4: #ed5565;
	--color-main-5: #444444;	
	--color-bg-1: #F6F6F6;
	--color-bg-menu:#ffa313;
	--bg-image-mode-select: url('/webdata/images/bg_modeSelect.png');
	--bg-image-sgmode: url('/webdata/images/bg_singlemode.png');
	--bg-image-tmmode: url('/webdata/images/bg_teammode.png');
	--bg-image-sdmode: url('/webdata/images/bg_suddenDeathmode.png');
	--bg-image-pin: url('/webdata/images/user_play_bg.png') center center no-repeat;
	--bg-pin-box:url('/webdata/images/pin_box_bg.jpg') 50% 50% no-repeat;
	--bg-image-1:#ffffff;
	--bg-image-2: linear-gradient(to right, #845ec2 , #b44a9a, #d27a5f , #e4b673);
	--bg-image-3: linear-gradient(to right, #318cff, #a158ff);
	--logo-image: url('/webdata/images/logo.png');
	--alram-image: url('/webdata/images/alarm_icon.png') no-repeat;
	--color-wh: #ffffff;
	--color-bl: #000000;
	--btn-pin-color: linear-gradient(to top, rgb(61,134,255) 0%, rgb(56,109,202) 100%);
	--time-bar-color:linear-gradient(to right, yellow, orange, red);
	--color-s-title:#fff21d;
	--color-l-title:#ffffff;
	--color-btn-prev:#ffffff;
	--color-op-title:#ffffff;
	--bg-color-pinbe:#f65c57;
	--pin-title-color:#fff21d;
	--pin-title-color-bl:#fff21d;
	--user-title-color:#ffffff;
	--user-title-color-team:#000000;
	--bg-color-come:linear-gradient(to right, #318cff, #a158ff);
	--bg-color-header:#ffffff;
	--color-top-menu:#000000;
	--bg-quiz-loading:#ba4e91;
	--bg-quiz-f-loading:#8b62fe;
	--img-display: block;
	--color-bg-mBox:#ffffff1a;
	--color-bg-mBox-comment:#ffffff1a;
	--color-op-ed-title: #000;
	--bg-quiz-answer-loading: #fcb334;
	--bg-quiz-end: #448aff;
	--pin-logo-image: url('/webdata/images/logo_w.png');
	--pin-btn-gradient: linear-gradient(to right, rgb(254,146,35) 0%, rgb(255,92,76) 100%);
	--pin-btn-bottom: rgb(206, 92, 50);
	--color-limit-cnt: #fff21d;
}


/* theme_봄(01)_보라보라해(01) */

body.theme-01-01 {
	--color-primary:#9573dc;
	--color-quiz-type1: #9573dc;
	--color-quiz-type2: #00b072;
	--color-quiz-type3: #fd90e8;
	--color-quiz-type4: #eebe00;
	--color-main-5: #444444;
	--color-bg-1: #F6F6F6;
	--color-bg-menu: #9573dc;
	--color-bg-gra: linear-gradient(to right, rgb(135,221,172) 0%, rgb(148,115,219) 100%);
	--bg-image-mode-select: url('/webdata/images/theme/theme-01-01/theme-01-bg03.png');
	--bg-image-sgmode: url('/webdata/images/theme/theme-01-01/theme-01-bg03.png');
	--bg-image-tmmode: url('/webdata/images/theme/theme-01-01/theme-01-bg03.png');
	--bg-image-sdmode: url('/webdata/images/theme/theme-01-01/theme-01-bg03.png');
	--bg-image-pin: none;
	--bg-pin-box: #ffffff;
	--bg-image-1: url('/webdata/images/theme/theme-01-01/theme-01-bg03.png');
	--bg-image-2: url('/webdata/images/theme/theme-01-01/theme-01-bg01.png');
	--bg-image-3: url('/webdata/images/theme/theme-01-01/theme-01-bg01.png') center center no-repeat;
	--color-sub-1: #777777;
	--color-sub-2: #888888;
	--logo-image: url('/webdata/images/logo-wh.png');
	--alram-image: url('/webdata/images/alarm_icon_w.png') no-repeat;
	--color-wh: #ffffff;
	--color-bl: #000000;
	--btn-pin-color: #000000;
	--gnb-bg: url('/webdata/images/theme/theme-01-01/theme-01-gnb-deco.png') no-repeat;
	--snb-bg: url('/webdata/images/theme/theme-01-01/theme-01-snb-bg.png') no-repeat;
	--time-bar-color:linear-gradient(to right, rgb(135,221,172) 0%, rgb(148,115,219) 100%);
	--color-s-title:#000000;
	--color-l-title:#000000;
	--color-btn-prev:#000000;
	--color-op-title:#000000;
	--bg-color-pinbe:#9573dc;
	--pin-title-color:#ffffff;
	--pin-title-color-bl:#000000;
	--user-title-color:#000000;
	--user-title-color-team:#000000;
	--bg-color-come: #9573dc;
	--bg-color-header:#9573dc;
	--color-top-menu:#ffffff;
	--bg-quiz-loading:#9573dc;
	--bg-quiz-f-loading:#9573dc;
	--img-display: none;
	--color-bg-mBox:#00000008;
	--color-bg-mBox-comment:#ff5858;
	--color-op-ed-title: #000;
	--bg-quiz-answer-loading: #9573dc;
	--bg-quiz-end: #6c50aa;
	--pin-logo-image: url('/webdata/images/logo.png');
	--pin-btn-gradient: linear-gradient(to right, rgb(135,221,172) 0%, rgb(148,115,219) 100%);
	--pin-btn-bottom: #8493d9;
	--color-limit-cnt: #000000;

}


/* theme_봄(01)_별빛이내린다(02) */

body.theme-01-02 {
	--color-main-1: pink;
	--color-main-2: hotpink;
	--color-main-3: #fd90e8;
	--color-main-4: #eebe00;
	--color-main-5: #444444;
	--color-bg-1: skyblue;
	--color-bg-2: linear-gradient(180deg, #87DDAC, #9473DB);
	--color-sub-1: #777777;
	--color-sub-2: #888888;
}

.playModeWrap .btn_prev a {
	color: var(--color-btn-prev);
}

.playModeWrap .pm_title .s_title {
	color: var(--color-s-title);
}

.playModeWrap .pm_title .l_title {
	color: var(--color-l-title);
}


/* 플레이, 미션 화면 */


.w_user_quiz_loding {
	background: var(--bg-quiz-loading) !important;
}

.w_user_answer_loding {
	background: var(--bg-quiz-answer-loading) !important;
}

.all_user_title{
	color: var(--user-title-color);
}

.all_user_title_team{
	color: var(--user-title-color-team);
}

#m_option_wrap {
	background: var(--bg-image-2);
}


.p_option_bg img{
	display: var(--img-display);
}



.noti_p{
	color: var(--color-l-title);
}

.play_ex_box {
	background: var(--color-bg-mBox-comment);
}



.progress-wrapper .time-bar{
	background: var(--time-bar-color);
}

.w_quiz_be:has(.quizPage) {
	background: var(--color-primary) !important;
}

/* 퀴즈 참여 확인 화면 */
.subPage:has(.come_area) {
	background: var(--bg-color-come);
}


#wrap:has(#quizDesc) {
	background: var(--color-primary) !important;
}

#wrap:has(.user_quiz_loding_wrap) {
	background: var(--bg-quiz-loading) !important;
}	

#wrap:has(.user_f_loding){
	background: var(--bg-quiz-f-loading) !important;
}



/* 클래스 종료 화면 */

.quit.pin_title{
	color: var(--pin-title-color);
}

.quit.pin_title > span{
	color: var(--pin-title-color);
}


.subPage:has(.end_area) {
	background: var(--bg-quiz-end);
}


/* 퀴즈 진행 대기 화면 */

/* are you ready?  로딩 화면 */
.w_user_f_loding{
	background: var(--bg-quiz-f-loading) !important;
}

#wrap.w_quiz_report{
	background: var(--bg-image-1);
	background-size:cover;
}

#wrap.w_q_quiz{
	background: var(--bg-image-1);
	background-size:cover;
}

#wrap.w_quiz{
	background: var(--bg-image-1);
	background-size:cover;
}

#wrap.quizSelDiv{
	background: var(--bg-image-1);
	background-size:cover;
}

/* #wrap.w_answer_rank{
	background: var(--color-wh);
} */


.w_quiz:has(.quizPage) {
	background-image: var(--bg-image-1) !important;
	background-size: cover; 
}

.w_quiz_report:has(.quiz_report){
	background-image: var(--bg-image-1) !important;
	background-size: cover; 
}

#wrap.w_show_rank{
	background-image: var(--bg-image-1) !important;
	background-size: cover; 
}

#wrap.w_answer_rank{
	background-image: var(--bg-image-1) !important;
	background-size: cover; 
}

.w_answer_rank .left_bg {
	display:none;
}

.w_answer_rank .right_bg {
	display:none;
}





.cn1{
	background: var(--color-quiz-type1);
	border: 2px solid color-mix(in srgb, var(--color-quiz-type1) 80%, black);
	box-sizing: border-box;
}

.cn2{
	background: var(--color-quiz-type2);
	border: 2px solid color-mix(in srgb, var(--color-quiz-type2) 80%, black);
	box-sizing: border-box;
}

.cn3{
	background: var(--color-quiz-type3);
	border: 2px solid color-mix(in srgb, var(--color-quiz-type3) 80%, black);
	box-sizing: border-box;
}

.cn4{
	background: var(--color-quiz-type4);
	border: 2px solid color-mix(in srgb, var(--color-quiz-type4) 80%, black);
	box-sizing: border-box;
}


/* 순서완성형 답변 색상 변경 */
.a_n1_text_w{
    background: var(--color-quiz-type1);
    border:2px var(--color-quiz-type1) solid;
}

.a_n2_text_w{
   background: var(--color-quiz-type2);
    border:2px var(--color-quiz-type2) solid;
}

.a_n3_text_w{
    background: var(--color-quiz-type3);
    border:2px var(--color-quiz-type3) solid;
}

.a_n4_text_w{
    background: var(--color-quiz-type4);
    border:2px var(--color-quiz-type4) solid;
}

.a_n1_wrap{
    border: 2px dashed color-mix(in srgb, var(--color-quiz-type1) 80%, black);
}

.a_n2_wrap{
    border:2px dashed color-mix(in srgb, var(--color-quiz-type2) 80%, black);
}

.a_n3_wrap{
    border:2px dashed color-mix(in srgb, var(--color-quiz-type3) 80%, black);
}

.a_n4_wrap{
    border:2px dashed color-mix(in srgb, var(--color-quiz-type4) 80%, black);
}


.a_n_w .a_n1_text{
	background: var(--color-quiz-type1);
}

.a_n_w .a_n2_text{
	background: var(--color-quiz-type2);
}

.a_n_w .a_n3_text{
	background: var(--color-quiz-type3);
}

.a_n_w .a_n4_text{
	background: var(--color-quiz-type4);
}