/* --------------------------------------------------------
Reset
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {margin: 0; padding: 0; border: 0; font-size: 100%; box-sizing: border-box;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: separate; border-spacing: 0;}
a {color:inherit; text-decoration: none;}
img {vertical-align: top;}
input:focus, textarea:focus {outline: none;}
input[type=text], button {-webkit-appearance: none; -moz-appearance: none; appearance: none; border: none;}
button {background-color: transparent; cursor: pointer; outline: none; font-family: 'Pretendard'; padding: 0;}
input[type=text]::ms-clear {display: none;}
input[type=password] {border: none;}
select::-ms-expand {display: none;}
legend, caption {overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0,0,0,0);}
strong {font-weight: 700;}
body, select, input, textarea {box-sizing: border-box; font-family: 'tdc', sans-serif;}
/* --------------------------------------------------------
common
----------------------------------------------------------*/
body {letter-spacing: -0.5px;}

/* Pretendard */
@font-face {
	font-family: 'tdc';
  src: url('../fonts/2025-T-TDC-13-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
  src: url('/fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
  src: url('/fonts/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
  src: url('/fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src: url('/fonts/Pretendard-Medium.woff') format('woff');
}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mr0 {margin-right: 0 !important;}
.mr10 {margin-right: 10px !important;}
.mr20 {margin-right: 20px !important;}
.mr30 {margin-right: 30px !important;}
.ml0 {margin-left: 0 !important;}
.ml10 {margin-left: 10px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}

/*.shape {width: 20px;}*/
.mo {display: none;}
.btn {position: relative; margin-top: -1px; padding: 20px;}
.btn ul {display: flex; justify-content: center; align-items: center; gap: 20px;}
.btn ul li {display: flex;}
.btn ul li a {border: 2px solid #000; padding: 7px 28px; font-size: 20px; font-weight: 500; border-radius: 100px; font-family: 'Pretendard'; font-weight: 700; text-align: center;}
.btn ul li a .ko {margin-bottom: 10px;}
.btn ul li a .en {font-weight: 500; font-size: 18px;}
.btn ul li.icon a {padding: 11px; border-radius: 50%;}
.btn ul li.icon a img {width: 25px; height: 25px;}
.video-area {position: relative;}
.main-txt img {width: 100%;}
.video-area {margin-top: -2.4%; /*min-height: 660px;*/}
video {width: 100%; height: 100%; object-fit: cover; outline: none; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; border: none;}

.screensaver {position: absolute;top: 50%; left: 50%; transform: translate(-50%, -20%);
  font-size: 120px; text-align: center; display: none; }
.screensaver .shape {position: absolute; width: 60%;}
.screensaver .shape.s1 {width: 13px; top: -43%; left: 50%;}
.screensaver .shape.s2 {top: 54%; left: 77%; width: 170px;}
.screensaver .shape.s3 {top: 97%; left: 79%; width: 33%;}
.clock {margin-top: -65px;}
.video-area.video-hidden video {opacity: 0; pointer-events: none;}
@media screen and (max-width: 990px) {
  .btn ul {flex-direction: row; justify-content: center; gap: 10px;}
  .btn ul li a {padding: 8px 20px; font-size: 16px;}
  .btn ul li.icon a {padding: 7px;}
  .btn ul li.icon a img {width: 19px; height: 19px;}
  .video-area {min-height: 300px;}
  .screensaver {font-size: 80px;}
  .clock {margin-top: -45px;}
  .screensaver .shape.s1 {width: 7px; top: -40%; left: 50%;}
  .screensaver .shape.s2 {top: 49%; left: 77%; width: 90px;}
  .screensaver .shape.s3 {top: 97%; left: 79%; width: 28%;}
  .screensaver .shape.s4 {}
}
@media screen and (max-width: 768px) {
  .video-area {margin-top: -3.6%;}
  .screensaver {transform: translate(-50%, -60%);}
  .btn.mobile {background: #fff; margin-top: -1px;}
  .pc {display: none;}
  .mo {display: block;}
}
@media screen and (max-width: 520px) {
  .btn ul li a {padding: 7px; font-size: 15px;}
  .btn ul li a .ko {margin-bottom: 7px;}
  .btn ul li a .en {font-size: 15px;}
}