/* BASIC css start */
#contents:after {content:"";clear:both;display:block;}
button:focus {outline: none;}
button {-ms-user-select: none; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;}

#contents {position: relative;max-width: 100% !important;width: 100% !important;min-height:3500px !important;}
.titleBrand {background: #f1f1f1;width: 100%;height: 350px;line-height: 31px;text-align: center;font-size: 16px;font-weight: 300;padding-top: 58px;box-sizing: border-box;padding-left: 0;}
.brandCons {padding:30px;}
.brandCons .left_wrap {width:300px;}
.brandCons .left {float:left;width:300px;padding:30px 20px;box-sizing:border-box;}
.brandCons .left.active {position:fixed;left:30px;top:109px;margin-top:30px;}
.brandCons .left h2 {font-weight: 300;font-size: 19px;display: block;margin-bottom: 24px;font-family:맑은 고딕;}
.brandCons .left .brandList ul {font-size:0;line-height:0;margin-left:0;width:calc(100% + 5px);margin-left:-5px;}

.brandCons .left .button-group button { display: inline-block;margin-left: 5px;background: #ffffff;width: calc((100% / 8) - 5px);text-align: center;padding: 8px;box-sizing: border-box;font-size: 11px;margin-bottom: 5px;height: 32px;line-height: 11px;border-radius: 6px;border: 1px solid #ddd;}

.brandCons .left .button-group button:hover {border:1px solid #999;}
.brandCons .left .button-group button.language {width:calc(((100% / 7) - 1px) * 2)}
.brandCons .left .button-group button.all {     width: calc(100% - 20px);box-sizing: border-box;font-size: 12px;display: block;background: #f7f7f7;padding: 8px 12px;color: #404040;margin-bottom: 20px;font-family: '맑은 고딕';border-radius: 6px;line-height:12px;}

.brandCons .right {float:right;width:calc(100% - 400px);padding:30px 20px;box-sizing:border-box;}
.brandCons .right .element-item {display:block;width:100%;}
.brandCons .right ul > li > a {    display: inline-block;background: #eaeaea;padding: 9px;margin-bottom: 10px;border-radius: 100%;width: 21px;height: 21px;text-align: center;line-height: 21px;font-size: 20px;font-family: 맑은 고딕;font-weight: bold;}
.brandCons .right ul > li > nav {display:block;margin:15px 0 30px;}

.brandCons .right ul li > nav > div {    border: 1px solid #e8e8e8;display: inline-block;margin: 0 20px 20px 0;text-align: Center;padding: 15px;font-size: 12px;width: 150px;height: 200px;}
.brandCons .right ul li > nav > div:hover {border:1px solid #999;}
.brandCons .right ul li > nav > div > a {display:block;text-align:center;;}
.brandCons .right ul li > nav > div img {display:block;max-width:100%;margin-bottom:10px;border-bottom:1px solid #eee;}
.brandCons .right ul li > nav > div span {display:block;}
.brandCons .right ul li > nav > div span.kor {font-family:맑은 고딕;}
.brandCons .right ul li > nav > div span.eng {font-family:lato;font-size:11px;;letter-spacing:0.5px;}

/* 클릭시 활성화 */
.brandCons .left .button-group button.active {background: #4e4e4e;border: 1px solid #4e4e4e;}
.brandCons .left .button-group button.active {color:#fff}

/* BASIC css end */