/* BASIC css start */
@import url('https://fonts.googleapis.com/css?family=Cardo|Rozha+One|Lora:400,700|Black+Han+Sans|Do+Hyeon|Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800|Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');

#header .headerTop {min-width:275px; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee;}
#header .headerTop a {width:25%; height: 20px; line-height: 20px; color:#3e4347; display:inline-block; border-left:1px solid #eee; margin-left:-1px; margin-top:5px; margin-bottom:5px;}


#header.fix { margin-top:-45px; position:fixed; top:0; left:0; right:0 ;background:rgba(242,220,220,0.5);}
#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:200 }
.jbFixed { position: fixed; top: 0px;background:rgba(242,220,220,0.5);z-index:1000;}
#header {width:100%; display:inline-block; background:#fff;z-index:100;}
#header .top-pt-01 {position:fixed; top:0; left:0; right:0; z-index:100;}
#header .top-pt-02 {position:fixed; top:0; left:0; right:0; z-index:100;}

#header #menu {width:45px; background-color:#ab3e41; position:absolute; right:0;}21
#header #menu .fa {top:5px; font-size:2em;}
#header .headerGnb {width:100%;}
#header .headerBottom {padding:0 10px; margin-bottom: 4px;}

#header .headerBottom h1 {font-size:2.333em;}
#header .headerBottom .headerBottomLeft {float:left; width:30%;display:inline-block; margin-top: 7px; height:33px;}
/*#header .headerBottom .headerBottomLeft {float:left; width:33%;display:inline-block; margin-top: 7px; height:38px;}*/
#header .headerBottom .headerBottomLeft .menu {width:25%;}
#header .headerBottom .headerBottomLeft .menu img {vertical-align:middle;}
#header .headerBottom .headerBottomLeft .man {width:75%;}
#header .headerBottom .headerBottomLeft .man img { width:40%;vertical-align:middle;}
/*#header .headerBottom .headerBottomLeft .man img { width:75%;vertical-align:middle;}*/
#header .headerBottom .headerBottomLeft .man span {font-family: 'Noto Sans KR', sans-serif; font-size:13px;}
#header .headerBottom .headerBottomLeft a{display:inline-block; height:100%;}
#header .headerBottom .headerBottomRight {float:right; width:27%; margin-top: 10px; text-align:right;}
#header .headerBottom .headerBottomRight a {margin-left:10px; color:#7d7d7d;}
#header .headerBottom .headerBottomRight a .fa-bookmark-o {color:#f1494d;}
#header .headerBottom .headerBottomRight .cart {position:relative;}
#header .headerBottom .headerBottomRight .cart sup {width:12px; height:12px; background-color:#f1191f; color:#fff; border-radius:6px; position:absolute; top:14px; right:0px; text-align: center; line-height: 12px; font-size:10px; font-family: 'Nanum Gothic', sans-serif;}
#header .search {height:auto; background-color:#fff; display:none; z-index:1000;}
#header .search .searchBox {width:92%; padding:8px;margin:0 auto;position:relative;}
#header .search .searchBox input {width:100%; padding:10px;height:40px;}
#header .search .searchBox input:focus {outline:none;}
#header .search .searchBox .btn_search {position:absolute; top:20px; right:20px; color:#555; font-size:8px;}
#header .search .keyword {width:92%; padding:8px;margin:0 auto;}
#header .search .keyword .k-title {font-family: 'Noto Sans KR', sans-serif; font-weight:500; font-size:13px;margin:8px 3px;}
#header .search .keyword ul {display:inline-block;}
#header .search .keyword ul li{margin:3px; background:#f5f5f5;display:inline-block;border-radius:20px;padding:10px 15px;}
#header .search .keyword ul li a {font-family: 'Noto Sans KR', sans-serif; font-weight:400; font-size:12px; color:#191919; text-align:center;width:100%;height:100%; }
#header .search .search_cs{width:92%; padding:8px; margin:10px auto 15px auto;}
#header .search .search_cs ul {display:inline-block; width:100%;}
#header .search .search_cs ul li {margin:3px; border:1px solid #f1a1a1; display:inline-block; padding:10px 15px; width:38.5%; position:relative;}
#header .search .search_cs ul li a { font-family: 'Noto Sans KR', sans-serif; font-weight:500; font-size:13px; color:#f1a1a1;}
#header .search .search_cs ul li a span{ position:absolute; right:15px; color:#f1a1a1; font-size:16px;}
#header .headerBottom .logo { display:inline-block; text-align:center; vertical-align:top; width:40%; margin-top:10px;}
#header .headerBottom .logo img{width: 63%; text-align:center;}


