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

/*-------------------------------------------------
title       :서브
Create date :2023-01-02
-------------------------------------------------*/

#main_wrap {width:calc(100% - 4rem);max-width:140rem; margin:0 auto; clear:both; overflow:hidden; padding-top:38rem}

#visual {position:absolute; top:0; left:0; width:100%; height:45rem}
#visual:after {content:''; background-color:rgb(0 0 0 / 40%); height:7rem; width:100%; position:absolute; left:0; bottom:0; z-index:1}
#visual .desc {text-align:center; position:absolute; top:58%; left:50%; color:#fff; transform:translate(-50%, -50%); width:100%; max-width:140rem; line-height:1.2; z-index:1}
#visual .desc .title {display:block; font-size:4.8rem; font-weight:600; margin-bottom:1rem}
#visual .desc .txt {font-size:2.4rem; font-weight:300}
#visual .desc .txt small {display:block; font-size:2rem; font-weight:400; opacity:0.3}
#visual .img {background-color:#000; display:block; width:100%; height:45rem; overflow:hidden; position:relative}
#visual .img img {position: absolute; right: 0; width: 100%; max-width: none; min-height: 100%; margin: 0 auto; opacity: 0.8; animation: img both 3s;  object-fit: cover;}

#snb {display:none; width:30rem; position:relative; float:left}
#snb .title {background:linear-gradient(150deg, #1e4565, #527f6d); color:#fff; display:flex; font-size:2.6rem; font-weight:600; height:15rem; position:relative; align-items:center; justify-content:center}
#snb .list > ul > li > a {background-color:#fff; border-bottom:1px solid #ddd; color:#888; display:block; font-size:1.8rem; height:5.5rem; line-height:3; position:relative; padding:0 3rem; transition:all .3s}
#snb .list > ul > li > a:before {content:''; background:url('/kor/img/layout/menu-on.png') no-repeat bottom right 1px; background-size:contain; border-bottom:1px solid #527f6d; height:4px; width:0; position:absolute; left:0; bottom:-1px; opacity:0.5; transition:all .3s}
#snb .list > ul > li > a:after {content:''; color:#527f6d; font-size:1.6rem; font-family:'xeicon'; font-weight:normal; position:absolute; right:3rem; top:50%; transform:translateY(-50%); transition:all .3s}
#snb .list > ul > li.type1 > a:after {content:''}
#snb .list > ul li a.linkWindow:after {content:''; vertical-align:0; margin-left:0.5rem}
/*3depth*/
#snb .list > ul ul {background-color:#fafafa; border-radius:0 0 0.5rem 0.5rem; padding:1.5rem 3.5rem}
#snb .list > ul ul li {margin:0.5rem 0; position:relative; padding-left:1.2rem}
#snb .list > ul ul li:before {content:''; border-left:6px solid #688f7f; border-top:3px solid transparent; border-bottom:3px solid transparent; position:absolute; left:0; top:1.2rem}
#snb .list > ul ul li a {color:#888; display:inline-block; font-size:1.6rem; position:relative; transition:all .3s}

/*active*/
#snb .list > ul > li.active > a {color:#527f6d; font-weight:600}
#snb .list > ul > li.active > a:before {width:100%}
#snb .list > ul ul li.active a {color:#555}

@media screen and (min-width:1024px){
	/*  효과*/
	#snb .list > ul > li > a:hover {color:#527f6d}
	#snb .list > ul ul li:hover a {color:#555}
}


#contents {width:100%; max-width:140rem; margin:0 auto; outline:0}
#contents .contents_util {position:relative;padding:14.5rem 0 0 0;text-align:center}
#contents_title {color:#000; display:inline-block; font-size:4rem; font-weight:600; line-height:1.4; position:relative; word-break:keep-all; margin-bottom:4rem}

