/* Noto Sans KR http://www.google.com/fonts/earlyaccess */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(../font/NotoSansKR-Thin.woff2) format('woff2'),
  url(../font/NotoSansKR-Thin.woff) format('woff'),
  url(../font/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(../font/NotoSansKR-Light.woff2) format('woff2'),
  url(../font/NotoSansKR-Light.woff) format('woff'),
  url(../font/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(../font/NotoSansKR-Regular.woff2) format('woff2'),
  url(../font/NotoSansKR-Regular.woff) format('woff'),
  url(../font/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(../font/NotoSansKR-Medium.woff2) format('woff2'),
  url(../font/NotoSansKR-Medium.woff) format('woff'),
  url(../font/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 800;
  src: url(../font/NotoSansKR-Bold.woff2) format('woff2'),
  url(../font/NotoSansKR-Bold.woff) format('woff'),
  url(../font/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: url(../font/NotoSansKR-Black.woff2) format('woff2'),
  url(../font/NotoSansKR-Black.woff) format('woff'),
  url(../font/NotoSansKR-Black.otf) format('opentype');
}


/* Lato http://www.google.com/fonts/earlyaccess */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: url(../font/Lato-Thin.woff2) format('woff2'),
  url(../font/Lato-Thin.woff) format('woff'),
  url(../font/Lato-Thin.otf) format('opentype');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(../font/Lato-Light.woff2) format('woff2'),
  url(../font/Lato-Light.woff) format('woff'),
  url(../font/Lato-Light.otf) format('opentype');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(../font/Lato-Regular.woff2) format('woff2'),
  url(../font/Lato-Regular.woff) format('woff'),
  url(../font/Lato-Regular.otf) format('opentype');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 500;
  src: url(../font/Lato-Medium.woff2) format('woff2'),
  url(../font/Lato-Medium.woff) format('woff'),
  url(../font/Lato-Medium.otf) format('opentype');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(../font/Lato-Bold.woff2) format('woff2'),
  url(../font/Lato-Bold.woff) format('woff'),
  url(../font/Lato-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url(../font/Lato-Black.woff2) format('woff2'),
  url(../font/Lato-Black.woff) format('woff'),
  url(../font/Lato-Black.otf) format('opentype');
}

/* reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0}
fieldset,img,abbr,acronym{border:0 none}
dl,ul,ol,menu,li{list-style:none}
table{border-collapse:collapse;border-spacing:0;border:0 none}
blockquote,q{quotes: none}
blockquote:before,blockquote:after,q:before,q:after{content:''}
input,select,textarea,button{vertical-align:middle}
hr{display:none}
button{border:0 none;background-color:transparent;cursor:pointer}
body{font-family:'Lato','Noto Sans KR','돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif; font-size:14px; font-weight:400; color:#666;}
img,iframe{vertical-align:middle}
legend{*display:none}
a{color:#333;text-decoration:none; cursor: pointer;}
a:active,a:hover{text-decoration:none;}
address,cite,code,dfn,em,var,strong,em{font-style:normal;font-weight:normal}
caption{font-size:0;width:0;height:0;line-height:0;text-indent:-9999px}
ins{text-decoration:none}
del{text-decoration:line-through}
input,select{font-family:'Lato', 'Noto Sans KR','돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif; font-size:15px; font-weight:500; color:#666;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:none}




/* 플로팅 */
.fr {float:right !important;}
.fl {float:left !important;}
.fc {float:center !important;}
.fn {float:none !important;}
.clear:after {display:block; clear:both; content:"";}
.block {display:block;}
.cl_b {width:0;height:0;font-size:0;line-height:0;clear:both}
.hide {display:none}
.tbl {border-collapse:collapse;border-spacing:0} /* 테이블 초기화 */
.clear_g {display:block;overflow:visible;width:auto;clear:both;*zoom:1}
.clear_g:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
.txtL{text-align:left !important;}
.txtC{text-align:center !important;}
.txtR{text-align:right !important;}
.vm {vertical-align:middle !important}
.vt {vertical-align:top !important}


/*COMMON*/
html, body{
  width: 100%;
  height: 100%;
  /*  overflow: hidden;*/
}


.wrap{ height: 100% }


/*HEADER*/
.header{position: relative; width: 100%; padding: 0 75px; height: 98px; background:#fff; 
  -webkit-box-shadow: 0px 0px 15px 9px rgba(0,0,0,0.15); 
  box-shadow: 0px 0px 15px 9px rgba(0,0,0,0.15);}

.header h1{ display: inline-block; float: left; margin-top:28px; width: 325px; height: 43px;}
.header h1 a{position: relative; display: block; height: 43px; font-size: 20px; text-align: right; line-height: 45px;  background: url(../images/logo.png) 0 50% no-repeat; }
.header h1 a:after{content: ''; width: 1px; height: 20px; position: absolute; top: 13px; left: 164px; background: #bbb }


.header .log_Wrap{ float: left; width: 198px; height: 50px; text-align: center; background: #0e54c5; border-right: 1px solid #0b44a0}
.header .log_Wrap > ul{    display: inline-block; margin-top: 16px;}
.header .log_Wrap > ul > li{float: left;}
.header .log_Wrap > ul > li > a{padding: 0 17px; height: 12px; line-height: 12px; font-size: 13px; font-weight: 500; color: #a6b7e3; 
  background: url(../images/line.png) 100% 50% no-repeat  }
  .header .log_Wrap > ul > li:last-child > a{background: none;}
  .header .log_Wrap > ul > li > a > span{font-weight: 300}
  .header .log_Wrap > ul:after{ content:""; display:block; clear:both;}




  .gnb{ float: left; margin-left: 100px;}
  .gnb ul { list-style: none; padding: 0; margin: 0; float: left; }  
  .gnb > ul > li { float: left; padding: 0 50px}
  .gnb > ul > li > a {
    margin-top:40px;
    font-size:21px;
    font-weight: 500;
    color: #000;
    display: inline-block;
    line-height: 1;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
  }
  .gnb > ul > li > a:hover::after,
  .gnb > ul > li > a:focus::after,
  .gnb > ul > li > a.active::after {
    content: "";
    position: absolute;
    background-color: #49f2ff;
    height: 14px;
    width: 110%;
    left: -4px;
    bottom: 2px;
    z-index: -1;    
  }
  .gnb > ul > li > a:hover,
  .gnb > ul > li > a:focus { transform: translateY(-5px); }
  .snsLink{float: right;}


  /* lnb */ 
  #lnb {position: relative;  float: left;  width: 198px;height: 100%; border-right: 1px solid #dedede}
  #lnb h1 {height: 40px;text-align: center;color: #fff;font-size: 20px;line-height: 1.8;letter-spacing: -2px; background: #d71a21;} 
  #lnb > ul {} 
  #lnb > ul > li {border-bottom: 1px solid #dedede;} 
  #lnb > ul > li > a {
    display: block;
    padding: 0 0 0 20px;
    line-height: 65px;
    height: 65px;
    font-size: 17px;
    font-weight: 400;
    color: #222;
    background:  url(../images/ic_down.png) 170px 50% no-repeat;
  } 
  #lnb > ul > li > a:hover {color: #fff; background: url(../images/left_bg.png) 100% 50% no-repeat} 
  #lnb > ul > li.on > a { color: #fff; background: url(../images/left_bg.png) 100% 50% no-repeat;} 
  #lnb > ul > li ul {display: none; margin: 10px 0;} 
  #lnb > ul > li > ul > li > a {
    display: block;
    color: #555;
    padding: 0 0 0 20px;
    line-height: 34px;
    height: 34px;
    font-size: 15px;
    font-weight: 400;
  } 



  /*SNS링크*/

  .snsLink ul { 
    padding: 0;
    margin-top: 35px;

  }
  .snsLink > ul > li {
    width: 30px;
    height: 30px;
    margin-left: 5px;    
    background-color: #cfd3dc;
    border-radius: 50%;
    text-indent: -9999px;    
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);  
    float: left;  
  }
  .snsLink li:hover {
    transform: translateY(-5px);    
  }
  .snsLink a {
    background-repeat: no-repeat;
    background-position: center;    
    width: 30px;
    height: 30px;
    display: block;
  }
  .snsLink li:first-of-type a {
    background-image: url(../images/sns_home.png);    
  }
  .snsLink li:nth-of-type(2) a {
    background-image: url(../images/sns_blog.png);    
  }
  .snsLink li:nth-of-type(3) a {
    background-image: url(../images/sns_fb.png);
  }
  .snsLink li:nth-of-type(4) a {
    background-image: url(../images/sns_ytub.png);
  }
  .snsLink li:first-of-type:hover,
  .snsLink li:first-of-type:focus {
    background-color: #00a3cc;
  }
  .snsLink li:nth-of-type(2):hover,
  .snsLink li:nth-of-type(2):focus {
    background-color: #2eb82e;
  }
  .snsLink li:nth-of-type(3):hover,
  .snsLink li:nth-of-type(3):focus {
    background-color: #004d99;
  }
  .snsLink li:nth-of-type(4):hover,
  .snsLink li:nth-of-type(4):focus {
    background-color: #ff3333;
  }



  .btn_openmenu{display: none}



  /*모바일메뉴*/
  .side{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 800; 
  }

  .side_in {
    right: -100%;
    position: relative;
    width: 70%;
    height: 100%;
    margin-left: 30%;
    background-color: #fff;
    padding: 70px 0 0 20px;
  }

  .smenu_list li a{font-size: 17px; line-height: 2.5;}

  .smenu_list li a:hover{font-weight: 500; color: #000}



  .s_btn_close{
    display: inline-block;
    position: absolute;
    top:30px;
    right: 20px;
    padding-left: 20px;
    margin-left: 10px;
    width: 35px;
    height: 21px;
    overflow: hidden;
    text-indent: -9999px;
    vertical-align: middle;
    background: url(../images/ic_s_close.png) no-repeat right 0 ;
  }




  /*content*/
  .sub_content{ max-width: 1200px;  margin: 0 auto 100px auto }
  .content img{width: 100%;}
  .m_bg{display: none;}

  /*텍스트*/
  .txt_Wrap{padding-top:190px; color: #fff}
  .txt_Wrap .txt_eng{font-size:26px;line-height: 1; }
  .txt_Wrap .txt_tit{margin-top:15px; font-size:60px; font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
  .txt_Wrap .txt_stit{margin-top:35px;font-size:26px;line-height: 1; }

  .txt_arrow{margin-top:50px }
  .txt_arrow:after{ content:""; display:block; clear:both}
  .txt_arrow li{ display: inline-block;}
  .txt_arrow li a{width: 167px;display:inline-block; font-size: 20px; border: 1px solid #fff; padding: 10px 60px 10px 30px;
                  font-weight: 400; color: #fff; background: url(../images/ic_arrow_01.png) 90% 50% no-repeat;
                    transition-duration: 0.3s; transition-property: transform;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0);  }

  .txt_arrow li a:hover{    
    transform: translateY(-5px);
  }


  /*main_bottom*/
  .m_btm_bg{width: 100%; margin-top: 215px; left:0;  height:125px; background: #fff; border-top-left-radius: 40px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:    2px 2px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 2px 10px 0px rgba(50, 50, 50, 0.75);}
    .m_btm_bg ul{height: 100%}    
    .m_btm_bg ul:after{ content:""; display:block; clear:both}
    .m_btm_bg ul li{ float: left; padding:37px 0 0 45px;  width: 25%; height: 100%; line-height: 1; font-size: 20px; font-weight: 500;
      letter-spacing: -0.025em; border-right: 1px solid #e6e6e6; color:#000}
      .m_btm_bg ul li a{position: relative; margin-top:20px; display: block; font-size:13px;line-height: 1; }
      .m_btm_bg > ul > li > a:after{ content: ''; position: absolute; top: 14px; left: -2px; width: 60px; height: 1px; background: #7f7f7f;}
      .m_btm_bg > ul > li:nth-child(3) > a:after{display: none}

      .m_btm_bg ul li:nth-child(1){background: url(../images/ic_01.png) 203px 50% no-repeat ;}
      .m_btm_bg ul li:nth-child(2){background: url(../images/ic_02.png) 193px 50% no-repeat ;}
      .m_btm_bg ul li:nth-child(3){width: 50%; background: url(../images/bg_ob.png)0 0 no-repeat ;}

      /*bx*/

      .bxslider div{padding-left: 10px; font-size: 17px; color: #4a4a4a; background: url(../images/ic_dot.png) 0 50% no-repeat }
      .bx-wrapper .bx-controls-direction{display: none;}




      /*footer*/
      .footer_Wrap{padding: 50px 0; text-align: center; width: 100%; background: #000;}
      .footer_Wrap address{font-size: 15px; color: #c4c4c4}
      .footer p{margin-top:5px;}



/*sub*/
.header.sub{border-bottom: 1px solid #333}
.sub_header{width: 100%; height: 100px; margin: 30px auto; text-align: center; border-bottom: 3px solid #333}


/*스와이퍼*/
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {

}

.swiper-slide img{width: 100%}
.swiper-slide h2{    
  width: 100%;
    height: 150px;
    padding: 60px 72px;
    line-height: 1;
    text-align: center;
    border-bottom: 3px solid #333;
    font-size: 20px;
    font-weight: 400;
    color: #000; }

.h2_01{   
position: relative; 
  margin-bottom: 30px;
  width: 100%;
    height: 150px;
    line-height: 1;
    text-align: center;
    border-bottom: 1px solid #999;
    font-size: 20px;
    font-weight: 400;
    color: #000; 
  }

.stab{position: absolute; left:50%; bottom: 0;transform: translateX(-50%); }
.stab:after{ content:""; display:block; clear:both}
.stab li{float: left; width: 200px; }
.stab li a{ 
    display: block;
    font-size: 18px;
    color: #666;
    height: 70px;
    line-height: 70px;  

  }


.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ top: 120px;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{top:72px}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{top:72px;}
.swiper-button-prev{display: block; position: absolute; top: 46px; left: 0; width: 57px; height: 57px; background:#fff url(../images/ic_prev_01.png) 50% 50% no-repeat; border:1px solid #8d8d8d; z-index: 9999}
.swiper-button-next{display: block; position: absolute; top: 46px; right: 0; width: 57px; height: 57px; background:#fff url(../images/ic_next_01.png) 50% 50% no-repeat; border:1px solid #8d8d8d; z-index: 9999}


.sub_content .h2{   
 width: 100%;
    height: 150px;
    padding: 60px 72px;
    line-height: 1;
    text-align: center;
    border-bottom: 3px solid #333;
    font-size: 20px;
    font-weight: 400;
    color: #000;}

  .sub_img img{width: 100%; }

  .sub_img{text-align: center}
  .sub_img ul li{display: none;}
  .sub_img ul li.on { display: block;}
  
.stab li.on a:hover,.stab li.on a{ font-weight: 500; color: #000; border-bottom: 2px solid #217ff3;}



        @media all and (max-width: 1600px) {

          .gnb > ul > li{ padding: 0 30px;}

        }

        @media all and (max-width: 1400px) {

          .header{padding: 0 5px}

        }

        @media all and (max-width: 1280px) {



          .gnb{display: none;}
          .snsLink{display: none;}
          .btn_openmenu{
           display: block;
           position: absolute;
           top:35px;
           right: 26px;
           overflow: hidden;
           width: 30px;
           height: 30px;
           text-indent: -99999px;
           background: url(../images/ic_menu.png) no-repeat 0 0;
         }

         .txt_Wrap .txt_stit{line-height: 1.4}

         .btn_openmenu a,
         .btn_search a{
          display: block;
          width: 24px;
          height: 24px;
        }

        .pc_bg{display: none;}
        .m_bg{display: block;}

      }


      @media all and (max-width: 600px) {


        .m_btm_bg ul li{display: block; float: none; width: 100% !important}

        .m_btm_bg ul li:nth-child(1){background: url(../images/ic_01.png) 90% 50% no-repeat ;}
        .m_btm_bg ul li:nth-child(2){background: url(../images/ic_02.png) 90% 50% no-repeat ;border-top: 1px solid #e6e6e6;}

        .footer{padding-top: 50px; padding: 20px;}
        .footer_Wrap address{ margin-top: 20px;}
      }


      @media all and (max-width: 820px) {

        .h2_01{height: 140px}
        .stab{width: 100%}
        .stab li{width: 100%}

        .stab li a:hover, .stab li a.on {
              font-weight: 500;
              color: #fff;
             background: #217ff3;
          }

      }


      @media all and (max-width: 400px) {

        .header h1{width: 230px;}
        .header h1 a{background-size: 100px auto; font-size: 17px;  letter-spacing: -0.045em;  }

        .header h1 a:after{left: 107px; top:14px; height: 20px;}

        .txt_Wrap { padding: 50px 20px 0 20px; }

        .txt_Wrap .txt_tit{font-size: 30px}
        .txt_stit{ margin-top: 15px !important; font-size: 20px !important;}
        .m_btm_bg ul li{ padding: 37px 0 0 20px;}

        .bx-wrapper .bx-controls-auto .bx-controls-auto-item, .bx-wrapper .bx-pager-item{ bottom: 32px !important;}
      }