/*# sourceURL=../css/com.css?t=1 */
/*@ sourceURL=../css/com.css?t=1 */
/*@ sourceURL=../css/com.css?t=1 */
/*@ sourceURL=../css/com.css */
/* COMMON CSS - LAYOUT CSS */
html{font-size: 62.5%; overflow-x: hidden;}
html::-webkit-scrollbar{width: 8px;}
html::-webkit-scrollbar-thumb{background: #0162cf; border-radius: 10px;}
html::-webkit-scrollbar-track{background: #fff;}
@-ms-viewport{width: device-width;}
@-o-viewport{width: device-width;}
@viewport{width: device-width;}

/* all layout */
/*body {min-width:800px; }*/
.wrap {width:100%;}

#wrap{width: 100%; position: relative;}
/* content layout */
#content {width:100%; display:block; padding:0; position: relative;}

/* logo */
a.logo{float: left; position: relative; height: 100%; display: block; z-index: 99;}
a.logo img{position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
a.logo p{position: absolute;right: -118px;font-weight: 500;top: 26px;font-size: 17px;color: #7a7a7a;}

/* top_bar */
.top_bar{
  width: 100%; height: 25px;
  background-color: #0162cf;
  z-index: 99;
}
.top_bar_wrap{
  width: 1400px; height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 99;
}
.top_bar_wrap a, .top_bar_wrap address{
  position: relative;
  color: #fff !important;
  font-size: 13px;
  position: relative; top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: block;
}
.top_bar_wrap a{float: left;}
.top_bar_wrap address{float: right; margin-right: 150px;}

/* nav */
.nav_wrap{
  width: 1400px; height: 76px;
  margin: 0 auto;
  z-index: 99;
}
.nav_wrap .menu{
  float: right;
  height: 100%;
  text-align: center;
}
.nav_wrap .menu > ul > li{
  width: 134px; height: auto;
  float: left; line-height: 76px;
  font-size: 1.6rem; font-weight: 500;
  position: relative;
  z-index: 99;
}
.nav_wrap .menu > ul > li::before{
  content: '';
  width: 0; height: 2px;
  position: absolute;
  bottom: -2px; left: 50%;
  transition: 1s;
  background-color: #0162cf;
  z-index: 99;
}
.nav_wrap .menu > ul > li:hover::before{
  width: 100%; left: 0;
}
.nav_wrap .menu > ul > li:last-child::before{display: none;}
.nav_wrap .menu > ul > li a{width: 100%;}
.nav_wrap .menu > ul{height: 100%; float: left;}
.nav_wrap .menu > ul > li:last-child{
  width: 150px; height: 89px;
  background: url("http://hankukgolf.co.kr/css/../images/main/ask_bg.png") center bottom;
  position: relative;
}
/* .nav_wrap .menu .ask a{font-size: 16px; font-weight: 500; margin-top: 26px; color: #fff;} */

/* nav_hover */
.nav_wrap .menu > ul{overflow: hidden; transition: 1s; height: 89px;}
.nav_wrap .menu ul.submenu{
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: 1s;
}
.nav_wrap .menu ul.submenu li{font-size: 1.4rem; padding: 0.3em 0;}
.nav_wrap .menu > ul::before{
  content: ''; transition: ease-in-out 1s;
  position: absolute;
  width: 100vw; height: 0;
  top: 100px; left: 0;
  background-color: #fff;
  z-index: 55;
  box-sizing: border-box;
  border-top: 0px solid rgba(255,255,255,0);
  border-bottom: 0px solid rgba(255,255,255,0);
}
.nav_wrap .menu ul li:hover{font-weight: bold;}
.nav_wrap .menu ul.submenu li:hover{background-color: #ddd;}

.nav_wrap:hover .menu > ul{height: 270px; transition: linear 1s;}
.nav_wrap:hover .menu > ul::before{
  height: 200px; transition: 1s;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
.nav_wrap:hover .menu ul.submenu{opacity: 1;}



/* footer */
/* footer */
footer{border-top: 1px solid #ddd;}
.footer{width: 1400px;height: 150px;margin: 0 auto;overflow: hidden;position: relative;}
.footer img, .footer .footer_text{
  float: left;
  position: relative;
  top: 50%; transform: translateY(-50%);
}
.footer_text{margin-left: 115px;}
.footer address, .footer p{ font-size: 15px; color: #9d9d9d;}
.footer img{opacity: 0.5;}

p.logo {
    position: absolute;
    top: 90px;
    font-weight: 500;
    font-size: 17px;
    color: #bdbdbd;
}
.mobile_nav_wrap{display: none;}

/* 반응형 */
/* 반응형 */
/* TABLET 반응형 */
/* TABLET 반응형 */
@media screen and (max-width: 1400px){

  .banner{margin-top: 75px;}
  #wrap{margin-top: 75px;}

  /* nav */
  .nav_wrap{display: none;}
  .top_bar{position: fixed; top: 0; left: 0; z-index: 99;}
  .top_bar_wrap{width: 96%; margin: 0 2%;}
  .top_bar_wrap address{margin-right: 0;}
  .mobile_nav_wrap{display: block; position: fixed; z-index: 99;}
  .mo_nav_bg{position: fixed; top: 25px; background-color: #fff; width: 100%; height: 50px; z-index: 99;}
  .mo_nav_bg a.logo{margin-left: 2vw;}
  .mo_gnb > ul > li > a{color: #fff;}
  .mo_gnb h1{font-size: 2.8rem; margin: 75px 0 10px; position: relative; text-align: center; color: #fff; font-weight: 600; opacity: 0; z-index: 999; transition: 1s;}
  .mo_gnb.on h1{opacity: 1;}

  .mo_gnb ul.mo_gnb_ul li{font-size: 1.6rem;}
  .mo_gnb ul.mo_gnb_ul > li{width: 80%; border-top: 1px dotted #fff;}
  .mo_gnb ul.mo_gnb_ul > li:last-of-type{border-bottom: 1px dotted #fff;}
  .mo_gnb ul.mo_gnb_ul li a{padding: 0.5em 0; width: 100%;}
  .mo_gnb ul.mo_gnb_ul ul.submenu{display: none;}
  .mo_gnb ul.mo_gnb_ul .submenu li{width: 100%; background-color: #fff;}
  .mo_gnb ul.mo_gnb_ul .submenu li a:hover{background-color: #ddd;}


  a.logo p {
    position: absolute;
    right: -118px;
    font-weight: 500;
    top: 13px;
    font-size: 17px;
    color: #7a7a7a;
}
  /* mo_hamburger_nav */
  /* mo_hamburger_nav */
  /* hamburger */
  .hamburgur_btn{
    position: fixed;
    left: 98vw; top: 38px;
    transform: translateX(-100%);
    width: 30px; height: 22px;
    border: none;
    z-index: 9999;
  }
  .hamburger{
    position: absolute;
    left: 0; top: 50%;
    background-color: #222;
    width: 30px; height: 2px;
    transform: translateY(-50%);
  }
  .hamburger::before,
  .hamburger::after{
    content: '';
    position: absolute;
    width: 30px; height: 2px;
    left: 0;
    background-color: #222;
    transition: 0.5s;
  }
  .hamburger::before{top: -10px;}
  .hamburger::after{top: 10px;}
  .hamburgur_btn.click_on .hamburger{background-color: rgba(0,0,0,0);}
  .hamburgur_btn.click_on .hamburger::before{transform: rotate(45deg); top: 0; background-color: #fff;}
  .hamburgur_btn.click_on .hamburger::after{transform: rotate(-45deg); top: 0; background-color: #fff;}

  /* gnb_event */
  .mo_gnb{
    position: fixed;
    width: 00px; height: 100%;
    top: 0; right: 0;
    overflow: hidden;
    z-index: 999;
    transition: .5s 1s;
  }
  .mo_gnb.on{width: 300px; transition: 0.1s;}
  .mo_gnb::after{
    content: '';
    position: absolute;
    width: 0; height: 0;
    left: 300px; top: -300px;
    transition: .5s 1s;
    border-radius: 100%;
  }
  .mo_gnb.on::after{
    width: 1800px; height: 1800px;
    left: -300px; top: -300px;
    background-color: #0162cf;
    transition: 1s;
  }
  .mo_gnb_wrap{height: 0; transition: .5s 1s; overflow: hidden;}
  .mo_gnb.on .mo_gnb_wrap{height: 100%;}
  .mo_gnb ul.mo_gnb_ul{
    width: 100%; height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    z-index: 999;
    transition: 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
  }
  .mo_gnb.on ul.mo_gnb_ul{
    opacity: 1; height: calc(100% - 145px);
    transition: .5s 1s;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .mo_gnb.on ul.mo_gnb_ul::-webkit-scrollbar{width: 0px;}
  .gnb_black_bg{
    opacity: 0;
    width: 0; height: 100vh;
    right: 0; top: 0;
    position: fixed;
    background-color: rgba(0,0,0,0.6);
    z-index: 555;
    transition: 1s;
  }
  .mo_gnb.on ~ .gnb_black_bg{width: 100vw; transition: .5s 1s; opacity: 1;}

  /* footer */
  footer{width: 100%; text-align: center;}
  .footer{width: 100%; margin: 0 auto; display: inline-block; text-align: left;}
  .footer address, .footer p{word-break: keep-all;}
  
}



@media screen and (max-width: 1024px){
  .mo_gnb ul.mo_gnb_ul .submenu li:not(:last-child) a{border-bottom: 1px dotted #ddd;}

  .footer{text-align: center; height: auto; padding: 3vw 0;}
  .footer .footer_text, .footer img{float: none; top: 0; transform: none; margin: 0;}
  .footer .footer_text{margin-top: 4vw;word-break: keep-all;}


  p.logo {
    top: 40px !important;!i;!;
    left: 0%;!i;!;
    right: 0%;!i;!;
}
}



@media screen and (max-width: 640px){
  .top_bar_wrap a{display: none;}
  .top_bar_wrap address{width: 100%; float: left; white-space: nowrap; overflow: scroll;}
  .top_bar_wrap address::-webkit-scrollbar{visibility: hidden; width: 0; height: 0;}

  .footer address{width: 350px; margin: 0 auto;}
}