/* */
#wrap #container.brand .section_visual {position:relative; width:100%; height:1600px;}
#wrap #container.brand .section_visual .title_area {z-index:10; position:relative; width:100%; max-width:1400px; margin:0 auto; padding:190px 70px 0}
#wrap #container.brand .section_visual .title_area h2 {font-family:'NotoSansB'; font-size:48px;}
#wrap #container.brand .section_visual .section_inner {z-index:9; position:absolute; left:50%; top:0; width:1920px; height:1600px; margin-left:-960px; clip-path: polygon(1220px 0, 100% 0, 100% 620px, 0 1600px, 0 620px); -webkit-clip-path: polygon(63% 0, 100% 0, 100% 620px, 0 1600px, 0 620px); background:#f7f7f7}
#wrap #container.brand .section_visual .section_inner .left_flow {width:7628px; height:90px; margin-top:490px; background:url('/static/img/brand/img_left_flow_0516.png?') left top repeat-x; animation:leftFlow 50s infinite linear}
#wrap #container.brand .section_visual .section_inner .right_flow {width:7582px;height:90px; margin-top:50px; background:url('/static/img/brand/img_right_flow_0716.png') left top repeat-x; animation:rightFlow 55s infinite linear}
@keyframes leftFlow {
  from {background-position:0 0}
  to {background-position:-3814px 0}
}
@keyframes rightFlow {
  from {background-position:0 0}
  to {background-position:3791px 0}
}