.location {display:flex; align-items:flex-start; position:absolute; left:0; top:0; width:100%; z-index:5}
.location ul.path {border-left:1px solid #3c414c; display:block; width:7.5rem; height:7rem; line-height:7rem}
.location ul.path li {display:none}
.location ul.path li.icon {display:block; width:100%; height:100%}
.location ul.path li.icon a {display:block; width:100%; height:100%; overflow:hidden; position:relative; text-align:center}
.location ul.path li.icon a::before {content:''; color:#fff; font-family:"xeicon"; font-size:2.4rem; display:block; width:100%; height:100%; line-height:inherit}

.location .nav-depth {display:flex; align-items:flex-start; width:calc(100% - 7.5rem); z-index:1; padding-right:20%}
.location .list {width:33.3%; max-width:31rem; margin:7rem 0 0 -1px; position:relative}
.location .list li {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0}
.location .list a {display:flex; font-size:1.8rem; align-items:center; position:relative; height:0}
.location .list a:hover {color:#189da7}
.location .list li.active {border:0 !important; border-right:1px solid #3c414c !important; border-left:1px solid #3c414c !important; visibility:visible; overflow:visible; width:auto; height:auto; opacity:1; position:absolute; top:-7rem; width:100% !important; padding:0 !important; background:0 none !important}
.location .list li.active a {color:#fff; font-size:1.8rem; font-weight:500; height:7rem !important; overflow:hidden; padding:2rem 3rem; position:relative; line-height:1.1; text-align:left;}
.location .list li a:after {content:''; font-family:'xeicon'; font-size:1.6rem; position:absolute; top:50%; right:2.5rem; margin-top: -0.9rem;}
.location .list li.active a:after {content:''; font-size:1.3rem; right:3rem; top:50%; -webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%); margin-top:0;}
.location .list li.hide {display:none}

.location .list.active li {background-color:#fff; border:1px solid #ddd; border-top:0; visibility:visible; overflow:visible; width:auto; height:auto; opacity:1}
.location .list.active li a {padding:1rem 3rem; height:6rem; text-align: left; line-height: 1.1;}
.location .list.active li.on a {color:#189da7}
.location .list.active li.on a:after {content:''; background-color:#2aaeb8; border-radius:100%; width:.7rem; height:.7rem; right:2.9rem; top: 50%; margin-top: -0.5rem;}

#head_menu_depth4,
#head_menu_depth5 {display:none}

.contents_util .util {position:absolute; right:0; top:1rem; z-index:5}
.contents_util .util .btn {color:#fff; display:inline-block; width:5rem; height:5rem; line-height:5rem; overflow:hidden; text-align:center; vertical-align:top; transition:all 0.2s}
.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; vertical-align:top}
.contents_util .util .share .item { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; top: auto; right:0; overflow: hidden; top: 100%; width:100%; margin-top: 1rem; padding:0 1rem; border: 1px solid #ddd; background-color: #fff; white-space: nowrap; z-index:1}
.contents_util .util .share .item::before { position: absolute; top: auto; right:5.4rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -0.3rem; width: 1rem; height: 1rem; background-color: #fff; border-top: 1px solid #ddd; border-left: 1px solid #ddd; content: ''; -webkit-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); }
.contents_util .util .share .item .list {display:flex; align-items:center}
.contents_util .util .share .item .list li {display:inline-block; padding:0.5rem 0.5rem 0 0.5rem; vertical-align:middle}
.contents_util .util .share .item a {display: block; overflow: hidden; width: 3rem; height:3.6rem; text-align: center}
.contents_util .util .share .item a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: 3.5rem; font-size: 2rem; -webkit-transition: all 0.2s; transition: all 0.2s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.contents_util .util .share .item a:hover::before, .contents_util .util .share .item a:focus::before { -webkit-transform: scale(1.5); transform: scale(1.5); }
.contents_util .util .share .item .facebook a::before { color: #29487d; content: ""; }
.contents_util .util .share .item .twitter a::before { color: #1da1f2; content: ""; }
.contents_util .util .share .item .kakaostory a::before { color: #ffc20f; content: ""; }
.contents_util .util .share .item .kakaotalk a::before { color: #381e1f; content: ""; }
.contents_util .util .share .item .band a::before { font-size: 2rem; font-family:'Roboto'; font-weight:600; color: #21c531; content: 'b'; }
.contents_util .util .share .item .qrcode a {cursor:pointer; display:inline-block; font-family:'Roboto'; font-weight:600; font-size:1.4rem; width:2rem; height:3rem; line-height: 2.5; overflow:hidden}
.contents_util .util .share .item .qrcode:hover a {color:#ff7043}
.contents_util .util .share .item .qrcode .qr {display:none; background-color:#fff; border:1px solid #ddd; padding:1rem; position:absolute; right:-0.1rem; top:4.1rem; margin-left:-1px; width:100.5%; text-align:center; z-index:1}

.contents_util .util .share .item .qrcode.active .qr {display:block }
.contents_util .util .share .item .urlShare a {font-family:'Roboto'; font-weight:600; font-size:1.4rem; width:2.5rem; line-height: 2.4}
.contents_util .util .share .item .urlShare a:hover {color:#ff7043}
.contents_util .util .share.active .btn {border-radius:100rem; border-color: #000; background-color: #000; color: #fff; }
.contents_util .util .share.active .item { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; margin-top:1rem}

.ssub_title {text-align: center; margin-bottom: 1rem; opacity: .5;}

@media (min-width:1024px) {
	.contents_util .util .share .item .qrcode:hover .qr {display:block}
}

#contents_body {display:block; width:100%; height:100%}
.depth4_tab {margin-bottom:5rem}
.depth4_tab ul {border-bottom:1px solid #ccc; display:flex; flex-wrap:wrap; justify-content:center; width:100%}
.depth4_tab ul li {margin:0 3rem}
.depth4_tab ul a {color:#333; font-size:2rem; font-weight:700; display:block; height:100%; line-height:1.4; word-break:keep-all; position:relative; padding:2rem 0.5rem; transition:all 0.2s}
.depth4_tab ul a:before {content:''; background-color:#17bcc0; position:absolute; left:0; bottom:-2px; width:0; height:3px; transition:all 0.3s}
.depth4_tab ul li.active a {color:#0ba2b5}
.depth4_tab ul li.active a:before {width:100%}
.depth4_tab ul li.active:focus::before,
.depth4_tab ul li a:focus::before {border:1px dotted #000}
.depth4_tab ul li.active + li {display:none}
@media (min-width:1024px) {
	.depth4_tab ul a:hover {color:#0ba2b5}
}

#depth5_menu_div {border:1px solid #ddd; background-color:#f7f7f7; text-align:center; margin:-5.1rem 0 5rem}
#depth5_menu_ul {overflow:hidden; min-width:64rem}
#depth5_menu_ul li {display:inline; margin:0 2rem}
#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:2.5rem 1rem; 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%}

/*카테고리 탭메뉴*/
.icon_tab {margin-bottom:5rem}
.icon_tab ul {border-bottom:1px solid #ccc; display:flex; flex-wrap:wrap; margin-bottom:5rem; justify-content:center; width:100%}
.icon_tab ul li {margin:0 3rem}
.icon_tab ul a {color:#333; font-size:2rem; font-weight:700; display:block; height:100%; line-height:1.4; word-break:keep-all; position:relative; padding:2rem 0.5rem; transition:all 0.2s}
.icon_tab ul a:before {content:''; background-color:#17bcc0; position:absolute; left:0; bottom:-2px; width:0; height:3px; transition:all 0.3s}
.icon_tab ul li.active a {color:#0ba2b5}
.icon_tab ul li.active a:before {width:100%}
.icon_tab ul li.active:focus::before,
.icon_tab ul li a:focus::before {border:1px dotted #000}
.icon_tab ul li.active + li {display:none}
@media (min-width:1024px) {
	.icon_tab ul a:hover {color:#0ba2b5}
}

@keyframes hover01 {
	0% {transform:scale(1.1, 0.9)}
	25% {transform:scale(0.9, 1.1)}
	50% {transform:scale(1.1, 0.9)}
	75% {transform:scale(0.9, 1.2)}
	100% {transform:scale(1, 1)}
}

/*카테고리 탭메뉴*/
.icon_tab.type02 {margin-bottom:5rem}
.icon_tab.type02 ul{border-bottom:none; display:flex; flex-wrap:wrap; position:relative; width:calc(100% + .5rem); justify-content:normal}
.icon_tab.type02 ul:after {content:none;}
.icon_tab.type02 ul li {border:1px solid #ddd; width:calc(12.921% - .5rem); padding:0; text-align:center; margin:-1px 0 0 -1px}
.icon_tab.type02 ul li a {color:#aaa; display:block; font-size:1.8rem; font-weight:normal; position:relative; padding:1rem 0}
.icon_tab.type02 ul li a:after {content:none; background-color:#0b979b; height:3px; width:100%; opacity:0; position:absolute; bottom:-1.7rem; left:50%; transform:translateX(-50%); z-index:1}
.icon_tab.type02 ul li.active {border:1px solid #0b979b;  z-index:1}
.icon_tab.type02 ul li a:hover,
.icon_tab.type02 li a.on,
.icon_tab.type02 ul li.active a {color:#0b979b}
.icon_tab.type02 ul li.active a:after,
.icon_tab.type02 li a.on:after {opacity:1}

@media (max-width:768px){
	
	.icon_tab.type02 ul li {width:calc(25.992% - 0.5rem)}
}