@charset "utf-8";

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes lineDraw {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 100%;
  }
}


/* mainVisual : Start */
#main-section-visual { position:relative; z-index:2; }
#main-section-visual .main_con {
	position:relative;
	background: #fff;
	height: 100vh;
}

#main-section-visual .main_con .motion_obj {
  position: absolute;
  left:0;
  width:100%;
  text-align:center;
  top: 26%;
  z-index: 999;
}

#main-section-visual .main_con .motion_obj .txt2 { margin:10px 0; }


#main-section-visual .main_visual {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#main-section-visual .main_con .control_area { 
  position: absolute;
  bottom: 50px;
  right: 120px;
  width: 300px;
  height: 70px; 
  overflow: hidden;
  z-index: 2;
}

#main-section-visual .main_con .control_area .status_bar { display: flex; align-items: center; width: 80px; height: 2px; position: absolute; right: 97px; bottom: 8px; }
#main-section-visual .main_con .control_area .status_bar span {width: 80px; display: block; height: 2px; background: #8e8f8f; position: relative;}
#main-section-visual .main_con .control_area .status_bar i {position: absolute; left: 0; width: 0; background:#fff; height: 2px;}

#main-section-visual .main_con .control_area .current { position: absolute; right: 205px; bottom: 0; font-family: "Montserrat"; font-size: 18px; font-weight: 600; color: #fff; line-height: 1;}
#main-section-visual .main_con .control_area .total { position: absolute; right: 48px; bottom: 0; font-family: "Montserrat"; font-size: 18px; font-weight: 600; color: #fff; line-height: 1;}


#main-section-visual .main_visual .visual-num {
  position: absolute;
  left: 50px;
  bottom: 45px;
  color: #fff;
  font-size: 16px;
  z-index: 9999999;
	font-family: 'Pretendard';
	font-weight: 500;  
}
#main-section-visual .main_visual .visual-progress {
  position: absolute;
  top: auto;
  left: 82px;
  bottom: 55px;
  width: 150px;
  height: 1px;
}
#main-section-visual .main_visual .visual-progress:before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #fff;  
  opacity: 0.5;
}
#main-section-visual .main_visual .visual-progress span {
  width: 33.3333%;
  height: 1px;  
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: #fff;
}
 #main-section-visual .main_visual .slick-prev {
  cursor: pointer;
  position: absolute;
  right: 365px;
  bottom: 50px;
  width: 20px;
  height: 20px;
  color: #fff;
  z-index: 99999;
  overflow: hidden;
  text-indent: -20000px;
  background: url("../img/icon/visual_prev.png") no-repeat 50% 50%;
  border:0;
}
#main-section-visual .main_visual .slick-next {
  cursor: pointer;
  position: absolute;
  right: 130px;
  bottom: 50px;
  width: 20px;
  height: 20px;
  color: #fff;
  z-index: 99999;
  overflow: hidden;
  text-indent: -20000px;  
  background: url("../img/icon/visual_next.png") no-repeat 50% 50%;
  border:0;  
}
.visual_slide { 
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* height: calc(100% - 99px); */
  height: 100%;
}
.visual_slide .vis_img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.visual_slide .vis_img .bg {
  position: absolute;
  left: 0;
  top: 0%;
  width: 100%;
  height: 100%;
}

.visual_slide .slick-list,
.visual_slide .slick-track {
  height: 100%;
}



/* mainVisual : End */



/* Premium : Start */
#main-section-premium  { background: #341e66 url("../img/main/bg_premium.jpg") center center; background-size: cover; padding:160px 0 80px; }
#main-section-premium .main_con { width:1610px; margin:0 auto; overflow: hidden; position: relative; z-index:5; }
#main-section-premium .main_con:before {content:''; width:703px; height:105px; background:url('../img/main/txt_premium2.png') no-repeat; position:absolute; top:134px; right:30px;}
#main-section-premium .main_con .tit { margin-bottom:50px; }


#main-section-premium .prem-roll  { }
#main-section-premium .prem-roll .swiper-slide img {vertical-align:bottom;  max-width:100%; opacity:0; transition:all 0.2s;}
#main-section-premium .prem-roll .swiper-slide.swiper-slide-active {box-shadow:46px 39px 30px 0px rgba(0,0,0,0.2); z-index:9; }
#main-section-premium .prem-roll .swiper-slide.swiper-slide-active img {opacity:1;}
#main-section-premium .prem-roll .swiper-slide.prem1 {background:url("https://rockdesign23.mycafe24.com/db/premium1.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-slide.prem2 {background:url("https://rockdesign23.mycafe24.com/db/premium2.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-slide.prem3 {background:url("https://rockdesign23.mycafe24.com/db/premium3.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-slide.prem4 {background:url("https://rockdesign23.mycafe24.com/db/premium4.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-slide.prem5 {background:url("https://rockdesign23.mycafe24.com/db/premium5.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-slide.prem6 {background:url("https://rockdesign23.mycafe24.com/db/premium6.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-slide.prem7 {background:url("https://rockdesign23.mycafe24.com/db/premium7.jpg") bottom center no-repeat;}
#main-section-premium .prem-roll .swiper-button-next {width:32px; height:15px; background:url("../img/main/prem_next.png") center center no-repeat; top:100px; left:487px;}
#main-section-premium .prem-roll .swiper-button-next:before {content:''; width:1px; height:20px; background:#bbb; position:absolute; top:50%; margin-top:-10px; left:-20px; }
#main-section-premium .prem-roll .swiper-button-prev {width:32px; height:15px; background:url("../img/main/prem_prev.png") center center no-repeat; top:100px; left:414px;}
/* Premium : End */

