@charset "utf-8";

header{position:absolute; top:0; width:100%; min-width:320px; height:80px; background-color:#FFF; z-index:99;}
header .top_align{display:grid; grid-template-columns: 1fr auto 1fr; justify-content:space-between; align-items:center; height: 100%; padding:0 60px;}
header .top_logo{width:140px; height:35px; background:url(../images/common/top_logo_on.png) no-repeat; background-size:100% auto;}
header .top_logo a{display:block; width:100%; height:100%;}
header .nav_btn, header .nav_close{display:none;}
header .top_util{display:flex; justify-content:flex-end; align-items:center; gap:32px;}
header .top_util .lang a{display:block; line-height:30px; font-size:14px; font-weight:500; color:#185aea;}
header .top_util .family_btn a{display:block; width:150px; height:40px; border-radius:20px; background:linear-gradient(45deg, #00acee 20%, #185aea 80%); text-align: center;}
header .top_util .family_btn p{display:inline-block; line-height:40px; padding-right:25px; background:url(../images/common/family_btn.png) no-repeat right center; background-size:14px; color:#FFF; font-size:16px; font-weight:500;}
header .top_util .family_con{position:fixed; top:0; right:-200%; display:block; width:340px; height:100%;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;}
header .top_util .family_con .family_top{position:relative; width:100%; height:80px; background:linear-gradient(45deg, #00acee 20%, #185aea 80%); z-index:99;}
header .top_util .family_con .family_top p{line-height:80px; padding-left:40px; font-size:20px; color:#FFF; font-weight:500;}
header .top_util .family_con .family_top .close_btn{position:absolute; width:22px; height:22px; top:28px; right:40px;}
header .top_util .family_con .family_top .close_btn a{display:block; width:100%; height:100%; background:url(../images/common/m_nav_close.png) no-repeat center; background-size:100% auto;}
header .top_util .family_con .family_li{position:relative; width:100%; background-color:#FFF; z-index:99;}
header .top_util .family_con .family_li li{padding:20px 40px; border:1px solid #ddd;}
header .top_util .family_con .family_li li a{display:block; width:100%; background:url(../images/main/go_btn.png) no-repeat right center; background-size:14px;}
header .top_util .family_con:after{content:''; position:fixed; width:100%; height:100%; top:0; right:-100%; background-color:#000; opacity:0;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;}
header .top_util .family_con.on{right:0; opacity:1; z-index:100;}
header .top_util .family_con.on:after{opacity:0.7; right:0;}
.gnb .gnb_wrap{display:flex; justify-content: center; align-items: center; gap: 56px;}
.gnb .menu{position:relative;}
.gnb .menu .menu_link{display:block; font-size:16px; font-weight:500; color:#303030; cursor:pointer;}
.gnb .menu.on .menu_link{color:#1d4ed8;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .menu .menu_arrow{position:relative; padding-right: 20px;}
.gnb .menu .menu_arrow::after{content:''; position:absolute; top:50%; right:0; display:block; width:10px; height:6px; transform:translateY(-50%); background:url(../images/common/mn_arrow.png) no-repeat center; background-size:100% auto;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .menu.on .menu_arrow::after{background:url(../images/common/mn_arrow_on.png) no-repeat center; background-size:100% auto; transform:translateY(-50%) rotate(180deg);}
.gnb .sub_menu{display:none; position:absolute; left:50%; top:32px; transform:translateX(-50%); width:max-content; background-color:#FFF; border:1px solid #e5e5e5; border-radius:8px; box-shadow:16px 16px 24px rgba(0,0,0,0.05);}
.gnb .sub_menu li{
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .sub_menu li dl dt{font-weight:500; color:#303030;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .sub_menu li dl dd{font-size:13px; color:#64748b; line-height:1.4;}
.gnb .business_sub{padding:16px;}
.gnb .business_sub > ul{display:flex; flex-direction:column; gap:16px;}

.gnb .business_sub li > a{display:flex; align-items:center; gap:16px; padding:8px 16px;}
.gnb .business_sub li .icon{display:flex; justify-content:center; align-items:center; width:32px; height:32px; border-radius:5px;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .business_sub li:nth-child(1) .icon{background:url(../images/common/b_ic01.png) no-repeat center #dbeafe; background-size:18px;}
.gnb .business_sub li:nth-child(2) .icon{background:url(../images/common/b_ic02.png) no-repeat center #e0e7ff; background-size:18px;}
.gnb .business_sub li:nth-child(3) .icon{background:url(../images/common/b_ic03.png) no-repeat center #f3e8ff; background-size:18px;}
.gnb .business_sub li:nth-child(4) .icon{background:url(../images/common/b_ic04.png) no-repeat center #dcfced; background-size:18px;}
.gnb .product_sub{padding:24px 32px;}
.gnb .product_sub .product_sub_wrap{display:flex; gap: 40px; align-items: flex-start;}
.gnb .product_sub .left, .gnb .product_sub .right{display:flex; flex-direction:column; gap:16px;}
.gnb .product_sub .wrap:first-child{border-bottom:1px solid #e5e5e5; padding-bottom:16px;}
.gnb .product_sub .wrap > p{margin-bottom:8px; font-weight:600; color:#64748b;}
.gnb .product_sub .wrap ul{display:flex; flex-direction:column; gap:8px;}
.gnb .product_sub .wrap ul li{display:flex; justify-content:space-between; gap:32px;}
.gnb .product_sub .wrap ul li .out_link{display:block; width:24px; height:24px; background:url(../images/common/link_ic.png) no-repeat center; background-size:12px;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
@media (hover: hover) {
.gnb .menu .menu_link:hover{color:#1d4ed8;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .menu .menu_arrow:hover::after{background:url(../images/common/mn_arrow_on.png) no-repeat center; background-size:100% auto; transform:translateY(-50%) rotate(180deg);}
.gnb .business_sub li:hover{background-color:#f3f6f9;}
.gnb .product_sub li dl:hover dt{color:#185aea;}
.gnb .product_sub .wrap ul li .out_link:hover{background:url(../images/common/link_ic_on.png) no-repeat center; background-size:12px;}
.gnb .business_sub li:nth-child(1):hover .icon{background:url(../images/common/b_ic01_w.png) no-repeat center #185aea; background-size:18px;}
.gnb .business_sub li:nth-child(2):hover .icon{background:url(../images/common/b_ic02_w.png) no-repeat center #4f46e5; background-size:18px;}
.gnb .business_sub li:nth-child(3):hover .icon{background:url(../images/common/b_ic03_w.png) no-repeat center #9333ea; background-size:18px;}
.gnb .business_sub li:nth-child(4):hover .icon{background:url(../images/common/b_ic04_w.png) no-repeat center #16a369; background-size:18px;}
}

/* 태블릿 */
@media screen and (max-width:1399px){
header{height:60px; overflow: hidden;}
header .top_align{positin:relative; padding:0 3%; grid-template-columns:calc(100% - 78px) 1fr 1fr; gap: 16px;}
header .top_logo{width:120px; height:30px;}
header .top_util .lang a{width:20px;}
header .top_util .family_btn{display:none;}
header .nav_btn{display: block; width:26px; height:18px; background:url(../images/common/m_nav_btn.webp) no-repeat; background-size:100% auto;}
header .nav_close{display:block; width:22px; height:22px; background:url(../images/common/m_nav_close.webp) no-repeat; background-size:100% auto; margin-bottom:40px;}
.gnb .family_btn{display:none;}
.gnb{position:absolute; top:0; width: 100%; height:100%; transform:translateX(100%); background-color:#FFF; padding:20px 3% 0; box-sizing:border-box;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.3s;
	-webkit-transition-duration:0.3s;}
.gnb .gnb_wrap{flex-direction:column; align-items:flex-end; gap:0; max-width:640px; margin:auto;}
.gnb .menu{width:100%;}
.gnb .menu .menu_link{font-size:18px; font-weight:700; line-height:56px; border-bottom:1px solid #e5e5e5;}
.gnb .menu .menu_arrow::after{width:14px; height:14px;}
.gnb .menu.on .sub_menu{display:block;}
.gnb .sub_menu{position:static; transform:translateX(0); border:none; box-shadow:none; padding:24px 16px; width:auto;}
.gnb .business_sub li > a{padding:0; gap:8px;}
.gnb .sub_menu li dl dt{font-size:16px;}
.gnb .sub_menu li dl dd{margin-top: 5px;}
.gnb .business_sub li dl dd{display:none;}
.gnb .product_sub .product_sub_wrap{display:block;}
.gnb .product_sub .wrap ul li .out_link{width: 42px; height:42px; background-size:16px;}
.gnb .product_sub .right{margin-top: 16px; padding-top: 16px; border-top:1px solid #e5e5e5;}
.gnb.on{position:fixed; left:0; transform:translateX(0); overflow-y: scroll;}

}


/* 640px 이상 해상도 */
@media screen and (min-width:640px){

}

/* 860px 이상 해상도 */
@media screen and (min-width:860px){

}

/* 1200px 이상 해상도 */
@media screen and (min-width:1200px){
}

/* 1400px 이상 해상도 */
@media screen and (min-width:1400px){
/*header{height:80px;
		    transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
        transition-duration:0.2s;
     -o-transition-duration:0.2s;
   -moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header:after{display:none;}
header h1.top_logo{position:relative; width:140px; height:35px; margin:23px 0 0 60px; z-index:99;
		    transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
        transition-duration:0.2s;
     -o-transition-duration:0.2s;
   -moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
header h2.nav_btn{display:none;}
.gnb{display:block;}
.gnb.on{position:absolute; left:0; height:auto;}
.gnb .nav_close{display:none;}
.gnb .gnb_wrap{width:100%; height:auto; top:0; left:0; background:none; overflow:visible;}
.gnb .main{position:absolute; top:27px; left:50%; margin-left:-410px; width:820px;}
.gnb .main > li{background:none; float:left;}
.gnb .main > li > a{height:auto; line-height:normal; border-bottom:none; padding-left:0; padding-right:88px; font-size:18px; font-weight:700; color:#212121;
		    transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
        transition-duration:0.2s;
     -o-transition-duration:0.2s;
   -moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
.gnb .main > li:last-child > a{padding-right:0;}
.gnb .main > li a span{display:block; position:relative;}
.gnb .main > li a span:after{display:block; content:""; width:0px; height:4px; background:#2aabe4; margin:22px auto 0;
		    transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
        transition-duration:0.2s;
     -o-transition-duration:0.2s;
   -moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
.gnb .main > li:hover a span:after{width:100%;}
.gnb .main > li a.sub_open{display:none;}
.gnb .main > li.on{background:none;}
.gnb .main > li .sub,
.gnb .main > li.on .sub{display:block; position:absolute; padding-top:0; z-index:50; height:1px; overflow:hidden; opacity:0; background:none;
		    transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
        transition-duration:0.2s;
     -o-transition-duration:0.2s;
   -moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
.gnb nav:hover li .sub, .gnb nav:hover li.on .sub{padding-top:30px; height:auto; opacity:1;}
.gnb .sub > li{clear:both; background:none; width:240px; height:30px; line-height:30px;}
.gnb .sub > li:hover{border-bottom:none;}
.gnb .sub > li > a{border-bottom:none; font-size:14px; color:#7d7d7d; font-weight:400;}
.gnb .sub > li > a:hover, .gnb .sub > li > a:focus{color:#000;}
.gnb .main > li:last-child .sub > li{clear:both; background:none; height:30px; line-height:30px;}
.gnb .main:before, .gnb .main > li:after, .gnb .sub:before{display:none;}
.gnb nav:after{position:absolute; display:block; content:""; width:100%; top:80px; left:0; height:0; background:#FFF; border-bottom:solid 1px #FFFFFF; z-index:-1; opacity:0.3;
		    transition-timing-function:ease-in-out;
     -o-transition-timing-function:ease-in-out;
   -moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
        transition-duration:0.2s;
     -o-transition-duration:0.2s;
   -moz-transition-duration:0.2s;
-webkit-transition-duration:0.2s;}
.gnb nav:hover:after{height:220px; opacity:1; border-top:solid 1px #d9d9d9; border-bottom:none;}
.gnb:after{display:none;}
.gnb .sub.eng > li{width:260px;}
.gnb .main > li:last-child .sub.eng > li{width:260px; }
.top_util{display:none; position:absolute; float:none; right:100px; bottom:auto; top:21px; left:auto; margin:0 0;}
.top_util li{float:left; margin-right:20px;}
.top_util li:after{position:absolute; display:block; content:""; width:1px; height:12px; top:7px; right:-10px; left:auto; background:#00d0ff; opacity:0.7;}
.top_util li:last-child{margin-right:0;}
.top_util li:last-child:after{display:none;}
.top_util li a{color:#00d0ff; margin-left:0; font-size:15px;}
/*.top_util li a.groobee{width:82px; height:18px; margin-top:3px; background:url(../images/common/groobee_logo_pc.png) no-repeat; background-size:82px auto;}*/
/*.top_util li select::-ms-expand{display:none;}
.top_util li.mo{display:none;}
.top_util li.pc{display:block;}
.techhub_bn{display:none;}
.family_btn{position:absolute; display:block; top:20px; right:40px;}
.family_btn a{display:block; width:150px; height:40px; border-radius:20px 20px; background-image:linear-gradient(45deg, #00d8fb 20%, #00acee 80%); text-align:center;}
.family_btn p{display:inline-block; line-height:40px; padding-right:25px; background:url(../images/common/family_btn.png) no-repeat right center; background-size:14px 14px; color:#FFF; font-size:16px; font-weight:500;}
.family_con{display:block; position:fixed; width:340px; height:100%; top:0; right:-200%; transition:right 0.45s, opacity 0.65s; background:#FFF;}
.family_con.on{right:0; opacity:1; z-index:100;}
.family_con:after{content:""; position:fixed; width:100%; height:100%; top:0; right:-100%; background:#000; opacity:0;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
}
.family_con.on:after{opacity:0.7; z-index:98px; right:0;}
.family_con .family_top{position:relative; width:100%; height:80px; background-image:linear-gradient(45deg, #00d8fb 20%, #00acee 80%); z-index:99;}
.family_con .family_top h1{line-height:80px; padding-left:40px; font-size:20px; color:#FFF; font-weight:500;}
.family_con .family_top .close_btn{position:absolute; width:22px; height:22px; top:28px; right:40px;}
.family_con .family_top .close_btn a{display:block; width:100%; height:100%; background:url(../images/common/m_nav_close.png) no-repeat center; background-size:100% auto;}
.family_con .family_li{position:relative; width:100%; background:#FFF; z-index:99;}
.family_con .family_li li{padding:20px 40px; border-bottom:1px solid #ddd;}
.family_con .family_li li:last-child{border-bottom:none;}
.family_con .family_li li a{display:block; width:100%; background:url(../images/main/go_btn.png) no-repeat right center; background-size:14px 14px;}
.family_con .family_li li a img{vertical-align:middle;}

.lang{right:200px; top:25px;}

header:hover{background:#FFF;}
header:hover h1.top_logo{background:url(../images/common/top_logo_on.png) no-repeat; background-size:100%;}
header:hover .gnb .main li a{color:#212121;}
header:hover .gnb .sub > li > a{padding-left:0; color:#7d7d7d;}
header:hover .gnb .sub > li > a:hover, header:hover .gnb .sub > li > a:focus{color:#000;}
/*header:hover .top_util li a.groobee{background:url(../images/common/groobee_logo_bk.png) no-repeat; background-size:82px auto;}*/
/*header:hover .top_util li:after{background:#aaa;}
header:hover .top_util li a{color:#808080;}
header.nav_fixed .gnb .main li a{color:#212121;}
header.nav_fixed .gnb .sub > li > a{color:#7d7d7d;}
header.nav_fixed .gnb .sub > li > a:hover, header:hover .gnb .sub > li > a:focus{color:#000;}
header.nav_fixed .top_util li:after{background:#aaa;}
header.nav_fixed .top_util li a{color:#808080;}
header.nav_fixed .gnb nav:after{
	      box-shadow:0 5px 10px rgba(0,0,0,0.1);
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.1);}*/
}