@charset "utf-8";
#mainVisual {position:relative; overflow:hidden}
#mainVisual ul.imgList {position:relative; width:1000%}
#mainVisual ul.imgList:after {clear:both; display:block; content:''}
#mainVisual ul.imgList li {position:relative; float:left}
#mainVisual ul.imgList li img {display:block; width:100%; height:100%}
#mainVisual ul.imgList li .caption {position:absolute; top:27%; left:50%; width:56%; margin-left:-28%; z-index:30}
#mainVisual ul.imgList li .caption.center {text-align:center}
#mainVisual ul.imgList li .caption h2 {display:none; font-family: 'NanumBarunGothicBold'; font-size:40px; line-height:1.75; font-weight:300; text-shadow:1px 1px 3px rgb(43,43,43); color:#fff; margin-bottom:30px}
#mainVisual ul.imgList li .caption h3 {display:none; font-family: 'NanumBarunGothicBold'; font-size:24px; font-weight:300; text-shadow:1px 1px 3px rgb(43,43,43); color:#fff; line-height:1.75}
#mainVisual .control {position:absolute; top:0; display:block; width:150px; height:100%; text-align:center; z-index:50}
#mainVisual .prev {left:0}
#mainVisual .next {right:0}
#mainVisual .control span {position:relative; display:inline-block; width:50px; height:50px; top:50%; margin-top:-25px; color:#fff; text-align:center; line-height:55px; border:1px solid rgba(255,255,255,.6); border-radius:50%}
#mainVisual ol.indicator {position:absolute; bottom:20px; left:0; width:100%; text-align:center; z-index:30}
#mainVisual ol.indicator li {position:relative; display:inline-block; line-height:1; margin:0 5px; padding:10px 0; cursor:pointer}
#mainVisual ol.indicator li .dash {position:relative; width:50px; height:2px; background:rgba(128,128,128,.2)}
#mainVisual ol.indicator li .dash .bar {position:absolute; top:0; left:0; width:0; height:100%; background:#fff}
#visualTab {padding-bottom:20px; border-top:4px solid #ec5545}
#visualTab ol {max-width:1400px; margin:0 auto}
#visualTab ol:after {clear:both; display:block; content:''}
#visualTab ol li {position:relative; float:left; width:25%; padding:20px 30px; text-align:center; cursor:pointer}
#visualTab ol li:after {position:absolute; top:25%; left:0; width:1px; height:75px; content:''; background:#eee}
#visualTab ol li:first-child:after {display:none}
#visualTab ol li h4 {font-weight:500; line-height:1.6; margin-bottom:10px}
#visualTab ol li h4:after {display:block; width:24px; height:1px; margin:10px auto 15px auto; content:''; background:#ddd}
#visualTab ol li p {display:-webkit-box; color:#888; line-height:1.5; height:40px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#visualTab ol li.on h4 {color:#ec5545}
#visualTab ol li.on h4:after {background:#ec5545}
#container .mSection {padding:80px 0}
#container .mSection .inner {max-width:1400px; margin:0 auto; padding:0 50px}
#container .mSection .inner .title {max-width:620px; margin:0 auto; padding:0 15px 50px 15px; text-align:center}
#container .mSection .inner .title h2 {font-size:30px; font-weight:500; line-height:1.2}
#container .mSection .inner .title h2:after {display:block; margin:25px auto; width:40px; height:1px; content:''; background:#555}
#container .mSection .inner .title p {font-size:14px; line-height:1.75; color:#444}
#container .mSection.section1 {background:#f4f4f4}
#container .mSection.section1 ul li {position:relative; text-align:center}
#container .mSection.section1 ul li:before {position:absolute; top:0; left:0; width:1px; height:100%; content:''; background:#e8e5e3}
#container .mSection.section1 ul li:first-child:before {display:none}
#container .mSection.section1 ul li p.icon {width:100px; height:100px; margin:0 auto 20px auto}
#container .mSection.section1 ul li p.icon img {display:block; width:100%}
#container .mSection.section1 ul li h3 {font-size:14px; font-weight:400; margin-bottom:15px}
#container .mSection.section1 ul li p.desc {display:-webkit-box; line-height:1.75; height:45px; margin:0 0 35px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#container .mSection.section1 ul li span {display:inline-block; padding:6px 15px; color:#fff; border-radius:2px; background:#666; transition:all .3s ease}
#container .mSection.section1 ul li:hover span {background:#ec5545}
#container .mSection.section2 {background:url(../images/main_banner.jpg) center top no-repeat; background-size:cover}
#container .mSection.section2 .inner {max-width:720px; margin:0 auto; text-align:center}
#container .mSection.section2 .inner h2 {font-size:30px; font-weight:300; color:#fff; line-height:1.3; margin-bottom:20px}
#container .mSection.section2 .inner:hover span {color:#ec5545; background:#fff}
#container .mSection.section2 .inner span {font-size:16px; display:inline-block; color:#fff; line-height:1; padding:15px 40px; border-radius:2px; background:#ec5545; transition:all .3s ease}
#container .mSection.section3 .inner ul li {vertical-align:top}
#container .mSection.section3 .inner ul li a {display:block}
#container .mSection.section3 .inner ul li p.img {position:relative; margin-bottom:25px; height:320px; overflow:hidden}
#container .mSection.section3 .inner ul li p.img:before {position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; content:''; border:1px solid #ec5545; transition:all .3s ease}
#container .mSection.section3 .inner ul li a:hover p.img:before {border-width:8px}
#container .mSection.section3 .inner ul li p.img img {display:block; width:100%; height:100%}
#container .mSection.section3 .inner ul li .text h4 {font-size:16px; font-weight:400; line-height:1.3; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#container .mSection.section3 .inner ul li .text p {display:-webkit-box; line-height:1.75; height:45px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#container .mSection.section3 .inner ul li .text span {display:inline-block; margin-top:25px; color:#ec5545}
#container .mSection.section3 .inner ul li .item {margin-bottom:35px; overflow:hidden}
#container .mSection.section3 .inner ul li .item p.img {float:left; width:120px; height:80px; margin:0 !important}
#container .mSection.section3 .inner ul li .item .text {margin-left:140px}
#container .mSection.section4 {padding-bottom:0 !important; background:#f4f4f4}
#container .mSection.section4 .tile_wrap {position:relative; overflow:hidden}
#container .mSection.section4 .tile_wrap .tile {position:relative; float:left; width:25%; overflow:hidden }
#container .mSection.section4 .tile_wrap .tile a {display:block}
#container .mSection.section4 .tile_wrap .tile a:before {position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; content:''; border:0px solid #ec5545; transition:all .3s ease; z-index:30}
#container .mSection.section4 .tile_wrap .tile img {display:block; width:100%}
#container .mSection.section4 .tile_wrap .tile .caption {position:absolute; width:100%; top:0px; left:0px; padding:15px; border-left:0px solid #fff; z-index:30; background: linear-gradient(-45deg, rgba(246, 255, 0, .3), rgba(255, 0, 161, .3)) fixed}
#container .mSection.section4 .tile_wrap .tile .caption h4 {max-width:90%; font-size:16px; font-weight:500; color:#fff; line-height:1.5 }
#container .mSection.section4 .tile_wrap .tile .caption p {color:#fff; width:70%; margin-top:10px; opacity:1.0; filter:alpha(opacity='100')}
#container .mSection.section4 .tile_wrap .tile .overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; filter:alpha(opacity='0'); z-index:20; transition:all .3s ease}
/* #container .mSection.section4 .tile_wrap .tile:hover .overlay {opacity:.3; filter:alpha(opacity='30')} */
#container .mSection.section4 .tile_wrap .tile:hover img {transform:scale(1.3); transition:all 0.3s ease;}
#container .mSection.section4 .tile_wrap .tile a:hover:before {border:0px solid #fff; transition:all .3s ease;}


