@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

/* reset css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; font-family:'Roboto','Noto Sans CJK KR','Nanum Gothic','나눔고딕','맑은 고딕','Malgun Gothic','돋움','Dotum','AppleGothic',sans-serif; letter-spacing:-0.45px}
body {line-height:normal !important}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
dl,ul,ol,menu,li {list-style:none}
caption, legend {visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content:none}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none}
a:focus, a:hover {text-decoration:none !important}
ins {background-color:#ff9; color: #000; text-decoration:none}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold}
del {text-decoration:line-through}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help}
table {border-collapse:collapse; border-spacing:0}
hr {display:block; height:1px; border:0; border-top: 1px solid #cccccc; margin:1em 0; padding:0}
input, select {vertical-align:middle}
i {vertical-align:middle}
/* reset bsslider*/
.bx-wrapper {box-shadow:none; border:none; background:none; margin:0; padding:0}

.auto {margin:0 auto !important}
.width100 {width:100% !important}
.mt0 {margin-top:0 !important}
.mt5 {margin-top:5px !important}
.mt10 {margin-top:10px !important}
.mt15 {margin-top:15px !important}
.mt20 {margin-top:20px !important}
.mt25 {margin-top:25px !important}
.mt30 {margin-top:30px !important}
.mt35 {margin-top:35px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt70 {margin-top:70px !important}
.mt100 {margin-top:100px !important}

/*mainArticle*/
/*
#mainArticle {position:relative}
#mainArticle .mainArticle-Wrap {padding:70px 0}
#mainArticle .top {max-width:1623px; margin:0 auto; overflow:hidden}
#mainArticle .top h1 {display:inline}
#mainArticle .top span {float:right; color:#fff; font-size:22px; font-weight:700; margin-right:10px}
#mainArticle .top span i {letter-spacing:3px}
#mainArticle  section {max-width:1200px; margin:0 auto}
#mainArticle  section .main_text {color:#fff; font-size:64px; font-weight:700; text-align:center}
#mainArticle  section h5 {color: #fff; font-size:26px; font-weight:700; text-align:center}
#mainArticle  section > div p {color:#fff; font-size:20px; text-align:center}
*/
#mainVisual {width:100vw; height:90vh; position:relative; overflow:hidden}
#mainVisual video {width:100%; height:100%; transform:scale(2.0)}
.textWrap {position:absolute; top:0; left:0; width:100%; height:100%}
.textWrap > section {max-width:1624px; margin:0 auto; padding:70px 0 0 0}

.mainArticle-Wrap {}
.top {max-width:1623px; margin:0 auto; overflow:hidden}
.top h1 {display:inline}
.top span {float:right; color:#fff; font-size:22px; font-weight:700; margin-right:10px}
.top span i {letter-spacing:3px}
 section {max-width:1200px; margin:0 auto}
 section .main_text {color:#fff; font-size:64px; font-weight:700; text-align:center}
 section h5 {color: #fff; font-size:26px; font-weight:700; text-align:center}
 section > div p {color:#fff; font-size:20px; text-align:center}

.btn_w {text-align:center}
.btn_w a {text-decoration:none; color:#fff; text-align:center; padding:30px 50px; border:1px solid #fff; letter-spacing:4px; font-weight:700; font-size:16px; display:inline-block}
.btn_w a:hover{background-color:#fff; color:#000}

.btn_p {text-align:center}
.btn_p a {text-decoration:none; color:#29376e; text-align:center; padding:30px 50px; border:1px solid #29376e; letter-spacing:4px; font-weight:700; font-size:16px; display:inline-block}
.btn_p a:hover{background-color:#29376e; color:#fff}

/* The only rule that matters */
#myVideo {
/*  making the video fullscreen  */
  position: absolute; max-width: 100%; width: auto; height: auto; z-index: -100;}

.con01 {background-color:#fff; padding: 70px 0;}
.con01 section {max-width:1200px; margin:0 auto;}
.sub_title_p {color:#29376e; font-size:64px; letter-spacing:3px; font-weight:700; text-align:center}
.sub_title_w {color:#fff; font-size:64px; letter-spacing:3px; font-weight:700; text-align:center}
.con01 h5 {color:#292929; font-size:26px; font-weight:700; text-align:center}
.con01 p {color:#292929; font-size:18px; text-align:center; line-height: 1.5em}


.con02 {background-color:#29376e; padding: 70px 0;}
.con02 section {max-width:1200px; margin:0 auto;}

#myVideo2 {max-width: 100%;}


.con03 {background-color:#fff; padding-top: 70px}
.con03 section {max-width:1200px; margin:0 auto; border-bottom:1px solid #e3e3e3; padding-bottom:100px}
.con03 .gradient {background: linear-gradient(45deg, #29376e, #37b6cd); padding:30px; overflow:hidden; margin: 0 20px;}
.con03 img {display: inline-block; background: #fff; border: 1px solid #fff; border-radius: 1000px; padding: 20px; float:left}
.con03 .text {margin-left: 170px}
.con03 .gradient .text h5 {color:#fff; font-size:25px; font-weight:700; text-align:left}
.con03 .gradient .text p {color:#fff; font-size:17px; text-align:left}



.con04 {background-color:#fff; padding: 70px 0;}
.con04 section {max-width:1200px; margin:0 auto;}
.con04 h5 {color:#292929; font-size:26px; font-weight:700; text-align:center}
.con04 p {color:#292929; font-size:18px; text-align:center; line-height: 1.5em}

.con05 {background:url(/site/main/html/Tech-Innovation-Challenge/f_1.png); padding: 70px 0;}
.con05 section {max-width:1200px; margin:0 auto;}
.con05 p {color:#292929; font-size:18px; text-align:center; padding:0 15px}
.con05 .sub_title_b {color:#29376e; font-size:42px; letter-spacing:3px; font-weight:700; text-align:center; padding-top:50px}
.con05 .tl {text-align:left}
.con05 .tl > span {color: #29376e; font-weight: 700; margin-right: 10px}
.con05 .sub_back {background:#fff; box-shadow: 4px 4px 8px #999}
.con05 .text {padding:30px; padding: 35px 100px 50px 100px;}

.con06 {background-color:#fff; padding: 70px 0;}
.con06 section {max-width:1200px; margin:0 auto;}
.con06 p {color:#292929; font-size:18px; text-align:left;  line-height: 1.5em}

.con07 {padding: 92px 0; position:relative}
.con07 #myVideo3 {position: absolute; z-index: -100; width: 100%; top: -200px;}
.con07 section {max-width:1200px; margin:0 auto;}
.con07 p {color:#fff; font-size:18px; text-align:center;  line-height: 1.5em}

.con07 {width:100vw; height:65vh; position:relative; overflow:hidden}
.con07 video {width:100%; height:100%; transform:scale(2)}

footer {background-color:#29376e; padding:70px 10px;}
footer section {max-width:1200px; margin:0 auto}
footer .sub_title_w {font-size:28px; letter-spacing:3px; font-weight:700; text-align:center; text-decoration:none}
footer .sub_title_w a {color:#fff; opacity:0.7}
footer .sub_title_w a:hover {opacity:1}
footer .sns_icon {text-align:center}
footer .sns_icon img {margin: 0 5px; opacity:0.7}
footer .sns_icon a img:hover{opacity:1}
footer .mail {text-align:center; color: #fff; font-size:20px; border-bottom: 1px solid #37cbbc; font-weight:700}
footer .tag	{text-align:center; color: #fff; font-size:20px;}
footer .copy {text-align:center; color: #fff; font-size:16px;}

.row {margin:0}



/* 반응형 */
@media screen and (max-width:1630px) {
	.top {padding: 0 40px;}
	
}
@media screen and (max-width:1200px) {
	.con06 section {padding: 0 30px;}
	.con03 img {display: block; float:none}
	.con03 .text {margin-left: 0;}
	.con03 .text h5 {text-align:center; margin-top: 20px}
	.con03 .text p {text-align:center}
}
@media screen and (max-width:1024px) {
	#mainVisual video {width:auto; transform:scale(1); height: 95vh;}
	.con07 {height: 70vh;}
	.con07 video {width:auto; transform:scale(2)}
	.sub_title_p {font-size:58px; padding: 0 15px;}
	.sub_title_w {font-size:58px; padding: 0 15px;}
	.con07 section {padding: 0 40px;}
	.con05 .text {padding:0 20px 30px 20px}
}	

@media screen and (max-width:990px) {
	.con03 .mb25 {margin-bottom: 25px;}
	.col-md-4 {margin-bottom: 25px;}
	.con07 video {width:auto; transform:scale(3)}
	.con03 .gradient .text h5 { text-align:center}
	.con03 .gradient .text p {text-align:center}

}	

@media screen and (max-width:843px) {
	.con07 {height: 80vh;}

}	
@media screen and (max-width:640px) {
	.con07 video {transform:scale(3.5)}
	.sub_title_p {font-size:50px}
	.sub_title_w {font-size:50px}
	.top span {font-size:18px}
	h1 > img {width:30%}
}	

@media screen and (max-width:580px) {
	section .main_text {font-size:60px}
	section h5 {font-size:22px}
	section > div p {font-size:18px}
	.sub_title_p {font-size:44px}
	.sub_title_w {font-size:44px}
	.con05 .sub_title_b {font-size:38px}
	h5 {font-size:24px}
	.con03 h5 {font-size:24px}
	.con03 text p  {font-size:17px}
	.con04 h5 {font-size:24px}
	.con04 text p  {font-size:17px}
	.con07 video {transform:scale(4)}]
	footer .copy {padding: 0 20px;}	

@media screen and (max-width:500px) {

	section .main_text {font-size: 54px; padding: 0 15px;}
	section h5 {padding: 0 15px;}
	section > div p {padding: 0 15px;}
	.con07 video {transform:scale(6)}
	.con07 {height: 86vh;}
	h1 > img {width:32%}
	.con05 p {font-size:16px}
	.con06 p {font-size:16px}
	.con07 p {font-size:16px}
	footer .sub_title_w {font-size:18px}
}	

@media screen and (max-width:450px) {
	section h5 {font-size:18px;}
	section > div p {font-size:16px}
	.top span {font-size:15px}
	#mainVisual video {height: auto;}	
	section .main_text {font-size: 50px;}
}

@media screen and (max-width:430px) {
	.con07 {height: 90vh}
	.sub_title_p {font-size:38px}
	.sub_title_w {font-size:38px}
	.con05 .sub_title_b {font-size:30px}
	h5 {font-size:20px}
	.con03 .gradient .text h5 {font-size:20px}
	.con03 .gradient .text p  {font-size:14px}
	.con04 h5 {font-size:20px}
	.con04 text p  {font-size:14px}
	.col-md-4 img {width: 40%;}
}

@media screen and (max-width:380px) {
	.btn_w a {font-size:14px}
	.btn_p a {font-size:14px}
	.top span {float:none; display: block; margin-top:10px; text-align: center;}
	h1 > img {display:block; margin:0 auto}

	
}

@media screen and (max-width:375px) {
	.con07 {padding: 50px 0;  height: 110vh;}	
	.mainArticle-Wrap .btn_w {margin-top:30px !important}
	section .main_text {font-size: 38px;}
	section > div p {margin-top:20px !important}
	section > div h5 {margin-top:20px !important}
	.textWrap > section {padding-top: 50px}
	.sub_title_p {font-size:34px}
	.sub_title_w {font-size:34px}

}

@media screen and (max-width:360px) {
	.con07 {padding: 50px 0;  height: 110vh;}	
	.mainArticle-Wrap section {margin-top:30px !important}
}

@media screen and (max-width:320px) {
	.btn_w a {font-size:12px}
	.btn_p a {font-size:12px}

}
