:root {
    --transition-value:all 200ms;
}
.fc-h {color:#254D88;}

/**/
.wrap {
    width:100%;
    max-width:1380px;
    margin:auto;
}
@media (max-width:1400px){
    .wrap {max-width:96%; margin:0 auto;}
}

/**/
header {
    color:#fff;
    height:140px;
    position:absolute;
    top:0; left:0; width:100%;
    transition:var(--transition-value);
	z-index:800;
}
header a {
    color:#fff;
	font-weight:500;
    transition:var(--transition-value);
}
header .head {
    height:100px;
    display:flex;
    justify-content: space-between;
    padding:15px 0;
}
header .head > div {}
header .head .mob_m{display:none;}
header .head .rect-login {display:flex; justify-content: center; align-items: flex-end;}
header .head .rect-login a {margin-right:25px;}
header .head .rect-login a:hover{color:#fff;}
header .head .rect-login a:last-child {margin-right:0;}
header .head .rect-login a.lng{position:relative; font-weight:400; }
header .head .rect-login a.lng img{ position:absolute; top:50%; transform:translate(0,-50%); padding-top:2px;}
header .head .rect-login a.lng img.gl_b{display:none; }
header .head .rect-login a.lng span{margin-left:20px;}
header .head .rect-logo {display:flex; justify-content: center; align-items: center;}
header .head .rect-logo img {width:auto; height:auto;}
header .head .rect-search {display:flex; justify-content: center; align-items: flex-end;}
header .head .rect-search input {
    background:url(/images/content/layout/icon_search.png) no-repeat center right 20px, rgba(0,0,0,0.2);
    border-radius:50px;
    border:1px solid transparent;
    height:40px;
    padding:5px 50px 5px 20px;
    color:#fff;
    transition:var(--transition-value);
}
header .head .rect-search input:focus {
    outline:0;
    border:0;
}
#category-all .wrap .rect-search{display:none;}


/**/
#logo {
    max-width:194px;
    max-height:50px;
    width:194px;
    height:50px;
    background:url(/images/content/layout/logo.png) no-repeat center center;
    background-size:cover;
    transition:background 200ms;
}
@media (max-width:550px){
	header{height:130px; position:absolute;}
	header .head {height:90px; position:fixed; background-color:#fff; max-width:100%; padding:4% 2%; z-index:1000;}
    #logo {background-size:contain; width:160px;}
	header .head .rect-login{display:none;}
	header .head .rect-login a{margin-right:20px;}
	
	#category-all .wrap .rect-search{
	display:block;
	margin-left:20px;
	
	background:url(/images/content/layout/icon_search_black.png) no-repeat center right 20px, white;
    border-radius:50px;
    border:1px solid #ccc;
    height:40px;
    padding:5px 50px 5px 20px;
    color:#fff;
    transition:var(--transition-value);
	}
	#category-all .wrap .rect-search form input{border:none;}
}
@media (max-width:360px){

	header .head .rect-login a{margin-right:15px;}
}

/**/
#tnb {
    background:rgba(0,0,0,0.2);
    height:40px;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    transition:var(--transition-value);
    border-top:1px solid transparent;
    border-bottom:1px solid transparent;
}
#tnb .wrap {
    display:flex;
    justify-content: flex-start;
    align-items: center;
}
#tnb .toggle-menus {
    margin-right:50px;
    color:#fff;
    display:flex;
    transition:var(--transition-value);
}
#tnb .toggle-menus:hover {
    /*color:#ff2424;*/
    font-weight: 800;
}
#tnb .toggle-menus .hamburger {
    margin:0 12px 0 0;
    width:25px;
    font-size:26px;
}
#tnb .menu {
    display:flex;
    justify-content:flex-start;
}
#tnb .menu li {
    margin-right:50px;
}
#tnb .menu li a:hover {
    /*color:#ff2424;*/
    font-weight: 800;
}
#tnb .menu li:last-child {
    margin-right:0;
}
#tnb .menu a {
    transition:var(--transition-value);
    color:#fff;
}
@media (max-width:550px){
    #tnb .menu {
        display:flex;
        justify-content:flex-start;
    }
    #tnb .menu li {
        margin-right:5vw;
    }
}


