@charset "utf-8";

@font-face {
	font-family: 'SECGCB';
	font-style: normal;
	font-weight: 100;
	src: url('../fonts/SECGCB.woff'); 
	src: local('SECGCB'), local('SECGCB'),
		 url('../fonts/SECGCB.woff') format('woff'),
  }

* {font-family: 'SECGCB', 'Malgun Gothic', '맑은고딕', sans-serif; margin: 0; padding: 0; letter-spacing: -0.1px;}

/* 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, strong, 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 
{ margin: 0; padding: 0; border: 0; font-size: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
table caption {overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
a {color: #000000; text-decoration: none;}
label, img { vertical-align:middle;}
html {-webkit-text-size-adjust: antialiased; -moz-osx-font-smoothing: grayscale;}
input {-webkit-border-radius: none; -webkit-appearance: none; vertical-align: top; font-weight: 400;}
input::placeholder, textarea::placeholder { color: #999;}
input[type=text] {font-size: 14px; height: 40px; line-height: 40px; border: 1px solid #ccc; padding: 0 10px; box-sizing: border-box; border-radius: 10px;}
input[type=password] {font-size: 14px; height: 40px; line-height: 40px; border: 1px solid #ccc; padding: 0 10px; box-sizing: border-box; border-radius: 10px;}
textarea {font-size: 14px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; min-height: 100px; border-radius: 10px; resize:none;}
input[type=radio] {width: 15px; height: 15px; border: 1px solid #8ea9c9; border-radius: 12px; vertical-align: middle; background: #fff; margin-right: 3px; position: relative}
input[type=radio]::after {content: ''; background: #dbe6f3; display: block; box-sizing: border-box; width: 7px; height:  7px; position: absolute; left: 3px; top: 3px; border-radius: 10px;}
input[type=radio]:checked::after {content: ''; background: #1b69d4; display: block; box-sizing: border-box; width: 7px; height: 7px; position: absolute; left: 3px; top: 3px; border-radius: 10px;}
input[type=checkbox] {width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 3px; background: #fff; border: 1px solid #d9d9d9; margin-top: 0; box-sizing: border-box; position: relative; overflow: hidden; z-index: 1; vertical-align: middle;}
input[type=checkbox]:checked {border: 0;}
input[type=checkbox]:checked::before {content: ''; width: 18px; height: 18px; display: block; background: url(../img/bg_check.png) 50% 50% no-repeat #2a57a2; border:0;  position: absolute; left: 0; top: 0; z-index: 2;}
input[type=file]::after, input[type=file]:checked::after {background: #fff;}
select {width: 100%; box-sizing: border-box; border: 1px solid #ccc; height: 40px; line-height: 40px; color: #393b44; background: url(../img/bg_select.png) calc(100% - 10px) 50% no-repeat #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-left: 10px; font-size: 14px; border-radius: 10px;}
select::-ms-expand {display: none;}
select > option {color: #999;}
div, label { box-sizing: border-box;}
button {cursor: pointer; vertical-align: top;}
button:disabled, button[disabled] {cursor:default;}
input[type=radio], input[type=checkbox] {cursor: pointer;}

.w100p {width: 100% !important;}
.w90p {width: 90% !important;}
.w80p {width: 80% !important;}
.w70p {width: 70% !important;}
.w69p {width: 69% !important;}
.w60p {width: 60% !important;}
.w50p {width: 49% !important;}
.w40p {width: 40% !important;}
.w35p {width: 35% !important;}
.w30p {width: 30% !important;}
.w29p {width: 29% !important;}
.w24p {width: 24% !important;}
.w20p {width: 20% !important;}
.w10p {width: 10% !important;}

.w50 {width: 50px !important;}
.w60 {width: 60px !important;}
.w80 {width: 80px !important;}
.w100 {width: 100px !important;}
.w150 {width: 150px !important;}
.w200 {width: 200px !important;}
.w300 {width: 300px !important;}
.w400 {width: 400px !important;}
.w500 {width: 500px !important;}

.h50 {height: 50px !important;}
.h100 {height: 100px !important;}
.h200 {height: 200px !important;}
.h300 {height: 300px !important;}
.h400 {height: 400px !important;}
.h500 {height: 500px !important;}

.mt0 {margin-top: 0 !important;}
.mt2 {margin-top: 2px !important;}
.mt5 {margin-top: 5px !important;}
.mt8 {margin-top: 8px !important;}
.mt10 {margin-top: 10px !important;}
.mt12 {margin-top: 12px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}

.mt-10 {margin-top: -10px !important;}
.mt-20 {margin-top: -20px !important;}
.mt-30 {margin-top: -30px !important;}
.mt-40 {margin-top: -40px !important;}
.mt-50 {margin-top: -50px !important;}

.mb2 {margin-bottom: 2px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb8 {margin-bottom: 8px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb12 {margin-bottom: 12px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}

.ml2 {margin-left: 2px !important;}
.ml5 {margin-left: 5px !important;}
.ml8 {margin-left: 8px !important;}
.ml10 {margin-left: 10px !important;}
.ml12 {margin-left: 12px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}

.mr0 {margin-right: 0 !important;}
.mr2 {margin-right: 2px !important;}
.mr5 {margin-right: 5px !important;}
.mr8 {margin-right: 8px !important;}
.mr10 {margin-right: 10px !important;}
.mr12 {margin-right: 12px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr40 {margin-right: 40px !important;}
.mr50 {margin-right: 50px !important;}

.p0 {padding: 0 !important;}
.p10 {padding: 10px !important;}
.p15 {padding: 15px !important;}
.p20 {padding: 20px !important;}
.p30 {padding: 30px !important;}
.p40 {padding: 40px !important;}
.p50 {padding: 50px !important;}

.pt0 {padding-top: 0px !important;}
.pt3 {padding-top: 3px !important;}
.pt5 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}

.pb0 {padding-bottom: 0px !important;}
.pb3 {padding-bottom: 3px !important;}
.pb5 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}

.pl0 {padding-left: 0px !important;}
.pl3 {padding-left: 3px !important;}
.pl5 {padding-left: 5px !important;}
.pl6 {padding-left: 6px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}

.pr0 {padding-right: 0px !important;}
.pr3 {padding-right: 3px !important;}
.pr5 {padding-right: 5px !important;}
.pr6 {padding-right: 6px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr80 {padding-right: 80px !important;}
.pr100 {padding-right: 100px !important;}

.c-green {color: #60c614 !important;}
.c-mint {color: #18c3a3 !important;}
.c-skyblue {color: #00b6f0 !important;}
.c-blue {color: #378ee9 !important;}
.c-green2 {color: #8ebc00 !important;}
.c-yellow {color: #d7b700 !important;}
.c-orange {color: #f27200 !important;}
.c-red {color: #df3b42 !important;}
.c-gray {color: #888 !important;}

.bg-green {background-color: #60c614 !important;}
.bg-mint {background-color: #18c3a3 !important;}
.bg-skyblue {background-color: #00b6f0 !important;}
.bg-blue {background-color: #378ee9 !important;}
.bg-dkblue {background-color: #1a294f !important;}
.bg-green2 {background-color: #8ebc00 !important;}
.bg-yellow {background-color: #d7b700 !important;}
.bg-orange {background-color: #f27200 !important;}
.bg-red {background-color: #df3b42 !important;}
.bg-purple {background-color: #9340b9 !important;}

.font12 {font-size: 12px !important;}
.font13 {font-size: 13px !important;}
.font14 {font-size: 14px !important;}
.font15 {font-size: 15px !important;}
.font18 {font-size: 18px !important;}
.font20 {font-size: 20px !important;}

/* text align */
.t-center {text-align: center !important;}
.t-right {text-align: right !important;}
.t-left {text-align: left !important;}