#wrap #container.brand .section_visual .section_inner .circle_area {position:absolute; left:50%; top:349px; display:flex; flex-wrap:wrap; align-items: center; justify-content: center; width:534px; height:534px; color:#fff; border-radius:100%; margin-left:-267px; box-shadow:0px 0px 20px 20px rgba(238,110,46,0.1); background:#ee6e2e; animation:changeColor 10s infinite ease}
@keyframes changeColor {
  0% {background:#e97000}
  10% {background:#e97000}
  /* 5% {background:#f6bb00} */
  25% {background:#f6bb00}
  /* 30% {background:#3daf70} */
  50% {background:#3daf70}
  /* 55% {background:#007cb4} */
  75% {background:#007cb4}
  /* 80% {background:#e97000} */
  100% {background:#e97000}
}

#wrap #container.brand .section_visual .section_inner .circle_area .text_box {position:relative}
#wrap #container.brand .section_visual .section_inner .circle_area .tit {font-family:'NotoSansB'; font-size:48px;line-height: 58px;letter-spacing: -0.07em;}
#wrap #container.brand .section_visual .section_inner .circle_area .sub {font-family:'NotoSansL'; font-size:19px; margin-top:25px;line-height: 30px;letter-spacing: -0.07em;}
#wrap #container.brand .section_visual .section_inner .circle_area .circle {position:absolute; left:50%; top:50%; border-radius:100%;}
#wrap #container.brand .section_visual .section_inner .circle_area .circle:after {content:''; position:absolute; left:50%; display:block; border-radius:100%;}

#wrap #container.brand .section_visual .section_inner .circle_area .circle1 {width:634px; height:634px; margin:-317px 0 0 -317px; animation:circleRotate 30s infinite linear}
#wrap #container.brand .section_visual .section_inner .circle_area .circle1:after {bottom:0; width:13px; height:13px; margin:-7px 0 0 -7px; background:#d3d9d8;}
#wrap #container.brand .section_visual .section_inner .circle_area .circle2 {width:724px; height:724px; margin:-362px 0 0 -362px; animation:circleRotate 50s infinite linear}
#wrap #container.brand .section_visual .section_inner .circle_area .circle2:after {left:100%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; background:#d2dbdb;}
#wrap #container.brand .section_visual .section_inner .circle_area .circle3 {width:800px; height:800px; margin:-400px 0 0 -400px; animation:circleRotate 60s infinite linear}
#wrap #container.brand .section_visual .section_inner .circle_area .circle3:after {width:24px; height:24px; margin:-12px 0 0 -12px; background:#5e7d81;}
@keyframes circleRotate {
  from {opacity:1; transform:rotate(0deg)}
  to {opacity:1; transform:rotate(360deg)}
}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle {position:absolute; border-radius:100%}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle4 {left:370px; top:-90px; width:70px; height:70px; background:#57b87e}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle5 {left:698px; top:-48px; width:48px; height:48px; background:#91cda9}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle6 {left:817px; top:25px; width:80px; height:80px; background:#f9cdb7}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle7 {left:-364px; top:456px; width:60px; height:60px; background:#f9b330}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle8 {left:-214px; top:472px; width:29px; height:29px; background:#56b87e}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle9 {left:-140px; top:452px; width:198px; height:198px; background:#f08b54}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle10 {left:233px; top:574px; width:60px; height:60px; background:#5e7d81}
#wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle11 {left:555px; top:377px; width:118px; height:118px; background:#009bd6}

#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(1) {animation-delay: 0.1s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(2) {animation-delay: 0.2s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(3) {animation-delay: 0.3s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(4) {animation-delay: 0.4s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(5) {animation-delay: 0.5s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(6) {animation-delay: 0.6s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(7) {animation-delay: 0.7s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(8) {animation-delay: 0.8s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(9) {animation-delay: 0.9s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(10) {animation-delay: 1s;}
#wrap #container.brand .section_visual .section_inner .circle_area > div:nth-child(11) {animation-delay: 1.1s;}

#wrap #container.brand .section_visual .section_inner .circle_area > div {opacity:0; animation:circleShow 0.5s forwards ease-in-out}
@keyframes circleShow {
  0% {transform:scale(0); opacity:0}
  80% {transform:scale(1.1); opacity:1}
  100% {transform:scale(1); opacity:1}
}


#wrap #container.brand .section_brand {position:relative; width:100%; max-width:1260px; margin:-260px auto 0}
#wrap #container.brand .section_brand .title_area {font-size:40px;line-height: 1.3;letter-spacing: -0.07em;text-align: center;}
#wrap #container.brand .section_brand .filter_area {font-size:0; text-align:center; margin-top:30px}
#wrap #container.brand .section_brand .filter_area input {position:absolute; left:-9999px; width:0; height:0; opacity: 0;}
#wrap #container.brand .section_brand .filter_area .btn_all,
#wrap #container.brand .section_brand .filter_area label {cursor:pointer; display:inline-block; color:#888; font-size:16px; line-height:40px;letter-spacing: -0.04em;padding:0 23px; border-radius:40px; margin:0 5px 10px; border:1px solid #dadada; background:#fff}
#wrap #container.brand .section_brand .filter_area .btn_all.on,
#wrap #container.brand .section_brand .filter_area input:checked + label {color:#fff; background:#111111}

#wrap #container.brand .section_brand .brand_list {display:flex; flex-wrap: wrap; margin-left:-16px; margin-top:44px}
#wrap #container.brand .section_brand .brand_list li {width:20%; padding-left:16px; margin-bottom:12px}
#wrap #container.brand .section_brand .brand_list li a {overflow: hidden; position:relative; display:flex; align-items: center; justify-content: center; width:240px; height:240px; text-align:center; border-radius:100%; border:1px solid #dcdcdc}
#wrap #container.brand .section_brand .brand_list li a .brand_box {width:100%}
#wrap #container.brand .section_brand .brand_list li a .brand_box img {width:100%}
#wrap #container.brand .section_brand .brand_list li a .brand_box .hover_box {display:none;}

#wrap #container.brand .section_brand .brand_list li a:hover .brand_box .logo_default,
#wrap #container.brand .section_brand .brand_list li a:focus .brand_box .logo_default {display:none}
#wrap #container.brand .section_brand .brand_list li a:hover,
#wrap #container.brand .section_brand .brand_list li a:focus {background:#000}
#wrap #container.brand .section_brand .brand_list li a:hover .hover_box,
#wrap #container.brand .section_brand .brand_list li a:focus .hover_box {display:block}

#wrap #container.brand .section_brand .brand_list li a .logo {/* height:70px; */}
#wrap #container.brand .section_brand .brand_list li a .logo img {width:100%}
#wrap #container.brand .section_brand .brand_list li a .hash {display:none; color:#fff; font-size:15px;letter-spacing: -0.04em;}
#wrap #container.brand .section_brand .brand_list li a:after {content:''; position:absolute; left:50%; bottom:40px; display:none; width:23px; height:23px; margin-left:-12px; background:url('/static/img/brand/icon_link.png') no-repeat; background-size:100% auto}

#wrap #container.brand .section_banner {position:relative; width:100%; text-align:center;}
#wrap #container.brand .section_banner .banner_img {position: relative; display:inline-block; width:100%; max-width:1261px;}
#wrap #container.brand .section_banner .banner_img > img {width:100%}
#wrap #container.brand .section_banner .banner_img .text {position:absolute; left:120px; right:120px; top:190px; bottom:70px; width:640px; color:#111;font-family: 'NotoSansL'; font-size:18px; line-height:30px;letter-spacing: -0.065em; text-align:left}
#wrap.en #container.brand .section_banner .banner_img .text {width: 696px;}
#wrap #container.brand .section_banner .banner_img .text .tit {font-size:38px; line-height:48px;letter-spacing: -0.09em; margin-bottom:4px}
#wrap #container.brand .section_banner .btn {position:relative; display:inline-block; height:50px; line-height:50px; font-size:15px; text-align:center; margin:40px auto 0; padding:0 53px 0 24px; border-radius:50px; border:1px solid #b7b7b7;letter-spacing: -0.01em;}
#wrap #container.brand .section_banner .btn:after {content:''; display:block; position:absolute; top:50%; right:22px; width:17px; height:16px; margin-top:-8px; background:url('/static/img/brand/icon_plus.png') no-repeat}

@media all and (max-width:1300px) {
  #wrap #container.brand .section_brand .brand_list {display:flex; flex-wrap: wrap; margin-left:-1.231vw; margin-top:4.154vw}
  #wrap #container.brand .section_brand .brand_list li {width:20%; padding-left:1.231vw; margin-bottom:0.923vw}
  #wrap #container.brand .section_brand .brand_list li a {overflow: hidden; position:relative; display:flex; align-items: center; justify-content: center; width:18.462vw; height:18.462vw; text-align:center; border-radius:100%; border:0.077vw solid #dcdcdc}
  #wrap #container.brand .section_brand .brand_list li a .brand_box .hover_box {display:none;}

  #wrap #container.brand .section_brand .brand_list li a:hover .brand_box .logo_default,
  #wrap #container.brand .section_brand .brand_list li a:focus .brand_box .logo_default {display:none}
  #wrap #container.brand .section_brand .brand_list li a:hover,
  #wrap #container.brand .section_brand .brand_list li a:focus {background:#111}
  #wrap #container.brand .section_brand .brand_list li a:hover .hover_box,
  #wrap #container.brand .section_brand .brand_list li a:focus .hover_box {display:block}ddd

  #wrap #container.brand .section_brand .brand_list li a .logo {height:5.385vw}
  #wrap #container.brand .section_brand .brand_list li a .hash {color:#fff; font-size:1.154vw}
  #wrap #container.brand .section_brand .brand_list li a:after {content:''; position:absolute; left:50%; bottom:3.077vw; display:none; width:1.769vw; height:1.769vw; margin-left:-0.923vw; background:url('/static/img/brand/icon_link.png') no-repeat; background-size:100% auto}

  #wrap #container.brand .section_banner .banner_img .text {position:absolute; left:9.231vw; right:9.231vw; top:14.615vw; bottom:5.385vw; color:#111; font-family: 'NotoSansL'; font-size:1.385vw; line-height:2.308vw; letter-spacing:-0.03em; text-align:left}
  #wrap #container.brand .section_banner .banner_img .text .tit {font-size:2.923vw; line-height:3.692vw; letter-spacing: -0.07em; margin-bottom:0.308vw}
  #wrap #container.brand .section_banner .banner_img .text .tit img {width:18.615vw}
}


@media all and (max-width:1024px) {
  #wrap #container.brand .section_visual {position:relative; width:100%; height:201.389vw;}
  #wrap #container.brand .section_visual .title_area {z-index:10; position:relative; width:100%; max-width:194.444vw; margin:0 auto; padding:30vw 9.722vw 0}
  #wrap #container.brand .section_visual .title_area h2 {font-family:'NotoSansB'; font-size:8.333vw;}
  #wrap #container.brand .section_visual .section_inner {z-index:9; position:absolute; left:50%; top:0; width:266.667vw; height:201.389vw; margin-left:-133.333vw; clip-path:none; -webkit-clip-path:none; background:none}
  #wrap #container.brand .section_visual .section_inner .section_mo {position:absolute; left:50%; top:0; width:100vw; height:100%;margin-left:-50vw; -webkit-clip-path: polygon(100% 15.278vw, 100% 150.278vw, 0 201.389vw, 0 66.25vw); background:#f7f7f7;}
  #wrap #container.brand .section_visual .section_inner .left_flow {width:1191.8vw; height:12.5vw; margin-top:96vw; background:url('/static/img/brand/img_left_flow_0213.png') left top repeat-x; background-size:auto 100%; animation:leftFlow 50s infinite linear}
  #wrap #container.brand .section_visual .section_inner .right_flow {width:1184.6vw; height:12.5vw; margin-top:6.944vw; background:url('/static/img/brand/img_right_flow_0716.png') left top repeat-x; background-size:auto 100%; animation:rightFlow 55s infinite linear}
  @keyframes leftFlow {
    from {background-position:0 0}
    to {background-position:-595.9vw 0}
  }
  @keyframes rightFlow {
    from {background-position:0 0}
    to {background-position:592.3vw 0}
  }

  #wrap #container.brand .section_visual .section_inner .circle_area {position:absolute; left:50%; top:71.806vw; display:flex; flex-wrap:wrap; align-items: center; justify-content: center; width:74.167vw; height:74.167vw; color:#fff; border-radius:100%; margin-left:-37.083vw; box-shadow:0vw 0vw 2.778vw 2.778vw rgba(238,110,46,0.1); background:#ee6e2e}
  #wrap #container.brand .section_visual .section_inner .circle_area .text_box {position:relative}
  #wrap #container.brand .section_visual .section_inner .circle_area .tit {font-family:'NotoSansB'; font-size:6.667vw; line-height: 8vw;;}
  #wrap #container.brand .section_visual .section_inner .circle_area .sub {font-family:'NotoSansL'; font-size:2.639vw; line-height:5vw; margin-top:3.472vw;}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle {position:absolute; left:50%; top:50%; border-radius:100%;}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle:after {content:''; position:absolute; left:50%; display:block; border-radius:100%;}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle1 {width:88.056vw; height:88.056vw; margin:-44.028vw 0 0 -44.028vw; animation:circleRotate 30s infinite linear}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle1:after {bottom:0; width:1.806vw; height:1.806vw; margin:-0.972vw 0 0 -0.972vw; background:#d3d9d8;}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle2 {width:100.556vw; height:100.556vw; margin:-50.278vw 0 0 -50.278vw; animation:circleRotate 50s infinite linear}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle2:after {left:100%; top:50%; width:4.167vw; height:4.167vw; margin:-2.083vw 0 0 -2.083vw; background:#d2dbdb;}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle3 {width:111.111vw; height:111.111vw; margin:-55.556vw 0 0 -55.556vw; animation:circleRotate 60s infinite linear}
  #wrap #container.brand .section_visual .section_inner .circle_area .circle3:after {width:3.333vw; height:3.333vw; margin:-1.667vw 0 0 -1.667vw; background:#5e7d81;}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle {position:absolute; border-radius:100%}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle4 {left:51.389vw; top:-12.5vw; width:9.722vw; height:9.722vw; background:#57b87e}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle5 {left:96.944vw; top:-6.667vw; width:6.667vw; height:6.667vw; background:#91cda9}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle6 {left:113.472vw; top:3.472vw; width:11.111vw; height:11.111vw; background:#f9cdb7}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle7 {left:-50.556vw; top:63.333vw; width:8.333vw; height:8.333vw; background:#f9b330}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle8 {left:-29.722vw; top:65.556vw; width:4.028vw; height:4.028vw; background:#56b87e}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle9 {left:-19.444vw; top:62.778vw; width:27.5vw; height:27.5vw; background:#f08b54}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle10 {left:32.361vw; top:79.722vw; width:8.333vw; height:8.333vw; background:#5e7d81}
  #wrap #container.brand .section_visual .section_inner .circle_area .static_circle.circle11 {left:77.083vw; top:52.361vw; width:16.389vw; height:16.389vw; background:#009bd6}

  #wrap #container.brand .section_brand {margin-top:4.861vw}
  #wrap #container.brand .section_brand .title_area {font-size:8.333vw; line-height: 10vw; letter-spacing: -0.05em;}
  #wrap #container.brand .section_brand .filter_area .btn_all, #wrap #container.brand .section_brand .filter_area label {height:8.333vw; line-height:7.9vw; font-size:3.611vw; padding:0 4.861vw; margin: 0 0.417vw 1.667vw; border-radius:8.333vw}
  #wrap.en #container.brand .section_brand .filter_area .btn_all, #wrap #container.brand .section_brand .filter_area label {font-size: 3.0vw;padding: 0 4.1vw;}
  #wrap #container.brand .section_brand .brand_list {justify-content: space-between; width:100%; font-size:0; padding:0 6vw; margin-top:5.556vw; margin-left:0}
  #wrap #container.brand .section_brand .brand_list li {width:41.667vw; padding-left:0; margin-bottom:2.222vw}
  #wrap #container.brand .section_brand .brand_list li a {display: flex; width:41.667vw; height:41.667vw}
  #wrap #container.brand .section_brand .brand_list li a:after {bottom:6.667vw; width:4.028vw; height:4.028vw; margin-left:-2.083vw; background:url('/static/img/brand/icon_link_b.png') no-repeat; background-size:100% auto}
  #wrap #container.brand .section_brand .brand_list li a:hover,
  #wrap #container.brand .section_brand .brand_list li a:focus {padding:0; background:none}
  #wrap #container.brand .section_brand .brand_list li a .logo {display:none}
  #wrap #container.brand .section_brand .brand_list li a:hover .brand_box .logo_default,
  #wrap #container.brand .section_brand .brand_list li a:focus .brand_box .logo_default {display:block}
  #wrap #container.brand .section_brand .brand_list li a .brand_box .hover_box {display:block}
  #wrap #container.brand .section_brand .brand_list li a .hash {z-index:10; position:relative; color:#888888; font-size:2.639vw; line-height:3.75vw}
  #wrap #container.brand .section_brand .brand_list li a .brand_box .logo_default {position:relative;}
  #wrap #container.brand .section_brand .brand_list li a .brand_box .logo_default img {position:absolute; left:50%; top:50%;transform: translate(-50%, -50%);}

  #wrap #container.brand .section_banner .banner_img .text {position:static; width:81.528vw; color:#585858; font-family: 'NotoSansL'; font-size:3.333vw; line-height:5.556vw; letter-spacing:-0.02em; text-align:left; padding:20.833vw 6.944vw 0 6.944vw; margin-bottom:4.861vw}
  #wrap.en #container.brand .section_banner .banner_img .text{width:81.528vw;}
  #wrap #container.brand .section_banner .banner_img .text .tit {color:#000; font-size:6.861vw; line-height:8.667vw; letter-spacing: -0.02em; margin-bottom:4.444vw}
  #wrap #container.brand .section_banner .banner_img .text .tit img {width:43.75vw; vertical-align: bottom;}
  #wrap #container.brand .section_banner .btn {position:absolute; left:6.944vw; bottom:52.222vw; height:10.556vw; line-height:10.278vw; font-size:3.056vw; padding:0 11.111vw 0 5.417vw; border-radius:10.556vw; background:rgba(255,255,255,0.7)}
  #wrap #container.brand .section_banner .btn:after {width:3.472vw; height:3.472vw; margin-top:-1.667vw; background-size:100% auto;}

}

/****************************************
 브랜드 영상 
*/
#wrap #container.brand.video .title_area { z-index:10; position:relative; width:100%; max-width:1400px; margin:0 auto; padding:190px 70px 120px; } 
#wrap #container.brand.video .title_area h2 { font-family:'NotoSansB'; font-size:48px; } 
#container.brand .grid_container { position:relative; width:100%; max-width: 1400px; padding-right: 70px; padding-left: 70px; margin: 0 auto; } 
.video-wrap { position: relative; } 
.video-wrap video { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0);  -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;}
@media all and (max-width:1024px) {
   #wrap #container.brand.video .title_area { padding:30vw 6.67vw 5.56vw; } 
   #wrap #container.brand.video .title_area h2 { font-size:8vw; } 
   #container.brand .grid_container { padding-right: 6.67vw; padding-left: 6.67vw; } 
}
 
/* 배너 */
.repVideo-swiper { overflow: hidden; } 
.repVideo-swiper .swiper-slide { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 111px; -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.43, 1.05); -o-transition: width 0.3s cubic-bezier(0, 0, 0.43, 1.05); transition: width 0.3s cubic-bezier(0, 0, 0.43, 1.05); } 
.repVideo-swiper .swiper-slide.ui-active { width: 928px; } 
.repVideo-swiper .swiper-slide .video-wrap { height: 522px; } 
.repVideo-swiper .swiper-slide .video-wrap { background-position: center; background-repeat: no-repeat; background-size: cover; }
.repVideo-swiper .swiper-slide .__cover { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; } 
.repVideo-swiper .swiper-slide .__logo { position: absolute; left: 30px; bottom: 30px; } 
.repVideo-swiper .swiper-slide .__logo img { height: 52px; } 
.repVideo-swiper .swiper-slide.ui-active .video-wrap::after { content:''; position:absolute; top:0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, color-stop(73.44%, rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.50))), 50% / cover no-repeat; background: -o-linear-gradient(top, rgba(0, 0, 0, 0.00) 73.44%, rgba(0, 0, 0, 0.50) 100%), 50% / cover no-repeat; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 73.44%, rgba(0, 0, 0, 0.50) 100%), 50% / cover no-repeat; } 
.repVideo-swiper .swiper-slide.ui-active .video-control { opacity: 1; } 
.repVideo-swiper .swiper-slide .video-control { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; height: 35px; right: 30px; bottom: 30px; z-index: 10; } 
.video-control .toggle-play { position: absolute; top: 0; left: 0; display: block; width: 35px; height: 35px; background-position: center; background-repeat: no-repeat; cursor: pointer; z-index: 10; } 
.video-control .progress-bar { width: 200px; height: 4px; background-color: rgba(255, 255, 255, 0.5); margin-left: 40px; -webkit-transition: width 0.3s 0.2s cubic-bezier(0, 0, 0.43, 1.05); -o-transition: width 0.3s 0.2s cubic-bezier(0, 0, 0.43, 1.05); transition: width 0.3s 0.2s cubic-bezier(0, 0, 0.43, 1.05); } 
.video-control .progress-bar .bar { display: block; width: 0%; height: 100%; background-color: #fff; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; transition: 0.2s linear; } 
@media all and (min-width:1025px) {
   .repVideo-swiper .swiper-slide:not(.ui-active) .video-wrap video { opacity: 0; }
   .repVideo-swiper .swiper-slide:not(.ui-active) { cursor: pointer; } 
   .repVideo-swiper .swiper-slide:not(.ui-active) .video-control { opacity: 0; } 
   .repVideo-swiper .swiper-slide:not(.ui-active):nth-child(1) .__cover { background: rgba(243, 115, 33, 0.5) 50% / cover no-repeat; } 
   .repVideo-swiper .swiper-slide:not(.ui-active):nth-child(2) .__cover { background: rgba(253, 185, 19, 0.5) 50% / cover no-repeat; } 
   .repVideo-swiper .swiper-slide:not(.ui-active):nth-child(3) .__cover { background: rgba(69, 185, 124, 0.5) 50% / cover no-repeat; } 
   .repVideo-swiper .swiper-slide:not(.ui-active):nth-child(4) .__cover { background: rgba(0, 153, 215, 0.5) 50% / cover no-repeat; } 
   .repVideo-swiper .swiper-slide:not(.ui-active) .__logo { left: 50%; bottom: 20px; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } 
   .repVideo-swiper .swiper-slide:not(.ui-active) .__logo img { max-height: 30px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; } 
   .swiper-slide:not(.ui-active) .video-control .progress-bar { width: 0; } 
   .video-control .toggle-play { background-image: url('/static/img/brand/video-pause.svg');}
   .video-control[data-state="pause"] .toggle-play { background-image: url('/static/img/brand/video-play.svg'); } 
}
@media all and (max-width:1024px) {
    .repVideo-swiper { width: calc(100% + 6.67vw); }
    .repVideo-swiper .swiper-slide {-webkit-box-flex: 0;-ms-flex: none;flex: none; }
    .repVideo-swiper .swiper-slide .video-wrap {height: 47.5vw; }
    .repVideo-swiper .swiper-slide.swiper-slide-active .video-wrap {background: none !important;}
    .repVideo-swiper .swiper-slide:not(.swiper-slide-active) .video-wrap video { opacity: 0;}
    .repVideo-swiper .swiper-slide.swiper-slide-active .__cover {background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.50)), color-stop(37.82%, rgba(0, 0, 0, 0.00))), 50% / cover no-repeat;background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 37.82%), 50% / cover no-repeat;background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 37.82%), 50% / cover no-repeat; }
    .repVideo-swiper .swiper-slide .__logo {left: 2.78vw;bottom: 2.78vw; }
    .repVideo-swiper .swiper-slide .__logo img {max-height: 3.47vw; }
    .repVideo-swiper .swiper-slide .video-control {display: block;width: 100%;height: 100%;right: 0;bottom: 0; }
    .video-control .progress-bar {position: absolute;width: 13.89vw; height: 0.56vw;right: 2.78vw;bottom: 4.17vw; }
    .video-control .toggle-play {width: 6.94vw;height: 6.94vw;left: 50%;top: 50%;margin-left: -3.47vw;margin-top: -3.47vw;background-color: rgba(0,0,0,0.5);border-radius: 100%;background-size: 2.78vw; }
    .video-control .toggle-play { background-image: url('/static/img/brand/video-play.svg'); }
    .video-control[data-state="pause"] .toggle-play { background-image: url('/static/img/brand/video-pause.svg'); }
    .swiper-slide.swiper-slide-active .video-control .toggle-play,
    .video-control[data-state="pause"] .toggle-play {-webkit-animation: togglePlay .5s linear 1 normal forwards;animation: togglePlay .5s linear 1 normal forwards; }
}
 
