@charset "UTF-8";

#container { position: relative; }
#container::before { display: block; position: absolute; content: ""; width: 100%; height: 230rem; top: 0; left: 0; z-index: -1; background: rgb(246, 247, 253); background: linear-gradient(0deg, rgb(246, 247, 253) 0%, rgb(228, 238, 251) 100%); }
@media all and (max-width: 480px){
 #container::before { height: 250rem; }
 }
#container > .wrap { position: relative; }
#container h2,
#container h3 { font-family: "JalnanGothic", "맑은 고딕", sans-serif; }

/*snb*/
#snb { width: 304rem; position: absolute; top: 200rem; left: 0; border-radius: 20rem; background: #ffffff; overflow: hidden; box-shadow: 0 0 49rem 15rem rgba(215, 228, 244, 0.7); }
#snb > div { display: flex; flex-wrap: wrap; align-items: center; -webkit-box-align: center; -ms-flex-align: center; height: 120rem; background: #1642a5; color: #ffffff; }
#snb > div h2 { width: 100%; text-align: center; font-size: 22rem; line-height: 1; }
#snb .depth1 { padding: 10rem 20rem; line-height: 1.3; }
#snb .depth1 > li:not(:nth-child(1)) { border-top: 1px solid #c1d6f6; }
#snb .depth1 > li > a { display: block; padding: 20rem 0; font-size: 18rem; font-weight: 500; }
#snb .depth1 > li > a.on { font-weight: 700; }
#snb .depth1 > li.has > a { padding-right: 25rem; position: relative; }
#snb .depth1 > li.has > a::after { display: block; position: absolute; content: ""; width: 17rem; height: 17rem; background: url("/design/water/img/sub/arrow_snb.png") no-repeat center 0/100%; top: 24rem; right: 0; }
#snb .depth1 > li.has > a.on::after { background-position: center 100%; }
#snb .depth2 { display: none; padding: 10rem 15rem; margin-bottom: 15rem; background: #f7faff; }
#snb .depth2 > li { padding: 5rem 0 5rem 12rem; position: relative; }
#snb .depth2 > li::before { display: block; position: absolute; content: ""; width: 4px; height: 4px; background: #c1d6f6; border-radius: 50%; top: 14rem; left: 0; }
#snb .depth2 > li > a { font-size: 16rem; }
#snb .depth2 > li > a.on { border-bottom: 1px solid #323232; }

#snb a[target="_blank"] span {position:relative; padding-right:20rem;}
#snb a[target="_blank"] span:before {content:''; position:absolute; top:4rem; right:0; width:14rem; height:14rem; background:url('../img/layout/blank.png') no-repeat 0 0;}
#snb a[target="_blank"] span:before {background-position-x: -14px;}
#snb a[target="_blank"]:before {display:none;}
#snb .depth1 > li > a.on[target="_blank"] span:before {background-position-x: -28px;}

.sub_tab a[target="_blank"] span {position:relative; padding-right:20rem;}
.sub_tab a[target="_blank"] span:before {content:''; position:absolute; top:4rem; right:0; width:14rem; height:14rem; background:url('../img/layout/blank.png') no-repeat 0 0;}

@media all and (max-width: 1240px){
 #snb { display: none; }
 }