/* fclear */
.fclear:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
* html .fclear {height: 1%;}
.fclear {display: block; min-height: 1%;}

/* float */
.f-left {float: left;}
.f-right {float: right;}

/* display */
.d-block {display: block !important;}
.d-inblock {display: inline-block !important;}

/* button */
button[type=button], input[type=submit] input[type=button] {cursor: pointer; transition: all .2s; vertical-align: middle;}
button[type=button]:hover, input[type=submit]:hover, input[type=button]:hover {opacity: .9;}
button[type=button]:disabled, input[type=submit]:disabled, input[type=button]:disabled {opacity: .2; color: rgba(255,255,255,.7); cursor: default;}

body, html {font-size: 16px; width: 100%; height: 100%; padding: 0; margin: 0; overflow-y: auto; min-height: 840px; }

#wrap {width: 100%; height: 100%; position: relative; padding: 0; margin: 0;}
#wrap > video {position: fixed; left: 0; bottom: 0; min-width: 100%;  min-height: 100%; color: #fff;}
#wrap > .bg {position: fixed; left: 0; bottom: 0; min-width: 100%;  min-height: 100%; background-color: rgb(19, 21, 76); opacity: .45; z-index: 1;}
#wrap .language {position: absolute; right: 3%; top: 3%; z-index: 2; font-size: 1.625em;}
#wrap .language .language-A {display: block; cursor: pointer; position: relative; padding-right: 40px; color: #fff; line-height: 40px; font-size: 1em; background: transparent; border: 0;}
#wrap .language .language-A::after {position: absolute; right: 5px;  top: 8px;  content: ''; width: 15px; height: 15px; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(225deg); transition: all .1s ease-in-out;}
#wrap .language .language-A.active::after {transform: rotate(135deg);  top: 5px;}
#wrap .language .language-B {display: none; color: rgba(255,255,255, .4); font-size: 1em; padding: 0; border: 0; width: 100%; transition: all .3s ease; box-sizing: border-box;}
#wrap .language .language-B:hover {color: rgba(255,255,255, 1);}
#wrap .language .language-B.active {display: block; position: relative;}