/*리스트 */
.brand-list { margin-top: 100px; } 
.brand-list .list-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } 
.brand-list .list-wrapper { border-top: 1px solid #DCDCDC; border-left: 1px solid #DCDCDC; } 
.brand-list .list-wrapper > li { position: relative; height: 0; padding-top: 100%; border-right: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; } 
.brand-list .__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; cursor: pointer; } 
.brand-list .brand-item .brand-img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: 100%; height: 100%; background-color: #fff; z-index: 10; } 
.brand-list .brand-item .brand-img img { max-width: 200px; max-height: 165px;}
.brand-item .brand-img figcaption { position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } 
.brand-item .brand-img figcaption::after { content: ''; display: block; width: 30px; height: 40px; background-image: url(/static/img/brand/click-mouse.svg); background-repeat: no-repeat; background-position: center; background-size: contain; } 
.brand-item .video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.43, 1.05); -o-transition: all 0.3s cubic-bezier(0, 0, 0.43, 1.05); transition: all 0.3s cubic-bezier(0, 0, 0.43, 1.05); opacity: 0}
.brand-item .brand-name { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.50)), color-stop(18.81%, rgba(0, 0, 0, 0.00))), 50% / cover no-repeat; background: -o-linear-gradient(top, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 18.81%), 50% / cover no-repeat; background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 18.81%), 50% / cover no-repeat; } 
.brand-item .brand-name .txt { position: absolute; top: 60px; left: 30px; font-size: 16px; font-family: 'NotoSansM'; color: #fff; line-height: 1; opacity: 0; -webkit-transition: top 0.3s linear, opacity 0.3s linear; -o-transition: top 0.3s linear, opacity 0.3s linear; transition: top 0.3s linear, opacity 0.3s linear; } 
@media all and (min-width:1025px) {
    .brand-item.active .video-wrap {opacity: 1;}
   .brand-item.active, .brand-item.__open { z-index: 20; } 
   .brand-item.active .__inner, .brand-item.__open .__inner { overflow: visible; } 
   .brand-item.active .brand-img, .brand-item.__open .brand-img { z-index: 0; } 
   .brand-item.active .video-wrap, .brand-item.__open .video-wrap { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 
   .brand-item.active .brand-name .txt, .brand-item.__open .brand-name .txt { top: 30px; opacity: 1; } 
}
@media all and (max-width:1024px) {
    .brand-list { margin-top: 13.89vw; }
   .brand-list .list-wrapper {-ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); }
   .brand-list .brand-item .brand-img img { max-width: 24.5vw; max-height: 17.92vw;}
   .brand-item .brand-img figcaption {bottom: 3.47vw;}
   .brand-item .brand-img figcaption::after { height: 5.56vw; background-image: url(/static/img/brand/click-touch.svg);}
}
  
/****************************************
   브랜드 영상 - 팝업
*/
body.stop_scroll { overflow: hidden; height: 100%; min-height: 100%; padding-right: 17px; -ms-touch-action: none; touch-action: none; } 
.popup { display: none; position: fixed; left: 0; top: 0px; height: 100%; width: 100%; padding: 0 20px; background: rgba(0, 0, 0, 0.5); overflow: visible; z-index: 1000; } 
.popup.open { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-animation: fadeInType1 0.3s linear both; animation: fadeInType1 0.3s linear both; } 
.popup .popup_container { width: 1470px; background-color: #fff; border-radius: 20px; overflow: hidden; } 
.popup.open .popup_container { -webkit-animation: fadeInType1 0.3s linear both; animation: fadeInType1 0.3s linear both; } 
.popup .__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;position: relative; height: 80px; padding: 0px 30px; background: -webkit-gradient(linear, left top, right top, color-stop(0.68%, #F37321), color-stop(33.5%, #FDB913), color-stop(66.32%, #45B97C), color-stop(99.14%, #0099D7)); background: -o-linear-gradient(left, #F37321 0.68%, #FDB913 33.5%, #45B97C 66.32%, #0099D7 99.14%); background: linear-gradient(90deg, #F37321 0.68%, #FDB913 33.5%, #45B97C 66.32%, #0099D7 99.14%); } 
.popup .__header .brand { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%;}
.popup .__header .brand img {max-height: 40px;}
.popup .popup_close { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 15px; right: 15px; width: 50px; height: 50px; padding: 0; background-color: transparent; cursor: pointer; font-size: 0; } 
.popup .popup_close::before,
.popup .popup_close::after { content: ""; display: block; width: 22px; height: 2px; margin: -1px 0; background-color: #ffffff; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } 
.popup .popup_close::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } 
.popup .popup_close::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } 
.popup .__body > .__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; height: 575px; padding: 30px; overflow: hidden; } 
.popup .video-wrap { height: 0; padding-top: 56.25%; } 
.popup .popup-main-video { -webkit-box-flex: 0; -ms-flex: 0 0 832px; flex: 0 0 832px; min-width: 832px; }
.popup-main-video .__title-box {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 60px;}
.popup-main-video .__title-box > h2 { max-width: 100%; font-size: 18px; letter-spacing: -0.05em; word-wrap: break-word; }
.popup .popup-list-wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-height: 100%; padding-left: 20px; padding-right: 0px; overflow-x: hidden; overflow-y: auto; }
.popup .popup-list-wrap::-webkit-scrollbar { width: 18px; }
.popup .popup-list-wrap::-webkit-scrollbar-thumb { border-radius: 8px; border-right: 4px solid transparent; border-left: 4px solid transparent; background-color: #DCDCDC; background-clip: content-box;}
.popup .popup-video-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 30px; } 
.popup-video-list .video-item { -webkit-box-flex: 1; -ms-flex: 1 1 256px; flex: 1 1 256px; max-width:100%; cursor: pointer; }
.popup-video-list .video-item .__title-box { padding-top: 10px; line-height: 1.5; word-wrap: break-word; }
.popup-video-list .video-item .__title-box span { font-size: 14px; letter-spacing: -0.03em; }
.popup-video-list .video-item .droplet_spinner { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.video-item.playing .video-wrap video { opacity: 0.3; } 
.video-item.playing .__title-box { opacity: 0.3; }
.popup .brand img { cursor: pointer; }
@media (min-width:1500px) {
	.popup-video-list .video-item { min-width: 256px; } 
	.popup-video-list .video-item .__item { max-width: 256px; } 
}
@media (max-width:1175px) {
	.popup .popup-main-video {-webkit-box-flex: 0;-ms-flex: 0 0 70%;flex: 0 0 70%;min-width: 70%; } 
}
@media all and (max-width:1024px) {
	body.stop_scroll { padding-right: 0; } 
	.popup { padding: 4.44vw; } 
	.popup .popup_container {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;width: 100%; max-height: 100%; border-radius: 2.78vw; } 
	.popup .__header {-webkit-box-flex: 0;-ms-flex: 0 0 11.11vw;flex: 0 0 11.11vw;height: 11.11vw;min-height: 11.11vw;padding: 0 4.17vw; } 
	.popup .__header .brand img { max-height: 5.56vw; } 
	.popup .popup_close {width: 6.94vw;height: 6.94vw;top: 2.08vw;right: 2.08vw; } 
	.popup .__body {overflow-x: hidden;overflow-y: auto; } 
	.popup .__body::-webkit-scrollbar { width: 2.5vw; height: 90%;}
	.popup .__body::-webkit-scrollbar-thumb { border-radius: 50em; border: 0.56vw solid transparent; background-color: #DCDCDC; background-clip: content-box;}
	.popup .__body > .__inner {display: block;height: auto;padding: 5.56vw; } 
	.popup .popup-main-video {min-width: 100%; } 
	.popup-main-video .__title-box { display:block; padding-top: 1.39vw; }
	.popup-main-video .__title-box > h2 {font-size: 4.17vw; white-space: normal;  }
	.popup .popup_close::before, .popup .popup_close::after {width: 3.06vw; height: 0.28vw; } 
  .popup .popup-list-wrap { padding-left: 0; padding-right: 0; padding-bottom: 1.39vw; overflow-x: auto;overflow-y: hidden; }
  .popup .popup-list-wrap::-webkit-scrollbar {height: 1.6vw; } 
  .popup .popup-list-wrap::-webkit-scrollbar-thumb { border-radius: 50em; border: 1px solid transparent; background-color: #DCDCDC; background-clip: content-box;}
	.popup .popup-video-list {-ms-flex-wrap: nowrap; flex-wrap: nowrap;-webkit-column-gap: 2.22vw;-moz-column-gap: 2.22vw;column-gap: 2.22vw;padding-top: 5.56vw;} 
	.popup-video-list .video-item {-webkit-box-flex: 0;-ms-flex: 0 0 45%;flex: 0 0 45%; } 
	.popup-video-list .video-item .__title-box {padding-top: 2.08vw; } 
	.popup-video-list .video-item .__title-box span {display: block;display: -webkit-box;max-height: 10.28vw;-o-text-overflow: ellipsis;text-overflow: ellipsis;overflow: hidden;word-break: break-word;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 3.19vw; } 
}
 
/****************************************
 브랜드 영상 - 로딩 css 
*/
.droplet_spinner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 
.droplet_spinner .droplet { width: 6px; height: 6px; margin: 0 5px; background-color: #333; border-radius: 50%; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: droplet 1.2s cubic-bezier(0.3, 0.01, 0.4, 1) infinite; animation: droplet 1.2s cubic-bezier(0.3, 0.01, 0.4, 1) infinite; } 
.droplet_spinner .droplet:nth-child(1) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } 
.droplet_spinner .droplet:nth-child(2) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } 
.droplet_spinner .droplet:nth-child(3) { -webkit-animation-delay: 0s; animation-delay: 0s; } 
@media all and (max-width:1024px) {
	.droplet_spinner .droplet {width: 0.83vw;height: 0.83vw;margin: 0 0.69vw; } 
}

@-webkit-keyframes fadeInType1 { 
	0% { opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); } 
	100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}
@keyframes fadeInType1 { 
	0% { opacity: 0; -webkit-transform: translate(0, 20px); transform: translate(0, 20px); } 
	100% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}
@-webkit-keyframes droplet { 0%, 100% { opacity: 1; } 
	50% { opacity: 0.3; } 
}
@keyframes droplet { 0%, 100% { opacity: 1; } 
	50% { opacity: 0.3; } 
}
@-webkit-keyframes togglePlay {
	from {opacity: 1}
	to {
		opacity: 0;
		-webkit-transform: scale(2);
		transform: scale(2)
	}
}
@keyframes togglePlay {
	from {opacity: 1}
	to {
		opacity: 0;
		-webkit-transform: scale(2);
		transform: scale(2)
	}
}