@charset "utf-8";

#header,
#header img.logo,
#header p,
#container,
#contents .appli_infor,
#contents .appli_infor .title,
#contents .appli_infor ul.date li,
#contents .appli_infor ul.date li span,
#contents .link_bn,
#contents .link_bn li,
#contents .link_bn li a,
#contents .appli_infor ul.site_link li,
#contents .appli_infor ul.site_link li a,
#footer {
	transition : all 0.5s ease;
    -webkit-transition : all 0.5s ease;	
}



body {background:#100000 url(/img/intro/type1/wrap_bg.jpg) no-repeat center top; background-size:cover;}
#header {width:100%; max-width:1300px; margin:0 auto; position:relative; z-index:10; padding:160px 0 55px 0;}
#header img.logo {display:block; margin:0 auto 20px auto;}
#header p {font-family:"buri"; text-align:center; color:#fff; margin:0; font-size:22px; line-height:28px; margin-top:10px;
-moz-opacity:0.7; -ms-opacity:0.7; -o-opacity:0.7; -webkit-opacity:0.7; opacity:0.7; filter:alpha(opacity=70);}

#container {width:100%; max-width:1300px; margin:0 auto; position:relative; z-index:10;}
#contents {position:relative; width:100%; font-family:"Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}
#contents .appli_infor {width:auto; height:auto; min-height:350px; position:relative; background:#e3e3e3 url(/img/intro/type1/appli_infor_bg.jpg) no-repeat left bottom; margin:0 24% 0 0; padding:50px 3% 50px 16%;}
#contents .appli_infor .title {width:70px; height:138px; padding:16px 20px 0 20px; text-align:center; background:url(/img/intro/type1/appli_infor_titlebg.png) no-repeat left top; position:absolute; left:3%; top:-3px; margin:0; color:#fff; font-size:27px; line-height:32px;
font-family:"ulR", "Nanum Square", "Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}
#contents .appli_infor .title span {display:block; font-size:20px; line-height:26px; font-weight:600;
-moz-opacity:0.5; -ms-opacity:0.5; -o-opacity:0.5; -webkit-opacity:0.5; opacity:0.5; filter:alpha(opacity=50);}
#contents .appli_infor h3 {font-size:28px; line-height:32px; font-weight:600; color:#1e1e1e; margin:0 0 30px 0; background:url(/img/intro/type1/h3_bul.png) no-repeat left 4px; padding:0 0 0 34px;}
#contents .appli_infor ul.date {margin:0 0 50px 34px;}
#contents .appli_infor ul.date li {margin-top:20px; font-size:18px; line-height:24px; padding:0 0 0 18px; background:url(/img/intro/type1/appli_infor_bul2.png) no-repeat left 6px;}
#contents .appli_infor ul.date li:first-child {margin-top:0;}
#contents .appli_infor ul.site_link {width:100%; height:auto; text-align:center;}
#contents .appli_infor ul.site_link li {display:inline-block; vertical-align:top; margin:0 10px;}
#contents .appli_infor ul.site_link li a {display:block; font-size:15px;}
#contents .appli_infor ul.site_link li a span {display:block; width:230px; padding:15px 0; border:1px solid #fff; margin:0 0 10px 0;}
#contents .appli_infor ul.site_link li a span img {display:block; margin:0 auto;}
#contents .link_bn {position:absolute; right:0; top:0; width:24%;}
#contents .link_bn li {height:225px;}
#contents .link_bn li a {display:block; height:160px; padding:65px 0 0 0; background:#36344a url(/img/intro/type1/link_bn_bg02.jpg) no-repeat left top; text-align:center; color:#fff; font-size:24px; line-height:30px; text-decoration:none;
font-family:"ulR", "Nanum Square", "Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}
#contents .link_bn li a span {display:block; margin:20px auto 0 auto; font-size:17px; line-height:22px; width:120px; border:2px solid #9b9aa5; padding:10px 0; overflow:hidden;
transition : all 0.3s ease; -webkit-transition : all 0.3s ease;
-moz-border-radius:25px; -ms-border-radius:25px; -o-border-radius:25px; -webkit-border-radius:25px; border-radius:25px;}
#contents .link_bn li:first-child a {background:#009b9d url(/img/intro/type1/link_bn_bg01.jpg) no-repeat left bottom;}
#contents .link_bn li:first-child a span {border:2px solid #77c9cb;}
#contents .link_bn li a:hover span, #contents .link_bn li a:active span {padding:10px 10px;}
#contents .homepage_btn {text-align:center; margin:40px 0 0 0;}
#contents .homepage_btn a {display:inline-block; vertical-align:top; margin:0 10px; color:#fff; background:#ec3a3a url(/img/intro/type1/homepage_btn_ico.png) no-repeat 88% 50%; font-size:28px; line-height:36px; padding:18px 90px 20px 30px; overflow:hidden; text-decoration:none;
transition : all 0.3s ease; -webkit-transition : all 0.3s ease;
font-family:"ulR", "Nanum Square", "Nanum Barun Gothic", "Nanum Gothic", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;
-moz-border-radius:38px; -ms-border-radius:38px; -o-border-radius:38px; -webkit-border-radius:38px; border-radius:38px;}
#contents .homepage_btn a:hover, #contents .homepage_btn a:active {background-position:92% 50%;}

