@charset "UTF-8";
@import url(contents.css);

/*-------------------------------------------------
title       :서브
Create date :2023-08-18
-------------------------------------------------*/

#visual {background-color:#000; width:100%; height:44rem; overflow:hidden; position:absolute; left:0; top:0}
#visual .desc {display:none}
#visual .img img {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); min-width:100%; min-height:100%; object-fit:cover; opacity:0.7}

#snb {height:44rem; position:relative; padding-bottom:6rem}
#snb .title {color:#fff; display:block; font-size:6.4rem; font-weight:600; line-height:1.2; width:calc(100% - 8rem); max-width:120rem; margin:0 auto; padding-right:4rem; position:absolute; left:50%; top:calc(50% + 3rem); transform:translate(-50%, -50%)}
#snb .list {width:100%; height:6rem; position:absolute; left:0; bottom:0; background-color:rgba(32,32,32,0.55); z-index:2}
#snb .list .label {display:none}
#snb .list ul {display:flex; height:100%; width:calc(100% - 4rem); max-width:120rem; margin:0 auto}
#snb .list ul li {border-right:1px solid #707070; flex:1 1}
#snb .list ul li:first-child {border-left:1px solid #707070}
#snb .list ul li a {color:#D6D6D6; display:flex; font-size:1.6rem; font-weight:500; align-items:center; justify-content:center; width:100%; height:100%}
#snb .list ul li.active {border:0}
#snb .list ul li.active a {background-color:#0077D4; color:#fff}


#contents {width:calc(100% - 10rem); max-width:120rem; margin:0 auto; padding-top:6rem; padding-bottom:10rem; position:relative; outline:0; word-break:keep-all}
#contents_title {color:#101010; font-size:4.8rem; font-weight:700; line-height:1.2; margin-bottom:6.5rem; position:relative; padding-bottom:3rem; text-align:center}
#contents_title:after {content:''; background-color:#101010; width:5rem; height:0.8rem; position:absolute; bottom:0; left:50%; transform:translateX(-50%)}

.contents_util {position:absolute; top:-9rem; right:0; display:flex; align-items:center; justify-content:flex-end; gap:2rem; z-index:2}
#snb:not(.has-3dep) + #contents .contents_util {top:-9rem}
#snb.has-3dep + #contents .contents_util {top:-14rem}

