/* ********************************************* *
   header(sh)
* ********************************************* */
.header_wrap{position: absolute; z-index: 70; top: 0; left: 0; width: 100%; }
header{max-width:1920px; width: 100%; height: 70px; border-bottom: 1px solid #555;}
.header-boundary {width:90%; height: 100%; margin: 0 auto;}

.logo_head{width:135px; height: 70px; float: left; position: relative;} 
.logo_head>a{width: 100%; height: 100%; display: block;}
.logo_head>a>img{width: 100%; padding-top: 20px;}
.logo_head .up_logo{position: absolute; z-index: 99; display: none; }

header .menu{text-align: center;}
.top_menu{width: 60%; height: 100%; margin: 0 auto; float: left; margin-left: 13%;}
.top_menu li{width: 20%; float: left; text-align: center; position: relative;}
.top_menu>li>a{width: 100%; height: 100%; color: #fff; line-height: 70px; font-size: 18px; display: block; position: relative;}
.top_menu>li>a::after{content: "";position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background-color: transparent;}
.top_menu>li:hover> a::after{background-color:  #125ad3; }

.menu_active{width: 100%; height: 100%; color: #fff; line-height: 70px; font-size: 18px; display: block; position: relative;background-color:  #125ad3; }

.menu_right{ color: #fff;  height: 70px;}
.menu_right .language{float: left; width: 60px; padding: 0; height: 70px; cursor: pointer;}
.menu_right .menu_bottom{float: left;}
.menu_right .language .current_lang{height: 28px;  line-height:70px; position: relative; height: 100%;}
.current_lang .arrow_down{
    transform: translateY(-50%); bottom: 30px;  position: absolute; right: 6px;
     border-left: 4px solid transparent; border-right: 4px solid transparent;   
    border-top: 4px solid #fff;
    -webkit-transition: all 0.3s ease-out;   
    transition: all 0.3s ease-out; 
     -ms-transition: all 0.3s ease-out;   
     -moz-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out;}
.lang_list{display: none; width: 63px; text-align: center; top: 50px; height: 56px; position: absolute; font-size: 14px; z-index: 999; border: 1px solid #fff; }
.lang_list li { width: 100%; height: 28px; line-height: 28px; font-size: 14px;}
.lang_list li:nth-child(1){border-bottom: 1px solid #fff;}
.lang_list li:hover{background-color: #125ad3;}

.menu_botton{cursor: pointer; background:none; border: none; display: table-cell; padding: 7px; vertical-align: middle; text-align: center; width: 52px; line-height: 50px;}
.boxgrid{background-color: #fff; color: #fff; display: inline-block; height:8px; width: 8px;transition: all 0.3s ease-in-out; }
.boxgrid.open{box-shadow: -10px -10px, 0px -10px, 10px -10px,-10px 0px,10px 0px,-10px 10px, 0px 10px, 10px 10px;}
.boxgrid.close { box-shadow: -7px 0px, -14px 0px, 0px -7px, 0px 14px, 0px -14px, 0px 7px, 14px 0px, 7px 0px; transform: rotate(45deg) scale(0.75);}

header .sub_menu{width: 100%; overflow: hidden; height: 0; z-index: 999; position: absolute; border-left:1px solid #ddd; }
header .sub_menu:last-child{border-right: rgba(0,0,0,0.2); }
header .sub_menu li{width: 100%;  }
header .sub_menu a{width:100%; display:block;  font-size: 15px; text-align: center; color: #222; line-height: 50px;}
header .sub_menu a:hover{background-color: #125ad3; color:#fff; transition-duration: 0.3s;}
.main_header{top: 0; width: 100%; height: 0; background: transparent; /* position: fixed; */  border: 0; }
.scroll{background: #fff; height: 70px }
.sub_menu_bg{ width: 100%; height: 0; background: transparent; position: absolute; top: 70px; z-index: -1; background:#f5f5f5; box-shadow:3px 10px 4px rgba(0,0,0,0.4);}

.arrow_color{border-top: 4px solid #222;}
.scroll_menu{background: #fff; color: #222!important; ;box-shadow: 0 3px 3px rgba(0,0,0,0.1);}

.mobile_ver{display: none;}
.current_lang .arrow_down.rotate{transform: rotate(180deg);}

/* ********************************************* *
   footer
* ********************************************* */

footer{background-color:#555; padding:2%; font-size: 14px; }
footer .com_name{padding-bottom: 10px; font-size: 16px;}


/* ********************************************* *
  button01
* ********************************************* */
.button01{cursor: pointer; clear: both; border-radius: 15px; padding: 15px 60px; display: inline-block;
transition: all 0.8s,color 0.3s 0.3s; border: 2px solid #125ad3; }
.button01 a{width: 100%; height: 100%; display: block; color: #fff;}
.button01:hover{box-shadow:0 -150px 0 0 rgba(0,0,0,0.7) inset;}
/* .button01:hover{background-color: #125ad3 ;} */


/* ********************************************* *
  button02
* ********************************************* */

.button02{padding:5px; width: 120px;  position: relative; font-size: 14px; cursor: pointer; display: block; transition: all 0.3s linear;
  box-sizing: border-box; border-bottom: 2px solid #fff;  margin: 0 auto;}
.button02 a{width: 100%; height: 100%; display: block; color: #fff;}
 .button02::after{background-color: transparent; content: ""; width:100%; height: 0; left: 0; top:0; position: absolute; top: 0; transition: none;
    -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
    transition: all 0.3s; }
 .button02::before, .button02::after {background: #125ad3;content: ''; position: absolute; z-index: -1;}
 .button02:hover{background-color: #125ad3;  /* box-shadow: 0 0 4px 0 #0bcdff;  */color: #fff; text-decoration: none; border-bottom: 2px solid #125ad3; }
 .button02:hover::after { background-color: rgba(255, 255, 255, 0); transition: all 0.3s ease-out; height: 100%; }

/* ********************************************* *
  button03
* ********************************************* */
.button03{padding: 13px 65px; cursor: pointer; clear: both; border-radius: 30px; display: inline-block; color:#fff; background-color: #125ad3; transition: all 0.5s, color 0.3s 0.3s; /* border: 2px solid #125ad3;  */}
.button03:hover{color: #fff;box-shadow:0 -150px 0 0 #073a91 inset; }


.common_banner{width: 100%; height: 424px; position: relative; z-index: 0;}
.common_banner::after{width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7!important; content: ""; z-index: -1; background: #111;}
.common_banner .common_banner_text{top: 150px; position: relative;}
.common_banner .common_banner_text h1{font-size: 50px; font-family:'Raleway',sans-serif; position: relative; }
.common_banner .common_banner_text h1::after{position: absolute; content: ""; bottom: 0; width: 80px; height: 1px; left: 50%; margin-left:-40px; background-color: #fff;}
.common_banner .common_banner_text p{font-size: 30px; padding-top: 15px;}

/* 배너이미지 */
.banner01{background:url(/HANAENG/img/common/banner01.jpg)no-repeat; background-size: cover; }
.banner02{background:url(/HANAENG/img/common/banner02.jpg)no-repeat; background-size: cover;}
.banner03{background:url(/HANAENG/img/common/banner03.jpg)no-repeat; background-size: cover;}
.banner04{background:url(/HANAENG/img/common/banner04.jpg)no-repeat; background-size: cover;}
.banner05{background:url(/HANAENG/img/common/banner05.jpg)no-repeat; background-size: cover;}


.common_banner .common_submenu{width: 100%; height: 50px; position: absolute; bottom: 0;}
.common_banner .common_submenu ul.common_in_sub {width: 100%; height: 50px; background-color: rgba(0,0,0,0.5);}
.common_banner .common_submenu ul.common_in_sub  li a{color: #fff; width: 100%; height: 100%; display: block; line-height: 50px; cursor: pointer;}
.common_banner .common_submenu ul.common_in_sub  li a:hover{background-color: #fff; color: #125ad3; transition-duration: 0.3s; }
.sub_active{background-color: #fff; color: #125ad3!important;}


/* 서브탭 */
.li_line + .li_line{border-left: 1px solid #555;}
.common_banner .business_in_sub>li{width: 50%; float: left;}
.common_banner .company_in_sub>li{width: 25%; float: left;}

.common_title_container{width: 100%; padding: 90px 0 60px;}
.common_title_container h2{font-size: 40px; text-transform: uppercase; font-weight: 900;}
.common_title_container p{font-size:14px; color: #777; letter-spacing: 1px; line-height: 1; padding: 10px 0;}
.common_title_container p a{color: #125ad3;}

.mobile_in_ver{display: none;}



 /* ********************************************* *
  게시판 pagination
* ********************************************* */
.pagination_container { padding-top: 50px;}
ul.pagination {text-align: center;font-size: 0;}
ul.pagination>.page_item>a{color: #333;}
.pagination .page_item{cursor: pointer; display: inline-block; margin: 0 6px; color:#bbb; border:none; width: 20px; line-height: 38px;
    background-color: transparent; font-size: 17px; font-weight: 700; margin:0 10px;position: relative; z-index: 1; overflow: hidden; text-transform: uppercase;
    transition: all 0.4s ease 0s;
    -webkit-transition:all 0.4s ease 0s;} 

.pagination .page_item:before{content:""; position: absolute; top:0; left:0;width: 100%; height: 100%; opacity: 0; transform:scaleY(0); transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.pagination .page_item:hover:before, .pagination_container .page_item.active:before{transform:scaleY(1); opacity: 1;}
.pagination .page_item:hover, .pagination_container .page_item.active{background-color: transparent; color: #292929; border:none;}