@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/**/
body {overflow-x:hidden;}
.wrap {max-width:1200px; box-sizing:border-box;}
.fc-999 {color:#999 !important;}
.fc-blue {color:#156ee4 !important;}
.openSans {font-family: 'Open Sans', Noto Sans KR, sans-serif;}
.orbitron {font-family: 'Orbitron', Noto Sans KR, sans-serif;}

@media (max-width:1260px){
    .wrap {max-width:96%;}
}

/**/
#top {}
#top .wrap {display:flex; box-sizing:border-box; justify-content:space-between;}
#top .wrap > div {padding:24px 0 22px 0;}
#top .logo {width:200px;}
#top .logo img {display:block; position:relative; top:5px; width:112px; height:50px;}
#top .search-form {width:100%; padding-left:24px; padding-right:24px;}
#top .search-form .input-box {
    display:inline-block; padding:3px 5px 3px 20px; border:1px solid #eaeaea; background:#f2f3f7; border-radius:30px;
    max-width:100%;
}
#top .search-form .input-box .flex {display:flex;}
#top .search-form input[type=text] {
    border:0; background:#f2f3f7; margin-right:10px; width:300px; height:40px;
}
#top .search-form input[type=image] {border:0; background:none;}
#top .search-form input:focus {outline:0;}
#top .icons {width:300px; text-align:right; display:flex; justify-content:flex-end;}
#top .icons > div {position:relative; margin-left:24px;}
#top .icons a {position:relative;}
#top .icons a img {display:inline-block;}
#top .icons a:first-letter {margin-left:0;}
#top .icons .cart-num {
    position:absolute; top:0; right:0; background:red; color:#fff; font-weight:bold;
    width:24px; height:24px; text-align:center; border-radius:100%;
    display:flex; justify-content:space-around; align-items:center;
}
#top .icons .cart-num.hidden {display:none;}

@media (max-width:1024px){
    #top > .wrap {justify-content: flex-start;}
    #top .search-form {max-width:390px;}
    #top .icons {display:none;}
}
@media (max-width:768px){
    #top {}
    #top .wrap {flex-wrap: wrap;}
    #top .wrap > div {padding:10px 0;}
    #top .logo {width:100%; text-align:center; padding:0;}
    #top .logo img {display:inline-block;}
    #top .icons {display:none;}
    #top .search-form {max-width:100%; text-align:center;}
}
@media(max-width:425px){
    #top .search-form input[type=text] {width:80%;}
}

/**/
/*#tnb .category a.hamburger {height:17px; width:30px; margin:0 10px 0 0;}*/
.hamburger {height:17px; width:30px; margin:0 10px 0 0;}
.hamburger span {
    display:block; background:#fff; height:3px; margin-bottom:4px; border-radius:0;
    transition:all 400ms; position:relative; left:0;
}
/*#tnb .category a.active .hamburger span:nth-child(1) {transform:rotate(45deg) translateY(9px); left:5px;}*/
.active .hamburger span:nth-child(1) {transform:rotate(45deg) translateY(9px); left:5px;}
.active .hamburger span:nth-child(2) {opacity:0;}
.active .hamburger span:nth-child(3) {transform:rotate(-45deg) translateY(-10px); left:5px;}

/**/
#tnb {}
#tnb .wrap {height:55px;}
#tnb .category {width:230px; text-align:left; background:#156ee4; color:#fff; height:100%; float:left;}
#tnb .category a {display:block; width:100%; height:100%; padding:0 25px 0 25px; color:#fff;}
#tnb .category a .flex {display:flex; align-items:center; height:100%;}
#tnb .menu {
    width:auto; padding:0 25px; float:left; display:flex; height:100%; align-items:center;
    max-width:100%; overflow:auto;
}
#tnb .menu ul.m1 {display:flex;}
#tnb .menu li.m1 {margin:0 10px;}
#tnb .menu a.m1 {}
#tnb .menu ul.m2 {position:absolute; z-index:900; background:#fff; padding:10px 20px; border:1px solid #ccc;}
#tnb .menu ul.m1 a.active {color:#156ee4;}
#tnb .login {min-width:200px; text-align:right; float:right; display:flex; align-items:center; height:100%; justify-content:flex-end; position:relative;}
#tnb .login::before{position:absolute; content:''; display:block; width:100%; height:1px; background:rgba(255,255,255,0.4); margin:auto;
    top:0; right:auto; bottom:0; left:0;}
