@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;700&display=swap');
@import url('hani.top.template.css');

/* hamburger */
.hamburger {width: 24px;height: 14px;position: relative;z-index: 4;cursor: pointer;vertical-align: top;}
.hamburger::after,
.hamburger::before {content: "";position: absolute; top: 0;left: 0;width: 100%; height: 2px; background-color: rgb(0, 0, 0);-webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger::after {top:auto;bottom: 0px;}
.hamburger .middle {position: absolute;top: 6px;left: 0;width: 100%;height: 2px;background-color: rgb(0, 0, 0);opacity: 1;
    -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.hamburger.close .middle ,
.hamburger.active .middle { opacity: 0;}
.hamburger.close:before,
.hamburger.active:before {-webkit-transform: translateX(0) rotate(-45deg) translateZ(0);transform: translateX(0) rotate(-45deg) translateZ(0);top: 6px;}
.hamburger.close:after,
.hamburger.active:after {-webkit-transform: translateX(0) rotate(45deg) translateZ(0);transform: translateX(0) rotate(45deg) translateZ(0);bottom: 6px;}

/* top main, kisa common*/
#site {width: 100%;text-align: center;position: relative;height: 40px;z-index: 1003;}
#site .site-inner {/* overflow: hidden; */width: 1100px;margin: 0 auto;padding: 10px 0 0;text-align: left;position: relative;height: 26px;}
#site .site-inner li { float:left; font-size:11px;  position: relative;}
#site .site-inner li a { color:#777;}
#site .site-lang {position: relative;float:right;margin-left: 5px;}
#site .site-lang:before {display:block;content: '|'; width: 1px; position: absolute; top: -2px;left: -5px;font-size: 9px;color: #ebebeb;}
#site .site-lang li { margin-right:5px;}
#site .site-family { position: relative;float:right; }
#site .site-family li {margin-right:5px;}
#site .site-family li + li:before {display:block;content: '.'; width: 1px; height: 1px; position: absolute; top:-3px; left:-4px}

#site .login-box {position: absolute;bottom: -95px;right: 0;}
#site .login-box a { font-weight: bold; margin-left: 8px;}
#site .login-box .mypage, 
#site .login-box .mypage a{color: #1fb4b1;}

#site .sitemenu-box {position: relative;}
#site .sitemenu-box .hamburger {float: left;position: relative;margin-top: 2px; z-index: 1005;}
#site .sitemenu-box .hamburger.active {margin-left: 10px; transition: all 0.8s ease;}
#site .sitemenu-box .article-plus .hamburger{position: absolute;top: 10px; left:8px;}
#site .sitemenu-box .article-plus .hamburger.close {opacity: 0;}

#site .nav-list {float: left;position: relative;margin-left: 12px;z-index: 1003;}
#site .nav-list a{ display: inline-block; margin-right: 12px; font-size: 14px; font-weight: bold;}

#site .sitemenu-box .article-plus{position: absolute;left:0;top: -10px;background-color:#fff;padding:0;width: 100%;-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);;-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1);box-shadow: 0px 3px 3px  rgba(0,0,0,0.1);z-index: 1004;border:1px solid #ebebeb; border-top:0;}
#site .sitemenu-box .article-plus table {position:relative;overflow:hidden;width: 100%;}
#site .sitemenu-box .article-plus table tr.first th,
#site .sitemenu-box .article-plus table tr.first td { padding-top:20px;}
#site .sitemenu-box .article-plus table tr.last th,
#site .sitemenu-box .article-plus table tr.last td { padding-bottom:10px;}
#site .sitemenu-box .article-plus table tr:last-child th,
#site .sitemenu-box .article-plus table tr:last-child td{ padding-bottom: 20px;}
#site .sitemenu-box .article-plus table a { display:inline;}
#site .sitemenu-box .article-plus th { text-align:right; width:20%;  height:20px; background-color:#f8f8f8; padding: 8px 15px; font-size:13px; font-weight:bold; color:#000; }
#site .sitemenu-box .article-plus th span.bar{ color:#ebebeb;  padding: 0 5px; }
#site .sitemenu-box .article-plus th.title {_width:auto; *width:auto; text-align: left; padding-left: 15%;}
#site .sitemenu-box .article-plus td { text-align:left; font-size:13px; padding: 8px 0 8px 15px; }
#site .sitemenu-box .article-plus td ul{ background:none; height:auto;}
#site .sitemenu-box .article-plus td ul li { font-size:13px; padding:0; padding-right:10px; margin-right:10px; white-space:nowrap; }

#header-logo {position:relative;z-index: 1002;}
#header-logo .header-inner {position:relative;/* overflow: hidden; */width: 1100px;  height: 130px;margin: 0 auto;}
#header-logo .logo { text-align:center; padding-top:24px; width: 171px; height:58px; margin: 0 auto;}
#header-logo .logo a { display: block; background: url(//img.hani.co.kr/section-image/15/hani/images/v2/logo.png) 0 0 no-repeat; width: 171px; height:58px;}

#search_form .form_search {position: absolute; bottom:-130px; right: 0;}
#search_form .form_search input.text{width: 185px; height: 32px; padding-left: 5px ; border:1px solid #dfdfdf ; border-radius: 3px;
    background-color: #fff; vertical-align: top; color: #333;z-index: 1011}
#search_form .form_search input.button{position: absolute;right:5px; top:5px; height: 20px; width: 20px; vertical-align:middle; filter: opacity(50%) }


#news-navi {position:relative;height: 46px;border-top: 1px solid #ebebeb;z-index: 1001;width: 100%;
    -moz-box-shadow: -1px 2px 2px 0 rgba(0,0,0,0.1);-webkit-box-shadow: -1px 2px 2px 0 rgba(0,0,0,0.1);box-shadow: -1px 2px 2px 0 rgba(0,0,0,0.1);}
#news-navi li {vertical-align:middle;font-size:15px;letter-spacing: -0.03em;display: inline-block;}
#news-navi li.last { padding-right:0px;} 
#news-navi li h3 {font-size:15px;vertical-align:middle;line-height:1.1em;padding: 15px 13px 15px;letter-spacing: -0.06em;}
#news-navi li h3 a { color:#000;  font-size:15px;}
#news-navi li.selected  h3 a{border-bottom:1px solid #1fb4b1}
#news-navi li.selected  h3 a:hover{ text-decoration: none;}
#news-navi li.selected  h3 a, #news-navi li h3 a:hover { color:#1fb4b1}
#news-navi li h3 .beta { position:relative; display:block;}
#news-navi li h3 .beta img{ position:absolute;top:-29px; right:-19px;}

#news-navi .navi-menu {width: 1100px;margin: 0 auto; height: 46px; overflow: hidden;}
#news-navi .navi-menu li.selected h3{ padding:13px 12px 14px;  border:1px solid #ebebeb; border-bottom:1px solid #fff; background-color:#fff; z-index:1003;  z-index:1}
#news-navi .navi-menu li .over-list{position: absolute;left:50%;top: 44px;margin-left: -550px;background-color:#fff;padding:25px 20px 25px;border:1px solid #ebebeb;-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);;-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.1);box-shadow: 0px 3px 6px  rgba(0,0,0,0.1);z-index:-1; min-width: 1060px;}
#news-navi .navi-menu li .over-list ul.list {float:left;height: 236px;padding:0 20px;text-align: left;}
#news-navi .navi-menu li .over-list ul.list li img { border: 1px solid #e6e6e6; }
#news-navi .navi-menu li .over-list ul.list li { float:none;display: block;background-image:none;  padding:0; line-height:1.4em;}
#news-navi .navi-menu li .over-list ul.list li.first{ padding-top:0; }
#news-navi .navi-menu li .over-list ul.list li h4{padding:12px 0 10px;font-size:14px;font-weight:normal;letter-spacing: -0.06em;border-top:1px solid #f1f1f1;}
#news-navi .navi-menu li .over-list ul.list li.first h4 { padding-top:0; border-top:0;}
#news-navi .navi-menu li .over-list ul.list li a{ color:#000; }
#news-navi .navi-menu li .over-list ul.list01,
#news-navi .navi-menu li .over-list ul.list02 {width:200px; overflow:hidden;}
#news-navi .navi-menu li .over-list ul.list01 li.first img,
#news-navi .navi-menu li .over-list ul.list02 li.first img {width:200px; height:118px;}
#news-navi .navi-menu li .over-list ul.list03,
#news-navi .navi-menu li .over-list ul.list04 {width:250px;overflow:hidden;}
#news-navi .navi-menu li .over-list ul.list04 {background-image:none;width:240px; padding-right:0;}
#news-navi .navi-menu li .over-list ul.list04 li { font-size:14px; letter-spacing:-0.05em; padding-bottom:20px;}
#news-navi .navi-menu li .over-list ul.list01 li.first h4,
#news-navi .navi-menu li .over-list ul.list02 li.first h4{ padding:8px 0 8px;}
.ie7 #news-navi .navi-menu li .over-list ul.list01 li.first h4,
.ie7 #news-navi .navi-menu li .over-list ul.list02 li.first h4{ padding:8px 0 12px;}
#news-navi .navi-menu li.hani_main_top_menu_sub.unselected .over-list {height: 0px;padding: 0px;overflow: hidden;border: 0px;}

/*20230627 이슈바 관련부분 오류대처 */
#news-navi .navi-menu li .over-list ul.list04 { display: none;}
#news-navi .navi-menu li .over-list ul.list li:last-child {position: absolute; padding-top: 0; margin-top: 0;  right:40px; width: 240px;}
#news-navi .navi-menu li .over-list ul.list01  li:last-child { top: 12px;}
#news-navi .navi-menu li .over-list ul.list02  li:last-child { top:77px;}
#news-navi .navi-menu li .over-list ul.list03  li:last-child { top:142px;}
#news-navi .navi-menu li .over-list ul.list01 li h4 { border-top: 0;}
#news-navi .navi-menu li .over-list ul.list { height: 175px;}
#news-navi .navi-menu li .over-list ul.list li h4 { overflow: hidden;height:32px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;padding: 12px 0 10px; margin: 0 0 10px; }

/* support */
#header.support #site .site-inner{width:auto;max-width: 1500px;min-width: 1100px; }
#header.support { background-color: #022f43;}
#header.support  #news-navi { background-color: #fff;}
#header.support .hamburger { margin-left: 10px;}
#header.support .hamburger .middle,
#header.support .hamburger::after,
#header.support .hamburger::before {background-color: #bcc8cd;}
#header.support .hamburger.active::after,
#header.support .hamburger.active::before {background-color: #000;}
#header.support #site a{ color: #bcc8cd;}
#header.support #site .sitemenu-box .article-plus a { color: #000;} 

#header.support #site .site-lang {position: absolute;float: none;margin-left: 0;right: 200px;}
#header.support #site .site-lang li { margin-right:5px;}
#header.support #site .site-family {position: absolute;float: none;right: 280px;}
#header.support #site .site-family li {margin-right:5px;}
#header.support #site .site-family li + li:before {display:block;content: '.'; width: 1px; height: 23px; position: absolute; top:-3px; left:-4px}

#header.support #site .login-box {position: absolute;bottom: 9px;right: 468px; display: flex;}
#header.support #site .login-box .mypage, 
#header.support #site .login-box .mypage a{color: #1fb4b1;}

#header.support #site .login-box a {font-weight: normal;margin-left:0;margin-right: 5px;color: #bcc8cd;font-size: 11px;}
#header.support #site .site-family:before,
#header.support #site .site-lang:before {display:block;content: ''; width: 1px; height: 23px; position: absolute; top: -10px; left: -5px;background: #4e6d7b;}
#header.support #site .login-box:before {display:block;content: ''; width: 1px; height: 23px; position: absolute; top: -8px; left: -5px;background: #4e6d7b;}
#header.support #site .login-box .top-login,
#header.support #site .login-box .ect-box { display: inline-flex;}
#header.support #site .login-box .ect-box a {position: relative;}
#header.support #site .login-box .ect-box a:nth-child(2) {padding-right: 6px; margin-right: 3px;}
#header.support #site .login-box .ect-box a:nth-child(2):before {content: ""; position: absolute; top: 0; right: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #00d3ce;}

#header.support #search_form .form_search {bottom: 0px; right: 10px;}
#header.support #search_form .form_search input.text{width: 180px;height: 30px;padding-left: 5px;border:1px solid #0e222b;border-radius: 3px;background-color: #1c4456 !important;vertical-align: top; color: #fff  !important;}
#header.support  #header-logo .logo { text-align: left; margin: 0;    padding-top: 30px;}
#header.support  #header-logo .logo a { display: block; background: url(//img.hani.co.kr/section-image/15/hani/images/v2/logo_w.png) 0 0 no-repeat; width: 171px; height:58px;}
#header.support #search_form .form_search input.button{position: absolute;right:5px; top:5px; height: 20px; width: 20px; vertical-align:middle; filter: invert(100%);}
#header.support #search_form .form_search input:-internal-autofill-selected {background-color: #1c4456 !important;; color: #fff !important;}
#header.support #search_form .form_search input:-webkit-autofill,
#header.support #search_form .form_search input:-webkit-autofill:hover,
#header.support #search_form .form_search input:-webkit-autofill:focus,
#header.support #search_form .form_search input:-webkit-autofill:active { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0 30px #1c4456 inset !important;}

/*banner*/
#header.support .support-box {position: absolute;right: 0;bottom: 38px;text-align: left;}
#header.support .support-box  .support-con{position: relative;text-align: left;vertical-align: middle;}
#header.support .support-box  em {color: #39FBE2;font-style: normal;font-size: 105%;}
#header.support .support-box  .support-tit {font-size: 40px;line-height: 1em;letter-spacing: -0.07em;color: rgba(255,255,255,0.9);margin-bottom: 12px;display: inline-block;vertical-align: middle;}
#header.support .support-box  .support-tit img {vertical-align: bottom; }
#header.support .support-box  .support-txt {display: inline-block;font-size: 16px;line-height: 1.8em;letter-spacing: -0.02em;color: #fff;}
#header.support .support-box  .support-btn {position: relative; bottom:3px;display: inline-block;padding-left: 12px;vertical-align: middle;}
#header.support .support-box  .support-btn a {display: inline-block;background-color: #39FBE2;border:1px solid #39FBE2;color: #000;border-radius: 33px;font-size: 17px;font-weight: 700;padding: 12px 0;width: 110px;text-align: center;}


/**/
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}

 @-webkit-keyframes wobble-ver-right {
    0%,
    100% {
      -webkit-transform: translateY(0) rotate(0);
              transform: translateY(0) rotate(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
      -webkit-transform: translateY(-30px) rotate(6deg);
              transform: translateY(-30px) rotate(6deg);
    }
    30% {
      -webkit-transform: translateY(15px) rotate(-6deg);
              transform: translateY(15px) rotate(-6deg);
    }
    45% {
      -webkit-transform: translateY(-15px) rotate(3.6deg);
              transform: translateY(-15px) rotate(3.6deg);
    }
    60% {
      -webkit-transform: translateY(9px) rotate(-2.4deg);
              transform: translateY(9px) rotate(-2.4deg);
    }
    75% {
      -webkit-transform: translateY(-6px) rotate(1.2deg);
              transform: translateY(-6px) rotate(1.2deg);
    }
  }
  @keyframes wobble-ver-right {
    0%,
    100% {
      -webkit-transform: translateY(0) rotate(0);
              transform: translateY(0) rotate(0);
      -webkit-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
    15% {
      -webkit-transform: translateY(-30px) rotate(6deg);
              transform: translateY(-30px) rotate(6deg);
    }
    30% {
      -webkit-transform: translateY(15px) rotate(-6deg);
              transform: translateY(15px) rotate(-6deg);
    }
    45% {
      -webkit-transform: translateY(-15px) rotate(3.6deg);
              transform: translateY(-15px) rotate(3.6deg);
    }
    60% {
      -webkit-transform: translateY(9px) rotate(-2.4deg);
              transform: translateY(9px) rotate(-2.4deg);
    }
    75% {
      -webkit-transform: translateY(-6px) rotate(1.2deg);
              transform: translateY(-6px) rotate(1.2deg);
    }
  }
  

.bn-support-character {
    position:absolute;
    right:0px;
    top:130px;
    width: 160px;
    /*height: 160px;*/
    height: 200px;
    overflow: hidden;
    z-index: 1003;
   /* transform: translateX(200%);
    -webkit-transform: translateX(200%);
    animation: slide-in 0.9s forwards;
    -webkit-animation: slide-in 0.9s forwards;*/
}
.bn-support-character .bubble {
    width: 130px;
    position: absolute;
    right: 60px;
    top: -5px;
    -webkit-animation: wobble-ver-right 0.8s 1s both;
    animation: wobble-ver-right 0.8s 1s both;
}
.bn-support-character .bubble span {
  position: relative;
  display: block;
  width: 100px;
  padding: 9px;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0px 1px 3px rgb(0 0 0 / 0.3);
  background-color: #39FBE2;
  border-radius: 15px;
}
.bn-support-character .bubble span::before {
  content: '';
  background:url(../images/v2/bubbleallow.png) no-repeat  0 0;
  background-size: 17px 17px;
  width: 17px;
  height: 17px;
  position: absolute;
  right:15px;
  bottom:-17px;
}
.bn-support-character .bubble span em{
  color: #000;

}
.bn-support-character .character {
    width: 100px;
    height: 119px;
    background:url(../images/v2/support_kyeori.gif) no-repeat 18px 0;
    background-size: 100px 119px;    
}

/*-- 메인:이벤트:뉴헬로우겨리: 시작 --*/
.bn-support-character .character.newhello {
  width: 140px;
  height: 153px;
  background: url(https://img.hani.co.kr/member/support/images/bn_newhello.gif) no-repeat 0 0;
  background-size: 140px 153px;
  transform: translateX(200%);
  -webkit-transform: translateX(200%);
  animation: slide-in 0.9s forwards;
  -webkit-animation: slide-in 0.9s forwards;
  transition: all 1s ease-out;
  border-radius: 20px;
  box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
}
/*-- 메인:이벤트:뉴헬로우겨리: 끝 --*/

@media screen and (max-width: 1200px) {
    .bn-support-character {
        position: fixed;
        right:-200px;
        transition: all 1s ease-out; 
    }
}

/*logo220228
#header.support  #header-logo .logo a { display: block; background: url(//img.hani.co.kr/section-image/22/logo_nowar.gif) 0 0 no-repeat; width: 171px; height:58px;}*/
/*logo220416
#header.support #header-logo .logo { padding-top: 16px; height: 85px;}
#header.support #header-logo .logo a { display: block; background: url(//img.hani.co.kr/section-image/22/logo_220416.gif) 0 0 no-repeat; width: 171px; height:85px;}*/

/* logo230308 여성의날 */
/* #header.support #header-logo .logo { padding-top: 0;}
#header.support #header-logo .logo a { width: 411px; height: 130px; background-image: url(//img.hani.co.kr/section-image/23/logo_230308.gif);} */

/* logo230920 항저우아시안게임*/
#header.support #header-logo .logo.hangzhou { padding-top: 0px; }
#header.support #header-logo .logo.hangzhou a { background: url(//img.hani.co.kr/section-image/23/asiangame/logo-hangzhou.gif) 0 0 no-repeat; width: 438px; height: 130px; }
#header-logo .logo.hangzhou { width: 438px; height: 130px; }

/* 20221107 */
.bn-support-character .character.newhello2{
  width: 140px;
  height: 153px;
  background: url(https://img.hani.co.kr/member/support/images/bn_newhello2.gif) no-repeat 0 0;
  background-size: 140px 153px;
  transform: translateX(200%);
  -webkit-transform: translateX(200%);
  animation: slide-in 0.9s forwards;
  -webkit-animation: slide-in 0.9s forwards;
  transition: all 1s ease-out;
  border-radius: 20px;
  box-shadow: 3px 3px 5px rgb(0 0 0 / 20%);
}
.bn-support-character .character.newhello2 .txt {
    position: absolute;
    left:10px;
    top:85px;
    text-align: left;
}
.bn-support-character .character.newhello2 .txt a{
    color: #39fbe2;
    font-size: 18px;
    font-family: 'S-CoreDream-5Medium';
    display: block;
    margin-bottom: 12px;
    text-decoration: underline;
}
.bn-support-character .character.newhello2 .txt a + a{
 font-size: 15px;
}

#header.support .cop27-ani {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: left;
}

body.cop27 #header.support  #header-logo .logo a { display: block; background: url(//img.hani.co.kr/section-image/22/logo_cop27.gif) 0 0 no-repeat; width: 244px; height:75px;}

/* 지면보기 커스텀팝업 */
.haniPaperPopup {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 5px;
  background-color: #fff;
  padding: 30px 20px 20px;
  z-index: 2000;
  text-align: left;
  min-width: 400px;
  max-width: calc(100vw - 40px);
  box-shadow: 1px 2px 15px #666;
}
.haniPaperTxt {
  color: #000;
  font-size: 15px;
}
.haniPaperTxt p {
  margin-top: 6px;
  color: #000;
  font-size: 14px;
}
.haniPaperBtn {
  text-align: right;
}
.haniPaperBtn button {
  height: 33px;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 14px;
  text-align: center;
  color: #3b6be9;
  background-color: #fff;
  border: 1px solid #dfdfdf;
}
.haniPaperBtn button:first-child {
  margin-right: 8px;
  background-color: #3b6be9;
  color: #fff;
  border-color: #3b6be9;
}