@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: 400px; margin-bottom: 60px; 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.question {position: fixed; left: 0; top: 0; background: transparent; background-size: cover; padding: 30px 20px 60px 20px; width: 100vw; height: 100vh; z-index: 1000;}
#main > section.question a {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


/*
#main > section.question {background: #000000 url(../img/main-bg-agree.jpg) top center no-repeat; background-size: cover; padding: 30px 20px 60px 20px; width: 100vw; height: 100vh;}
#main > section.question > div.content {position: relative; top: 50%; transform: translate(0, -50%);}
#main > section.question > div.content p.question {font-size: 40px; font-weight: 700; color: #0044f9; text-align: center; margin-bottom: 50px;}
#main > section.question > div.content p.question em {display: inline-block; height: 40px; width: 120px; border: 2px solid #0044f9; border-radius: 6px; background-color: #ffffff; vertical-align: middle; margin: 0 12px;}
#main > section.question > div.content ol > li {position: relative;}
#main > section.question > div.content ol > li + li {margin-top: 20px;}
#main > section.question > div.content ol > li > a {display: block; font-size: 24px; background-color: rgba(255, 255, 255, 0.8); border: 2px solid #0044f9; border-radius: 6px; line-height: 50px; color: #333333; padding: 0 30px 0 60px;}
#main > section.question > div.content ol > li > a em {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); font-size: 18px; background-color: #0044f9; color: #ffffff; text-align: center; width: 30px; height: 30px; line-height: 30px; border-radius: 100px;}
*/



#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: 240px; margin-bottom: 30px;}
  #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;}
}



/* 팝업창 */
#popup-complete {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; z-index: 10000; background-color: #ffffff; color: #333333; box-sizing: border-box; padding: 20px; border-radius: 20px; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); display: none;}
#popup-complete.on {display: block;}
#popup-complete a.close {position: absolute; right: 10px; top: 3px; font-size: 34px; color: #999999;}
#popup-complete span.check {display: block; text-align: center; font-size: 40px; color: #0044f9;}
#popup-complete p.title {text-align: center; font-size: 24px; font-weight: 500; margin: 15px 0;}
#popup-complete ul {background-color: #f0f0f0; border-radius: 10px; padding: 20px;}
#popup-complete ul > li {font-size: 13px; position: relative; padding-left: 15px;}
#popup-complete ul > li + li {margin-top: 10px;}
#popup-complete ul > li::before {content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; background-color: #333333;}
#popup-complete ul > li em {display: block; font-size: 16px; font-weight: 700;}
#popup-complete ul > li em span {font-weight: 400;}
#popup-complete ul > li em span::before {content: "|"; margin: 0 10px;}
#popup-complete ul > li > span {display: block; margin-top: 2px;}
#popup-complete p.desc {font-size: 14px; margin: 8px 0;}
#popup-complete p.desc span {display: block; font-size: 12px; padding-left: 10px;}

#popup-used {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; z-index: 10000; background-color: #ffffff; color: #333333; box-sizing: border-box; padding: 40px 20px; border-radius: 20px; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); display: none;}
#popup-used.on {display: block;}
#popup-used a.close {position: absolute; right: 10px; top: 3px; font-size: 34px; color: #999999;}
#popup-used p {font-size: 18px; text-align: center;}
#popup-used p em {display: block; font-size: 24px; font-weight: 700; margin-bottom: 20px;}

#layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: none;}
#popup-complete.on ~ #layer-mask,
#popup-used.on ~ #layer-mask {display: block;}


/* EOF */