/* ------------------------------------------------------------- */
/* ------------------- 공통으로 들어가는 부분  ------------------- */
/* ------------------------------------------------------------- */
html{
    font-size:18px; scroll-behavior:smooth;
}

body{
    font-weight: 400;
	color:#222;
    width:100%;
    letter-spacing: -0.8px;
	line-height: 1.6;
    font-size: 1rem;
    font-family:'Roboto','Noto Sans KR','Noto Sans TC','Noto Sans SC', sans-serif;
}

/* 전체 */
.wrap{max-width: 1920px; width: 100%; position: relative; overflow: hidden;}

/* clearfix */
.clf::before, .clf::after{display:block; content:''; clear: both;}

/* boundary */
.boundary{margin:0 auto; max-width:100%; width:1440px; box-sizing: border-box; position: relative}

/* 마우스긁었을때 */
::selection{background-color: #333; color: white;}

/* font */

.fc-or{color:#d7a534}
.fc-wh{color:#fff}

/* background-color */
.bc-or{background-color: #d7a534;}
.bc-wh{background-color: #fff;}

/* rate */


/* array */

/* button */
.button-wrap{width: 100%;}

/* ********************************************* *
    header
* ********************************************* */

.header{width: 100%; height:80px; background-color: rgba(0,0,0,0.2); position: absolute; z-index: 10;}
.header .header_bg{width: 100%; background-color: rgba(0,0,0,0.5); top: 80px; left: 0; position: absolute; display: none; height: 240px;}
.header .main_nav{width: 100%; height:80px; position: relative;}
.header .nav_inner{width: 75%; position: relative; margin: 0 auto;}
.header .logo{width: 325px; position: absolute; left:8%; top:50%; transform: translateY(-50%); z-index: 11;}
.header .logo img{width: 100%;}
.header .header_menu{width:60%; position: relative; margin:0 auto; background-color: transparent; line-height: 80px; height:80px;}
.header .header_menu ul.sub_menu{display: none;}
.header .header_menu ul.sub_menu li{height:0;}
.header .header_menu ul li{width:25%; height: 80px; float: left; text-align: center; transition-duration:0.1s;}
.header .header_menu ul li .sub_menu li:hover a{color: #4888be;}
.header .header_menu > ul > li:hover .sub_menu{height: 240px;}


/* main nav current */
/* .main_nav.current ul.sub_menu li{} */
.main_nav.current .gnb > li.active{border-bottom: 2px solid #4888be;}



.header .header_menu .sub_menu{width: 100%;}
.header .header_menu ul li .sub_menu li{width: 100%; height:60px;text-align: center; line-height: 60px;}
.header .header_menu ul li a{display: block; width: 100%;}
.header .header_menu ul li a,.header .header_menu ul li .sub_menu li a{color:white;}

.header .language{position: absolute; right:10%;top:28px; color: white; font-weight: 300;}
.header .language .lang_arrow{display: inline-block; width:0;height: 0;margin-bottom: 3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid white;margin-left:10px;}
.header .language:hover .lang_arrow{transform: rotateZ(180deg);}
.header .language .lang-box{width: 100%; height:0; overflow: hidden; transition-duration: 0.4s;}
.header .language .lang-box li{width: 100%; height: 30px; line-height: 30px; border-bottom: 0.5px dotted white; cursor: pointer; font-size:15px; text-align: center; background-color: rgba(0,0,0,0.3);}
.header .language .lang-box li:last-child{border-bottom: 0px;}
.header .language:hover .lang-box{height: 90px;}

/* 모바일헤더 */
.mobile_ver{width: 100%;}
.mobile_ver .mo_btn_wrap{cursor: pointer; display: block; position: absolute; right:30px; top:50%; transform: translateY(-50%); width:33px; height: 20px;} 
/* .mobile_ver .mo_btn_wrap span{display: block; width: 100%; height: 3px; margin-bottom:7px; background-color: white;} */
.mobile_ver .mo_btn_wrap span{position: absolute; width: 100%; height:2px; background-color: white;z-index: 300;}
.mobile_ver .mo_btn_wrap span:nth-child(1){top: 0;}
.mobile_ver .mo_btn_wrap span:nth-child(2){top:50%;}
.mobile_ver .mo_btn_wrap span:nth-child(3){top: 100%;}
.mobile_ver .mo_btn_wrap span:last-child{margin-bottom: 0;}



.mobile_ver .mo_menu{width:100%;height:100%; overflow: hidden; background-color: #4888be; position: relative; top: 80px;right: 0; display: none;}
.mobile_ver .mo_menu>li>a{width: 100%;border-bottom: 1px solid #dbdbdb; text-align: center; padding: 12px 0; color: white;}
.mobile_ver .mo_menu>li:last-child a{border-bottom: 0px;}

.mobile_ver .mo_menu .mo_sub_menu{width: 100%; text-align: center; background-color: white; display: none;}
.mobile_ver .mo_menu .mo_sub_menu>li{width: 100%;color: #4888be; height:50px; background-color:#f7f7f7; border-bottom: 1px solid #dbdbdb;}
.mobile_ver .mo_menu .mo_sub_menu>li>a{width: 100%; height: 0px; color:#4888be; line-height: 50px;}


/* ********************************************* *
    footer
* ********************************************* */
.footer{position: relative; width: 100%; background-color: #222; color:#555; text-align: left; padding:30px 0; float: left;}
.footer .footer_text{text-transform: uppercase; font-weight: 500; font-size: 14px; float: left; margin-bottom: 15px;}
.footer .family_box{width:150px; float: right;}
.footer .family_box>p{width:150px; height:36px; color: #555; cursor: pointer; border: 1px solid #555; line-height: 36px;padding-left: 10px;}
.footer .family_box>p span{display: inline-block; width: 0; height: 0;border-left: 5px solid transparent; border-right: 5px solid transparent;  border-top: 5px solid #555; margin-left: 45px; margin-bottom: 2px;}
.footer .family_box .family_box_inner{width: 100%; height:0px; background-color: #dbdbdb; border-right: 1px solid #555; border-left: 1px solid #555;overflow: hidden;}
.footer .family_box .family_box_inner li{cursor: pointer; width: 100%; height:36px; font-size: 14px; color:#333; line-height: 36px; padding-left:10px;border-bottom: 1px solid #555;}

.footer .rock{width: 18px; height: 20px; position: absolute; right:40px; top: 70%;}
.footer .rock a img{width: 100%;}


/* ********************************************* *
    common_banner
* ********************************************* */
.common_sub_banner{width: 100%; height: 428px; position: relative; }
.common-title{font-size:3.889rem; text-align: center; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.common_tab_banner{width: 100%; height: 50px; background-color: rgba(0,0,0,0.5); position: absolute; bottom: 0; left: 0;}
.comm-tab{display:-webkit-box; display: -ms-flexbox; display: flex; margin-left:auto; margin-right:auto;  line-height: 50px;}
.comm-tab li{float: left; cursor: pointer; color: #fff; text-align: center;}
.comm-tab li span{width: 100%; height: 100%; display: block;}
.comm-tab li.tab-on{background-color: #fff; color: #4888be;}

.equipment-tab,.customer-tab,.agent-tab{width: 400px;}
.equipment-tab li,.customer-tab li,.agent-tab li{width:50%;}

.product-tab{width: 500px;}
.product-tab li{width:33.333%;}

.company-tab{width: 680px;}
.company-tab li{width: 25%;}


.company-bg{background: url(../img/sub/company_bg.jpg)no-repeat; background-size: cover; background-position: center; }
.product-bg{background: url(../img/sub/product_bg.jpg)no-repeat; background-size: cover; background-position: center; }
.equipment-bg{background: url(../img/sub/equipment_bg.jpg)no-repeat; background-size: cover; background-position: center; }
.customer-bg{background: url(../img/sub/customer_bg.jpg)no-repeat; background-size: cover; background-position: center; }

/* ********************************************* *
    common_title
* ********************************************* */
.sub-body{padding:120px 0}
.com-sub-title{padding-bottom: 80px;}
.com-sub-title h2{font-size: 2.222rem; line-height: 1; text-align:left; padding-bottom: 15px; font-weight: 500;}
.com-sub-title h2::before{content: "";width: 8px; height: 32px; display: inline-block; margin-right: 10px; background-color: #4888be;}
/* .com-sub-title .sub-title-line{width: 54px; height: 3px; background-color: #d7a534; margin: 0 auto; display: block;} */