@import url("sub.css");

#contents {overflow:hidden;}

/**** S:: 브랜드 공통 > brand_intro ****/
.brand_intro { display: flex; gap: 80px; align-items: center; }
.brand_intro figure { flex: 1; min-width: 0; height: 500px; border-radius: var(--borderR20); overflow: hidden; background: var(--black); }
.brand_intro figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand_intro .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.brand_intro .tit { display: flex; flex-direction: column; gap: 12px; }
.brand_intro .tit .fsE12 { color: var(--black); letter-spacing: 0; text-transform: uppercase; font-weight: 600; line-height: 1.667; transition: letter-spacing 1.2s cubic-bezier(0.25, 1, 0.5, 1); }
.brand_intro .tit .fsE12.aos-animate { opacity: 0.3 !important; letter-spacing: 3.6px; }
.brand_intro .tit .fs38 { color: var(--black); }
.brand_intro .tit .fs38 span { color: var(--main); line-height: inherit; letter-spacing: inherit; }
.brand_intro .txt > .fs18 { color: var(--basic); line-height: 1.667; }
.brand_intro dl { display: flex; align-items: center; gap: 20px; padding-top: 40px; margin-top: 10px; border-top: 1px solid var(--border); box-sizing: border-box; }
.brand_intro dl dt { display: block; width: 70px; height: 66px; flex-shrink: 0; overflow: hidden; }
.brand_intro dl dt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand_intro dl dd { display: flex; flex-direction: column; }
.brand_intro dl .fs18 { color: var(--black); line-height: 1.667; }
.brand_intro dl .fsE30 { font-size: 1.667rem; font-family: var(--eng); font-weight: 600; line-height: 1.333; color: var(--black); }
/**** E:: 브랜드 공통 > brand_intro ****/