/**/
#category-all {
    position:absolute;
    z-index:900;
    width:100%;
    top:auto;
    background:#fff;
    display:none;
	border-bottom:1px solid #ccc;
}
#category-all .wrap {
    min-height:100px;
    display:flex;
    justify-content: space-between;
    padding:40px 0 0 0;
}
#category-all .rect-category {
    width:70%;
    display:flex;
    flex-wrap: wrap;
}
#category-all .rect-category .cat {
    color:#000;
    width:33.3333%;
    display:flex;
    margin-bottom:40px;
    padding:0 10px 0 0;
}

#category-all .rect-category .img {
    width:100px;
    height:100px;
    border-radius:100%;
    background:#F4FAFF;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-right:10px;
}
#category-all .rect-category .cat:nth-child(2n) .img {
    background:#FFFBF4;
}
#category-all .rect-category .img img {
    max-width:90%;
    max-height:90%;
}

#category-all .rect-category .cat-2 {}
#category-all .rect-category .cat .cat-2 > a{font-weight:500; font-size:19px; margin-bottom:8px; display:block; color:#272727; }
#category-all .rect-category .cat .cat-2 > a:hover{color:#254D88;}
#category-all .rect-category .cat .cat-2 > a img.ar_cat{display:none;}
#category-all .rect-category .cat-2 ul li a {
    color:#777;
	font-size:16px;
    transition:all 100ms;
}
#category-all .rect-category .cat-2 ul li a:hover {
    color:#254D88;
    font-weight:Bold;
}

#category-all .rect-user {
    width:25%;
}
#category-all .rect-user li {
    margin:0 0 6px 0;
}
#category-all .rect-user li:last-child {
    margin-bottom:0;
}
#category-all .rect-user a {
    color:#000;
}
#category-all .rect-user ul li .m_icon{display:none;}

#category-all .mb_n{display:none;}

/* 전체메뉴 열었을 때의 css */
header.menu-show {
    background:#fff;
    color:#000;
}
header.menu-show #logo {
    background-image:url(/images/content/layout/logo_color.png);
}
header.menu-show a {
    color:#000;
}
header.menu-show .head .rect-login a.lng img{position:absolute; top:50%; transform:translate(0,-50%);}
header.menu-show .head .rect-login a.lng img.gl_b{display:block; }
header.menu-show .head .rect-login a.lng img.gl_w{display:none; }

header.menu-show .head .rect-search input {
    background:url(/images/content/layout/icon_search_black.png) no-repeat center right 20px, transparent;
    border:1px solid #ccc; color:#000;
}
header.menu-show #tnb .toggle-menus {
    color:#000;
}
header.menu-show #tnb .toggle-menus:hover {
    /*color:#ff2424;*/
    font-weight: 800;
}
header.menu-show #tnb {
    background:#fff;
    border-top-color:#ccc;
    border-bottom-color:#ccc;
}
header.menu-show #tnb .menu a {
    color:#000;
}
header.menu-show #tnb .menu a:hover {
    /*color:#ff2424;*/
    font-weight: 800;
}
header.menu-show #tnb .menu a
.cat-2 p{font-size:20px; font-weight:500; margin-bottom:12px;}
.cat-2 ul li{margin-bottom:7px;}

@media (max-width:550px){

}


/*sub-header*/
.sub-layout header {background:rgba(255,255,255,1); color:#000; position:fixed;}
.sub-layout header #logo {
    background-image:url(/images/content/layout/logo_color.png);
}
.sub-layout header a {
    color:#272727;
	font-weight:500;
}

.sub-layout header .rect-login a:hover{color:#272727;}
.sub-layout header .head .rect-login a.lng img{ position:absolute; top:50%; transform:translate(0,-50%);}
.sub-layout header .head .rect-login a.lng img.gl_b{display:block; }
.sub-layout header .head .rect-login a.lng img.gl_w{display:none; }
.sub-layout header .head .rect-search input {
   background:url(/images/content/layout/icon_search_black.png) no-repeat center right 20px, white; border:1px solid #ccc; color:#000;
}

.sub-layout header #tnb .toggle-menus {
    color:#272727;
}