#container .mSection.section5 .container {margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px;}
#container .mSection.section5 .container:before, .container:after {content: " "; display: table;}
#container .mSection.section5 .container:after {clear: both;}


/* ���������� */
.header_bar1 {width:100%; height:100px; background:#fff;}
.header_bar2 {width:100%; height:35px; background:url(../images/po_indi_bg.gif) repeat-x;}
.header_bar2 p {padding-right:5%; text-align:right; line-height:35px; color:#b8b8b8; }

.sub_title_wrap {margin-top: 30px; clear:both;}
.sub_title {float:left; margin-left:5%;}
.sub_title h2 {color:#2d9eba;}
.sub_title_ico {float:right; margin-right:5%; text-align:right;}
.clear {clear:both;}

#container .mSection.guide .inner ul li {vertical-align:top}
#container .mSection.guide .inner ul li a {display:block}
#container .mSection.guide .inner ul li p.img {position:relative; margin-bottom:25px; overflow:hidden;}
#container .mSection.guide .inner ul li p.img:before {position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; content:'';}
#container .mSection.guide .inner ul li a:hover p.img:before {}
#container .mSection.guide .inner ul li p.img img {display:block; margin:0 auto;}

#container .mSection.download {vertical-align:top; margin:0 auto;}
#container .mSection.download a {display:block}
#container .mSection.download .inner ul li {vertical-align:top; margin:0 auto;}
#container .mSection.download .inner ul li p {font-size:16px;}
#container .mSection.download .inner ul li p.img {text-align:center; overflow:hidden;}
#container .mSection.download .inner ul li h2 {display:inline;}
#container .mSection.download .inner span {font-size:16px; display:inline-block; color:#fff; line-height:1; padding:15px 40px; border-radius:2px; border-color:red; background:#ec5545; transition:all .3s ease}
#container .mSection.download .inner span:hover {color:#fff; background:#80d000;}
#container .mSection.download .text_green_bold {font-weight:bold; color:#629c04;}
#container .mSection.download .text_green_normal {color:#629c04;}
#container .mSection.download .text_16c {margin:40px auto; text-align:center;}
#container .mSection.download .text_16c p {font-size:16px;}
#container .mSection.download .text_16c a {font-size:16px;}

#container .mSection.download .text_16c_red {margin:40px auto; text-align:center;}
#container .mSection.download .text_16c_red p {font-size:16px; color:#ec5545;}
#container .mSection.download .text_16c_inline {margin:0 auto; text-align:center;}
#container .mSection.download .text_16c_inline p {font-size:16px;}
#container .mSection.download .text_16c_inline a {font-size:16px; display:inline;}

#container .mSection.point {vertical-align:top; margin:0 auto;}
#container .mSection.point a {display:block}
#container .mSection.point h1 {text-align:center;}
#container .mSection.point .section_a {margin:30px 5%;}
#container .mSection.point .section_a .text_tab10 {margin-left:20px; font-size:16px;}
#container .mSection.point .section_a .space10 {margin-left:20px;}
#container .mSection.point .section_b {margin:30px 5%;}
#container .mSection.point .section_b .text_tab20 {margin-left:20px; font-size:20px;}
#container .mSection.point .section_b .text_tab21 {margin-left:40px; font-size:18px; color:blue;}
#container .mSection.point .section_b .text_tab22 {margin-left:40px; font-size:16px;}
.text_box {display:inline-block; margin-left:40px; font-size:15px; color:red; line-height:1.5; padding:15px 15px; border-radius:6px; border-color:red; background:#f4f4f4; transition:all .3s ease}

.table_a { font-size:16px; color:#333333; padding:10px; text-align:center;}
.table_thl {font-weight:bold; font-size:16px; color:#333333; padding:10px; border-top:2px solid #d4d4d4; border-bottom:1px solid #d4d4d4; border-right:1px solid #d4d4d4;}
.table_thc {font-weight:bold; font-size:16px; color:#333333; padding:10px; border-top:2px solid #d4d4d4; border-bottom:1px solid #d4d4d4; border-right:1px solid #d4d4d4;}
.table_thr {font-weight:bold; font-size:16px; color:#333333; padding:10px; border-top:2px solid #d4d4d4; border-bottom:1px solid #d4d4d4;}
.table_tdl {font-size:16px; color:#333333; padding:10px; border-bottom:1px solid #d4d4d4; border-right:1px solid #d4d4d4;}
.table_tdc {font-size:16px; color:#333333; padding:10px; border-bottom:1px solid #d4d4d4; border-right:1px solid #d4d4d4;}
.table_tdc_red {font-size:16px; color:#ff0000; padding:10px; border-bottom:1px solid #d4d4d4; border-right:1px solid #d4d4d4;}
.table_tdr {font-size:16px; color:#333333; padding:10px; border-bottom:1px solid #d4d4d4;}
.table_tdr p {font-size:16px; color:#333333; }

.content{position: relative; top: 50%; 	transform: translateY(-50%); text-align: center; }
.section{text-align:center;}

#section01 {background-color:#44b3be; background:linear-gradient(45deg, #44b3be, #0054a7);}
#section02, #section03, #section04, #section05, #section06, #section07, #section08, #section09, #section10, #section11, #section12, #section13, #section14, #section15, #section16, #section17, #section18, #section19, #section20, #section21, #section22, #section23 {background-color:#939FAA;}


#fullpage {top:-135px;}
#fullpage .section .intro {text-align:center;}
#fullpage .section .intro h1 {text-align:center; color:white;}
#fullpage .section .intro p {font-size:18px; text-align:center; color:white;}
#fullpage .section .intro p a {font-size:18px; color:yellow;}
#fullpage .section .intro .h100 {height:100px;}
#fullpage .section .intro .h50 {margin-top:50px;}
#fullpage .section .intro .h50 i {font-size:32px; color:red;}
#fullpage .section .intro .h50 p {font-size:20px; color:white;}

#fullpage .section .content{
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
		}

/* ���������� */

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.container-fluid:before, .container-fluid:after {
  content: " ";
  display: table;
}
.container-fluid:after {
  clear: both;
}


/* Owl Override Style */
.owl-carousel .owl-controls,
.owl-carousel-posts .owl-controls {
  margin-top: 0;
}

.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel-posts .owl-controls .owl-nav .owl-next,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
  top: 50%;
  margin-top: -29px;
  z-index: 9999;
  position: absolute;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.owl-carousel-posts .owl-controls .owl-nav .owl-next,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
  top: 24%;
}

.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel-posts .owl-controls .owl-nav .owl-next {
  right: 40px;
}
.owl-carousel .owl-controls .owl-nav .owl-next:hover,
.owl-carousel-posts .owl-controls .owl-nav .owl-next:hover {
  margin-right: -10px;
}

.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
  left: 40px;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev:hover {
  margin-left: -10px;
}

.owl-carousel-posts .owl-controls .owl-nav .owl-next {
  right: -50px;
}
@media screen and (max-width: 768px) {
  .owl-carousel-posts .owl-controls .owl-nav .owl-next {
    right: 0px;
  }
}

.owl-carousel-posts .owl-controls .owl-nav .owl-prev {
  left: -50px;
}
@media screen and (max-width: 768px) {
  .owl-carousel-posts .owl-controls .owl-nav .owl-prev {
    left: 0px;
  }
}

.owl-carousel-posts .owl-controls .owl-nav .owl-next i,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev i,
.owl-carousel-fullwidth .owl-controls .owl-nav .owl-next i,
.owl-carousel-fullwidth .owl-controls .owl-nav .owl-prev i {
  color: #000;
}
.owl-carousel-posts .owl-controls .owl-nav .owl-next:hover i,
.owl-carousel-posts .owl-controls .owl-nav .owl-prev:hover i,
.owl-carousel-fullwidth .owl-controls .owl-nav .owl-next:hover i,
.owl-carousel-fullwidth .owl-controls .owl-nav .owl-prev:hover i {
  color: #000;
}

.owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-next i,
.owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-prev i {
  font-size: 50px;
  color: #fff;
}
.owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-next:hover i,
.owl-carousel-fullwidth.fh5co-light-arrow .owl-controls .owl-nav .owl-prev:hover i {
  color: #fff;
}

.owl-carousel2 .owl-controls .owl-nav .owl-next i,
.owl-carousel2 .owl-controls .owl-nav .owl-prev i {
  font-size: 50px;
  color: rgba(0, 0, 0, 0.5);
}
.owl-carousel2 .owl-controls .owl-nav .owl-next:hover i,
.owl-carousel2 .owl-controls .owl-nav .owl-prev:hover i {
  color: rgba(0, 0, 0, 0.6);
}

.owl-carousel2 .owl-controls .owl-nav .owl-next {
  right: -50px;
}
.owl-carousel2 .owl-controls .owl-nav .owl-next:hover {
  margin-right: -10px;
}

.owl-carousel2 .owl-controls .owl-nav .owl-prev {
  left: -50px;
}
.owl-carousel2 .owl-controls .owl-nav .owl-prev:hover {
  margin-left: -10px;
}

.owl-carousel2 .owl-dots {
  display: none !important;
}
@media screen and (max-width: 992px) {
  .owl-carousel2 .owl-dots {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  .owl-theme .owl-controls .owl-nav {
    display: none;
  }
}

.owl-theme .owl-controls .owl-nav [class*="owl-"] {
  background: none !important;
}
.owl-theme .owl-controls .owl-nav [class*="owl-"] i {
  font-size: 30px;
}
.owl-theme .owl-controls .owl-nav [class*="owl-"] i:hover, .owl-theme .owl-controls .owl-nav [class*="owl-"] i:focus {
  background: none !important;
}
.owl-theme .owl-controls .owl-nav [class*="owl-"]:hover, .owl-theme .owl-controls .owl-nav [class*="owl-"]:focus {
  background: none !important;
}

.owl-theme .owl-dots {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.owl-carousel-fullwidth.owl-theme .owl-dots {
  bottom: 0;
  margin-bottom: 40px;
}

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  border: 2px solid transparent;
}
.owl-theme .owl-dots .owl-dot span:hover {
  background: none;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #fff;
}
/* //owl */
/* �̵������ */
@media screen and (max-width:1280px) {
#visualTab {display:none}
#mainVisual ul.imgList li {height:550px}
#mainVisual ul.imgList li .caption {width:76%; margin-left:-38%; top:30%}
#mainVisual .control {width:100px}
#container .mSection.guide ul.column3 li {width:33%; margin:0 auto;}
}
@media screen and (max-width:1024px) {
#mainVisual ul.imgList li {height:450px}
#container .mSection.section3 .inner ul.news li {width:48%; margin-bottom:40px}
#container .mSection.section3 .inner ul.news li.last {width:100% !important; margin-bottom:0; padding-top:40px; border-top:1px solid #eee}
#container .mSection.section3 .inner ul li .item {float:left; width:46%; margin:0 2% 35px 1%}
#container .mSection.section4 .tile_wrap .tile .caption p {display:none}
#container .mSection.guide ul.column3 li {width:48%;}
#fullpage .section .intro img {width:100%;}
}
@media screen and (max-width:768px) {
#mainVisual ul.imgList li {height:400px}
#mainVisual ul.imgList li .caption {width:90%; margin-left:-35%}
#mainVisual ul.imgList li .caption h2 {font-size:27px; margin-bottom:20px}
#mainVisual ul.imgList li .caption h3 {font-size:16px}
#mainVisual .control {display:none}
#container .mSection {padding:50px 0}
#container .mSection .inner .title h2 {font-size:21px}
#container .mSection .inner .title h2:after {width:20px; height:2px; margin:10px auto}
#container .mSection .inner .title p {font-size:14px}
#container .mSection.section1 ul li h3 {font-size:14px}
#container .mSection.section1 ul li p.desc {display:none}
#container .mSection.section1 ul li span {padding:5px 14px; font-size:10px}
#container .mSection.section2 .inner h2 {font-size:16px; margin-bottom:15px}
#container .mSection.section2 .inner span {font-size:14px; font-weight:500; padding:8px 12px}
#container .mSection.section3 .inner ul.news li {width:100% !important; margin:0; padding:40px 0; border-bottom:1px solid #eee}
#container .mSection.section3 .inner ul.news li.last {padding-bottom:0; border-bottom:none}
#container .mSection.section3 .inner ul li .item {float:none; width:100%; margin:0 0 35px 0}
#container .mSection.section3 .inner ul li .text h4 {font-size:16px}
#container .mSection.section3 .inner ul li .text p {font-size:14px; height:auto}
#container .mSection.section3 .inner ul li .text span {margin-top:15px}
#container .mSection.section3 .inner ul li p.img {height:auto}
#container .mSection.section4 .tile_wrap .tile {width:50%}
/*  #container .mSection.section4 .tile_wrap .tile .caption {border-width:1px} */
#container .mSection.section4 .tile_wrap .tile .caption h4 {max-width:90%; font-size:16px; word-break:keep-all}
#container .mSection.guide ul.column3 li {width:96%;}
}
@media screen and (max-width:640px) {
#mainVisual ul.imgList li {height:300px !important}
#container .mSection .inner {padding:0 30px}
#container .mSection .inner .title {padding:0 0 30px 0}
#container .mSection .inner .title p br {display:none}
#container .mSection.section1 ul li p.icon {width:45%; height:45%}
#container .mSection.section3 .inner ul li .text h4 {font-size:16px !important}
#container .mSection.section3 .inner ul li .text p {font-size:14px !important; line-height:1.5}
#container .mSection.section3 .inner ul li .text span {font-size:14px !important; font-weight:500}
#container .mSection.section3 .inner ul li .item p.img {width:22%; height:auto !important}
#container .mSection.section3 .inner ul li .item .text {margin-left:28%}

}
@media screen and (max-width:480px) {
#mainVisual ul.imgList li {height:250px !important}
#container .mSection.section2 .inner h2 {font-size:16px; font-weight:400; line-height:1.5}
#container .mSection.section2 .inner h2 br {display:none}

.sub_title_ico {display:none}
}