#wrap .title1 {position: absolute; right: 3%; top: 22%; text-align: right; color: #fff; font-size: 4em; line-height: 1.2; font-family: 'SECGCB'; transition: all .3s ease; z-index: 2;}
#wrap .content {position: absolute; right: 0; bottom: 0; width: 100%; height:50%; text-align: center; display: block; padding: 45px 0; box-sizing: border-box;}
#wrap .content .title2 {color: #fff; position: relative; z-index: 2; font-size: 1.875em; margin: 0 0 1em; word-break: keep-all; line-height: 1.4;}
#wrap .content .title2 .arrow {width: 40px; height: 30px; position: relative; margin: 10px auto 0;}
#wrap .content .title2 .arrow::after {position: absolute; left: 7px;  top: 0;  content: ''; width: 15px; height: 15px; border-top: 4px solid #fff; border-right: 4px solid #fff; transform: rotate(135deg);}
#wrap .content .bg-color {width: 100%; height: 100%; background-color: rgb(16, 21, 53); opacity: .8;  /*mix-blend-mode: multiply; */position: absolute; left: 0; top: 0; z-index: 1;}
#wrap .content form {color: #fff; position: relative; z-index: 2;}
#wrap .content form legend {display: none;}
#wrap .content form input, #wrap .content form button {display: block; border-radius: 10px; margin: 0 auto 20px; width: 340px;  height: 56px; line-height: 56px; text-align: center; transition: all .3s ease; color: #333; box-sizing: border-box;}
#wrap .content form input {background: rgba(255,255,255, .4); color: rgba(255,255,255, 1); font-size: 1em;}
#wrap .content form input::placeholder {color: rgba(255,255,255,.5) !important;}
#wrap .content form input:focus {background: rgba(255,255,255, 1); color: rgb(19, 21, 76); outline: none;}
#wrap .content form button {background: rgba(255,255,255, .6); border: 0; color: #fff; font-size: 1.5em;}
#wrap .content form button:hover {background: rgba(255,255,255, 1); color: rgb(19, 21, 76)}
#wrap .content footer {position: absolute; bottom: 0; left: 0; z-index: 2; height: 120px; width: 100%; color: #fff; text-align: center;}
#wrap .content footer .logo1 {position:absolute; left: 2.5%; bottom: 15%; height: 70px;}
#wrap .content footer .logo2 {position:absolute; right: 2.5%; bottom: 15%; height: 70px;}
#wrap .content footer dl {font-size: 1.25em; line-height: 120px;}
#wrap .content footer dl dt {display: inline-block; vertical-align: middle;}
#wrap .content footer dl dd {display: inline-block; vertical-align: middle; margin-right: 15px;}
#wrap .content footer dl dd img {margin-right: 5px;}

/* Media Query */
@media screen and (max-width: 1400px) {
	body, html {font-size: 15px;}
	#wrap .title1 {font-size: 3.5em;}
	#wrap .content footer dl {font-size: 1.1em;}
	#wrap .content footer .logo1, #wrap .content footer .logo2 {height: 50px; bottom: 30%;}	
	#wrap .language {font-size: 1.25em;}
	#wrap .language .language-B {padding-right: 40px;}
	#wrap .language .language-B::after {top: 8px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff;}
	#wrap .language .language-B.active::after {top: 15px;}
	#wrap .language .language-A::after {width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; right: 10px; top: 13px;}
	#wrap .language .language-A.active::after {top: 10px;}
}

@media screen and (max-height: 1000px) {
	#wrap .title1 {font-size: 3em; top: 15%;}
	#wrap .content {height: 60%;}
	#wrap .language {font-size: 1.25em;}
	#wrap .language .language-B {padding-right: 40px;}
	#wrap .language .language-B::after {top: 8px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff;}
	#wrap .language .language-B.active::after {top: 15px;}
}

@media screen and (max-width: 1024px) {
	#wrap .content footer {height: auto; padding: 1em 0;}
	#wrap .content footer dl {line-height: 1.1;}
	#wrap .content footer dl dd img {width: 20px; margin: 5px 0;}
	#wrap .content footer .logo1, #wrap .content footer .logo2 {position: relative; height: 40px; left: 0; bottom: 0; margin-right: 1em;}
}

@media screen and (max-width: 840px) {
	body, html {font-size: 14px;}
	#wrap .title1 {font-size: 2.8em; top: 15%; line-height: 1.4;}
	#wrap .content {height: 60%;}
	#wrap .content .title2 {width: 90%; margin: 0 auto 1em; font-size: 1.5em;}
	#wrap .content form input, #wrap .content form button {height: 48px; line-height: 48px;}
	#wrap .content form button  {font-size: 1.25em;}
	#wrap .content form input, #wrap .content form button {width: 300px;}
}

@media screen and (max-width: 560px) {
	body, html {font-size: 13px; min-height: auto;}
	#wrap .title1 {font-size: 2em; top: 11%;}
	#wrap .content {height: 70%;}
	#wrap .content footer .logo1, #wrap .content footer .logo2 {height: 30px;}
	#wrap .content footer dl {font-size: 1em;}
	#wrap .content .title2 {font-size: 1.25em;}
}