/*sub_top*/
.sub_top { display: flex; flex-wrap: wrap; align-items: center; -webkit-box-align: center; -ms-flex-align: center; width: 100%; position: relative; text-align: center; height: 230rem; padding: 30rem 0; color: #0d3970; }
.sub_top::after,
.sub_top::before { display: block; position: absolute; content: ""; bottom: 0; z-index: -1; }
@media all and (max-width: 1240px){
 .sub_top::after,
 .sub_top::before { zoom: 0.6; }
 }
@media all and (max-width: 768px){
 .sub_top::after,
 .sub_top::before { display: none; }
 }
.sub_top::before { width: 246rem; height: 208rem; background: url("/design/water/img/sub/sub_top_bg1.png") no-repeat left bottom/100%; left: 35rem; }
.sub_top::after { width: 138rem; height: 174rem; background: url("/design/water/img/sub/sub_top_bg2.png") no-repeat right bottom/100%; right: 35rem; }
.sub_top .info { width: 100%; }
.sub_top h3 { font-size: 33rem; }
.sub_top .loca { display: flex; flex-wrap: wrap; justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; align-items: center; }
.sub_top .loca > li { margin: 5rem 3px 0; position: relative; }
.sub_top .loca > li:not(:nth-child(1))::before { display: block; position: absolute; content: ""; width: 6px; height: 10px; background: url("/design/water/img/sub/arrow_loca.png") no-repeat center/100%; top: 10rem; left: -6px; }
.sub_top .loca > li a { margin: 0 14rem; font-size: 15px; }
@media all and (max-width: 768px){
 .sub_top .loca > li a { margin: 0 10rem; }
 }
.sub_top .loca .home a { display: block; text-indent: -99999rem; width: 18rem; height: 21rem; background: url("/design/water/img/sub/icon_home.png") no-repeat center/100%; }
.sub_top .util { display: flex; flex-wrap: wrap; align-items: center; -webkit-box-align: center; -ms-flex-align: center; position: absolute; bottom: 60rem; right: 180rem; }
.sub_top .util > *:not(:nth-child(1)) { margin-left: 10rem; }
.sub_top .util a { display: block; text-indent: -99999rem; width: 60rem; height: 60rem; border-radius: 50%; }
.sub_top .util a.print,
.sub_top .util a.share { border: 1px solid #bdd3f5; background: #fff url("/design/water/img/sub/icon_util.png") no-repeat 0 center/200%; }
.sub_top .util a.share { background-position: 0 center; }
.sub_top .util a.print { background-position: 100% center; }
.sub_top .util .share_wrap { position: relative; }
.sub_top .util .sns_wrap { position: absolute; top: 60rem; left: 5rem; z-index: 100; }
.sub_top .util .sns_wrap a { position: static; width: 50rem; height: 50rem; background-image: url("/design/water/img/sub/icon_sns.png"); background-repeat: no-repeat; background-position: 0 0; background-size: 700% 200%; margin-top: 10rem; }
.sub_top .util .sns_wrap a.facebook { background-color: #445e99; background-position: 16.666% 0; }
.sub_top .util .sns_wrap a.twitter { background-color: #000; background-position: 0 0; }
.sub_top .util .sns_wrap a.band { background-color: #147526; background-position: 66.664% 0; }
@media all and (max-width: 1240px){
 .sub_top .util { width: 100%; position: static; justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; }
 .sub_top .util a { width: 50rem; height: 50rem; }
 }
@media all and (max-width: 480px){
 .sub_top { height: 250rem; }
 }

/*content*/
#content { margin-top: 90rem; padding-left: 394rem; }
@media all and (max-width: 1240px){
 #content { padding-left: 0; }
 }
#content .sub_tab { margin-bottom: 60rem; padding: 10rem; background: #f7faff; border: 1px solid #c1d6f6; border-radius: 10rem; }
#content .sub_tab ul { display: flex; flex-wrap: wrap; align-items: center; -webkit-box-align: center; -ms-flex-align: center; }
#content .sub_tab ul li { padding: 10rem 25rem; position: relative; }
#content .sub_tab ul li:not(:nth-child(1))::before { display: block; position: absolute; content: ""; width: 4px; height: 4px; background: #c1d6f6; border-radius: 50%; top: 50%; left: -2px; transform: translateY(-50%); }
#content .sub_tab ul li a.on { font-weight: 600; border-bottom: 1px solid #323232; }
@media all and (max-width:599px){
 #content .sub_tab ul li {padding:2rem 10rem; width:100%;}
 #content .sub_tab ul li::before {display:none !important;}
}