.location .nav-depth {display:none}
.location ul.path li {color:#eee; display:inline; font-size:1.4rem; vertical-align:middle}
.location ul.path li + li::before {content:''; display:inline-block; font-size:1.2rem; font-family:"xeicon"; margin-right:0.25rem; position:relative; vertical-align:middle}
.location ul.path a {color:#fff; display:inline-block}
.location ul.path li.icon a {display:inline-block; overflow:hidden; width:1.5rem; text-align:center; line-height:0.8}
.location ul.path li.icon a::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; content:''}

.contents_util .util {height:4rem; transform:translateY(-2px)}
.contents_util .util .btn {display:inline-block; overflow:hidden; width:4rem; height:4rem; border-radius:100%; border:1px solid #fff; color:#fff; text-align:center; line-height:4rem; vertical-align:top; -webkit-transition:all 0.2s; transition:all 0.2s; padding:0}
.contents_util .util .btn::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; font-size:1.8rem; font-weight:400; color: inherit;}
.contents_util .util .btn.print::before {content:""}
.contents_util .util .btn.up::before {content:""}
.contents_util .util .btn.down::before {content:""}
.contents_util .util .btn.open::before {content:""}

.contents_util .util .share {display:inline-block; position:relative; vertical-align:top}
.contents_util .util .share .title {margin:0}
.contents_util .util .share .item { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top:4rem; right:0; z-index:1}
.contents_util .util .share .item .list { display: block !important; }
.contents_util .util .share .item a {background-color:#3B4669; border-radius:100%; color:#fff; display:block; font-size:0; overflow: hidden; width:4rem; height:4rem; line-height:4rem; position:relative; text-align: center; margin-top:0.5rem}
.contents_util .util .share .item a::before {display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height:inherit; font-size:1.8rem; transition: all 0.2s}
.contents_util .util .share .item .facebook a::before {content: ""; }
.contents_util .util .share .item .twitter a::before {content: ""; background:url("/kor/img/sub/twitter-x.png") no-repeat center center; background-size:1.5rem;}
.contents_util .util .share .item .band a::before { font-size: 2rem; font-family:'Roboto'; font-weight:600; content: 'b'; }
.contents_util .util .share .item .urlShare a {font-family:'Roboto'; font-weight:600; font-size:1.4rem}
.contents_util .util .share.active .btn {background-color: #fff; color: #151515 }
.contents_util .util .share.active .item { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1}
.contents_util .util .share .item .facebook a:hover::before {background-color: #0168c8}
.contents_util .util .share .item .twitter a:hover::before {background-color: #000}
.contents_util .util .share .item .band a:hover::before {background-color: #21c531}
.contents_util .util .share .item .urlShare a:hover::before {background-color: #151515}
@media (hover: hover) {
	.contents_util .util .btn:hover {background-color:#fff}
	.contents_util .util .btn:hover::before {color:#151515}
}

#contents_body {display:block; width:100%; height:100%; min-height:60rem}

.depth4_tab ul {align-items:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-bottom:4rem; display:flex; justify-content:center; padding:1rem; width:100%}
.depth4_tab ul li {min-width:20rem; min-height:5rem}
.depth4_tab ul a {border-radius:100rem; background-color:transparent; color:#333; font-size:1.8rem; font-weight:500; display:block; height:100%; padding:1rem; text-align:center; transition:all 0.3s}
.depth4_tab ul li.active a {background-color:#3B4669; color:#fff; transition:all .3s}

@media (hover: hover) {
	.depth4_tab ul a:hover {color:#3B4669}
}

.depth5_tab ul {background-color:#F8F8F8; border-radius:2rem; padding:2rem; margin:4rem 0; display:flex; flex-wrap:wrap; width:100%}
.depth5_tab ul li {width:25%; height:5rem; text-align:center}
.depth5_tab ul a {display:inline-block; color:#333; font-size:1.6rem; font-weight:500}
/*.depth5_tab ul li:nth-child(n+5) a:after {top:0; height:calc(100% + 1px)}*/
.depth5_tab ul li.active a {font-weight:900}

@media (min-width:1024px) {
	.depth5_tab ul a:hover {border-color:#309B10; background-color:transparent; color:#fff}
	.depth5_tab ul a:hover::after {width:100%}
}

#depth5_menu_ul {overflow:hidden; overflow-x:auto; margin:-2rem 0 5rem; padding-left:1rem; border-bottom:1px solid #ddd; white-space:nowrap}
#depth5_menu_ul li {display:inline; margin-right:1rem}
#depth5_menu_ul li.active a {font-weight:400; color:#484c58}
#depth5_menu_ul li.active a::before {width:100%}
#depth5_menu_ul a {display:inline-block; overflow:hidden; position:relative; padding:0 1rem 1.5rem; vertical-align:top}
#depth5_menu_ul a::before {position:absolute; left:0; bottom:0; width:0; height:0.3rem; background-color:#484c58; content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
#depth5_menu_ul a:hover::before, #depth5_menu_ul a:focus::before {width:100%}

/*tabA*/
.depth4_tab.tabA ul li {flex: 0 1 20%; -webkit-flex: 0 1 20%}
.depth4_tab ul li:nth-child(n+5) a {margin-top:0}

.icon_tab {margin-bottom:5rem}
.icon_tab ul {display:flex; flex-wrap:wrap; width:100%}
.icon_tab ul li {border:1px solid #ddd; border-right:0; flex:0 auto; width:14.285%}
.icon_tab ul li:first-child {border-radius:0.5rem 0 0 0.5rem}
.icon_tab ul li:last-child {border-right:1px solid #ddd; border-radius:0 0.5rem 0.5rem 0}
.icon_tab ul li a {display:block; font-size:1.5rem; height:100%; line-height:1.4; padding:1.5rem 2rem; position:relative; text-align:center; word-break:keep-all}
.icon_tab ul li a:before {content:''; background-repeat:no-repeat; background-position:center; display:block; width:7rem; height:5rem; margin:0 auto 1rem; transition:all .2s}
.icon_tab ul li a:after {content:''; width:calc(100% + 2px); height:calc(100% + 2px); border:2px solid transparent; position:absolute; left:-1px; top:-1px; transition:all .2s}
.icon_tab ul li a:hover:before {animation-name:hover01; animation-duration:1s}
.icon_tab ul li a:hover:after {border-color:#60bb46}
.icon_tab ul li:first-child a:after {border-radius:0.5rem 0 0 0.5rem}
.icon_tab ul li:last-child a:after {border-radius:0 0.5rem 0.5rem 0}
.icon_tab ul li.active a:focus::after,
.icon_tab ul li a:focus::after {border:1px dotted #000}
/*active*/
.icon_tab ul li.active a {color:#60bb46; font-weight:500}
.icon_tab ul li.active a:after {border-color:#60bb46}

@media (max-width:767px) {
	.icon_tab ul li {width:25%; border-radius:0.5rem !important}
	.icon_tab ul li:nth-child(4n) {border-right:1px solid #ddd}
	.icon_tab ul li:nth-child(n+5) {border-top:0}
	.icon_tab ul li a {padding:1rem 0.5rem; font-size:1.3rem}
	.icon_tab ul li a:before {width:5rem; height:4rem; background-size:cover; margin:0 auto 0.5rem}
	.icon_tab ul li a:after {border-radius:0.5rem !important}
}

/* 사이트맵 */
.sitemap {border-top:1px solid #707070; border-bottom:1px solid #707070; line-height:1.4; text-align:left}
.sitemap dl {border-bottom:1px solid #ddd; display:flex; flex-wrap:wrap; margin-bottom:-1px; padding:4rem 0}
.sitemap dt {color:#151515; font-size:3.2rem; font-weight:700; width:20vw}
.sitemap dd {width:calc(100% - 20vw); padding-top:1rem}
.sitemap .menu {display:flex; flex-wrap:wrap}
.sitemap .menu > li {width:25%; padding-right:3rem}
.sitemap .menu > li:nth-child(n+5) {margin-top:4.5rem}
.sitemap .menu > li > a {color:#333; font-weight:600; transition:all .3s}
.sitemap .sub-menu {margin-top:1rem}
.sitemap .sub-menu li {padding-left:1.2rem; position:relative}
.sitemap .sub-menu li:before {content:''; background-color:#555; border-radius:100%; width:0.4rem; height:0.4rem; position:absolute; left:0; top:1.1rem}
.sitemap .sub-menu li + li {margin-top:0.5rem}
.sitemap .sub-menu a {color:#555; font-size:1.6rem; position:relative; transition:all .3s}
.sitemap .sub-menu a:after {content:''; background-color:#151515; width:0; height:1px; position:absolute; left:0; bottom:0; transition:all .3s}

@media (hover: hover) {
	.sitemap .menu > li > a:hover {color:#0077D4}
	.sitemap .sub-menu a:hover {color:#151515}
	.sitemap .sub-menu a:hover:after {width:100%}
}

@media (max-width:1380px) {
	.sitemap dt {width:100%}
	.sitemap dd {width:100%}
}

@media (max-width:1024px) {
	.sitemap dt {font-size:3.2rem}
	.sitemap .menu {margin-top:1rem}
	.sitemap .menu > li {width:50%}
	.sitemap .menu > li:nth-child(n+3) {margin-top:3rem}
}

@media (max-width:768px) {
	.sitemap dl {padding:3rem 0}
	.sitemap dt {font-size:2.8rem}
	.sitemap .menu > li:nth-child(n+3) {margin-top:2rem}
	.sitemap .sub-menu {margin-top:0.5rem}
	.sitemap .sub-menu li {padding-left:0.9rem}
	.sitemap .sub-menu li:before {top:0.8rem}
}