/*head.css*/
.gnb_wrap .gnb_empty{padding: 20px 0;}
#hd{width: 100%; min-width: inherit; height: 70px; 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; border-bottom: 1px solid #e6e6e5; box-sizing: border-box; background: transparent;} 
/*#hd.scroll_bg{top:-40px;}*/
#hd_wrapper{width: 100%; height: 70px; 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;}
#hd.scroll_bg #hd_wrapper{}
/* #hd_wrapper.sub{background: #fff; } */

#hd_wrapper .inner{position: relative; width: 100%;  height: 100%; max-width:1500px; margin: 0 auto;}
/*로고*/
#logo{position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0px; width: 105px; height: 45px; }
#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: contain; 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_c.png);}
.sub #logo a{/*background-image: url(../../img/common/logo_scroll.png);*/}

#hd.scroll_bg{background: #fff;}
@media screen and (max-width:1200px){
   #hd{height: 50px;}
   #hd_wrapper{height: 50px;}
   #logo{width: 86px; height: 38px; }
}
/*메뉴*/
#gnb{/*width:1050px;*/ height: 70px;/* position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);*/ float:right; padding-right:0px;/*  border-right:1px solid #e5e5e5; */}
#gnb #gnb_1dul{height: 70px; font-size: 1.0em;}
#gnb .gnb_1dli{height: 100%; line-height: 70px;/* width:16.66%;*/ padding:0px 25px}
.gnb_1da{height: 100%; width: 100%; text-align: center; font-size: 18px; color: #000; font-weight: 500;}
#hd.scroll_bg .gnb_1da:hover {color:#18a2e2}
#hd.scroll_bg .gnb_1da{color: #000;}
#hd.scroll_bg .gnb_1da::after{background: #444;} 

#gnb .gnb_1dli.lang_btn{position: relative;}
#gnb .gnb_1dli.lang_btn span a{    position: absolute;
    width: 45px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
	box-sizing: border-box;
	transition: .25s;
	}
#gnb .gnb_1dli.lang_btn span a:hover{background: #fff; color: #000;}
#hd.scroll_bg .gnb_1dli.lang_btn span a{color: #18a2e2; border: 1px solid #18a2e2;}
#hd.scroll_bg .gnb_1dli.lang_btn span a:hover{background: #18a2e2; color: #fff;}

.sub .gnb_1da{color: #fff; transition: .25s;}
.sub .gnb_1da:hover{color: #18a2e2;}
.sub .gnb_1da::after{background: #444;}

.gnb_1dli .bg{display: none;}
.gnb_2dul{width: 150%; min-width: inherit; background: #18a2e2; border-radius: 5px; -webkit-box-shadow: none; box-shadow: none; top: 70px; 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: #fff; font-size: 14px; padding: 6px 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: #122484;}
.gnb_2da:hover{color: #fff;}

#gnb .gnb_1dli.country_select {width:87px; padding:0px;}
/* 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: #333;opacity: 0.98;cursor: pointer; z-index: 1000;}
#mb-open-menu{position: absolute; top: 50%; right: 25px; width: 30px; height: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; z-index: 10; display: none; }
#mb-open-menu span {position: absolute; right: 0; display: block;width: 100%;height: 1px; background: #fff; -webkit-transition: all .4s ease; transition: all .4s ease;}


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

#mb-open-menu .line1 {top: 0;}
#mb-open-menu .line2 {top: 10px; 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: #fff;}
.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:#888; -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: 30px 0 80px; width: 100%; background: #fff;}
.mobile_menu ul{width: 100%;}
.mobile-list{width: 100%; position: relative;}
.mobile_menu li:first-child i{display: none;}
.mobile-list a {padding: 0 20px; width: 100%; color: #18a2e2 ; text-align: left; font-weight: 400; font-size: 36px; line-height: 90px; font-family: 'pretendard-variable';}
#aside .mobile_menu .mb-sub-ul{padding: 0; display: none; background: #f1f1f1;}
.mb-sub-ul li a {display: block; padding: 0 25px; line-height: 50px; font-size: 22px; color: #555; font-weight: 400;}

@media screen and (max-width:1800px){
    #logo{left: 20px;}
}
@media screen and (max-width:1200px){
    #mb-open-menu{display: block;}
}
@media screen and (max-width: 1199px){
    #hd_wrapper .inner{padding: 0px 20px;}
    #mb-open-menu{right: 20px;}
    #aside{width: 60%; max-width: 550px;}
    .close_menu{margin-top: 20px;}
    .close_menu .line_box{right: 20px; cursor: pointer;}
    .mobile-list a {font-size: 25px; line-height: 70px; font-weight: 700}
    .mb-sub-ul li a {padding: 0 20px; line-height: 50px; font-size: 17px; background: #f1f1f1;}
    #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); display: none;}
    #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; display: none;}
    #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: #bf4a3f; border-top: none; display: 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{display: none;}
    #hd.scroll_bg{top:0;}      
}
@media screen and (max-width:767px){
    #aside{width: 80%;}
    #tnb.mobile{width: 80%;}
    .mobile_menu{padding: 60px 0 120px;}
    #logo{left: 20px;}
	.close_menu .line_box {width: 35px; height: 35px;}
}
@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: 10px;}
    .close_menu .line_box{right: 20px;}
    .mobile_menu{padding: 20px 0 50px;}
    .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);
  }
}


#aside .m_lang{display: flex; width: 100%; flex-wrap: wrap; justify-content: center;}
#aside .m_lang span{font-size: 17px; padding: 0 10px;}
#aside .m_lang span a{color: #888;}
#aside .m_lang span:not(:last-child){border-right: 1px solid #fff;}

@media screen and (max-width:500px){
	#aside .m_lang span{font-size: 15px;}
}