@charset "utf-8";
/* CSS Document */
body{height: auto;}
.body-container {margin-bottom: 120px;}

/* 배너영역 */
.sub-banner { position: relative; width: 100%; height: 365px; background: url("../../img/sub/center/banner_bg.png")no-repeat center; background-size: cover !important;}
.sub-banner .breadcrumb {position: absolute; top:0; left:0; width: 100%; height: 55px; background:#f8f8f8; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; z-index: 20;}
.sub-banner .breadcrumb > ul {padding:0 30px; z-index: 90}
.sub-banner .breadcrumb > ul > li { float: left; width: 235px; border-right: 1px solid #e5e5e5; }
.sub-banner .breadcrumb > ul > li > a { padding:0 30px; display: block; width: 100%; height: 100%; background: url("../../img/sub/common/bread_arrow.svg") 90%; background-repeat: no-repeat; background-size: 10px 6px; line-height: 53px; font-size: 1.4rem; font-weight: 500; color: #444446;text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding-right: 40px;}
.sub-banner .breadcrumb > ul > li.home {width: auto; background:none; border-left: 0;}
.sub-banner .breadcrumb > ul > li.home a { background:none;}
.sub-banner .breadcrumb > ul > li.home a img {width: 23px; position: relative; top:4px;}
.sub-banner .breadcrumb > ul > li.home a:hover img { opacity: .7;}
.sub-banner .breadcrumb > ul > li ul { height: 0; overflow: hidden; background: #fff; border:1px solid #e5e5e5; border-right:0; border-top:0; transition: height .3s ease;}
.sub-banner .breadcrumb > ul > li.select ul { height: auto; }
.sub-banner .breadcrumb > ul > li ul li { line-height: 50px; width: 100%; }
.sub-banner .breadcrumb > ul > li ul li a { display: block; width: 100%; height: 100%; padding:0 30px; font-size: 1.3rem;}
.sub-banner .breadcrumb > ul > li ul li a:hover { background: #f8f8f8; color:#000c54; font-weight: 500;}
.sub-banner .title {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%); word-break: keep-all;}
.sub-banner .title p { position: relative; font-weight: 300; color:#fff; font-size: 3rem; text-align: center; line-height: 40px;}
.sub-banner .title p span {display: block; font-weight: 600;}
.sub-banner .title p:after {width: 40px; height: 1px; background:#fff; position: absolute; top:-20px; content: ''; left:50%; margin-left: -20px;}
.sub-banner .sub-menu { position: absolute; bottom:0; left:0; width: 100%; background: rgba(0,0,0,.5); height: 70px; z-index: 10;}
.sub-banner .sub-menu ul {width: 1200px; margin:0 auto;}
.sub-banner .sub-menu ul li { position: relative; float: left; width:20%; height: 100%; text-align: center;}
.sub-banner .sub-menu ul li a {display: block; width: 100%; height: 100%; line-height: 70px; color: #fff; font-size: 1.4rem; font-weight: 500;}
.sub-banner .sub-menu ul li:hover a {background:rgba(255,255,255,.1); -webkit-transition: background .3s;-moz-transition: background .3s;-ms-transition: background .3s;-o-transition: background .3s;transition: background .3s;}
.sub-banner .sub-menu ul li:after {content: ''; position: absolute; top:25px; right:0; width: 1px; height: 25px; background:#666;}
.sub-banner .sub-menu ul li:last-child:after,
.sub-banner .sub-menu ul li.select:after {display: none;}
.sub-banner .sub-menu ul li.select a {color: #444; background:#fff;}

/* section 공통 */
.section.page-title { text-align:  center; font-size: 2.3rem; font-weight: 600;}
.section {padding-top: 90px; width: 1200px; margin: 0 auto;}
.section .cont-wrap .title {position: relative; font-size: 1.8rem; font-weight: 600; padding-left: 10px; }
.section .cont-wrap .title:after { content: ''; position: absolute; top:6px; left:0; height: 15px; width: 2px; background:#5496ff }
.section .cont-wrap .sub-title { position: relative; padding-left: 15px; font-size: 1.5rem; font-weight: 600; margin-bottom:15px;}
.section .cont-wrap .sub-title:after {content: ''; position: absolute; top:6px; left: 0; width: 5px; height: 5px; background: #29438e;}
.section .cont-wrap .sub-title:before {content: ''; position: absolute; top:11px; left: 0; width: 5px; height: 5px; background: #b4b9d5;}
.section .cont-wrap .cont-text {padding-left: 15px; font-size: 1.4rem; line-height: 1.7; word-break: keep-all; letter-spacing: -0.5px;}

/* 서브 퀵메뉴 */
#quick { position: absolute; top:400px; right: 80px; z-index: 9999; background: #5496ff;}
.quick-menu ul {width: 80px; position: relative; padding: 0 15px; box-shadow: 0 9px 15px -5px rgba(0,12,46,0.2); }
.quick-menu ul li {text-align: center; border-bottom: 1px solid #85b4ff; padding: 12px 0;}
.quick-menu ul li:last-child {border-bottom: 0;}
.quick-menu ul li a {display: block; width: 100%; height: 100%;}
.quick-menu ul li a p {font-size: 1.2rem; color: #fff; font-weight: 500; padding-top: 4px;}
.quick-menu ul li:nth-child(1) img { width: 26px; }
.quick-menu ul li:nth-child(2) img { width: 30px; }
.quick-menu ul li:nth-child(3) img { width: 33px; }
.quick-menu ul li:nth-child(4) img { width: 31px; }






@media all and (max-width:1450px) {
	#quick {right:20px;}	
}

@media all and (max-width:1200px) {
	.section {width: 100%; padding-left: 20px; padding-right: 20px;}
	.sub-banner .sub-menu ul {width: 100%;}
	.section {width: 100%;}
	.quick-menu {display: none;}
}
@media all and (max-width:650px) {
	.section {padding-top: 50px;padding-left: 10px; padding-right: 10px;}
	.section .cont-wrap .title {font-size: 1.6rem; letter-spacing: -0.5px;}
	.sub-banner .breadcrumb > ul { padding: 0; }
	.sub-banner .breadcrumb > ul > li > a {padding:0 40px 0 13px;}
	.sub-banner .breadcrumb > ul > li {width: 50%;}
	.sub-banner .breadcrumb > ul > li.home {display: none;}
	.sub-banner {height: 230px;}
	.sub-banner .sub-menu {display: none;}
	.sub-banner .title { top: calc(50% + 40px);}
	.sub-banner .title p {font-size: 2.5rem; line-height: 35px;}
	.sub-banner .breadcrumb > ul > li ul li {border-bottom: 1px solid #e5e5e5;}
	.section.page-title {font-size: 2rem;}
}