@charset 'utf-8';

/* header */
/*body {padding-top:99px;}*/

/* mainPopup */
.mainPopupWrap{position:absolute; top:0; width:100%; overflow:hidden; background:#f1f1f2; z-index:9999;}
.mainPopupWrap .pop{position:relative; width:980px; height:136px; overflow:hidden; margin:0 auto; padding-top:4px;}
.mainPopupWrap .pop a.img_banner{line-height:0;}
.mainPopupWrap .pop .close{position:absolute; right:10px; bottom:8px;}
.mainPopupWrap .pop .close *{vertical-align:middle;}
.mainPopupWrap .pop .closePopupZone{margin-left:20px; cursor:pointer;}

.mainPopupWrap .pop .two_bn a.img_banner{float:left}
.mainPopupWrap .pop .two_bn a.img_banner:first-child{padding-right:2px; background:url(/static/images/main/bar_mbanner.gif) no-repeat right 50%}
	
body > header{ position:relative; height:97px; background:#fff; border-bottom:2px solid #ef8b00;} 
body > header h1{position:absolute; left:50%; top:50%; z-index:2; margin:-19px 0 0 -490px;}
body > header h1 a,
body > header h1 img{display:block; height:26px;}
body > header .gnb{position:absolute; left:50%; top:0; z-index:1; width:676px; height:0; margin-left:-490px; padding:99px 0 0 304px; text-align:center; overflow:hidden;}
body > header:after{content:''; display:block; position:absolute; top:99px; left:0; right:0; height:0; background-color:#fff;
	-webkit-box-shadow: 0px 3px 2px 0px rgba(194, 194, 194, 0.57); -moz-box-shadow: 0px 3px 2px 0px rgba(194, 194, 194, 0.57); box-shadow: 0px 3px 2px 0px rgba(194, 194, 194, 0.57);
}

body > header .gnb {transition:all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.15s;}
body > header.active .gnb {transition:all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.15s;}
body > header:after {transition:all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.15s;}

/*body > header{position:fixed; top:0; right:0; left:0; height:97px; background:#fff; z-index:3000; transition:z-index 0s ease 0.5s, top 0.3s ease 0s; border-bottom:2px solid #ef8b00;}
body > header h1{position:absolute; left:50%; top:50%; z-index:2; margin:-19px 0 0 -490px;}
body > header h1 a,
body > header h1 img{display:block; height:26px;}
body > header .gnb{position:absolute; left:50%; top:0; z-index:1; width:676px; height:0; margin-left:-490px; padding:99px 0 0 304px; text-align:center; overflow:hidden;}
body > header:after{content:''; display:block; position:absolute; top:99px; left:0; right:0; height:0; background-color:#fff;
	-webkit-box-shadow: 0px 3px 2px 0px rgba(194, 194, 194, 0.57); -moz-box-shadow: 0px 3px 2px 0px rgba(194, 194, 194, 0.57); box-shadow: 0px 3px 2px 0px rgba(194, 194, 194, 0.57);
}

body > header .gnb {transition:all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.15s;}
body > header.active .gnb {transition:all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.15s;}
body > header:after {transition:all 0.15s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.15s;}
*/
.page-scroll > header .gnb {transition:all 0s;}

header .gnb > .menu{position:relative; top:-99px; float:left; min-height:330px; padding:0 37px;}
.lte-ie8 header .gnb > .menu{padding:0 34px;}
.lte-ie8 header .gnb > .menu.inner{padding:0;}
.lte-ie7 header .gnb > .menu.recruit{width:100px;}
header .gnb > .menu h2{position:relative;}
header .gnb > .menu h2:after{content:''; position:absolute; left:-39px; top:50%; display:block; width:4px; height:4px; margin-top:-2px; background-color:#555;}
header .gnb > .menu.introduce h2:after{display:none;}
header .gnb > .menu h2 a{position:relative; z-index:1; display:block; width:100%; height:97px; line-height:97px; font-size:20px; font-weight:bold; color:#333; text-align:center; border-bottom:2px solid #ef8b00; background-color:#fff;}
header .gnb > .menu.focus h2 a:after, 
header .gnb > .menu h2 a.active:after, 
header .gnb > .menu h2 a:hover:after, 
header .gnb > .menu h2 a:focus:after{content:''; position:absolute; left:50%; bottom:0; width: 0px; height: 0px; margin-left:-5px; border-style: solid; border-width:0 7px 8px 8px; border-color: transparent transparent #ef8b00 transparent;}
header .gnb > .menu ul{margin-top:30px; text-align:left; }
header .gnb > .menu ul:after{content:''; position:absolute; left:0; top:136px; display:block; width:1px; height:155px; background-color:#e8e8e8;}
header .gnb > .menu.introduce ul:after{display:none;}
header .gnb > .menu ul li a{display:block; padding:4px 0; font-size:14px; font-weight:bold; color:#555;}
/* header .gnb > .menu ul li a:before{content:''; display:inline-block; width:4px; height:4px; margin-right:5px; background-color:#555; vertical-align:middle;} */
header .gnb > .menu ul li a:hover, header .gnb > .menu ul li a:focus{color:#EE6A00;}
header .gnb > .menu ul li a:hover:before, header .gnb > .menu ul li a:focus:before{background-color:#ef8b00;}
header .gnb > .inner {top:30px; width:150px; min-height:180px; padding:0; background:url('../images/common/bg-gnb-inner.png') no-repeat right bottom;}
header .gnb > .inner h2{float:left; font-size:18px; font-weight:bold; color:#555; letter-spacing:-1px;}
header .gnb > .inner h2:after{display:none;}
header .gnb > .inner ul{float:right; margin-top:5px;}
header .gnb > .inner ul:after{display:none;}
header .gnb > .inner ul li a{font-size:12px; padding:0;}
header .gnb > .inner ul li a:before{display:none;}
header .gnb > .btn{position:absolute; right:0; top:35px;}

/* top right banner */
header .top-right-banner {display: flex; position: absolute; top: 0; left: calc(50% + 487px); box-sizing: border-box; padding-top: 26px; height: 97px; width: 110px; justify-content: center; align-items: center;}
header .top-right-banner img {display: block;}

/* banner */
header .gnb > .banner{position:absolute; left:0; top:149px; padding:15px 0;}
/*header .gnb > .banner:after{content:''; position:absolute; top:50%; left:40%; display:block; width:50%; height:1px; background-color:#e8e8e8;}*/
header .gnb > .banner > div{width:300px; height:100px;}
header .gnb > .banner > div > a{display:block;}

/* .gnb interaction */
header .gnb > .inner h2, 
header .gnb > .menu ul li {opacity:0; transition:opacity 0.5s ease 0.15s;}
header.active{z-index:12; transition:z-index 0s ease 0s;}
header.active:after, 
header.active .gnb{height:231px;}
.lte-ie8 header.active:after {display:none;}
.lte-ie8 header.active .bg{display:block; position:absolute; top:99px; left:0; right:0; height:0; background-color:#fff; width:100%; height:231px; border-bottom:1px solid #ccc}
header .gnb > .menu.focus h2 a, 
header .gnb > .menu h2 a.active, 
header .gnb > .menu h2 a:focus, 
header .gnb > .menu h2 a:hover{color:#EE6A00;}
header.active .gnb > .inner h2, 
header.active .gnb > .menu ul li, 
header.active .gnb > .banner{opacity:1;}
header.active .gnb > .menu ul{position:static; }
header.active .gnb > .banner{left:0;}
header .gnb > .inner ul li:nth-child(2) {display:none;}

/*body.sticky header{z-index:3001; height:53px; transition:top 0.3s ease 0s;}
body.sticky header:after {top:55px;}
body.sticky.lte-ie8 header .bg{top:55px;}
body.sticky header .gnb {padding-top:53px;}
body.sticky header .gnb > .menu ul:after{top:94px;}
body.sticky header .gnb > .menu {top:-55px;}
body.sticky header .gnb > .menu h2 a {line-height:53px; height:55px;}
body.sticky header .gnb > .inner {top:30px;}
body.sticky header .gnb > .banner {top:55px;}
body.sticky header .gnb > .btn{top:13px;}*/

/* breadcrumb */
.breadcrumb{position:absolute; top:99px; left:0; right:0; z-index:10; min-width:980px; height:45px; color:#333; border-bottom:1px solid #c3b9b8; background-color: #ececec;}
.breadcrumb:after{content:''; display:block; clear:both;}
.breadcrumb > span{display:block; width:980px; height:45px; margin:0 auto;}
.breadcrumb span > span{float:left; height:45px; padding-right:20px; line-height:45px; background:url('../images/common/bg-breadcrumb.gif') no-repeat right top;}
.breadcrumb span > span > span, .breadcrumb span > span > a{display:inline-block; height:100%; padding:0 20px; color:#333; background:none;}
.breadcrumb span > span.active{position:relative; padding:0 40px 0 20px; font-weight:bold; background: #fff url('../images/common/bg-breadcrumb.gif') no-repeat right -90px;}
.breadcrumb span > span.active:after{content:''; display:block; position:absolute; left:-20px; top:0; width:20px; height:45px; background:url('../images/common/bg-breadcrumb.gif') no-repeat right -45px;}

/* container */
#container{position:relative; clear:both; min-width:980px; padding-top:46px;}

/* search-form */
.search{padding:10px 0; font-size:12px; text-align:center; background-color:#f0f0f0;}
.search select, .search input[type="text"]{height:28px; border:1px solid #c3bab8;}
.search input[type="text"]{width:250px; height:30px; padding-left:8px; line-height:1.3; }
.lte-ie8 .search .ph-wrap {display:inline-block;}
.lte-ie8 .search .ph-wrap .ph-input {line-height:36px !important; height:32px !important; padding:1px;}
.lte-ie8 .search input[type="text"] {line-height:30px; padding:0 0 0 8px}
.search button{height:32px;}

/* indicator */
.indicator{position:absolute; right:25px; top:86px; z-index:10; display:block; }
.indicator li{padding:4px 0; text-align:center;}
.indicator a{position:relative; width:17px; height:17px; display:block; vertical-align:middle; background:url('../images/contents/bg/indicator.png') 50% 0;}
.indicator a span{position:absolute; right:40px; height:24px; padding:0 5px 0 9px; border-radius:3px 0 0 3px; background:black; color:#fff; line-height:24px; vertical-align:middle; white-space:nowrap; opacity:0;}
.indicator a span i{font:0/0 a; position:absolute; right:-12px; top:0; display:block; border-top:12px solid transparent; border-bottom:12px solid transparent; border-left:12px solid #000; *height:0px; opacity:0;}
.indicator a:hover span, 
.indicator a:focus span,
.indicator .active a span{top:-4px; right:35px; display:block; opacity:1;}
.indicator a:hover, 
.indicator a:focus,
.indicator .active a{background-position:50% -17px;}
.sticky .indicator {position:fixed; top:131px;}
.no-opacity .indicator a span i,
.no-opacity .indicator a span {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: Alpha(Opacity=0);}
.no-opacity .indicator .active a span i,
.no-opacity .indicator a:hover span i,
.no-opacity .indicator a:focus span i,
.no-opacity .indicator .active a span,
.no-opacity .indicator a:hover span,
.no-opacity .indicator a:focus span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: "Alpha(Opacity=100)";}

/* paging */
.paging {margin-top:24px; text-align:center;}
.paging a, .paging strong {display:inline-block; font-size:12px; text-align:center; vertical-align:middle;}
.paging a:focus, .paging a:hover{color:#305689;}
.paging [class|='page']:focus, .paging [class|='page']:hover, .paging .pagelist a:focus, .paging .pagelist a:hover {background-color:#305689; color:#fff;}
.paging .pagelist {margin:0 15px; font:0/0 a; vertical-align:middle;}
.paging .pagelist a , .paging strong{ width:29px; height:28px; line-height:28px; font-family:'NanumGothic'; color:#333; border:1px solid #e8e8e8; border-left:none;}
.paging .pagelist a:first-child, .paging strong:first-child{border-left:1px solid #e8e8e8;}
.paging strong{color:#fff; background-color:#305689}
.paging [class|='page'] {position:relative; width:28px; height:28px; font:0/0 a; background-color:#f0f0f0; border:1px solid #e8e8e8;}
.paging [class|='page']:after{position:absolute; left:0; top:0; width:28px; height:28px; font-size:12px; font-weight:bold; text-align:center; line-height:28px;}
.paging [class|='page'][class*='first']:after{content:'<<';}
.paging [class|='page'][class*='last']:after{content:'>>'}
.paging [class|='page'][class*='next']:after{content:'>'}
.paging [class|='page'][class*='prev']:after{content:'<'}

/* aside */
aside{clear:both; width:981px; margin:100px auto 20px;}
aside:after{content:''; display:block; clear:both;}
aside > a{float:left; height:103px; margin-left:5px;}
aside > a:first-child{margin-left:0;}
aside > a img{display:block; }

/* footer */
footer{position:relative; color:#464646; font-size:11px; border-top:1px solid #ececec}
footer > div{position:relative; width:980px; margin:0 auto; padding:48px 0 40px;}
footer > div address{clear:both; float:left;}
footer > div address + p{float:left;}
footer > div address + p + p{clear:both;}
footer nav {padding-bottom:20px;}
footer nav ul{overflow:hidden;}
footer nav ul li{float:left;}
footer nav ul li:first-child {padding-left:2px;}
footer nav ul li:after{content:"|"; display:inline-block; width:1px; margin:0 10px; color:#ddd; }
footer nav ul li:last-child:after{display:none;}
footer nav ul li a{font-size:13px; color:#333; font-weight:bold; display:inline;}
/*footer nav ul li a:after{content:"|"; display:inline-block; width:1px; margin:0 10px; color:#ddd; }*/
.lte-ie7 footer nav ul li {margin-right:20px;}
footer nav ul li:last-child a:after{display:none;}
footer .btn-family{position:absolute; right:250px; top:40px;}
footer .btn-accessibility{position:absolute; right:160px; top:40px;}
#container.main .contact {position:absolute;top: 720px;left: 50%;margin-left: 345px;z-index:999}
/* footer - familysite */

[class^="btn"][class*="familysite"]{position:absolute; top:48px; right:0; width:145px; height:22px; padding-left:15px; background-color:#707070; border:none; color:#fff; font-size:11px; text-align:left}
[class^="btn"][class*="familysite"]:after{content:'\271A'; position:absolute; right:0; top:0; display:inline-block; width:22px; height:22px; text-align:center; line-height:22px; background-color:#505050; }
[class^="btn"][class*="familysite"].active:after{content:'-'}

.list-site{position:relative; width:980px; margin:0 auto; padding:50px 0; transition:all 0.5s;}
.list-site li{float:left; width:20%; text-align:center;}
.list-site li a{display:block; width:100%; height:100%; text-align:center;}
.list-site.active{display:block; }
[class^="layer"][class*="site"]{display:none; left:0; top:initial; right:0; top:-254px; background:#fff url('../images/contents/bg/bg-pattern-parallax.png') repeat; border:none; border-top:2px solid #ef8b00}
[class^="layer"][class*="site"] .btn-close{position:absolute; top:-42px; right:0; width:40px; height:40px; background-color:#ff8012; background-position:center center; }

/* error 에러페이지 */
.cont-error .error{min-height:420px; text-align:center;}
.cont-error .error h1{margin:75px 0 35px; padding:75px 0; font-size:40px; color:#333; font-weight:bold; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; }
.cont-error .error p{margin-bottom:35px;}

/* tooltips */
.tooltip {position:relative; display:inline-block;}
.tooltip span {position:absolute; display:none; min-width:200px; width:100%; padding:20px; color:#f2f2f2; text-align:left; word-wrap:break-word; background-color:#808080; border-radius:8px;}
.tooltip span:after{content:''; position:absolute; width:0; height:0; left:-8px; top:20px; margin-top:-8px; border-right:8px solid #808080; border-bottom: 8px solid transparent; border-top:8px solid transparent;}
.tooltip:hover span {display:inline-block; left:100%; top:0; margin:0 0 0 15px; z-index:1000; font-size:12px;}

/* layer + popup */
.mask{position:relative; left:0; top:0; right:0; bottom:0; background-color:transparent;}
.hide-layer { display:none;}
[class^="layer"]{position:absolute; z-index:1000; left:50%; top:50%; text-indent:0; background-color:#fff; border:2px solid #4f4f4f;}
.popup{position:relative; margin-top:-99px; border:2px solid #4f4f4f}
[class^="layer"] header, .popup header{height:60px; padding:0 0 0 20px; background:url('../images/common/bg-pop-header.gif')}
[class^="layer"] header h1, .popup header h1{display:block; font-size:20px; font-weight:bold; color:#fff; text-align:left; line-height:60px;}
[class^="layer"] header h1:before, .popup header h1:before{content:''; display:inline-block; width:15px; height:6px; margin-right:5px; vertical-align:middle; background:url('../images/etc/bul-line.png') no-repeat}
[class^="layer"] .contents, .popup .contents{position:relative; padding:30px 20px;}
[class^="layer"] .contents{font-size:18px; font-weight:bold; color:#333; text-align:left; }
[class^="layer"] .btn-close, .popup .btn-close{position:absolute; right:25px; top:17px; width:27px; height:26px; font:0/0 a; background:url('../images/button/btn-close-popup.png') no-repeat}

[class^="layer"][class*="detail"] .contents{padding:30px; color:#333; text-align:left; font-size:16px;}
[class^="layer"][class*="detail"] .contents h2{font-size:25px; color:#222; }
[class^="layer"][class*="detail"] .contents ul, [class^="layer"][class*="detail"] .contents ol{margin:10px 0;}
[class^="layer"][class*="detail"] .contents li{margin:7px 0;}

.ui-datepicker{ z-index:9999 !important;}

/* text decoration */
.color-point{color:#f68b1f}

/* result */
.no-result{text-align:center; margin:100px 0;}
.no-result strong{display:block; margin-bottom:50px; font-size:30px; color:#333;}

/* button */
[class|="btns"]{margin-top:20px;}
[class*="btns"] > *{vertical-align:middle;}
[class*="btns"] button img, [class*="btns"] a img{display:block;}
.btns-right{text-align:right;}
[class|="btn"]{vertical-align:middle;}
[class|="btn"][class*="icon"]{width:18px; height:18px; font:0/0 a;}
[class|="btn"][class*="icon"][class*="calendar"]{width:24px; height:24px; background-image:url('../images/button/btn-calendar.gif');}
[class|="btn"][class*="icon"][class*="add"]{background-image:url('../images/button/btn-plus.gif');}
[class|="btn"][class*="icon"][class*="delete"]{background-image:url('../images/button/btn-minus.gif');}

/* add-file */
.upload-file input[type="file"]{display:block; margin:5px 0}

/* 호환성보기 */
.alert-box-wrap {display:none; position:fixed; bottom:5px; right:0; left:0; width:100%; z-index:9999;}
.alert-box-wrap .alert-box {position:relative; width:958px; margin:0 auto; padding:1px; border:1px solid #000; background-color:#fff;}
.alert-box-wrap .alert-box p {padding:9px 15px; border-top:6px solid #f2b100; font-family:'맑은 고딕', 'Malgun Gothic', '돋움', 'Dotum', sans-serif; color:#000; font-size:12px;}
.alert-box-wrap .alert-box .btn-close {position:absolute; top:50%; right:10px; margin-top:-10px; color:#a7a5a5; font-size:20px; cursor:pointer;}