/* BASIC css start */
#footer{margin:0 !important}

/* 상단(흰아이콘) */
#container #header{position: fixed !important}
#container #header .header_top .menubtn { width: 23px; background: url(//skin.makeshop.co.kr/skin/mypage/m/icon/menu_white.png)no-repeat; background-size: contain;}
#container #header .header_top .logo a{ width: 115px;  background: url(/design/linetech/10587/es_php/m/common/logo_white.png)no-repeat; background-size: contain;}

/* 상단고정(검정아이콘) */
#header.header-scroll .header_top .menubtn{background: url(//skin.makeshop.co.kr/skin/mypage/m/icon/menu_black.png)no-repeat !important; background-size: contain !important;}
#header.header-scroll .header_top .logo a{background: url(/design/linetech/10587/es_php/m/common/logo_black.png)no-repeat !important; background-size: contain !important;}

/* 롤링배너 */
#mainSpot .mainSpot_in img{width:100%}
#mainSpot .mainSpot_in{ position: relative;}
#mainSpot .mainSpot_in .slide_content{position: absolute; top: 50%; left: 50%; width: 82%; transform: translate(-50%, -50%); animation: moveUp 1.3s forwards; text-align: center;}
#mainSpot .mainSpot_in .slide_content h2{ margin: 0 0 20px; color: #fff; font-size: 2rem; font-family: 'Brandon Grotesque', "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: bold; letter-spacing: 1px; line-height: 35px;}
#mainSpot .mainSpot_in .slide_content p{ margin: 0 0 30px; color: #fff; font-size: 1rem; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif; line-height: 30px; }
#mainSpot .mainSpot_in .slide_content span a{ display: inline-block; width: 140px; height: 44px; line-height: 44px; border: 1px solid #fff;}
#mainSpot .mainSpot_in .slide_content span a img{width: 30px; vertical-align: middle;}
@keyframes moveUp{
    from {
        opacity:0; margin-top:30px
    }
    to{
        opacity:1; margin-top:0;
    }
}
/* //롤링배너 */


#mainSpot{
  position: relative;
  width: 100%;
  height: 636px;          /* 요청 높이 */
  overflow: hidden;
}

#mainSpot .mainSpot_slider{
  position: relative;
  width: 100%;
  height: 100%;
}

/* 각 슬라이드 */
#mainSpot .mainSpot_in{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

#mainSpot .mainSpot_in.is-active{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

#mainSpot .mainSpot_in img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 828x1180 이미지를 636px 높이에 맞춰 커버 */
  display: block;
}

/* 텍스트 영역 */
#mainSpot .slide_content{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  color: #fff;
}

/* 가독성용 그라데이션 */
#mainSpot .mainSpot_in::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 1;
}

#mainSpot .slide_content h2{
  margin: 0 0 8px 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
}

#mainSpot .slide_content p{
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.45;
  opacity: .95;
}

#mainSpot .slide_content span a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
}

#mainSpot .slide_content span img{
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 도트 */
#mainSpot .mainSpot_dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 5;
}

#mainSpot .mainSpot_dots button{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.45);
}

#mainSpot .mainSpot_dots button.is-active{
  width: 18px;
  background: rgba(255,255,255,.95);
}



/*파트너브랜드 흐르는 로고*/

/* 컨테이너 */
.brandMarquee{
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
}

.brandMarquee__track{
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
  will-change: transform;
  animation: brand-marquee 16s linear infinite;
}

.brandMarquee__item{
  flex: 0 0 auto;
  height: 50px; /* 모바일 로고 높이 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.brandMarquee__item img{
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* 핵심: 2세트 중 1세트 길이만큼 이동(-50%) */
@keyframes brand-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .brandMarquee__track{ animation: none; }
}

/*.brandMarquee__track{ animation-duration: 10s; }  빠름 */
.brandMarquee__track{ animation-duration: 22s; } /* 느림 */


.brandMarquee__track{ animation-direction: reverse; } /*방향 반대로*/





