﻿@charset "UTF-8";

@import url('http://font.imbc.com/noto/noto.css');
@import url('http://font.imbc.com/mbcnew/mbcnew.css');

.container {padding-top: 0;}

.wdid_wrap {width: 100%; max-width: 720px; margin: 0 auto;  background: #2b167f url('http://m.imbc.com/wiz/ent/wildidol/images/m_wildidol_bg.jpg') 0 0 no-repeat; background-size: 100%; background-position: top; position: relative;}

.wdid_wrap .wdid_logo {width: 35%; margin: 0 auto; padding-top: 6%;}
.wdid_wrap .wdid_logo img {display: block; width: 100%;}

.wdid_wrap .wdid_txt {width: 90%; margin: 0 auto; font-family: 'mbcnew-light'; text-align: center;}
.wdid_wrap .wdid_txt .wdtxt_01 {font-family: 'mbcnew-light'; font-size: 4.8vw; line-height: 1.5em; letter-spacing: -1px; color: #63ed8f; margin-top: 3%;}
.wdid_wrap .wdid_txt .wdtxt_01 span {font-family: 'mbcnew-medium'; font-size: 5vw; line-height: 1.5em; letter-spacing: -1px; color: #63ed8f;}
.wdid_wrap .wdid_txt .wdtxt_01 strong {font-family: 'mbcnew-bold'; font-size: 7.5vw; display: inline-block; margin-top: 3%;}
.wdid_wrap .wdid_txt .wdtxt_02 {font-size: 4vw; line-height: 2em; letter-spacing: -1px; color: #ffffff; margin-top: 5%;}
.wdid_wrap .wdid_txt .wdtxt_03 {width: 100%; padding-bottom: 4%; background: url('http://m.imbc.com/wiz/ent/wildidol/images/m_wildidol_vote.png') 0 0 no-repeat; background-size: 100%; background-position: top; text-align: center; margin-top: 5%;}
.wdid_wrap .wdid_txt .wdtxt_03 ul {padding-top: 9%;}
.wdid_wrap .wdid_txt .wdtxt_03 ul li {font-size: 3.3vw; line-height: 1.5em; letter-spacing: -1px; color: #e1e1e1; font-family: 'mbcnew-light'; margin-top: 1%;}
.wdid_wrap .wdid_txt .wdtxt_03 ul li:first-child {margin-top: 0;}

.wdid_wrap .wdid_lst {width: 90%; margin: 0 auto; margin-top: 4%;}
.wdid_wrap .wdid_lst ul {overflow: hidden;}
.wdid_wrap .wdid_lst ul li {width: 48%; float: left; margin-left: 4%; overflow: hidden; margin-top: 8%; cursor: pointer;}
/*.wdid_wrap .wdid_lst ul li:first-child {margin-left: 0;}*/
.wdid_wrap .wdid_lst ul li .q-title {font-size: 4.5vw; line-height: 1.5em; letter-spacing: -1px; color: #ffffff; float: left; padding-bottom: 2%;}

.wdid_wrap .wdid_lst ul li .input {float: right;}
.wdid_wrap .wdid_lst ul li .input input[type="checkbox"] {display: none;}
.wdid_wrap .wdid_lst ul li .input input[type="checkbox"] + label.chck_ico {display: inline-block; width: 18px; height: 18px; border: none; background: url('http://img.imbc.com/broad/tv/ent/template/wildidol/images/wildidol_chk.png') -22px 0px no-repeat; vertical-align: middle; position: relative; cursor: pointer; -webkit-background-size: 40px;
background-size: 40px;}
.wdid_wrap .wdid_lst ul li .input input[type="checkbox"]:checked + label.chck_ico {background: url('http://img.imbc.com/broad/tv/ent/template/wildidol/images/wildidol_chk.png') 1px 0 no-repeat; -webkit-background-size: 40px; background-size: 40px;}

.wdid_wrap .wdid_lst ul li .wdid_cst {display: block; width: 100%; height: 100%; overflow: hidden;}
.bd_63ed8f {position: relative;}
.bd_63ed8f:after {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid #63ed8f; box-sizing: border-box;}
.wdid_wrap .wdid_lst ul li .wdid_cst img {display: block; width: 100%;}

.wdid_wrap .btn-submit {display: block; width: 50%; margin: 0 auto; margin-top: 8%; padding-bottom: 5%; cursor: pointer;}


@media screen and (min-width: 569px) {
    .wdid_wrap .wdid_lst ul li .input input[type="checkbox"] + label.chck_ico {width: 28px; height: 28px; -webkit-background-size: 64px; background-size: 64px; background-position: -36px 0;}
    .wdid_wrap .wdid_lst ul li .input input[type="checkbox"]:checked + label.chck_ico {background-position: 1px 0; -webkit-background-size: 64px; background-size: 64px;}
}
@media screen and (min-width: 719px) {
    
    .wdid_wrap .wdid_txt .wdtxt_01 {font-size: 24px;}
    .wdid_wrap .wdid_txt .wdtxt_01 strong {font-size: 54px;}
    .wdid_wrap .wdid_txt .wdtxt_02 {font-size: 26px;}
    .wdid_wrap .wdid_txt .wdtxt_03 ul li {font-size: 22px;}
    .wdid_wrap .wdid_lst ul li .q-title {font-size: 26px; line-height: 1.6em; margin-bottom: 8px;}
    
    .wdid_wrap .wdid_lst ul li .input input[type="checkbox"] + label.chck_ico {width: 40px; height: 40px; -webkit-background-size: 90px; background-size: 90px; background-position: -50px 0;}
    .wdid_wrap .wdid_lst ul li .input input[type="checkbox"]:checked + label.chck_ico {background-position: 2px 0; -webkit-background-size: 90px; background-size: 90px;}
}