@charset "UTF-8";

/*사용자설정 시작*/
	.sub_nav h2 { height:150rem; } /*h2 높이*/
/*사용자설정 끝*/

#snb {width: 260rem; margin-right: 60rem;}
.sub_nav.ver2 h2 {font-family: var(--point_font); font-weight: 600; font-size: 28rem; border-radius: 0 60rem 0 0;}
.sub_nav.ver2 h2 span {font-family: 'Pretendard', sans-serif; font-weight: 400;}

.article > .top {padding-bottom: 20rem; position: relative;}
h2 {font-family: var(--point_font); display: flex; flex-wrap: wrap; align-items: center; gap: 10rem; font-size: 16rem; margin-bottom: 5rem;}
h2::before {content: ''; width: 30rem; height: 14rem; display: block; background: url('/WebContent/design/sunbi/img/main/icon-h2.png') no-repeat center/contain;}
h3 {font-family: var(--point_font); font-weight: 600; font-size: 32rem; line-height: 1.3;}

.loca_wrap{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 45rem;}
.loca {width: 100%; margin-bottom: 75rem;}
.loca ul{display: flex;}
.loca ul li{margin-right: 20rem; padding-right: 20rem; position: relative;}
.loca ul li::before{position: absolute; content: ""; width: 6px; height: 11px; right: -2px; top: 8px; background: url('/WebContent/design/sunbi/img/sub/loca_arrow.png') no-repeat center;}
.loca ul li:last-child::before{display: none;}
.loca ul li a {display: block; }
.loca ul li:first-child a{text-indent: -9999px; background: url('/WebContent/design/sunbi/img/sub/home.png') no-repeat center center; width: 30px;}
.loca ul li:last-child a{font-weight: 700;}

.util, .zoom {display: flex; align-items: center;}
.util {background: #ffffff; padding: 10rem; border-radius: 10rem;}
.zoom{margin-right: 20rem; color: #323232;}
.zoom > a{display: block; text-indent: -9999px; background: #f6f6f6; width: 28rem; height: 28rem; position: relative;}
.zoom > a::before{position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: url('/WebContent/design/common/template/sprite.png') no-repeat; background-position: -124px 0;}
.zoom > a.minus::before{background-position: -124px -20px;}
.zoom > span{margin: 0 20rem;}

.share_wrap{position: relative;}
.sns_wrap{position: absolute; top: 30px;left: 50%; z-index: 100; transform: translateX(-50%); padding: 15px;}
.sns_wrap a{ position: relative; display: block; width: 25px;height: 25px; background: url('/WebContent/design/common/template/sprite.png') no-repeat -148px 0; text-indent: -999999rem; margin-bottom: 20rem; }
.sns_wrap a::before {content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: #f7f7f7; transform: translate(-50%, -50%); z-index: -1; border-radius: 10rem;}
.sns_wrap a.facebook{background-position-y: -19px;}
.sns_wrap a.twitter{background-position-y: -42px;}
.sns_wrap a.band{background-position-y: -65px;}

.sns_wrap a.close2{background: #333; color: #fff; text-align: center; padding: 2rem; margin-bottom: 2rem;}
/* .sns_wrap a.close2::before, .sns_wrap a.close2::after {content:''; position:absolute; left:16rem; top:9rem; width:2px; height:18rem; background:#333; transform:rotate(45deg); }
.sns_wrap a.close2::after{ transform:rotate(-45deg);} */
.sns_wrap a.close2::before{background-image: none;}

.util .share, .util .print{position: relative; text-indent: -999999rem; width: 25rem; height: 25rem; display: block; background: url('/WebContent/design/common/template/sprite.png') no-repeat; background-position: -118px -37px;  }
.util > a.print{margin-left: 20rem;}
.util > a.print{background-position: -116px -69px; top: 0;}
.util > a.print::after{position: absolute; content: ""; width: 1px; height: 10px; background: #b2b2b2; left: -10rem; top: 50%; transform: translateY(-50%);}

@media all and (max-width: 1420px){
    #snb h2{font-size: 25rem;}
    .article > .top{height: auto;}
}
@media all and (max-width: 1250px){
    #container::before, #snb{display: none;}
    .article{width: 100%;}
}
@media all and (max-width: 980px) {
	.article > .top	{background-position-x: calc(100% - 200rem);}
	.zoom > span {display: none;}
	.zoom > a.minus {margin-left: 10rem;}
}
@media all and (max-width: 768px) {
		.article > .top	{background-position: calc(100% - 20rem) 14rem;}
    .loca_wrap{flex-wrap: wrap;}
    .loca_wrap .loca{width: 100%; margin-bottom: 27rem;}
}
@media all and (max-width: 600px){
		#container {margin-top: 30rem;}
		#container::after {display: none;}
    .article > .top{padding: 10rem 0 22rem 0; background: none;}
    .article > .top h3{text-align: center;}
    .loca_wrap .loca {margin-bottom: 35rem;}
    .loca ul{flex-wrap: wrap; }
    .util > a.print { display: none; }
}

/*sub tab*/
/* .sub_tab {display:flex; flex-wrap:wrap; margin-bottom:40rem; }
.sub_tab li { width:calc(25% + 1px); margin:-1px 0 0 -1px; border:1px solid #ddd; background:#fafafa; }
.sub_tab li a { display:flex; align-items:center; justify-content:space-between; padding:0 20rem; height:50rem; } */
.sub_tab li.on a,
.sub_tab li a:hover { background:#fff; color:var(--common_color); font-weight:600; }
.sub_tab li.on a::after,
.sub_tab li a:hover::after {content:''; display:block; width:6rem; height:9rem; border-right:2px solid var(--common_color); border-bottom:2px solid var(--common_color); transform:rotate(45deg); margin-bottom:5rem; }
.sub_tab li.on {border-color:var(--common_color); box-shadow:0 0 3rem rgba(0,0,0,0.5); z-index:1; }

.page_research_box {display: none;}
/* .page_research_box {border-radius: 10rem;}
.page_research_box dd > a, .page_research_box dd > button, .page_research_box dd > input[type="button"], .page_research_box dd > input[type="submit"] {border-radius: 10rem;}
.page_research_box .page_manager {border-radius: 0 0 10rem 10rem;} */

footer {padding-top: 140rem;}
footer .wrap {position: relative;}
footer .wrap::before {content: ''; display: block; width: 117rem; height: 120rem; background: url('/WebContent/design/sunbi/img/sub/footer-char.png') no-repeat right bottom/contain; position: absolute; top: calc(-120rem - 1px); right: 70rem;}

@media print {
	body::before {display: none;}
}
