@charset "UTF-8";


/* reset */
html {-webkit-text-size-adjust: none; text-size-adjust: none;}
body {margin: 0;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
img {vertical-align: middle; max-width: 100%;}
address, em, i, cite {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0;}
i[class^="fa"] {position: relative; display: inline-block; vertical-align: middle;}
i[class^="fa"] span {position: absolute; left: -9999px;}
.ir-hidden {position: absolute; left: -9999px !important;}
.pc {display: none !important;}
br.only-pc {content: '';}
br.only-pc::after {content: '\00a0';}


/* common */
html {font-family: 'NotoSansKR', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #333333; background: #000000;}
body {background: url(../img/main-bg.jpg) center center no-repeat; background-size: cover; color: #ffffff;}
#main {position: relative; min-height: 100vh; overflow: hidden;}
#main > section {position: relative; min-height: 100vh; background-color: #000000; display: none; box-sizing: border-box; overflow: auto;}
#main > section.on {display: block;}
#main > section.main-content {background: #000000 url(../img/main-intro.jpg) center center no-repeat; background-size: contain;}
#main > section.main-content p.message {display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8);}
#main > section.main-content p.message em {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; text-align: center; font-size: 30px; color: #ffffff;}
#main > section.main-content.error p.message {display: block;}

#main > section.check-age {background: url(../img/bg-age.jpg) center center no-repeat; background-size: cover;}
#main > section.check-age.on {display: block;}
#main > section.check-age div.container {position: absolute; left: 0; width: 100%; top: 50%; transform: translate(0, -50%); text-align: center;}
#main > section.check-age p.logo {width: 200px; margin-bottom: 30px; display: inline-block;}
#main > section.check-age p.message {font-size: 20px;}
#main > section.check-age p.message em {font-size: 40px; display: block; margin-bottom: 30px;}
#main > section.check-age p.button {margin-top: 50px;}
#main > section.check-age p.button a {display: inline-block; width: 150px; line-height: 50px; font-size: 20px; background-color: #ffffff; color: #041047; border-radius: 100px;}
#main > section.check-age p.button a + a {margin-left: 20px; background-color: #0044f9; color: #ffffff;}

#main > section.video a.play {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 20px; border: 1px solid #ffffff; padding: 10px 10px; width: 200px; text-align: center; border-radius: 100px; background-color: rgba(0, 0, 0, 0.8); z-index: 100;}
#main > section.video a.play i {margin-right: 20px; font-size: 1.3em; vertical-align: middle;}
#main > section.video a.play.off {display: none;}
#main > section.video video {width: 100%; height: 100vh; background-color: #000000;}

#main > section.winner {background: #000000 url(../img/main-bg-agree.jpg) top center no-repeat; background-size: cover; padding: 30px 20px 60px 20px;}
#main > section.winner p.logo {width: 140px; margin-bottom: 20px;}

#error-message {position: fixed; left: 0; width: 100%; text-align: center; top: 50%; transform: translate(0, -50%); font-size: 30px; color: #ffffff;}
#error-message p span {display: block; font-size: 60px; margin-bottom: 10px;}

/* module */
ul.form-box {font-size: 14px;}
ul.form-box > li {padding: 10px 0;}
ul.form-box > li.title {margin-top: 20px;}
ul.form-box > li.title h3 {text-align: center; text-decoration: underline; margin-bottom: 15px;}
ul.form-box > li.input {border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
input.text {font-size: 16px; border: 1px solid transparent; background-color: transparent; color: #ffffff; height: 30px; padding: 0 10px; width: calc(100% - 100px); border-radius: 0; -webkit-appearance: none; appearance: none;}
ul.form-box > li p.title {position: relative; margin-bottom: 10px;}
ul.form-box > li p.title span.check {position: absolute; right: 0;}
ul.form-box > li p.title span.check input[type="checkbox"] {width: 20px; height: 20px; vertical-align: middle; margin: 0;}
ul.form-box > li p.title span.check label {display: inline-block; padding-left: 10px;}
ul.form-box > li div.intro-box {max-height: 120px; border: 1px solid rgba(255, 255, 255, 0.2); overflow: auto; white-space: pre-wrap; font-size: 12px; padding: 0 10px; box-sizing: border-box; color: #fefefe;}
ul.form-box > li.submit {text-align: center; padding-bottom: 20px;}
ul.form-box > li #submit {display: inline-block; background-color: #ffffff; color: #041047; font-size: 20px; padding: 10px 0; text-align: center; width: 200px;}
ul.form-box p.desc {font-size: 13px;}
ul.form-box table.content {font-size: 11px; width: 100%;}
ul.form-box table.content th,
ul.form-box table.content td {border: 1px solid #999999; padding: 3px 5px;}

::placeholder {color: #ffffff;  opacity: 0.4; font-size: 13px;}

ul.input-list {overflow: hidden; margin: 10px 0;}
ul.input-list > li {float: left;}
ul.input-list > li + li {margin-left: 20px;}



@media (max-width: 850px) {
  #main > section.main-content p.message em {font-size: 20px; padding: 0 20px; box-sizing: border-box;}
  #main > section.check-age p.logo {width: 120px;}
  #main > section.check-age p.message {font-size: 14px; padding: 0 20px; box-sizing: border-box;}
  #main > section.check-age p.message em {font-size: 20px; margin-bottom: 10px;}
  #main > section.check-age p.button {margin-top: 30px;}
  #main > section.check-age p.button a {width: 120px; line-height: 40px; font-size: 16px;}
}




/* EOF */