@charset "utf-8";

/*********************************************
* Common Layout [s]
**********************************************/
.mb50{margin-bottom: 50px;}
/* l-header */
.l-header-wrap{position:fixed;top:0;z-index:100;width:100%;min-width:320px;background-color:#fff;border-bottom:1px solid #e1e1e1}
.l-header{position:relative;height:59px;padding:0 20px}
.l-header .logo{display:block;position:absolute;top:16px;left:20px;z-index:20}
.l-header .logo img{width: 80%;}
.l-header .header-util-link{position:absolute;top:0;right:0}
.l-header .header-util-link ul{min-width:1px}
.l-header .header-util-link ul::after{content:"";display:block;clear:both}
.l-header .header-util-link ul li{float:left}
.l-header .header-util-link ul li{display:none}
.l-header .header-util-link ul li > a{display:block;overflow:hidden;position:relative;width:30px;height:30px;text-indent:-9999px}
.l-header .header-util-link ul li > a::before{content:"";position:absolute;background-image:url(http://www.ket.com/resources/user/common/images/sprite.png);background-size:400px;background-repeat:no-repeat}
.l-header .header-util-link ul .language ul{display:none;margin-top:13px;margin-left:29px}
.l-header .header-util-link ul .language ul li{display:block;float:none}
.l-header .header-util-link ul .language ul li + li{margin-top:8px}
.l-header .header-util-link ul .language ul li a{display:block;position:relative;width:auto;height:auto;padding:0 1px;text-indent:0;font-size:1.4rem;line-height:21px}
.l-header .header-util-link ul .language ul li a:hover{font-weight:600}
.l-header .header-util-link ul .language ul li a:hover::before{content:"";position:absolute;right:0;bottom:1px;left:0;height:1px;background-color:#666}
.l-header .header-util-link ul .search > div{display:none;position:fixed;top:0;right:20px;left:20px;z-index:10;min-width:280px;padding-top:100px;padding-bottom:20px;background-color:#fff}
.l-header .header-util-link ul .search > div .product-search{display:flex;position:relative;padding-right:84px;border-bottom:2px solid #000}
.l-header .header-util-link ul .search > div input[type="text"]{flex:1;height:38px;border:none;outline:none;line-height:38px}
.l-header .header-util-link ul .search > div .btn-search{position:absolute;top:0;right:0;width:74px;height:38px;line-height:38px;font-weight:600;text-align:right}
.l-header .header-util-link ul .search > div .btn-search-close{position:absolute;top:11px;right:-12px;width:50px;height:50px}

.l-header .header-util-link ul .search,
.l-header .header-util-link ul .slidemenu{display:block}

.l-header .header-util-link .btn-login{display:block;margin-top:15px}
.l-header .header-util-link .btn-login::before{top:2px;left:5px;width:19px;height:26px;background-position:-24px -66px}
.l-header .header-util-link .btn-my-product{display:block;margin-top:15px;margin-left:21px}
.l-header .header-util-link .btn-my-product::before{top:2px;left:3px;width:24px;height:26px;background-position:-44px -66px}
.l-header .header-util-link .btn-language{display:block;width:59px;margin-top:15px;margin-left:24px}
.l-header .header-util-link .btn-language::before{top:3px;left:3px;width:24px;height:24px;background-position:-69px -66px}
.l-header .header-util-link .btn-language::after{content:"";position:absolute;top:13px;left:39px;width:0;height:0;border-style:solid;border-width:5px 4px 0 4px;border-color:#222 transparent transparent transparent}
.l-header .header-util-link .btn-search-open{display:block;margin-top:15px;margin-left:31px}
.l-header .header-util-link .btn-search-open::before{top:3px;left:2px;width:26px;height:25px;background-position:-94px -66px}
.l-header .header-util-link .btn-slidemenu{display:block;width:63px;height:60px}
.l-header .header-util-link .btn-slidemenu::before{top:21px;left:20px;width:23px;height:18px;background-position:0 -66px}

/* Header Search On */
.is-head-search .l-header{height:160px}
.is-head-search .l-header .header-util-link ul > li > a{display:none}
.is-head-search .l-header .header-util-link ul .search > div{display:block}



@media (min-width: 712px) {
	.l-header{--max-width:712px;height:69px;margin:0 auto}
	.l-header .logo{top:17px;left:20px}
	.l-header .logo a{width:88px;height:35px;background-position:-267px -116px}
	.l-header .logo img{width: 100%;}
	.l-header .header-util-link .btn-slidemenu{width:63px;height:70px}
	.l-header .header-util-link .btn-slidemenu::before{top:26px}
	.l-header .header-util-link .btn-login,
	.l-header .header-util-link .btn-my-product,
	.l-header .header-util-link .btn-language,
	.l-header .header-util-link .btn-search-open{margin-top:20px}
	.l-header .header-util-link ul .login,
	.l-header .header-util-link ul .logout,
	.l-header .header-util-link ul .language,
	.l-header .header-util-link ul .my-product{display:block}
	.l-header .header-util-link ul .search > div{left:auto;min-width:247px;padding-top:70px}

	/* Header Search On */
	.is-head-search .l-header{height:130px}

	/* Header Language On */
	.is-head-language .l-header{height:130px}
	.is-head-language .l-header .header-util-link ul .language ul{display:inline-block}
}

@media (min-width: 1200px) {
	.l-header{--position:static;position:relative;max-width:1280px;height:79px;padding:0 40px}
	.l-header .logo{top:23px;left:40px}
	.l-header .logo img{width: 100%;}
	/* .l-header .logo{top:23px;left:50%;--margin-left:-600px} */
	.l-header .header-util-link{right:10px}
	/* .l-header .header-util-link{right:50%;margin-right:-630px} */
	.l-header .header-util-link .btn-slidemenu{width:83px;height:80px}
	.l-header .header-util-link .btn-slidemenu::before{top:31px;left:30px}
	.l-header .header-util-link .btn-login,
	.l-header .header-util-link .btn-my-product,
	.l-header .header-util-link .btn-language,
	.l-header .header-util-link .btn-search-open{margin-top:25px}
	.l-header .header-util-link ul .search > div{right:50%;margin-right:-600px;padding-top:80px}

	/* Header Search On */
	.is-head-search .l-header{height:140px}

	/* Header Language On */
	.is-head-language .l-header{height:140px}
}

/* GNB */
.gnb-wrap .mobile-head-util-link{display:none;min-width:1px;height:60px;border-bottom:1px solid #e1e1e1}
.gnb-wrap .mobile-head-util-link::after{content:"";display:block;clear:both}
.gnb-wrap .mobile-head-util-link .link-left{float:left}
.gnb-wrap .mobile-head-util-link .link-right{display:flex;float:right}
.gnb-wrap .mobile-head-util-link .link-right li{position:relative;height:60px}
.gnb-wrap .mobile-head-util-link .link-right li + li{margin-left:10px;padding-left:10px}
.gnb-wrap .mobile-head-util-link .link-right li + li::before{content:"";position:absolute;top:25px;left:0;width:1px;height:12px;background-color:#ddd}
.gnb-wrap .mobile-head-util-link .link-right li:last-child{margin-left:0;padding-left:0}
.gnb-wrap .mobile-head-util-link .link-right li:last-child::before{content:none}
.gnb-wrap .mobile-head-util-link a{display:block;overflow:hidden;position:relative;height:60px;text-indent:-9999px}
.gnb-wrap .mobile-head-util-link .btn-go-to-home{width:65px}
.gnb-wrap .mobile-head-util-link .btn-go-to-home::before{content:"";position:absolute;top:17px;left:20px;width:25px;height:26px;background-image:url(http://www.ket.com/resources/user/common/images/sprite.png);background-position:-121px -66px;background-size:400px;background-repeat:no-repeat}
.gnb-wrap .mobile-head-util-link .btn-language-kr,
.gnb-wrap .mobile-head-util-link .btn-language-en,
.gnb-wrap .mobile-head-util-link .btn-language-cn{height:auto;margin-top:18px;font-weight:600;text-indent:inherit}
.gnb-wrap .mobile-head-util-link .btn-menu-close{width:62px}
.gnb-wrap .mobile-head-util-link .btn-menu-close::before{content:"";position:absolute;top:21px;left:20px;width:22px;height:22px;background-image:url(http://www.ket.com/resources/user/common/images/sprite.png);background-position:-41px -93px;background-size:400px;background-repeat:no-repeat}
.is-menu .gnb-wrap .mobile-head-util-link{display:block}

.gnb-wrap .mobile-bottom-util-link{display:none;padding:0 20px}
.gnb-wrap .mobile-bottom-util-link .btn-area a{display:block;height:52px;color:#fff;line-height:52px;font-weight:600}
.gnb-wrap .mobile-bottom-util-link .btn-area a + a{margin-top:10px}
.gnb-wrap .mobile-bottom-util-link .btn-area .btn-login,
.gnb-wrap .mobile-bottom-util-link .btn-area .btn-register,
.gnb-wrap .mobile-bottom-util-link .btn-area .btn-logout{width:100%}
.gnb-wrap .mobile-bottom-util-link .btn-area .btn-login{background-color:#272d3b}
.gnb-wrap .mobile-bottom-util-link .btn-area .btn-register{background-color:#555}
.gnb-wrap .mobile-bottom-util-link .btn-area .btn-logout{background-color:#555}
.gnb-wrap .mobile-bottom-util-link .btn-area + .login-item{margin-top:20px}
.gnb-wrap .mobile-bottom-util-link .login-item{display:flex;position:relative;padding:22px 0 20px}
.gnb-wrap .mobile-bottom-util-link .login-item::before{content:"";position:absolute;top:0;right:-20px;left:-20px;height:2px;background-color:#000}
.gnb-wrap .mobile-bottom-util-link .login-item li{flex:1}
.gnb-wrap .mobile-bottom-util-link .login-item a{display:block;position:relative;padding-top:52px;font-size:15px;text-align:center}
.gnb-wrap .mobile-bottom-util-link .login-item a::before{content:"";position:absolute;top:0;left:50%;background-image:url(http://www.ket.com/resources/user/common/images/sprite.png);background-size:400px;background-repeat:no-repeat}
.gnb-wrap .mobile-bottom-util-link .login-item .btn-reg-modify::before{top:10px;width:32px;height:32px;margin-left:-16px;background-position:-147px -66px}
.gnb-wrap .mobile-bottom-util-link .login-item .btn-my-product::before{top:11px;width:31px;height:31px;margin-left:-16px;background-position:-180px -66px}
.gnb-wrap .mobile-bottom-util-link .login-item .btn-qna::before{top:10px;width:34px;height:33px;margin-left:-17px;background-position:-212px -66px}
.is-menu .gnb-wrap .mobile-bottom-util-link{display:block}

@media (min-width: 712px) {
	/* .gnb-inner .gnb{padding-top:70px} */
	.gnb-wrap .mobile-header-util-link{height:70px}
}

@media (max-width: 1199px) {
	
	.gnb-inner{display:none}
	.gnb-inner{position:fixed;top:0;left:0;z-index:120;width:100%;height:100%;padding:0 0 20px;background-color:#fff;overflow:hidden;overflow-y:auto}
	.gnb-inner .gnb a{display:block;padding:15px 20px;position:relative;line-height:30px}
	.gnb-inner .gnb .depth-intranet > a{border: 1px solid #ebebeb;}
	.gnb-inner .gnb .depth01 > a{font-size:2.2rem;color:#222;font-weight:600}
	.gnb-inner .gnb .depth02 > a{font-size:1.8rem;font-weight:900}
	.gnb-inner .gnb .depth03 > a{font-weight:600}
	.gnb-inner .gnb .depth03 > a{padding-left:30px}
	.gnb-inner .gnb .depth03 > a::before{content:"\002D";position:absolute;top:15px;left:20px}
	.gnb-inner .gnb .depth01 > a::before,
	.gnb-inner .gnb .depth01 > a::after{content:"";position:absolute;top:50%;right:20px;width:16px;height:2px;transition:transform 0.3s}
	.gnb-inner .gnb .depth01 > a::before{background-color:#222;transform:rotate(0deg)}
	.gnb-inner .gnb .depth01 > a::after{background-color:#222;transform:rotate(-90deg)}
	.gnb-inner .gnb .depth02.is-child > a::before{content:"";display:inline-block;position:absolute;top:50%;right:22px;width:0;height:0;margin-top:-3px;border-width:6px 5px 0 5px;border-style:solid;border-color:#222 transparent transparent transparent}
	.gnb-inner .gnb .depth02.is-child.is-active > a::before{margin-top:-4px;border-width:0 5px 6px 5px;border-color:transparent transparent #222 transparent}
	.gnb-inner .gnb .depth01 > div{display:none;--padding:0 20px}
	.gnb-inner .gnb .depth02 > div{background-color:#e9eaef}
	.gnb-inner .gnb .depth02 > ul{display:none;position:relative}
	.gnb-inner .gnb .depth02 > ul::before{content:"";position:absolute;top:0;right:20px;left:20px;width:auto;height:2px;background-color:#222;transform:rotate(0deg)}
	.gnb-inner .gnb .depth03 > ul{display:none}
	.gnb-inner .gnb .depth01.is-active > a{background-color:#272d3b;color:#fff}
	.gnb-inner .gnb .depth01.is-active > a::before,
	.gnb-inner .gnb .depth01.is-active > a::after{background-color:#fff}
	.gnb-inner .gnb .depth01.is-active > a::before{transform:rotate(-180deg)}
	.gnb-inner .gnb .depth01.is-active > a::after{transform:rotate(-180deg)}
	.gnb-inner .gnb .depth02.is-active > a{background-color:#e9eaef}
	.gnb-inner .gnb .depth02.is-active > a::after{content:none}
	.gnb-inner .gnb .depth01.is-active > div{margin:0 -20px;border-bottom:2px solid #000}
	.gnb-inner .gnb .depth01.is-active > div > ul{margin:0 20px}
	.gnb-inner .gnb .depth02.is-active > ul{background-color:#e9eaef}
	.is-menu .gnb-inner{display:block}
}

@media (min-width: 1200px) {
	.gnb-inner{--overflow:hidden;position:fixed;top:0;left:0;width:100%;height:80px}
	.gnb-inner .gnb{padding-top:0}
	.gnb-inner .gnb .depth01 > a{cursor:default}
	.gnb-inner .gnb a{letter-spacing:-0.4px}
	.gnb-inner .gnb .depth01 > a{padding:0 28px;font-size:1.8rem;color:#222;line-height:80px;font-weight:600}
	.gnb-inner .gnb .depth-intranet > a{font-size:1.3rem;color:#8d8d8d;font-weight:600;border: 1px solid #8d8d8d;padding: 5px 10px}/*------------인트라넷------------*/
	
	.gnb-inner .gnb .depth-shop > a{font-size:1.3rem;color:#fff;font-weight:600;padding: 6px 11px; background: #0958ce;}/*------------인트라넷------------*/
	.gnb-inner .gnb .depth02 > a{display:block;padding:22px 0;border-bottom:3px solid #000;font-size:1.8rem;font-weight:900}
	.gnb-inner .gnb .depth03 > a{display:inline-block;position:relative;padding-left:10px;font-size:1.5rem;line-height:30px;font-weight:600}
	.gnb-inner .gnb .depth03 > a::before{content:"\002D";position:absolute;top:0;left:0}

	.gnb-inner .gnb .depth01 > a:hover,
	.gnb-inner .gnb .depth01.is-active > a{color:#083a8d}
	/* .gnb-inner .gnb .depth01.is-on > a{color:#083a8d} */
	.gnb-inner .gnb .depth01 > a:hover::before,
	.gnb-inner .gnb .depth01.is-active > a::before{content:"";position:absolute;right:0;bottom:0;left:0;height:3px;background-color:#083a8d}
	/* .gnb-inner .gnb .depth01.is-on > a::before{content:"";position:absolute;right:0;bottom:0;left:0;height:3px;background-color:#083a8d} */
	/* .gnb-inner .gnb .depth01.is-active > div{display:block} */

/*	.gnb-inner .gnb .depth01 > a{position:absolute;top:0}
	.gnb-inner .gnb .depth-product > a{left:242px;left:50%;margin-left:-426px}
	.gnb-inner .gnb .depth-rnd > a{left:333px;left:50%;margin-left:-338px}
	.gnb-inner .gnb .depth-company > a{left:455px;left:50%;margin-left:-218px}
	.gnb-inner .gnb .depth-recruit > a{left:578px;left:50%;margin-left:-98px}
	.gnb-inner .gnb .depth-customer > a{left:701px;left:50%;margin-left:22px}
	.gnb-inner .gnb .depth-portfolio > a{left:1002px;left:50%;margin-left:140px}*/
	
	
	.gnb-inner .gnb .depth01 > a{position:absolute;top:0}
	.gnb-inner .gnb .depth-intranet > a{position:absolute;top:33%}/*------------인트라넷------------*/
	.gnb-inner .gnb .depth-shop > a{position:absolute;top:33%}/*------------인트라넷------------*/
	.gnb-inner .gnb .depth-rnd > a{left:333px;left:50%;margin-left:-318px}/*회사소개*/
	.gnb-inner .gnb .depth-company > a{left:578px;left:50%;margin-left:-98px}/*제품소개*/
	.gnb-inner .gnb .depth-recruit > a{left:701px;left:50%;}/*인재채용*/
	.gnb-inner .gnb .depth-customer > a{left:1002px;left:50%;margin-left:245px}/*견적문의*/
	.gnb-inner .gnb .depth-portfolio > a{left:455px;left:50%;margin-left:-212px}/*사업실적*/
	.gnb-inner .gnb .depth-news > a{left:455px;left:50%;margin-left:110px}/*뉴스공지*/
	.gnb-inner .gnb .depth-intranet > a{left:455px;left:50%;margin-left:470px}/*------------인트라넷------------*/
	.gnb-inner .gnb .depth-shop > a{left:455px;left:52.5%;margin-left:352px}/*------------쇼핑몰------------*/

	.gnb-inner .gnb .depth01 > div{position:fixed;top:80px;left:0%;z-index:30;width:100%;background-color:#fff}
	.gnb-inner .gnb .depth01 > div > ul{max-width:1200px;margin:0 auto}

	.gnb-inner .gnb .depth01 > div{display:none}
	.gnb-inner .gnb .depth02 > ul{display:none}
	.gnb-inner .gnb .depth03 > ul{display:none}

	.gnb-inner .gnb > .depth01 > div{padding:5px 40px 52px;box-shadow:0 20px 20px 0 rgba(0, 0, 0, 0.3)}
	.gnb-inner .gnb > .depth01 > div > ul{display:flex;flex-wrap:wrap}
	.gnb-inner .gnb > .depth01 .depth02{width:264px;width:calc(25% - 36px);margin-right:48px;padding-top:26px}
	.gnb-inner .gnb > .depth01 .depth02:nth-child(4n){margin-right:0}
	.gnb-inner .gnb > .depth01 .depth02 > ul{display:block;padding-top:22px}

	.gnb-inner .gnb > .depth01.depth-rnd .depth02{width:200px;width:calc(20% - 40px);margin-right:50px}
	.gnb-inner .gnb > .depth01.depth-rnd .depth02:nth-child(4){margin-right:50px}
	.gnb-inner .gnb > .depth01.depth-rnd .depth02:nth-child(5n){margin-right:0}
	.gnb-inner .gnb > .depth01.depth-rnd .depth02 > div{height:157px}

	/* etc */
	.gnb-inner .gnb .depth02 > a{padding-bottom:12px;border-bottom:none}
	.gnb-inner .gnb>.depth01 .depth02 > ul{padding-top:12px}
	.gnb-inner .gnb .depth01.depth-company .depth02:nth-child(3){margin-right:150px}
	.gnb-inner .gnb .depth01.depth-company .depth02:nth-child(4){margin-right:48px}
	.gnb-inner .gnb .depth01.depth-company .depth02:last-child{margin-right:0}
	.gnb-inner .gnb .depth03 > a{color:#666;font-weight:normal}

	.gnb-inner .gnb .depth02 > a:hover,
	.gnb-inner .gnb .depth03 > a:hover{color:#083a8d}
}

/* l-container */
.l-container{padding-top:60px}
.l-content.main{padding-bottom:0}

@media (min-width: 712px) {
	.l-container{padding-top:70px}
}

@media (min-width: 1200px) {
	.l-container{padding-top:80px}
}

/* l-content */
.l-content{min-height:calc(100vh - 269px)}
.l-content.main{min-height:calc(100vh - 269px)}
.l-content .l-section{width:100%;min-width:280px;--max-width:712px;margin:0 auto;padding:0 20px;}
.l-content .l-section .page-tit{text-align: center;}
.l-content .l-section .page-tit2{text-align: center; margin-top: 10px; color: #0958ce;}
.l-content .l-section.full{max-width:100%;padding:0}

@media (min-width: 712px) {
	.l-content{min-height:calc(100vh - 250px)}
	.l-content .l-section.full > div{max-width:712px}
}

@media (min-width: 1200px) {
	.l-content{min-height:calc(100vh - 260px)}
	.l-container{padding-top:80px}
	.l-content .l-section{max-width:1280px;padding:0 40px;}
	.l-content .l-section.full > div{max-width:1280px}
}

/* l-footer */
.l-footer-wrap{position:relative;background-color:#edeff0}
.l-footer{padding:24px 20px;position: relative;}
.l-footer .footer-util-link{display:flex;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid #d9d9d9}
.l-footer .footer-util-link li{position:relative;padding:3px 0;margin-right:15px;padding-right:16px}
.l-footer .footer-util-link a{display:block;font-size:15px;color:#222}
.l-footer .footer-util-link > li::before{content:"";position:absolute;top:6px;right:0;width:1px;height:17px;background-color:#585959}
.l-footer .footer-util-link > li:nth-child(3)::before{content:none}
/* .l-footer .footer-util-link > li + li{margin-left:15px;padding-left:16px} */
/* .l-footer .footer-util-link > li + li::before{content:"";position:absolute;top:6px;left:0;width:1px;height:17px;background-color:#d2d2d2} */
.l-footer .footer-util-link > li:nth-child(3){width:100%;margin-left:0;padding-left:0}
.l-footer .address-wrap{padding-top:13px;font-size:1.4rem;color:#666}
.l-footer .address-wrap address{display:flex;flex-wrap:wrap}
.l-footer .address-wrap address .group{position:relative;padding:3px 0 2px}
.l-footer .address-wrap address .group:nth-child(1){width:100%}
.l-footer .address-wrap address .group + .group + .group{margin-left:12px;padding-left:12px}
.l-footer .address-wrap address .group + .group + .group::before{content:"";position:absolute;top:8px;left:0;width:1px;height:11px;background-color:#949494}
.l-footer .copyright{padding:3px 0 2px;font-size:1.4rem;color:#666}
.admin_wrap a{border: 1px solid #727272; color: #727272; padding: 5px 10px; margin-top: 10px; display: block; text-align: center; font-size: 12px;}


@media (min-width: 712px) {
	.l-footer{--max-width:712px;margin:0 auto;padding:34px 20px 36px}
	.l-footer .footer-util-link{padding-bottom:15px}
	/* .l-footer .footer-util-link > li + li::before{content:"";position:absolute;top:6px;left:0;width:1px;height:17px;background-color:#d2d2d2} */
	.l-footer .footer-util-link > li:nth-child(3){width:auto}
	.l-footer .address-wrap{padding-top:14px}
	.l-footer .address-wrap address .group:nth-child(1){width:auto}
	.l-footer .address-wrap address .group + .group{margin-left:12px;padding-left:12px}
	.l-footer .address-wrap address .group + .group::before{content:"";position:absolute;top:8px;left:0;width:1px;height:11px;background-color:#949494}
	.admin_wrap a{position: absolute; top: 20px; right: 25px;}
	/* .l-footer .copyright{padding-bottom:7px} */
}

@media (min-width: 1200px) {
	.l-footer{max-width:1280px;margin:0 auto;padding:34px 40px 36px}
	.admin_wrap a{right: 40px;}
}
/*********************************************
* Common Layout [e]
**********************************************/