@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-family: 'Noto Sans KR', 'Malgun Gothic', 'Dotum';
 vertical-align: baseline;
}
caption{position:absolute; left:-3000%;}
a { transition: none;}
a:focus-visible {outline: 2px #000 solid ;}
body { height: 100%; background-color:#fff;overflow-x: hidden;}
.sc-lock { overflow-y: hidden;}
.wraper { position: relative;}

input::placeholder {color: #555;}
input::-webkit-input-placeholder {color: #555;}
input:-ms-input-placeholder {color: #555;}

/* skip */
.skip{position:fixed; z-index:10000; top: 0; left:0; width: 100%;}
.skip dl{ position:relative;}
.skip dl dt{ display:none;}
.skip dl dd a{display:block; position:absolute; left:-3000px; top:-100px; padding:20px 0; width:0; z-index:10000; }
.skip dl dd a:focus { position:fixed; display:block; left:0; top:0; width:100%; font-size:1em; line-height:30px; background:#000; color:#fff; text-align:center;}

/*popup zone */
.nw-popzone {display: none;}
.nw-popzone.on { display: block;}
.top-popzone { position: relative; width: 100%; max-width: 1410px; margin: 0 auto;overflow: hidden; }
.top-popzone > a { display: block;  outline-offset: -2px ;}
.top-popzone img.img-mobile {display: none;width: 100%;height: auto; text-align: center;}
.top-popzone img { width : 100%; height : auto !important; max-width : 100% }
.top-popzone .sld-uis { position:absolute; right:10px; z-index: 100; top: 15px;z-index: 1;line-height: 0;}
.top-popzone .sld-uis button  { width: 18px; height: 18px; background-repeat: no-repeat; font-size: 0; line-height: 0;background-size: auto; background-color: transparent;
  float: left;padding: 0;background-position: center;margin-left: 5px;}
.top-popzone .sld-uis .sl-btn-prev {background-image: url(../images/ic-sl-prev-bk.png);}
.top-popzone .sld-uis .sl-btn-next {background-image: url(../images/ic-sl-next-bk.png);}
.top-popzone .sld-uis .sl-btn-stop {background-image: url(../images/ic-sl-stop-bk.png);}
.top-popzone .sld-uis .sl-btn-play { display: none; background-image: url(../images/ic-sl-play-bk.png);}
.swiper-pagination-bullet-active { background-color: #111426;}

.top-popzone .stop .sl-btn-stop { display: none;}
.top-popzone .stop .sl-btn-play { display: block;}

.top-popzone .pop-check { position: absolute; right:20px; bottom:25px; height:36px; background:#292627; border-radius: 18px; z-index: 1;line-height: 36px;
  color: #ccc;font-size: 13px;padding: 0 20px;width: 200px;box-sizing: border-box;}
.top-popzone .pop-check input[type=checkbox] { position: relative; top:1px}

.top-popzone label+.btn-pop-close { border-left: 1px solid #464646; padding-left: 10px; margin-left: 10px; color: #ccc; }
.top-popzone .swiper-slide a { display: block;}
.top-popzone a:hover { color:#fff; text-decoration: underline;}

/* header */
.nw-header { padding-top:47px;position: relative; background-color: #fff;position: sticky; top: 0;left: 0;z-index: 1000;}
.nw-header-body .logo a { position:absolute; left:0; top: 16px; width: 210px; height:45px; background: url(../images/much-logo.png) no-repeat center center; font-size: 0; line-height: 0; }
.nw-header-site-link { position: absolute; left:0; top:-34px;}
.m-nav-header { display:none; height: 60px; background: #fff;border-bottom: 1px solid #ccc;}
.m-nav-header .mlogo { position:absolute; left:10px; top: 16px; width: 137px; height:30px; background-image: url(../images/much-logo.png); font-size: 0; line-height: 0;
  background-repeat: no-repeat;background-size: contain;}
.m-nav-header .m-nav-close { position: absolute; right:0; width: 60px; height: 60px; background: url(../images/ic-nav-close.png) no-repeat center center; font-size: 0; line-height: 0; }

.nw-header-site-link ul li { display: inline-block;}
.nw-header-site-link ul li+li { border-left:1px solid #eaeaea; padding-left:10px;}
.nw-header-site-link a {display:block; margin-right:10px; font-size: 14px; text-align: center; color: #454545;}
.nw-header-site-link a.on {font-weight: 600; color:#000;}
.nw-header-site-link .top-rt-con {float:right;}

.m-header-site-link { display: none; background: #fff; height:42px;  padding:10px 20px 0 20px; border-bottom:1px solid #ccc; }
.m-header-site-link button { width: 100%; font-size:14px; padding:0 20px; height: 32px; line-height: 32px;  text-align: left; background: url(../images/ic-select-down.png) no-repeat center right 20px;
   border:1px solid #D4D4D4; color: #333; background-size: 12px; }
.m-header-site-link button.on { background-image: url(../images/ic-select-up.png);}
.m-header-site-link button.on + ul { display: block !important;}
.m-header-site-link ul { display: none; border:1px solid #000; position: absolute;width: calc(100% - 40px);box-sizing: border-box; top: 103px;z-index: 99999;background: #fff;}
.m-header-site-link ul li { border-top:1px solid #eeee;}
.m-header-site-link ul li:first-child {border: 0;}
.m-header-site-link ul li a { display: block; padding: 15px 20px;}
.m-header-site-link ul li a:hover,
.m-header-site-link ul li a:focus {color: #000; text-decoration: underline;}

.nw-header-site-link .btn-fa-site { display: none;}

.header-ext-link { position: absolute; top:-78px; right:0;}
.nw-header-sns {float: left;padding-top: 17px;padding-right: 30px;}
.nw-header-sns a { display: inline-block; font-size: 0; line-height: 0; vertical-align: middle;}
.nw-header-sns a img { vertical-align: middle;}
.nw-header-sns a+a { margin-left: 20px;}

.nw-header-language { position: relative; width: 110px; padding-top: 7px;float: left;}
.nw-header-language button { height: 36px; width: 100%; box-sizing: border-box; padding-left: 10px; text-align:left; background: url(../images/ico-select-off.png) no-repeat center right 10px;}
.nw-header-language button.on {background: url(../images/ico-select-on.png) no-repeat center right 10px;}
.nw-header-language button.on + .lang-list { display:block;}
.nw-header-language .lang-list { display:none; position: absolute;  width: 100%; box-sizing: border-box; border:1px solid #111426; padding: 10px 15px; z-index: 12;background: #fff;}
.nw-header-language .lang-list a { display: block; font-size:13px; padding: 8px 0; font-family:'MS PGothic', Osaka, Tahoma, 'noto sans kr', SimSun, Arial, sans-serif;  }
.nw-header-language .lang-list .jp { font-family: 'MS PGothic', Osaka, Arial, sans-serif; }
.nw-header-language .lang-list .zh { font-family: Tahoma, " SimSun ", "SimHei", "Microsoft YaHei"  }
.nw-header-language .lang-list a:hover,
.nw-header-language .lang-list a:focus {color:#000; font-weight:500;}

.btn-nav-open { display: none;}

.nw-header-body { position:relative; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; }
.nw-header-body .navigation > .dim { display: none;}
.nw-header-body .nw-header-body-wrap {position: relative; height: 77px; width: 100%; max-width: 1410px; margin: 0 auto;  }
.nw-header-body .nw-gnb { position: absolute; right:0; top:28px;padding-right: 85px;}
.nw-header-body .nw-gnb > ul {top: 132px;}
.nw-header-body .nw-gnb > ul:after {content:""; display: block; clear: both;}
.nw-header-body .nw-gnb > ul > li {position:relative; float:left; margin-left: 64px;  }
.nw-header-body .nw-gnb > ul > li > a {font-weight: 500; font-size: 20px; color: #000;}
.nw-header-body .nw-gnb > ul > li > a:hover,
.nw-header-body .nw-gnb > ul > li > a:focus { font-weight: 600;}
.nw-header-body:after {display: none;width:100%;height:50px;background-color:#f1f1f1;content: "";}
.lock .nw-header-body:after  {display: block;}

.nw-gnb .now {color:#283483 !important; font-weight: bold;}
.nw-gnb > ul > li > a.on+.d2 { display: block;}
.nw-gnb .d2 {position: absolute;z-index: 500;left: -50px;right:-700px;bottom:-62px;display: none;}
.nw-gnb .d2 a, .nw-gnb .d2 .gp-name { position: relative;font-size:17px; color: #666;letter-spacing: -1.5px;display: inline-block;vertical-align: middle;position: relative;}
.nw-gnb .d2 > ul > li {display: inline-block;vertical-align: middle;position: relative;}
.nw-gnb .d2 > a {display: inline-block;vertical-align: middle;}
.nw-gnb .d2 > ul > li:after {display: inline-block;width:5px;height:5px;border-radius: 50%;background-color:#aaa;content: "";margin:0 12px 0 13px;vertical-align:2px;}
.nw-gnb .d2 > ul > li:last-child:after {display: none;}
.nw-gnb .d2 .active a, .nw-gnb .d2 .active .gp-name {color:#222;font-weight: 500;cursor: pointer;}
.nw-gnb .d2 a:hover,
.nw-gnb .d2 a:focus,
.nw-gnb .d2  .gp-name:hover,
.nw-gnb .d2  .gp-name:focus {color:#222;font-weight: 500;}
.nw-header-body .nw-gnb > ul > li:nth-child(1) .d2 {left:0px;}
.nw-header-body .nw-gnb > ul > li:nth-child(3) .d2{left:-15px;}
.nw-header-body .nw-gnb > ul > li:nth-child(5) .d2 {left:-150px;}
.nw-header-body .nw-gnb > ul > li:nth-child(7) .d2 {left:auto;right:0;width:740px;text-align: right;}
.nw-header-body .nw-gnb > ul > li > a.sel::after{content:""; width:100%; height:1px; display:block; position:absolute; background:#000; bottom:-12px;}

.nw-gnb .d2 .on+.d3 {display:block;}
.nw-gnb .d3 {position: absolute;background-color:#222;width:140px;text-align: center;padding:11px 0;margin: 15px 0 0 0; left: calc(50% - 85px); display:none;}
.nw-gnb .d3 ul:before {position: absolute;top:-20px;}
.nw-gnb .d3 > ul {position: relative;}
.nw-gnb .d3 > ul:before {width:0;height: 0;content: "";display: inline-block;border-bottom:10px solid #222;
  border-left:8px solid transparent;border-right:8px solid transparent;margin:0 auto;margin-left:-7px;}
.nw-gnb .d3 > ul > li { font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.7);display: block;position: relative;}
.nw-gnb .d3 a { font-weight:300; color: #fff;padding:8px 0;font-size: 16px;display: block;width:100%;box-sizing: border-box;}
.nw-gnb .d3 a:hover,
.nw-gnb .d3 a:focus {color:#cef2ff;}
.nw-gnb .d3 .drop {background: url(/resource/pinnode/images/ic-child-off-r.png) no-repeat;
  background-position: right 7px bottom 42%;}
.nw-gnb .d3 .on {background: url(/resource/pinnode/images/ic-child-on-l.png) no-repeat;
  background-position: right 7px bottom 42%;}

.nw-gnb .d3 .on+.d4 { display:block;background: #fff; position: absolute;width:140px;
  border: 1px solid #252731;box-sizing: border-box;padding: 15px 10px;left: 140px;top: 0;}
.nw-gnb .d4 {display:none; border-top:1px solid rgba(255,255,255,0.2); padding: 10px 0}
.nw-gnb .d4 a { font-size: 15px; font-weight: 300; padding-left:10px; padding: 5px 0 5px 10px;color: #666;text-align: left;box-sizing: border-box;}
.nw-gnb .d4 a:hover,
.nw-gnb .d4 a:focus {color:#283483;}
.nw-gnb a.ic-link {padding-right:27px;margin-right:-3px;}
.nw-gnb a.ic-link:after {content:"";background: url(/resource/pinnode/images/ic-target-gray.png) no-repeat center center; width: 20px; position:absolute;right:0;height: 20px;display: inline-block;}
.nw-gnb .d3 > ul > li > a {padding-right:0;margin-right:0;}
.nw-gnb .d3 > ul > li > a.ic-link:after {content:"";background: url(/resource/pinnode/images/ic-target-white.png) no-repeat center center; width: 20px; display: inline-block;vertical-align: middle;position:relative;right:auto;}


.btn-searchlayer-open {position: absolute;right: 0;width: 36px;height: 36px;background: #000 url(../images/ico-search.png) no-repeat center center;
  border-radius: 50%; font-size:0; line-height: 0;top: 20px;}
.btn-searchlayer-open:focus-visible, .btn-searchlayer-close:focus-visible {outline: 2px solid #0056b5;}
.btn-searchlayer-close { position: absolute;right: 0;width: 36px;height: 36px;
  background: #000 url(../images/ic-search-layer-close-x.png) no-repeat center center; border-radius: 50%; font-size:0; line-height: 0;top: -58px;}
.nw-header .hd-search { display: none; position: absolute; width: 100%;}
.nw-header .hd-search > .dim {position: absolute; width: 100%; bottom: 0;top: 0; left: 0;right: 0; background:rgba(0,0,0,0.7); }
.nw-header .hd-search .hd-search-wrap { position: relative; width: 100%; background: #fff;border-top: 1px solid #ebebeb;}
.nw-header .hd-search .hd-search-inner {width: 100%; max-width: 1410px; margin: 0 auto;padding: 70px 0 80px 0;position: relative; }
.nw-header .hd-search .nd-search-form { position:relative; width: 100%; max-width: 760px; margin:0 auto; box-sizing: border-box;padding: 0 10px;}
.nw-header .hd-search .nd-search-form input {border:0; background: transparent; border-bottom:2px solid #000; width: 100%; box-sizing: border-box; font-size:22px;
  font-weight:400; padding:10px 40px 10px 10px;}
.nw-header .hd-search .nd-search-form .btn-go-search { position:absolute; background:url(../images/ic-search-layer-btn.png) no-repeat center center; font-size:0; line-height:0; height: 40px;width: 40px;right: 15px;top: 8px;}

.m-search-header { display:none; background: #fff; padding:20px 0;position: relative;}

/* footer */
.nw-footer { background: #111426;position: relative; }
.nw-footer a:hover, .nw-footer a:focus {color:#fff; text-decoration:underline;}

.nw-footer-wrap { position:relative; width: 100%; max-width: 1410px; margin: 0 auto;padding: 50px 0;}
.ft-link { margin-bottom: 30px;padding-right: 200px; }
.ft-link li { display: inline-block; font-size: 14px; margin-bottom: 10px;}
.ft-link li a {color:#b7b7b7;}
.ft-link li a.bold{font-weight: bold; text-decoration: underline;}
.ft-link li+li { padding-left: 6px; margin-left:8px; border-left:1px solid #333; }

.ft-ext-link { position: absolute; right: 0;top: 40px;}
.ft-ext-link a { display: inline-block; border:1px solid #282C4B; font-size: 16px; padding: 10px; color: #B9BFDF;}
.ft-ext-link a:hover,
.ft-ext-link a:focus {border:1px solid #3c4a73;}

.ft-select-link { position: absolute; right:0; top: 10px;vertical-align: middle;}
.ft-select-link>div {display: inline-block; }
.ft-select-link>div+div {margin-left: 10px;}
.ft-select-link label { display: none;}
.ft-select-link select { padding: 10px 30px 8px 10px; font-family: inherit;  background: #282C4B url(../images/ic-select-w-down.png) no-repeat right 10px center;
  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  border: 0; cursor: pointer;  color: #ccc;  font-family: 'Noto Sans KR', sans-serif;  font-size: 14px;
height: 38px; box-sizing: border-box;}

.ft-select-link .btn_link { position: relative; top:-1px; background: #36394b; color:#d1d1d1; font-size: 14px;
  padding: 9px 10px;box-sizing: border-box;height: 38px;overflow: hidden; line-height: 18px;}

.ft-contents { position: relative ;}
.ft-contents .ft-title {font-size: 26px; letter-spacing: -1.3px; color: #8b8b8b; margin-bottom:10px;}
.ft-site-info { position:relative; }
.ft-site-info p {font-size: 14px; color: #a7a7a7; line-height: 1.64;}
.ft-site-info .marks { position: absolute; right: 600px;top: 30px;display: flex;align-items: center; }
.ft-site-info .marks img {opacity: 0.3;}
.ft-site-info .marks a+a {margin-left: 10px;}

.btn-page-scroll {display:none; position:fixed; bottom:30px; right:10px; width: 62px; height: 62px;  box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2);
   border: solid 1px #dbdbdb;  background: #fff url(../images/ic-page-scroll.png) no-repeat center center; border-radius:50%; z-index: 99; font-size:0; overflow:hidden;}

.f_b1 {position: absolute;top: 60px;right: 0;z-index: 100; width: 190px; height:80px; overflow: hidden;padding:2px 0;}
.f_b1 .swiper-slide {width:190px; height: 56px; display: block; text-align: center; }
.f_b1 .swiper-slide a {display: block; width:100%; height: 100%; outline-color:#fff;padding:2px; box-sizing: border-box;}
.f_b1 .swiper-slide a img{max-width: 100%; max-height: 100%; width:100%; height: 100%;}
.f_b1 .swiper-pagination{color:#ddd; text-align: left; margin-top:2px; font-size: 14px;}
.f_b1 .sld-uis{position: absolute; right: 0; top:60px;}
.f_b1 .sld-uis button  { width: 18px; height: 18px; background-repeat: no-repeat; font-size: 0; line-height: 0; background-size: auto 11px; background-color: #ddd; border-radius:50px; float: left;padding: 0;background-position: center; margin-left: 4px;}
.f_b1 .sld-uis .sl-btn-prev {background-image: url(../images/ic-sl-prev-bk.png);}
.f_b1 .sld-uis .sl-btn-next {background-image: url(../images/ic-sl-next-bk.png);}
.f_b1 .sld-uis .sl-btn-stop {background-image: url(../images/ic-sl-stop-bk.png);}
.f_b1 .sld-uis .sl-btn-play { display: none; background-image: url(../images/ic-sl-play-bk.png);}
.f_b1 .sld-uis.stop .sl-btn-play{display: block;}
.f_b1 .sld-uis.stop .sl-btn-stop{display: none;}
/* sub layout */
.breadcrumb { border-bottom:1px solid #EBEBEB;display: none;}
.breadcrumb .br-wrapper {margin: 0 auto; width: 100%; max-width: 1410px; box-sizing: border-box;padding: 0 10px;}
.breadcrumb .sb { display: none; }
.breadcrumb .m-tree { white-space: nowrap; font-size: 13px;}
.breadcrumb .m-tree > li {display: inline-block;position: relative; background: url(../images/arr_location.png) no-repeat right center; padding-right: 7px; }
.breadcrumb .m-tree > li:last-child {background: none;}
.breadcrumb .m-tree:after {content:""; display: block; clear: both;}

.breadcrumb .m-tree .m-root { padding-right: 10px;font-size: 14px;color: #666;padding: 10px;}
.breadcrumb .m-tree .tx-mn a { display: block; padding: 10px; font-size: 14px;color: #666;}
.breadcrumb .m-tree .tx-mn a:hover,
.breadcrumb .m-tree .tx-mn a:focus {color:#333; text-decoration:underline;}
.breadcrumb .m-tree .selected a{ font-weight: 600; color:#000 !important;;}
.breadcrumb .m-tree .sb {  display: none; background:#fff; position:absolute; z-index:100; border: 1px solid #ccc;width: 200px;}
.breadcrumb .m-tree .selected+.sb { display: block;}
.breadcrumb .step li { color: #000;display: block;}
.breadcrumb .step li a { display: block; padding: 8px 10px;color: #666;}
.breadcrumb .step li a:hover,
.breadcrumb .step li a:focus { text-decoration: underline; color:#333;}

.sub-contents {min-height:500px;margin: 0 auto;width: 100%;max-width: 1410px;padding: 0 10px 100px 10px;box-sizing: border-box;position: relative;}
.sub-contents .pageHeader {margin: 4% 0 2% 0; position: relative;}
.sub-contents .pageHeader .page-title {font-size: 42px; font-weight: 500; letter-spacing: -1px; color: #000;line-height: 1em;}


@media only screen and (max-width: 1279px) {
  .breadcrumb {display: block;}

}
@media only screen and (max-width: 560px) {
  .sub-contents .pageHeader  {margin:15% 0 5%;}

}



/* sns 공유 */
.art-sns-share {position: absolute; right: 0; bottom:0; display:none;}
.art-sns-share .tx { display: none;}
.art-sns-share .btn-sns-share-open {  width: 36px; height: 36px; border-radius:50%; font-size:0; background: url(../images/ic-share.png) no-repeat center; border:1px solid #ccc; border-radius:50%;}
.art-sns-share .sns-ls { display:none; position:absolute; width: 140px; padding: 25px 8px 10px 15px; border-radius: 3px; border: solid 1px #111426;top: 40px;right: 0;background: #fff;z-index: 10;}
.art-sns-share .sns-ls.on { display: block;}
.art-sns-share .sns-ls li {margin-bottom: 15px;}
.art-sns-share .sns-ls a { display: block; height: 30px; line-height: 30px; font-size: 13px; color:#111426; background-repeat: no-repeat; background-position: left center; padding-left:40px; }
.art-sns-share .sns-ls .btn-share-twitter { background-image: url(../images/ic-share-twitter.png);}
.art-sns-share .sns-ls .btn-share-facebook { background-image: url(../images/ic-share-facebook.png);}
.art-sns-share .sns-ls .btn-share-blog { background-image: url(../images/ic-share-blog.png);}
.art-sns-share .sns-ls .btn-share-story { background-image: url(../images/ic-share-story.png);}
.art-sns-share .sns-ls .btn-share-kakao { background-image: url(../images/ic-share-kakao.png);}
.art-sns-share .sns-ls .btn-share-band { background-image: url(../images/ic-share-band.png);}
.art-sns-share .sns-ls .btn-share-url { background-image: url(../images/ic-share-url.png);}
.art-sns-share .sns-ls .btn-share-close {position: absolute; width: 20px; height: 20px; font-size: 0; top:10px; right:10px; background:url(../images/ic-share-close.png) no-repeat center;}


/*3뎁스 탭*/
.dp3_tab {text-align: left;box-sizing: border-box;margin-bottom:3%;}
.dp3_tab ul li {display: inline-block;vertical-align: middle;margin-right:5px;box-sizing: border-box;}
.dp3_tab ul li a {display: inline-block;vertical-align: middle;width:220px;border-radius: 50px;border:1px solid #222;color:#222;padding:8px 0;text-align: center;font-size:19px;    box-sizing: border-box;}
.dp3_tab ul li.active a, .dp3_tab ul li.active a:hover, .dp3_tab ul li.active a:focus {background-color:#222;color:#fff;}
.dp3_tab ul li a:hover {background-color:#f1f1f1;}
.dp3_tab ul li a.ic-link:after{content:"";background: url(/resource/pinnode/images/ic-target-gray.png) no-repeat center center; width: 14px; position: static;right: auto;top: auto;margin-left: 8px;height: 20px;display: inline-block;vertical-align: -3px;}

@media only screen and (max-width: 1400px) {
  .dp3_tab {text-align: center;margin:0 -5px 3%;overflow: hidden;}
  .dp3_tab ul li {display: block;margin:0;float:left;padding:5px;width:20%;}
  .dp3_tab ul li a {display: block;width:100%;}
}

@media only screen and (max-width: 768px) {
  .dp3_tab {margin:0 -2px 3%;}
  .dp3_tab ul li {width: auto;padding: 2px;}
  .dp3_tab ul li a  {font-size:15px;padding: 5px 16px;border-radius: 25px;}
}

/*4뎁스 탭*/
.dp4_tab {width:100%;display: block;border-bottom:2px solid #222;margin-bottom:-1px;}
.dp4_tab::after{content: ""; display: block; clear:both;}
.dp4_tab ul li {float: left;width:150px;margin-right:2px;}
.dp4_tab ul li a {border:1px solid #ddd;font-size:16px;text-align: center;display: block;border-bottom:2px solid #fff;margin-bottom:-2px; padding:10px 0;}
.dp4_tab ul li.active a {border:2px solid #222;font-weight: 500;border-bottom-color:#fff;color:#222;}
.dp4_tab ul li.active a:hover {background-color:#fff;}
.dp4_tab ul li a:hover {font-weight: 500;background-color:#f1f1f1;}
.dp4_tab ul li a img {vertical-align: middle;}
.dp4_tab ul li a.ic-link:after {content:"";background: url(/resource/pinnode/images/ic-target-gray.png) no-repeat center center; width: 14px; position: static;right: auto;top: auto;vertical-align: sub;margin-left: 8px;height: 20px;display: inline-block;}

@media only screen and (max-width: 768px){
  .dp4_tab {display:table;width:100%}
  .dp4_tab ul li {width:30%;margin-right:0;float:none;display: table-cell;vertical-align: middle;border:1px solid #ddd;}
  .dp4_tab ul li.active {border:2px solid #222;border-bottom:2px solid #fff;}
  .dp4_tab ul li a  {font-size:15px;padding:5px 0;border:none;}
  .dp4_tab ul li.active a {border:none; }
}


@media only screen and (max-width: 1279px) {
   .lock { overflow: auto;position: relative; width: 100%;}

  /* header */
  .nw-header { padding:0;}
  .m-nav-header { display: block;}

  .nw-header-site-link { display: none}
  .btn-nav-open { display: block; position:absolute; right:10px; top:20px; width:36px; height:36px; background:  url(../images/ico-mb-nav.png) no-repeat center center; font-size: 0; line-height: 0;}
  .btn-searchlayer-open { right: 59px; }
  .btn-searchlayer-close {right: 10px;}

  .m-header-site-link { display: block;}

  .nw-header-body .navigation { display: none; position: fixed; left: 0; top:0; height: 100%; width: 100%;z-index: 10000;}
  .nw-header-body .navigation > .dim { left: 0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.7);position: absolute;bottom: 0;display: block;}
  .nw-header-body .navigation.on { display: block;}
  .nw-header-body .nw-gnb { height: 100%; background:#fff; position: fixed; right:0;padding: 0;width: 320px;top: 0;bottom: 0;}
  .nw-header-body .nw-gnb > ul > li { display: block;float: none;margin: 0; }
  .nw-header-body .nw-gnb > ul > li > a {color: rgba(255,255,255,0.6);font-size: 15px;padding: 12px 15px;display: block; }
  .nw-header-body .nw-gnb > ul > li > a.on { font-weight: 600;color: #fff;}
  .nw-header-body .nw-gnb > ul > li > a.sel::after {content:none;}

  .nw-header-body .nw-gnb > ul {position: fixed;height: auto;top: 114px; bottom:99px; background: #252731;width: 150px;padding: 10px 0;box-sizing: border-box;overflow: scroll;overflow-x: hidden;}
  .nw-gnb .d2 { position: fixed;height: auto;top: 114px; background: #fff; width: 170px !important; padding:20px 10px;box-sizing: border-box;right:0 !important;overflow: auto;overflow-x: hidden;bottom: 99px;left: auto !important; }
  .nw-gnb .d2 a, .nw-gnb .d2 .gp-name { font-size: 16px; font-weight: 500;padding:10px 0;color: #000;  }
  .nw-gnb .d2 a:hover {color:#000 !important;}
  .nw-gnb .d3 a { color: #333; font-weight: normal;font-size:15px;}
  .nw-gnb .d3 {left:auto;background-color:#fff;position: relative;padding:0;margin:0;width:auto;}

  .nw-gnb .d3 .drop {background: url(../images/ic-child-off-gray.png) no-repeat right center;}
  .nw-gnb .d3 .on {background: url(../images/ic-child-on-gray.png) no-repeat right center;}
  .nw-gnb .d4 {border-top:1px solid rgba(0,0,0,0.2); padding: 10px;}
  .nw-gnb .d3 .on+.d4 { display:block;position: relative;width: 100%;border: 0;box-sizing: border-box;padding: 0 0 0 14px;left: 0;top: 0;}
  .nw-gnb .d4 a { font-size: 14px; font-weight: 300; padding-left:10px; padding: 5px 0;}
  .nw-gnb a.ic-link:after{background: url(../images/ic-target-black.png) no-repeat center center; right:-24px;}
  .nw-gnb .now {color:#283483 !important;}
  .nw-gnb .d2 > ul > li {display: block;text-align: left;}
  .nw-gnb .d2 > ul > li:after, .nw-gnb .d3 > ul:before {display: none;}

  .nw-gnb .d3 > ul > li > a {text-align: left;padding:5px 0 5px 20px;}
  .nw-gnb .d3 > ul > li > a:before {position:absolute;width:5px;height:1px;top:50%;content: "";background-color:#555;left:5px;display: block;}

  /* header search */
  .nw-header .hd-search .hd-search-wrap { padding-bottom: 10px;}
  .nw-header .hd-search { position: fixed; top:0;left: 0;}
  .m-search-header { display:block; background: #fff; padding:20px 10px;width: 100%; margin: 0 auto;}
  .nw-header .hd-search .hd-search-inner {padding: 20px 0 30px 0;}

  /* ext link */
  .header-ext-link { position: absolute;  top:auto; right:auto; bottom:0; background:#E6E6E6; height: 98px; width: 100%; padding: 0 10px 0 10px; box-sizing: border-box; }
  .nw-header-sns {float: none;text-align: center;padding: 15px 10px;border-bottom: 1px solid #ccc;}

  .nw-header-language { position: relative; width: 100%; padding: 7px 0px 0 0px;float: none;box-sizing: border-box;text-align: center;max-width: 250px;margin: 0 auto;}
  .nw-header-language button { display: block; height: 36px; width: 100%; }
  .nw-header-language button.on {background: url(../images/ico-select-on.png) no-repeat center right 10px;}
  .nw-header-language button.on + .lang-list { display:block;}
  .nw-header-language .lang-list { display: none; position: absolute; width: 100%; box-sizing: border-box; border: 1px solid #111426; padding: 10px 15px; z-index: 12; background: #fff;bottom: 36px;}
  .nw-header-language .lang-list li { display: block;}
  .nw-header-language .lang-list a { display: block; font-size:13px; padding: 8px 0}
  .nw-header-language .lang-list a:hover {color:#000; font-weight:600;}

  /* footer */
  .nw-footer-wrap { padding: 50px 10px; box-sizing: border-box}
  .ft-link { text-align:center; padding:0;}

  .ft-ext-link { position: relative;; right: 0;top: 0;text-align: center;margin-bottom: 50px;}
  .ft-ext-link a { display: inline-block; border:1px solid #282C4B; font-size: 16px; padding: 10px; color: #B9BFDF;}


  .ft-select-link { position: relative; top:auto; left:auto; text-align: center; margin-bottom:30px;}

  .ft-contents { position: relative ; text-align: center;}
  .ft-site-info { max-width: none;}
  .ft-site-info .marks { position: relative; right: 0;top: 0; display: inline-block; padding-top:20px; }

}

@media only screen and (max-width: 1023px) {
  /* sub layout */
  .sub-contents .pageHeader .page-title {font-size: 36px;  }

}

@media only screen and (max-width: 768px) {
  .wraper { position: relative; }
  /* sub layout */
  .breadcrumb { border-bottom:1px solid #EBEBEB;}
  .breadcrumb .br-wrapper {margin: 0 auto; width: 100%; max-width: 1410px; }
  .breadcrumb .sb { display: none; }
  .breadcrumb .m-tree { overflow-y: hidden; overflow: auto;}
  .breadcrumb .m-tree {-ms-overflow-style: none; scrollbar-width: none; }
  .breadcrumb .m-tree::-webkit-scrollbar {display: none;}
  .breadcrumb .m-tree > li { position: initial; }
  .breadcrumb .m-tree:after {content:""; display: block; clear: both;}

  .breadcrumb .m-tree .m-root { padding-right: 10px;}
  .breadcrumb .m-tree .tx-mn a { display: block; padding: 10px 10px 10px 10px; }
  .breadcrumb .m-tree .selected a{ font-weight: 600; color:#000 !important;;}
  .breadcrumb .m-tree .sb {  display: none; background:#f8f8f8; width: 100%;left: 0;right: 0;padding: 10px;box-sizing: border-box; }

  .breadcrumb .m-tree .selected+.sb { display: block;}

  .breadcrumb .step li { float: left;width: 50%; }
  .breadcrumb .step li a {padding: 6px 2px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

  /* sub layout */
  .sub-contents .pageHeader .page-title {font-size: 28px;  }

}

@media only screen and (max-width: 479px) {

  /* popzone */
  .top-popzone .pop-check { left: 50%; right: auto;margin-left: -100px;}
  .top-popzone { position: relative; width: 100%; max-width: 1410px; margin: 0 auto;overflow: hidden;}
  .top-popzone img.img-mobile {display: block;}
  .top-popzone img.img-pc {display: none;}

  /* footer*/
  .ft-select-link>div {position:relative; display: block; margin: 0; padding-right: 50px; margin-bottom:5px;}
  .ft-select-link>div+div {margin:0;}
  .ft-select-link label { display: none;}
  .ft-select-link select { width: 100%;}
  .ft-select-link .btn_link { position: absolute; top:0px; right:0; display:block;}

}