@charset "utf-8";
@import url('reset.css');
.clr:before,
.clr:after { content: ' '; display: block; }
.clr:after { clear: both; }
.hidden { position: absolute; width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; visibility: hidden; }
.imgbox > img,
.imgbox > a > img { display: block; margin: 0 auto;}
a:link,
a:visited { text-decoration: none; color: inherit; }
a:active,
a:hover { text-decoration: underline; }
body { padding: 0 !important; font-size: 16px; color: #000; font-family: '���� ����', '��������', dotum !important; background: transparent; }

/* layout */
html.no-scroll,
html.no-scroll body { position: relative; overflow: hidden; }
.index { min-height: 100%; background: #000; background-size: cover; }
.container { max-width:640px; margin: 0 auto; }
.container .co {padding-top: 30px; background-size: cover; }
.container .co .countdown { position: relative; text-align: center; padding:5% 0px;}
.container .co .countdown span { display: block; width: 60%; margin: 0 auto; height: 300px; background: url(http://wecyd.com/yeouido/m114/imgs/5.png) no-repeat 50% 50%; background-size: contain; }
.container .co .countdown.s-3 span { background-image: url(../newstopic/sls/b02/3.png); }
.container .co .countdown.s-2 span { background-image: url(../newstopic/sls/b02/2.png); }
.container .co .countdown.s-1 span { background-image: url(../newstopic/sls/b02/1.png); }
.container .co .countdown.end span { background: none; display: none; }
.container .co .countdown .txt { width: 100%; display: none; font-size: 32px; font-weight: bold; color: #58fffd; letter-spacing: -0.1em; }
.container .co .countdown .txt > .inner { display: table-cell; vertical-align: middle; padding: 0 3%; }
.container .co .countdown .txt strong { color: #f33; }
.container .co .countdown.end .txt { display: table; }
.bottom {background: none; display: none;}
.bottom .progress-bar { position: relative; margin: 0 5% 2%; }
.bottom .progress-bar .bar { border: 3px solid #333; border-radius: 3px; background: #000; height: 3px; }
.bottom .progress-bar .bar i { display: block; width: 0; height: 3px; background: #fff; }
.bottom .progress-bar .per { position: absolute; right: 0; top: 13px; font-size: 20px; color: #fff; font-weight: bold; }
.bottom .progress-bar .status { height: 25px; padding-top: 5px; text-align: center; color: #fff; font-size: 20px; font-weight: bold; text-shadow: 0 0 5px #fffca4; }
.bottom .submit { display: block; width: 90%; max-width: 490px; margin: 0 auto; }

/* footer */
.footer { background: #000; }
.footer .logo { float: left; width: 25%; }
.footer .logo img { width: 100%; }
.footer .copy { padding: 20px 10px; color: #999; font-size: 15px; text-align: center; box-sizing: border-box; }

/* db form */
.dbform { display: none; position: absolute; top: 50px; left: 5px; right: 5px; }
.dbform > .bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); }
.dbform.is-active { display: block; }
.form { position: relative; max-width: 580px; margin: 0 auto; background: url(../newstopic/sls/b02/bg-1.jpg) no-repeat 50% 0; background-size: cover; font-size: 24px; }
.form-title > img { display: block; width: 100%; }

/* input */
.text,
.textarea,
.select { width: 100%; padding: 5px; border: 0 none; background: #fff; background-image: none !important; height: 58px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #000; }
.textarea { height: 140px; resize: none; }
.select { padding: 5px; }

/* item list */
.item-cols:before,
.item-cols:after { content: ''; display: block; }
.item-cols:after { clear: both; }
.item-list { letter-spacing: -0.07em; width: 92%; margin: 0 auto; }
.item-list .item-cols { position: relative; margin-bottom: 15px; }
.item-list .item-cols .item-cols { margin-bottom: 0; }
.item-list .item-cols.agree { margin-bottom: 0; margin-top: 30px; text-align: center; font-size: 14px; letter-spacing: -0.1em; }

/* label, field */
.label,
.field { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.label { position: absolute; width: 70px; padding: 0; text-align: left; font-weight: bold; font-size: 18px; height: 58px; line-height: 0; }
.label:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.field { margin-left: 0; vertical-align: top; }

/* label, field custom */
.tels:after { content: ''; display: block; clear: both; }
.tels .text,
.tels .select { float: left; width: 30%; margin-left: 5%; }
.tels .text:first-child,
.tels .select:first-child { margin-left: 0; }
.tels i { float: left; width: 5%; text-align: center; font-size: 20px; height: 50px; line-height: 42px; }
.age-field { position: relative; padding-right: 25px; }
.age-field:after { content: '��'; position: absolute; right: 0; top: 0; width: 20px; padding: 10px 0; text-align: left; }
.gender-field { line-height: 50px; margin-left: 0; text-align: right; font-weight: bold; }
.gender-field input[type=radio] { width: 18px; height: 18px; }
.agree-content { margin: 0; background: #fff; overflow: hidden; overflow-y: scroll; height: 100px; width: 100%; padding: 5px 10px; text-align: left; font-size: inherit; color: #2d2d2d; line-height: 1.5; word-wrap: break-word; word-break: break-all; white-space: pre-wrap; border: 1px solid #626262; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.agree-label { display: inline-block; margin-top: 5px; margin-bottom: 5px; font-weight: normal; }
.agree-label input { }
.privacy-link { display: inline-block; margin: 0 10px; text-decoration: none; }
.form-copy { padding: 10px; background: #000; text-align: center; color: #fff; font-size: 18px; }
.form-close-btn { position: absolute; top: -40px; right: 0; width: 30px; height: 30px; background: url(http://wecyd.com/yeouido/m114/imgs/close-popup.png) no-repeat; text-indent: -99999px; overflow: hidden; cursor: pointer; }

/* submit */
.form-submit { padding-top: 25px; text-align: center; }
.submit-btn { display: block; width: 90%; max-width: 490px; margin: 0 auto; }

/* error */
.msg_sound_only,
.sound_only { display: inline-block !important; position: absolute; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important; }

/* popup */
.popup { position: relative; font-size: 13px; color: #555; }
.popup h1 { margin-top: 0; padding: 10px; background: #333; color: #fff; font-size: 18px; font-weight: bold; }
.popup h2 { font-size: 14px; margin: 25px 15px 15px; }
.popup p { margin: 0; }
.popup .close-popup { position: absolute; top: 5px; right: 5px; }
.popup .close-popup a { display: inline-block; width: 30px; height: 30px; background: url(http://wecyd.com/yeouido/m114/imgs/close-popup.png) no-repeat; text-indent: -99999px; overflow: hidden; }
.popup .pre { font-family: "����", dotum, verdana; display: inline-block; width: 94%; padding: 1% 2%; word-wrap: break-word; word-break: break-all; line-height: 1.5; white-space: pre-wrap; text-align: left; }
.popup .pre .p5 { padding-top: 10px; }
.popup .table { margin: 0 10px; overflow: hidden; overflow-x: auto; }
.popup table { border-collapse: collapse; margin: 0 auto; }
.popup table th,
.popup table td { border: 1px solid #ccc; word-wrap: break-word; word-break: break-all; white-space: pre-wrap; line-height: 1.5; }
.popup table th { background: #f3f3f3; }
.popup table td { }
.no-pre { font-family: "����", dotum, verdana; display: inline-block; width: 94%; padding: 1% 2% 20px; line-height: 1.6; letter-spacing: -0.07em; }
.no-pre dl { margin-top: 10px; margin-bottom: 10px; }
.no-pre dd { padding-left: 10px; margin-bottom: 10px; }
.no-pre dt { margin-bottom: 10px; font-weight: bold; }
.no-pre ul { margin-top: 5px; margin-bottom: 10px; }
.no-pre li { padding-left: 15px; margin-bottom: 10px; }
.no-pre table { border-collapse: collapse; margin-top: 10px; margin-bottom: 20px; }
.no-pre table th { padding: 5px; background: #ddd; border: 1px solid #ccc; }
.no-pre table td { padding: 5px; border: 1px solid #ccc; }
.no-pre .old-link { display: block; text-align: center; }
.no-pre .old-link a { display: inline-block; padding: 10px; border: 1px solid #ccc; background: #f3f3f3; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; color: #000; }
@media all and (max-width:767px) {
    body { letter-spacing: -0.1em; }
    .container .co .countdown span,
    .container .co .countdown .txt { }
    .container .co .countdown .txt { font-size: 24px; }
    .form { font-size: 18px; }
    .text,
    .textarea,
    .select { height: 40px; }
    .agree { font-size: 14px; }
    .form-copy { font-size: 16px; }
    .footer .copy { padding: 30px 10px; font-size: 14px; }
}
@media all and (max-width:479px) {
    .container .co .countdown .txt { font-size: 18px; }
    .footer .copy { font-size: 12px; }
}
@media all and (max-width:414px) {
    .container .co .countdown .txt { font-size: 16px; }
}