/*head.css*/
.gnb_wrap .gnb_empty{padding: 20px 0;}
#hd{width: 100%; min-width: inherit; height: 87px; background: none; position: fixed; top: 0; left: 0; z-index: 10; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
/*#hd.scroll_bg{top:-40px;}*/
#hd_wrapper{width: 100%; height: 87px; overflow: visible; z-index: 30; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; background: #fff; }
#hd.scroll_bg #hd_wrapper{background: #fff; border-bottom:1px solid #e5e5e5; transition-duration: 0s;}
#hd_wrapper.sub{background: #fff; }

#hd_wrapper .inner{position: relative; padding: 0px 87px; width: 100%;  height: 100%; max-width:100%;}
/*로고*/
#logo{position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 110px; width: 210px; height: 42px; }
#logo a{width: 100%; height: 100%; -webkit-transform: none;-ms-transform: none;transform: none; background: url(../../img/common/logo_scroll.png) no-repeat; background-size: 70% auto; background-position: left;; font-size:20px; font-weight:bold; color:#fff}
#logo a, #logo a img{width: 100%;}
#hd.scroll_bg #logo a{ background-image: url(../../img/common/logo_scroll.png); color:#000}
.sub #logo a{/*background-image: url(../../img/common/logo_scroll.png);*/ color:#000}

