.brandWrap {}

.subBanner {
	width:100%;
	height:auto;
	color:#fff;
	text-align:center;
}

.brandTitle {
	color:#FFF;
	font-size:6.4rem;	
}

.siteMap {
    display: flex;
	margin-top:3.8rem;
    justify-content: center;
	font-family:"Pretendard":
}

.siteMap li {
    font-size: 2.4rem;
    line-height: 1;
    position: relative;
    padding: 0 2.8rem;
}

.siteMap li::before {
    content: '';
    width: 9px;
    height: 15px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateX(50%) translateY(-50%);
    background: url(../images/brand/siteMapNav.png) no-repeat center / cover;
}
.siteMap li:last-child::before {
	display:none;
}

.brandCont {
	width:100%;
	height:auto;
	padding:14rem 0;
}

.brandContInner {
	width:100%;
	max-width:124rem;
	padding:0 2rem;
	margin:0 auto;
}

.brandContTitle {
	text-align:center;
	font-size:8rem;
	color:#111;
	line-height:8.8rem;
}

.brandContTxt {
	text-align:center;
	font-size:2.8rem;
	line-height:3.8rem;
	color:#111;
	margin-top:4.7rem;
}

/* ================ 브랜드 소개 START ~ ================ */

#brandInfo .subBanner {
    height: 72rem;
	overflow:hidden;
	position:relative;
    padding: 33.6rem 2rem  25rem;
    background: url(../images/brand/brandInfoBg.jpg) no-repeat center / cover;
}

.infoLeftBg, .infoRightBg {
	position:absolute;
}
.infoLeftBg {
    left: -60px;
    top: 60px;
    width: 35%;
}

.infoRightBg {
    right: -90px;
    top: 0;
    width: 33%;
    z-index: 0;
}

.infoLeftBg img, .infoRightBg img {
	width:100%;
}


#brandInfo .brandTitle {
    color: #111;
    font-size: 4.8rem;
	letter-spacing:-0.04em;
}

#brandInfo .logoImg {width:69.9rem; height:auto; margin-top:3.4rem;}
#brandInfo .logoImg img{width:100%; height:auto;}

.butGroup {
    margin-top: 4.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.butGroup li {
    border-radius: 30px;
    overflow: hidden;
    display: inline-block;
    background: #ffba23;
    width: 19rem;
    height: 6rem;
    margin-right: 3rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btnYellow {
    padding: 2rem 0;
    text-align: center;
}

.btnYellowTxt {
    font-weight: 700;
    color: #111;
    font-size: 2.4rem;
    line-height: 1;
    padding-left: 3.4rem;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.blackCircle {
    background: #111111;
    border-radius: 0 30px 30px 0;
    width: 6rem;
    height: 6rem;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
	transition: all 0.3s ease-in-out; 
}

.youtubeBtn .btnIcon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    margin-left: 1.5rem;
    width: 3rem;
    height: auto;
}

.instaBtn .btnIcon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    margin-left: 1.7rem;
    width: 2.7rem;
    height: auto;
}

.instaBtn .btnYellowTxt {
	padding-left:5.1rem;
}


.butGroup li:hover .blackCircle {
	width:100%;
	border-radius: 0;
}
.butGroup li:hover .btnYellowTxt {color:#fff;}

.butGroup li.youtubeBtn {}
.butGroup li.instaBtn {}


.brandInfoBox {
	background:#fff5dc;
	padding:14rem 0 15.3rem;
}

.brandInfoListGroup {
    background: #fff;
    border-radius: 60px;
    overflow: hidden;
    margin-top: 8.1rem;
    padding: 7.8rem 10.5rem 7.4rem;
    display: flex;
    justify-content: space-between;
}

.brandInfoListGroup li.brandInfoList {
    width: calc(100%/5 - 5.04rem);
    display: flex;
    flex-direction: column;
    align-content: center;
	text-align:center;
}


.brandInfoListIcon {
	width:100%;
	height:auto;
}
.brandInfoListIcon img {
	width:100%;
	height:auto;
}
.brandInfoTxt {
	font-weight:700;
	color:#111;
	margin-top:2.1rem;
	font-size:3.2rem;
	letter-spacing:-0.025em;
}

.brandInfoETxt {
	font-size:2.4rem;
	color:#a4a4a4;
	letter-spacing:-0.025em;
	margin-top:1.6rem;
}


.brandInfoContImg, .brandInfoContTxtGroup {
	width:calc(50% - 3rem);
}

.brandInfoContImg {border-radius:60px; overflow:hidden;}
.brandInfoContImg img {
	width:100%;
	height:auto;
} 

.brandInfoContBotm {
	margin-top:11rem;
}
.brandInfoContBotm .brandInfoContTxtGroup {
	text-align:right;
}

.brandInfoContBotm .brandInfoContTxt {
	letter-spacing: -0.025em;
}

.brandInfoCont {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brandInfoContTitle {
	font-size:8.4rem;
	line-height:9rem;
	color:#111;
}
.brandInfoContTxt {
	margin-top:4.7rem;
	font-size:2.4rem;
	line-height:3rem;
	color:#111;
}



/* ================ 브랜드 경쟁력 START ~ ================ */

#brandCom {}

#brandCom .brandCont {padding:0;}
#brandCom .brandComBox {padding:14rem 0;}
#brandCom .brandComBox01 {
	background:url(../images/brand/brandcomBg01.jpg) no-repeat center / cover;
}

#brandCom .brandComBox02 {
	background:url(../images/brand/brandcomBg02.jpg) no-repeat center / cover;
}




#brandCom .brandContTitle {line-height:8.8rem;}
#brandCom .brandContTxt {margin-top:4rem;}

.brandComImg {
	width:100%; 
	height:auto;
	margin-top:6rem;
	border-radius:60px; 
	overflow:hidden;
}

.brandComImg img {
	width:100%; height:auto;
}

/* ================ 브랜드 BI START ~ ================ */
#brandBi {}
.subBanner {
    height: 72rem;
    padding: 33.6rem 2rem  25rem;
    background: url(../images/brand/brandBg.jpg) no-repeat center / cover;
}



.logoBoxTop {margin-top:8rem;}
.logoBox {
	border:4px solid #fbad18;
	border-radius:60px;
	padding:6.2rem 2rem;
}

.logoBoxTitle {
    font-family: "Pretendard";
    font-size: 2.8rem;
    letter-spacing: -0.025em;
    font-weight: 700;
	padding-left:4.2rem;
}
.logoImg {
	width:70.83%;
	height:auto;
	margin:0 auto;
	margin-top:5.4rem;
}

.logoImg img {
	width:100%;
	height:auto;
} 

.logoEx {
	font-family:"Pretendard";
	font-size:2.4rem;
	line-height:3.2rem;
	color:#111111;
	margin-top:7.9rem;
	text-align:center;
}

.logoBoxBotm {
    display: flex;
	margin-top: 3rem;
    justify-content: space-between;
}

.logoBoxBotm .logoBox {
	width:calc(50% - 1.5rem);
}



.sloganImg {
	width:69.23%;
	height:auto;
	margin:5.3rem auto 0;
}

.sloganImg img {
	width:100%;
	height:auto;
}

.colorImg {
	width:67.69%;
	height:auto;
	margin:3.6rem auto 0;
}

.colorImg img {
	width:100%;
	height:auto;
}

.logoEx {
	font-size:2.4rem;
	line-height:3.2rem;
	color:#111;
}
.slogan .logoEx {margin-top:3.3rem;}
.color .logoEx {margin-top:4.1rem;}