@charset "utf-8";
@font-face {
    font-family: 'GmarketSans';
    font-style: normal;
    font-weight: 300;
    src: url('/pcms/common/font/gmarketsans/GmarketSansLight.woff') format('woff')
 }
 @font-face {
    font-family: 'GmarketSans';
    font-style: normal;
    font-weight: 100;
    src: url('/pcms/common/font/gmarketsans/GmarketSansLight.woff') format('woff')
 }
@font-face {
    font-family: 'GmarketSans';
    src: url('/pcms/common/font/gmarketsans/GmarketSansM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('/pcms/common/font/gmarketsans/GmarketSansM.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('/pcms/common/font/gmarketsans/GmarketSansB.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'gothic';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('/pcms/common/font/gothic/gothica1-regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'gothic';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/pcms/common/font/gothic/gothica1-regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'gothic';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url('/pcms/common/font/gothic/gothica1-bold-webfont.woff') format('woff');

}
@font-face {
    font-family: 'gothic';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/pcms/common/font/gothic/gothica1-bold-webfont.woff') format('woff');

}
.main_pop{
  display: none;
}


a:focus,
button:focus {outline:1px dotted #000;}
.more{display:block;overflow: hidden;position:absolute;top:0;right:0;width:50px;height:50px;border:0;font-size:0;}
.more:before,
.more:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.more:before {width: calc(100%/2);height: 1px;background: #b2b2b2;}
.more:after {width: 1px;height: calc(100%/2);background: #b2b2b2;}
button[data-control]{position:relative;display:inline-block;margin:0 -4px;width:25px;height:25px;vertical-align:middle;overflow: hidden;}
button[data-control]:before,
button[data-control]:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
button[data-control="prev"]:before,
button[data-control="next"]:before{width: calc(100%/2.5);height: calc(100%/2.5);border-width:2px;border-style: solid;border-color: #333;transform: rotate(45deg);}
button[data-control="prev"]:before{right: -5px;border-width: 0 0 2px 2px;}
button[data-control="next"]:before{left: -5px;border-width: 2px 2px 0 0;}
button[data-control="stop"]:before{width: 2px;height: calc(100%/2);box-shadow: -3px 0 #333, 3px 0 #333;}
button[data-control="play"]:before{right: -5px;width: 0;height: 0;border-width: 10px 0 10px 15px;border-style: solid;border-color: transparent transparent transparent #333;}

.layout{position:relative;margin:0 auto;width:100%;max-width: 1280px;}
.clear:after,
.layout:after{display:block;visibility:hidden;clear:both;content:""}

#top_layout{display:block;position: relative;z-index: 15;width:100%;height: 100px;text-align:center;}
#top_layout.on {z-index: 999;background:#fff;}
#top_layout .top_wrap {max-width: 1920px;height: 100%;margin: 0 auto;}
#top_layout .top_wrap #logo {position: relative;z-index: 11;float: left;padding: 37px 0 0;margin-left: 45px;}
#top_layout .top_wrap #logo > a {display:inline-block;vertical-align: top;}
#top_layout .top_wrap #logo > a span {display: inline-block;position: relative;width: 244px;height: 22px;margin: 0;background: url(/images/sid/common/logo.png)no-repeat;background-size:100% auto;font-size: 0;vertical-align: top;}
#top_layout.on .top_wrap #logo > a span {background-image: url(/images/sid/common/logo2.png);}

#top_layout .top_wrap .utile_wrap {position:relative;z-index: 11;height:100%;float: right;}
#top_layout .top_wrap .utile_wrap li {float:left;position: relative;/* z-index: 11; */margin-left: 35px;height: 100%;;}
#top_layout .top_wrap .utile_wrap li > a {display:inline-block;line-height:100px;color:#fff;font-size: 14px;font-family: 'GmarketSans';}
#top_layout .top_wrap .utile_wrap li.home > a{
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='14' viewBox='0 0 12 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5V13H11V5L6 1L1 5Z' stroke='%23003B81' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4.33333 8.66667V13H7.66667V8.66667H4.33333Z' stroke='%23003B81' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M1 13H11Z' stroke='%23003B81' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 100%;
  text-align: left;
}
#top_layout.on .top_wrap .utile_wrap li > a {color:#444;}
#top_layout .top_wrap .utile_wrap li.pc {padding-left: 0;}
#top_layout .top_wrap .utile_wrap li.pc a {display:block;width:100px;height: 100%;background:url(/images/sid/common/menu.png)no-repeat center;font-size:0;}
#top_layout.on .top_wrap .utile_wrap li.pc a {
  background-color: #003B81;
}
#top_layout .top_wrap .utile_wrap li.mo {display:none;}
#top_layout .top_wrap .utile_wrap li.mo button {display: block;width: 80px;height:100%;background: url(/images/sid/common/menu.png)no-repeat center;font-size: 0;}

#top_layout.on + .gnb_bg {display: block;z-index: 99;}
#top_layout + .gnb_bg {display: none;position: fixed;top: 80px;left: 0;z-index: 2;width: 100%;height: 100%;background: #000;opacity: 0.5;content:'';transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;}
.modal-open #top_layout .top_wrap #logo{z-index:-1;}

#gnb_layout{display: block !important;overflow:hidden;position:absolute;top: 0;left: 0;width: 100%;min-height:100px;transition: all 0.1s ease-out;-webkit-transition: all 0.1s ease-out;}
#gnb_layout:after{top:80px}
#gnb_layout.open{overflow: visible;}
#gnb {position: absolute;top:0px;left: 0;width: 100%;height: 100px;z-index:2;}
#gnb_layout.action{position:relative;background-color:#fff;}
#gnb_layout .layout{position:relative;height: 100%;}
#gnb_layout .depth1_ul{display:inline-block;float: none;height:100%;z-index:14;}
#gnb_layout .depth1_ul:after {display: block; content: ''; clear: both;}
#gnb_layout .depth1_ul>li{display:inline-block;float:left;position: relative;height:100%;margin: 0 -2px;vertical-align:top;}
#gnb_layout .depth1_ul>li>a{position:relative;display:block;height:100%;padding: 0 35px;text-align:center;}
#gnb_layout .depth1_ul>li>a:before {display:block; content:''; position:absolute; right:2px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:#cfcfcf;display: none;}
#gnb_layout .depth1_ul>li:last-child>a:before {display:none;}
#gnb_layout .depth1_ul>li>a.current{}
#gnb_layout .depth1_ul>li>a.current span {}
#gnb_layout .depth1_ul>li>a.current + .item{opacity: 1;display: block}
#gnb_layout .depth1_ul>li>a span{display: inline-block;position: relative;height: 100%;line-height: 100px;font-size: 18px;font-weight: 400;font-family:'GmarketSans';color: #fff;vertical-align: middle;}
#top_layout.on #gnb_layout .depth1_ul>li>a span {color:#444;}
#gnb_layout .depth1_ul>li>a[target="_blank"] span:after {display:inline-block;width: 12px;height: 11px;margin: -2px 0 0 5px;background: url(/images/sid/common/target.png) no-repeat;border: 0;transform: none;content:'';vertical-align:middle;}
#gnb_layout .depth1_ul>li>a span:before{display:block;opacity:0;position:absolute;left: 50%;bottom: 0;content:'';width: 70px;height: 3px;margin-left: -35px;background: #089791;transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;}
#gnb_layout .depth1_ul>li>a.current span:before {opacity:1;}
#gnb_layout .depth1_ul > li .item{display: none;position:absolute;top: 100px;left: 0;z-index: 100;width: 100%;margin: 0;padding: 5px 0;background: #313341;text-align: left;}
#gnb_layout .depth1_ul > li .item .gnb-title {display:none;}
#gnb_layout .depth1_ul > li .item .gnb-depth {position:relative;height:100%;min-height: 243px;}
#gnb_layout .depth1_ul > li .item .depth2_ul{float:left;position: relative;top: 0;height: 100% !important;width: 100%;text-align:  left;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li{display: block;position:relative;margin: 0;text-align: left;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li.n2_5,
#gnb_layout .depth1_ul > li .item .depth2_ul > li.n2_6 {min-height:235px;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a{display:block;position: relative;padding: 0 10px 0 20px;vertical-align: top;transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.dep:before {display:block;position:absolute;right:15px;top:50%;content:'';margin-top:-4px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid #b2b3be;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:hover.dep:before,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:focus.dep:before,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on.dep:before {border-left:5px solid #80cbc4;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a span {display: inline-block;position: relative;padding: 14px 0;color: #b2b3be;font-size: 17px;font-weight: 700;font-family:'nsr','맑은고딕','Malgun Gothic',-apple-system;vertical-align: top;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on span,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:hover span,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:focus span {color:#80cbc4;}
#gnb_layout .depth1_ul > li .depth2_ul > li > a[target="_blank"]:after {display:inline-block;top: 18px;width:12px;height:11px;margin:-2px 0 0 5px;border:none;background:url(/images/sid/common/target.png)no-repeat;content:'';vertical-align:middle;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on[target="_blank"]:before,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a[target="_blank"]:hover:before,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a[target="_blank"]:focus:before {background-position:0 0;}
#gnb_layout .depth3_ul {display: none;padding: 0;margin: 5px 0 0;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on + .depth3_ul {display:block;position:absolute;top:0;left:100%;width:215px;margin: 0;padding: 5px 25px;border:1px solid #313341;background:#fff;}
#gnb_layout .depth3_ul > li {position:relative;margin: 10px 0;}
#gnb_layout .depth3_ul > li > a {display:block;position:relative;width:100%;color: #5b5b5b;font-size: 16px;}
#gnb_layout .depth3_ul > li > a > span {display:inline-block;position: relative;font-size:15px;color: #666;}
#gnb_layout .depth3_ul > li > a:hover > span,
#gnb_layout .depth3_ul > li > a:focus > span {text-decoration:underline; }
#gnb_layout .depth3_ul > li > a[target="_blank"] > span:after {display:inline-block;width:12px;height:11px;margin:-2px 0 0 5px;background:url(/images/sid/common/target.png)no-repeat;content:'';vertical-align:middle;}
#gnb_layout .depth3_ul > li > a:hover > span,
#gnb_layout .depth3_ul > li > a:focus > span {}

#body_layout {display: block;width: 100%;}

@media screen and (max-width:1639px){   
  
    #top_layout .top_wrap {padding:0 30px;padding-right: 0;}    
    
    #top_layout .top_wrap #logo{
      margin-left: 0;
    }
    #gnb_layout .depth1_ul{
      margin-left: -155px;
    }
    #gnb_layout .depth1_ul>li>a{
      padding: 0 25px;
    }
    #top_layout .top_wrap .utile_wrap li{
      margin-left: 20px;
    }
}

@media screen and (max-width:1339px){   
    .layout {max-width: 100%;padding:0 30px;}
}
@media screen and (max-width:1280px){
    #top_layout .top_wrap .utile_wrap li {margin-left: 20px;}
    #top_layout .top_wrap .utile_wrap li.pc {display:none;}
    #top_layout .top_wrap .utile_wrap li.mo {display:block;height: 100%;}
    #top_layout.on + .gnb_bg {display:none;}

    #gnb_layout{display: none !important;}  
}
@media screen and (max-width:1024px){
  #top_layout{
    height: 80px;
  }
  #top_layout .top_wrap #logo{
    padding-top: 27px;
  }
}
@media screen and (max-width:880px){
  #top_layout .top_wrap #logo{
    padding-top: 32px;
  }
  #top_layout .top_wrap #logo > a span{
    width: 205px;

  }
}
@media screen and (max-width:767px){    
    .layout {padding:0 20px;}
    #top_layout .top_wrap {padding:0 20px;padding-right: 0;}
    #top_layout .top_wrap #logo > a span {width: 180px;}
    #top_layout .top_wrap .utile_wrap li:nth-child(1) {display:none;}
    #top_layout .top_wrap .utile_wrap li:nth-child(2) {display:none;}
    #top_layout .top_wrap .utile_wrap li{
      margin-left: 0;
    }
}



