﻿@charset "euc-kr";

.visual li {position:relative;width:100%; height: 100vh; background-position:center; background-repeat:no-repeat; background-size:cover;  transition:transform 2s ease-in-out; overflow:hidden}
.visual li:first-child {background-image:url('../../img/main/main_01.png')}
.visual li:nth-child(2) {background-image:url('../../img/main/main_02.png')}
.visual li:nth-child(3) {background-image:url('../../img/main/main_03.png')}
.visual .txt {position:absolute; left:50%; top:50%; transform:translateX(-50%);  color:#fff; z-index:60; transition:top 1s ease-in-out;opacity:1; }
.visual .txt.last {position:absolute; left:20%; top:80%; transform:translateX(-20%);  color:#fff; z-index:60; transition:top 1s ease-in-out;opacity:1; }
.visual .txt h2 {text-transform:uppercase;font-size:3em;font-weight:300;text-shadow: 3px 3px 3px gray; }
.visual .txt h2 span {display:block; padding:66px 0 0 38px; opacity:0; transition:opacity 0.5s ease-in-out; transition-delay:0}
.visual .txt.last h2 span {padding:0 0 15px 0;}
.visual .txt h2 em {display:block; /* margin-left:38px; */ font-size:1.5em; opacity:0; transition:opacity .8s ease-in-out; transition-delay:0}
/* .visual .txt p {position:relative; padding-top:21px; margin:48px 0 30px 38px; font-size:1.250em; opacity:0; transition:opacity .8s ease-in-out; transition-delay:2.2s} */
.visual .txt p {position:relative; padding-top:21px; margin-top:14px; font-size:1.250em; opacity:0; transition:opacity .8s ease-in-out; transition-delay:0.5}
.visual .txt p:before {position:absolute; top:0; left:0; width:100%; height:2px; background:#fff; content:''}
/* .visual .txt p.last:before {position:absolute; top:0; left:0; width:0; height:0; background:#fff; content:''} */

.visual .txt > span {margin-left:38px; opacity:0; transition:opacity .8s ease-in-out; transition-delay:0.6s}
.visual .txt a {display:inline-block; padding:9px 17px 9px 16px; border:1px solid #c9cbd1; color:#fff; border-radius:4px; font-size:0.938em; transition:all .4s ease-in-out;}
.visual .txt a:hover, .visual .txt a:focus {background:#fff; color:#333}
.visual li img {width:100%; height:100%;}
.visual li.active .txt {top:40%;}
.visual li.active .txt.last {top:65%;}
.visual li.active .txt h2 span,
.visual li.active .txt h2 em,
.visual li.active .txt p,
.visual li.active .txt > span {opacity:1}
.scroll {position:absolute; left:50%; bottom:120px; z-index:10; width:188px; height:32px; margin-left:-94px;z-index:22222;}
.scroll img {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.scroll img {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}



/* bx pager */
.bx-pager {position:absolute;bottom:50px;left:50%;margin-left:-40px;width:120px;height:20px;z-index:999999;}
.bx-pager div {display: inline-block;margin-left: 20px;}
.bx-pager div:first-child {margin-left: 0;}
.bx-pager div a {display: block;width: 16px;height: 16px;background: url('../img/bg/dot_off.png') 0 0 no-repeat;background-size: 16px 16px;text-indent: -9999px;}
.bx-pager .active {background: url('../img/bg/dot_on.png') 0 0 no-repeat;background-size: 16px 16px;opacity: 1;}



/* 풀페이지 네비 */
.page_wrap {position: fixed;top: 50%;right: 30px;margin-top: -4%;color: #fff;z-index: 8;opacity: 1;transition: opacity 0.3s linear 0s;}
.dot_page {position: relative;}
.dot_page:before {content: '';position: absolute;display: block;top: 13px;left: 50%;bottom: 13px;width: 2px;opacity: 0.5;background-color: #fff;}
.dot_page li {position: relative;margin-top: 30px;}
.dot_page li:first-child {margin-top: 0;}
.dot_page li a {position: relative;display: block;padding: 5px;width: 10px;height: 10px;}
.dot_page li a:before {content: '';position: absolute;top: 26%;left: 20%;background:url("../img/bg/dot_page.png");width: 10px;height: 10px;color: #9a9ea4;}
.dot_page li a.on:before {background-image: url("../img/bg/dot_page_on.png");}
.dot_page li a span {position: absolute;top: -4px;right: 100%;margin-left: 20px;display: none;white-space: nowrap;text-align: center;padding: 8px;color: #fff;font-size: 0.8rem;background-color: #0085db;border-radius: 2px;}
.dot_page li:hover a span {display:block;}

/* 게시판 */
/* section {width: 100%;max-width: 1200px;margin: 0 auto;} */
section .board_top, section .mcon_wrap .board_bottom {float:left;width:100%;}
.board_wrap {margin-top:110px;}
#news {padding:30px 0;background-color:#f5f5f5;}
#news .new_wrap {max-width:1280px;margin:0 auto;position:relative;}
#news .list>div {position:relative;float:left; width:31%; height:320px; margin-left:1%; margin-right:1%; padding:25px 20px; border-radius:20px; text-align:center;background-color:#fff; box-shadow: 0 40px 43px -37px ;}
#news .list h2 {font-size:1.3rem;font-weight:400;}
section .board_top h2 {width:auto; font-size:24px; line-height:30px; color:#444; margin:0px auto 20px;}
#news .list h2 img { vertical-align:bottom; margin-right:5px;}

/* 새소식 */
.news-list { position:relative; float:left;width:100%; margin:30px 0; text-align:left !important;padding-left:15px;}
.news-list li {display:block; float:left; width:100%; border-bottom:1px solid #ddd; padding-bottom:6px; margin-top:6px;}
.news-list li:first-child {margin-top:0}
.news-list li a {display:block; font-size:15px;}
.news-list li a:hover {font-weight:400;}
.news-list li a span {display:block; font-size:13px; color:#999; }
.news-list li a img {margin-left:5px;vertical-align:middle;}
.view_more { position:absolute; width:50%; height:37px;left:50%; margin-left:-25%; bottom:5%;}
.view_more a { display:block;width:100%; height:100%; border:1px solid #ddd; line-height:35px; font-size:15px; color:#444; border-radius:10px;
-webkit-transition:300ms ease-out 0ms;
-moz-transition:300ms ease-out 0ms;
-ms-transition:300ms ease-out 0ms;
transition:300ms ease-out 0ms;
 }
.view_more a:hover {border:1px solid #0325a2; background:#0325a2; color:#fff; }
.intro-news { position:relative; float:left;width:100%; margin:30px 0; text-align:left !important}
.intro-news li {display:block; float:left; width:100%; border-bottom:1px solid #ddd; padding-bottom:17px; margin-top:11px;}
.intro-news li:first-child {margin-top:0;}
.intro-news li a {display:block; font-size:1.3em;}
.intro-news li a:hover {font-weight:400;}

/* 사업 연구소 */
#rnd {position:relative;float:left;width:100%;overflow:hidden;zoom:1;padding:30px 0 60px;background:url('../img/main/bg_rnd.png') no-repeat center 0;background-size:cover;}
#rnd > .rnd_wrap {position:relative;width:1280px;margin:0 auto;}
#rnd > .rnd_wrap > div {position:relative;float:left;width:33.33%;  height:0; padding-bottom:18%;  cursor:pointer;  opacity:0.8}
#rnd > .rnd_wrap > div:hover {opacity:1;
-webkit-transition:300ms ease-out 0ms;
-moz-transition:300ms ease-out 0ms;
-ms-transition:300ms ease-out 0ms;
transition:300ms ease-out 0ms;}
#rnd > .rnd_wrap dl {position:relative;float:left; width:100%;margin-bottom:20px;margin-top:0; text-align:center; color:#fff; }
#rnd > .rnd_wrap dl dt {position:relative;float:left; width:100%;font-size:2.2rem; line-height:45px;font-weight:400; }
#rnd > .rnd_wrap dl dt span {display:block; margin:15px  auto; height:2px; width:255px; background:#fff; }
#rnd > .rnd_wrap dl dd {position:relative;float:left; margin:0;width:100%;clear:both; font-size:1.5rem; line-height:24px;}
/* #rnd > .rnd_wrap > div {position:relative;float:left;width:25%;  height:0; padding-bottom:25%;  cursor:pointer;  opacity:0.95} */
#rnd > .rnd_wrap > div.group_01 {background:#0325a2;border-top:4px solid #fff;}
#rnd > .rnd_wrap > div.group_02 {background:#3a3a3a;border-top:4px solid #fff;}
#rnd > .rnd_wrap > div.group_03 {background:#f22f01;border-top:4px solid #fff;}
#rnd > .rnd_wrap > div.group_04 {background:#262626;border-top:4px solid #fff;}
#rnd > .rnd_wrap > div>.pul {position:absolute; top:25px; padding:0 30px 0; left:0; width:100%; z-index:2; transition:all 0.1s ease-out;color:#fff;}
#rnd > .rnd_wrap > div>.pul .head-t {display:block;font-size:1.65rem; line-height:30px; margin-bottom:20px;font-weight:400;}
#rnd > .rnd_wrap > div>.pul .head-exp {display:block;padding-left:10px;font-size:1.1rem; letter-spacing:0;}
#rnd > .rnd_wrap > div>.symbol { position:absolute; right:30px;bottom:30px; width:67px; height:67px; }
#rnd > .rnd_wrap > div>.symbol img {width:100%;}
 

/* 홍보 */
#pr {background-color:#f7f7f7;margin-top:100px;}
#pr > .pr_wrap {position:relative;width:1280px;margin:0 auto;}
.you_box {position:relative;float:right; width:50%;border:0px solid #f00 ;padding:20px 0 30px;padding-right:0.5%; height:330px; }
.you_box h3 {float:left; width:100%;margin-bottom:10px; font-size:24px; line-height:45px !important; color:#273340;font-weight:400;text-align:center;}
.you_box h3 img {margin-left:10px;vertical-align:middle}
.hong_box { position:relative; float:left; width:50%; background:#f7f7f7;height:100%;padding:20px 0 30px; height:330px; }
.hong_box .btn_more { position:absolute;top:30px; right:2%;}
.hong_box .btn_more a { display:block;width:100%; height:100%;padding:5px; border:1px solid #ddd;font-size:14px; color:#444; border-radius:10px;
-webkit-transition:300ms ease-out 0ms;
-moz-transition:300ms ease-out 0ms;
-ms-transition:300ms ease-out 0ms;
transition:300ms ease-out 0ms;
 }
.hong_box .btn_more a:hover {border:1px solid #0325a2; background:#0325a2; color:#fff; }
.hong_box h3 {float:left; width:100%; font-size:24px; line-height:45px; color:#273340;font-weight:400;text-align:center;}
.hong_box ul {padding-left:0;}
.hong_box ul li {float:left;width:48%;margin:10px 1%;overflow:hidden;}
.hong_box ul li img {width:100%;object-fit:cover;height:200px;transition:all 1s ease; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease;}
.hong_box ul li img:hover {opacity:1; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2);}


/* 배너 */
#banner {padding:40px 0 50px;}
.banner_wrap {position:relative; clear:both;width:1280px; padding:10px 0; margin:0 auto;  }
.banner_wrap * {margin: 0;	padding: 0; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;	box-sizing: border-box;}
.banner_wrap > div {background: linear-gradient(90deg, rgb(31, 91, 171) 0px, rgb(47, 160, 229));transition: all 0.8s ease;-webkit-transition: all 1s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}
.banner_wrap > div:hover {transform: translateY(-15px);}
.banner_wrap > div > div {padding:30px;}
.banner_wrap > div > div h4 {font-size:1.5rem;line-height:1.75rem;color:#1f5bab;font-weight:400;}
.banner_wrap > div > div p {}
.banner_wrap .bann-box1 { position:relative; float:left; width:33%;background: linear-gradient(90deg, rgb(31, 91, 171) 0px, rgb(47, 160, 229));}
.banner_wrap .bann-box1 div { height:200px; background:#fff ; border:1px solid #d5d6d9; cursor:pointer;margin-top:4px; box-shadow: 0 46px 49px -40px , 0 242px 102px -220px;}
.banner_wrap .bann-box2 { position:relative; float:left; width:32%;margin-left:1.5%;background: linear-gradient(90deg, rgb(138, 137, 137) 0px, rgb(201, 204, 206));}
.banner_wrap .bann-box2 div { height:200px; background:#fff ; border:1px solid #d5d6d9; cursor:pointer;margin-top:4px; box-shadow: 0 46px 49px -40px , 0 242px 102px -220px;}
.banner_wrap .bann-box3 { position:relative; float:left; width:32%;margin-left:1.5%;background: linear-gradient(90deg, rgb(241, 160, 11) 0px, rgb(247, 106, 23));}
.banner_wrap .bann-box3 div { height:200px; background:#fff ; border:1px solid #d5d6d9; cursor:pointer;margin-top:4px; box-shadow: 0 46px 49px -40px , 0 242px 102px -220px;}
/* .banner_wrap .bann_inner {position:relative;float:left; width:85%; margin:30px 8%; padding:0 10px} */
/* .banner_wrap .bann_inner h4 {float:left;width:100%; font-size:21px; line-height:24px; color:#444; margin-bottom:20px;} */
/* .banner_wrap .bann_inner p {float:left;width:100%; font-size:15px; line-height:21px; color:#777; font-family: 'NanumBarunGothic';} */
.banner_wrap .bann_inner p {float:left;width:100%; margin-top:15px;padding-left:15px;font-size:1.1rem;line-height:1.65rem; color:#777; font-weight:400;}
.banner_wrap .bann_inner img { position:absolute; right:5%; bottom:10%;}


/* 풋터 */
.family {position:relative;width:1280px;margin:0 auto;padding:8px 0;}
.family img {width:423px;cursor:pointer;}
/* footer {clear:both; position:relative;  min-width:1280px; padding:50px 100px 120px 100px; color:#707070 !important; text-align:left !important; font-weight:400; background-color:#dcdcdc !important;} */
footer {clear:both; position:relative;  min-width:1280px; padding:28px 50px; color:#707070 !important; text-align:left !important; font-weight:400; background-color:#dcdcdc !important;}
footer .footer_wrap {position:relative;width:1280px;margin:0 auto;}

	footer .tel {display:none;}
	footer .logo {position:absolute; top:20px;}
	footer .logo.mobile {display:none;}
	footer .gotop {position:absolute; top:22px; right:100px; width:50px; height:100px; text-align:center;}
	footer .gotop>div {width:1px; height:10px; margin:15px auto; background-color:rgba(255,255,255,.3);}
	footer .gotop>a {
		display:block; margin:0 auto; width:35px; height:35px; padding:10px; background-color:none;
		transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);
		border:1px solid #fff;
	}
	footer .gotop>a:hover {padding:7px; background-color:#c5156c; border:1px solid #c5156c;}
	footer .gotop>a div {width:100%; height:100%; border:2px solid #fff; border-left-color:transparent;  border-bottom-color:transparent;}
	footer address {position:relative; display:block; padding:8px 0 0 220px; font-size:14px;}
	footer address p {margin:0;}
	footer address span {display:inline-block; margin:0 20px 0 0;}
	footer address b {display:inline-block;}
	
	
	
	






