/* Traffic : Start */
#main-section-traffic { position:relative; height:100vh; }
#main-section-traffic ul {
  display: flex;
  height: 100%;
  flex-wrap:wrap;
}

#main-section-traffic ul li {
  position: relative;
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  background-color: #e2e9e1;
}

#main-section-traffic ul li:last-child {
  border-right: none;
}

#main-section-traffic ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  transition: 0.3s;
  opacity: 0;
}

#main-section-traffic ul li::after {
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 120px;
  height: 40px;
  background: url('../img/main/sec-03-imgcut.png') no-repeat right bottom/contain;
}

#main-section-traffic ul li:nth-child(1)::before {
  background-image: url('../img/main/sec-03-bg01.jpg');
}

#main-section-traffic ul li:nth-child(2)::before {
  background-image: url('../img/main/sec-03-bg02.jpg');
}

#main-section-traffic ul li:nth-child(3)::before {
  background-image: url('../img/main/sec-03-bg03.jpg');
}

#main-section-traffic ul li:nth-child(4)::before {
  background-image: url('../img/main/sec-03-bg04.jpg');
}

#main-section-traffic ul li p,
#main-section-traffic ul li img {
  position: relative;
  transition: 0.3s;
}

#main-section-traffic ul li .category {
  margin-top: 40px;
  color: #c6953d;
  font-size: 28px;
  font-weight: 500;
}

#main-section-traffic ul li .tit {
  font-size: 16px;
  font-weight: 500;
  color: #4c3429;
  line-height:1.5;
  margin-top: 25px;
  word-break:keep-all;
}

#main-section-traffic ul li .desc {
  color: #89877a;
  font-weight:300;
  line-height: 26px;
  font-size: 16px;
  margin-top: 40px;
}

#main-section-traffic ul li:hover p {
  color: #fff;
}

#main-section-traffic ul li:hover::before {
  opacity: 1;
}

#main-section-traffic ul li:hover::after {
  opacity: 1;
}

#main-section-traffic.active ul li > div {
  animation: slideUp 1.2s forwards;
  animation-delay: 0.3s;
}

@media(min-width:1401px){
	#main-section-traffic { padding-right:6.275rem; }
}



/* Traffic : End */

/* UNIT : Start */
#main-section-unit {background:url("../img/main/bg_unit.jpg") no-repeat center top;}
#main-section-unit {position:relative; display:flex;}
#main-section-unit .unit_box{width:40%; height:100px; display:flex; justify-content:flex-start;  transform:translateX(-50px); flex-direction:column; align-items:flex-end}
#main-section-unit .unit_box > div{padding:220px 0 70px 100px; width:75%; text-align:left;}
#main-section-unit .unit_box > div h2{font-size:50px; color:#09193e; font-weight:700; margin-bottom:30px;}
#main-section-unit .unit_box > div h2 b{font-size:50px; color:#09193e; font-weight:400; margin-bottom:20px;}
#main-section-unit .unit_box > div h3{font-size:21px; color:#222; letter-spacing:-2px; margin-bottom:20px;}

#main-section-unit .unit_box .arrow{padding:0 0 0 100px;}
#main-section-unit .unit_box .arrow > span{display:inline-block; width:50px; line-height:50px; background:#777; text-align:center; border-radius:50px; cursor:pointer;}
#main-section-unit .unit_box .arrow > span span{display:block; line-height:50px; color:#fff; font-size:31px;}
#main-section-unit .unit_box .arrow > span:hover{background:#0087c4;}

#main-section-unit .unit_list{position:relative; left:0; margin-bottom:105px; width:58%; height:895px; display:flex; justify-content:center; align-items:center;  }
#main-section-unit .innet_unit{position:absolute; left:-120px; width:70vw;}

#main-section-unit .innet_unit .slick-list{padding:50px 0;margin-right:-30px;}
#main-section-unit .innet_unit .slick-slide{margin-right:50px; }

#main-section-unit .innet_unit .items{cursor:pointer; transition:all 0.4s ease-out; border-radius:50px 50px 0 50px; overflow:hidden; z-index:9; box-shadow: 20px 20px 20px rgba(0,0,0,0.16);}
#main-section-unit .innet_unit .items p img{display:block; width:100%;}
#main-section-unit .innet_unit .items:hover{transform:translateY(-30px)}


@media screen and (max-width: 1600px){
	#main-section-unit .innet_unit{width:75vw;}
}

/* UNIT : End */

/* ºê·£µå : Start */
#main-section-brand { background:url('../img/main/bg_house.jpg') no-repeat center center fixed; background-size:cover; height:980px; display:flex; align-items:center; flex-direction:column; padding-top:300px; text-align:center;}
#main-section-brand h2,
#main-section-brand h3,
#main-section-brand h4 {color:#fff;}
#main-section-brand h2{}
#main-section-brand h3{ margin:20px 0 50px;}
#main-section-brand h4{font-size:21px; font-weight:300; margin-bottom:50px; letter-spacing: -1px; }
#main-section-brand a{display:block; width:250px; border:1px solid #fff; line-height:50px; font-size:20px; font-weight:300; color:#fff; border-radius:50px; transition:all 0.8s}
#main-section-brand a strong { font-weight:700;  }
#main-section-brand a:hover{background:#fff; color:#000; font-weight:700; transform:translateY(20px)}

/* ºê·£µå : End */