@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');

#wrapper{}
#header{position: relative;}
#header-wrap{position: fixed;background: transparent;height: 120px;width: 100%;z-index: 299;}
.header-contain{max-width: 1500px;    width: 100%;    margin-left: auto;    margin-right: auto; padding: 30px;}
.header-row{display: flex;align-items: center;flex-wrap: wrap;}
.justify-content{justify-content: space-between !important;}
#logo{width: 20%}

.primary-menu{display: flex;    flex-basis: 100%;    flex-grow: 1;    align-items: center; width: 65%}

@media (min-width: 992px) {
  .primary-menu {   flex: 0 0 auto; flex-grow: 0; }
}

#gnb{width:100%; height:112px;background: #ffffff; position:fixed; top:0; left:0; z-index:999;color: #000;}
.logo{position: absolute;    display: flex;    align-items: center;    max-height: 100%; opacity:0; top: 20%;}
.logo2{position: absolute;    display: flex;    align-items: center;    max-height: 100%; opacity:1; top: 20%;}

#search{position: absolute;top: 35%; width: 247px;height: 40px;}
#search input{background:transparent;border: 1px solid #333; color:inherit; font-size:15px; width:100%; height:100%; line-height:38px; border-radius:50px; padding-left:10px;letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis;}
#search_bt{position:absolute; top:20%; right:0;width: 20px;height: 20px; margin-right:10px;}

.menu_mo{float: right; right:20px;width: 68px;padding-top: 20px;opacity: 1;position: fixed;}
.menu_mo2{float: right; right:20px;width: 68px;padding-top: 20px;opacity: 0;position: fixed;}
@media all and (min-width: 1150px){
  .menu_mo{display: none;}
  .menu_mo2{display: none;}
}

.btnMenu {width: 27px;height: 25px;background: url('../images/search_m.png') center / contain no-repeat;float: left; }
.btnMenu01 {width: 27px;height: 25px;background: url('../images/search_m_w.png') center / contain no-repeat;float: left;}
.btnSearch {width: 30px;height: 30px;background: url('../images/menu.png') center / contain no-repeat;float: right; }
.btnSearch01 {width: 30px;height: 30px;background: url('../images/menu_w.png') center / contain no-repeat;float: right; }

