@charset "utf-8";

/* 
 * content CSS Document
 *
 */


/* 페이지 준비 중 */
.area-prepare {max-width: 1230rem; margin: 0 auto; padding: 0 80rem;}
.area-prepare img {width: 100%;}
.area-prepare .mob {display: none;}

@media screen and (max-width:768px) {
    .area-prepare .mob {display: block;}
    .area-prepare .pc {display: none;}
}


/* 공통부분 */
#header .head-box {padding: 0 30rem;} 
#content {padding: 100rem 0 150rem; background: #fafafa url(/images/content/sub_bg.jpg) repeat; }
.area-subVisual {position: relative;}
.area-subVisual > i {display: block; width: 100%; height: 493rem; background: #f2f4ef;}
.area-subVisual .page-tit {position: absolute; top: 40%; left: 50%; width: calc(100% - 40rem); transform: translateX(-50%); text-align: center;}
.area-subVisual .page-tit span {position: relative; font-size: 20rem; font-weight: 700; color: #15360e; }
.area-subVisual .page-tit span::before {content: ''; position: absolute; top: 50%; left: -32rem; transform: translateY(-50%); background: url('../images/content/ic-point.png') no-repeat; width: 24rem; height: 16rem;}
.area-subVisual .page-tit h2 {padding-top:15rem; font-size: 48rem; font-weight: 700; font-family: var(--font-eng); color: #15360e; animation: visual-ani2 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.sub-title {margin-bottom: 65rem; text-align: center;}
.sub-title span {display: block; margin-bottom:25rem; font-size: 17rem; font-weight:600; color: #468a59; letter-spacing: 0.5rem;}
.sub-title h2 {font-size:45rem; font-weight: 700; font-family: var(--font-eng);}
.sub-title h3 {font-size:45rem; font-weight: 700;}

@keyframes visual-ani2 {
	from {opacity: 0; -webkit-transform: translateY(50rem); transform: translateY(50rem);}
	to {opacity: 1.0; -webkit-transform: translateY(0); transform: translateY(0);}
}

@media screen and (max-width:1080px) {
    #content {padding: 80rem 0;}
}
@media screen and (max-width:620px) {
    #header .head-box {padding: 0 20rem;}
}

/* lnb */
.lnb {position: absolute; bottom: 0; right: 0; width: 94.7%; height: 100rem; background: #fff;}
.lnb .home {position: absolute; top: 0; left: 0; width: 100rem; height: 100rem; background: #15360e;}
.lnb .home::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../images/content/ic-home.svg') no-repeat; width: 22rem; height: 24rem;} 
.lnb .home a {display: block; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 0; text-indent: 100%; white-space: nowrap;}
.lnb .dept {display: flex; align-items: center; justify-content: center; height: 100%;}
.lnb .dept > li {position: relative; width: 262rem; height: 100%;}
.lnb .dept > li:nth-child(2) {margin: 0 0 0 90rem;}
.lnb .dept > li:nth-child(2)::before {content: ''; position: absolute; top: 50%; left: -40rem; transform: translateY(-50%); width: 1rem; height: 21rem; background: #dfdfdf;}
.lnb .dept > li a {display: flex; align-items: center; height: 100%; color: #333; font-size: 18rem;}
.lnb .dept > li i {display: none;}
.lnb .dept_tit {height: 100%;}
.lnb .dept_tit a::after {content:''; display:block; position:absolute; top: 50%; right:0; width: 8rem; height: 5rem; background:url('/images/content/ic-inb__arrow.svg') no-repeat;}
.lnb .dept_tit a.active::after {transform: rotate(180deg); margin-top: -3rem;}
.lnb .dept_list {display: none; position: absolute; top: 80rem; left: 50%; background: #fff; box-shadow: rgba(100, 100, 111, 0.2) 0rem 7rem 29rem 0rem; width: 100%; transform: translateX(-50%); z-index: 5;}
.lnb .dept_list > li > .box {display: none;}
.lnb .dept .dept_list li a {padding: 18rem 20rem; font-size: 16rem; color: #aaa;}
.lnb .dept .dept_list li a:hover,
.lnb .dept .dept_list li a.on {background: #f2f4ef; color: #15360e;}

@media(max-width:1300px) {
    .lnb {height: 90rem;}
    .lnb .home {width: 90rem; height: 90rem;}
}
@media(max-width:768px) {
    .sub-title {margin-bottom: 40rem;}
    .sub-title h2 {font-size: 30rem;}
    .sub-title h3 {font-size: 35rem; }
    .sub-title span {margin-bottom:20rem; font-size: 15rem; }
    .lnb {width: 100%; height: 75rem;}
    .lnb .home {display: none;}
    .lnb .dept {padding: 0 30rem; justify-content: space-between;}
    .lnb .dept > li {width: 44%;}
    .lnb .dept > li:nth-child(2) {margin: 0;}
    .lnb .dept > li a {font-size: 16rem;}
}
@media(max-width:640px) {
    .lnb {height: 60rem;}
    .area-subVisual > i {height: 400rem;}
    .area-subVisual .page-tit span {font-size: 15rem;}
    .area-subVisual .page-tit h2 {font-size: 30rem;}
}
@media(max-width:540px) {
    .sub-title h2 {font-size: 25rem;}
    .lnb .dept > li {width: 100%;}
    .lnb .dept > li:nth-child(1) {display: none;}
    .lnb .dept > li:nth-child(2)::before {display: none;}
}

/* 1. 바르미소개 - 회사소개 */
[data-sub="about01"] .eng {font-family: var(--font-eng);}
[data-sub="about01"] .line {display: block; width: 1rem; height: 40rem; margin: 30rem auto 35rem; background: rgba(255,255,255,.5); transform: rotate(-45deg)}
[data-sub="about01"] .ss01 {padding: 180rem 0; box-sizing: border-box; background: url(/images/content/bd01_bg.jpg) no-repeat 50% 50% / cover; text-align: center; color: var(--color-white);}
[data-sub="about01"] .ss01 .txt h3 {font-size: 42rem; font-weight: 800; margin-bottom: 40rem;}
[data-sub="about01"] .txt p {font-size: 17rem;line-height: 1.7; font-weight: 300;}
[data-sub="about01"] .ss02 {position: relative; margin-top: 150rem;}
[data-sub="about01"] .ss02 .leaf {position: absolute; bottom: -60rem; left: -30rem; z-index: 0; opacity: 0.7;}
[data-sub="about01"] .ss02 .inr {display: flex; justify-content: space-between;}
[data-sub="about01"] .ss02 .img-txt {position: absolute; top: 0; left: -75rem; display: block; font-size: 50rem; font-weight:900; text-transform: uppercase; color: rgba(21, 54, 14,0.05); writing-mode: vertical-rl; }
[data-sub="about01"] .ss02 .txt h2 {font-size: 35rem; font-weight: 700; line-height: 1.4; margin-bottom: 40rem;}
[data-sub="about01"] .ss02 .box {display: flex; flex-direction: column;  gap: 60rem;}
[data-sub="about01"] .ss02 .box.b1 {}
[data-sub="about01"] .ss02 .box.b2 {text-align: right; margin-top: 150rem; margin-left: 100rem;}
[data-sub="about01"] .ss02 .img-box {position: relative;}
[data-sub="about01"] .ss02 .img-box img {max-width: 100%; width: 100%; object-fit: contain;}
[data-sub="about01"] .ss02 .box.b1 .img-box {width: 100%; justify-content: flex-start;}
[data-sub="about01"] .ss02 .box.b2 .img-box {width: 85%; align-self: flex-end;}
[data-sub="about01"] .rotate {position: absolute; top: -110rem; right:-110rem; z-index: 1; width: 200rem; height: 200rem; background: url(/images/content/ic-leaf.svg) no-repeat 50% 50%; background-size: 52rem;} 
[data-sub="about01"] .rotate::before {content: ''; position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%; background: url(/images/content/spin_txt.png) no-repeat 50% / contain; animation:rotate 10s linear infinite;}

/* 1. 바르미소개 - 오시는 길 */
[data-sub="about02"] {}
[data-sub="about02"] .sub-cont {display: flex; gap: 65rem; align-items: center; height:550rem}
[data-sub="about02"] .map_img {width: 67%;}
[data-sub="about02"] .map_img .root_daum_roughmap {width:100%;}
[data-sub="about02"] .map_img .map_border {display:none}
[data-sub="about02"] .map_img .root_daum_roughmap .wrap_map {height:550rem;}
[data-sub="about02"] .map_img .root_daum_roughmap .wrap_controllers {display: none;}
[data-sub="about02"] .map_txt {width: 33%; height: 100%; padding: 20rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; border-bottom: 1rem solid var(--color-black); border-top: 1rem solid var(--color-black)}
[data-sub="about02"] .map_txt h2 {display: block; font-size: 40rem; font-family: var(--font-eng); font-weight: 700;}
[data-sub="about02"] .map_txt ul {margin: 50rem 0;}
[data-sub="about02"] .map_txt li + li {margin-top:25rem;}
[data-sub="about02"] .map_txt li {font-size: 18rem; line-height:1.8}
[data-sub="about02"] .map_txt strong {font-weight: 700;}
[data-sub="about02"] .map_txt p {font-weight: 300; color: var(--color-gray); margin-top: 8rem;}
[data-sub="about02"] .map_btn {display: flex; gap: 12rem;}
[data-sub="about02"] .map_btn .btn {display: block; width: 200rem; height: 65rem; font-size: 15rem; background: #15360e; color: var(--color-white); ; display: flex; align-items: center; justify-content: space-between; padding: 0 28rem;  box-sizing: border-box; border: 3rem solid rgba(255, 255, 255, 0.2); transition: .3s;}
[data-sub="about02"] .map_btn .btn img {height: 22rem;}
[data-sub="about02"] .map_btn .btn:hover {background: #10290b;}

@media(max-width:1300px){
    [data-sub="about01"] .ss02 .txt h2 {font-size: 28rem; margin-bottom: 40rem;}
}
@media(max-width:1080px){
    [data-sub="about01"] .ss02 {margin-top: 100rem;}
    [data-sub="about01"] .ss02 .box {gap: 35rem;}
    [data-sub="about01"] .ss02 .box.b2 {margin-top: 90rem; margin-left: 50rem;}
    [data-sub="about01"] .ss02 .img-txt {font-size: 30rem; left: -45rem;}
    [data-sub="about01"] .rotate {width: 160rem;height: 160rem; top: -60rem; right: -60rem;}
    [data-sub="about01"] .ss02 .txt h2 br {display: none;}
    [data-sub="about02"] .sub-cont {flex-direction: column-reverse; height: auto; gap: 40rem;}
    [data-sub="about02"] .map_img {width:100%;}
    [data-sub="about02"] .map_txt {width:100%; padding: 50rem 20rem;}
    [data-sub="about02"] .map_txt ul {margin: 30rem 0;}

}
@media(max-width:768px){
    [data-sub="about01"] .ss01 {padding: 120rem 0;}
    [data-sub="about01"] .ss01 .txt h3 {font-size: 30rem;}
    [data-sub="about01"] .line {height: 30rem; margin: 20rem auto 25rem;}
    [data-sub="about01"] .txt p {font-size: 15rem; line-height: 1.5;}
    [data-sub="about01"] .ss02 {margin-top:70rem;}
    [data-sub="about01"] .ss02 .inr {flex-direction: column;}
    [data-sub="about01"] .ss02 .box.b1 {width: 100%; flex-direction: column-reverse;}
    [data-sub="about01"] .ss02 .box.b2 {align-self: flex-end; width:100%; margin-left: 0; margin-top: 80rem;}
    [data-sub="about01"] .ss02 .txt h2 {font-size: 25rem; margin-bottom: 30rem;}
    [data-sub="about01"] .ss02 .box.b2 .img-box {width: 100%;}
    [data-sub="about01"] .ss02 .box.b2 .img-box img {width: 90%;}
    [data-sub="about01"] .ss02 .txt h2 br {display: block;}
    [data-sub="about01"] .ss02 .img-txt {display: none;}
    [data-sub="about01"] .ss02 .leaf {width: 300rem;}
    [data-sub="about01"] .rotate {width: 130rem; height: 130rem; right: auto; left: 0;}
    [data-sub="about02"] .map_txt h2 {font-size: 30rem;}
    [data-sub="about02"] .map_txt li + li {margin-top: 15rem;}
    [data-sub="about02"] .map_txt li {font-size: 15rem; line-height: 1.5;}
    [data-sub="about02"] .map_btn {width: 100%; gap: 8rem;}
    [data-sub="about02"] .map_btn .btn {width: 50%; height: 55rem; padding: 0 20rem;} 
}

@media(max-width:540px){
    [data-sub="about01"] .ss01 .txt h3 {font-size: 25rem;}
    [data-sub="about01"] .txt p br {display: none;}
    
}

/* 2. 브랜드소개 - 공통 */
.area_brand .ss01 {position: relative;}
.area_brand .brandTit {text-align: center;}
.area_brand .brandTit span {display: inline-block; font-size: 17rem; padding: 15rem 36rem; background:#115303; color: var(--color-white); border: 4rem solid rgba(255, 255, 255, 0.2); box-sizing: border-box;}
.area_brand .brandTit h3 {font-size: 48rem; font-weight: 700; line-height: 1.4; margin: 35rem 0 45rem;}
.area_brand .brandTit p {font-size: 18rem; line-height: 1.8; font-weight: 300; }
.area_brand .brandImg {position:relative; width: 100%; max-width: 1760rem; margin: 80rem auto 0 auto;}
.area_brand .brandImg .img {max-width: 96%; height: 100%; max-height: 450rem; margin: 0 auto;}
.area_brand .brandImg .img img {position: relative; width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.area_brand .brandImg span {position: absolute; display: block; z-index: 5;}
.area_brand .brandImg span img {max-width: 100%; object-fit: contain;}
.area_brand .brandImg span.fig1 {top: -130rem; left:60rem; width: 280rem;}
.area_brand .brandImg span.fig2 {bottom: -80rem; right: 10%; width:190rem; transform: rotate(5deg); animation-delay: 0.8s;}
.area_brand .marquee {margin-top: 80rem; display: flex; align-items: center; gap: 50rem; letter-spacing: -.015em; text-transform: uppercase; white-space: nowrap; pointer-events: none; font-size: 100rem; font-weight: 900; color: rgba(24, 45, 65, 0.05); }

/* 2. 브랜드소개 - 바르미 스시뷔페 */
[data-sub="brand01"] {}
[data-sub="brand01"] .ss02 {margin-top: 120rem;}
[data-sub="brand01"] .ss02 .tit {margin-bottom: 60rem; text-align: center;}
[data-sub="brand01"] .ss02 .tit h3 {font-size: 45rem; font-weight: 700; margin: 30rem 0;}
[data-sub="brand01"] .ss02 .tit p {font-size: 18rem; line-height: 1.8; font-weight: 300; color: #555}
[data-sub="brand01"] .list li:nth-child(even) {margin-top:70rem;}
[data-sub="brand01"] .list .img {position: relative; width: 100%; overflow: hidden;}
[data-sub="brand01"] .list .img img {width: 100%; max-width: 100%; object-fit: contain; transition: .5s;}
[data-sub="brand01"] .list .img:hover img {transform: scale(1.05);}
[data-sub="brand01"] .list .img em {position: absolute; top: 0; left: 0; width: 60rem; height: 60rem; background: #ff8503; color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 20rem; font-weight:600; z-index: 10;}
[data-sub="brand01"] .list p {position: relative; width: 85%; font-size: 17rem; font-weight: 500; margin-top: -30rem; text-align: center; padding: 20rem 25rem; box-sizing: border-box; background: #222; color: var(--color-white); z-index: 10;}
[data-sub="brand01"] .list-swiper {position: relative;}
[data-sub="brand01"] .list-next {right: -100rem;}
[data-sub="brand01"] .list-prev {left: -100rem;}
[data-sub="brand01"] .list-next , [data-sub="brand01"] .list-prev {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; cursor: pointer; transition: .3s;}
[data-sub="brand01"] .list-next [class^=xi-], [data-sub="brand01"] .list-prev [class^=xi-] {font-size: 66rem; color: var(--color-black); font-weight: 300; opacity: 0.3; cursor: pointer; }
[data-sub="brand01"] .list-btn [class^=xi-]:hover {opacity: 1;}
[data-sub="brand01"] .brand_scroll {margin-top: 80rem; height: 4rem; background: rgba(0, 0, 0, 0.08); border-radius: 10rem;}
[data-sub="brand01"] .brand_scroll .swiper-scrollbar-drag {background: rgba(0, 0, 0, 0.8);  border-radius: 10rem; }

@media(max-width:1500px){
    [data-sub="brand01"] .list-next , [data-sub="brand01"] .list-prev {top: 35%;}
    [data-sub="brand01"] .list-next [class^=xi-], [data-sub="brand01"] .list-prev [class^=xi-] {font-size: 20rem; background: var(--color-black); color: var(--color-white); padding: 15rem; box-sizing: border-box;}
    [data-sub="brand01"] .list-next {right: -40rem}
    [data-sub="brand01"] .list-prev {left: -40rem}
}

@media(max-width:1080px){
    .area_brand .brandImg .img {height: 350rem;}
    .area_brand .brandImg span.fig1 {width:210rem; top: -60rem; left: 10rem;}
    .area_brand .brandImg span.fig2 {width: 160rem;}
    [data-sub="brand01"] .list li:nth-child(even) {margin-top: 40rem}
    [data-sub="brand01"] .list-next {right: 0rem}
    [data-sub="brand01"] .list-prev {left: 0rem}
}
@media(max-width:768px){
    .area_brand .brandTit span {font-size: 15rem; padding: 10rem 20rem;}
    .area_brand .brandTit h3 {font-size: 35rem; margin: 35rem 0;}
    .area_brand .brandTit p {font-size: 15rem; line-height: 1.5;}
    .area_brand .brandImg {margin: 50rem auto 0 auto;}
    .area_brand .brandImg .img {max-width: 100%; height: 300rem;}
    .area_brand .brandImg span.fig1 {width: 160rem; top: -30rem;}
    .area_brand .brandImg span.fig2 {width: 100rem; bottom: -50rem;}
    .area_brand .marquee {font-size: 70rem; margin-top: 50rem;}
    [data-sub="brand01"] .list li:nth-child(even) {margin-top: 0}
    [data-sub="brand01"] .ss02 {margin-top: 70rem;}
    [data-sub="brand01"] .ss02 .tit {margin-bottom: 40rem;}
    [data-sub="brand01"] .ss02 .tit h3 {font-size: 35rem; margin: 25rem 0;}
    [data-sub="brand01"] .ss02 .tit p {font-size: 15rem; line-height: 1.5; }
    [data-sub="brand01"] .list-next , [data-sub="brand01"] .list-prev {top: 40%;}
}
@media(max-width:540px){
    .area_brand .brandImg span.fig1 {display: none;}
    .area_brand .brandImg .img {height: 240rem;}
    .area_brand .brandTit h3 {font-size: 25rem; margin: 25rem 0;}
    .area_brand .brandTit p br {display: none;}
    .area_brand .marquee {font-size: 50rem;}
    [data-sub="brand01"] .brand_scroll {margin-top: 50rem;}
    [data-sub="brand01"] .ss02 .tit img {width: 22rem;}
    [data-sub="brand01"] .ss02 .tit h3 {font-size:25rem;}
    [data-sub="brand01"] .list p {width: 88%; font-size: 16rem; text-align: left; padding: 20rem 20rem;}
    [data-sub="brand01"] .list-next , [data-sub="brand01"] .list-prev {top: 50%;}
}

/* 3. 메뉴소개 - 맛있게 드시는 법 */
[data-sub="menu01"] .guide {display: flex; gap: 100rem; align-items: center;}
[data-sub="menu01"] .guide .imgBox {position: relative; width:48%;}
[data-sub="menu01"] .guide .imgBox .img {width: 100%; max-width: 100%;}
[data-sub="menu01"] .guide .imgBox .rotate {position: absolute; top: -30rem; left: -90rem;  z-index: 1; width: 215rem; height: 215rem; background: url(/images/content/ic-leaf.svg) no-repeat 50% 50%; background-size: 52rem;} 
[data-sub="menu01"] .guide .imgBox .rotate::before {content: ''; position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%; background: url(/images/content/spin_txt.png) no-repeat 50% / contain; animation:rotate 10s linear infinite;}
[data-sub="menu01"] .list {width:48%;}
[data-sub="menu01"] .list li {display: flex; justify-content: space-between; padding: 50rem 15rem; box-sizing: border-box; border-bottom: 1rem dotted #ddd;}
[data-sub="menu01"] .list li:nth-child(1) {border-top: 1rem dotted #ddd;}
[data-sub="menu01"] .list li .point {color: #468a59; font-weight: 400; border-bottom: 1rem solid rgba(70, 138, 89, 0.5); padding-bottom: 2rem; box-sizing: border-box; }
[data-sub="menu01"] .list li .num {width: 13%; display: block; font-size: 40rem; font-style: italic; line-height: 1; font-weight: 700; color: rgba(100, 100, 111, 0.2); font-family: var(--font-eng); margin-top: -5rem;}
[data-sub="menu01"] .list dl {width: 86%;}
[data-sub="menu01"] .list dd {font-size: 18rem; line-height: 1.8; font-weight: 300;}
[data-sub="menu01"] .sub-cont .tab-container {overflow: hidden; visibility: hidden; height: 0;}
[data-sub="menu01"] .sub-cont .tab-container.active {overflow: visible; visibility: visible; height: 100%;}
[data-sub="menu01"] .tab-menu {display: flex; align-items: center; justify-content: center; text-align: center; gap: 15rem; margin-top: 45rem;}
[data-sub="menu01"] .tab-menu li {display: flex; align-items: center; justify-content: center; width: 158rem; height:60rem; background: #eee; cursor: pointer; border-radius: 30rem; color: #bbb; font-weight: 500;}
[data-sub="menu01"] .tab-menu li.active { pointer-events: none; background: linear-gradient(25deg, #ff8503 25%, #ffc400); color: var(--color-white);}

/* 3. 메뉴소개 - 메뉴 리스트*/
[data-sub="menu02"] .menu-list {display: grid; grid-template-columns: repeat(4,1fr); gap: 50rem 30rem;}
[data-sub="menu02"] .menu-con .img-box {position: relative; width: 100%; height: auto; background: #ddd; border-radius: 8rem; overflow: hidden; margin-bottom: 25rem;}
[data-sub="menu02"] .menu-con .img-box .img {display: block; aspect-ratio : 34 / 32} 
[data-sub="menu02"] .menu-con .img-box img {width: 100%; max-width: 100%; height: 100%; object-fit: cover;}
[data-sub="menu02"] .menu-con .img-box img:not(.none):hover {transform: scale(1.08); transition: .5s;}
[data-sub="menu02"] .menu-con .tag {position: absolute; top:12rem; left:12rem; display: flex; align-items: center; justify-content: center; width: 65rem; height: 33rem; font-size: 15rem; border-radius: 3rem; background: var(--color-black); color: var(--color-white); z-index: 10;}
[data-sub="menu02"] .menu-con .txt dt {font-size: 22rem; font-weight: 700;}
[data-sub="menu02"] .menu-con .txt dd {font-size: 17rem; font-weight: 300; color: #555; margin-top: 20rem;}
[data-sub="menu02"] .menu-con .new {background: #ff8d2b;}
[data-sub="menu02"] .menu-con .best {background: #00ab4c;}

@media(max-width:1300px){
    [data-sub="menu01"] .guide {gap: 50rem;}
}
@media(max-width:1080px){
    [data-sub="menu01"] .sub-title {margin-bottom: 80rem;}
    [data-sub="menu01"] .guide {flex-direction: column;}
    [data-sub="menu01"] .guide .imgBox {width:100%; text-align: right;}
    [data-sub="menu01"] .guide .imgBox .img {width: 100%; max-width: 80%; margin-right: 30rem;}
    [data-sub="menu01"] .guide .imgBox .rotate {left: 50rem;}
    [data-sub="menu01"] .list {width:100%;}
    [data-sub="menu01"] .list dd br {display: none;}
    [data-sub="menu02"] .menu-list {grid-template-columns: repeat(3,1fr); gap: 40rem 30rem;}
}
@media(max-width:768px){
    [data-sub="menu01"] .guide .imgBox .rotate {width: 180rem; height: 180rem;}
    [data-sub="menu01"] .tab-menu {gap: 10rem; margin-top: 30rem}
    [data-sub="menu01"] .tab-menu li {width: 35%; max-width: 150rem; height:50rem;}
    [data-sub="menu01"] .list li {padding: 35rem 10rem; align-items: center;}
    [data-sub="menu01"] .list li .num {margin-top: 0; width: 8%; font-size: 30rem;}
    [data-sub="menu01"] .list dl {width: 88%;}
    [data-sub="menu01"] .list dd {font-size: 15rem; line-height: 1.5;}
    [data-sub="menu02"] .menu-list {grid-template-columns: repeat(2,1fr);}

    [data-sub="menu02"] .menu-con .txt dt {font-size: 18rem;}
    [data-sub="menu02"] .menu-con .txt dd {font-size: 15rem; margin-top: 15rem;}
}
@media(max-width:540px){
    [data-sub="menu01"] .guide .imgBox .rotate {width: 135rem; height: 135rem; top: -10rem; left: auto; right: 0;}
    [data-sub="menu01"] .guide .imgBox .img {max-width: 98%; margin-right:0}
    [data-sub="menu01"] .list li {flex-wrap: wrap;}
    [data-sub="menu01"] .list li .num {width: 100%; margin-bottom: 22rem;}
    [data-sub="menu01"] .list dl {width: 100%;}
    [data-sub="menu02"] .menu-list {grid-template-columns: repeat(1,1fr); gap: 30rem;}
    [data-sub="menu02"] .menu-con .img-box {margin-bottom: 20rem;}
    [data-sub="brand01"] .list .img em {width: 65rem; height: 65rem;}
}

/* 4. 매장안내 */
[data-sub="shop01"] {}
[data-sub="shop01"] .shop-table thead {font-size: 17rem; border-top: 2rem solid var(--color-black); border-bottom: 1rem solid #555;}
[data-sub="shop01"] .shop-table tbody {border-bottom: 1rem solid #ddd;}
[data-sub="shop01"] .shop-table th {font-weight: 600; padding: 20rem 10rem;}
[data-sub="shop01"] .shop-table td {border-top: 1rem dotted #ddd; font-weight: 300; padding: 15rem 10rem;}
[data-sub="shop01"] .shop-table td.tb-none {padding: 20rem 10rem;}
[data-sub="shop01"] .shop-table td.tb-view a {font-size: 20rem; display: block; width: 100%; height: 100%;}
[data-sub="shop01"] .shop-table th, [data-sub="shop01"] .shop-table td { box-sizing: border-box; text-align: center; color: var(--color-black); border-left: 1rem dotted #ddd; }
[data-sub="shop01"] .shop-table td:first-child, [data-sub="shop01"] .shop-table th:first-child {border-left: 0;}
[data-sub="shop01"] .shop-table td:first-child {color: #c91e2c; font-weight: 500;}
[data-sub="shop01"] .search-box {display: flex; gap: 15rem; justify-content: center; align-items: center; width: 100%; padding: 40rem; box-sizing: border-box; border: 1rem solid #bbb; margin-bottom: 40rem;}
[data-sub="shop01"] .select-box {display: flex; width: 35%; gap: 15rem;}
[data-sub="shop01"] .search-box select {background-position: calc(100% - 20rem) 50%; }
[data-sub="shop01"] .search-box select, [data-sub="shop01"] input[type="text"], [data-sub="shop01"] input[type="submit"] {border: 1rem solid #ddd; height: 55rem; width: 100%; padding: 8rem 15rem; background-color: rgba(255, 255, 255, 0.3);}
[data-sub="shop01"] input[type="submit"] {width: 25%; background: var(--color-black); color: var(--color-white); border-color: var(--color-black);} 
[data-sub="shop01"] .select-category {width: 35%;}
[data-sub="shop01"] .select-brand {width: 65%;}
[data-sub="shop01"] .search-input {width: 65%; display: flex; align-items: center; gap: 10rem;}
[data-sub="shop01"] .pagination {padding-top: 0; margin-top: 70rem;}


@media(max-width:1080px){
    [data-sub="shop01"] .search-box {gap: 8rem; padding: 30rem;}
    [data-sub="shop01"] .search-box select, [data-sub="shop01"] input[type="text"], [data-sub="shop01"] input[type="submit"] {height: 50rem; padding:8rem 10rem}
}
@media(max-width:768px){
    .scrollTable table {width:800rem;}
    [data-sub="shop01"] .pagination { margin-top: 40rem;}
    [data-sub="shop01"] .pagination > * {min-width: 30rem; min-height: 30rem;}
    [data-sub="shop01"] .search-box {flex-direction: column; padding: 20rem;}
    [data-sub="shop01"] .search-box select {background-position: calc(100% - 15rem) 50%; }
    [data-sub="shop01"] .select-box {width: 100%; gap: 8rem;}
    [data-sub="shop01"] .select-category {width: 30%;}
    [data-sub="shop01"] .select-brand {width: 70%;}
    [data-sub="shop01"] .search-input {width: 100%;}
    [data-sub="shop01"] input[type="text"] {width: 75%;}
    [data-sub="shop01"] input[type="submit"] {width: 25%;}
    [data-sub="shop01"] .shop-table td {border-top: 1rem dotted #ddd; font-size: 15rem; font-weight: 300; padding: 12rem 8rem;}
    [data-sub="shop01"] .shop-table td {font-size: 15rem;}
    [data-sub="shop01"] .shop-table th {font-size: 15rem; padding: 18rem 8rem;}
    [data-sub="shop01"] .shop-table td.tb-view a {font-size: 16rem;}
}

/* animation */
@media(prefers-reduced-motion:no-preference){
	.marquee-txt{animation: marquee 15s linear infinite;}
}
@keyframes marquee {0% {translate: 0;} 100% {translate: -100%;}}
@keyframes rotate {100% {rotate: 360deg;}}