/* mobile menu */
#mobile-menu{overflow: visible;padding:0 !important;z-index: 9999;}
#mobile-menu .modal-dialog {float:right;width: 100%;max-width: 380px;height: 100%;margin: 0;border-radius: 0;-webkit-transform: translate(25%,0);transform: translate(25%,0);}
#mobile-menu.in .modal-dialog,
#mobile-menu.show .modal-dialog {-webkit-transform:translate(0px,0);transform: translate(0px,0);}
#mobile-menu .modal-dialog .modal-content{position: static;height: 100%;padding: 110px 40px 40px;background: #0E3674 url(/images/sid/common/lnb_bg.png)no-repeat right bottom;border-radius: 0;}
#mobile-menu .modal-dialog .modal-content .topuntil {position:absolute;top:0;left:0;width: 100%;height:80px;padding: 0 20px;background:  #0D2A57;display: flex;align-items: center;}
#mobile-menu .modal-dialog .modal-content .topuntil ul {text-align:left; display: flex;align-items: center;gap: 20px;flex-wrap: wrap;row-gap: 5px;}
#mobile-menu .modal-dialog .modal-content .topuntil ul li {display:inline-block; position:relative;}
#mobile-menu .modal-dialog .modal-content .topuntil ul li::after {display:block;position: absolute;right: -10px;top: 0;content:'';width: 1px;height: 16px;background: rgba(255,255,255,.5);}
#mobile-menu .modal-dialog .modal-content .topuntil ul li:last-of-type:after{display: none;}
#mobile-menu .modal-dialog .modal-content .topuntil ul li a {display:block;line-height: 1.2;font-size:16px;font-weight: bold;font-family: 'nsr','맑은고딕','Malgun Gothic',-apple-system;color:#fff;}
#mobile-menu .modal-dialog .modal-content .modal-body {height:100%;padding: 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul {overflow-y: scroll;overflow-x: hidden;height:100%;text-align:left;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li {position:relative;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a {display:block;position: relative;padding: 13px 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a:after {display:block;position:absolute;right:5px;top: 26px;content:'';border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a.ov {}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a span,
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a em {display: inline-block;color: #fff;font-size: 19px;font-weight: bold;font-family: 'nsr','맑은고딕','Malgun Gothic',-apple-system;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul {display:block;width: 100%;padding: 10px 0;margin: 0 0 10px;border-top: 1px solid rgba(255,255,255,.3);border-bottom: 1px solid rgba(255,255,255,.3);}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li {display:block;width: 100%;margin: 10px 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a {display:block;width: 100%;position:relative;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.dep:before,
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.dep:after {content: '';position: absolute;top: -1px;bottom: 0;margin: auto;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.dep:before {right: 0;width: 12px;height: 2px;background: #fff;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.dep:after {right: 5px;width: 2px;height: 12px;background: #fff;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.dep.ov:after {display:none;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a span {display:block;line-height:1.4;color: #fff;font-size: 17px;font-weight: bold;font-family: 'nsr','맑은고딕','Malgun Gothic',-apple-system;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul {display:none;padding: 10px 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li {position:relative;margin: 10px 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li:after {display:block;position:absolute;left: 20px;top: 11.5px;width: 5px;height: 1px;background: #fff;content:'';}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a {display:block;padding-left: 30px;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a span {display:block;font-size: 15px;color: #fff;font-family: 'nsr','맑은고딕','Malgun Gothic',-apple-system;}
#mobile-menu .mobile-close {position:absolute;top: -85px;right: -20px;}
#mobile-menu .mobile-close span {display:block;position:relative;width: 30px;height: 30px;font-size:0;}
#mobile-menu .mobile-close span:before,
#mobile-menu .mobile-close span:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; transform:rotate(45deg);-webkit-transform:rotate(45deg);}
#mobile-menu .mobile-close span:before {width:100%;height: 1px;background: #fff;}
#mobile-menu .mobile-close span:after {width: 1px;height:100%;background: #fff;}
.modal-backdrop.in{opacity: .8;z-index: 16;}

.modal-open,
.modal-open #body_layout {overflow:hidden;height:100%;}



@media screen and (max-width:400px){
  #top_layout .top_wrap{
    padding-left: 10px;
  }
  #top_layout .top_wrap #logo > a span{
        width: 160px;
        height: 17px;
  }
  #top_layout .top_wrap #logo {
    padding-top: 33px;
}
 }