/*메뉴*/
#gnb{height: 87px; float:left; margin-left: 250px;}
#gnb #gnb_1dul{height: 87px; font-size: 1.0em;}
#gnb .gnb_1dli{height: 100%; line-height: 87px;/* width:16.66%;*/ padding:0px 40px}
.gnb_1da{height: 100%; width: 100%; text-align: center; font-size: 18px; color: #333; font-weight: 400; }
/* .gnb_1da:hover,
.gnb_1da.on{color: #fff; font-weight: 600;} */
#hd.scroll_bg .gnb_1da{color: #000;}
#hd.scroll_bg .gnb_1da::after{background: #444;} 

.sub .gnb_1da{color: #000;}
.sub .gnb_1da::after{background: #444;}

.gnb_1dli .bg{display: none;}
.gnb_2dul{padding: 10px 0; width: 150%; min-width: inherit; background: #000; -webkit-box-shadow: none; box-shadow: none; top: 87px; left: 0; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;} 
#hd.scroll_bg .gnb_2dul{-webkit-box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.23);
box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.23);}
.gnb_1dli_over2 .gnb_2dul{left: 0; right: inherit;}
.gnb_2dli{border-top: none;}
.gnb_2da{color: rgb(226, 226, 226); font-size: 14px; padding: 0 15px; line-height: 40px; font-weight: 400; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}
a.gnb_2da:hover{background: #000;}
.gnb_2da:hover{color: #fff;}

#gnb .gnb_1dli.country_select {width:87px; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5; padding:0px; border-bottom:4px solid #323232}
/* tnb */
#tnb.pc{padding: 0; width: 100%; height: 40px; background: none; border-bottom: 1px solid rgba(255,255,255,0.3); -webkit-box-sizing: border-box; box-sizing: border-box;}
#tnb.pc .inner{padding: 0 40px; width: 100%;}
#tnb .left_tnb{float: left; width: auto;}
#tnb .right_tnb{float: right; width: auto; height: 40px;}
#tnb .tnb_admin{margin-top: -1px;}
#tnb.pc ul li, #tnb.pc ul li a{line-height: 40px; height: 40px;}
#tnb.pc ul li a, #tnb.pc ul li b, #tnb.pc ul li span{color: #fff; font-weight: 300; font-size: 14px;}
#tnb .tnb_admin a{width: 100%; background: #fff;}
#tnb ul li.tnb_admin b{color: #333; font-weight: 700;}
#tnb .left_tnb li{float: left; margin-right: 20px;}
.left_tnb li i, .left_tnb li span{display: inline-block; float: left;}
.left_tnb li i{margin-right: 5px; width: 15px; height: 40px; background: url(../../img/common/phone_icon.png) no-repeat; background-size: 15px auto; background-position: center;}
.left_tnb li i.clock{background-image: url(../../img/common/clock_icon.png);}
/*.right_tnb li:hover, #tnb .right_tnb a:hover{background: #333; color: #fff; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;}*/
#tnb .tnb_admin:hover a{background: #333;}
#tnb ul li.tnb_admin:hover b{color: #fff;}
.right_tnb li a i{display: none;}
#tnb.mobile{display: none;}
.mask{display: none;position: fixed;top: 0;right: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.575);opacity: 0.98;cursor: pointer; z-index: 1000;}
#mb-open-menu{position: absolute; top: 50%; right: 88px; width: 30px; height: 25px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; z-index: 10; display: block; }
#mb-open-menu span {position: absolute; right: 0; display: block;width: 100%;height: 2px; background: #333; -webkit-transition: all .4s ease; transition: all .4s ease;}
#mb-open-menu.scroll_bg span{background: #444;}

.sub #mb-open-menu span{background: #444;}

#mb-open-menu .line1 {top: 0;}
#mb-open-menu .line2 {top: 11px; width: 70%;}
#mb-open-menu .line3 {bottom: 0;}

#mb-open-menu:hover .line2 {width:100%;}

#aside{position: fixed; display: block; margin: 0px; right: -100%; top: 0px; bottom: 0; width: 40%; max-width: 650px; border-top: 0; z-index: 1005; overflow-y: auto; border: 0; background: #000;}
.gnb_1da{border-bottom: none;}
.close_menu{position: relative; margin-top: 70px; width: 100%; height: 45px;}
.close_menu .line_box{position: absolute; right: 70px; top: 0; width: 45px; height: 45px;}
.close_menu span {position:absolute; left:0; display:block; width:100%; height:1px; background:#fff; -webkit-transition:all .4s ease; transition:all .4s ease; }
.close_menu .close-line1 {top:22.5px; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.close_menu .close-line2 {top:22.5px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.mobile_menu{padding: 80px 0 120px; width: 100%; background: #000;}
.mobile_menu ul{width: 100%;}
.mobile-list{width: 100%; position: relative;}
.mobile_menu li:first-child i{display: none;}
.mobile-list a {padding: 0; width: 100%; color: #fff; text-align: center; font-weight: 400; font-size: 26px; line-height: 80px;}
#aside .mobile_menu .mb-sub-ul{padding: 0; display: none; background: #000;}
.mb-sub-ul li a {display: block; padding: 0 25px; line-height: 50px; font-size: 18px; color: #fff; font-weight: 300;}
@media screen and (min-width:1200px){
    #mb-open-menu{display: block;}
}
@media screen and (max-width: 1199px){
    #hd_wrapper .inner{padding: 0px 40px;}
    #logo{width: 175px; left: 20px;}
    #mb-open-menu{right: 20px;}
    #aside{width: 60%; max-width: 550px;}
    .close_menu{margin-top: 50px;}
    .close_menu .line_box{right: 50px;}
    .mobile-list a {font-size: 24px; line-height: 70px;}
    .mb-sub-ul li a {padding: 0 20px; line-height: 50px; font-size: 16px;}
    #tnb.mobile{display: block;}
    #tnb{display: none;}
    #tnb.mobile{height: auto; position: fixed; width: 60%; max-width: 550px; bottom: 0;}
    /* login */
    #ol_before{background: #222; height: 100%; border-top: 1px solid rgba(255,255,255,0.5);}
    #ol_before .buttons{float: right; margin-top: 7.5px; width: 50%;}
    #ol_before .buttons a{width: 100%; text-align: center;}
    #tnb.mobile #ol_before .buttons a{padding: 0; color: #ccc;}
    /*#tnb.mobile #ol_before .buttons a:hover{background: none; color: #fff;}*/
    #ol_before .buttons.join a{border-left: none;}
    #ol_before  .buttons a i{display: none;}
    .ol{margin: 0;}
    #ol_after{-webkit-box-shadow: none; box-shadow: none; border: none; background: none;}
    #ol_after_hd{padding: 0; margin: 0; float: right; width: 100%; height: inherit;}
    #ol_after_hd .ol_buttons{float: left; display: block; width: 50%; border-top: 1px solid rgba(255,255,255,0.5); -webkit-box-sizing: border-box; box-sizing: border-box; background: #222;}
    #ol_after_hd .ol_buttons a{display: block; padding: 0; float: left; position: relative; height: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); line-height: 60px; text-align: center; background: none; border: none; color: #ccc; font-weight: 400;}
    #ol_after_hd .admin{width: 100%; background: #f42717; border-top: none;}
    #ol_after_hd .info{border-right: 1px solid rgba(255,255,255,0.5);}
    #ol_after_hd .ol_buttons .oi{display: table; margin: 0 10px 0 0; float: left; height: 60px;}
    #ol_after_hd .ol_buttons .oi[data-glyph]:empty:before{display: table-cell; vertical-align: middle;}
    #ol_after_hd .ol_buttons .text{display: block; float: left;}
    #ol_after_private{display: none;}
    #ol_before .buttons{margin-top: 0; height: 100%;}
    #tnb.mobile #ol_before .buttons a{height: 100%; line-height: 60px; font-size: 16px; font-weight: 400; text-transform: uppercase;}
    #ol_before .buttons.login a{border-right: 1px solid rgba(255,255,255,0.5); -webkit-box-sizing: border-box; box-sizing: border-box;}
    #ol_before .buttons.join a::after{display: none;}
    #gnb h2{display: none;}
    #gnb #gnb_1dul li {display: none;}
    #gnb #gnb_1dul li.country_select {display: block;}     
     #gnb {margin-left:0px; float: right; margin-right:30px;}
    #hd.scroll_bg{top:0;}      
}
@media screen and (max-width:767px){
    #aside{width: 80%;}
    #tnb.mobile{width: 80%;}
    .mobile_menu{padding: 60px 0 120px;}
}
@media screen and (max-width:480px){
/*    #logo{width: 130px;}*/
    #aside{width: 100%; min-width: inherit; max-width: none;}
    #tnb.mobile{width: 100%;}
    .close_menu{margin-top: 30px;}
    .close_menu .line_box{right: 30px;}
    .mobile_menu{padding: 50px 0 120px;}
    .mobile-list a {font-size: 22px; line-height: 60px;}
    .mb-sub-ul li a {padding: 0 20px; line-height: 40px; font-size: 14px;}
    #tnb.mobile #ol_before .buttons a{font-size: 14px;}  
}
.clear {clear:both}

  /* 로딩전 화면을 가리기 */
    #ringloadings {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #ffffff;
        z-index: 999999;
    }
    
    /* 로더 */
#ringy
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#3054b9;
  letter-spacing:4px;
}
#ringy:before
{
  content:'';
  position:absolute;
  top:1px;
  left:1px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #3054b9;
  border-right:3px solid #3054b9;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
ringspan
{
  display:block;
  position:absolute;
  top:calc(50% );
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
ringspan:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#3054b9;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #3054b9;
}
    
    /* 로더 애니메이션 */
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}