@charset "utf-8";

#container{margin-bottom: 50rem;}
#container > .wrap02{display: flex; margin-top: 50rem;}
#snb{width: 279rem; margin-right: 90rem;}
#snb h2{width: 100%; height: 129rem; background:#4656b7;border-radius: 20rem; color: #fff; font-size: 28rem; font-weight: 700; font-family: 'NEXONLv1'; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 20rem;}

#snb .depth1{margin-top: 14rem;}
#snb .depth1 > li > a{font-size: 18rem; background: #e6eaf7; display: block; padding: 13rem 27rem; border-radius: 16rem; position: relative; font-weight: 500; border: 1px solid #e6eaf7; margin-bottom: 10rem;}
#snb .depth1 > li > a::before{position: absolute; content: ""; width: 14px; height: 14px; top: 50%; transform: translateY(-50%); background: url('../img/sub/snb_bf.png') no-repeat right center; right: 20rem; background-position-x: -25px;}
#snb .depth1 > li > a.on{color: #4656b7; font-weight: 700; background: #fff; border: 1px solid #4656b7;}
#snb .depth1 > li > a.on::before{background-position-x: 0;}
#snb .depth1 > li > a.non::before{display: none;}

#snb .depth2{display: none; margin: 20rem 30rem;}
#snb .depth2 > li{margin-bottom: 8rem;}
#snb .depth2 > li > a{display: block; font-size: 16rem; position: relative; padding-left: 16rem; color: #666; transition: .2s; word-break: break-all;}
#snb .depth2 > li > a::after{position: absolute; content: ""; background: url('../img/sub/snb_arrow.png') no-repeat; width: 9rem; height: 12rem; left: 0; top: 7px;}
#snb .depth2 > li > a.on,
#snb .depth2 > li > a:hover{font-weight: 700; font-weight: 700;}
#snb .depth2 > li > a.on span,
#snb .depth2 > li > a:hover span{border-bottom: 1px solid #666;}

.depth01 { margin: 10rem 0 15rem 5rem; }
.depth01 > li { position: relative; margin: 13rem 0; padding: 0 0 0 18rem; }
.depth01 > li::before { display: block; position: absolute; content: ""; top: 10rem; left: 0; height: 0; border-left: 7rem solid #228881; border-top: 4rem solid transparent; border-bottom: 4rem solid transparent; }
.depth01.none > li { padding-left: 0; }
.depth01.none > li::before { display: none; }

.depth02 { margin: 5rem 0 10rem 5rem; }
.depth02 > li { position: relative; margin: 5rem 0; padding: 0 0 0 17rem; }
.depth02 > li::before { display: block; position: absolute; content: ""; top: 11rem; left: 0; width: 4px; height: 4px; background: #646464; }
.depth02.none > li::before { display: none; }

#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;}

.article{width: calc(100% - 369rem);}

.loca_wrap{line-height: 58rem; border-top: 1px solid #dfe4f1; border-bottom: 2px solid #657ab9;}
.loca_wrap .wrap02{display: flex; justify-content: space-between; align-items: center; }

.loca ul{display: flex;}
.loca ul li{margin-right: 20rem; padding-right: 20rem; position: relative;}
.loca ul li::before{position: absolute; content: ""; width: 7px;height: 12px; right: -6px; top: 51%; background: url('../img/sub/loca_arrow.png'); transform: translateY(-50%);}
.loca ul li:last-child::before{display: none;}
.loca ul li a{display: block; font-size: 16rem;}
.loca ul li:first-child a{text-indent: -9999px; background: url('../img/sub/home.png') no-repeat center center; width: 19px;}
.loca ul li:last-child a{font-weight: 700;}

.util{display: flex; align-items: center;}

.share_wrap{position: relative;}
.sns_wrap{position: absolute;top: 50px;right: 0;background: #fff;border: 1px solid #323232;padding: 5rem 17rem;z-index: 100;line-height: normal; border-radius: 50rem;}
.sns_wrap a{display: block;padding: 8rem 10rem 10rem 2rem;position: relative;font-size: 15rem;border-bottom: 1px dotted #ddd;text-indent: -9999px;}
.sns_wrap a:last-child{border-bottom: none;}
.sns_wrap a::before{position: absolute;content: "";background: url('../img/sub/share_sns.png') no-repeat;width: 25px;height: 25px;left: -7px;top: 7px;}
.sns_wrap a.facebook::before{background-position-x: -25px;}
.sns_wrap a.twitter::before{background-position-x: -50px;}
.sns_wrap a.band::before{background-position-x: -75px;}

.util .share, .util .print{position: relative; display: block; padding-left: 33rem; text-indent: -9999px;}
.util > a.print{margin-right: 30rem;}
.util .share::before, .util .print::before{position: absolute; content: ""; width: 27rem; height: 28rem; left: 0; top: 15px; background: url('../img/sub/util.png'); background-position: -37px -2px;}
.util > a.print::before{background-position: -63px -1px;}

.article > h3{font-size: 32rem; color: #3a3a3a; font-family: 'NEXONLv1'; font-weight: 700; padding: 27rem 0 4rem 0;}

@media all and (max-width:1400px){
    #snb{width: 240rem; margin-right: 60rem;}
    .article{width: calc(100% - 300rem);}
}

@media all and (max-width:1250px){
    .util > a.print{margin-right: 10rem;}
    #snb{display: none;}
    .article{width: 100%;}
    #container > .wrap02{margin-top: 22rem;}
}

#snb a[target="_blank"] span{display: inline-block; padding-right: 20rem; background: url('../img/layout/blank_bl.png') no-repeat right;}

#snb .depth2 li a[target="_blank"] span{background-image: url('../img/layout/blank_s_gray.png');}