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

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

#wrap{position:relative; width:100%;}

#header {margin:0 auto; width:100%; position:relative; z-index: 99; height: 131px;}
#header .top-menu {padding: 20px 0;}
#header .logo {float:left; width:160px; position: relative; z-index: 0}
#header .logo a {display: block; width: 100%;}
#header .logo a img {width: 100%;}
#header .pull-right{width:calc(100% - 209px); text-align:right; position: relative; padding-top: 8px;}
#header .tsidemenu{overflow:hidden; display:inline; margin-right: 43px;}
#header .tsidemenu>li{display:inline; position: relative;}
#header .tsidemenu>li::before {content:''; width: 1px; height: 7px; background:#e9ecf2; position: absolute; right: 0; top: 5px;}
#header .tsidemenu>li>a{color:#798187; font-weight:600; display:inline-block; padding:0 13px;}
#header .ir{display:inline-block; width:38px; height:38px; vertical-align:middle; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center;}
#header .i-search{background-image:url(/plani/images/korean/common/i_search.png);}
#header .i-menu{color:#798187; font-weight:600; display:inline-block;}
#header .sitemap .tsidemenu{display:none;}

.search-input{-webkit-transition:all  0.3s ease;transition:all  0.3s ease;position:absolute;right: 58px;top:-6px;}
.search-input input[type="text"]{padding:15px 20px; width:230px; height:45px;border:1px solid #0093d0; background-color:#eff8fb;}
.submit-btn{margin-top:3px;}
.search-area2{height:0; width:230px; opacity:0; visibility:hidden; z-index:-1; width:0px; transition: none;}
.search-area2.active{width:300px; height:45px; opacity:1; visibility:visible; z-index:1;}
/* #header .search-area2.active + .i-search {display: none;} */

.sitemap{position:absolute; top:-594px; left:0; width:100%; background:#fff; z-index:10; padding-bottom:40px; transition: top 0.3s, opacity .3s ease; -webkit-transition:top 0.3s, opacity .3s ease; height:594px; overflow:hidden; opacity:0;}
.sitemap.active{top:0; box-shadow:0px 2px 1px #efefef; opacity:1; z-index:30; height: auto;}
.sitemap .title-area{background:#115fad;}
.sitemap .topmenu_all{position:relative;}
.sitemap h2{font-size:2.5em; color:#fff; position:relative; padding:15px 0; font-family: 'Nanum Myeongjo'; font-weight:400; float:left;}
.sitemap h2 span{display:block;}
.sitemap .close{font-size:1.125em; color:#fff; display:block; text-align:right; float:right; margin-top:25px; padding-right:30px; background:url(/plani/images/korean/common/i_close.gif) right center no-repeat;}

.sitemap .topmenu_all>li{float:left; width:16.6666%; padding-top:40px;}
.sitemap .topmenu_all>li>a{font-size:1.25em; color:#115fad; font-weight:700; margin-bottom:15px; display:inline-block; margin-left:10px;}
.sitemap .topmenu_all>li ul>li>a{width:100%; letter-spacing:-0.05em; display:inline-block; padding:5px 10px;}
.sitemap .topmenu_all>li ul>li>a:hover{color:#fff; background:#115fad;}


#header .bg-depth2 {position: absolute; top: 131px; left: 0; width: 100%; height: 0; overflow: hidden; background:#fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.13); -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.13); transition: height .5s ease; -webkit-transition: height .5s ease;}
#header .bg-depth2 .container {position: relative; height:inherit; background:url(/plani/images/korean/common/bg_depth2.gif) right center no-repeat;}
#header .bg-depth2 .container::before {content:''; width: 100%; height:inherit; background:#005eac; position: absolute; top: 0; left: -80%;}
#header #nav {border-top:1px solid #f1f1f1; border-bottom:1px solid #cdd6de; height: 55px; overflow: hidden;}
#header #gnb {text-align: center;}
#header #gnb > li {display: inline-block; vertical-align: top; cursor:pointer;}
#header #gnb > li > a {display: block; font-size:1.2rem; font-weight: 600; margin: 15px 45px; position: relative; transition:.3s ease; -webkit- transition:.3s ease;}
#header #gnb > li:hover > a {color:#005eac;}
#header #gnb > li > a::before {content:''; width: 100%; height: 4px; background:#2077c3; position: absolute; bottom: -16px; left: 0; opacity: 0; transition: opacity .3s linear; -webkit-transition: opacity .3s linear;}
#header #gnb > li.active > a::before {opacity: 1;}
#header #gnb > li .depth2 {text-align: left; position: absolute; width: 100%; top: 133px; left: 0; /*display: none;*/ opacity: 0; z-index: -1; max-height:0; visibility: hidden; transition:all .3s ease; -webkit-transition:all .3s ease;}
#header #gnb > li.active .depth2 {/*display: block;*/ opacity: 1; z-index: 1; visibility: visible;  max-height:inherit; transition-delay: .2s; -webkit-transition-delay: .2s;}
#header #gnb > li .depth2 .container {padding: 35px 0;}
#header #gnb > li .depth2 .info {float: left; padding-top: 30px; width: 216px;}
#header #gnb > li .depth2 .info .title {font-size:1.6rem; color:#fff; font-weight: 600; display: block; padding-bottom: 10px; position: relative; }
#header #gnb > li .depth2 .info .title::after {content:''; width: 50px; height: 50px; background-position: 0 0; background-repeat:no-repeat; position: absolute; right:15px; top: 0;}
#header #gnb > li:nth-child(1) .depth2 .info .title::after {background-image:url(/plani/images/korean/common/bg_depth2_info1.png)}
#header #gnb > li:nth-child(2) .depth2 .info .title::after {background-image:url(/plani/images/korean/common/bg_depth2_info2.png)}
#header #gnb > li:nth-child(3) .depth2 .info .title::after {background-image:url(/plani/images/korean/common/bg_depth2_info3.png)}
#header #gnb > li:nth-child(4) .depth2 .info .title::after {background-image:url(/plani/images/korean/common/bg_depth2_info4.png)}
#header #gnb > li:nth-child(5) .depth2 .info .title::after {background-image:url(/plani/images/korean/common/bg_depth2_info5.png)}
#header #gnb > li:nth-child(6) .depth2 .info .title::after {background-image:url(/plani/images/korean/common/bg_depth2_info6.png)}
#header #gnb > li .depth2 .info p {font-size:1.067rem; color:#d5d8e0; line-height: 1.5; display: block; position: relative; padding-bottom: 25px;}
#header #gnb > li .depth2 .info p::after {content:''; width: 105%; height: 1px; background:#e5271e; position: absolute; bottom: 0; left: 0;}
#header #gnb > li .depth2 .menu {float: left; padding: 0 40px;}
#header #gnb > li .depth2 .menu > li a {display: inline-block; color:#707676; padding-bottom: 5px; margin-bottom: 10px; position: relative; font-weight: 600; transition: color .3s ease; -webkit-transition: color .3s ease;}
#header #gnb > li .depth2 .menu > li a:hover {color:#000;}
#header #gnb > li .depth2 .menu > li a::before {content:''; width: 100%; height: 1px; background:#000; position: absolute; bottom: 0; left: 0; opacity: 0; transform:translateY(0); -webkit-transform:translateY(0); transition: opacity .3s ease; -webkit-transition: opacity .3s ease;}
#header #gnb > li .depth2 .menu > li a:hover::before {opacity:1;}


#footer {border-top:1px solid #e9ecf2;}
#footer .banner {border-bottom:1px solid #f6f7f8;}
#footer .banner .container {position: relative; height: 80px; padding-left:110px; padding-top: 15px;}
#footer .banner .slider {}
/* #footer .banner .slider li {width:auto !important;} */
#footer .banner .slider li a {width:auto; height: 47px; display: block;}
#footer .banner .bx-controls {position: absolute; top: 26px; left: 0;}
#footer .banner .bx-controls .bx-controls-direction {width: 90px;}
#footer .banner .bx-controls .bx-controls-direction a {display: block; width: 28px; height: 29px; border:1px solid #f3f3f3; font-size:0;}
#footer .banner .bx-controls .bx-controls-direction a::before {content:''; width: 12px; height: 12px; border:2px solid #8b919a; border-width:0 0 2px 2px; position: absolute; top: 8px;}
#footer .banner .bx-controls .bx-controls-direction .bx-prev {float: left;}
#footer .banner .bx-controls .bx-controls-direction .bx-prev::before {transform:rotate(45deg); -webkit-ransform:rotate(45deg); left: 11px;}
#footer .banner .bx-controls .bx-controls-direction .bx-next {float: left;}
#footer .banner .bx-controls .bx-controls-direction .bx-next::before {transform:rotate(225deg); -webkit-transform:rotate(225deg); left: 34px;}
#footer .banner .bx-controls .bx-controls-auto {position: absolute; left: 56px; top: 0;}
#footer .banner .bx-controls .bx-controls-auto a {display: block; width: 28px; height: 29px; border:1px solid #f3f3f3; font-size:0;}
#footer .banner .bx-controls .bx-controls-auto .bx-stop::before {content:''; width: 3px; height: 14px; position: absolute; top: 7px; left: 10px; background:#8b919a;}
#footer .banner .bx-controls .bx-controls-auto .bx-stop::after {content:''; width: 3px; height: 14px; position: absolute; top: 7px; left: 16px; background:#8b919a;}
#footer .banner .bx-controls .bx-controls-auto .bx-start::before {content:''; width: 0; height: 0; border-top: 7px solid transparent; border-left: 10px solid #8b919a; border-bottom: 7px solid transparent; position: absolute; top: 7px; left: 11px;}
#footer .ft-area {padding: 20px 0;}
#footer .ft-area .copyright {float: left; color:#828282; font-size:0.867rem;}
#footer .ft-area .copyright address {display: block; margin-bottom: 10px;}
#footer .ft-area .link-list {float: right;}
#footer .ft-area .link-list li {display: inline-block; padding-left: 15px; position: relative;}
#footer .ft-area .link-list li::before {content:''; width: 1px; height: 10px; background:#d4d4d4; position: absolute; left: 5px; top: 3px;}
#footer .ft-area .link-list li:first-child::before {display: none;}
#footer .ft-area .link-list li a {display: block; color:#828282; font-size:0.867rem;}
#footer .ft-area .link-list li.red a {color:#d73b1c;}
#footer .ft-area .link-list li.blod a {font-weight: 500; color: #000;}



@media (max-width:1200px){
	#wrap{overflow-x:hidden;}
	#header{padding-left:15px; padding-right:15px;}
	#header #nav {display: none;}
	.container {width: 100%;}

	#footer .banner .container {margin: 0 15px;}
	#footer .ft-area {position: relative;}
	#footer .ft-area .copyright {padding-top: 40px; text-align: center; float:inherit; width: 100%;}
	#footer .ft-area .link-list {float: inherit; position: absolute; width: 100%; text-align:center; top:20px; left: 0;}


}

@media (max-width:767px){
#header{height:auto}
	#header .tsidemenu{display:none;}
	#header .sitemap .tsidemenu{display:block; text-align:center; margin:26px 0;}
	#header .sitemap .tsidemenu>li{position:relative;}
	#header .sitemap .tsidemenu>li:first-child:after{display:none;}
	#header .sitemap .tsidemenu>li:after{position:absolute; top:3px; left:0; content:""; width:1px; height:10px; background:#000;}
	.sitemap{position:fixed; top:0; left:0; width:100%; background-color:rgba(0,0,0,0.8); z-index:10; padding-bottom:40px; transition:opacity 0.3s, visibility .3s ease; -webkit-transition:opacity 0.3s, visibility .3s ease; height:100%; overflow:auto;opacity:0; visibility:hidden; z-index:-1;}
	.sitemap.active{opacity:1; visibility:visible; z-index:1; height: 100%; overflow: hidden;}
	.sitemap.active .title-area,
	.sitemap.active .topmenu_all{right:0;}
	.sitemap .title-area{background:#fff; height: 71px; width: 70%; position: absolute; top: 0; right:-70%; transition:right 0.3s ease; -webkit-transition:right 0.3s ease;}
	.sitemap .title-area .container{overflow:visible; background:#fff; width:100%; position:absolute; top:0; right:0; height:100%;}
	.sitemap .topmenu_all{position:relative;}
	.sitemap h2{display:none;}
	.sitemap .close{font-size:0; color:#fff; display:block; text-align:inherit; float:inherit; margin-top:0; padding-right:0; background:url(/plani/images/korean/common/bg_close2.png) 0 0 / 40px 40px no-repeat; width:40px; height:40px; position: absolute; top: 20px; left: -50px;}
  .sitemap .topmenu_all{overflow:auto; background:#fff; width:70%; position:absolute; top:71px; right:-70%; height:100%; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
	.sitemap .topmenu_all>li{width:100%; padding-top:0;}
	.sitemap .topmenu_all>li>a{font-size:1.333em; font-weight:700; color:#333; margin-bottom:0; display:inline-block; margin-left:0; width:100%; padding:15px; border-bottom:1px solid #afb0b3; border-top:1px solid #afb0b3; margin-bottom:-1px;}
	.sitemap .topmenu_all>li.active>a{background:#1e274e; color:#fff; border-color:#1e274e;}
	.sitemap .topmenu_all>li.active ul{opacity:1; visibility:visible; z-index:1; height:inherit;}
	.sitemap .topmenu_all>li ul{opacity:0; visibility:hidden; z-index:-1; height:0; transition:opacity 0.3s ease; -webkit-transition:opacity 0.3s ease;}
	.sitemap .topmenu_all>li ul>li>a{width:100%; letter-spacing:-0.05em; display:inline-block; padding:15px;}
	.sitemap .topmenu_all>li ul>li>a:hover{color:#fff; background:#115fad;}
}

@media (max-width:413px){
	#header .tsidemenu>li>a{font-size:0.8em;}
}

.search-input input[type="text"] {
    width: 600px;
    height: 60px;
    background: #FBFDFF;
    border-color: #BED0E1;
    padding-right: 50px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ns.search_active .search-input input[type="text"] {
    color: #555;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.5px;
    transition: none;
}
.search-area2.active {
    position: absolute;
    width: 600px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.search-area2.active > form {
    position: relative;
}
.ns #header #searchKeyword + a {
    position: absolute;
    top: 12px;
    right: 16px;
    background-image: none;
    font-family: 'xeicon';
    font-size: 20px;
    content: "\e97a";
}
.ns #header #searchKeyword + a::after {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: 'xeicon';
    font-size: 30px;
    content: "\e97a";
    color: #115FAD;
}
.ns .search-input button.close {
    display: none;
    position: absolute;
    top: 45px;
    right: 60px;
}
.ns .search-input button.close i {
    font-size: 38px;
    color: #555;
}
.ns.search_active .search-input button.close {
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ns.search_active .search-input button.close:hover,
.ns.search_active .search-input button.close:focus {
    transform: rotate(180deg);
}


/* 반응형 */
@media (max-width: 1800px) {
    .ns #header #gnb {
        display: table;
        width: 100%;
        table-layout: fixed;
        padding-right: 290px;
        padding-left: 10px;
    }
    .ns #header #gnb > li {
        display: table-cell;
        text-align: center;
    }
    .ns #header #gnb > li > a {
        margin: 4px 0;
    }
}
@media (max-width: 1280px) {
    .ns #header #gnb > li > a {
        margin: 4px 10px;
    }
    .ns #header .tsidemenu>li {
        margin-right: 6px;
    }
}
@media (max-width: 768px) {
    .ns.search_active .search-input button.close {
        top: 30px;
        right: 10px;
    }
    .search-area2.active {
        width: 85%;
        margin: 0 auto;
    }
    .ns .search-input input[type="text"] {
        width: 100%;
        margin: 0 auto;
    }
    .ns #header .tsidemenu {
        display: none;
    }
}