@charset "utf-8";

#intro h1.logo,
#intro h1.logo img,
#intro .title,
#intro .title span,
#intro .search,
#intro .search input[type="text"],
#intro .search input[type="submit"],
#intro .site_link li a,
#intro .banner ul li a,
#intro .go_btn
{transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}

body {font-family:"맑은고딕","Malgun Gothic","돋움",Dotum,Helvetica,Verdana,Arial,sans-serif; font-size:15px; line-height:19px;}
html, body {height:100%; overflow:hidden;}
input[type="text"] {font-family:"맑은고딕","Malgun Gothic","돋움",Dotum,Helvetica,Verdana,Arial,sans-serif;}
#intro {background:#4f66a8;
background: -webkit-linear-gradient(right, #4f66a8 , #17285d);
background: linear-gradient(to left, #4f66a8 , #17285d);}
#intro #wrap {position:relative; height:100%;}
#intro h1.logo {position:absolute; right:3%; top:45px; z-index:10;}
#intro .top {display:table; table-layout:fixed; width:100%; height:100%; text-align:center; padding-bottom:88px; box-sizing:border-box; overflow:hidden; position:relative;}
#intro .top .align {display:table-cell; vertical-align:middle; color:#fff;}
#intro .top .align:before {content:""; display:block; width:365px; height:563px; background:url(../../images/intro/intro_bg_l.png) no-repeat center 50%; position:absolute; left:50%; top:50%; margin-top:-262px; margin-left:-890px;}
#intro .top .align:after {content:""; display:block; width:550px; height:845px; background:url(../../images/intro/intro_bg_r.png) no-repeat center 50%; position:absolute; right:50%; top:50%; margin-top:-412px; margin-right:-950px;}
#intro .title {font-size:50px; line-height:58px; word-break:keep-all; letter-spacing:-6px; transform:skewX(-10deg); -webkit-transform:skewX(-10deg); max-width:1210px; margin:0 auto 60px auto;}
#intro .title em {font-style:normal;}
#intro .title span {display:block; font-family:Georgia, "Times New Roman", Times, serif; font-size:28px; line-height:28px; letter-spacing:0.5px; /*color:#989eb5;*/color:rgba(255,255,255,0.6); margin-top:22px;}
#intro .title span strong {color:#f48f3d;}
#intro .cont {max-width:740px; margin:0 auto;}
#intro .site_link {width:100%;}
#intro .site_link:after {content:""; display:block; clear:both;}
#intro .site_link li {float:left; width:25%; box-sizing:border-box; padding:3px;}
#intro .site_link li a {display:block; height: 66px; box-sizing:border-box; border-radius:7px; -webkit-border-radius:7px; line-height:30px; padding:15px 10px; border:1px solid rgba(128,141,178,0.2); background:rgba(0,0,0,0.1); color:#bfc3d1;}
#intro .site_link li a span {display:inline-block; padding:1px 0 0 38px;}
#intro .site_link li.bn_01 a span em{ font-style:normal}
#intro .site_link li.bn_01 a span {background-image:url(../../images/intro/site_link_ico1.png);}
#intro .site_link li.bn_02 a span {background-image:url(../../images/intro/site_link_ico2.png);}
#intro .site_link li.bn_03 a span {background-image:url(../../images/intro/site_link_ico3.png);}
#intro .site_link li.bn_04 a{background-color: #057ed2; color:#fff}
#intro .site_link li.bn_04 a span {/*background-image:url(../../images/intro/site_link_ico4.png);*/ padding:1px 0 0 0; margin-top: -20px;} 
#intro .site_link li.bn_04 img{ position: relative; top: 15px;}
#intro .site_link li.bn_05 a span {background-image:url(../../images/intro/site_link_ico5.png);}
#intro .site_link li.bn_06 a span {background-image:url(../../images/intro/site_link_ico6.png); padding:0 0 0 28px;}
#intro .site_link li.bn_07 a span {background-image:url(../../images/intro/site_link_ico7.png);}
#intro .site_link li.bn_08 a span {background-image:url(../../images/intro/site_link_ico8.png);}
#intro .site_link li a span {background-repeat:no-repeat; background-position:left top;/* background-size:auto 100%;*/}
#intro .site_link li a:hover {background:rgba(0,0,0,0.3); border:1px solid rgba(0,0,0,0.1);}
#intro .site_link li.bn_04 a:hover{background-color:#005fb8;}
#intro .search {background:#fff; margin:0 4px; margin-top:25px; text-align:left; box-sizing:border-box; position:relative; padding-right:60px; height:60px; border-radius:7px; -webkit-border-radius:7px;}
#intro .search input[type="text"] {border:0; background:none; display:block; width:100%; font-size:20px; height:60px; line-height:60px; box-sizing:border-box; padding:0 20px;}
#intro .search input[type="submit"] {display:block; padding:0; border:0; width:60px; height:60px; position:absolute; right:0; top:0; background:url(../../images/intro/search_ico.png) no-repeat center 50%; background-size:auto 100%; overflow:hidden; text-indent:-9999px;}
#intro .go_btn {display:inline-block; vertical-align:top; color:#fff; font-size:20px; line-height:24px; border:2px solid #fff; padding:17px 25px; margin-top:100px;}
#intro .go_btn:hover {border:2px solid #fd9d4f; }
#intro .go_btn span {display:inline-block; vertical-align:top; line-height:24px; padding:0 45px 0 0; position:relative;}
#intro .go_btn span:after {content:""; display:block; width:27px; height:12px; background:url(../../images/intro/go_btn_arrow.png) no-repeat center top; position:absolute; right:0; top:50%; margin-top:-6px;
animation:ani 0.5s infinite alternate both;
-webkit-animation:ani 0.5s infinite alternate both;}
@keyframes ani {
0% {right:5px;}	
100% {right:-10px;}
}
@-webkit-keyframes ani {
0% {right:5px;}	
100% {right:-10px;}
}
#intro .banner {background:#fff; width:100%; position:fixed; left:0; bottom:0;}
#intro .banner ul {max-width:1210px; margin:0 auto; padding:30px 0;}
#intro .banner ul:after {content:""; display:block; clear:both;}
#intro .banner ul li {float:left; width:20%; box-sizing:border-box; padding:0 8px;}
#intro .banner ul li p {display:table; width:100%; height:50px; text-align:center; margin:0;}
#intro .banner ul li a {display:table-cell; border:5px solid #f5f5f5; vertical-align:middle; width:100%; box-sizing:border-box; padding:0;}
#intro .banner ul li a:hover {border:5px solid #ddd;}
#intro .banner ul li img {display:block; width:100%; margin:0 auto;}



/******************** Media Quary ********************/


@media screen and (max-width: 1640px){

#intro .top .align:before{ left:-3%; margin-left:0; transition:all 0.3s ease-in;width:296px ; height:458px; background-size:contain; margin-top:-230px}
}


@media screen and (max-width: 1380px){
#intro .top .align:before{ opacity:0}
}



@media screen and (max-width: 1290px){
#intro .title {font-size:46px;}	
#intro .title span {font-size:26px;}
#intro .banner {box-sizing:border-box; padding:0 2%;}



}



@media screen and (max-width: 1024px){
#intro #wrap {padding:20px 2% 40px 2%; box-sizing:border-box; height:auto;}
#intro h1.logo {position:relative; left:10px; top:auto; width:145px; margin:0; margin-bottom:50px;}
#intro h1.logo img {height:16px;}	
#intro .title {font-size:40px; line-height:50px; letter-spacing:-3px; margin-bottom:50px;}	
#intro .title em {display:block; line-height:50px;}
#intro .title span {font-size:22px; display:none;}
#intro .top {padding-bottom:0;}	
#intro .search {height:50px; padding-right:50px;}
#intro .search input[type="text"] {height:50px; line-height:50px; font-size:18px;}	
#intro .search input[type="submit"] {height:50px; width:50px;}
#intro .go_btn {font-size:18px; margin-top:80px; padding:15px 25px;}	
#intro .banner {display:none;}	
}

@media screen and (max-width: 840px){
body{font-family: "Apple Gothic","Apple SD Gothic Neo", "Malgun Gothic", sans-serif;}
#intro {/*background:#2461bd;*/}	

#intro .title {font-size:37px; line-height:1.3; margin-bottom:40px; transform:none; letter-spacing:-1px}	
#intro .title em {line-height:46px; color:#ffd131;}	
#intro .top,
#intro .top .align {display:block; height:auto;}
#intro .top .align:before,
#intro .top .align:after {display:none;}
#intro .cont .scroll {}
#intro .search {height:60px; padding:5px 50px 5px 10px;}
#intro .search input[type="text"] {padding:0 10px;}
#intro .search input[type="submit"] {top:3px; background:url(../../images/intro/search_ico.svg) no-repeat center 50%; background-size:auto 100%;}
#intro .go_btn {position:fixed; bottom:40px; width:96%;left:2%; margin-left:0;font-size:26px; border:none; box-sizing:border-box}
#intro .go_btn:hover{ background:#314172; border:none}

#intro .site_link{ width:auto; margin:20px 0 30px}
#intro .site_link li{ padding:3px}
#intro .site_link li a{padding:13px 4px ; font-size:16px; border:none}
#intro .site_link li a span,#intro .site_link li.bn_04 a span,#intro .site_link li.bn_06 a span{ padding:32px 0 0 0;}
#intro .site_link li a span{ background-position:center 5px; background-size:40%; opacity:0.7}
#intro .site_link li.bn_01 a span{ background-position:center 3px; background-size:38%}
#intro .site_link li.bn_04 a{ background-position:center 17px; background-size:19%}
#intro .site_link li.bn_04 a:hover{ background-position:center 17px; border: none; }
#intro .site_link li.bn_04 a span{ /*background-position:center 3px; background-size:37%*/}
#intro .site_link li.bn_06 a span{ background-position:center 3px; background-size:29%}
#intro .site_link li.bn_07 a span{ background-position:center 4px; background-size:42%}
#intro .site_link li.bn_01 a span em{ display:none}
#intro .site_link li a:hover{ border:none}


}

@media screen and (max-width: 767px){

	
#intro #wrap {padding:20px 2% 40px 2%; box-sizing:border-box; height:auto;}
#intro h1.logo{ margin-bottom:40px}
#intro .title {font-size:26px; line-height:1; margin-bottom:20px; transform :none;letter-spacing:-1px}	
#intro .title em {line-height:38px; color:#ffd131;}
#intro .top,
#intro .top .align {display:block; height:auto;}
#intro .top .align:before,
#intro .top .align:after {display:none;}
#intro .cont .scroll {}
#intro .search {height:60px; padding:5px 50px 5px 10px;}
#intro .search input[type="text"] {padding:0 10px;}
#intro .search input[type="submit"] {top:3px; background:url(../../images/intro/search_ico.svg) no-repeat center 50%; background-size:auto 100%;}
#intro .go_btn {bottom:30px;font-size:19px;}
#intro .go_btn:hover{ background:#314172; border:none}

#intro .site_link{ width:auto}
#intro .site_link li{ padding:2px}
#intro .site_link li a{padding:5px 4px 3px; font-size:12px; border:none}
#intro .site_link li a span,#intro .site_link li.bn_04 a span,#intro .site_link li.bn_06 a span{ padding:24px 0 0 0;}
#intro .site_link li.bn_04 a span{ margin-top: -33px;}

}

@media screen and (max-width: 500px){
    #intro .site_link li.bn_04 img{ width: 25px; top: 7px;}
    #intro .site_link li.bn_04 a span{ margin-top: -11px; }
}


@media screen and (max-width: 350px){
#intro .title {font-size:25px;}
#intro .go_btn {font-size:16px; }
}

@media screen and (orientation:landscape) and (max-width: 1024px){
#intro #wrap {height:auto; padding:20px 2% 40px 2%; }
	
#intro .top,
#intro .top .align {display:block;}
#intro .go_btn {bottom:0; position:relative;  margin-top:50px;}
}

.etri-c{position: absolute;display: block;right: 15px;bottom: 138px;}
@media screen and (max-width: 1024px){
.etri-c{ position:fixed}
.etri-c img{ width:191px; height:150px}
}