/* 전 페이지에 들어가는 공통 css 
header footer  */


/* ********************************************* *
 *  side menu
 * ********************************************* */

 .sidemenu_whole{position:fixed; width: 360px; height: 100vh; z-index: 99; overflow: hidden; background-color: #00529c; box-shadow: 2px 2px 8px rgba(0,0,0,0.2);}
 .sidemenu_whole .side_Scrollwrap{position: absolute; width: 107%; height: 100%; overflow: auto;  top: 0; left: 0; color: #fff; }
 .sidemenu_whole .side_boundary{padding:0 20px; position: relative;}
 .sidemenu_whole .lang_section{width: 360px; background-color: #333; height: 34px; font-size: 14px;}
 .sidemenu_whole .lang_section .lang_box{width: 100%;}
 .sidemenu_whole .lang_section ul{width: 100px; float: right; line-height: 34px; text-align: right;}
 .sidemenu_whole .lang_section ul li{float: left; width: 50%; cursor: pointer; color: #888; }
 .sidemenu_whole .lang_section ul li.on{color: #fff;}
 .mobile_menu_wrap .lang_section ul li.on{color: #fff;}

 /* topmenu */
 .sidemenu_whole .logo{width: 360px; height: 190px; background: url(/BUMSEO/img/logo.jpg)no-repeat; background-size: cover; background-position: center;}
 .sidemenu_whole .sidemenu_wrap{width:360px  }
 .sidemenu_wrap .menu_container{width: 100%; padding-top: 25px; padding-bottom:11vh; position: relative;}
 .sidemenu_wrap .menu_container .topmenu>li{padding: 15px 0; }
 .sidemenu_wrap .menu_container .topmenu>li>a.fisrt_depth{width: 100%; height: 100%; display: block; color: #fff; font-size: 18px; position: relative; padding-left:60px; padding-bottom: 10px; text-transform: uppercase;}
 .sidemenu_wrap .menu_container .topmenu>li>a::before{position: absolute; content: ""; width: 26px; height: 26px; top: 0; left: 20px;}
 .sidemenu_wrap .menu_container .topmenu>li>a.company_icon::before{background: url(/BUMSEO/img/main/icon01.png)no-repeat; background-size: cover; background-position: center;}
 .sidemenu_wrap .menu_container .topmenu>li>a.product_icon::before{background: url(/BUMSEO/img/main/icon02.png)no-repeat; background-size: cover; background-position: center;}
 .sidemenu_wrap .menu_container .topmenu>li>a.equipment_icon::before{background: url(/BUMSEO/img/main/icon03.png)no-repeat; background-size: cover; background-position: center;}
 .sidemenu_wrap .menu_container .topmenu>li>a.rnd_icon::before{background: url(/BUMSEO/img/main/icon04.png)no-repeat; background-size: cover; background-position: center;}
 .sidemenu_wrap .menu_container .topmenu>li>a.customer_icon::before{background: url(/BUMSEO/img/main/icon05.png)no-repeat; background-size: cover; background-position: center;}

/* submenu */
.submenu{background-color: #23425e; padding: 10px; display: none;}
.submenu>li{padding:5px 0}
.submenu>li a{color: #999;padding-left: 60px; width: 100%; height: 100%; display: block; position: relative; text-transform: capitalize;}
.submenu>li a:hover{ color:#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;}
 .submenu>li a.sub_on{color: #fff;}
 .topmenu .arrow{width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; position: absolute; right: 20px; top: 6px; transform: rotate(45deg); display: inline-block;}

 .contact_us{text-align: center; line-height: 1; padding: 20px;  }
 .contact_us .inner{padding:20px; border: 1px solid #fff;}
 .contact_us h2{font-size: 30px; padding-bottom: 20px;}
 .contact_us .tel_number{font-size: 30px; font-weight: 300; padding-bottom: 10px;}

 .footer_side{text-align: center; padding-bottom: 30px;}
 .footer_side p{text-transform: uppercase; font-size: 12px; line-height: 1; font-weight: 100; color: rgba(255,255,255,0.3);}

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

 .footer{display: none; position: absolute; bottom: 0; left: 47%; color: #ddd; font-size: 14px; z-index: 99; line-height: 40px; height: 40px;}
 .sub_footer{display: none; position: relative; width: 100%; font-size: 14px; line-height: 40px; text-align: center;  color: #888; padding-top: 130px; }
 .sub_footer .inner-footer{ height: 40px; background-color: #dedede;}
 
/* ********************************************* *
 *  button
 * ********************************************* */
 .button{border: 1px solid #333; overflow: hidden; position: relative; cursor: pointer; font-size: 14px; line-height: 40px; 
text-align: center; text-transform: uppercase; width: 100%; color: #333; border-radius: 50px;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;}



/* ********************************************* *
 *  moabile_menu
 * ********************************************* */
.mobile_menu_wrap .lang_section{width: 100%; background-color: #333; height: 34px; font-size: 14px;}
.mobile_menu_wrap .lang_section .lang_box{width: 100%;}
.mobile_menu_wrap .lang_section ul{width: 100px; float: right; line-height: 34px; text-align: right; right: 20px; position: relative;}
.mobile_menu_wrap .lang_section ul li{float: left; width: 50%; cursor: pointer; color: #888; }

.mobile_menu_wrap .mobile_header{width: 100%; height: 60px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); }
.hamburger{	float:right; border: 0; position: relative;width:35px;height: 60px; right:20px; background-color: transparent;cursor: pointer;  z-index: 99;}
.hamburger .bar,.hamburger .bar:before,.hamburger .bar:after {
	display: block;
	position: absolute;
	width: 35px;
	height: 4px;
    background-color: #000;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.hamburger .bar {top: 28px;left: 0;	}	
.hamburger .bar:before {position: absolute;content: '';top: 10px;left: 0;}
.hamburger .bar:after {position: absolute;content: '';top: -10px;left: 0;}
.show .hamburger .bar {background-color: transparent;}
.show .hamburger .bar:before {top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);	}
.show .hamburger .bar:after {top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);	}
.mobile_header .logo{display: inline-block; width:100px; height: 60px; background: url(/BUMSEO/img/logo.jpg)no-repeat; background-size: cover; background-position: center; }
 
.mobile_menu_wrap .mobile_menu{width: 0; height: 100%; overflow: hidden; position: absolute; top: 94px; right: 0;
    background-color: #fff; z-index: 80;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;}
.show .mobile_menu { width:100%; height: 100%; position: absolute;;}
.show .mobile_menu nav .mobile_topmenu{position: relative; opacity: 0; transform: translateX(100px); top: 20px; 
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
.show .mobile_menu nav .mobile_topmenu {  opacity: 1;   transform: translateX(0); }
.mobile_menu .mobile_topmenu>li{position: relative;}
.mo_line::after{content: ""; position: absolute; width: 85%; height: 1px; background-color: #999; bottom: 0; left: 20px;}
.mobile_menu .mobile_topmenu>li>a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    text-transform: uppercase;
  }

.mobile_submenu{padding-left: 30px; display: none; /* background-color: #145286; */}
.mobile_submenu li{padding: 10px; cursor: pointer;}
.mobile_submenu li a{color: #666; display: block; width: 100%; height: 100%; font-size: 14px; text-transform: capitalize;}


/* ********************************************* *
 *  sub_page 공통
 * ********************************************* */

.view_whole{width:100%; height: 100vh; overflow: hidden; position: relative; }
.view_page{width: 100%; height: 100vh; float: right; position: relative; padding-left: 390px; overflow-x: hidden; overflow-y: auto;}

.navi_wrap{width: 100%; position: absolute; z-index: 77; margin-top: 30px; }
.navi_wrap ul{width: 100%; height: 100%;}
.navi_wrap ul li{font-size: 14px; float: left; margin-right: 30px; position: relative;  color:#aaaaaa; line-height: 1.2; text-transform: uppercase; font-weight: 700;}
.navi_wrap ul li::before{content: ""; position: absolute; left: -20px; bottom: 3px; width: 8px; height:8px; border-right: 2px solid #aaa; border-bottom: 2px solid #aaa; transform: rotate(-45deg);}
.navi_wrap ul li:nth-child(1)::before{display: none;}
.navi_wrap ul li:nth-child(3){color: #00529c;}
.navi_wrap ul li:nth-child(3)::before{border-right: 2px solid #00529c;; border-bottom: 2px solid #00529c;}
.navi_wrap ul li a{width: 100%; height: 100%; display: block;}

.view_page .contents_wrap{width: 100%; float: left; padding-left: 200px; padding-top: 100px;}
.view_page .contents_wrap .title h1{font-size:45px; color: #333; text-transform: uppercase; position: relative;}
.view_page .contents_wrap .title h1::before{position: absolute; content: ""; width: 140px; height: 1px; background-color: #333; left: -180px; top: 47%;}
.view_page .contents_wrap .txt-detail{width: 50%; }