﻿@font-face {
  font-family: 'SBAggro';
  font-weight: 300; /* L */
  font-display: swap;
  src: local('SBAggroL'),
       url(../font/SBAggroL.woff2) format('woff2'),
       url(../font/SBAggroL.woff) format('woff');
}

@font-face {
  font-family: 'SBAggro';
  font-weight: 400; /* M */
  font-display: swap;
  src: local('SBAggroM'),
       url(../font/SBAggroM.woff2) format('woff2'),
       url(../font/SBAggroM.woff) format('woff');
}

@font-face {
  font-family: 'SBAggro';
  font-weight: 700; /* B */
  font-display: swap;
  src: local('SBAggroB'),
       url(../font/SBAggroB.woff2) format('woff2'),
       url(../font/SBAggroB.woff) format('woff');
}

/**/
@font-face {
  font-family: 'SUIT';
  font-weight: 400; /* Regular */
  font-display: swap;
  src: local('SUIT Regular'),
       url(../font/SUIT-Regular.woff2) format('woff2'),
       url(../font/SUIT-Regular.woff) format('woff');
}

@font-face {
  font-family: 'SUIT';
  font-weight: 500; /* Medium */
  font-display: swap;
  src: local('SUIT Medium'),
       url(../font/SUIT-Medium.woff2) format('woff2'),
       url(../font/SUIT-Medium.woff) format('woff');
}


@font-face {
  font-family: 'SUIT';
  font-weight: 700; /* Bold */
  font-display: swap;
  src: local('SUIT Bold'),
       url(../font/SUIT-Bold.woff2) format('woff2'),
       url(../font/SUIT-Bold.woff) format('woff');
}

