@import url(./common.css);
@import url(./reset.css);


@font-face {
    font-family: 'NotoSansKR';
    src: url('../font/NotoSansKR-Regular.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 400
}
@font-face {
    font-family: 'NotoSansKR';
    src: url('../font/NotoSansKR-Medium.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 500
}

@font-face {
    font-family: 'NotoSansKR';
    src: url('../font/NotoSansKR-Bold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 700
}
@font-face {
    font-family: 'proxima';
    src: url('../font/proxima-nova-light.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 300
}
@font-face {
    font-family: 'proxima';
    src: url('../font/proxima-nova-regular.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 400
}
@font-face {
    font-family: 'proxima';
    src: url('../font/proxima-nova-semibold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 600
}
@font-face {
    font-family: 'proxima';
    src: url('../font/proxima-nova-Bold.woff2') format('woff2');
     /* Super Modern Browsers */
     font-weight: 700
}

body{
    font-family: 'proxima','NotoSansKR',sans-serif;
    /* font-family: 'proxima',sans-serif; */
}

body.hidden{
    overflow: hidden;
}
header {
  
    
    width: 100%;
    background-color: #fff;
    z-index: 9;
    position: fixed;
}

.icon_area {
    height: 50px;
    position: relative;
    overflow: hidden;
    padding: 0 10px;
}


.icon_area .menu {
    float: left;
   
}

.icon_area .menu a {
    float: left;
    display: block;
    width: 40px;
    height: 50px;
  
}
.icon_area .menu h1{
    float: left;
    display: block;
    width: 40px;
    height: 50px;
   
}

.icon_area .menu a img,
.icon_area .icon a img {

    height: 100%;
    display: block;
}

.icon_area .icon {
    float: right;
    position: relative;

}

.icon_area .icon a {
    float: left;
    width: 40px;
    height: 50px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.icon_area .count{
    position: absolute;
    display: inline-block;
    right: 27px;
    top: 23px;
    font-size: 11px;
}
.icon_area .icon a:first-child {
    background-image: url(../img/btn_gnb_search_50.png);
}
.icon_area .icon a:last-child {
    background-image: url(../img/ico_gnb_bag_50.png);
    margin-right: 0;
}

header nav {
   
    width: 100%;  
    text-align: center;
    background: #fff;
    font-size: 11.375px;
    font-weight: bold;
    font-family: 'proxima',sans-serif;

    
}
header nav{
   width: 100%;
}
header .gnb{
height: 39px;
margin: 0 auto;
}

header .gnb .swiper-wrapper{
padding: 0  16.25px;
box-sizing: border-box;

}

header .gnb .swiper-wrapper .swiper-slide {
    float: left;
    width:auto;
    padding: 0 8.9px;       
}
header .gnb .swiper-wrapper .swiper-slide:first-child {
padding-left: 0;   
}

nav .gnb .swiper-slide a {
    line-height: 48px;  
   
}
.menubar {
    height: 100vh;
    width: 100%;
    background: #fff;
    font-size: 13px;
    font-weight: bold;
    z-index: 999 !important;
    position: absolute;
    left: -100%;
    top: 0;
    overflow-y: scroll;
    transition: 0.5s;
   

}

.menubar.on{
    left:0;
}

.head {
    position: fixed;
    display: block;
    width: 100%;    
    height: 64px;
    padding-left: 24px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 1;

}



.head p {
    float: left;
    display: inline-block;
    margin-right: 26px;
    height: 17.88px;
    padding: 17.88px 0;
    font-size: 14.625px;
    box-sizing: border-box;
    color:#aaa;
   
}
.head p.on {
   border-bottom: 2px solid #000;
   color:#000;
   
}


.head .btn_close {
    float: right;
    width: 64px;
    height: 64px;
}

.head .btn_close img {
    display: block;
    height: 100%;
}
.category.on{
    display:block;
}
.category{
    display:none;
}
.cate1 {
    padding-top: 50px;
    margin: 0 19.5px;
    box-sizing: border-box;
    
}

.cate1 > .sub {}

.cate1 .sub li {
   width: 100%;
    display: block;
    line-height: 37.38px;

}

.cate1 .sub>li>a {
    display: block;
    font-size: 13px;
    font-weight: 600;
    position: relative;
    overflow: hidden;

}
.cate1 .sub>li>a>span {
    display: none;
}
.cate1 .sub>li>a.on>span {
    color: #aaa;
    font-size: 10px;
    display:inline-block;
    margin: -2px 0 0 9.75px;
    border:1px solid #eaeaea;
    padding-right: 6.5px;
    width: 35.75px;
    height: 16.25px;
    box-sizing: border-box;
    vertical-align: middle;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    position: relative;
}
.cate1 .sub>li>a.on>span::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0.4375rem;
    bottom: 0;
    margin: auto;
    width: 0.21875rem;
    height: 0.21875rem;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    display: inline-block;
    transform: rotate(45deg);
}
.cate1 .sub> li.child >a::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 48.75px;
    height: 37.38px;
    background: url(https://static.wconcept.co.kr/mobile/images/common/btn_lnb_category_up_46.png) no-repeat 0 0;
    background-size: cover;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}


.cate1 .sub> li.child >a.on::after {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}
.cate1 .sub> li.child >a.on::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0.4375rem;
    bottom: 0;
    margin: auto;
    width: 0.21875rem;
    height: 0.21875rem;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    display: inline-block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}


.category .cate1 ul li .sub_list {
    background: #f8f8f8;
    padding: 12px 20px;
    overflow: hidden;
    margin-bottom: 12px;
    display: none;
    
   
}
.category .cate1 ul li .sub_list.on {
 display: block;
}

.category .cate1 li .sub_list .detail {
    display: flex;
    flex-wrap: wrap;
}

.category .cate1 li .sub_list .detail li {
    width: 50%;
    font-size: 11.375px;
    color: #777;
    font-weight: normal;
}



.cate1 .detail li a {
    line-height: 1;
    display: block;
    padding: 8px 0;
}


.cate2 {
    margin: 13px 19.5px;
    padding: 13px 0;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
}

.cate2 div {
    height: 37px;
    box-sizing: border-box;
}

.cate2 div a {
    display: block;
    height: 100%;
}

.cate2 .text_wrap {
    overflow: hidden;
    line-height: 3;
    text-align-last: left;
}

.cate2 .text_wrap p {
    float: left;
    position: relative;
}
.cate2 .text_wrap p::after {
    display: block;
    content: "";
    background: #fa5500;
    width: 3.25px;
    height: 3.25px;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    right: -7px;
}

.cate2 .text_wrap span {
    display: inline-block;
    float: left;
    font-size: 10px;
    color: #aaa;
    line-height: 4.2;
    padding-left: 15.44px;
    font-weight: 500;

}

.showroom {
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 24.375px;
    margin: 0 19.5px 13px 19.5px;
   
}

.showroom h2 {
    height: 37.375px;
    line-height: 3;
    text-align-last: left;
    margin-bottom: 8.125px;

}
.showroom ul {
    overflow: hidden;
   

}

.showroom ul li {
    float: left;
    width: calc((100% - 35px)/4);
    height: 73.938px;
    padding: 0 4.063px;
    text-align: center;
}
.showroom ul li:nth-child(n+5) {
    margin-top: 16.25px;
}

.showroom ul li:nth-child(4n) {
    padding: 0;
}

.showroom ul li a {
    height: 100%;
    display: block;
}




.showroom .img_wrap {
    width: 42.25px;
    height: 42.25px !important;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 8.125px;
    


}

.showroom .img_wrap img {
    
    display: block;
    width: 100%;
    height: 100%;

}

.showroom .cont_wrap p {
    font-size: 10px;
    display: inline-block;
    text-align: left;
    height: 23.5px;
    font-weight: 500;
}

.cate3 {
    margin: 0 19.5px;
    font-weight: 600;

}



.cate3 ul li {
    height: 37px;
    line-height: 3;

}

.cate3 ul li a {
    display: block;
    height: 100%;
}

.banner {

    border-bottom: 1px solid #f1f1f1;

    padding-bottom: 50px;

}

.banner .img_wrap {
    margin: 8px 19.5px 0 19.5px;

}

.banner .img_wrap img {
    display: block;
    width: 100%;
}

.sns {
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
}

.sns ul {
    overflow: hidden;
    display: inline-block;
}

.sns ul li {
    float: left;
    display: inline-block;
    font-size: 10px;
    color: #aaa;
    /* width: 25%; */
    height: 52px;
    line-height: 5;
}

.sns ul li a {
    display: inline-block;

}

.sns ul li::before {
    content: "";    
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
    width: 1px;
    height: 10px;
    background: #aaa;

}

.sns ul li:first-child::before {
display: none;


}

.global_site{
    height: 52px;
    text-align: center;
}
.global_site p{
    position: relative;
    display: inline-block;
    padding-right: 17.875px;
    color: #aaa;
    font-size: 10px;
    line-height: 4;
    display: inline-block;
    font-weight: 400;
}
.global_site p::after{
    display: block;
    content: "";
    width: 9.75px;
    height: 9.75px;
    background: url(//static.wconcept.co.kr/mobile/images/common/ico_outlink_g_12.png) no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -4.875px;
    
}






footer{background-color: #f1f1f1; padding-bottom: 50px; position: relative;}
footer .menu{    background: #aaa;text-align: center;}
footer .menu .wrap{display: inline-block; height: 32.5px;}
footer .menu .wrap a{    
   display: inline-block;
    color: #fff;
height: 100%;
line-height: 3;
margin-left: 15px;
font-size: 11.375px;
font-weight: 400;}
footer .menu .wrap a::after
{
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background: #fff;
    vertical-align: middle;
    margin-left:15px;
}
footer .menu .wrap a:last-child::after,
footer .inner .policy a:last-child:after{
   width: 0;
   
   height: 0;

}

footer .inner{
    padding: 16px 10px 27px 10px;
    font-size: 10px;
}

footer .inner p{
    line-height: 1.5;
    color: #777;
    font-size: 10px;
}
footer .inner p a{
  display: inline-block;
  height: 100%;
}

footer .inner .policy{
    margin: 20px 0;
}
footer .inner .policy a{
    display: inline-block;;
    color: #333;
height: 100%;
line-height: 3;
margin-left: 10px;
font-size: 10px;

}

footer .inner .policy a::after{
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #333;
    vertical-align: middle;
    margin-left:10px;
}

.float_menu{
    width: 100%;   
    position: fixed;
    left: 0;
    bottom: 0;
   z-index: 1;
    
  
}
.float_menu .cont_wrap{
width: 65%;
background: white;
height: 40px;
}
.float_menu .cont_wrap .float_bg{
 width: 35%;   
    position: absolute;
    right: 0;
    bottom: 0;
    height: 40px;   
    background-image: url('../img/menubar.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
}
.float_menu .icon{
   z-index: 1; 
   width:80%;   
    overflow: hidden;
    height: 50px;
    position: absolute;
    left: 0;

    
  
}
.float_menu .cont_wrap .icon li{
    text-align: center;
    float: left;
    height: 50px;
    width: 25%;
}
.float_menu .cont_wrap .icon li a {
    display: inline-block;
    height: 100%;
  
    
    
}
.float_menu .cont_wrap .icon li a i{
    display:inline-block;
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.float_menu .cont_wrap .icon li:first-child a i{
  background-image: url(../img/home.png);
}
.float_menu .cont_wrap .icon li:nth-child(2) a i{
  background-image: url(../img/history.png);
}
.float_menu .cont_wrap .icon li:nth-child(3) a i{
  background-image: url(../img/like.png);
}
.float_menu .cont_wrap .icon li:last-child a i{
  background-image: url(../img/my.png);
}
.float_menu .btn_men{
    width: 60px;
    height: 60px;
    position: absolute;
    right:1%;
    bottom: 7%;
}
.float_menu .cont_wrap .btn_men a{
    display: block;
    width: 100%;
    height: 100%;
}
.float_menu .cont_wrap .btn_men a i{
    display: block;
   height: 100%;
    background-image: url('../img/men.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.float_menu .top_btn{
    width: 40px;
    height: 40px;
    position: absolute;
    right: 1.8%;
    bottom: 80px;
   
}
.float_menu .top_btn i{
    display: block;
    height: 100%;
    background-image: url('../img/btn_page_top_white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}