#tnb .login a {padding:10px; position:relative; font-size:15px; color:#777;}
#tnb .login a::before {
    content:''; display:block; position:absolute; width:1px; height:10px; background:rgba(255,255,255,0.4); margin:auto;
    top:0; right:auto; bottom:0; left:0;
}
#tnb .login a:first-child {padding-left:0;}
#tnb .login a:first-child::before {display:none;}
#tnb .login a:last-child {padding-right:0;}
#tnb.active-mobile {display:block;}
#tnb .cts02{display:none; position:absolute; width:100%; height:auto; margin:auto; top:110px; right:auto; bottom:auto; left:0; z-index:900;}
/*#tnb-cart{display:none; position:absolute; margin:auto; top:110px; right:auto; bottom:auto; left:22px; z-index:900;}*/
/*#tnb-order{display:none; position:absolute; margin:auto; top:110px; right:auto; bottom:auto; left:160px; z-index:900;}*/
/*#tnb-cs{display:none; position:absolute; margin:auto; top:110px; right:auto; bottom:auto; left:300px; z-index:900;}*/

#tnb-home{display:none; position:absolute; margin:auto; top:34px; right:75px; bottom:auto; left:auto; z-index:900;}
#tnb-toggle {
    display:none; position:absolute; margin:auto; top:38px; right:0; bottom:auto; left:auto; z-index:900;
    height:17px;
}
#tnb-toggle span {background:#000;}
#tnb-cart span,
#tnb-cs span,
#tnb-order span{font-size:0.9em; color:#fff; margin-left:5px;}

@media(max-width:1024px){
	#tnb .cts02{display:flex; align-items:center;}
	#tnb .cts02 a{flex:0 33.3%; display:flex; align-items:center; justify-content:center;}
	#tnb-home,
    #tnb-toggle {display:flex;}
    #tnb {
        display:none;
        position:absolute; top:0; left:0; background:#fff; width:100%; height:auto;
        padding:0; z-index:800;
    }
    #tnb:before {
        content:''; display:block; z-index:0; position:fixed; top:0; left:0; width:100%; height:100%;
        background:rgba(0,0,0,0.7);
    }
    #tnb .wrap {height:auto; z-index:1; padding:0 0 30px 0; background:#f4f4f4; max-width:100%;}
    #tnb .menu,
    #tnb .login {float:initial; justify-content: center; display:block; background: #156ee4; padding:27px 0px 110px 22px;}
    #tnb .category{display:none;}
	#tnb .login a {color:#000; font-size:0.9em;}
    #tnb .login a:nth-child(1) {}
    #tnb .login a:nth-child(2) {}
    #tnb .login a:nth-child(3) {}
	#tnb .login a.l {float:left; color:#fff;}
    #tnb .login a.r {float:left; color:#fff;}
	#tnb .login .mobile-hide {display:none;}
    #tnb .menu { padding:15px 0; background:#fff; position:absolute; content:''; width:95%; height:116px; top:125px; right:0; left:0; bottom:0; border-radius:10px; border-top:unset; margin:30px auto; z-index:9999;}
    #tnb .menu ul.m1 {flex-wrap: wrap; width:100%; text-align:left; font-size:16px;}
	#tnb .menu li.m1:nth-child(5){display:none;}
    #tnb .menu li.m1 {width:50%; margin:0; padding:10px 30px; } 
	#category{margin-top:120px;}
	.hamburger{width:25px;}
	#tnb-toggle.active .hamburger span:nth-child(1),
	#tnb-toggle.active .hamburger span:nth-child(3){background:#fff;}
}
@media(max-width:768px){

	#tnb-home{right:70px;}

}

@media(max-width:425px){
}

/**/
#category {position:absolute; top:55px; width:auto; display:none; background:#fff; user-select:none; z-index:900;}
#category > .rect {box-shadow:0 0 13px rgba(0,0,0,0.2); display:flex;}
#category ul.c1 {width:230px;}
#category li.c1 {}
#category a,
#category span.c1 {
    display:block; width:100%; height:100%; padding:16px 35px; font-size:16px; transition:all 300ms;
    cursor:pointer; box-sizing:border-box; border-bottom:1px solid #eaeaea; border-right:1px solid #eaeaea;
    position:relative;
}
#category li.c1:first-child a.c1,
#category li.c1:first-child span.c1 {}
#category li.c1:last-child a.c1,
#category li.c1:last-child span.c1 {border-bottom:0;}
#category li.active > a,
#category li > a.c1:hover,
#category span.c1:hover,
#category li > a.c1.active,
#category span.c1.active {background:#f2f3f7; color:#156ee4; border-right:1px solid #f2f3f7; font-weight:bold;}
#category div.c2 {display:none;}
#category .sub-cat {}
#category a > span.fa.fa-angle-right {
    position:absolute; margin:auto; top:0; right:20px; bottom:0; left:auto; height:15px; padding:0;
}
#category div.c2,
#category div.c3 {display:none;}

