@charset "utf-8";
/* CSS Document */

#WRAP {position:relative; width:100%; overflow:hidden;margin: 0 auto; min-width:1200px;max-width:1920px;margin: 0 auto;}
.wrap{width:1200px; position:relative; margin:0 auto; box-sizing:border-box;}
.sub_wide{ width:1350px; position:relative; margin:0 auto; box-sizing:border-box;}
.area-box {max-width: 100%;margin: 0px auto;}

/* HEADER-GNB */
#main_head {position: fixed;top: 0;width: 100%;height: 90px;background-color: transparent;-webkit-transition: all 0.4s;transition: all 0.4s;border-bottom: 1px solid transparent;will-change: top;z-index: 700;max-width: 1920px;min-width: 1200px; z-index:9999;border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
#main_head .fixed-wrap {left: 0;padding: 0 15px;width: 100%;height:90px;transition: all 0.4s;}
#main_head .fixed-wrap .header-inner {display: flex;justify-content: space-between;margin: 0 auto;max-width:1400px;height: 100%;}
#main_head .logo {display: flex; flex-direction: column;width:170px;}
#main_head .logo .logo-img {display: flex;flex: 1 1 0%;align-items: center;background-image: url(../../img/logo_white.png);background-repeat: no-repeat;background-position: center left;}
#main_head .nav{display: flex;justify-content:center;flex: 1 1 0%;}
#main_head .nav .menu-list-wrap {display: flex; justify-content: space-between;width: 100%;max-width:940px;}
#main_head .nav .menu-list {display: flex;position: relative;flex: 1 1 auto;justify-content: center;}
#main_head .nav .menu-list > a {position: relative;display: flex; align-items: center;justify-content: center;font-size:19px;font-weight:400;color: #fff;transition: color 0.4s;-webkit-transition: color 0.4s;cursor: pointer;}
.sub-menu-list-wrap {display: none;position: absolute;left: 0;top: 90px;width: 100%;height: 245px;text-align: center;z-index: 999;transition: top 0.4s;padding: 0 10px;box-sizing: border-box;}
/* .sub-menu-list{ margin-top:12px} */
.sub-menu-list-wrap li {padding: 10px 0;}
.sub-menu-list-wrap li:first-child {margin-top:25px;}
.sub-menu-list a {position: relative;display: block;font-size: 15px;color: #666; transition: color 0.4s;-webkit-transition: color 0.4s;}
.sub-menu-list .text {word-break: inherit;}
.header-right-wrap {display: flex;align-items: center;}
.header-right-wrap .btnPcNav {width: 90px;height: 100%;display: flex;align-items: center;justify-content: center;cursor: pointer;border-left: 1px solid rgba(255, 255, 255, 0.3);border-right: 1px solid rgba(255, 255, 255, 0.3); }
#main_head .navBg {position: absolute;left: 0;top: 90px; display: none;width: 100%;height: 300px;background-color: rgba(255, 255, 255, 0.95);transition: top 0.4s;z-index: 400; overflow:hidden; background-image:url(../../img/menu_bg.png); background-repeat:no-repeat; background-position: 101% 115%; border-top:1px solid #eee;}
#main_head .navBg:after{content: "";display: block; width: 66%; height: 320%;position: absolute;top: 0;left: 0; background: rgba(7, 86,162,0.03); transform: rotate(58deg);margin-left: -29.2%;}
.header-right-wrap .menu-btn .line, .header-right-wrap .menu-btn .line:before, .header-right-wrap .menu-btn .line:after {content: "";display: block;width: 26px;height: 2px;background-color: #fff;transition: transform 0.4s, background 0.4s;margin:6px 0;}
.header-right-wrap .menu-btn .line:before {transform: translateY(-8px);}
.family_link_container{ position:relative;}
.family_link_container > button{background: none;border: none;padding: 39px 25px 35px 33px;color: #fff;font-weight: 600; font-size: 13px; letter-spacing: 0.1em;cursor: pointer; position: relative;}
.family_link_container > button > span{ display:inline-block; height:100%; text-align:left;padding-right:10px;}
.family_link_container > button b{ background:url(../../img/btn_language.png) no-repeat right center; background-size:12px auto; display:inline-block;position: relative;top: 2px;width:12px; height:12px}
.family_link_container.open > button > b{transform:rotate(180deg); margin-top:-3px;}
.family_link_container ul{position: absolute;width:70%;top: 65px;margin: 0 -1px;display: none;left: 30px; border-top:2px solid #0756a2;padding: 6px 5px 10px;background:#f0f0f0; z-index:999}
.family_link_container ul li a{font-size: 13px;line-height: 1.9;box-sizing: border-box;display: block;width: 100%;padding-left: 10px;font-weight: 500;margin-bottom: 2px;}
.family_link_container > button > i.material-icons{vertical-align: middle;font-size: 19px; margin-right: 10px;padding-bottom: 1px;}
/*header 액션*/
#main_head.fixed {position: fixed;top: -100px;height: 80px;opacity: 0;}
#main_head.white {background-color: #fff;border-bottom: 1px solid #ddd;}
#main_head.white .logo .logo-img, .nav-open #main_head .logo .logo-img, #main_head:hover  .logo .logo-img, #main_head.fixed .logo .logo-img{background-image: url(../../img/logo.png); }
#main_head:hover .fixed-wrap, .nav-open #main_head .fixed-wrap{ background-color:#fff!important}
#main_head .nav .menu-list:hover .menu-text{color:#279a46}
#main_head .nav .menu-list:after {content: "";display: inline-block;position: absolute; bottom: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(to right, #38b0f6, #0174b7);opacity: 0;transition: opacity 0.4s;}
#main_head .nav .menu-list:hover:after{opacity:1}
.nav-open #main_head .menu-btn .line:before{-webkit-transform:translateY(0) rotateZ(135deg); transform:translateY(0) rotate(135deg)}
.nav-open #main_head .menu-btn .line:after{-webkit-transform: translateY(-8px) rotateZ(-135deg); transform: translateY(-8px) rotateZ(-135deg);}
.nav-open #main_head .menu-btn .line,  .nav-open #main_head.white .menu-btn .line, .nav-open #main_head.white:hover .menu-btn .line{background-color: transparent !important;}
.sub-menu-list:hover>a{ color:#000}
.nav-open #main_head .menu-list > a{color:#222;}
.sub-menu-list:hover>a{color:#222}
#main_head:hover .nav .menu-list > a, .nav-open #main_head .main-list >a{color:#222!important} 
.nav-open #main_head .menu-btn .line,  .nav-open #main_head .menu-btn .line:before, .nav-open #main_head .menu-btn .line:after{background-color:#222!important}
.nav-open #main_head:hover .menu-btn .line, .nav-open #main_head .menu-btn .line {background-color: transparent !important;}
#main_head.white .menu-list>a, #main_head.white .menu-list > a { color:#222!important} 
#main_head:hover .menu-btn .line, #main_head.white .menu-btn .line, #main_head.white .menu-btn .line:before, #main_head.white .menu-btn .line:after, #main_head:hover .menu-btn .line:after, #main_head:hover .menu-btn .line:before{ background:#222!important}
#main_head.white:hover .menu-list>a, .nav-open #main_head.white .menu-list > a{ color:#222!important}
#main_head:hover .header-right-wrap .btnPcNav, .nav-open .header-right-wrap .btnPcNav, #main_head.white .header-right-wrap .btnPcNav{border-color:#ddd;}
#main_head:hover .family_link_container > button, .nav-open .family_link_container > button, #main_head.white .family_link_container > button{ color:#0756a2}
#main_head:hover .family_link_container > button >b, .nav-open .family_link_container > button > b, #main_head.white .family_link_container > button > b{ background:url(../../img/btn_language_on.png) no-repeat right center}

/* FOOTER */
footer{display: block;height: auto !important;background-color: #666;font-size: 0.75rem;color: rgba(255, 255, 255, 0.5);font-weight: 400;text-align: center; position:relative;}
#fnb { display: inline-block; position: relative; z-index: 0; width:100%; height: 3.5rem; margin: 0 auto; text-align: left; line-height: 3.5rem; }
#fnb::after { position: absolute; left:0; bottom: 0; width: 100%; height: 1px;background-color: #9c9c9c; content: ''; }
#fnb .menu { float: left; padding: 0 2.5rem; border-left: 1px solid #9c9c9c; border-right: 1px solid #9c9c9c; }
#fnb .menu a { color: #fff; font-size:15px}
#fnb .menu a + a::before { display: inline-block; width: 1px; height: 0.7rem; margin: 0 1rem; background-color: #9c9c9c; content: ''; vertical-align: middle; }
#fnb .site { float: right; margin-right: 7rem; padding-right: 0.5rem; font-size:15px}
#fnb .site .label { margin-right: 1rem; color: #fff; }
#fnb .site .label strong { font-weight: 700; }
#fnb .site a { display: inline-block; overflow: hidden; margin-right: 0.5rem; text-align: center; line-height: 1.8rem; margin-top: 12px; -webkit-transition: all 0.2s; transition: all 0.2s; font-size:13px}
#fnb .site a:hover{ color:#fff;}
#siteinfo { clear: both; position: relative; margin: 1.5rem auto 0; font-size:14px; line-height:1.8}
#siteinfo .wrap{padding: 0 14rem 1.8rem; background: url("../../img/logo.png") no-repeat left top; text-align: left; box-sizing:border-box; color: #ffffff;}
#siteinfo .customer { position: absolute; right: 1rem; top: 0; font-size: 1.15rem; color: #ffffff; text-align: center; line-height: 1.2; }
#siteinfo .customer span { display: block; font-size:14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-left:0;}
#siteinfo .customer strong { font-size:23px; margin-top:10px; display:block; letter-spacing:2px}
#siteinfo address { display: inline-block; vertical-align: middle; display:block; font-style:normal;}
#siteinfo span { display: inline-block; margin-left: 0.7rem; vertical-align: middle; }
#siteinfo span:nth-of-type(1){ margin-left:0}
#siteinfo .copyright { font-weight: 500; letter-spacing: 1px; margin-top:10px}
.go-top { position: absolute; right:0; top:0; z-index: 1; width: 6rem; height: 3.5rem; border-left: 1px solid #9c9c9c; border-right: 1px solid #9c9c9c; font-size: 0.81rem; font-weight: 600; color: #fff; text-align: center; line-height: 3.7rem; }
.go-top span{margin-left:3px; position:relative; top:7px}