/**/
html{font-size: 16px;color:#333}
body{ margin: 0;padding: 0;line-height: 1.2;font-family: 'SUIT', sans-serif;}
body.scroll-lock {
    overflow: hidden;
  }

/**/
.skip-nav{position:relative;width:100%;z-index:99999;}
.skip-nav a{position:absolute;left:0;top:-1000px;display:block;width:100%;padding:5px 0; font-style:normal;font-variant:normal;text-align:center;color:#ffffff;background:#000;}
.skip-nav a:active,
.skip-nav a:focus{top:0;text-decoration:none;color:#ffffff;}

/*blind*/
caption,
.blind {position: absolute;overflow: hidden;width: 1px;height: 1px;margin: -1px;line-height: 0;border: 0;clip: rect(0 0 0 0);font-size: 0;}

/**/
.inner{width: 100%;max-width: 1500px;margin: 0 auto;}
.newwin{position: relative; display: inline-block;padding-right: 20px; }
.newwin::before{content: "";display: block;position: absolute;right: 0;top:2px;width: 14px;height: 14px;background: url('../images/common/icon_newwin.png') center no-repeat }

/*header*/
.header{position: relative;z-index: 110;}
.header-top{position: relative;height: 42px;background-color: #f2f2f2;}
.header-top::after{content: "";display: block;width: 50%;height: 42px;position: absolute;left:50%;top:0; background: #0175c2 url('../images/common/deco_headerTop.png') left top no-repeat ; }
.header-top .inner{position: relative; display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;height: 100%;}
.header-top .inner .logo{position: absolute;left:0;top: 70px;width: 293px;height: 36px;background:  url('../images/common/h1_logo.png') center no-repeat; }
.header-top .inner .logo a{display: block;height: 100%;}

.site-links{display: flex; height: 14px;}
.site-links > li{position: relative;padding: 0 0 0 21px;margin: 0 0 0 20px; }
.site-links > li a {color: #333333;}
.site-links > li::before{content: "";display: block;position: absolute;left: 0;top:0;  width:1px;height: 14px;background-color: #bbbbbb}
.site-links > li:first-child{margin-left: 0;padding-left: 0;}
.site-links > li:first-child::before{display: none;}
.lang-select{display: flex;position: relative;width: 136px;height: 26px;align-items: center;background-color: #014c7e;border-radius: 15px; z-index: 1;}
.lang-select > li{width: calc(100% - 72px);height: 100%;}
.lang-select > li > a{display: block;text-align: center;font-size: 14px;color:#80a6bf;width: 100%;height: 100%;line-height:26px}
.lang-select .kor{width: 72px;background-color: #fff; border-radius: 15px;}
.lang-select .kor a{color:#333333;font-weight: 700;}

/*gnb*/
.header-btm{height: 92px;border-bottom: 1px solid #e5e5e5;box-shadow: 0 10px 20px 1px rgba(239, 239, 239, 0.9);background-color: #fff;}
.header-btm .inner{display: flex;padding-left: 295px;height: 100%;}
.gnb-area{width: calc(100% - 140px);height: 100%;}
.gnb{position: relative; display: flex;align-items: center;justify-content: space-around; width: 100%;height: 100%;padding: 0 44px;}
.gnb > li{display:flex;align-items: center;  padding:0;height: 100%;}
.gnb > li > a{position: relative; display: flex;align-items: center; height: 100%;color:#000;font-size: 22px;font-weight: 700;  }
.gnb > li > a::after {content: '';position: absolute;left: 50%;bottom: 0;width: 0;height: 3px;background: #0064de;transition: all 0.3s ease;transform: translateX(-50%);}
.btn-area{display: flex;align-items: center;justify-content: space-between;width: 136px; height: 100%;}
.btn-area .btn-topsearch{display: block;width: 21px;height: 21px;background: url('../images/common/btn_search.png') center no-repeat;}
.btn-area .btn-alarm{position: relative; display: block;width: 18px;height: 20px;padding: 0 5px 0 0; background: url('../images/common/btn_alarm.png') center no-repeat;}
.btn-area .btn-alarm .num{display: block;position: absolute;top:-5px;right: -5px; min-width: 14px ;height: 14px;line-height: 14px; text-align: center;background-color: #e82960;border-radius: 100%;color: #fff;font-size: 10px;font-weight: 700;padding: 0 2px;}
.btn-area .btn-sitemap{display: block;width: 23px;height: 20px;background: url('../images/common/btn_sitemap.png') center no-repeat;}
.btn-area .btn-close-menu{display: none;width:16px;height:16px; background:  url(../images/common/btn_close_menu.png) center no-repeat;}
.gnb > li .sub-menu{display: none;position: absolute;width: 210px;top:134px;z-index: 10;}
.gnb > li:nth-child(1) .sub-menu{left:85px}
.gnb > li:nth-child(2) .sub-menu{left:315px}
.gnb > li:nth-child(3) .sub-menu{left:545px}
.gnb > li:nth-child(4) .sub-menu{left:775px}
.gnb > li:nth-child(5) .sub-menu{left:1005px}
.gnb > li .sub-menu .sub-label{position: relative; display: flex;width: 100%;height: 46px;margin: 0 0 20px 0; font-size: 16px;color: #000;font-weight: 600;align-items: center;padding: 0 30px 0 15px;border-radius: 5px;border:1px solid #ccc}
.gnb > li .sub-menu .sub-label::after{content: "";display: block;width: 12px;height: 6px;position: absolute;right: 15px;top:50%;transform: translateY(-50%); background: url('../images/common/arr_sub_label.png') center no-repeat;}
.gnb > li .sub-menu .depth2 > li{margin: 0 0 10px 0;padding: 0 0 0 20px;}
.gnb > li .sub-menu .depth2 > li:last-child{margin-bottom: 0;}
.gnb > li .sub-menu .depth2 > li > a{position: relative; display: block;padding: 0 0 0 9px;font-size: 15px;color: #444444;font-weight: 600;}
.gnb > li .sub-menu .depth2 > li > a::after{content: "";display: block;width: 3px;height: 3px;position: absolute;left:0;top:5px;background-color: #444444;border-radius: 100%;}
.bg-depth2{display: none;position: absolute;left: 0;top:134px ; width: 100%;height:250px;background: #fff url(../images/common/bg_hd_shadow.gif) center top repeat-x;border-bottom: 1px solid #e5e5e5;z-index: 5;}
.bg-depth2 .inner{height: 100%;}
.bg-depth2 .slogan{display: block;font-family: 'SBAggro';height: 100%;width: 330px;padding: 50px 0 75px 0; border-right: 1px solid #e5e5e5; background: url(../images/common/text_depth2.png) right bottom no-repeat;font-size: 27px;color:#000000;font-weight: 300;}
.bg-depth2 .slogan span{display: block;color: #0064de;font-weight: 600;}
.header-mobile{display: none;height: 90px;box-shadow: 0 10px 20px 1px rgba(239, 239, 239, 0.9);}
.header-mobile .inner{display: flex;align-items: center;justify-content: space-between;height: 100%;}
.header-mobile .logo{display: block; left:0;top: 70px;width: 293px;height: 36px;background:  url('../images/common/h1_logo.png') center no-repeat; } 
.header-mobile .btn-open-menu{display: block;width: 23px;height: 20px;background: url(../images/common/btn_sitemap.png) center no-repeat;}

/*search */
.top-search {display: none; position: absolute;width: 100%;top: 134px;left:0;background: #fff url(../images/common/bg_hd_shadow.gif) center top repeat-x;border-bottom: 1px solid #e5e5e5;z-index: 1;}
.top-search.on{display: block;}
.top-search .inner{position: relative; padding: 50px 0 ;display: flex;justify-content: center; }
.top-search .intBox{display: flex;  height: 70px;width: 100%; max-width:600px;border-radius: 8px;border:1px solid #aaaaaa; overflow: hidden;margin-right: 40px;}
.top-search .intBox input[type=text]{display: block;height: 100%;width: calc(100% - 60px);padding: 10px 0 10px 22px;border: 0;font-size:20px;}
.top-search .intBox input::placeholder{color:#888888}
.top-search .intBox .btn-topsearch{ display: block; width: 60px;height: 100%;background:  url(../images/common/btn_search.png) center no-repeat;}
.top-search .btn-close-sarch{display: block;padding: 0 26px 0 0; font-size: 20px;color: #444444;font-weight: 600;background:  url(../images/common/btn_close_serch.png) right center no-repeat;}
.bg-mask {display: none;position: fixed;top:0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.6);z-index: 100;}
.bg-mask.on{display: block;}
.bg-mask-search {display: none;position: fixed;top:0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.6);z-index: 100;}
.bg-mask-search.on{display: block;}

/*footer*/
.footer{border-top:1px solid #e5e5e5;background-color: #f9f9f9;padding: 60px 0;}
.footer .inner{display: flex;}
.footer .logo-box {flex: 1 0 270px;}
.footer .logo-box .foot-logo{display: inline-block;}
.footer .logo-box .foot-logo:first-child{margin-right: 25px;}
.footer .info{flex-grow: 1;font-size: 18px;color: #444444;font-weight: 500;}
.footer .select{display: inline-block;width: 250px;height: 52px;padding: 0 20px;background: url('../images/common/icon_select.png') no-repeat top 50% right 20px #fff;border:1px solid #dddddd;border-radius: 8px;font-size: 18px;color: #333333;}

/**/
.btn-top{position: fixed;right: calc((100% - 1500px) / 2 - 80px);bottom: 135px; display: block;width: 61px;height: 61px;background-color: #2874f3;border-radius: 100%;text-align: center;z-index: 10;}
.btn-top span{display: inline-block;padding:15px 0 0 0;background: url('../images/common/icon_top.png') center top no-repeat;color:#ffffff;font-size: 14px;font-weight: 600;}

@media screen and (min-width: 1025px) {
  .gnb > li:hover > a::after,
  .gnb > li.current a::after {width: 100%;}
  .gnb > li:hover .sub-menu .sub-label{background-color: #0064de;border:1px solid #0064de;color:#fff}
  .gnb > li:hover .sub-menu .sub-label::after{background: url('../images/common/arr_sub_label_ov.png') center no-repeat;}
  .gnb > li .sub-menu .depth2 > li:hover > a,
  .gnb > li .sub-menu .depth2 > li.current > a{color:#0064de;font-weight: 600;text-decoration: underline;}
  .gnb > li .sub-menu .depth2 > li:hover > a::after{background-color: #0064de;}
}

@media screen and (max-width: 1700px) {
    .btn-top{right: 10px;}
}

@media screen and (max-width: 1540px) {
  	.inner{padding: 0 20px;}
    .header-top .inner .logo{left: 20px;}
    .gnb{position: static;}
    .bg-depth2 .slogan{width: 175px;}
    .gnb > li .sub-menu{top:168px;width: 16%;padding-right: 15px;}
    .gnb > li:nth-child(1) .sub-menu{left:17%}
    .gnb > li:nth-child(2) .sub-menu{left:32.5%}
    .gnb > li:nth-child(3) .sub-menu{left:48.5%}
    .gnb > li:nth-child(4) .sub-menu{left:64.5%}
    .gnb > li:nth-child(5) .sub-menu{left:80.5%}
}

@media screen and (max-width: 1200px) {
  .header-top .inner .logo{width: 170px;background-size: 100%;}
  .header-btm .inner{padding-left: 195px;}
  .btn-area{width: 95px;}
  .gnb{padding: 0 25px;}
  .gnb-area{width: calc(100% - 95px);}
  .bg-depth2 .slogan{display: none;}
  .gnb > li > a{font-size: 18px;}
  .gnb > li .sub-menu{width: 19.2%;}
  .gnb > li:nth-child(1) .sub-menu{left:2.2%}
  .gnb > li:nth-child(2) .sub-menu{left:21.2%}
  .gnb > li:nth-child(3) .sub-menu{left:40.4%}
  .gnb > li:nth-child(4) .sub-menu{left:59.6%}
  .gnb > li:nth-child(5) .sub-menu{left:78.8%}
}

@media screen and (max-width: 1024px) {
  .menuOpen{overflow: hidden;}
  .menuOpen .header{z-index: 10000;}
  .menuOpen .bg-mask{display: block;}
  .bg-mask{display: none;}
  .header-mobile{display: block;}
  .header{position: fixed;top:0;right: -100%;width: 342px;height: 100%;background-color: #fff;overflow-y: auto;}
  .header-top{background-color: #f2f2f2;height: 42px;}
  .header-top::after{display: none;}
  .header-top .inner{padding-right: 0;}
  .header-top .inner .logo{display: none}
  .header-btm{position: relative; height: auto;border-bottom: 0;box-shadow: none;padding-top: 66px;}
  .header-btm .inner{display: block; padding: 0;}
  .gnb{display: block;padding: 0;}
  .gnb-area{width: 100%;border-top: 1px solid #e5e5e5;}
  .site-links > li a{font-size: 15px;letter-spacing: -1px;}
  .site-links > li{padding-left: 0;margin-left: 12px;}
  .site-links > li::before{display: none;}
  .site-links > li .newwin{padding-right: 16px;}
  .lang-select{position: absolute;bottom: -45px;background-color: #dddddd}
  .lang-select > li > a{color:#777}
  .lang-select .kor{background-color: #0175c2;}
  .lang-select .kor a{color:#fff}
  .btn-area{position: absolute;top:0;height: auto;top: 23px;right:20px;}
  .btn-area .btn-close-menu{display: block;}
  .btn-area .btn-sitemap{display: none;}
  .gnb > li{display: block; padding:0;border-bottom: 1px solid #e5e5e5;margin-bottom: 0;}
  .gnb > li > a{width: 100%;height: 67px;padding: 20px;}
  .gnb > li > a::before{content: "";display: block;position: absolute; left: inherit;right:20px;top:50%;transform: translateY(-50%); width: 26px;height: 26px;border:1px solid #cccccc;border-radius: 100%;background: #fff url('../images/common/arr_gnb_depth01.png') center no-repeat;}
  .gnb > li .sub-menu{display: none;position: relative;width: 100%;top:0;border-top: 1px solid #e5e5e5;padding:20px 0;background-color: #f8f8f8;}
  .gnb > li .sub-menu .sub-label{display: none;}
  .gnb > li:nth-child(1) .sub-menu{left:0}
  .gnb > li:nth-child(2) .sub-menu{left:0}
  .gnb > li:nth-child(3) .sub-menu{left:0}
  .gnb > li:nth-child(4) .sub-menu{left:0}
  .gnb > li:nth-child(5) .sub-menu{left:0}
  .gnb > li .sub-menu .depth2{padding-left: 20px;}
  .gnb > li .sub-menu .depth2 > li > a{font-size: 17px;}
  .gnb > li .sub-menu .depth2 > li > a::after{top:8px}
  .gnb > li.on > a{background-color: #0064de;color:#fff}
  .gnb > li.on > a::before{background: #fff url('../images/common/arr_gnb_depth01_on.png') center no-repeat;}
  .gnb > li.on .sub-menu .depth2 > li.on > a{color:#0064de;font-weight: 600;text-decoration: underline;}
  .gnb > li.on .sub-menu .depth2 > li.on > a::after{background-color: #0064de;}
  .top-search{position: fixed;top:0;z-index: 1000;}
  .top-search .inner{padding: 50px 20px;display: block}
  .top-search .btn-close-sarch{margin: 20px auto 0  auto;}
  .bg-mask-search.on{display: none;}
  .btn-top{display: none !important;}
  .footer{padding: 30px 0;}
  .footer .inner{position: relative;padding-bottom: 72px;}
  .fmr-site{position: absolute;left: 50%;transform: translateX(-50%);bottom: 0;}
}

@media screen and (max-width: 768px) {
  .footer .inner{display: block;padding-bottom: 0;}
  .footer .logo-box{text-align: center;margin-bottom: 25px;}
  .footer .info{font-size: 14px;text-align: center;margin-bottom: 25px;}
  .fmr-site{position: relative;left: inherit;transform: none;bottom: 0;text-align: center;}
  .footer .select{height: 39px;font-size: 14px;}
  .footer .logo-box .foot-logo img{width: 46px;}
  .footer .logo-box .foot-logo:first-child img{width: 112px;}
}

@media screen and (max-width: 480px) {
  .inner{padding: 0 10px;}
  .header{width: 100%;}
  .top-search .inner{padding:20px 10px}
  .header-mobile .logo{width: 220px;background-size: 100%;}
}

@media screen and (max-width: 480px) {
  
}