@charset "utf-8";
/*-------------------------------------------------
Author : JMKIM
Create date : 2017. 02. 08

2018-06-12 siin
-------------------------------------------------*/

#main {background:#edf2f9; border-bottom:1px solid #e9ecf2;}
#main .container {padding: 20px 0;}


#visual {float: left; width: 773px; height: 223px; position: relative; margin: 0 9px 10px 0; z-index: 0; overflow: hidden;}
#visual .slider {border:1px solid #dee3eb;}
#visual .slider li {}
#visual .slider li a {display: block; width: 100%; height: 223px; background-position:center; background-repeat:no-repeat; background-size:cover; padding: 30px 28px; overflow: hidden;}
#visual .slider li .desc {font-weight:700; font-size:1.333rem; position: relative; padding-top: 20px;}
#visual .slider li .desc::before {content:''; width: 0; height: 1px; background:#d80700; position: absolute; top: 0; left: 0; transition:width .3s ease-in-out; -webkit-transition:width .3s ease-in-out;}
#visual .slider li.active .desc::before {width:31px;}
#visual .slider li .desc em {color:#d80700;}
#visual .slider li .desc p {opacity:0; transform:translateY(10px); -webkit-transform:translateY(10px); transition: .3s linear .3s; -webkit-transition: .3s linear .3s;}
#visual .slider li.active .desc p {opacity:1; transform: translateY(0); -webkit-transform: translateY(0);}
#visual .slider li.active .desc p + p {transition-delay:.6s; -webkit-transition-delay:.6s;}

#visual .bx-controls {position: absolute; right:28px; bottom: 37px; z-index: 60;}
#visual .bx-controls .bx-pager {display: inline-block; vertical-align: middle;}
#visual .bx-controls .bx-pager .bx-pager-item {display: inline-block; margin: 0 5px;}
#visual .bx-controls .bx-pager a {color:transparent; display: block; width: 11px; height: 11px; background:#fff; border-radius:50%; border:3px solid #fff; margin-top: 8px; font-size:0;}
#visual .bx-controls .bx-pager a.active {background:transparent;}
#visual .bx-controls .bx-controls-auto {display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: 12px;}
#visual .bx-controls .bx-controls-auto a {display:block; position: relative; color:transparent; width: 15px; height: 15px; font-size:0;}
#visual .bx-controls .bx-controls-auto .bx-stop::before {content:''; width: 3px; height: 11px; position: absolute; top: 1px; left: 0; background:#fff;}
#visual .bx-controls .bx-controls-auto .bx-stop::after {content:''; width: 3px; height: 11px; position: absolute; top: 1px; left: 7px; background:#fff;}
#visual .bx-controls .bx-controls-auto .bx-start::before {content:''; width: 0; height: 0; border-top: 7px solid transparent; border-left: 11px solid #fff; border-bottom: 7px solid transparent; position: absolute; top: 0; left: 0;}


