html,body{height:100%;}
body.action{overflow:hidden;height: 100%;}
*{line-height: 1.3;}
#wrap{overflow:hidden;position:relative;min-height:100%;background: #fff;}


.con-area{width:100%;max-width:1500px;margin:0 auto;}
.con-area:after{content:"";display:block;clear:both;}


/* heading titles */
.h2 {display:block; position: relative; margin-bottom: 30px; border-bottom: 1px solid #dddddd; font-weight: 700; font-size: 2.25rem; color: #000;}
.h2:not(:last-child) {margin-bottom: 0;}
.h3 {display:block; position: relative; margin-bottom: 20px; padding-left: 15px; font-weight: 700; font-size: 1.75rem; color: #000;}
.h3::before {content:""; position: absolute; top: 15%; left: 0; width: 6px; height: 70%; background-color: #6667ab;}
.h4 {display:block; position: relative; margin-bottom: 15px; padding-left: 10px; font-weight: 600; font-size: 1.5rem; color: #000;}
.h4::before {content:""; position: absolute; top: 15%; left: 0; width: 7px; height: 7px; background-color: #6667ab;}
.h5 {margin-bottom: 15px; font-weight: 600; font-size: 1.25rem; color: #000;}
.h6 {margin-bottom: 10px; font-weight: 500; font-size: 1.125rem; color: #000;}
/* //heading titles */


/*-------------------------------------------------------------------
	분류그룹 : header
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header {position: fixed; z-index: 10; width: 100%;}
#header.login {height: 100px;}
#header .top-nav {position: relative; width: 100%; max-width: 1500px; margin: 0 auto;}
#header .top-nav .logo {width: 100%; height: 100px; line-height: 100px; text-align: center;}
#header.login .top-nav .logo {text-align: left;}
#header .top-nav .logo img {vertical-align: middle;}
#header .top-nav .hd-btn {position: absolute; top: 33px; right: 0;}
#header .top-nav .hd-btn a {display: inline-block; margin-left: 10px; padding: 8px 30px; border-radius: 50px; background-color: #2A4681; color: #ffffff;}
#header .top-nav .hd-btn a:nth-child(1) {margin-left: 0;}
#header .top-nav .hd-btn a.logout::before {content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: url(../images/common/i_logout.svg) no-repeat center left; vertical-align: middle;}
#header .top-nav .hd-btn a:last-child {background-color: #111111;}

#header .top-nav .hd-btn #selectForm {position: absolute; right:170px; top:-19px;}
#header .top-nav .hd-btn #selectForm label {font-size:0.875rem; font-weight: 600;}
#header .top-nav .hd-btn #selectForm #selection {overflow:hidden; width:200px; padding:8px; border-radius:3px; text-overflow:ellipsis; white-space:nowrap;}

#header .gnb-wrap {width: 100%; height: 65px; border-top: 4px solid #19B5AA; border-bottom: 1px solid #D9D9D9;}
#header .gnb-wrap nav {width: 100%; height: 100%; max-width: 1500px; margin: 0 auto;}
#header .gnb-wrap .menu {display: flex; height: 100%; justify-content: space-around; align-items: center; font-size: 1.125rem; font-weight: 700;}
#header .gnb-wrap .menu li {position: relative; display: block; width: 100%; height: 100%; text-align: center; line-height: 61px;}
#header .gnb-wrap .menu li a {display: block; text-align: center; line-height: 61px;}
#header .gnb-wrap .menu li::after {content: ''; display: inline-block; position: absolute; top: 23px; right: 0; z-index:-1; width: 1px; height: 16px; background-color: #D9D9D9;}
#header .gnb-wrap .menu li:last-child::after {display: none;}

#header .gnb-wrap.ver2 {border-top: 4px solid #2A4681;}
#header .gnb-wrap.ver3 {border-top: none; border-bottom: none; background-color: #19B5AA; color: #ffffff;}
#header .gnb-wrap.ver4 {border-top: none; border-bottom: none; background-color: #2A4681; color: #ffffff;}
#header .gnb-wrap.ver5 {border-top: 4px solid #414141;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#header .top-nav .hd-btn a {transition: background-color 0.3s;}
#header .top-nav .hd-btn a:focus,
#header .top-nav .hd-btn a:hover {background-color: #193061;}
#header .top-nav .hd-btn a:last-child:focus,
#header .top-nav .hd-btn a:last-child:hover {background-color: #333333;}

#header .gnb-wrap .menu li:hover::after {display: none;}
#header .gnb-wrap .menu li a {transition: background-color 0.3s , color 0.3s;}
#header .gnb-wrap .menu li a:hover {background-color: #19B5AA; color: #ffffff;}
#header .gnb-wrap .menu li a:focus {background-color: #19B5AA; color: #ffffff;}
#header .gnb-wrap .menu li a.active {background-color: #19B5AA; color: #ffffff;}
#header .gnb-wrap.ver2 .menu li a:hover {background-color: #2A4681; color: #ffffff;}
#header .gnb-wrap.ver2 .menu li a:focus {background-color: #2A4681; color: #ffffff;}
#header .gnb-wrap.ver2 .menu li a.active {background-color: #2A4681; color: #ffffff;}
#header .gnb-wrap.ver5 .menu li a:hover {background-color: #414141; color: #ffffff;}
#header .gnb-wrap.ver5 .menu li a:focus {background-color: #414141; color: #ffffff;}
#header .gnb-wrap.ver5 .menu li a.active {background-color: #414141; color: #ffffff;}

#header.active {display:none; height:80px; background-color:rgba(255,255,255,0.9); border-bottom:1px solid #ddd; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.1); transition: height 0.3s , background 0.3s, color 0.3s;}
#header.active .top-nav .logo {height: 70px; line-height: 70px; transition: height 0.3s , line-height 0.3s;}
#header.active .top-nav .hd-btn {top:20px; transition: top 0.3s;}
#header.active .header-wrap {height:60px;}
#header.active .header-wrap #logo > a {transform:translateY(-50%);}
#header.active .header-wrap #gnb .menu01 > li > a .tit01 {color:#111;}
#header.active .header-wrap #gnb .menu01 > li > a::after {bottom:8px; background-color:#000;}
#header.active .header-wrap #gnb .menu01 > li .menu02 {top:60px; box-shadow:3px 3px 8px 0 rgba(0,0,0,0.2);}
#header.active #utils .list > li .btn-util.sitemap:focus,
#header.active #utils .list > li .btn-util.sitemap:hover,
#header.active #utils .list > li .btn-util.sitemap.active {border:1px solid #222;}
#header.active #utils .list > li .btn-util.sitemap .icon .line,
#header.active #utils .list > li .btn-util.sitemap .icon .line::before,
#header.active #utils .list > li .btn-util.sitemap .icon .line::after {background-color:#111;}
#header.active #utils .list > li .btn-util.btn-user > span {background-image:url(../images/main/i_user_active.svg);}
#header.active #utils .list > li .btn-util.btn-login > span {background-image:url(../images/main/i_login_active.svg);}
#header.active #utils .list > li .btn-util.btn-user:focus > span,
#header.active #utils .list > li .btn-util.btn-user:hover > span,
#header.active #utils .list > li .btn-util.btn-user.active > span {background-image:url(../images/main/i_user_on.svg);}
#header.active #utils .list > li .btn-util.btn-login:focus > span,
#header.active #utils .list > li .btn-util.btn-login:hover > span,
#header.active #utils .list > li .btn-util.btn-login.active > span {background-image:url(../images/main/i_login.svg);}

/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#header .top-nav {padding: 0 20px;}
	#header .top-nav .hd-btn {right: 20px;}
}
@media screen and (max-width: 1024px) {
	#header {height: auto;}
	#header .top-nav {border-bottom: 1px solid #D9D9D9;}
	#header > .top-nav > .logo {text-align: left;}
	#header .top-nav .logo img {width: 180px;}
	#header .top-nav .hd-btn {right: 80px;}
	#header .top-nav .hd-btn a {padding: 8px 20px;}
	#header .top-nav .hd-btn #selectForm {right:140px;}
	#header .top-nav .hd-btn #selectForm #selection {width:170px;}
	#header > .gnb-wrap {display: none;}
	#header > .gnb-wrap.ver3 {display: block; height: 55px;}
	#header .gnb-wrap.ver3 .menu li {line-height: 55px;}
}
@media screen and (max-width: 600px) {
	#header .top-nav {display: flex; padding: 0 20px; flex-direction: column;}
	#header > .top-nav > .logo {height: 80px; line-height: 80px;}
	#header .top-nav .logo img {width: 160px;}
	#header .top-nav .hd-btn {position: unset; margin-top: 10px; text-align: center;}
	#header > .gnb-wrap.ver3 {display: block; height: 45px;}
	#header .gnb-wrap.ver3 .menu li {line-height: 45px;}

	#header > .top-nav > .hd-btn {margin:0;}
	#header > .top-nav > .hd-btn a {display: none;}
	#header .top-nav .hd-btn #selectForm {position:unset; text-align:left;}
	#header .top-nav .hd-btn #selectForm #selection {width:100%; margin:5px 0 15px;}
}
@media screen and (max-width: 320px) {
	#header .top-nav .hd-btn a {width: 100%;}
	#header .top-nav .hd-btn a {margin-left: 0; margin-top: 10px;}
	#header .top-nav .hd-btn a:nth-child(1) {margin-top: 0;}
}




/*-------------------------------------------------------------------
	분류그룹 : header > sitemap     
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/

#header .site-map {position: absolute; top: 38px; right: 30px; display: none;}
#header .site-map .btn-site-map {display: block; width:26px; height:26px; background-color:transparent;}
#header .site-map .btn-site-map .ln {display: block; width:100%; height:2px; background-color:#111111;}
#header .site-map .btn-site-map .ln.l1, #header .site-map .btn-site-map .ln.l2 {margin-bottom:7px;}


#menu-modal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; transition: visibility 0s 0.3s;}
#menu-modal.active {visibility: visible; transition: visibility 0s 0s;}
#menu-modal .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); transition: background 0.3s;}
#menu-modal.active .bg {background-color: rgba(0,0,0,0.5);}

#menu-modal #sitemap {overflow-y: auto; position:absolute; top:0; right:-100%; z-index: 300; width:580px; height:100%; padding-bottom: 60px; background-color:#2A4681; color: #ffffff;}
#menu-modal #sitemap .content-box .con-head {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 200px; margin-bottom:20px; -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: top;}
#menu-modal #sitemap .content-box .con-head .logo-box {position: absolute; display: flex; width: 100%; margin-top: 60px; flex-direction: column; align-items: center;}
#menu-modal #sitemap .content-box .con-head .logo-box a img {width: 100%;}
#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn {display: flex; margin-top: 30px; align-items: center;}
#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn a {display: inline-block; margin-left: 10px; padding: 8px 30px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.2); color: #ffffff;}
#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn a:first-child {margin-left: 0;}
#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn a.logout::before {content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 7px; background: url(../images/common/i_logout.svg) no-repeat center left; vertical-align: middle;}
#menu-modal #sitemap .content-box .con-head .btn-close {position: absolute; top: 38px; right: 30px; display: block; width:30px; height:30px; background-color: transparent;}
#menu-modal #sitemap .content-box .con-head .btn-close .ln {display: block; position:relative; width:30px; height:30px;} 
#menu-modal #sitemap .content-box .con-head .btn-close .ln::before {content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:2px; background-color:#ffffff; transform: translate(-50%,-50%) rotate(45deg) ;}
#menu-modal #sitemap .content-box .con-head .btn-close .ln::after {content:''; display: block; position:absolute; top:50%; left:50%; width:100%; height:2px; background-color:#ffffff; transform: translate(-50%,-50%) rotate(-45deg);}

#menu-modal #sitemap .content-box .sitemap-list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; text-align: center; flex-direction: column; justify-content: center;}
#menu-modal #sitemap .content-box .sitemap-list > li {display: block; width:100%; margin-bottom:10px; font-weight:600; font-size:1.25rem; color:#ffffff;}
#menu-modal #sitemap .content-box .sitemap-list > li a {display: block; color:#ffffff;}
#menu-modal #sitemap .content-box .sitemap-list > li .menu02 li {display: block; width:100%; margin-bottom:10px; font-weight:400; font-size:1.063rem;}
#menu-modal #sitemap .content-box .sitemap-list > li .menu02 li:first-child {padding-top: 10px;}
#menu-modal #sitemap .content-box .sitemap-list > li .menu02 li a {color:#F6F6F6;}

/*-------------------------------------------------------------------
	@interaction  
-------------------------------------------------------------------*/
#header.on .site-map .btn-site-map .ln,
#header:hover .site-map .btn-site-map .ln,
#header:focus .site-map .btn-site-map .ln {background-color:#dddddd;}

#menu-modal #sitemap {transition: background 0.5s, right 0.5s;}
#menu-modal.active #sitemap {right:0;}

#menu-modal #sitemap .content-box .sitemap-list > li .menu-01 {transition:color 0.3s;}
#menu-modal #sitemap .content-box .sitemap-list > li .menu-01:focus,
#menu-modal #sitemap .content-box .sitemap-list > li .menu-01:hover {color:rgba(255, 255, 255, 0.6);}

/*-------------------------------------------------------------------
	@media 
-------------------------------------------------------------------*/
@media screen and (max-width:1024px) { 
	#header .site-map {display: block;}
}
@media screen and (max-width:600px) {

	#menu-modal #sitemap {width:100%;}
	#header .site-map {top: 30px; right: 20px;}
	#header .site-map .btn-site-map {width:20px; height:20px;}
	#menu-modal #sitemap .content-box .con-head {height: 195px;}
	#menu-modal #sitemap .content-box .con-head .logo-box {padding: 0 20px;}
	#menu-modal #sitemap .content-box .con-head .btn-close {top: 30px; right: 20px;}
	#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn a {border-radius: 10px;}
	#menu-modal #sitemap .content-box .sitemap-list > li .menu-01 {font-size: 1.125rem;}
}
@media screen and (max-width:425px) {
	#menu-modal #sitemap .content-box {display: block;}
	#menu-modal #sitemap .content-box .con-head {height: 220px;}
	#menu-modal #sitemap .content-box .con-head .logo-box a {width: 60%; min-width: 160px;}
	#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn {width: 100%; margin-top: 20px; flex-direction: column;}
	#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn a {width: 100%; margin-top: 7px; margin-left: 0; padding: 6px 30px; border-radius: 5px; text-align: center;}
	#menu-modal #sitemap .content-box .con-head .logo-box .hd-btn a:first-child {margin-top: 0;}
	#menu-modal #sitemap .content-box .con-head .btn-close .ln {width:24px; height:24px;}
	
	#menu-modal #sitemap .content-box .sitemap-list > li {font-size:1.125rem;}
	#menu-modal #sitemap .content-box .sitemap-list > li .menu02 li {margin-bottom:5px; font-size:1rem;}
}




/*-------------------------------------------------------------------
	분류그룹 : footer
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#footer{position: relative; background-color: #000; z-index: 100;}
#footer .in {position: relative; width: 100%; max-width: 1500px; margin: 0 auto; padding: 2.25rem 0; color: #ffffff; font-size: 1rem; font-weight: 300;}
#footer .in .footer-top {display: flex; margin-bottom: 30px; flex-wrap: wrap; align-items: center;}
#footer .in .footer-top .privacy {font-size: 1.125rem; font-weight: 600; color: #ffffff;}
#footer .in .relate_site{display: none; position: absolute; top: unset; right: 0; width: 15rem; border: 1px solid #494949;}
#footer .in .relate_site >a{display: flex; position: relative; width: 100%; padding: 0.8rem 1.4375rem 0.8rem 1rem; color: #fff; justify-content: space-between;}
#footer .in .relate_site >a::after {content: ''; display: inline-block; width: 20px; height: 20px; background: url(../images/common/i_site.svg) no-repeat center center;}
#footer .in .relate_site >a:before{
	content: ""; display: block; position: absolute; top: 0.7rem; right: 0.6875rem; width: 1rem; height: 1rem; background: url(../images/common/i_slidedown.svg) no-repeat center center; background-size: 100% auto;
}
#footer .in .relate_site >ul{overflow: auto; display: none; position: absolute; left: -1px; bottom: 100%; width: calc(100% + 2px); height: 250px; padding: 0; background-color: #333; border: 1px solid #494949;}
#footer .in .relate_site >ul >li{padding: 0.75rem 1.4375rem;}
#footer .in .relate_site >ul >li:not(:first-child){border-top: 1px solid #494949;}
#footer .in .relate_site >ul >li >a{color: #ffffff;}

#footer .in .footer-con {display: flex; flex-wrap: wrap;}
#footer .in .footer-con li {width: 530px;}
#footer .in .footer-con li:nth-child(1) {margin-bottom: 5px;}
#footer .in .footer-con li:nth-child(2) {margin-bottom: 5px;}
#footer .in .footer-con li:nth-child(2n) {margin-left: 30px;}
#footer .in .footer-con li span {display: inline-block; width: 160px; margin-right: 10px; font-weight: 500;}
#footer .in .footer-con li a {color: #D3D3D3;}
#footer .in .footer-con li a.tel {display: inline-block; width: 140px; margin-right: 10px;}
#footer .in .footer-con li a.tel::before {content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 10px; background: url(../images/common/i_tel.svg) no-repeat center center; vertical-align: middle;}
#footer .in .footer-con li a.mail::before {content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 10px; background: url(../images/common/i_mail.svg) no-repeat center center; vertical-align: middle;}

#footer .in .copy{margin-top: 30px; color: #BFBFBF;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
#footer .in .relate_site >a.on:before{
	-webkit-transform: rotate(180deg); transform: rotate(180deg);
}
#footer .in .relate_site >a:before {-webkit-transform: rotate(0); transform: rotate(0);}
#footer .in .relate_site >a::after {transition: transform 0.3s;}
#footer .in .relate_site >a.on::after {transform: rotate(180deg); transition: transform 0.3s;}

/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#footer .in{padding: 2.25rem 20px;}
	#footer .in .relate_site {right: 20px;}
	#footer .in .footer-top {margin-bottom: 25px;}
}
@media screen and (max-width: 1130px) {
	#footer .in .footer-con li {margin-bottom: 5px;}
	#footer .in .footer-con li:nth-child(2n) {margin-left: 0;}
}
@media screen and (max-width: 1024px) {
	#footer .in .footer-top {margin-bottom: 20px;}
	#footer .in .copy {margin-top: 25px;}
}
@media screen and (max-width: 600px) {
	#footer .in .footer-top .privacy {font-size: 1.063rem;}
	#footer .in .footer-con li {margin-bottom: 12px;}
	#footer .in .footer-con li:nth-child(1) {margin-bottom: 12px;}
	#footer .in .footer-con li:nth-child(2) {margin-bottom: 12px;}
	#footer .in .footer-con li span {display: block; margin-bottom: 5px;}
	#footer .in .footer-con li a.tel {width: 120px;}
	#footer .in .footer-con li a.tel::before {margin-right: 5px;}
	#footer .in .footer-con li a.mail::before {margin-right: 5px;}
	#footer .in .copy {margin-top: 20px;}
}
@media screen and (max-width: 480px) {
	#footer .in {padding-top: 30px;}
	#footer .in .footer-top {margin-bottom: 20px; flex-direction: column; align-items: flex-start;}
	#footer .in .relate_site {position: relative; margin-top: 10px; right: unset;}
}
@media screen and (max-width: 360px) {
	#footer .in .footer-con li a {display: block;}
	#footer .in .footer-con li a.tel {padding-bottom: 3px;}
}