/* HEADER */
header{position:absolute; transition-duration:0.3s; width: 100%; height: 80px; z-index: 99; text-align:center; overflow:hidden; }
header:after{content:""; position: absolute;width: 100%; height: 1px; background: #ccc; left: 0;}
header:hover{background-color: #fff;} 

.h_logo{position:absolute; top:0px; left:50px;width: 130px; padding: 10px 0px;z-index:99}
.lnb{position: relative;}
.lnb ul{}
.lnb:hover{background:#fff;}
.lnb ul li{display:inline-block;text-align:center; padding: 0px 35px; transition:all 0.3s;}
/* :lang(en) .in_state h5{height: 64px; } */
:lang(en) .in_state{ line-height: 1.3;}
.bm>li>a{font-weight: 600;}
.bm>li:hover > a{transition:all 0.3s}
.lnb > ul > li{transition:all 0.32s; z-index:9; color: #fff;  font-family: 'NEXON Lv1 Gothic OTF Bold';}
header:hover .lnb > ul > li > a {color:#000 !important;}
.lnb > ul > li > a{display:block;  position:relative;    padding: 0px 15px; line-height:80px;}
.lnb > ul > li > a:after{content: ""; position: absolute; width: 0; height: 2px; background: #012b5d; bottom: 0px; left: 50%; transition:all 0.3s}
.lnb > ul > li:hover > a:after{left:0; width:100%;}
.lnb > ul > li:hover .sm{/* display:block; */ }
.spot{position:absolute; top:0px; right:50px; line-height:80px; font-size: 15px; z-index: 99; display:flex; color:#fff;}
.spot > div{ margin-right: 40px; font-weight: 600;}
.spot > div p{color:#ccc; padding: 0 23px;}
.spot > ul{position:relative;}
.spot > ul:after{content:""; position:absolute; width: 0px;height: 0px; z-index: 999; border-top:50px solid none; border-bottom:6px solid #fff; border-right: 6px solid transparent; border-left: 5px solid  transparent; bottom: 37px; transform: rotate(180deg);  left: -20px;}
.spot > ul > li{position:relative;z-index: 9999;  font-weight: 500;}
header:hover .spot > ul > li a{color: #000;}
.spot > ul > li:hover ul.lang{}
.spot > ul > li ul.lang{position: absolute; top: 50px; line-height: 2;  display:none; height: 80px; width: 120px; padding:10px; left: -45px; }
.spot > ul > li ul.lang li{font-weight: 500; text-align: center; background: #fff;}
.spot > ul > li ul.lang li a{padding:10px 20px;    color: #000;}
.sm{background: #fff; text-align: left; position:absolute; line-height:4; height: 65px;  width: 120%; text-align: center; left: -10%; color: #333;  font-family: 'Noto Sans KR', sans-serif;}
.sm>li{ line-height:55px;}
.sm>li>a{ z-index: 999;}

/* 헤더 이벤트 */
/* .h_event{background-color: #fff!important;} */
/* .h_event2{color: #333!important;} */
.h_event3{filter: unset !important;}
.h_event4{color: #333!important;}
header.activated{background-color:#fff !important;}
  


/* -----모바일 메뉴 -----  */
.visible-on-sm-down{display: none;}
.mobile-top-1-bar{ display:none; position:absolute; top:29px; right:40px; width: 30px; height: 30px; z-index: 100; text-align: center;}
.ico{ position: relative; display: inline-block;  width: 20px; height: 13px; cursor: pointer;}
.ico div{ position: absolute; top: 0; left: 0; width: 100%; height: 15%; background: #ccc;}
.ico div.on{background: #033571;}
.ico div:nth-child(2){ top: 40%; } 
.ico div:nth-child(3){ top:80% } 
.ico.active div:nth-child(1), 
.ico.active div:nth-child(3){ top:40%; transform: rotate(45deg); }
.ico.active div:nth-child(3){transform: rotate(-45deg);}
.ico.active div:nth-child(2){visibility: hidden;}
.arrow{position: fixed;right: 30px; bottom: 10%;z-index: 100;border: 1px solid #033571;border-radius: 50%;padding: 15px 15px;margin-left: 1px;background:#F6F6F6;}
.arrow .go_top{ color: #033571; position: absolute; top: -5px; left: -18%; padding: 10px 15px;}


/* FOOTER */
footer{background: #033571;  }
.foot{padding: 30px 0px;}
.foot .f_logo{width: 300px; padding-bottom: 15px;}
.foot .f_logo a{}
.foot .f_logo a img{}
.foot{color: #fff;}
.foot .in_txt{padding-bottom: 20px;}
.foot .in_txt p{padding-bottom:5px;}
.foot .in_txt p:last-child{padding:0px;}
.foot .btm-txt{border-top: 1px solid #aaa; padding-top: 20px; color: #ddd;}
.foot .btm-txt a{display: inline-block;}
.foot .btm-txt a:first-child p{padding-right:20px;}
.foot .btm-txt :last-child{display:block;}
.foot .in_family{float: right; border: 1px solid #fff; padding: 7px 12px;}
.foot .lock{background: url(../img/rock.png) no-repeat; width: 25px; height: 25px; background-size: contain;position: absolute; right: 0; opacity: 0.1;}
.lock{}



/* 개인정보처리방침 */
.rule-wrap{position:relative; background:url(../img/privvacy.jpg) no-repeat; background-position: center; background-size: cover; height:430px;}
.rule-wrap .rule{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 40px; color: #fff;}


/* 이메일무단수집거부 */




  

/* ********************************************* *
 * 1440px max
 * ********************************************* */
 @media (max-width:1440px){

    [class*='bd']{padding-left: 16px; padding-right:16px;}

   
    
}
/* ********************************************* *
* 1024px max
* ********************************************* */
@media (max-width:1200px){
   
   
    
}


/* ********************************************* *
* 1150px max
* ********************************************* */
@media (max-width:1150px){
    .lnb ul li{padding: 0px 15px;}
    .ceo_wrap .ceo_text { margin-top: 50px;}
   
    
   
    
}

    
/* ********************************************* *
* 1024px max
* ********************************************* */
@media (max-width:1024px){

    html{font-size: 16px;}

    /* responsive */
    .mo_ver{display: block;}
    .pc_ver{display: none;}

    .col-sm-12 {width:100%;}
    .col-sm-11 {width:91.66666667%;}
    .col-sm-10 {width:83.33333333%;}
    .col-sm-9 {width:75%;}
    .col-sm-8 {width:66.66666667%;}
    .col-sm-7 {width:58.33333333%;}
    .col-sm-6 {width:50%;}
    .col-sm-5 {width: 41.66666667%;}
    .col-sm-4 {width: 33.33333333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66666667%;}
    .col-sm-1 {width: 8.33333333%;}

    .foot .in_txt{width:100%;}
    .foot .in_family{float:left; margin-top:20px;}

    /* :lang(en) .in_state{    bottom: 48%;} */
    :lang(en) .lnb > ul > li > a{padding:0px 10px;}



}

/* ********************************************* *
* 960px max
* ********************************************* */
@media (max-width:960px){

    html{font-size: 16px;}

    /* responsive */
    /* .col-sm-12 {width:100%;}
    .col-sm-11 {width:91.66666667%;}
    .col-sm-10 {width:83.33333333%;}
    .col-sm-9 {width:75%;}
    .col-sm-8 {width:66.66666667%;}
    .col-sm-7 {width:58.33333333%;}
    .col-sm-6 {width:50%;}
    .col-sm-5 {width: 41.66666667%;}
    .col-sm-4 {width: 33.33333333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66666667%;}
    .col-sm-1 {width: 8.33333333%;} */
    .lnb ul { display: none; }
    .lnb { display: none; }
    .spot{right:90px;}

  
    header:hover .spot > ul > li a{color: #fff;}

    /* 모바일메뉴 */
    .main-menu>div.img{display: inline-block; width: 10%; margin-right:0; }
    .visible-on-sm-down{display:block; visibility: visible;}
    /* .container{width:0 auto; margin-left:15px; 
        margin-right:15px;
    } */
    .mobile-box{ position:fixed; top:0; right:0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); visibility:hidden; padding-top:70px; box-sizing:border-box; z-index: 100; transition:visibility 0s 0.3s, background-color 0.5s;}
    .mobile-box.active{visibility:visible; }
    .mobile-menu{ position:absolute;  right:-400px; top:0; width: 400px; height: 100%; padding-top:70px; box-sizing:border-box;  background-color: #fff; transition:0.5s; box-shadow: -1px -7px 16px 0px rgb(0,0,0,0.15);}
    .mobile-box.active .mobile-menu{ right:0;  }
    .mobile-menu .mobile-m-1{padding:0px 20px;}
    .mobile-menu .mobile-m-1 ul>li>a{ position:relative;  text-align: left; display:block; padding: 14px 0 14px 8px; color: #033571;}
    .mobile-menu .mobile-m-1>ul>li>a{position:relative;}
    .mobile-menu .mobile-m-1>ul>li>a:after{ position:absolute; content:""; background: url(../img/click.png) no-repeat; width:30px; height:30px; right: 0; top: 50%; transform: translateY(-50%);}
    /* .bm-1{position: relative;}
    .bm-1:after{position: absolute; content:""} */
    /* 모바일-서브 */
    .mobile-menu .mobile-m-1 ul ul{ background: #f5f5f5; display:none; }
    .mobile-menu .mobile-m-1 li.active ul{ display:block; }
    .mobile-menu .mobile-m-1 ul ul>li{transition: all 0.2s;}
    .mobile-menu .mobile-m-1 ul ul>li:hover{background: #fff; border-bottom: 0.5px solid #ddd;}
    .mobile-menu .mobile-m-1 ul ul>li>a{ display:block; padding:10px 0; padding-left:8px; color: inherit; } 
    
    .rule-wrap .rule{font-size: 32px;}


}



/* ********************************************* *
* 860px max
* ********************************************* */
@media (max-width:860px){

    :lang(en) .in_state h5{font-size: 17px;}
    .rule-wrap{height: 350px;}

}


/* ********************************************* *
* 810px max
* ********************************************* */
@media (max-width:810px){

    html{font-size: 16px;}

}
    

/* ********************************************* *
* 760px max
* ********************************************* */

@media (max-width:768px)
{
    html{font-size: 15px;}
    .foot .f_logo{width: 230px;}



}

/* ********************************************* *
* 640px max
* ********************************************* */

@media (max-width:640px)
{

    .col-xs-12 {width:100%;}
    .col-xs-11 {width:91.66666667%;}
    .col-xs-10 {width:83.33333333%;}
    .col-xs-9 {width:75%;}
    .col-xs-8 {width:66.66666667%;}
    .col-xs-7 {width:58.33333333%;}
    .col-xs-6 {width:50%;}
    .col-xs-5 {width: 41.66666667%;}
    .col-xs-4 {width: 33.33333333%;}
    .col-xs-3 {width: 25%;}
    .col-xs-2 {width: 16.66666667%;}
    .col-xs-1 {width: 8.33333333%;}


    header{height:70px;}

    .h_logo{top:4px; width: 100px; left: 30px;}
    .mobile-top-1-bar{right:25px;}
    /* .foot .f_logo { width: 280px;} */
    .foot .f_logo {
        width: 250px;}
    .spot { right: 70px; }
    .spot > ul > li ul.lang{height: 40px; top: 70px;}
        


}


/* ********************************************* *
* 640px max
* ********************************************* */

@media (max-width:640px)
{
    .spot > div{margin-right:0;}
    .rule-wrap .rule { font-size: 26px; font-weight: 500;}
    .spot > ul > li{font-size: 13px;}
    .spot > div p {padding: 0px 30px; font-size: 13px; }
}


/* ********************************************* *
* 500px max
* ********************************************* */

@media (max-width:500px)
{
    .h_logo{left: 10px;}
    .mobile-top-1-bar{right:10px;}
    .spot{right:50px;}
  .mobile-box.active .mobile-menu{width: 100%;}
  :lang(en) .slider{height:30vh !important}
  /* :lang(en) .in_state{bottom:57%;} */
  :lang(en) .in_state h5{font-size: 15px;    }

  
  .foot .f_logo{width:170px; padding-bottom:10px;}
  .foot .in_txt{padding-bottom: 10px;}
  .foot .btm-txt{padding-top: 10px;}
  .foot .in_txt p{font-size: 14px;}
  .foot .btm-txt :last-child{font-size: 13px;}

  .rule-wrap {height: 250px;}


}

/* ********************************************* *
* 500px max
* ********************************************* */

@media (max-width:500px)
{
  .mobile-box.active .mobile-menu{width: 100%;}
  :lang(en) .slider{height:30vh !important}

  :lang(en) .in_state h5{font-size: 15px;   }
  .spot > div { padding: 0px 27px;}
  .spot > div p{    padding: 0 16px;}

 
  .rule-wrap .rule{font-size: 23px;}


}

/* ********************************************* *
* 500px max
* ********************************************* */

@media (max-width:350px)
{
    .main02 .slick-slide{margin:0px;}
    :lang(en) .sec .sec_l button p{    text-align: left;
        padding-left: 16px;}
    :lang(en) .sec .sec_l button p:before { right: 15px; top: 3px;}
    :lang(en) .sec .sec_l button p:after { right: 15px; top: 3px;}
    :lang(en) .sec .sec_l button{    width: 100%;}
    /* :lang(en) .in_state{    bottom: 50%;} */
    /* :lang(en) .in_state h5{height: 45px;} */
}

/* ********************************************* *
* 300 max
* ********************************************* */

@media (max-width:300px)
{
    .spot > div p { padding: 0px 6px; font-weight: 400;}
}