.section1 {float: left; width: 292px; border:1px solid #dee3eb; height: 223px; position: relative; margin-bottom: 10px; overflow: hidden;}
.section1 .title {display: block; padding: 9px 20px; font-size:1.133rem; color:#000; background:#d2e4f5;}
.section1 .slider {}
.section1 .slider li {}
.section1 .slider li a {display: block; background-position:center; background-repeat:no-repeat; background-size:cover; width: 100%; height: 182px; position: relative; text-align: center;}
.section1 .slider li a p {width: 100%; color:#fff; font-size:0.933rem; display: inline-block; position: absolute; bottom: 0; left: 0; padding: 10px 13px; letter-spacing: -1px; background:rgba(0,0,0,.5);}

.section1 .bx-controls {position: absolute; top: 10px; right: 0;}
.section1 .bx-controls .bx-controls-direction a {display: inline-block; width: 25px; height: 25px; color:transparent; position: relative; font-size:0; vertical-align: top;}
.section1 .bx-controls .bx-controls-direction a.bx-prev::before, .section1 .bx-controls .bx-controls-direction a.bx-next::before {content:''; width: 10px; height: 10px; border:2px solid #000; border-width:0 0 2px 2px; position: absolute; top: 7px;}
.section1 .bx-controls .bx-controls-direction a.bx-prev::before {transform:rotate(45deg); -webkit-transform:rotate(45deg); left: 9px;}
.section1 .bx-controls .bx-controls-direction a.bx-next::before {transform:rotate(225deg); -webkit-transform:rotate(225deg); left: 5px;}


.section2 {float: left; width: 200px; height: 272px; background:#005eac; text-align:center; position: relative; margin-right: 10px; margin-bottom: 10px; overflow:hidden;}
.section2 .title {color:#fff; display: block; padding: 14px 9px; font-size:1.067rem;}
.section2 .slider a {display: block;}
.section2 .slider a img {display: block; margin: 0 auto;}
.section2 .slider a .desc {color:#feee63; display: inline-block; font-size:0.933rem; padding-top: 15px; letter-spacing:-1px; width: 150px;}

.section2 .bx-controls {position: absolute; top: 50%; left: 0; width: 100%; height: 0;}
.section2 .bx-controls .bx-controls-direction a {display: inline-block; width: 25px; height: 25px; color:transparent; position: relative; font-size:0;}
.section2 .bx-controls .bx-controls-direction a.bx-prev::before, .section2 .bx-controls .bx-controls-direction a.bx-next::before {content:''; width: 10px; height: 10px; border:2px solid #fff; border-width:0 0 2px 2px; position: absolute; top: 7px;}
.section2 .bx-controls .bx-controls-direction a.bx-prev {float: left;}
.section2 .bx-controls .bx-controls-direction a.bx-next {float: right;}
.section2 .bx-controls .bx-controls-direction a.bx-prev::before { transform:rotate(45deg); -webkit-transform:rotate(45deg); left: 9px;}
.section2 .bx-controls .bx-controls-direction a.bx-next::before { transform:rotate(225deg); -webkit-transform:rotate(225deg); left: 5px;}


.section3 {float: left; width: 563px; height: 272px; border:1px solid #dee3eb; position: relative; background:#fff url(/plani/images/korean/main/bg_section3.gif) 290px 70px no-repeat; margin-right: 10px; margin-bottom: 10px;}
.section3::before {content:''; width: 100%; height: 1px; background:#dee3eb; position: absolute; top: 50px; left: 0;}
.section3 .tab-menu {}
.section3 .tab-menu > li {display: inline-block; padding: 0 13px;}
.section3 .tab-menu > li:first-child {margin-left: 15px;}
.section3 .tab-menu > li > a.subject {display: block; padding: 15px 0; font-size:1.067rem; color:#6a6f75; font-weight: 700; height: 50px; position: relative; transition:.3s ease; -webkit-transition:.3s ease;}
.section3 .tab-menu > li:hover > a.subject, .section3 .tab-menu > li.active > a.subject {color:#000;}
.section3 .tab-menu > li > a.subject::before {content:''; width: 100%; height: 2px; background:#e5271e; position: absolute; bottom: 0; left: 0; opacity: 0; transition:.3s ease; -webkit-transition:.3s ease;}
.section3 .tab-menu > li.active > a.subject::before {opacity: 1;}

.section3 .tab-menu > li .depth2 {position: absolute; display: none; left: 0; top: 50px; width: 100%; padding: 25px;}
.section3 .tab-menu > li.active .depth2 {display: block;}

.section3 .tab-menu .depth2 > li {}
.section3 .tab-menu .depth2 > li a {display: inline-block; color:#747474; position: relative; padding-bottom: 5px; padding-left: 10px; margin-bottom: 7px;}
.section3 .tab-menu .depth2 > li:hover a {color:#000;}
.section3 .tab-menu .depth2 > li a::before {content:''; width: 5px; height: 5px; border-radius:50%; background:#4a4f59; position: absolute; top: 5px; left: 0; transition:.3s ease; -webkit-transition:.3s ease;}
.section3 .tab-menu .depth2 > li:hover a::before {background:#e5271e;}
.section3 .tab-menu .depth2 > li a::after {content:''; width: calc(100% - 11px); height: 1px; background:#515151; position: absolute; bottom: 0; left: 11px; opacity:0; transition:.3s ease; -webkit-transition:.3s ease;}
.section3 .tab-menu .depth2 > li:hover a::after {opacity:1;}
.section3 .tab-menu .depth2 > li .date {float: right;}

.section3 .tab-menu .more {display: block; width: 50px; height: 50px; position: absolute; top: 0; right: 0; border-left:1px solid #dee3eb; font-size:0; display: none;}
.section3 .tab-menu .more::before {content:'+'; font-size:1.667rem; color:#8a8a8a; position: absolute; top: 9px; left: 17px;}
.section3 .tab-menu li.active .more {display: block;}


.section4 {float: left; width: 292px; height: 144px; border:1px solid #e0be3a; position: relative; background:#f1c83b url(/plani/images/korean/main/bg_section4.png) right top no-repeat; margin-bottom: 10px;}
.section4 a {display: block; width: inherit; height:inherit; padding: 20px;}
.section4 a .title {font-size:1.067rem; color:#000; display: block; margin-bottom: 10px;}
.section4 a p {font-size:0.933rem; color:#835916; display: block; margin-bottom: 10px;}
.section4 a span {color:#000; font-size:0.933rem; font-weight: 700; padding-right: 11px; display: inline-block; position: relative;}
.section4 a span::after {content:''; width: 0; height: 0; border-top: 6px solid transparent; border-left: 6px solid #000; border-bottom: 5px solid transparent; position: absolute; top: 2px; right: 0; }


.section5 {float: left; width: 292px; height: 66px; border:1px solid #11a592; position: relative; background:#12ae96;}
.section5 .link-list {width: 100%;}
.section5 .link-list li {float: left; width: 50%;}
.section5 .link-list li a {display: block; position: relative; padding: 15px 12px 10px 14px;}
.section5 .link-list li a p {padding-left: 37px; background:url(/plani/images/korean/main/bg_section5_left.gif) 0 center no-repeat; font-weight: 700; font-size:0.933rem; color:#ffed1f; position: relative; letter-spacing: -1px;}
.section5 .link-list li:last-child a p {background:url(/plani/images/korean/main/bg_section5_right.gif) 0 center no-repeat;}
.section5 .link-list li:first-child a p::after {content:''; width: 1px; height: 100%; background:#148c7a; position: absolute; top: 0; right: -12px;}


.section6 {float: left; width: 773px; height: 290px; border:1px solid #dee3eb; position: relative; background:#fff; margin-right: 10px; overflow:hidden;}
.section6 .title {display: block; height: 50px; border-bottom: 1px solid #dee3eb; padding: 15px 18px; color:#000; font-size:1.133rem; margin-bottom: 20px;}
.section6 .slider {}
.section6 .slider li {}
.section6 .slider li a {display: block; border:1px solid #eaedf2; border-bottom:3px solid #ced3dc; width: 134px; height: 200px; overflow: hidden; position: relative;}
.section6 .slider li a img {display: block; width: 100%; height: 100%;}
.section6 .slider li a::before {content:''; width: 7px; height: 30px; background:#ee322c; position: absolute; top: 0; left: 0;}
.section6 .slider li:nth-child(5n-3) a::before {background:#2c90ee;}
.section6 .slider li:nth-child(5n-2) a::before {background:#ee832c;}
.section6 .slider li:nth-child(5n-1) a::before {background:#8641dc;}
.section6 .slider li:nth-child(5n) a::before {background:#5f5597;}

.section6 .bx-controls {position: absolute; top: 0; right: 49px;}
.section6 .bx-controls .bx-controls-direction, .section6 .bx-controls .bx-controls-direction a, .section6 .bx-controls .bx-controls-auto {float: left; font-size:0;}
.section6 .bx-controls a {display: block; width: 49px; height: 49px; border-left:1px solid #dee3eb; position: relative;}
.section6 .bx-controls .bx-controls-direction a.bx-prev::before, .section6 .bx-controls .bx-controls-direction a.bx-next::before {content:''; width: 12px; height: 12px; border:2px solid #8b919a; border-width:0 0 2px 2px; position: absolute; top: 18px;}
.section6 .bx-controls .bx-controls-direction a.bx-prev::before { transform:rotate(45deg); -webkit-transform:rotate(45deg); left: 20px;}
.section6 .bx-controls .bx-controls-direction a.bx-next::before { transform:rotate(225deg); -webkit-transform:rotate(225deg); left: 16px;}
.section6 .bx-controls .bx-controls-auto .bx-stop::before {content:''; width: 3px; height: 11px; position: absolute; top: 20px; left: 21px; background:#8b919a;}
.section6 .bx-controls .bx-controls-auto .bx-stop::after {content:''; width: 3px; height: 11px; position: absolute; top: 20px; left: 25px; background:#8b919a;}
.section6 .bx-controls .bx-controls-auto .bx-start::before {content:''; width: 0; height: 0; border-top: 7px solid transparent; border-left: 11px solid #8b919a; border-bottom: 7px solid transparent; position: absolute; top: 16px; left: 20px;}
.section6 .more {display: block; position: absolute; top: 0; right: 0; width: 49px; height: 49px; border-left:1px solid #dee3eb; font-size:0;}
.section6 .more::before {content:'+'; font-size:1.667rem; color:#8b919a; position: absolute; top: 9px; left: 17px;}


.section7 {float: left; width: 292px; height: 193px; border:1px solid #dee3eb; position: relative; background:#fff; margin-bottom: 10px; margin-top: -52px; z-index: 2;}
.section7 .link-list {}
.section7 .link-list li {width: 50%; float: left;}
.section7 .link-list li a {display:block; height: 48px; border-bottom:1px solid #dee3eb; font-weight: 700;  line-height: 3.0;}
.section7 .link-list li:nth-child(odd) a {border-right:1px solid #dee3eb;}
.section7 .link-list li a p {display: inline-block; color:#555; padding-left: 32px; background-repeat:no-repeat; background-position:0 0; line-height: 1.2; margin-left: 13px;}
.section7 .link-list li > a:hover > p {color:#e5271e; background-position:0 -18px;}
.section7 .link-list > li:nth-child(1) a p {background-image:url(/plani/images/korean/main/icon_section7_01.gif);}
.section7 .link-list > li:nth-child(2) a p {background-image:url(/plani/images/korean/main/icon_section7_02.gif);}
.section7 .link-list > li:nth-child(3) a p {background-image:url(/plani/images/korean/main/icon_section7_03.gif);}
.section7 .link-list > li:nth-child(4) a p {background-image:url(/plani/images/korean/main/icon_section7_04.gif);}
.section7 .link-list > li:nth-child(5) a p {background-image:url(/plani/images/korean/main/icon_section7_05.gif);}
.section7 .link-list > li:nth-child(6) a p {background-image:url(/plani/images/korean/main/icon_section7_06.gif);}
.section7 .link-list > li:nth-child(7) a p {background-image:url(/plani/images/korean/main/icon_section7_07.gif);}
.section7 .link-list > li:nth-child(8) > a p {background-image:url(/plani/images/korean/main/icon_section7_08.gif); padding-right: 30px; position: relative; }
.section7 .link-list > li:nth-child(8) > a p::after {content:''; width: 16px; height: 17px; overflow: hidden; position: absolute; top: 0; right: 0; background:url(/plani/images/korean/main/icon_section7_09.gif) 0 0 no-repeat;}
.section7 .link-list > li:nth-child(8).active > a p::after {background:url(/plani/images/korean/main/icon_section7_09.gif) 0 -18px no-repeat;}
.section7 .link-list .depth2 li:nth-child(1) a p {background-image:url(/plani/images/korean/main/icon_section7_10.gif); line-height: 1.3;}
.section7 .link-list .depth2 li:nth-child(2) a p {background-image:url(/plani/images/korean/main/icon_section7_11.gif);}
.section7 .link-list .depth2 li:nth-child(3) a p {background-image:url(/plani/images/korean/main/icon_section7_12.gif);}
.section7 .link-list .depth2 li:nth-child(4) a p {background-image:url(/plani/images/korean/main/icon_section7_13.gif);}
.section7 .link-list .depth2 li:nth-child(5) a p {background-image:url(/plani/images/korean/main/icon_section7_14.gif); line-height: 1.3;}
.section7 .link-list .depth2 li:nth-child(1) > a:hover > p,
.section7 .link-list .depth2 li:nth-child(5) > a:hover > p {background-position:0 -19px;}
.section7 .link-list li .depth2 {width: 292px; position: absolute; top: 191px; left: -1px; background:#fff; border:3px solid #e5271e; display: none;}


.section8 {float: left; width: 292px; height: 139px; border:1px solid #dee3eb; position: relative;  margin-bottom: 10px; margin-top: -1px; z-index: 1; overflow:hidden;}
.section8 .slider {}
.section8 .slider li {}
.section8 .slider li a {display: block; width: 290px; height: 137px; overflow: hidden;}
.section8 .slider li a img {display: block; width: 100%; height: 100%;}
.section8 .bx-controls {position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center;}
.section8 .bx-controls .bx-pager {display: inline-block;}
.section8 .bx-controls .bx-pager .bx-pager-item {display: inline-block;}
.section8 .bx-controls .bx-pager a {color:transparent; display: block; width: 11px; height: 11px; background:#8190b5; border-radius:50%; border:3px solid #8190b5; margin:0 5px; font-size:0;}
.section8 .bx-controls .bx-pager a.active {background:transparent; border-color:#e5271e;}
.section8 .bx-controls .bx-controls-auto {display: inline-block; vertical-align: middle; margin-left: 10px; margin-top: 12px;}
.section8 .bx-controls .bx-controls-auto a {display:block; position: relative; color:transparent; width: 15px; height: 15px; font-size:0;}
.section8 .bx-controls .bx-controls-auto .bx-stop::before {content:''; width: 3px; height: 11px; position: absolute; top: 1px; left: 0; background:#8190b5;}
.section8 .bx-controls .bx-controls-auto .bx-stop::after {content:''; width: 3px; height: 11px; position: absolute; top: 1px; left: 7px; background:#8190b5;}
.section8 .bx-controls .bx-controls-auto .bx-start::before {content:''; width: 0; height: 0; border-top: 7px solid transparent; border-left: 11px solid #8190b5; border-bottom: 7px solid transparent; position: absolute; top: 0; left: 0;}

.section8 .bx-controls .bx-controls-auto {display: inline-block;}





@media (max-width:1080px){
  #main .container {padding: 0 15px;}

  #visual {width: 100%;}

  .section1 {width: 70%; height: 272px; overflow: hidden;}
  .section1 .slider li a {height: 231px;}

  .section2 {width: calc(30% - 10px); margin-left: 10px; margin-right: 0;}

  .section3 {width: 100%;}

  .section4 {width: 55%;}

  .section5 {width: calc(45% - 10px); margin-left: 10px; height:144px;}
  .section5 .link-list li {width: 100%; float:inherit;}
  .section5 .link-list li:first-child {border-bottom:1px solid #148c7a;}
  .section5 .link-list li a {text-align:center; height: 71px; padding: 18px 15px;}
  .section5 .link-list li a p {display:inline-block;}
  .section5 .link-list li:first-child a p::after {display: none;}

  .section6 {width: 100%; margin-right: 0; margin-bottom: 10px;}

  .section7 {width: 50%; margin-top: 0; }
  .section7 .link-list li .depth2 {width: 100%;}

  .section8 {width: calc(50% - 10px); margin-left: 10px; margin-right: 0; height: 193px;}
  .section8 .slider li a {width: 100%; height: 193px;}

}

@media (max-width:767px){
  .section1 {width: 100%;}

  .section2 {margin-left: 0; width: 100%;}

  .section4 a {width: 100%;}

  .section6 .bx-wrapper {margin: 0 15px !important;}


}


@media (max-width:515px){
  .section3 {width: 100%; overflow-x:auto; overflow-y:hidden; position: relative;}
  .section3::before {width: 550px;}
  .section3 .tab-menu {width: 550px; position: relative;}

  .section4 {width: 100%;}

  .section5 {width: 100%; margin-left: 0; margin-bottom: 10px;}

  .section6 .bx-controls .bx-controls-auto {display: none;}

  .section7 {width: 100%;}

  .section8 {width: 100%; margin-left: 0;}

}

@media (max-width:430px){
  #visual .slider li .desc p {display: inline;}
}

/* 210510 ��� ��Ʃ�� ���� �߰� */
.banner,
.mobile-banner {
	position: relative;
	clear: both;
}
.banner .video {
	position: absolute;
	bottom: 29px;
	left: 718px;
}
.mobile-banner .video {
	position: absolute;
    width: 55%;
    height: 45%;
    bottom: 1.5%;
    right: 22.5%;
}
.mobile-banner .video .item {
	width: 100%;
	height: 100%;
	/* padding-top: 56.25%; */
	background: url(/upload/banner/mobile_video_frame.png) no-repeat center center/100%;
	padding: 9% 6%;
}