@import url("sub.css");
@import url("brand.css");

#contents { padding-top: 0; }

/**** S:: Live > brand_intro (gray + title) ****/
.brand_intro.grayBg { }
.brand_intro .basic_in { display: flex; flex-wrap: wrap; align-items: center; gap:0 80px; }
.brand_intro .basic_in > .fsE60 { flex: 0 0 100%; color: #222; padding-bottom: 50px; text-align: center; }
.brand_intro .basic_in > figure { flex: 1; min-width: 0; }
.brand_intro .basic_in > .txt { flex: 1; min-width: 0; }
/**** E:: Live > brand_intro (gray + title) ****/

/**** S:: Live > brand_live (4col) ****/
.brand_live { border-bottom: 1px solid var(--border); }
.brand_live > ul {flex-wrap:wrap;}
.brand_live > ul > li { flex: none; width: calc((100% - 90px) / 4); min-width: auto; padding: 15px; box-sizing: border-box; }
/**** E:: Live > brand_live (4col) ****/

.brand_photo .basic_in { border-bottom: 0; }

/**** S:: Live > brand_live.store ****/
.brand_live.store > ul { gap: 40px; flex-wrap: nowrap; }
.brand_live.store > ul > li { flex: 1; width: auto; min-width: 0; padding: 0; background: var(--main); overflow: hidden; }
.brand_live.store > ul > li > .fs26 { padding: 20px; box-sizing: border-box; color: var(--white); text-align: center; line-height: 1.385; }
.brand_live.store .box { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; box-sizing: border-box; background: var(--white); border: 1px solid var(--border); border-radius: var(--borderR20); }
.brand_live.store .item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.brand_live.store .box > a { flex: 0 0 100%; }
.brand_live.store figure { width: 100%; padding: 15px; padding-top: 54px; box-sizing: border-box; background: url('/brand/img/button_bg.svg') left 28px top 20px / 62px 14px no-repeat, url('/brand/img/share_bg.svg') right 15px top 12px / 30px 30px no-repeat; background-color: var(--grayBg); border-radius: var(--borderR20); }
.brand_live.store figure img { aspect-ratio: 460 / 880; border-radius: 10px; }
.brand_live.store a { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; box-sizing: border-box; border: 1px solid var(--black); border-radius: 100px; color: var(--black); font-size: 1rem; font-weight: 600; line-height: 1.667; transition:all 0.3s ease;}
.brand_live.store a img { display: block; width: 24px; height: 24px;  transition:all 0.3s ease;}
.brand_live.store a[href*="tmall"] { border-color: var(--main); color: var(--main); }

.brand_live.store a:hover {
  background-color: var(--black);
  color: #ffffff;
}

.brand_live.store a[href*="tmall"]:hover {
  background-color: var(--main);
  color: #ffffff;
}

.brand_live.store a[href*="tmall"]:hover img {
  filter: brightness(0) invert(1);
}

/**** E:: Live > brand_live.store ****/

/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

.brand_intro .basic_in { gap: 0 50px; }
.brand_live > ul > li { width: calc((100% - 60px) / 4); }
.brand_live.store > ul { gap: 30px; }

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

.brand_intro .basic_in { gap: 40px; }
.brand_intro .basic_in > .fsE60 { padding-bottom: 40px; }
.brand_live > ul > li { width: calc((100% - 20px) / 2); }
.brand_live.store > ul { flex-wrap: wrap; }
.brand_live.store > ul > li { flex: none; width: 100%; }

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

.brand_intro .basic_in { flex-direction: column; gap: 0 40px; }
.brand_intro .basic_in > figure { width: 100%; height: auto; aspect-ratio: 740 / 500; }
.brand_intro .basic_in > .txt { width: 100%; }
.brand_intro .basic_in > .txt > .fs18 br { display: none; }
.brand_live ul { flex-direction: row; }
.brand_live > ul > li { width: calc((100% - 20px) / 2); }
.brand_live.store .box { flex-direction: column;  display:block;}
.brand_live.store .box > .item { width: 100%; }
.brand_live.store .box > .item+.item {margin:20px 0 0;}
.brand_live.store a { height: 50px; flex:none; width:100%;}
.brand_live.store .box > .item+a {margin:20px 0 0;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.brand_intro .basic_in { gap: 30px; }
.brand_intro .basic_in > .fsE60 { padding-bottom: 30px; }
/* .brand_live > ul > li { width: 100%; } */
.brand_live.store > ul > li > .fs26 { padding: 15px; font-size: 1.222rem; }
.brand_live.store .box { gap: 15px; padding: 15px; }
.brand_live.store .item { gap: 15px; }
.brand_live.store figure { padding: 12px; padding-top: 50px; background: url('/brand/img/button_bg.svg') left 22px top 20px / 40px auto no-repeat, url('/brand/img/share_bg.svg') right 12px top 10px / 30px 30px no-repeat; background-color: var(--grayBg); }
.brand_live > ul > li { width: calc((100% - 10px) / 2); }
.brand_live > ul > li {padding:10px;}

.brand_live.store a {height:45px;}
.brand_live.store a img {width:20px; height:auto;}

}