/* BASIC css start */
/* BASIC css start */

div#contentWrapper #contentWrap {position: relative;padding: 0;margin-top: 50px;}
div#mfooter {margin-top: 0;}
#contentWrap dl.loc-navi {width: 100%; margin:  0;}
#contentWrap dl.loc-navi dd {display: flex; justify-content: flex-end; max-width: 1600px; padding: 0 4%; margin: 0 auto;}
#contentWrap video {/*width: 100%;*/ height:750px; border-radius:5px;}


div.text .t01 {font-size: 25px;font-weight: 600;color: #e7e7e7;letter-spacing: -1px;}
div.text .t03 {margin-top: 15px;font-size: 17px;line-height: 32px;font-weight: 400;color: #bcbcbc;letter-spacing: -1px;}
div.text .t03 span {display: block;}
div.text .t03 span + span {margin-top: 25px;}


div.sec02 {background: url('/design/dongjin01/about_bg.jpg');background-size: cover;background-position-y: bottom;height: 1300px;margin-top: 120px;padding-top: 120px;}
div.sec02 .img_logo {text-align:center;margin-bottom: 100px;}
div.sec02 .text {padding: 3% 10%;box-sizing: border-box;}
div.sec02 a.more {position: relative; display: block; margin-top: 48px; width: 160px; padding: 12px 0 12px 8px; box-sizing: border-box; font-size: 14px; line-height: 24px; letter-spacing: 0.04em; font-weight: 700; color: #1a1a1a; transition: color 0.5s;}
div.sec02 a.more span {position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;}
div.sec02 a.more:hover {color: #fff;}
div.sec02 a.more svg path,
div.sec02 a.more svg rect {transition: 0.5s;}
div.sec02 a.more:hover svg path {stroke: #fff;}
div.sec02 a.more:hover svg rect {fill : #fff;}
div.sec02 a.more:after {content: ''; display: block; width: 100%; height: 2px; background-color: #1a1a1a; z-index: 1; position: absolute; bottom: 0; left: 0; transition: height 0.5s;}
div.sec02 a.more:hover:after {height: 100%;}




div.sec01 #comBnr .swiper-button-prev {
    opacity: 0;
    background: url(//skin.makeshop.co.kr/skin/everyday/images/every_arr_l.png) no-repeat;
    height: 32px;
    width: 16px;
    background-size: contain;
}

div.sec01 #comBnr .swiper-button-next {
    opacity: 0;
    background: url(//skin.makeshop.co.kr/skin/everyday/images/every_arr_r.png) no-repeat;
    height: 32px;
    width: 16px;
    background-size: contain;
}
div.sec01 #comBnr .swiper-wrapper {padding-bottom:20px;}
div.sec01 #comBnr .swiper-button-next,
div.sec01 #comBnr .swiper-button-prev {top: 63% !important; transform: translateY(-50%); margin-top: 0 !important;}
div.sec01 #comBnr .swiper-button-next::after,
div.sec01 #comBnr .swiper-button-prev::after {display: none;}
div.sec01 #comBnr:hover .swiper-button-next,
div.sec01 #comBnr:hover .swiper-button-prev {opacity: 1;}
div.sec01 #comBnr .swiper-button-prev {left: 5%;}
div.sec01 #comBnr .swiper-button-next {right: 5%;}
div.sec01 #comBnr .swiper-pagination {
    bottom: 0 !important;
    left: 0;
    right: 0;
    width: 1480px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    /* 페이지네이션을 꽉 채우기 위해 추가 */
}
div.sec01 #comBnr .swiper-pagination .swiper-pagination-bullet {
    background: var(--000);
    opacity: 0.2; 
    border-radius: 0;
    margin: 0;
    height: 2px;
    width: auto;
    /* 기본 너비 초기화 */
    flex-grow: 1;
    /* 유연한 너비를 허용 */
}
div.sec01 #comBnr .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;}
div.sec01 #comBnr .txt {text-align: center; padding: 65px 0;}
div.sec01 #comBnr .txt h1 {font-size: 32px; font-weight: 600; text-transform: uppercase; margin-top:35px;}
div.sec01 #comBnr .txt p {font-size: 14px; margin-top: 15px; line-height: 1.5;}



/* 슬라이드 내 비디오 크기 최적화 */
#comBnr .swiper-slide video {
    width: 100%;
    display: block;
    border-radius: 10px; /* 모서리를 살짝 굴리면 더 예쁩니다 */
    object-fit: cover;   /* 비디오 비율이 깨지지 않게 꽉 채움 */
}

/* 슬라이드 바(Progressbar) 색상 및 위치 조정 (선택사항) */
#comBnr .swiper-pagination-progressbar {
    background: rgba(0,0,0,0.1); /* 바 배경색 */
    height: 2px;                /* 바 두께 */
    bottom: 0 !important;       /* 하단 배치 */
    top: auto;
}

#comBnr .swiper-pagination-progressbar-fill {
    background: #000;           /* 진행 바 색상 (검정색 예시) */
}


.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
  border-top: 0.5px solid var(--color-border-tertiary);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.marquee-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 60px;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  
}

.logo-item img {height:40px;}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* BASIC css end */


/* BASIC css end */