.top_ct .list_category {overflow:hidden; border-top:1px solid #ddd;}
.top_ct .list_category li {font-size:1.15em; float:left; width:25%; border-bottom:1px solid #ddd; border-right:1px solid #ddd; box-sizing:border-box; -moz-box-sizing:border-box; padding:3px 0;}
.top_ct .list_category li:nth-child(4) {border-right:0px none;}
.top_ct .list_category li:nth-child(8) {border-right:0px none;}
.top_ct .list_category li a {display:block; height:32px; line-height:32px; color:#777; text-align:center; text-overflow: clip; white-space: nowrap; overflow: hidden;}



/* 카테고리 */
aside {position:fixed; width:85%; max-width:100%; height:auto; max-height:100%; top:0; right:0; left:0; bottom:0; overflow:auto; background:#fff; -webkit-overflow-scrolling:touch; z-index:1001; display:none;}
aside .close {position:fixed; top:0; left:85%; width:12%; height:38px; padding-top:4px; background-color: rgba( 255, 255, 255, 0 ); color:#f7dcdc; text-align:center; font-size:1.5em;}
aside .aside_title { padding:30px 0 15px 5%; margin-bottom:10px; background:#f7dcdc;font-size:20px; font-family: 'Noto Sans KR', sans-serif; font-weight:bold; }
aside .aside_title .login-title {font-family: 'Noto Sans KR', sans-serif; font-size:18px; font-weight:600;}
aside .aside_title .s-title {font-size:13px; color:#333; font-weight:300;line-height:27px; font-family: 'Noto Sans KR', sans-serif;}
aside .aside_title .ss-title {font-size:14px; color:#333; font-weight:300;height:20px; font-family: 'Noto Sans KR', sans-serif; margin-left:6px;}
aside .gnb .menu_box {width:20%; height:60px; margin:4px 3px 5px; padding-top:10px;}
aside .gnb ul .line{width:1px; height:45px;border-right:1px dotted #d1d1d1;display:inline-block; }
aside .gnb .menu_box a{width:100%; color:#5c5c5c; font-size:1em; text-align:center; }
aside .gnb .menu_box a span{margin-bottom:5px; }
aside .gnb {width:100%; padding:0px; margin-bottom:20px;}
aside .gnb ul {width:100%; display:inline-block; text-align:center;}
aside .gnb ul li {display:inline-block;}
aside .gnb ul li a{width:100%; height:100%; font-family: 'Noto Sans KR', sans-serif; font-weight:400;}
aside .gnb .login { width:45%; height:34px; border:1px solid #ccc; margin:2px;display:inline-block;}
aside .gnb .login a {color:#5c5c5c; font-size:1em; line-height:34px;}
aside .gnb .join {width:45%; height:34px; border:1px solid #5c5c5c; margin:2px; background:#5c5c5c; display:inline-block;}
aside .gnb .join a {color:#fff; font-size:1em;line-height:34px; }
aside .asideTop {overflow:hidden; text-align:center; width:90%; margin:0 auto; font-family: 'Noto Sans KR', sans-serif; }
aside .asideTop a {float:left; width:33.33%; height:38px; line-height:38px; border-bottom:2px solid #ddd; color:#ababab; font-size:1.25em;}
aside .asideTop a.act {border-bottom:2px solid #222; color:#222;font-weight:500;transition:all .7s linear;}
aside nav {width:90%; margin:7px auto;}
aside nav li { position:relative; }
aside nav li>a {display:block; margin-right:40px;font-family: 'Noto Sans KR', sans-serif; font-size:1.2em; font-weight:400; vertical-align: middle;line-height:60px;}
aside nav li>a img{width:50px; height:50px; border-radius:25px; margin:7px 15px 7px 0;}
aside nav li .fa {position:absolute; top:0; right:0; width:40px; text-align:center; height:60px; line-height:60px; font-size:18px; font-weight:bold; color:#bdbdbd;}
aside nav li > ul {background-color:#f9f9f9; display:none; padding:7px 0; margin-bottom:4px;}
aside nav li > ul > li {}
aside nav li > ul > li:first-child {border-top:0px none;}
aside nav li > ul > li a {padding:0 40px 0 30px; margin:0;line-height:35px; font-size:1.1em; }
aside nav li > ul > li > ul {border-top:0px none; border-top:1px solid #ccc;}
aside nav li > ul > li > ul > li {border-bottom:0px none;}
aside nav li > ul > li > ul > li a {padding:0 0 0 40px; margin:0;}
aside .navCommunity {display:none;}
aside .navCommunity nav ul li a{line-height:40px;}
aside .navMypage {display:none;}
aside .navMypage nav ul li a{line-height:40px;}
aside .aside-banner {widht:100%; text-align:center; margin-bottom:10px;}
aside .aside-banner img{width:90%;}
aside .sns_icon {width:90%;margin:15px auto; text-align:center;}
aside .sns_icon img{ width:30px; height:30px; padding:10px;}
aside .cs_center{width:70%; margin-bottom:50px; text-align:left; font-family: 'Noto Sans KR', sans-serif; display:inline-block; padding-left:20px; }
aside .cs_center .cs_text {font-size:14px; font-weight:300; line-height:18px;}
aside .cs_center .call_number {font-size:24px; font-weight:bold; line-height:24px;}
aside .cs_center .store{font-size:14px;font-weight:400; margin-bottom:5px;line-height:18px; background:#f7f7f7; padding:5px 10px;display:inline-block; }
aside .cs_center .bank{font-size:15px;font-weight:400; margin-bottom:5px;line-height:18px; }


/* //카테고리 */


/* 상단배너 */
  #bg1 {width:100%; height:70px; }

.topx {font-size:20px; color:#666; width:20px; height:20px; right:0; position:absolute; text-align:center; padding:3px 3px 0 0;}

 .top-bn{width:100%; height:72px; margin:0 auto; overflow:hidden; }
 .top-bn>ul{width:100%; height:72px;}



.top-slide{width:100%;height:66px;overflow:hidden;background:url(http://resfor.cafe24.com/wig/site/mobile/mobile_topbanner.jpg) 0 0 no-repeat;background-size:100%;}
    .top-slide>ul{height:68px; height:calc(100% * 6);animation:slide 10s infinite;} /* slide를 8초동안 진행하며 무한반복 함 */
    .top-slide>li{height:68px;font-weight:300; font-family: 'Noto Sans KR', sans-serif; text-align: center; font-size: 15px; letter-spacing:0px; }

    @keyframes slide {
      0% {margin-top:0;} /* 0 ~ 10  : 정지 */
      17% {margin-top:0;} /* 10 ~ 25 : 변이 */
      34% {margin-top:-66px;} /* 25 ~ 35 : 정지 */
      51% {margin-top:-66px;} /* 35 ~ 50 : 변이 */
      68% {margin-top:-132px;}
      85% {margin-top:-132px;}
      100% {margin-top:-200px;}
    }

/*스크롤*/
.right-side {position:fixed; z-index:100;}
.right-side .chat{position:fixed; bottom:140px; right:4%; width:37px; margin-bottom:5px;}
.right-side .chat ul{position:relative; display:none;}
.right-side .chat ul li{position:fixed; right:0; width:37px; margin-bottom:5px;border:1px solid red; bottom:0;}
.right-side .chat ul li:nth-child(1){bottom:180px;}
.right-side .chat ul li:nth-child(2){bottom:220px;}
.right-side .chat ul li:nth-child(3){bottom:260px;}


.right-side .reser a {position:fixed; bottom:166px; right:8px; width:48px; margin-bottom:5px;background:rgba(0,0,0,.5);border-radius:50%;} 
.right-side .repair a {position:fixed; bottom:114px; right:8px; width:48px; margin-bottom:5px;background:rgba(0,0,0,.5);border-radius:50%;} 






.menu-btn{ position: fixed; bottom:158px; right:10px;display:block; width:40px; height:40px;background:rgba(0,0,0,.5); border-radius:50%; text-align:center; line-height:46px; color:#fff; transform:translate(0%,0%); /*box-shadow: 2px 2px 2px #999;*/ transition: box-shadow 0.5s; z-index:100;}
.menu-round-box{ position:fixed; bottom:170px;right:30px;width: 0px; height:0px;border-radius: 50%; background :rgba(0,0,0,0);transform:scale(0,0);transition: transform 0.3s; z-index:100;}
.menu-round-box li{position:absolute;width:40px;height: 40px;border-radius:50%; color:#fff;text-align:center;line-height:48px;transform: scale(1,1);transform ease-in 0.5s; z-index:100;}
.menu-round-box li:nth-child(1){bottom: 36px;right: -20px;}
.menu-round-box li:nth-child(2){bottom: 84px;right: -20px;}
.menu-round-box li:nth-child(3){bottom: 132px;right: -20px; background:darkblue;}
.menu-round-box li.call a{color:#fff; display:block;}
.box1 .open{ animation: menuBtn1 0.5s linear 1; transition: all 0.5s; transform:scale(1,1);}
@keyframes menuBtn1{
  0%{ transform:scale(0,0);}
  100%{transform:scale(1,1);}
}

/*.open ~ .menu-btn{box-shadow:none;}*/



/* BASIC css end */