@charset "utf-8";
#header {position: relative; height:628px}
#header .inner {position:relative}
#header .main-bnnr {position:absolute; top:0; right:0; left:0}
#header .main-bnnr .wrapper { overflow:hidden; position:relative; width:100%; height:628px;
  background-image: url(../images/common/main-bnnr-bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }
#header .main-bnnr .wrapper ul {position:absolute;}
#header .main-bnnr .wrapper ul:after {content:""; display:block; clear:both}
#header .main-bnnr .wrapper span {position: absolute; left:453px; top:270px; font-size:20px; font-weight:bold; text-align: right; text-shadow:1px 1px rgba(0, 0, 0, 0.5); line-height:138%;  color: #fff;}
#header .main-bnnr .wrapper .wow {position:absolute; left:50%; bottom:0px; width:1900px; margin-left:-949px;}

#container .content .contents-area {padding:86px;}
#container .contents-area h3 {font-size:30px; color:#3b3b3b; text-align:center}
#container .contents-area p.des {padding-top:15px; line-height:1.6; font-size:18px; color:#3b3b3b; text-align:center}
#container .contents-area p.des > span {display:block}
#container .contents-area.direct {background:#ffffff;}
#container .contents-area.direct  .main-button {height:179px; padding-top:0px; padding-left:115px; background:url(../images/common/main-con-bg01.png) center;}
#container .contents-area.direct  .main-button ul li {margin-top:-16px;  padding-top:0px; text-align:center}
#container .contents-area.direct  {padding-top:30px; text-align:center}/* 161216 수정 */
#container .contents-area.direct  h3 > span {color:#fff}
#container .contents-area.direct  p.des {padding-top:30px}
#container .contents-area.direct  ul {display:inline-block; margin-top:56px}
#container .contents-area.direct  ul:after {content:""; display:block; clear:both}
#container .contents-area.direct  ul li {float:left; width:137px; margin:0 45px; padding-top:158px; text-align:center}
#container .contents-area.direct  ul li strong {display:block; padding-bottom:9px; font-size:20px}
#container .contents-area.direct  ul li > span {font-size:14px; line-height:1.4}
#container .contents-area.direct  ul li > span > span {display:block; white-space:nowrap}
#container .contents-area.videolist {margin-top:-160px; margin-bottom:-110px; }
#container .contents-area.videolist h3 {text-shadow:1px 1px rgba(0, 0, 0, 0.1)}
#container .contents-area.videolist h3 > span {color:#ed1b2f}
#container .contents-area.videolist p.des {color:#fff; text-shadow:1px px rgba(0, 0, 0, 0.3)}
#container .contents-area.videolist .list-type3 { width:1100px; left:80px; padding-top:70px}
#container .contents-area.videolist .list-type3 ul li {border:1px solid #ccc; width:calc(30% - 31.5px)}
#container .contents-area.videolist .list-type3 > ul > li > .thumbnail {height:150px}
#container .contents-area.videolist .list-type3 > ul > li > .contents {font-size:16px; padding:15px; line-height:150%}
#container .contents-area.videolist .list-type3 > ul > li > .contents > strong {font-weight:bold;}
#container .contents-area.videolist .list-type3 > ul > li > .contents div {margin-top:16px; padding-top:5px; border-top:1px solid #e9e9e9;}
#container .contents-area.videolist .list-type3 > ul > li > .contents div strong {font-size:13px; font-weight:normal; color:#999;}
#container .contents-area.position h3 {text-shadow:1px 1px rgba(0, 0, 0, 0.1)}
#container .contents-area.position h3 > span {color:#fff}
#container .contents-area.position p.des {color:#fff; text-shadow:1px 1px rgba(0, 0, 0, 0.3)}
/* #container .contents-area.position .position-tab {padding-top:42px; text-align:center}
#container .contents-area.position .position-tab ul {display:inline-block}
#container .contents-area.position .position-tab ul:after {content:""; display:block; clear:both}
#container .contents-area.position .position-tab ul li {float:left; width:242px; height:49px; line-height:49px; text-transform:uppercase; border-radius:2em; background:#fe8226}
#container .contents-area.position .position-tab ul li ~ li {margin-left:-6px}
#container .contents-area.position .position-tab ul li a {display:block; height:49px; font-weight:bold; font-size:18px; color:#fff}
#container .contents-area.position .position-tab ul li.on {position:relative; z-index:1; background:#fff}
#container .contents-area.position .position-tab ul li.on a {color:#3b3b3b} */
#container .contents-area.position .list-type ul li a > p {font-weight:normal}
#container .contents-area.position .list-type ul li > span {font-weight:normal; border-color:#cc9b0b}

/* 2022-07-04 GBKIM 수정

old css
#container .contents-area.support .support-list {
    float:left;
    position:relative;
    left:80px; width:960px;
    height:65px;
    margin-top:10px;
    padding-top:20px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    font-size:16px;
}
*/
#container .contents-area.support .support-list {
    float: left;
    position: relative;
    left: 80px;
    width: 960px;
    height: 115px;
    padding-top: 10px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}



#container .contents-area.support .support-list .more {margin-left:50px; width:75px;} /* 190822 공지사항 관련하여 수정/pjy */
#container .contents-area.support ul li {float:left; left:19px; position:relative; } /* 190822 공지사항 관련하여 수정/pjy */
#container .contents-area.support ul li .des {width:750px; padding-left:50px; font-size:16px; font-weight:bold;} /* 190822 공지사항 관련하여  수정/pjy */

#container .contents-area.sponsor {margin-top:0px; height:220px;} /* 190822 관련사이트 관련하여 수정/pjy */
#container .contents-area.sponsor ul li {float:left; position:relative;  width:272px;  left:117px; padding:0px 272px 0px 30px;} /* 190827 관련사이트 관련하여 수정/pjy */
#container .contents-area.sponsor ul li.l3 {float:left; position:relative; left:151px;} /* 190827 관련사이트 관련하여 추가/pjy */
#container .contents-area.sponsor .bg-bottom {position:relative; margin-left:auto; margin-right:auto; display:block;  width:950px; bottom:-68px;}  /* pjy 2004 1줄 수정 */



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}


@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


/*페이드인 아웃*/
	#fadein-out {
	  list-style: none;
	  padding: 50px 20px;
	  width:400px;
	  margin:50px auto;
	  color:#fff;
	}

	#fadein-out li { display: none; }
	h1 { margin-top:150px}