em {font-weight: inherit;font-size: inherit;color:inherit;}

header {z-index: 1000;position: fixed;left: 0;top: 0;height: 6rem;width: 100%;padding: 0 2rem;background-color: #4271e8;border-bottom: 1px solid rgba(255,255,255,.3);}
header .logo_wrap {display: flex;justify-content: space-between;align-items: center;height: 100%;}
header #left a img {height: 3rem;display: block;}
header #right {display: flex;justify-content: flex-end;align-items: center;width:50%;}
header #right form {display: flex;justify-content: end;align-items: center; position: relative;}
/* header #right form label {display: none;} */
header #right form label img {height: 4rem;padding: 1rem;}

/* 검색기능죽일시 */
/* header #right a.search img {height: 4rem;padding: 1rem;} */


header #right form input {transition: cubic-bezier(0.19, 1, 0.22, 1) 1.5s;}
header #right form input[type="text"] {padding: .5rem 3.5rem .5rem .5rem;font-size: 1.6rem;width: 0;display: none;}
header #right form input[type="submit"] {background: url('../sub/search.png') no-repeat 0 center / 60%;width: 3rem;height: 3rem;text-indent: -9999px;right: 0;top: 50%;position: absolute;transform: translateY(-50%);border: none;display: none;}
header #right form.on input[type="text"] {display: block;width: 100%;}
header #right form.on input[type="submit"] {display: block;}
header #right form.on label {display: none;}




header #right button img {height: 2.5rem;margin-left: 1rem;}

.category {background-color: #4271e8;position: fixed; left: 0;top: 6rem;height: 4rem;width: 100%;z-index: 100;display: flex;justify-content: center;align-items: center;}
.category img {position: absolute;left: 2rem;top:calc(50% - 1rem);height: 2rem;display: block;}
.category h1 {color: #fff;font-size: 2rem;}



/* ham */
.sub_wrap {position: fixed;left: 100%;top: 0;height: 100%;width: 70%;z-index: 120;transition: .8s;}
.sub_wrap.on {display: block;left: 0;transition: .8s;}
.sub_wrap.on {left: 30%;}
.sub_wrap .sub_content {background-color: #fff;position: absolute;z-index: 120;height: 100%;}
.sub_wrap .sub_content .sub_head {position: relative;height: 6rem;background-color: #4271e8;display: flex;justify-content: flex-end;align-items: center;border-bottom: 1px solid #ddd;}





#search_w {height: 4rem; padding: 1rem;}
#menu {height: 3rem;}
.sub_wrap #menu {margin-right: 2rem;height: 3rem;padding: .5rem;}
/* .sub_wrap .sub_content .sub_head img {height: 4rem;padding: 1rem;}
.sub_wrap .sub_content .sub_head img {height: 4rem;padding: 1rem;} */







.sub_wrap .sub_content .sub_head .sub_logo {position: absolute;left:1rem;top: 50%;transform: translateY(-50%);height: 3rem;}
.sub_wrap .sub_content .sub_head a {}
.sub_wrap .sub_content h1 {color: #fff;background-color: #4271e8;width: 100%;padding: 1rem 2rem;font-size: 2rem;font-weight: bold;}
.sub_wrap .sub_content ul {overflow-y: scroll;display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;padding: 2rem 3rem;}
.sub_wrap .sub_content ul li {width: 45%;margin-bottom: 1.5rem;}
.sub_wrap .sub_content ul li a {text-align: center;font-size: 1.8rem;width: 100%;display: block;color: #666;}
.sub_wrap .sub_content ul li a img {display: block;width:90%;margin: 0 auto;margin-bottom: .8rem;}
.bg {background-color: rgba(0, 0, 0, .3);position: fixed;left: 0;top: 0;height: 100%;min-width: 100vh;z-index: 110;display: none;}
.bg.on {display: block;}

@media(max-width:280px){.sub_wrap .sub_content ul li a {font-size: 1.6rem;}}
@media(max-width:330px){
    .sub_wrap .sub_content .sub_head .sub_logo {opacity: 0;}

}
/* @media(max-width:540px){.sub_wrap .sub_content ul li a img {width: 70%;}} */
@media(min-width:768px){.sub_wrap .sub_content ul li a img {width: 60%;}}