@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:10010;         /* 999 -> ÃæºÐÈ÷ Å« °ªÀ¸·Î »óÇâ */
  pointer-events:none;   /* ¾Æ·¡ ½½¶óÀ̵å Á¶ÀÛ ¹æÇØ ¾øµµ·Ï */
}
#main-section-visual .main_con .motion_obj .txt2 { margin:10px 0; }

#main-section-visual .main_con .motion_obj .txt1 img,
#main-section-visual .main_con .motion_obj .txt2 img,
#main-section-visual .main_con .motion_obj .txt3 img{
  display:inline-block;
  max-width:90%;
  height:auto;
}

#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;
  left:82px;
  bottom:55px;
  width:150px;
  height:1px;
}
#main-section-visual .main_visual .visual-progress:before {
  content:"";
  display:block;
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  background:#fff;  
  opacity:.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: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%;
}

/* slick ÄÁÅ×ÀÌ³Ê ³ôÀÌ ¸ÂÃã */
.visual_slide .slick-list,
.visual_slide .slick-track { height:100%; }

/* slick ³»ºÎ z-index°¡ Áö³ªÄ¡°Ô ³ôÀ» ¶§ ´ëºñ(ÇÊ¿ä ½Ã) */
#main-section-visual .visual_slide,
#main-section-visual .visual_slide .slick-list,
#main-section-visual .visual_slide .slick-track,
#main-section-visual .visual_slide .slick-slide{
  z-index:auto;
}



/* 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 */