/*header pc start*/
  .headerWrap{}
  .headerWrap .inner{ position: static; max-width: 100vw}
  .headerWrap .header{ border-bottom: solid 1px #dfdfdf}
  .headerWrap nav{/* width: calc(100% - 500px); */float: left;}
  .headerWrap .nav{ height:115px; margin:auto;padding-top: 40px;}
  .headerWrap .nav > li{ }
  .headerWrap .nav > li > a{ font-size:28px; font-weight:bold; position:relative; text-align: center; padding: 0 40px;}
  .headerWrap .gnbDepthBG{
    width: 100%;
    position: absolute;
    left: 0;
    top: 111px;
    background: linear-gradient(90deg, rgba(31,72,167,1) 0%, rgba(31,72,167,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1f48a7",endColorstr="#ffffff",GradientType=1);
    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
    border-top: solid 1px #dfdfdf;
    margin-top: 1px; display: none;
  }
  .headerWrap .gnbDepthBG .inner{display: flex;flex-wrap: wrap}
  .headerWrap .gnbDepthBG .gnbTitleWrap{
    width: 20%;
    padding: 26px 20px;
    color: #fff;
    background: #1F48A7 url("../images/bg_gnb.png") no-repeat right bottom;
  }
  .headerWrap .gnbDepthBG .gnbTitle{
    font-size: 2.125rem;
    font-weight: bold;
    display: inline-block;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 5px solid #fff;
  }
  .headerWrap .gnbDepthBG .gnbTitleInfo{ font-size: 1.250rem}
  .headerWrap .gnbDepth2Wrap{width: 80%;background: #fff;}
  .headerWrap .gnbDepth2Wrap > li{
    width: 100%;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    border-bottom: solid 1px #dfdfdf;
  }
  .headerWrap .gnbDepth2Wrap > li:last-child{ border-bottom: none}
  .headerWrap .gnbDepth2Wrap > li > a{
    width: 240px;
    height: auto;
    font-size: 1.125rem;
    font-weight: bold;
    color: #000;
    padding: 15px 20px;
    background: #f5f5f5 url("../images/icon_gnb_pc.png") no-repeat right 15px center;
    display: flex;
    align-items: center;
  }
  .headerWrap .gnbDepth3Wrap{width: calc(100% - 240px);background: #fff;display: flex;flex-wrap: wrap;padding: 10px 10px;}
  .headerWrap .gnbDepth3Wrap > li{width: 20%;padding: 10px  0;}
  .headerWrap .gnbDepth3Wrap > li > a{font-size: 1.093rem;color: #000;padding: 0 10px 0 25px;position: relative}
  .headerWrap .gnbDepth3Wrap > li > a:before{
    content: "· ";
    font-size: 1.125rem;
    line-height: +1.4;
    font-weight: bold;
    color: #000;
    position: absolute;
    left: 10px;
    top: 0;
  }
  /*header active*/
  .headerWrap .gnbDepthBG.on{display: block;}
  .headerWrap .nav > li.on .gnbDepthBG{ display: block;}
  .headerWrap .nav > li.on > a{ color: #1f48a7 !important;}
  .headerWrap .gnbDepth2Wrap > li:hover > a{color: #013374; background: #f5f5f5 url("../images/icon_gnb_on_pc.png") no-repeat right 10px center;}
  .headerWrap .gnbDepth3Wrap > li:hover > a{ color: #0f72f2; font-weight: bold}
  .headerWrap .gnbDepth3Wrap > li:hover > a:before{ color: #0f72f2}
  /*header pc end*/

@media ( max-width: 1780px){
  /*header start*/
  .headerWrap .inner{ width: 100%; float: left; padding: 0 15px}
  .headerWrap .utilGroup{ position: absolute; top: 0; right: 15px}
  /*header end*/

  /*main*/
  .visualWrap .slick-prev,
  .visualWrap .slick-next{ transform: translate(0,-50%); background-size: cover;}
  .visualWrap .slick-prev{ margin-left: 0; left: 15px}
  .visualWrap .slick-next{ margin-left: 0; left: auto; right: 15px}
}
@media ( max-width: 1530px){
  /*header start*/
  .headerWrap{padding-bottom: 91px;}
  .headerWrap .inner{ position: relative}
  .headerWrap .header:after{
    content: "";
    width: 100%;
    height: 1px;
    background: #dfdfdf;
    position: absolute;
    left: 0;
    top: 65px;
  }
  .headerWrap nav,  .theme03 .inner,  .inner{/*width: 100%;float: left; padding: 0 15px; */}
  .headerWrap nav{ padding-left: 0}
  .headerWrap .nav > li{width: 18%;}
  .headerWrap .HeaderLogo a,
  .headerWrap .utilGroup{ height: 65px; line-height: 65px}
  .headerWrap .HeaderLogo img{ height: 40px; position: relative; top: -2px}
  .headerWrap .searchWrap{ top: 155px}
  .headerWrap .utilGroup{ width: 180px; right: 15px}
  .headerWrap .utilGroup .searchWrapClose,
  .headerWrap .utilGroup .btnSearch{ height: 65px}
  .headerWrap .gnbDepthBG{ top: 111px}
  .headerWrap .gnbDepth3Wrap > li{ width: 50%}

  .headerWrap .searchWrap .inner{ width: 100%; padding: 40px 15px}
  /*header end*/
}
#lnb { position:relative; width:100%; border-top:1px solid #EBEBEB; border-bottom:1px solid #EBEBEB; background:#f7f7f7; z-index:9; }
#pathArea { width:100%; max-width:1400px; height:68px; margin:0 auto; }
.path { float:left; width:auto; height:68px; }
.path a.homeBtn { float:left; display:block; width:78px; height:68px; text-indent:-99999px; background:url('../images/home_ico.png') left top no-repeat; }
.path .scate { position:relative; float:left; width:200px; height:68px; line-height:68px; border-right:1px solid #EBEBEB; }
.path .scate a.scateMe { display:block; background:#FFF; padding-left:20px; font-size:18px; }
.path .scate a.scateMe:before { content:''; position:absolute; top:32px; right:15px; width:12px; height:7px; background:url('../images/path_ico.png') no-repeat; transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transition:transform .1s .1s, -webkit-transform .1s .1s; transition:transform .1s .1s, -webkit-transform .1s .1s; transition:transform .1s .1s; -webkit-transition:transform .1s .1s; transition:-webkit-transform .1s .1s; -webkit-transition:-webkit-transform .1s .1s; }
.path .scate.on a.scateMe:before { background:#FFF url('../images/path_ico.png') no-repeat; transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); }
.path .scate .lnbMenu { display: none; margin-left:-1px;  padding:15px 14px 15px 22px; border:1px solid #EBEBEB; background:#FFF; overflow:hidden; }
.path .scate .lnbMenu a.men { display:block; line-height:33px; font-size:18px; }
.path .scate .lnbMenu a.men:hover { padding-left:2px; }
.path .scate .lnbMenu a.men.on,
.path .scate .lnbMenu a.cur { font-weight:bold; color:#3c6ff3; font-size:18px; }


#mainContents { width:100%; background-color:#FFF; }
#mainContInner { position:relative; width:100%; max-width:1700px; margin:0 auto; overflow:hidden; }

#subContents { width:100%; background-color:#FFF; }
#subContInner { position:relative; width:100%; max-width:1400px; margin:0 auto; overflow:hidden; }
.cont_tit{  margin:6% 0 0 0;width: 100%;border-bottom: 1px solid #555555;display: block;float: left;margin-bottom: 20px;}
#page_count {text-align: right;margin-left: auto;margin-right: auto;display: inline-block;float: right;}
#page_count ul { margin: 0px; }
#page_count ul li { padding-right: 5px; display: inline-block;}
#page_count ul li i { margin-right: 5px; }
h3.main_t {  font-size:35px; font-weight:bold; color:#111; line-height:35px;     display: inline-block;}
#contents { width:100%; max-width:1400px; margin:4% 0; overflow:hidden; }


/* Footer */
.wrap-footer {margin-top: 50px; background: #323232;}
.main .wrap-footer {margin-top: 0;}
.bottom-menu ul {padding: 19px 0; border-bottom: 1px solid #474747;}
.bottom-menu li {position: relative; float: left; margin-right: 25px; padding-right: 25px;}
.bottom-menu li:first-child {padding-left: 0;}
.bottom-menu li::after {content: "|";    position: absolute;    right: 0;    top: 0;    width: 1px;    height: 11px;    color: #ccc;}
.bottom-menu li:last-child::after {display: none;}
.bottom-menu li a {position: relative;  font-size: 16px; letter-spacing: -1px; color: #ccc;}
.bottom-menu li a:hover {color: rgba(204,204,204,1);}
.bottom-menu li a::after {content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: #fff; transition: 1s;}
.bottom-menu li a:hover::after {width: 100%;}
.footer-info {position: relative; padding: 11px 0;}
.footer-address {float: left; padding: 10px 0 10px 0;}
.footer-address .address {margin-bottom: 5px;}
.footer-address .address span { font-size: 16px; color: #b1b1b1;}
.footer-address .address i {padding-left: 10px; font-size: 16px; color: #fff;}
.footer-address .copy { font-size: 12px; color: #8e8e8e;}
.footer-info .access {position: absolute; right: 0; top: 20px;}
.footer-info .access img{width: 70%; float: right;    padding-right: 20px;}

@media all and (max-width: 950px) {
    .footer-info .access {display: none;}
}

@media all and (max-width: 900px) {
    .wrap-footer .container {padding: 0;}
    .bottom-menu ul {text-align: center;}
    .bottom-menu li {float: none; display: inline-block;}
    .footer-info {text-align: center;}
    .footer-address {float: none;}
}

@media all and (max-width: 500px) {
    .wrap-footer {margin-top: 6%;}
    .bottom-menu li {margin-right: 10px; padding-right: 10px;}
  .bottom-menu li:last-child{margin-right: 0px; padding-right: 0px;}
    .bottom-menu li a {font-size: 14px;}
    .footer-info {padding: 11px;}

}

.tx18{font-size: 18px;}
.blue{color: #3c6ff3 !important;}
.bold{font-weight: bold;}

.butbox{text-align: center; margin-top: 40px;}
.but{display: inline-block; position: relative; padding: 10px 20px ; background: #3c6ff3; border:1px solid #3c6ff3; border-radius: 10px;  font-size: 20px; color: #fff; font-weight: bold;}
.but:hover {background: #fff; border-color: #3c6ff3; color:#3c6ff3; transition:all 0.3s cubic-bezier(0.7, 0, 0.3, 1); font-weight: bold;}

.but_s{display: inline-block;    position: relative;    padding: 0 10px;    background: #3c6ff3;    border: 1px solid #3c6ff3;    border-radius: 5px;    font-size: 14px;    color: #fff;    font-weight: bold;}
.but_s:hover { background: #fff; border-color: #3c6ff3;  padding: 0 10px; color:#3c6ff3; transition:all 0.3s cubic-bezier(0.7, 0, 0.3, 1); font-weight: bold; }

.bordernone{border: none !important;}


@media all and (max-width: 1400px) {
    .nav>li>a {    padding: 0 30px;    font-size: 24px;}
  #logo img{width: 80%}

}

@media all and (max-width: 1325px) {
    #logo {width: 15%}
  #logo img{width: 60%}
  .footer_left img{width: 60%;}
  .footer_menu ul li{float: left;    font-size: 14px;}
  #subContents { width:100%; padding: 2%; }
}

@media all and (min-width: 901px) and (max-width: 1150px) {
  #subContents { width:100%; padding: 2%; }
  .cont_tit {margin: 40px 0 0 0;}
    .nav>li>a { font-size: 20px; padding: 0 20px;}
    #logo {width: 13%}
  #logo img{width: 50%}
  .footer_left img{width: 60%;}
  .footer_menu ul li{float: left;    font-size: 14px;}
  #search{top: 30%;width: 185px;height: 35px;right: 0;}
  .primary-menu {width: 80%;}

}


@media all and (min-width: 901px) and (max-width: 1150px) {
  #gnb {height: 70px !important;}
  #search{display: none;}
  .headerWrap .nav{display: none;}
  .header-row{    display: block;}
.headerWrap {    padding-bottom: 0px;}
}



@media all and (max-width: 900px) {

  #gnb {height: 70px !important;}
  #subContents { width:100%; padding: 2%; }
  .header-row{display: contents;}
  .primary-menu{display: none;}
  #search{display: none;}
  #logo img{width: 60%}
   .headerWrap{padding-bottom: 70px;}
  

}


@media all and (max-width: 700px) {

  #lnb{display:none;}
  h3.main_t {font-size: 25px;display: inline-block;float: left;}
  #page_count {margin-top:15px;font-size:14px;right: 0;float: right;}
}

.maintrans { z-index: -1; transform: scale(1.2) ; transition: 3s linear; z-index: -1; width: 100%; height: 100%; position: absolute; }


@media all and (max-width: 1150px) {
    .wrap-header {padding:0;}
    .wrap-header .container  {padding:0 20px;}

    .wrap-header .head-navi {position: fixed;right: -100%;top: 0px;z-index: 200;width: 100%;max-width: 430px;height: 100%;padding: 0;background: #003dcb;transition: all 0.55s cubic-bezier(0.7, 0, 0.3, 1);}
    .wrap-header .head-navi.on {right: 0; opacity: 1; transition: all 0.55s cubic-bezier(0.7, 0, 0.3, 1);}
    .wrap-header .head-mobile-top {position: relative;display: block;padding: 27px 30px;background: #003dcb;border-bottom: 1px solid rgba(255,255,255,.3);text-align: left;font-size: 0;}

    .wrap-header .btn-gnb-close {display: inline-block; cursor: pointer;}
    .wrap-header .btn-gnb-close {position: absolute; right: 0; top: 0; width: 70px; height: 100%; background: url('../images/btn-navi-close.png') no-repeat center center; text-indent: -99999px;}
    .wrap-header .btn-gnb-close button {width: 100%; height: 100%;}

    .mo_slidemenu {width: 100%;display: block;}
    .mo_menu_left {    display: inline-block;    float: left;    width: 30%;}
    .mo_menu_right {    width: 70%;    float: left;    display: block;    height: 100% !important;    max-height: none;    background: #0062f4;    position: absolute;    left: auto;    right: 0px;    top: 55px;}
    .mo_menu_1li {text-align: left;color: #fff;padding: 20px;}
    .mo_menu_2 {    text-align: left; display: none;}
    .mo_menu_2.on{display: block;}
    .mo_menu_2li {    position: relative; background: transparent; border: 0px; border-bottom: 1px solid rgba(255,255,255,.3);}
    .mo_menu_2li:hover .mome_2txt:after {content: ''; position: absolute; right: 96.5%; top: 12px; z-index: 120; width: 19px; height: 24px; background: url('../images/arrow-mobile-navi.png') no-repeat center center;}
    .mo_menu_3 {    overflow: hidden;    display: block;    width: 100%;    max-height: 0px;    padding: 0;    background: #fcfcfc;    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);}
    .mo_menu_3.on {    max-height: 500px;    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);}
    .mo_menu_3li {    position: relative;    width: 100%;    margin: 0px;}
    .mome_1txt {    font-size: 17px;    font-weight: bold;}
    .mome_1txt:hover {text-decoration: underline; color: #fff; }
    .mome_2txt {    color: #fff;    padding: 15px 20px;}
    .mome_2txt:hover {text-decoration: underline; color: #fff;}
    .mome_2txt.plus {position: relative; background: url('../images/arrow-a2.png') no-repeat 90% center !important;}
    .mome_2txt.plus.on {background: url('../images/arrow_a2-hover.png') no-repeat 90% center !important; border-bottom: 1px solid #cacaca;}   
    .mome_3txt {display: inline-block;padding: 5px 0 5px 15px;background: url(../images/bul-a3.png) no-repeat left  10px;font-size: 15px;color: #2d2d2d;margin: 0 25px;}

}

@media all and (min-width: 1151px){
    .wrap-header{display: none;}

}