#category .category_list_2 {background:#f2f3f7; padding:10px 0; display:none;}
#category .category_list_2 .rect {width:200px;}
#category .category_list_2 ul {}
#category .category_list_2 li {}
#category .category_list_2 li span,
#category .category_list_2 li a {display:block; padding:6px 20px; cursor:pointer; transition:all 400ms;}
#category .category_list_2 li span.active,
#category .category_list_2 li a.active,
#category .category_list_2 li span:hover,
#category .category_list_2 li a:hover {background:#eaeaea; color:#156ee4;}
#category .category_list_2 .c3 {display:none;}

#category .category_list_3 {padding:10px 0; min-width:150px; display:none;}
#category .category_list_3 ul {}
#category .category_list_3 li {}
#category .category_list_3 li:hover a.c3 {background:#eaeaea; color:#156ee4;}
#category .category_list_3 a {display:block; padding:6px 20px;}

#category .company {
    display:none; background:#fff; width:100%; max-width:770px; box-sizing:border-box;
}
#category .company > .rect {display:flex; flex-direction:column; padding:40px; box-shadow:-6px 0 6px -2px rgba(0,0,0,0.1);}
#category .company .head .name {line-height:25px; margin-bottom:3px;}
#category .company .head .name-s {color:#156ee4;}
#category .company .body {
    margin-top:20px; border-top:2px solid #999; border-bottom:1px solid #ccc;
    background:#f8f8f8; padding:28px 50px 0 50px; height:auto; box-sizing:border-box;
}
#category .company .body .bg {}
#category .company .body .bg img {width:100%; height:auto;}
#category .company .body .line {padding:16px 0; border-bottom:1px solid #dfdfdf;}
#category .company .body .line:last-child {border-bottom:0;}
#category .company .body .line ul {display:flex;}
#category .company .body .line ul li {margin-right:20px;}
#category .company .body .line ul li a {color:#777; font-weight:300;}
#category .company .body .blue_arrow {position:relative; margin-bottom:8px;}
#category .company .body .blue_arrow::after {
    content:''; display:block; position:absolute; margin:auto; top:0; right:20px; bottom:0; left:auto;
    width:25px; height:25px; border-radius:100%; box-sizing:border-box;
    background:url(/images/content/layout/icon_blue_arrow.png) no-repeat center center #fff;
}

@media(max-width:1024px){
    .category {display:none;}
    #category {position:relative; top:0; display:block; border-bottom:1px solid #ccc;}
    #category > .rect {width:100%; box-shadow: none;}
    #category > .rect > div {width:100%;}
    #category ul.c1 {width:100%;}
    #category a,
    #category span.c1 {border-right:0;}
    #category .category_list_2 {display:none;}
    #category .category_list_3 {display:none;}

    #category a.c1 {padding:14px 20px;}
    #category div.c2 {background:rgba(238,238,238,0.5);}
    #category a.c2 {font-size:14px; padding-left:35px;}
    #category a.c3 {font-size:14px; padding-left:50px;}
	#category li.active > a,
	#category li > a.c1:hover,
	#category span.c1:hover,
	#category li > a.c1.active,
	#category span.c1.active {background:#fff; }
}

@media(max-width:768px){

}

/**/
#btn_top {
    border:1px solid #156ee4; position:fixed; width:50px; height:50px; bottom:5%; right:5%;
    background:url(/images/content/layout/btn_top.png) no-repeat center center, rgba(255,255,255,0.5);
    z-index:900;
}

/**/
footer {background:#fff; text-align:center;}
footer .logo img {width:112px; height:50px;}
footer .foot_head {padding:20px 0; background: #f5f5f5;}
footer .foot_head a {color: #aaa; font-size:16px; margin:0 10px;}
footer .foot_body {color: #aaa; padding:40px 0;}
footer .copy{color: #aaa; font-size: 14px;}

@media(max-width:768px){
    footer .foot_body span {display:block; margin:0; padding:0; width:100%; font-size:0.9em;}

}

/* MEMBER */
.container-section {margin-top:50px; margin-bottom:50px;}

@media (max-width:679px){
    .container-section {margin-top:40px; margin-bottom:50px;}

}

/**/
.loading {position:relative; width:100%; height:100%;}
.loading::after {
    content:''; border:6px solid rgba(0,0,0,0.1); border-top-color:rgba(0,0,0,0.6);
    display:block; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0;
    width:50px; height:50px; border-radius:100%; animation:loading infinite 1.5s;
}
@keyframes loading {
    100% {transform:rotate(360deg);}
}