/**** S:: 브랜드 공통 > brand_strength ****/
.brand_strength { display: flex; flex-direction: column; align-items: center; background: var(--grayBg); }
.brand_strength > .fsE60 { color: #222; padding-bottom: 50px; text-align: center; }
.brand_strength ul { display: flex; align-items: flex-start; padding-top: 14px; box-sizing: border-box; }
.brand_strength li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; width: 350px; height: 350px; margin-right: -30px; border-radius: 50%; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-align: center; padding:0 35px; box-sizing: border-box;}
.brand_strength li:last-child { margin-right: 0; }
.brand_strength li.on { background: rgba(0, 74, 249, 0.75); }
.brand_strength li > i { position: absolute; left: 50%; top: -14px; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 3px 15px; box-sizing: border-box; border-radius: 100px; background: var(--main); color: var(--white); font-weight: 700; line-height: 1.833; transform: translateX(-50%); }
.brand_strength li figure { display: block; width: 60px; height: 60px; overflow: hidden; }
.brand_strength li figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand_strength li .txt { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand_strength li .fs24 { color: var(--black); font-weight: 600; line-height: 1.417; }
.brand_strength li .fs16 { color: var(--basic); line-height: 1.75; }
.brand_strength li.on .fs24, .brand_strength li.on .fs16 { color: var(--white); }
/**** E:: 브랜드 공통 > brand_strength ****/

/**** S:: 브랜드 공통 > brand_photo ****/
.brand_photo { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.brand_photo .basic_in {border-bottom: 1px solid var(--border); }
.brand_photo .basic_in > .fsE60 { color: #222; padding-bottom: 50px; text-align: center; }
.brand_photo .roll { display: flex; flex-direction: column; gap: 60px; overflow: visible; }
.brand_photo .swiper { width: 100%; overflow: visible; }
.brand_photo .swiper-wrapper { overflow: visible; }
.brand_photo .swiper-slide {width:auto;  height: 510px; border-radius: var(--borderR20); overflow: visible; background: var(--black); }
/* .brand_photo .swiper-slide.wide { width: 765px; } */
.brand_photo .swiper-slide figure { display: block; width: 100%; height: 100%; overflow: visible; border-radius: var(--borderR20); }
.brand_photo .swiper-slide figure img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--borderR20); }
.brand_photo .ctrl { display: flex; align-items: center; gap: 20px; width: 100%; box-sizing: border-box; }
.brand_photo .bar { position: relative; flex: 1; min-width: 0; height: 8px; margin-right: 32px; border-radius: 100px; background: rgba(0, 74, 249, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.brand_photo .bar i { position: absolute; left: 0; top: 0; width: 8%; height: 100%; border-radius: 100px; background: var(--main); transition: width 0.35s ease; }
.brand_photo .ctrl button { display: block; width: 14px; height: 14px; flex-shrink: 0; background-color: var(--black); -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; transition: background-color 0.3s ease; }
.brand_photo .ctrl button.prev { -webkit-mask-image: url('/img/prev_arrow.svg'); mask-image: url('/img/prev_arrow.svg'); }
.brand_photo .ctrl button.next { -webkit-mask-image: url('/img/next_arrow.svg'); mask-image: url('/img/next_arrow.svg'); }
.brand_photo .ctrl button:hover { background-color: var(--main); }
.brand_photo .ctrl button.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
/**** E:: 브랜드 공통 > brand_photo ****/

/**** S:: 브랜드 공통 > brand_live ****/
.brand_live { display: flex; flex-direction: column; align-items: center; }
.brand_live > .fsE60 { color: #222; padding-bottom: 50px; text-align: center; }
.brand_live ul { display: flex; flex-wrap: wrap; gap: 30px; width: 100%; }
.brand_live li { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; background: var(--grayBg); border-radius: var(--borderR20); }
.brand_live li figure { position: relative; display: block; width: 100%; padding-top: 60px; box-sizing: border-box; background: url('/brand/img/button_bg.svg') left 13px / 62px 14px no-repeat, url('/brand/img/share_bg.svg') right top / 40px 40px no-repeat; }
.brand_live li figure img { display: block; width: 100%; /*aspect-ratio: 900 / 2000;*/ object-fit: cover; border-radius: var(--borderR20);}
/**** E:: 브랜드 공통 > brand_live ****/

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

/**** S:: 브랜드 공통 > brand_intro ****/
.brand_intro { gap: 50px; }
.brand_intro figure { height: 440px; }
/**** E:: 브랜드 공통 > brand_intro ****/

/**** S:: 브랜드 공통 > brand_strength ****/
.brand_strength li { width: 300px; height: 300px; gap: 20px; }
/**** E:: 브랜드 공통 > brand_strength ****/

/**** S:: 브랜드 공통 > brand_photo ****/
.brand_photo .swiper-slide { height: 420px; }
/* .brand_photo .swiper-slide.wide { width: 630px; } */
/**** E:: 브랜드 공통 > brand_photo ****/

/**** S:: 브랜드 공통 > brand_live ****/
.brand_live ul { gap: 20px; }
/**** E:: 브랜드 공통 > brand_live ****/

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

/**** S:: 브랜드 공통 > brand_intro ****/
.brand_intro { gap: 40px; }
.brand_intro figure { height: 400px; }
.brand_intro .txt { gap: 24px; }
/**** E:: 브랜드 공통 > brand_intro ****/

/**** S:: 브랜드 공통 > brand_strength ****/
.brand_strength > .fsE60 { padding-bottom: 40px; }
.brand_strength li { width: 260px; height: 260px; margin-right: -20px; gap: 16px; }
.brand_strength li figure { width: 48px; height: 48px; }
/**** E:: 브랜드 공통 > brand_strength ****/

/**** S:: 브랜드 공통 > brand_photo ****/
.brand_photo .basic_in > .fsE60 { padding-bottom: 40px; }
.brand_photo .roll { gap: 40px; }
.brand_photo .swiper-slide { height: 360px; }
/* .brand_photo .swiper-slide.wide { width: 540px; } */
/**** E:: 브랜드 공통 > brand_photo ****/

/**** S:: 브랜드 공통 > brand_live ****/
.brand_live > .fsE60 { padding-bottom: 40px; }
/**** E:: 브랜드 공통 > brand_live ****/

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

/**** S:: 브랜드 공통 > brand_intro ****/
.brand_intro { flex-direction: column; gap: 40px; }
.brand_intro figure { width: 100%; height: auto; aspect-ratio: 740 / 500; }
.brand_intro .txt { width: 100%; }
.brand_intro .txt > .fs18 br { display: none; }
/**** E:: 브랜드 공통 > brand_intro ****/

/**** S:: 브랜드 공통 > brand_strength ****/
.brand_strength ul { flex-direction: column; align-items: center; gap: 30px; padding-top: 0; }
.brand_strength li { margin-right: 0; width: 280px; height: 280px; }
/**** E:: 브랜드 공통 > brand_strength ****/

/**** S:: 브랜드 공통 > brand_photo ****/
.brand_photo .swiper-slide { max-width: 100%; height: 280px; }
/* .brand_photo .swiper-slide.wide { width: 80vw; max-width: 520px; } */
.brand_photo .roll { gap: 30px; }
/**** E:: 브랜드 공통 > brand_photo ****/

/**** S:: 브랜드 공통 > brand_live ****/
.brand_live ul { /* flex-direction: column;  */gap: 20px; }
.brand_live li {flex:calc(50% - 10px) 0 0;}
/* .brand_live li figure img { aspect-ratio: 9 / 16; max-height: 520px; } */
/**** E:: 브랜드 공통 > brand_live ****/

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

/**** S:: 브랜드 공통 > brand_intro ****/
.brand_intro { gap: 30px; }
.brand_intro .txt { gap: 20px; }
.brand_intro .tit { gap: 8px; }
.brand_intro dl { gap: 12px; padding-top: 25px; }
.brand_intro dl dt { width: 52px; height: 50px; }
.brand_intro dl .fsE30 { font-size: 1.4rem; }
/**** E:: 브랜드 공통 > brand_intro ****/

/**** S:: 브랜드 공통 > brand_strength ****/
.brand_strength > .fsE60 { padding-bottom: 30px; }
.brand_strength ul { gap: 24px; }
.brand_strength li { width: 240px; height: 240px; gap: 14px; }
.brand_strength li figure { width: 42px; height: 42px; }
/**** E:: 브랜드 공통 > brand_strength ****/

/**** S:: 브랜드 공통 > brand_photo ****/
.brand_photo .basic_in > .fsE60 { padding-bottom: 30px; }
.brand_photo .swiper-slide { height: 220px; }
.brand_photo .roll { gap: 24px; }
.brand_photo .ctrl { gap: 12px; }
.brand_photo .bar { margin-right: 8px; }
/**** E:: 브랜드 공통 > brand_photo ****/

/**** S:: 브랜드 공통 > brand_live ****/
.brand_live ul { gap: 10px; }
.brand_live > .fsE60 { padding-bottom: 30px; }
.brand_live li { padding:  10px 10px; flex:calc(50% - 5px) 0 0;}
.brand_live li figure { padding-top: 40px; background: url('/brand/img/button_bg.svg') left 11px / 40px auto no-repeat, url('/brand/img/share_bg.svg') right top / 30px 30px no-repeat; }
/* .brand_live li figure img { max-height: 420px; } */
/**** E:: 브랜드 공통 > brand_live ****/

}