.sub-layout header #tnb .toggle-menus:hover {
    /*color:#ff2424;*/
    font-weight: 800;
}
.sub-layout header #tnb {
    background:#fff;
    border-top-color:#ccc;
    border-bottom-color:#ccc;
}
.sub-layout header #tnb .menu a {
    color:#272727;
}
.sub-layout header #tnb .menu a:hover {
    /*color:#ff2424;*/
    font-weight: 800;
}
.cat-2 p{font-size:20px; font-weight:500; margin-bottom:12px;}
.cat-2 ul li{margin-bottom:4px;}
.cat-2 ul li a{font-weight:400;}
@media (max-width:1024px){
    #category-all .rect-category{width:100%;}
	#category-all .rect-category .cat{word-break:keep-all;}
}
@media (max-width:820px){
	header .head .rect-search{width:200px;}
	header .head .rect-search input{width:200px; float:right;}
	#category-all{padding-bottom:50px;}
	#category-all .wrap{flex-wrap:wrap;}
	#category-all .rect-user{width:100%;}
	#category-all .rect-user ul{display:flex; justify-content:space-between;}
	#category-all .rect-user ul.fs-20{font-size:19px;}
	
}
@media (max-width:550px){
	header {background:rgba(255,255,255,1); color:#000;}
	header.menu-show .head{position:absolute;}
	header #logo {background-image:url(/images/content/layout/logo_color.png);}
	header a {color:#272727; font-weight:500;}
	header .head .mob_m{display:flex; align-items:end;}
	header .head .mob_m .hamburger{width:40px; font-size:40px;}
	header .head .rect-login{display:none;}
	header .head .rect-search{width:40px;}
	header .head .rect-search form input, .sub-layout header .head .rect-search input{width:40px; background:url(/images/content/layout/icon_search_black.png) no-repeat center center, transparent; border:1px solid #ccc; padding:5px; color:#000; transition: all .5s ease-in-out;}
	header .head .rect-search form input:focus{width:300px; background:url(/images/content/layout/icon_search_black.png) no-repeat center right 20px, white; border:1px solid #ccc; padding:5px 20px; height:50px; transition: all 0.5s ease-in-out;}
	
	#tnb .wrap .toggle-menus{display:none;}
	#tnb {background:#fff; border-top-color:#ccc; border-bottom-color:#ccc; margin-top:90px;}
	#tnb .wrap .menu{width:100%; justify-content:space-evenly;}
	header #tnb .menu a{color:#000;}
	.sub-layout header #tnb{margin-top:0px; position:absolute; top:90px;}
	
	.sub-layout header {position:unset;}
	header.menu-show .head .rect-logo, header.menu-show .head .rect-search{display:none;}
	header.menu-show .head .rect-login{display:block; position:absolute; top:40px; left:20px; font-size:17px; z-index:1000;}
	header.menu-show .head .rect-login a.lng img{left:1%;}
	header.menu-show a .xi-close{position:absolute; top:25px; right:0; z-index:1000;}
	header.menu-show a .xi-close:before{font-size:25px;}
	header.menu-show #category-all{top:0; position:absolute;}	
	header.menu-show #category-all .wrap{padding-top:90px;}
	header.menu-show #category-all .rect-category{ display:block;  padding:20px 20px 0 20px; border-top:1px solid #ccc;}
	header.menu-show #category-all .rect-category .img{display:none;}
	header.menu-show #category-all .rect-category .cat{width:100%; border-bottom:1px solid #efefef; margin-bottom:15px; padding-bottom:10px;}
	#category-all .rect-category .cat .cat-2{width:100%;}
	header.menu-show #category-all .rect-category .cat:last-child{margin-bottom:0; border-bottom:0;}
	header.menu-show #category-all .rect-category .cat .cat-2 ul{display:none;}
	#category-all .rect-category .cat .cat-2 > a{font-size:18px; display:flex; align-items:center; justify-content:space-between;}
	#category-all .rect-category .cat .cat-2 > a img.ar_cat{display:block;}
	#category-all .rect-category .cat-2 ul{background-color:#f7f7f7; padding:15px;}
	#category-all .rect-category .cat-2 ul li{padding:2px 0;}
	#category-all .rect-category .cat-2 ul li a{font-size:15px;}
	
	#category-all .wrap .rect-user{display:none;}
	#category-all .mb_n{display:block;}
	#category-all .rect-user {padding:0 30px; margin-top:30px;}
	#category-all .rect-user ul{ display:block;}
	#category-all .rect-user ul.fs-20{font-size:18px;}
	#category-all .rect-user li{margin:15px 0;}
	#category-all .rect-user ul li a{display:flex; align-items:center;}
	#category-all .rect-user ul li a .m_icon{display:block; margin-right:10px;}
	
	#category-all .rect-mn{ background-color:#F7F7F7; padding:30px 20px; border:1px solid #ccc; }
	#category-all .rect-mn ul{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-evenly;}
	#category-all .rect-mn ul li{width:47%; padding:10px; border:1px solid #ccc; border-radius:5px; background-color:#fff;text-align:center; margin-bottom:10px;}
	#category-all .rect-mn ul li a{display:flex; align-items:center; font-size:18px; justify-content:center;}
	#category-all .rect-mn ul li a .m_icon{margin-right:5px;}
}

/**/
#svb{margin-top:160px;}
#svb .wrap .location{vertical-align:middle;}
#svb .wrap .location span{margin-right:15px;color:#272727;}
#svb .wrap .location span:first-child a {color:#254D88; display:flex; align-items:center;}
#svb .wrap .location span:first-child a img{margin-right:3px;}
#svb .wrap div.fs-45{text-align:center; margin-top:60px; margin-bottom:100px;color:#272727;}
@media (max-width:550px){
	#svb{margin-top:20px;}
}

/**/
footer {
    background:#292929;
    padding:50px 0 91px 0;
    margin:100px 0 0 0;
    color:#BABABA;
	word-break:keep-all;
}
footer .wrap:first-child {
    color:#E3E3E3;
    background:url(/images/content/layout/logo_footer.png) no-repeat top right;
    padding-bottom:40px;
    border-bottom:1px solid #666;
}
footer .wrap span {
    color:#BABABA;
    margin-left:30px;
    margin-right:4px;
}
footer .wrap span:first-child {
    margin-left:0;
}

footer .wrap p a{color:#BABABA; display:inline-block;}
footer .wrap .inipay{float:right;margin-top:-30px;}
footer .wrap ul{margin-top:10px;}
footer .wrap ul li{display:inline-block; margin-right:30px; }
footer .wrap ul li:last-child{margin-right:0;}
footer .wrap ul li a{color:#BABABA;}
footer .wrap ul li:last-child a{color:#fff;}
@media (max-width:820px){
	footer .wrap p{max-width:70%;}
}

@media (max-width:550px){
	footer .wrap:first-child {background:url(/images/content/layout/logo_footer.png) no-repeat bottom 30px center; padding-bottom:70px;}
	footer .wrap p{text-align:center;max-width:unset;}
	footer .wrap p:last-child{margin-bottom:40px;}
	footer .wrap ul{text-align:center;}
	footer .wrap .inipay{float:none; margin:20px auto;}
	
}

/**/
#quick-menu {
    padding:5px 0;
    position:fixed;
    width:60px;
    height:auto;
    right:20px;
    top:30vh;
    z-index:800;
    background:#fff;
    border-radius:50px;
    border:1px solid #F2F2F2;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
#quick-menu ul {}
#quick-menu ul li {
    margin:0;
}
#quick-menu ul li.wh_m{display:none;}
#quick-menu ul li a {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    width:60px;
    height:50px;
}
#quick-menu ul li a .rect {
    box-sizing: border-box;
    height:50px;
    background:transparent;
    display:flex;
    flex-wrap:nowrap;
    margin:0 5px;
    border-radius:50px;
    padding:5px;
    transition:background-color 100ms;
}
#quick-menu ul li a .name {
    opacity:0;
    display:flex;
    overflow:hidden;
    align-items: center;
    justify-content: center;
    position:relative;
    white-space: nowrap;
    border-radius:50px;
    transition:all 100ms;
    color:transparent;
    width:auto;
    font-size:0;
    padding:0;

}

#quick-menu ul li a .icon {
    width:40px;
    height:40px;
    border-radius:100%;
    background:#F4FAFF;
    display:flex;
    align-items: center;
    justify-content: center;
}
#quick-menu ul li.top {
    font-size:13px;
}
#quick-menu ul li.top a .icon {
    background:#254D88;
    color:#fff;
}
 @media (hover: hover) {
	#quick-menu ul li a:hover {}
	#quick-menu ul li a:hover .rect {
		background:#254D88;
	}
	#quick-menu ul li a:hover .name {
		opacity:1;
		padding:0 10px;
		color:#fff;
		font-size:15px;
	}
	#quick-menu ul li.top a:hover .rect {
		background:transparent;
	}
}
@media (max-width:820px){
	#quick-menu{bottom:0; top:unset; right:0; height:60px; width:100%; border-radius:0; border-top:1px solid #ccc;}
	#quick-menu ul {display:flex; justify-content:space-between;}
	#quick-menu ul li.wh_m{display:block;}
	#quick-menu ul li.top {display:none;}
	
	#quick-menu ul li a .icon{ background:none;}
	
}
@media (max-width:550px){

}