/* 브랜드 스토리 */
figcaption p{margin: 20px 0 0; color: #777777; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 1.2rem; line-height: 35px;}
.subBanner{padding: 70px 20px;}
.subBanner .brandBox figcaption{ margin: 35px 0 0;}
.subBanner .brandBox > a img{width: 100%;} 

/* 색션 공통부분 */
.setionTit{}
.setionTit h3{ display: inline-block; margin: 0 0 30px; padding: 0 0 6px; border-bottom: 1px solid #000; font-size: 1rem; color: #000; font-weight: bold; letter-spacing: 6px; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif;}
.setionTit .line{display: block; width: 7px; height: 1px; background: #000; margin: 0 auto 20px;}
.setionTit h1{ color: #000; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 2.2rem; line-height: 45px;}
.setionTit h4{ color: #000; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif; font-size: 2.2rem; line-height: 45px; font-weight: 800;}

/* 서브영역 */
.middleArea{ padding: 40px 20px; background: #f1f2f6; text-align: center;}
.middleArea .md_iconBox{margin: 50px 0 0;}
.middleArea .md_iconBox img{ width: 48px; margin: 0 22px;}
.middleArea .md_iconBox img:first-of-type{margin-left:0}
.middleArea .md_iconBox img:last-of-type{margin-right:0}
.middleArea p{ margin: 50px 0 0; color: #000; font-size: 1.2rem; font-family: 'Lato',"맑은 고딕",'Malgun Gothic', sans-serif; line-height: 37px;}


.middleArea{ }
.md_iconBox02 {margin: 50px auto 0; text-align:center; clear:both; !important;}
.md_iconBox02 img { width:100%; margin:0 auto;}


/*연혁*/
#history .md_historyBox {margin: 50px auto 0;}
#history .md_historyBox img { width:100%; }

#history{
  padding-top:100px;
  position: relative;
  overflow: hidden;
}


#about{ 
    padding-top:100px;
    position: relative;
    overflow: hidden; 

}
    
    
#machlink{
    padding-top:100px;
    position: relative;
    overflow: hidden; 

}
    

#board_01 {
    padding-top:100px;
    position: relative;
    overflow: hidden; 

}


#board_02 {
    padding-top:100px;
    position: relative;
    overflow: hidden; 

}



#contact {
    padding-top:100px;
    position: relative;
    overflow: hidden;

}
    
    
    

/* 게시판 영역 */
.board_area{ padding: 50px 20px; text-align: center;}
.board_area .board_wrap > div{margin:42px 0 0}
.board_area .board_wrap div .board_more{ height:20px; padding: 0 0 8px; margin:0 0 17px; border-bottom: 1px solid #424242; color: #000; font-size: 1rem; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif; text-align: left;}
.board_area .board_wrap div .board_more a{ float: right; margin: 2px 0 0;}
.board_area .board_wrap div .board_gallery_inner{ margin: 0 0 10px;}
.board_area .board_wrap div .board_gallery_inner .board_gallery_con:after{content:''; display:block; clear:both;}
.board_area .board_wrap div .board_gallery_inner .board_gallery_con .con{float: left;}
.board_area .board_wrap div .board_gallery_inner .board_gallery_con .date{float: right;}
.board_area .board_wrap div .board_gallery_inner .board_gallery_con p{color: #505050; font-size: 15px; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif;}

/* 지도 */
.map_wrap{ padding: 50px 20px; background: #6b7bb7; clear:both;}
.map_wrap .map_area .map_left .map_info{ padding: 14px 0 0;  clear:both;}
.map_wrap .map_area .map_left .map_info:after{content:''; display:block; clear:both;}
.map_wrap .map_area .map_left .map_info p{ margin: 30px 0 0; color: #fff; font-size: 17px; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif;}
.map_wrap .map_area .map_left .map_info span{ display: block; margin: 10px 0 0; color: #fff; font-size: 20px; font-family: 'Lato', "맑은 고딕", "Malgun Gothic", sans-serif; font-weight: 300; line-height: 22px;}
.map_wrap .map_area .map_left .map_info div{ float: center; }
.map_wrap .map_area .map_main{margin: 40px 0 0; width:100%;  }

/*쿠폰 혜택 버튼*/
.main .coupon-benefit {position:relative; margin:-25px 0 10px 0} 
.main .btn-coupon { display:inline-block; height:16px; padding:0; margin-left:5px; border:1px solid #000; font-size:10px;}
.main .btn-coupon span { display:inline-block; height:16px; padding:0 5px; color:#fff; background:#000; vertical-align:top; font-size:11px; }
.main .btn-coupon em { display:inline-block; height:16px; padding:0 3px 0 0; font-size:10px; vertical-align:top; color:#000; }
/* BASIC css end */