#footer {width:100%; max-width:1300px; margin:0 auto; position:relative; z-index:10; padding:35px 0 40px 0;}
#footer p {margin:0; text-align:center; color:#908d8d;}

.pattern_bg {display:block; position:absolute; width:100%; height:100%; background:url(/img/intro/type1/pattern_bg.png) repeat center top; left:0; top:0; z-index:1;
-moz-opacity:0.3; -ms-opacity:0.3; -o-opacity:0.3; -webkit-opacity:0.3; opacity:0.3; filter:alpha(opacity=30); display:none;}



/********************************************** media css **********************************************/
@media screen and (max-width: 1370px){
#header {width:96%; max-width:96%;}	
#container {width:96%; max-width:96%;}
#footer {width:96%; max-width:96%;}
}


@media screen and (max-width: 1023px){
#header {padding:100px 0 45px 0;}
#header img.logo {width:433px;}
#header p {font-size:20px; line-height:26px;}
#contents .appli_infor {margin:0; padding:40px 4% 40px 20%; min-height:10px;}	
#contents .appli_infor .title {width:60px; height:116px; padding:10px 15px 0 15px; background-size:100% auto; font-size:22px; line-height:26px;}
#contents .appli_infor .title span {font-size:18px; line-height:24px;}
#contents .link_bn {position:relative; right:auto; top:auto; width:100%;}
#contents .link_bn:after {content:""; display:block; clear:both;}
#contents .link_bn li {float:left; width:50%; height:auto;}
#contents .link_bn li a {padding:40px 0; height:auto;}
#contents .homepage_btn {margin:30px 0 0 0;}
#contents .homepage_btn a {font-size:26px; line-height:34px; padding:16px 90px 18px 30px;}
}


@media screen and (max-width: 840px){
#header {padding:65px 0 40px 0;}	
#header img.logo {width:333px;}
#header p {font-size:18px; line-height:24px;}
#contents .appli_infor ul.site_link li a span {width:200px; padding:10px 0;}
#contents .homepage_btn a {font-size:22px; line-height:30px; padding:16px 80px 18px 30px;}
}


@media screen and (max-width: 640px){
#header {padding:45px 0 35px 0;}	
#header img.logo {width:283px;}	
#header p {font-size:16px; line-height:22px;}	
#contents .appli_infor {padding:30px 4% 30px 4%; background:#e3e3e3;}	
#contents .appli_infor .title {left:auto; right:4%; width:45px; height:100px; padding:5px 15px 0 15px; font-size:20px; line-height:24px;}
#contents .appli_infor h3 {font-size:24px; line-height:28px; background-position:left top; margin-right:90px; margin-bottom:15px;}
#contents .appli_infor ul.date {margin-bottom:30px;}
#contents .homepage_btn a {font-size:20px; line-height:28px; padding:14px 75px 16px 25px;}
#contents .link_bn li a {font-size:22px; line-height:28px;}
#contents .homepage_btn a {margin:0 5px;}
}


@media screen and (max-width: 540px){
#contents .appli_infor ul.site_link li {margin:0 5px;}	
#contents .appli_infor ul.site_link li a span {width:180px;}	
#contents .homepage_btn a {display:block; margin:10px auto 0 auto; width:120px;}	
}


@media screen and (max-width: 480px){
#header {padding:35px 0 30px 0;}	
#header img.logo {width:253px;}
#contents .appli_infor {padding:30px 4% 30px 4%;}	
#contents .appli_infor .title {left:auto; right:4%; width:45px; height:100px; padding:5px 15px 0 15px; font-size:20px; line-height:24px;}
#contents .link_bn li {float:none; width:auto;}
#contents .link_bn li a {padding:30px 0; font-size:20px; line-height:26px;}
#contents .link_bn li a span {margin:15px auto 0 auto;}
#contents .appli_infor ul.site_link li a span {width:155px;}
}


@media screen and (max-width: 400px){
#contents .appli_infor .title {width:45px; height:89px; padding:2px 10px 0 10px; font-size:18px; line-height:22px;}
#contents .appli_infor .title span {font-size:16px; line-height:22px;}
#contents .appli_infor ul.site_link li {display:block; margin-top:20px;}
#contents .appli_infor ul.site_link li:first-child {margin-top:0;}
#contents .appli_infor ul.site_link li a {display:inline-block;}
#contents .appli_infor ul.site_link li a span {margin:0 auto 10px auto; width:180px;}
}