/* topbanner */
@media screen and (min-width:1201px) {  
.visual-sec .txt-box {
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    width: 70%;
    padding: 0 2.0rem;
    transform: translate(-50%, -60%);
    z-index: 10;
  }

  .visual-sec .txt-box > .logo_img1{width: 260px; margin-bottom: 40px;}
  .visual-sec .txt-box > .logo_img2{width: 320px; margin-bottom: 40px;}  

  .visual-sec .txt-box > h3 {
    color: #fff;
    font-size: 3vw;
    font-weight: 700;
    line-height: 1.4;
    word-break: keep-all;
    transform: translateY(20px);
    opacity: 0;
    transition: 1s 0.2s;
  }
  .visual-sec .txt-box > p {
    color: #fff;
    margin-top: 1.6em;
    font-size: 1.6rem;
    transform: translateY(20px);
    opacity: 0;
    word-break: keep-all;
    transition: 1s 0.4s;
  }
  .visual-sec .swiper-slide-active .txt-box > h3,
  .visual-sec .swiper-slide-active .txt-box > p {
    transform: translateY(0);
    opacity: 1;
  }

  .visual-sec .more_btn {
    margin-top: 48px;
  }
  .more_btn a {
    display: block;
    text-align: center;
    width: 160px;
    height: 60px;
    line-height: 60px;
    font-size: 15px;
    color: #fff;
    border: 0 solid #fff;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    outline: 1px solid;
    outline-color: rgba(255, 255, 255, 0.5);
    outline-offset: 0px;
    text-shadow: none;
    transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  }
  
  .more_btn a:hover {
    border: 1px solid #fff;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
    outline-color: rgba(255, 255, 255, 0);
    outline-offset: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }  
  
  .visual-sec .img-box {
    display: block;
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
  .visual-sec img {
    transform: scale(1.05);
    transition: 1.5s 0.1s;
  }

  .visual-sec video {
    height: 100%;
    transform: scale(1.05);
    transition: 1.5s 0.1s;
    object-fit: cover;
  }

  .visual-sec .swiper-slide-active img {
    transform: scale(1.0);
  }
  .visual-sec .all-box {
    position: absolute;
    display: inline-flex;
    width: 70%;
    height: 50px;
    left: 50%;
    bottom: 10px;
    box-sizing: border-box;
    padding: 0 20px;
    transform: translate(-50%, -50%);
    z-index: 20;
  }
  .visual-sec .progress-box {
    position: relative;
    width: 100%;
    height: 50px;
    z-index: 11;
  }
  .autoplay-progress {
    position: absolute;
    left: 30px;
    top: 10px;
    z-index: 10;
    width: 95.2%;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .current, .total {color: #fff; font-size: 16px; margin-top: -2px;}
  
  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
  /*  height: 100%;*/
    stroke-width: 0.5px;
    stroke: #fff;
    fill: none;
    stroke-dashoffset: calc(100 * (1 - var(--progress)));
    stroke-dasharray: 100;
  }
  /* stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이 
     stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
   */
  .visual-sec .swiper-pagination {
    display: flex;
    color: #fff;
    justify-content: space-between;
    position: static;
    text-align: left;
  }
  .visual-sec .arrow-box {
    position: absolute;
    width: 80px;
    height: 50px;
  }
  
  .visual-sec .swiper-button-next,
  .visual-sec .swiper-button-prev {
    width: 21px;
    height: 21px;
    top: 0;
    margin-top: 0;
    background: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-left-fff.svg) no-repeat center / 100%;
  }
  
  .visual-sec .swiper-button-next {
    background-image: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-right-fff.svg);
  }
  .visual-sec .swiper-button-next::after,
  .visual-sec .swiper-button-prev::after {
    font-size: 0;
  }

/* topbanner 끝 */





/* brand 시작 */
.brand {
    position: relative;
    max-width: calc(1680px + 12.5vw);
    z-index: 9;
    overflow: inherit;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 125px;
    margin-top: 6vw;
    padding: 0 7.3%;
    box-sizing: border-box;
}

.brand .brand_wrap .col {
    width: 29.3333%;
    display: inline-block;
    vertical-align: top;
    opacity: 0;
    position: relative;
    top: 200px;
  }

.brand .brand_wrap .col2 {
    margin-right: 6%;
    float: left;
}
.brand .brand_wrap .col2::after{
  display:block;
  content:' ';
  clear:both;
}

.brand .brand_wrap .col3 {margin-top: 100px;}

.brand .brand_wrap .col .linkBox{
    position: relative;
    display: block;
    cursor: pointer;
}

.brand .brand_wrap .col .linkBox .thumb{
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 760px;
    height: 39.583vw;
}
.brand .brand_wrap .col .linkBox:hover .thumb .thumbInner{
    transform: scale(1.06);
}

.brand .brand_wrap .col .linkBox .thumb .thumbInner{
    width: 100%;
    height: 100%;
    transition-duration: 0.5s;
    
}

.brand .brand_wrap .col .linkBox .thumb .thumbInner img{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
}
.brand .brand_wrap .col .linkBox .thumb .thumbInner:before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/before.png) no-repeat 50% 50%;
    background-size: cover;
    z-index: 2;
}

.brand .brand_wrap .col .linkBox .textArea{
    position: absolute;
    left: 0;
    bottom: 92px;
    color: #fff;
    padding-left: 50px;
    padding-right: 30px;
    z-index: 3;
}

.brand .brand_wrap .col .linkBox .textArea .title{
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin-bottom: 30px;
    color: #fff;
    font-weight: bold;
}

.brand .brand_wrap .col .linkBox .textArea .text{
    font-size: 18px;
    font-weight: 400;
    line-height: 1.67;
    letter-spacing: -0.015em;
    color: #fff;
    margin-bottom: 60px;
}

.brand .brand_wrap .col .linkBox .textArea .btn{
  position: relative;
  background-color: #79B928;
  color: #fff;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: 0.3s;
  overflow: hidden;

}

.brand .brand_wrap .col .linkBox .textArea a::before{
  content: '';
  position: absolute;
  right: 23px;
  width: 10px;
  height: 10px;
  border-top:3px solid #fff; 
  border-right:3px solid #fff; 
  transform: rotate(45deg);
  transition-duration: 0.3s;
}

.brand .brand_wrap .col .linkBox:hover .textArea a{
  width: 200px;
  transition-delay: 0.3s;
}

.brand .brand_wrap .col .linkBox:hover .textArea a::before{
  transform: rotate(45deg) translate(50px,-50px);
}


.brand .brand_wrap .col .linkBox .textArea a::after{
  content: '';
  position: absolute;
  left: -50px;
  right: 23px;
  width: 10px;
  height: 10px;
  border-top:3px solid #fff; 
  border-right:3px solid #fff; 
  transform: rotate(45deg) translate(-50px,50px);
  transition-duration: 0.3s;
}

.brand .brand_wrap .col .linkBox:hover .textArea a::after{
  transform: rotate(45deg) translate(50px,-50px);
  transition-delay: 0.5s;
}

.brand .brand_wrap .col .linkBox .textArea a span{
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  font-size: 16px;
}

.brand .brand_wrap .col .linkBox:hover .textArea a span{
  visibility: visible;
  opacity: 1;
  color: #fff;
  transition-delay: 0.5s;
  font-size: 16px;
  transform: translateX(10px);
}

/* brand 끝 */



/* tabsWrap */
#tabsWrap{position: relative; background:url(../img/bg_main_popular.jpg); background-repeat: no-repeat;  padding: 50px 0;}
.tabs_inner{position: relative; width: 92%; max-width: 1252px; margin: 0 auto; }


.tabs_inner h2{text-align: center; font-size: 48px; font-weight: 700; margin-bottom: 50px; top: 200px; position: relative; opacity: 0;}


.tabs_inner .tabs_title{position: relative; display: flex; justify-content: space-around;  background-color: #fff; border-radius: 50px; width: 32%; margin: 0 auto; top: 200px; opacity: 0;}
.tabs_inner .tabs_title li{width: 33.3%; background-color: #fff; color: #000; text-align: center; line-height: 40px; cursor: pointer; transition-duration: 0.5s; font-size: 17px;} 
.tabs_inner .tabs_title li:first-child {border-radius: 50px 0 0 50px;}
.tabs_inner .tabs_title li:last-child {border-radius: 0 50px 50px 0;}
.tabs_inner .tabs_title li.select{background-color: #000; color: #fff;  border-radius: 50px;}

.tabs_inner .tabs_contents{width: 100%; margin: 0 auto; position: relative; top: 300px; opacity: 0;}
.tabs_inner .tabs_contents .content{display: flex; margin-top: 80px; padding-bottom: 100px; justify-content: space-between;}
.tabs_inner .tabs_contents .content .content_item{ width: 30%;  margin-bottom: 100px; position: relative; background-color: #fff; }

.tabs_inner .tabs_contents .content_item .contents_img {margin-top: 30px;}
.tabs_inner .tabs_contents .content_item .contents_img img {position: relative; width: 55%; margin: 0 auto; transition-duration: 0.5s;}
.tabs_inner .tabs_contents .content_item .contents_img img:hover {scale: 1.2;}

.tabs_inner .tabs_contents .content_item .contents_text {margin: 34px 0; text-align: center; }
.tabs_inner .tabs_contents .content_item .contents_text p{font-size: 20px; font-weight: 700; margin-bottom: 58px;}

.tabs_inner .tabs_contents .content_item .contents_text a {font-size: 0.9em; font-weight: 700; color: #79B928; position: relative;}
.tabs_inner .tabs_contents .content_item .contents_text a span{position: absolute; display: inline-block; margin-top: 6px; margin-left: 5px;}
.tabs_inner .tabs_contents .content_item .contents_text a:hover {text-decoration: underline; text-decoration-color: #79B928;}
.tabs_inner .tabs_contents .content_item .contents_text a:hover span{animation: green 0.7s ease-in-out infinite;}


.tabs_inner .tabs_contents .content{font-size: 1em; line-height: 1.6em;display: none;}
.tabs_inner .tabs_contents .content:first-child{display: flex;}



.accessory {
  position: relative;
  margin-top: 132px;
  overflow: hidden;
}

.accessory .title_wrap {
  position: relative;
  width: 92%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  top: 300px;
  opacity: 0;
}

.accessory .title_wrap h2{
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-bottom: 30px;
  color: #000;
  font-weight: bold;  
}

.accessory .title_wrap p{
font-size: 18px;
font-weight: 400;
line-height: 1.67;
letter-spacing: -0.015em;
color: #666666;
margin-top: 34px;
}

.accessory .accessory_wrap{
  margin: 0 auto;
  overflow: hidden;
  margin-top: 100px;
  margin-bottom: 100px;
}
.accessory .accessory_wrap .accessory_inner{
  position: relative; 
  width: 3300px;
  height: 350px;
  margin-top: 5px;
  right: 3500px;
  opacity: 0;
}

.accessory .accessory_wrap .accessory_inner ul{
  display: flex;
}

.accessory .accessory_wrap .accessory_inner li{
  width: 10%; 
}

.accessory .accessory_wrap .accessory_inner li div{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #fff;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
  border-radius: 8%;
}

.accessory .accessory_wrap .accessory_inner li div img{
  width: 100%;
}

.accessory .more_btn2 {
  width: 180px;
  height: 60px;
  background-color: #fff;
  border: 2px solid #79B928;
  text-align: center;
  margin: 0 auto;
  transition-duration: 0.5s;
  position: relative;
  opacity: 0;
  top: 400px;
}
.accessory .more_btn2 a{
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 57px;
  transition-duration: 0.5s;
}

.accessory .more_btn2:hover {
  border: 2px solid #79B928;
  background-color: #79B928;
}

.accessory .more_btn2:hover a{
  color: #fff;
}

/* .accessory 끝 */

/* register 시작 */
.register {
  position: relative;
  max-width: calc(1680px + 12.5vw);
  display: block;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 0;
  margin-top: 232px;
  padding: 0 7.3%;
  box-sizing: border-box;
}

.register_wrap {
  overflow: hidden;
  display: flex;
}

.register .register_wrap .col {
  position: relative;
  width: 50%;
  margin: 0;
  overflow: hidden;
}

.register .register_wrap .col2 {
  left: -500px;
  opacity: 0;
}

.register .register_wrap .col2 img{
  width: 100%;
}

.register .register_wrap .col3 {
  left: 500px;
  opacity: 0;  
}

.register .register_wrap .col .textArea {
  position: relative;
  padding-left: 120px;
  width: 80%;
  top:50%;
  transform: translateY(-50%);
}

.register .register_wrap .col .textArea p:first-child{
  font-size: 16px;
  font-weight: 700;
  color: #79B928;
  margin-bottom: 14px;
}
.register .register_wrap .col .textArea p:nth-child(2){
  font-size: 50px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 24px;
}
.register .register_wrap .col .textArea p:last-child {
  font-weight: 400;
  font-size: 18px;
  color: #666666;
  line-height: 1.67;
  letter-spacing: -0.015em;
}

.register_wrap .more_btn2 {
  margin-top: 60px;
  width: 180px;
  height: 60px;
  background-color: #fff;
  text-align: center;
  transition-duration: 0.5s;
  border:2px solid #79B928;
}
.register_wrap .more_btn2 a{
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 57px;
  transition-duration: 0.5s;
}

.register_wrap .more_btn2:hover {
  border: 2px solid #79B928;
  background-color: #79B928;
}

.register_wrap .more_btn2:hover a{
  color: #fff;
}

/* register 끝 */

.support {
  position: relative;
  background-color: #F8FAFB;
  width: 100%;
  height: 700px;
  margin: 0 auto;
}

.support .title_wrap {
  position: relative;
  width: 90%;
  max-width: 1226px;
  margin: 0 auto;
  text-align: center;
  padding:100px 0 100px 0
}

.support .title_wrap h2{
  font-size: 48px;
  font-weight: 700;
  color: #000;
  opacity: 0;
  top: 300px;
  position: relative;
}

.support .support_wrap {
  max-width: 1226px;
  margin: 0 auto;
}

.support .support_wrap .col{
  display: flex;
  justify-content: space-around;
  text-align: center;
  position: relative;
  opacity: 0;
  top: 300px;
}

.support .support_wrap .col>div {
  position: relative;
  width: 23.16%;
  height: 284px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
  border-radius: 8%;
  background-color: #fff;
  transition-duration: 0.5s;
}

.support .support_wrap .col>div:hover {
  transform: translateY(-10%);
}

.support .support_wrap .col div .textArea {
  position: absolute;
  width: 100%;
}

.support .support_wrap .col div .textArea img {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  margin-top: 55px;
}

.support .support_wrap .col div .textArea h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 20px 0 20px 0;
  color: #000;
  text-decoration: underline;
  text-underline-position:under;   
  text-decoration-thickness: 1px;
}

.support .support_wrap .col div .textArea p {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  padding: 0 30px 0 30px ;
}


/* .support 끝 */


/* store 시작 */
#store{position: relative ; overflow: hidden; max-width: 1640px; margin: 0 auto;}
#store .title_wrap {position: relative; text-align: center; margin-top: 100px; top:300px; opacity: 0;}
#store .title_wrap h2{ font-size: 48px; font-weight: 700;color: #000;}
#store .title_wrap p {font-size: 18px;font-weight: 400; line-height: 1.67;
letter-spacing: -0.015em;color: #666666;margin-top: 34px;}


#store .store_list{position: relative; height: 800px; display: flex; justify-content: space-between; margin-top: 80px; margin-bottom: 232px; top: 500px; opacity: 0;}
#store .store_list li{width: 12%; background-position: right bottom; background-size: cover; box-shadow: -3px 0 3px rgba(0,0,0,0.5); cursor: pointer;display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; opacity: 0.7;}
#store .store_list li .store_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; transition-duration: 0.5s;}
#store .store_list li .store_list_inner h3{color: #FFF;font-size: 30px; transform:rotate(90deg); transition-duration: 0.5s;  text-align: center; display: block; position: absolute; width: 500px;}
#store .store_list li .store_list_inner p {opacity: 0; transition-duration: 2s;}
#store .store_list li .store_list_inner .more_btn2{transition-duration: 2s; opacity: 0; width: 1px; height: 1px; font-size: 0.5px;}

#store .store_list li.store_select{width: 76%; display: flex; justify-content: center; align-items: center; opacity: 1;}
#store .store_list li.store_select .store_list_inner{width: 100%;  height: 100%; text-align: center; background-color: rgba(0,0,0,0.5);}
#store .store_list li.store_select .store_list_inner h3{color: #FFF; margin-bottom: 30px; font-size: 48px; transform: rotate(0deg); font-weight: 700; top: 34%;}
#store .store_list li.store_select .store_list_inner p {opacity: 1; color: #fff; font-size: 18px; font-weight: 400; display: block; margin-top: 120px;}
#store .store_list li.store_select .store_list_inner .more_btn2{display: block; width: 180px; height: 60px; border: 1px solid #FFF; color: #FFF; text-align: center; line-height: 60px; font-size: 16px; opacity: 1; margin-top: 40px; font-weight: 400; }

#store .store_list li:nth-child(1){background-image: url(../img/store_0.jpg); }
#store .store_list li:nth-child(2){background-image: url(../img/store_1.jpg);}
#store .store_list li:nth-child(3){background-image: url(../img/store_2.jpg);}

/* store 끝 */

#news {position: relative; width: 100%; background-color: #F8FAFB;}
#news .news_wrap {max-width: 1640px; margin: 0 auto; padding-top: 100px;}
#news h2{ font-size: 2.67em; font-weight: 700; text-align: center;;position: relative; top: 300px; opacity: 0;}
#news .news_wrap .news_list {display: flex; justify-content: space-between; margin-top: 80px; margin-bottom: 60px;}
#news .news_wrap .news_list li{position: relative; width: 31%; background-color: #fff; box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%); top: 300px; opacity: 0;}
#news .news_wrap .news_list li div:first-child img{ width: 100%;}
#news .news_wrap .news_list li .news_text_wrap{background-color: #fff;padding: 14px 30px 30px 30px;}
#news .news_wrap .news_list li .news_text_wrap h3{font-size: 0.9em; line-height: 23px; color: #fff; text-align: center;}
#news .news_list li .news_text_wrap .text_brand{background-color: #79B928; width: 85px; height: 25px; text-align: center;}
#news .news_list li .news_text_wrap .text_news{background-color: #000; width: 85px; height: 25px;}
#news .news_list li .news_text_wrap .main_text{font-size: 1em; color: #000; margin-top: 14px;}
#news .news_list li .news_text_wrap .sub_text{color: #666666;}

#news .news_list li .over_box{
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; 
  opacity: 0; transition-duration: 0.3s;
}
#news .news_list li .over_box p{font-size: 0.9em; font-weight: 400; color: #fff;}
#news .news_list li:hover .over_box{opacity: 1;}
#news .more_btn{display: block; width: 190px; height: 50px; margin: 0 auto;border: 1px solid #fff; border-radius: 6px; font-size: 0.7em; color: #fff; text-align: center; line-height: 50px;}
#news .more_btn:hover{background-color: #fff ; color: #121212; font-weight: 700;}

/* .news 끝 */


}






































/* topbanner */
@media screen and (min-width:901px) and (max-width:1200px) {
  .visual-sec .txt-box {
      position: absolute;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      width: 70%;
      padding: 0 2.0rem;
      transform: translate(-50%, -60%);
      z-index: 10;
    }
  
    .visual-sec .txt-box > .logo_img1{width: 260px; margin-bottom: 40px;}
    .visual-sec .txt-box > .logo_img2{width: 320px; margin-bottom: 40px;}  
  
    .visual-sec .txt-box > h3 {
      color: #fff;
      font-size: 3vw;
      font-weight: 700;
      line-height: 1.4;
      word-break: keep-all;
      transform: translateY(20px);
      opacity: 0;
      transition: 1s 0.2s;
    }
    .visual-sec .txt-box > p {
      color: #fff;
      margin-top: 1.6em;
      font-size: 1.6rem;
      transform: translateY(20px);
      opacity: 0;
      word-break: keep-all;
      transition: 1s 0.4s;
    }
    .visual-sec .swiper-slide-active .txt-box > h3,
    .visual-sec .swiper-slide-active .txt-box > p {
      transform: translateY(0);
      opacity: 1;
    }
  
    .visual-sec .more_btn {
      margin-top: 48px;
    }
    .more_btn a {
      display: block;
      text-align: center;
      width: 160px;
      height: 60px;
      line-height: 60px;
      font-size: 15px;
      color: #fff;
      border: 0 solid #fff;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
      outline: 1px solid;
      outline-color: rgba(255, 255, 255, 0.5);
      outline-offset: 0px;
      text-shadow: none;
      transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .more_btn a:hover {
      border: 1px solid #fff;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
      outline-color: rgba(255, 255, 255, 0);
      outline-offset: 15px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }  
    
    .visual-sec .img-box {
      display: block;
      width: 100%;
      height: calc(100vh - 100px);
      overflow: hidden;
    }
    .visual-sec img {
      transform: scale(1.05);
      transition: 1.5s 0.1s;
    }
  
    .visual-sec video {
      height: 100%;
      transform: scale(1.05);
      transition: 1.5s 0.1s;
      object-fit: cover;
    }
  
    .visual-sec .swiper-slide-active img {
      transform: scale(1.0);
    }
    .visual-sec .all-box {
      position: absolute;
      display: inline-flex;
      width: 70%;
      height: 50px;
      left: 50%;
      bottom: 10px;
      box-sizing: border-box;
      padding: 0 20px;
      transform: translate(-50%, -50%);
      z-index: 20;
    }
    .visual-sec .progress-box {
      position: relative;
      width: 100%;
      height: 50px;
      z-index: 11;
    }
    .autoplay-progress {
      position: absolute;
      left: 30px;
      top: 10px;
      z-index: 10;
      width: 92%;
      height: 3px;
      background-color: rgba(0, 0, 0, 0.1);
    }
  
    .current, .total {color: #fff; font-size: 16px; margin-top: -2px;}
    
    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
    /*  height: 100%;*/
      stroke-width: 0.5px;
      stroke: #fff;
      fill: none;
      stroke-dashoffset: calc(100 * (1 - var(--progress)));
      stroke-dasharray: 100;
    }
    /* stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이 
       stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
     */
    .visual-sec .swiper-pagination {
      display: flex;
      color: #fff;
      justify-content: space-between;
      position: static;
      text-align: left;
    }
    .visual-sec .arrow-box {
      position: absolute;
      width: 80px;
      height: 50px;
    }
    
    .visual-sec .swiper-button-next,
    .visual-sec .swiper-button-prev {
      width: 21px;
      height: 21px;
      top: 0;
      margin-top: 0;
      background: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-left-fff.svg) no-repeat center / 100%;
    }
    
    .visual-sec .swiper-button-next {
      background-image: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-right-fff.svg);
    }
    .visual-sec .swiper-button-next::after,
    .visual-sec .swiper-button-prev::after {
      font-size: 0;
    }
  
  /* topbanner 끝 */
  
  
  
  
  
  /* brand 시작 */
  .brand {
      position: relative;
      width: 90%;
      z-index: 9;
      overflow: inherit;
      display: block;
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 125px;
      margin-top: 10vw;
      box-sizing: border-box;
  }
  
  .brand .brand_wrap .col {
      width: 29.3333%;
      display: inline-block;
      vertical-align: top;
      opacity: 0;
      position: relative;
      top: 200px;
    }
  
  .brand .brand_wrap .col2 {
      margin-right: 6%;
      float: left;
  }
  .brand .brand_wrap .col2::after{
    display:block;
    content:' ';
    clear:both;
  }
  
  .brand .brand_wrap .col3 {margin-top: 100px;}

  .brand .brand_wrap .col .linkBox{
      position: relative;
      display: block;
      cursor: pointer;
  }
  
  .brand .brand_wrap .col .linkBox .thumb{
      position: relative;
      overflow: hidden;
      width: 100%;
      max-height: 760px;
      height: 39.583vw;
  }
  .brand .brand_wrap .col .linkBox:hover .thumb .thumbInner{
      transform: scale(1.06);
  }
  
  .brand .brand_wrap .col .linkBox .thumb .thumbInner{
      width: 100%;
      height: 100%;
      transition-duration: 0.5s;
      
  }
  
  .brand .brand_wrap .col .linkBox .thumb .thumbInner img{
      position: absolute;
      display: block;
      left: 0;
      top: 0;
      width: 100%;
  }
  .brand .brand_wrap .col .linkBox .thumb .thumbInner:before {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(../img/before.png) no-repeat 50% 50%;
      background-size: cover;
      z-index: 2;
  }
  
  .brand .brand_wrap .col .linkBox .textArea{
      position: absolute;
      left: 0;
      bottom: 92px;
      color: #fff;
      padding-left: 30px;
      padding-right: 30px;
      z-index: 3;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .title{
      font-size: 50px;
      line-height: 1.1;
      letter-spacing: -0.005em;
      margin-bottom: 30px;
      color: #fff;
      font-weight: bold;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .text{
      font-size: 17px;
      font-weight: 400;
      line-height: 1.67;
      letter-spacing: -0.015em;
      color: #fff;
      margin-bottom: 30px;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .btn{
    position: relative;
    background-color: #79B928;
    color: #fff;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
    overflow: hidden;
  
  }
  
  .brand .brand_wrap .col .linkBox .textArea a::before{
    content: '';
    position: absolute;
    right: 23px;
    width: 10px;
    height: 10px;
    border-top:3px solid #fff; 
    border-right:3px solid #fff; 
    transform: rotate(45deg);
    transition-duration: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a{
    width: 200px;
    transition-delay: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a::before{
    transform: rotate(45deg) translate(50px,-50px);
  }
  
  .brand .brand_wrap .col .linkBox .textArea a::after{
    content: '';
    position: absolute;
    left: -50px;
    right: 23px;
    width: 10px;
    height: 10px;
    border-top:3px solid #fff; 
    border-right:3px solid #fff; 
    transform: rotate(45deg) translate(-50px,50px);
    transition-duration: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a::after{
    transform: rotate(45deg) translate(50px,-50px);
    transition-delay: 0.5s;
  }
  
  .brand .brand_wrap .col .linkBox .textArea a span{
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    font-size: 16px;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a span{
    visibility: visible;
    opacity: 1;
    color: #fff;
    transition-delay: 0.5s;
    font-size: 16px;
    transform: translateX(10px);
  }
  
  /* brand 끝 */
  
  
  
  /* tabsWrap */
  #tabsWrap{position: relative; background:url(../img/bg_main_popular.jpg); background-repeat: no-repeat;  padding: 50px 0;}
  .tabs_inner{position: relative; width: 90%; max-width: 1252px; margin: 0 auto; }
  
  
  .tabs_inner h2{text-align: center; font-size: 48px; font-weight: 700; margin-bottom: 50px; opacity: 0; top: 200px; position: relative;}
  
  
  .tabs_inner .tabs_title{position: relative; display: flex; justify-content: space-around;  background-color: #fff; border-radius: 50px; width: 32%; margin: 0 auto; opacity: 0; top: 200px;}
  .tabs_inner .tabs_title li{width: 33.3%; background-color: #fff; color: #000; text-align: center; line-height: 40px; cursor: pointer; transition-duration: 0.5s; font-size: 17px;} 
  .tabs_inner .tabs_title li:first-child {border-radius: 50px 0 0 50px;}
  .tabs_inner .tabs_title li:last-child {border-radius: 0 50px 50px 0;}
  .tabs_inner .tabs_title li.select{background-color: #000; color: #fff;  border-radius: 50px;}
  

  .tabs_inner .tabs_contents{width: 100%; margin: 0 auto; position: relative; top: 300px; opacity: 0;}
  .tabs_inner .tabs_contents .content{display: flex; margin-top: 80px; padding-bottom: 100px; justify-content: space-between;}
  .tabs_inner .tabs_contents .content .content_item{ width: 32%;  margin-bottom: 100px; position: relative; background-color: #fff; }
  
  .tabs_inner .tabs_contents .content_item .contents_img {margin-top: 30px;}
  .tabs_inner .tabs_contents .content_item .contents_img img {position: relative; width: 55%; margin: 0 auto; transition-duration: 0.5s;}
  .tabs_inner .tabs_contents .content_item .contents_img img:hover {scale: 1.2;}
  
  .tabs_inner .tabs_contents .content_item .contents_text {margin: 34px 0; text-align: center; padding: 0 20px 0 20px;}
  .tabs_inner .tabs_contents .content_item .contents_text p{font-size: 20px; font-weight: 700; margin-bottom: 58px;}

  .tabs_inner .tabs_contents .content_item .contents_text a {font-size: 0.9em; font-weight: 700; color: #79B928; position: relative;}
  .tabs_inner .tabs_contents .content_item .contents_text a span{position: absolute; display: inline-block; margin-top: 6px; margin-left: 5px;}
  .tabs_inner .tabs_contents .content_item .contents_text a:hover {text-decoration: underline; text-decoration-color: #79B928;}
  .tabs_inner .tabs_contents .content_item .contents_text a:hover span{animation: green 0.7s ease-in-out infinite;}
  
  
  .tabs_inner .tabs_contents .content{font-size: 1em; line-height: 1.6em;display: none;}
  .tabs_inner .tabs_contents .content:first-child{display: flex;}
  
  
  
  .accessory {
    position: relative;
    margin-top: 132px;
    overflow: hidden;
  }
  
  .accessory .title_wrap {
    position: relative;
    width: 92%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    top: 300px; opacity: 0; 
  }
  
  .accessory .title_wrap h2{
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin-bottom: 30px;
    color: #000;
    font-weight: bold;  
  }
  
  .accessory .title_wrap p{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.67;
  letter-spacing: -0.015em;
  color: #666666;
  margin-top: 34px;
  }
  
  .accessory .accessory_wrap{
    margin: 0 auto;
    overflow: hidden;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .accessory .accessory_wrap .accessory_inner{
    position: relative; 
    width: 3300px;
    height: 350px;
    margin-top: 5px;
    right: 3500px;
    opacity: 0;    
  }
  
  .accessory .accessory_wrap .accessory_inner ul{
    display: flex;
  }
  
  .accessory .accessory_wrap .accessory_inner li{
    width: 10%; 
  }
  
  .accessory .accessory_wrap .accessory_inner li div{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #fff;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
    border-radius: 8%;
  }
  
  .accessory .accessory_wrap .accessory_inner li div img{
    width: 100%;
  }
  
  .accessory .more_btn2 {
    width: 180px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #79B928;
    text-align: center;
    margin: 0 auto;
    transition-duration: 0.5s;
    opacity: 0;
    top: 200px;
  }
  .accessory .more_btn2 a{
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 57px;
    transition-duration: 0.5s;
  }
  
  .accessory .more_btn2:hover {
    border: 2px solid #79B928;
    background-color: #79B928;
  }
  
  .accessory .more_btn2:hover a{
    color: #fff;
  }
  
  /* .accessory 끝 */
  
  /* register 시작 */
  .register {
    position: relative;
    max-width: 90%;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 0;
    margin-top: 232px;
    box-sizing: border-box;
  }
  
  .register_wrap {
    overflow: hidden;
    display: flex;
  }
  
  .register .register_wrap .col {
    position: relative;
    width: 50%;
    margin: 0;
    overflow: hidden;
  }
  
  .register .register_wrap .col2 {
    left: -500px;
    opacity: 0;
  }
  
  .register .register_wrap .col3 {
    left: 500px;
    opacity: 0;  
  }

  .register .register_wrap .col2 img{
    width: 100%;
  }
  .register .register_wrap .col .textArea {
    position: relative;
    padding-left: 120px;
    top:50%;
    transform: translateY(-50%);
  }
  
  .register .register_wrap .col .textArea p:first-child{
    font-size: 16px;
    font-weight: 700;
    color: #79B928;
    margin-bottom: 14px;
  }
  .register .register_wrap .col .textArea p:nth-child(2){
    font-size: 50px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
  }
  .register .register_wrap .col .textArea p:last-child {
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    line-height: 1.67;
    letter-spacing: -0.015em;
  }
  
  .register_wrap .more_btn2 {
    margin-top: 60px;
    width: 180px;
    height: 60px;
    background-color: #fff;
    text-align: center;
    transition-duration: 0.5s;
    border:2px solid #79B928;
  }
  .register_wrap .more_btn2 a{
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 57px;
    transition-duration: 0.5s;
  }
  
  .register_wrap .more_btn2:hover {
    border: 2px solid #79B928;
    background-color: #79B928;
  }
  
  .register_wrap .more_btn2:hover a{
    color: #fff;
  }
  
  /* register 끝 */
  
  .support {
    position: relative;
    background-color: #F8FAFB;
    width: 100%;
    height: 700px;
    margin: 0 auto;
  }
  
  .support .title_wrap {
    position: relative;
    width: 90%;
    max-width: 1226px;
    margin: 0 auto;
    text-align: center;
    padding:100px 0 100px 0
  }
  
  .support .title_wrap h2{
    font-size: 48px;
    font-weight: 700;
    color: #000;
    opacity: 0;
    top: 300px;
    position: relative;    
  }
  
  .support .support_wrap {
    width: 90%;
    margin: 0 auto;
  }
  
  .support .support_wrap .col{
    display: flex;
    justify-content: space-between;
    text-align: center;
    position: relative;
    opacity: 0;
    top: 300px;
  }
  
  .support .support_wrap .col>div {
    position: relative;
    width: 23%;
    height: 284px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
    border-radius: 8%;
    background-color: #fff;
    transition-duration: 0.5s;
  }
  
  .support .support_wrap .col>div:hover {
    transform: translateY(-10%);
  }
  
  .support .support_wrap .col div .textArea {
    position: absolute;
    width: 100%;
  }
  
  .support .support_wrap .col div .textArea img {
    margin: 0 auto;
    width: 64px;
    height: 64px;
    margin-top: 55px;
  }
  
  .support .support_wrap .col div .textArea h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0 20px 0;
    color: #000;
    text-decoration: underline;
    text-underline-position:under;   
    text-decoration-thickness: 1px;
  }
  
  .support .support_wrap .col div .textArea p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    padding: 0 30px 0 30px ;
  }
  
  
  /* .support 끝 */
  
  
  /* store 시작 */
  #store{position: relative ; overflow: hidden; width: 90%; margin: 0 auto;}
  #store .title_wrap {position: relative; text-align: center; margin-top: 100px; top:300px; opacity: 0;}
  #store .title_wrap h2{ font-size: 48px; font-weight: 700;color: #000;}
  #store .title_wrap p {font-size: 18px;font-weight: 400; line-height: 1.67;
  letter-spacing: -0.015em;color: #666666;margin-top: 34px;}
  
  
  #store .store_list{position: relative; height: 600px; display: flex; justify-content: space-between; margin-top: 80px; margin-bottom: 100px; top: 500px; opacity: 0;}
  #store .store_list li{width: 12%; background-position: right bottom; background-size: cover; box-shadow: -3px 0 3px rgba(0,0,0,0.5); cursor: pointer;display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; opacity: 0.7;}
  #store .store_list li .store_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; transition-duration: 0.5s;}
  #store .store_list li .store_list_inner h3{color: #FFF;font-size: 30px; transform:rotate(90deg); transition-duration: 0.5s;  text-align: center; display: block; position: absolute; width: 500px;}
  #store .store_list li .store_list_inner p {opacity: 0; transition-duration: 2s;}
  #store .store_list li .store_list_inner .more_btn2{transition-duration: 2s; opacity: 0; width: 1px; height: 1px; font-size: 0.5px;}
  
  #store .store_list li.store_select{width: 76%; display: flex; justify-content: center; align-items: center; opacity: 1;}
  #store .store_list li.store_select .store_list_inner{width: 100%;  height: 100%; text-align: center; background-color: rgba(0,0,0,0.5);}
  #store .store_list li.store_select .store_list_inner h3{color: #FFF; margin-bottom: 30px; font-size: 44px; transform: rotate(0deg); font-weight: 700; top: 30%;}
  #store .store_list li.store_select .store_list_inner p {opacity: 1; color: #fff; font-size: 16px; font-weight: 400; display: block; margin-top: 120px;}
  #store .store_list li.store_select .store_list_inner .more_btn2{display: block; width: 180px; height: 60px; border: 1px solid #FFF; color: #FFF; text-align: center; line-height: 60px; font-size: 14px; opacity: 1; margin-top: 40px; font-weight: 400; }
  
  #store .store_list li:nth-child(1){background-image: url(../img/store_0.jpg); }
  #store .store_list li:nth-child(2){background-image: url(../img/store_1.jpg);}
  #store .store_list li:nth-child(3){background-image: url(../img/store_2.jpg);}
  
  /* store 끝 */
  
  #news {position: relative; width: 100%; background-color: #F8FAFB;}
  #news .news_wrap {max-width: 90%; margin: 0 auto; padding-top: 100px;}
  #news h2{ font-size: 2.67em; font-weight: 700; text-align: center;}
  #news .news_wrap .news_list {display: flex; justify-content: space-between; margin-top: 80px; margin-bottom: 60px;}
  #news .news_wrap .news_list li{position: relative; width: 31%; background-color: #fff; box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%); top: 300px; opacity: 0;}
  #news .news_wrap .news_list li div:first-child img{ width: 100%;}
  #news .news_wrap .news_list li .news_text_wrap{background-color: #fff;padding: 14px 30px 30px 30px;}
  #news .news_wrap .news_list li .news_text_wrap h3{font-size: 0.8em; line-height: 23px; color: #fff; text-align: center;}
  #news .news_list li .news_text_wrap .text_brand{background-color: #79B928; width: 85px; height: 25px; text-align: center;}
  #news .news_list li .news_text_wrap .text_news{background-color: #000; width: 85px; height: 25px;}
  #news .news_list li .news_text_wrap .main_text{font-size: 0.9em; color: #000; margin-top: 14px;}
  #news .news_list li .news_text_wrap .sub_text{color: #666666; font-size: 0.9em;}
  
  #news .news_list li .over_box{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; 
    opacity: 0; transition-duration: 0.3s;
  }
  #news .news_list li .over_box p{font-size: 0.9em; font-weight: 400; color: #fff;}
  #news .news_list li:hover .over_box{opacity: 1;}
  #news .more_btn{display: block; width: 190px; height: 50px; margin: 0 auto;border: 1px solid #fff; border-radius: 6px; font-size: 0.7em; color: #fff; text-align: center; line-height: 50px;}
  #news .more_btn:hover{background-color: #fff ; color: #121212; font-weight: 700;}
  
  /* .news 끝 */
  }



















  @media screen and (min-width:601px) and (max-width:900px) {
    .visual-sec .txt-box {
      position: absolute;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      width: 70%;
      padding: 0 2.0rem;
      transform: translate(-50%, -60%);
      z-index: 10;
    }
  
    .visual-sec .txt-box > .logo_img1{width: 260px; margin-bottom: 40px;}
    .visual-sec .txt-box > .logo_img2{width: 320px; margin-bottom: 40px;}  
  
    .visual-sec .txt-box > h3 {
      color: #fff;
      font-size: 3vw;
      font-weight: 700;
      line-height: 1.4;
      word-break: keep-all;
      transform: translateY(20px);
      opacity: 0;
      transition: 1s 0.2s;
    }
    .visual-sec .txt-box > p {
      color: #fff;
      margin-top: 1.6em;
      font-size: 1.6rem;
      transform: translateY(20px);
      opacity: 0;
      word-break: keep-all;
      transition: 1s 0.4s;
    }
    .visual-sec .swiper-slide-active .txt-box > h3,
    .visual-sec .swiper-slide-active .txt-box > p {
      transform: translateY(0);
      opacity: 1;
    }
  
    .visual-sec .more_btn {
      margin-top: 48px;
    }
    .more_btn a {
      display: block;
      text-align: center;
      width: 160px;
      height: 60px;
      line-height: 60px;
      font-size: 15px;
      color: #fff;
      border: 0 solid #fff;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
      outline: 1px solid;
      outline-color: rgba(255, 255, 255, 0.5);
      outline-offset: 0px;
      text-shadow: none;
      transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .more_btn a:hover {
      border: 1px solid #fff;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
      outline-color: rgba(255, 255, 255, 0);
      outline-offset: 15px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }  
    
    .visual-sec .img-box {
      display: block;
      width: 100%;
      height: calc(100vh - 100px);
      overflow: hidden;
    }
    .visual-sec img {
      transform: scale(1.05);
      transition: 1.5s 0.1s;
    }
  
    .visual-sec video {
      height: 100%;
      transform: scale(1.05);
      transition: 1.5s 0.1s;
      object-fit: cover;
    }
  
    .visual-sec .swiper-slide-active img {
      transform: scale(1.0);
    }
    .visual-sec .all-box {
      position: absolute;
      display: inline-flex;
      width: 70%;
      height: 50px;
      left: 50%;
      bottom: 10px;
      box-sizing: border-box;
      padding: 0 20px;
      transform: translate(-50%, -50%);
      z-index: 20;
    }
    .visual-sec .progress-box {
      position: relative;
      width: 100%;
      height: 50px;
      z-index: 11;
    }
    .autoplay-progress {
      position: absolute;
      left: 30px;
      top: 10px;
      z-index: 10;
      width: 88%;
      height: 3px;
      background-color: rgba(0, 0, 0, 0.1);
    }
  
    .current, .total {color: #fff; font-size: 16px; margin-top: -2px;}
    
    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
    /*  height: 100%;*/
      stroke-width: 1px;
      stroke: #fff;
      fill: none;
      stroke-dashoffset: calc(100 * (1 - var(--progress)));
      stroke-dasharray: 100;
    }
    /* stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이 
       stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
     */
    .visual-sec .swiper-pagination {
      display: flex;
      color: #fff;
      justify-content: space-between;
      position: static;
      text-align: left;
    }
    .visual-sec .arrow-box {
      position: absolute;
      width: 80px;
      height: 50px;
    }
    
    .visual-sec .swiper-button-next,
    .visual-sec .swiper-button-prev {
      width: 21px;
      height: 21px;
      top: 0;
      margin-top: 0;
      background: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-left-fff.svg) no-repeat center / 100%;
    }
    
    .visual-sec .swiper-button-next {
      background-image: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-right-fff.svg);
    }
    .visual-sec .swiper-button-next::after,
    .visual-sec .swiper-button-prev::after {
      font-size: 0;
    }
  
  /* topbanner 끝 */
  
  
  
  
  
  /* brand 시작 */
  .brand {
      position: relative;
      width: 90%;
      z-index: 9;
      overflow: inherit;
      display: block;
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 125px;
      margin-top: 10vw;
      box-sizing: border-box;
  }
  
  .brand .brand_wrap .col {
      width: 100%;
      margin-top: 20px;
      opacity: 0;
      position: relative;
      top: 200px;
    }
  
  
  .brand .brand_wrap .col .linkBox{
      position: relative;
      display: flex;
      cursor: pointer;
  }
  
  .brand .brand_wrap .col .linkBox .thumb{
      position: relative;
      width: 50%;
      overflow: hidden;
  }
  .brand .brand_wrap .col .linkBox:hover .thumb .thumbInner{
      transform: scale(1.06);
  }
  
  .brand .brand_wrap .col .linkBox .thumb .thumbInner{
      width: 100%;
      height: 100%;
      transition-duration: 0.5s;
      
  }
  
  .brand .brand_wrap .col .linkBox .thumb .thumbInner img{
      display: block;
      left: 0;
      top: 0;
      width: 100%;
  }
  
  .brand .brand_wrap .col .linkBox .textArea{
      width: 50%;
      color: #fff;
      z-index: 3; 
      bottom: 50%;
      position:relative; 
  }
  .brand .brand_wrap .col .linkBox .textArea div{
    position: absolute;
    width: 60%;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
  }

  .brand .brand_wrap .col3 .linkBox .textArea div{
    position: absolute;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;    
  }

  .brand .brand_wrap .col3 .linkBox{flex-direction: row-reverse;}

  .brand .brand_wrap .col .linkBox .textArea .title{
      font-size: 45px;
      line-height: 1.1;
      letter-spacing: -0.005em;
      margin-bottom: 30px;
      color: #000;
      font-weight: bold;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .text{
      font-size: 17px;
      font-weight: 400;
      line-height: 1.67;
      letter-spacing: -0.015em;
      color: #000;
      margin-bottom: 50px;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .btn{
    position: relative;
    background-color: #79B928;
    color: #fff;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
    overflow: hidden;
  
  }
  
  .brand .brand_wrap .col .linkBox .textArea a::before{
    content: '';
    position: absolute;
    right: 23px;
    width: 10px;
    height: 10px;
    border-top:3px solid #fff; 
    border-right:3px solid #fff; 
    transform: rotate(45deg);
    transition-duration: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a{
    width: 200px;
    transition-delay: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a::before{
    transform: rotate(45deg) translate(50px,-50px);
  }
  
  .brand .brand_wrap .col .linkBox .textArea a::after{
    content: '';
    position: absolute;
    left: -50px;
    right: 23px;
    width: 10px;
    height: 10px;
    border-top:3px solid #fff; 
    border-right:3px solid #fff; 
    transform: rotate(45deg) translate(-50px,50px);
    transition-duration: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a::after{
    transform: rotate(45deg) translate(50px,-50px);
    transition-delay: 0.5s;
  }
  
  .brand .brand_wrap .col .linkBox .textArea a span{
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    font-size: 16px;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a span{
    visibility: visible;
    opacity: 1;
    color: #fff;
    transition-delay: 0.5s;
    font-size: 16px;
    transform: translateX(10px);
  }
  
  /* brand 끝 */
  
  
  
  /* tabsWrap */
  #tabsWrap{position: relative; background:url(../img/bg_main_popular.jpg); background-repeat: no-repeat;  padding: 50px 0;}
  .tabs_inner{position: relative; width: 90%; max-width: 1252px; margin: 0 auto; }
  
  
  .tabs_inner h2{text-align: center; font-size: 48px; font-weight: 700; margin-bottom: 50px; opacity: 0; top: 200px; position: relative;}
  
  
  .tabs_inner .tabs_title{position: relative; display: flex; justify-content: space-around;  background-color: #fff; border-radius: 50px; width: 45%; margin: 0 auto; opacity: 0; top: 200px;}
  .tabs_inner .tabs_title li{width: 33.3%; background-color: #fff; color: #000; text-align: center; line-height: 40px; cursor: pointer; transition-duration: 0.5s; font-size: 16px;} 
  .tabs_inner .tabs_title li:first-child {border-radius: 50px 0 0 50px;}
  .tabs_inner .tabs_title li:last-child {border-radius: 0 50px 50px 0;}
  .tabs_inner .tabs_title li.select{background-color: #000; color: #fff;  border-radius: 50px;}
  

  .tabs_inner .tabs_contents{width: 100%; margin: 0 auto;  position: relative; top: 300px; opacity: 0;}
  .tabs_inner .tabs_contents .content{display: flex; margin-top: 80px; padding-bottom: 100px; justify-content: space-between;}
  .tabs_inner .tabs_contents .content .content_item{ width: 32%;  margin-bottom: 100px; position: relative; background-color: #fff; }
  
  .tabs_inner .tabs_contents .content_item .contents_img {margin-top: 30px;}
  .tabs_inner .tabs_contents .content_item .contents_img img {position: relative; width: 55%; margin: 0 auto; transition-duration: 0.5s;}
  .tabs_inner .tabs_contents .content_item .contents_img img:hover {scale: 1.2;}
  
  .tabs_inner .tabs_contents .content_item .contents_text {margin: 34px 0; text-align: center; padding: 0 20px 0 20px;}
  .tabs_inner .tabs_contents .content_item .contents_text p{font-size: 18px; font-weight: 700; padding-bottom: 50px;}

  .tabs_inner .tabs_contents .content_item .contents_text a {font-size: 0.8em; font-weight: 700; color: #79B928; position: relative;}
  .tabs_inner .tabs_contents .content_item .contents_text a span{position: absolute; display: inline-block; margin-top: 6px; margin-left: 5px;}
  .tabs_inner .tabs_contents .content_item .contents_text a:hover {text-decoration: underline; text-decoration-color: #79B928;}
  .tabs_inner .tabs_contents .content_item .contents_text a:hover span{animation: green 0.7s ease-in-out infinite;}
  
  
  .tabs_inner .tabs_contents .content{font-size: 1em; line-height: 1.6em;display: none;}
  .tabs_inner .tabs_contents .content:first-child{display: flex;}
  
  
  
  .accessory {
    position: relative;
    margin-top: 132px;
    overflow: hidden;
  }
  
  .accessory .title_wrap {
    position: relative;
    width: 92%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    top: 300px; opacity: 0;
  }
  
  .accessory .title_wrap h2{
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin-bottom: 30px;
    color: #000;
    font-weight: bold;  
  }
  
  .accessory .title_wrap p{
  font-size: 18px;
  font-weight: 400;
  line-height: 1.67;
  letter-spacing: -0.015em;
  color: #666666;
  margin-top: 34px;
  }
  
  .accessory .accessory_wrap{
    margin: 0 auto;
    overflow: hidden;
    margin-top: 100px;
    margin-bottom: 60px;
  }
  .accessory .accessory_wrap .accessory_inner{
    position: relative; 
    width: 3300px;
    height: 350px;
    margin-top: 5px;
    right: 3500px;
    opacity: 0;
  }
  
  .accessory .accessory_wrap .accessory_inner ul{
    display: flex;
  }
  
  .accessory .accessory_wrap .accessory_inner li{
    width: 10%; 
  }
  
  .accessory .accessory_wrap .accessory_inner li div{
    position: relative;
    width: 270px;
    height: 270px;
    background-color: #fff;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
    border-radius: 8%;
  }
  
  .accessory .accessory_wrap .accessory_inner li div img{
    width: 100%;
  }
  
  .accessory .more_btn2 {
    width: 180px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #79B928;
    text-align: center;
    margin: 0 auto;
    transition-duration: 0.5s;
    opacity: 0;
    top: 200px;
  }
  .accessory .more_btn2 a{
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 57px;
    transition-duration: 0.5s;
  }
  
  .accessory .more_btn2:hover {
    border: 2px solid #79B928;
    background-color: #79B928;
  }
  
  .accessory .more_btn2:hover a{
    color: #fff;
  }
  
  /* .accessory 끝 */
  
  /* register 시작 */
  .register {
    position: relative;
    max-width: 90%;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 0;
    margin-top: 232px;
    box-sizing: border-box;
  }
  
  .register_wrap {
    width: 100%;
    overflow: hidden;
  }
  
  .register .register_wrap .col {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  
  .register .register_wrap .col2 {
    height: 550px;
    left: -500px;
    opacity: 0;    
  }
  
  .register .register_wrap .col3 {
    left: 500px;
    opacity: 0;  
  }

  .register .register_wrap .col2 img{
    width: 100%;
    transform: translateY(-7%);
  }



  .register .register_wrap .col .textArea {
    position: relative;
    margin-top: 80px;
  }
  
  .register .register_wrap .col .textArea p:first-child{
    font-size: 16px;
    font-weight: 700;
    color: #79B928;
    margin-bottom: 14px;
  }
  .register .register_wrap .col .textArea p:nth-child(2){
    font-size: 46px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
  }
  .register .register_wrap .col .textArea p:nth-child(3) {
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    line-height: 1.67;
    letter-spacing: -0.015em;
    width: 70%;
  }
  
  .register_wrap .more_btn2 {
    margin-top: 60px;
    width: 180px;
    height: 60px;
    background-color: #fff;
    text-align: center;
    transition-duration: 0.5s;
    border:2px solid #79B928;
  }
  .register_wrap .more_btn2 a{
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 57px;
    transition-duration: 0.5s;
  }
  
  .register_wrap .more_btn2:hover {
    border: 2px solid #79B928;
    background-color: #79B928;
  }
  
  .register_wrap .more_btn2:hover a{
    color: #fff;
  }
  
  /* register 끝 */
  
  .support {
    position: relative;
    background-color: #F8FAFB;
    width: 100%;
    height: 700px;
    margin: 0 auto;
  }
  
  .support .title_wrap {
    position: relative;
    width: 90%;
    max-width: 1226px;
    margin: 0 auto;
    text-align: center;
    padding:100px 0 100px 0;
  }
  
  .support .title_wrap h2{
    font-size: 48px;
    font-weight: 700;
    color: #000;
    opacity: 0;
    top: 300px;
    position: relative;
  }
  
  .support .support_wrap {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .support .support_wrap .col{
    display: flex;
    justify-content: space-between;
    text-align: center;
    position: relative;
    opacity: 0;
    top: 100px;
  }
  
  .support .support_wrap .col>div {
    position: relative;
    width: 23%;
    height: 220px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
    border-radius: 8%;
    background-color: #fff;
    transition-duration: 0.5s;
  }
  
  .support .support_wrap .col>div:hover {
    transform: translateY(-10%);
  }
  
  .support .support_wrap .col div .textArea {
    position: absolute;
    width: 100%;
  }
  
  .support .support_wrap .col div .textArea img {
    margin: 0 auto;
    width: 64px;
    height: 64px;
    margin-top: 55px;
  }
  
  .support .support_wrap .col div .textArea h4 {
    font-size: 17px;
    font-weight: 500;
    margin: 20px 0 20px 0;
    color: #000;
    text-decoration: underline;
    text-underline-position:under;   
    text-decoration-thickness: 1px;
  }
  
  .support .support_wrap .col div .textArea p {
    display: none;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    padding: 0 30px 0 30px ;
  }
  
  
  /* .support 끝 */
  
  
  /* store 시작 */
  #store{position: relative ; overflow: hidden; max-width: 90%; margin: 0 auto;}
  #store .title_wrap {position: relative; text-align: center; margin-top: 100px;top:300px; opacity: 0;}
  #store .title_wrap h2{ font-size: 48px; font-weight: 700;color: #000;}
  #store .title_wrap p {font-size: 18px;font-weight: 400; line-height: 1.67;
  letter-spacing: -0.015em;color: #666666;margin-top: 34px;}
  
  
  #store .store_list{position: relative; height: 500px; display: flex; justify-content: space-between; margin-top: 80px; margin-bottom: 200px; top: 500px; opacity: 0;}
  #store .store_list li{width: 12%; background-position: right bottom; background-size: cover; box-shadow: -3px 0 3px rgba(0,0,0,0.5); cursor: pointer;display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; opacity: 0.7;}
  #store .store_list li .store_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; transition-duration: 0.5s;}
  #store .store_list li .store_list_inner h3{color: #FFF;font-size: 30px; transform:rotate(90deg); transition-duration: 0.5s;  text-align: center; display: block; position: absolute; width: 500px;}
  #store .store_list li .store_list_inner p {opacity: 0; transition-duration: 2s;}
  #store .store_list li .store_list_inner .more_btn2{transition-duration: 2s; opacity: 0; width: 1px; height: 1px; font-size: 0.5px;}
  
  #store .store_list li.store_select{width: 76%; display: flex; justify-content: center; align-items: center; opacity: 1;}
  #store .store_list li.store_select .store_list_inner{width: 100%;  height: 100%; text-align: center; background-color: rgba(0,0,0,0.5);}
  #store .store_list li.store_select .store_list_inner h3{color: #FFF; margin-bottom: 30px; font-size: 40px; transform: rotate(0deg); font-weight: 700; top: 30%;}
  #store .store_list li.store_select .store_list_inner p {opacity: 1; color: #fff; font-size: 16px; font-weight: 400; display: block; margin-top: 120px;}
  #store .store_list li.store_select .store_list_inner .more_btn2{display: block; width: 180px; height: 60px; border: 1px solid #FFF; color: #FFF; text-align: center; line-height: 60px; font-size: 14px; opacity: 1; margin-top: 40px; font-weight: 400; }
  
  #store .store_list li:nth-child(1){background-image: url(../img/store_0.jpg); }
  #store .store_list li:nth-child(2){background-image: url(../img/store_1.jpg);}
  #store .store_list li:nth-child(3){background-image: url(../img/store_2.jpg);}
  
  /* store 끝 */
  
  #news {position: relative; width: 100%; background-color: #F8FAFB;}
  #news .news_wrap {max-width: 90%; margin: 0 auto; padding-top: 100px;}
  #news h2{ font-size: 2.67em; font-weight: 700; text-align: center; top: 300px; opacity: 0;}
  #news .news_wrap .news_list {display: flex; justify-content: space-around; margin-top: 80px; margin-bottom: 60px; flex-wrap: wrap;}
  #news .news_wrap .news_list li{position: relative; width: 100%; background-color: #fff; box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%); margin-bottom: 50px; top: 300px; opacity: 0;}
  #news .news_wrap .news_list li div:first-child img{ width: 100%;}
  #news .news_wrap .news_list li .news_text_wrap{background-color: #fff;padding: 14px 30px 30px 30px;}
  #news .news_wrap .news_list li .news_text_wrap h3{font-size: 0.8em; line-height: 23px; color: #fff; text-align: center;}
  #news .news_list li .news_text_wrap .text_brand{background-color: #79B928; width: 85px; height: 25px; text-align: center;}
  #news .news_list li .news_text_wrap .text_news{background-color: #000; width: 85px; height: 25px;}
  #news .news_list li .news_text_wrap .main_text{font-size: 0.9em; color: #000; margin-top: 14px;}
  #news .news_list li .news_text_wrap .sub_text{color: #666666; font-size: 0.9em;}
  
  #news .news_list li .over_box{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; 
    opacity: 0; transition-duration: 0.3s;
  }
  #news .news_list li .over_box p{font-size: 0.9em; font-weight: 400; color: #fff;}
  #news .news_list li:hover .over_box{opacity: 1;}
  #news .more_btn{display: block; width: 190px; height: 50px; margin: 0 auto;border: 1px solid #fff; border-radius: 6px; font-size: 0.7em; color: #fff; text-align: center; line-height: 50px;}
  #news .more_btn:hover{background-color: #fff ; color: #121212; font-weight: 700;}
  
  /* .news 끝 */ 
  }







/* 모바일 */
  @media screen and (max-width:600px) {
    .visual-sec .txt-box {
      position: absolute;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      width: 70%;
      padding: 0 2.0rem;
      transform: translate(-50%, -60%);
      z-index: 10;
    }
  
    .visual-sec .txt-box > .logo_img1{width: 260px; margin-bottom: 40px;}
    .visual-sec .txt-box > .logo_img2{width: 320px; margin-bottom: 40px;}  
  
    .visual-sec .txt-box > h3 {
      color: #fff;
      font-size: 3vw;
      font-weight: 700;
      line-height: 1.4;
      word-break: keep-all;
      transform: translateY(20px);
      opacity: 0;
      transition: 1s 0.2s;
    }
    .visual-sec .txt-box > p {
      color: #fff;
      margin-top: 1.6em;
      font-size: 1.6rem;
      transform: translateY(20px);
      opacity: 0;
      word-break: keep-all;
      transition: 1s 0.4s;
    }
    .visual-sec .swiper-slide-active .txt-box > h3,
    .visual-sec .swiper-slide-active .txt-box > p {
      transform: translateY(0);
      opacity: 1;
    }
  
    .visual-sec .more_btn {
      margin-top: 48px;
    }
    .more_btn a {
      display: block;
      text-align: center;
      width: 160px;
      height: 60px;
      line-height: 60px;
      font-size: 15px;
      color: #fff;
      border: 0 solid #fff;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
      outline: 1px solid;
      outline-color: rgba(255, 255, 255, 0.5);
      outline-offset: 0px;
      text-shadow: none;
      transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    }
    
    .more_btn a:hover {
      border: 1px solid #fff;
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
      outline-color: rgba(255, 255, 255, 0);
      outline-offset: 15px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }  
    
    .visual-sec .img-box {
      display: block;
      width: 100%;
      height: calc(100vh - 80px);
      overflow: hidden;
    }
    .visual-sec img {
      transform: scale(1.05);
      transition: 1.5s 0.1s;
    }
  
    .visual-sec video {
      height: 100%;
      transform: scale(1.05);
      transition: 1.5s 0.1s;
      object-fit: cover;
    }
  
    .visual-sec .swiper-slide-active img {
      transform: scale(1.0);
    }
    .visual-sec .all-box {
      position: absolute;
      display: inline-flex;
      width: 70%;
      height: 50px;
      left: 50%;
      bottom: 10px;
      box-sizing: border-box;
      padding: 0 20px;
      transform: translate(-50%, -50%);
      z-index: 20;
    }
    .visual-sec .progress-box {
      position: relative;
      width: 100%;
      height: 50px;
      z-index: 11;
    }
    .autoplay-progress {
      position: absolute;
      left: 30px;
      top: 10px;
      z-index: 10;
      width: 80%;
      height: 3px;
      background-color: rgba(0, 0, 0, 0.1);
    }
  
    .current, .total {color: #fff; font-size: 16px; margin-top: -2px;}
    
    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
     /* height: 100%; */
      stroke-width: 2px;
      stroke: #fff;
      fill: none;
      stroke-dashoffset: calc(100 * (1 - var(--progress)));
      stroke-dasharray: 100;
    }
    /* stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이 
       stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
     */
    .visual-sec .swiper-pagination {
      display: flex;
      color: #fff;
      justify-content: space-between;
      position: static;
      text-align: left;
    }
    .visual-sec .arrow-box {
      position: absolute;
      width: 80px;
      height: 50px;
    }
    
    .visual-sec .swiper-button-next,
    .visual-sec .swiper-button-prev {
      width: 21px;
      height: 21px;
      top: 0;
      margin-top: 0;
      background: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-left-fff.svg) no-repeat center / 100%;
    }
    
    .visual-sec .swiper-button-next {
      background-image: url(https://www.century21cc.co.kr/views/res/imgs/common/icon-arrow-right-fff.svg);
    }
    .visual-sec .swiper-button-next::after,
    .visual-sec .swiper-button-prev::after {
      font-size: 0;
    }
  
  /* topbanner 끝 */
  
  
  
  
  
  /* brand 시작 */
  .brand {
      position: relative;
      width: 90%;
      z-index: 9;
      overflow: inherit;
      display: block;
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 125px;
      margin-top: 116px;
      box-sizing: border-box;
  }
  
  .brand .brand_wrap .col {
      width: 100%;
      margin-top: 20px;
      opacity: 0;
      position: relative;
      top: 200px;
    }
  
  
  .brand .brand_wrap .col .linkBox{
      position: relative;
      display: flex;
      cursor: pointer;
  }
  
  .brand .brand_wrap .col .linkBox .thumb{
      position: relative;
      width: 50%;
      overflow: hidden;
  }
  .brand .brand_wrap .col .linkBox:hover .thumb .thumbInner{
      transform: scale(1.06);
  }
  
  .brand .brand_wrap .col .linkBox .thumb .thumbInner{
      width: 100%;
      height: 100%;
      transition-duration: 0.5s;
      
  }
  
  .brand .brand_wrap .col .linkBox .thumb .thumbInner img{
      display: block;
      left: 0;
      top: 0;
      width: 100%;
  }
  
  .brand .brand_wrap .col .linkBox .textArea{
      width: 50%;
      color: #fff;
      z-index: 3; 
      bottom: 50%;
      position:relative; 
  }
  .brand .brand_wrap .col .linkBox .textArea div{
    position: absolute;
    width: 60%;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
  }

  .brand .brand_wrap .col3 .linkBox .textArea div{
    position: absolute;
    width: 60%;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;    
  }

  .brand .brand_wrap .col3 .linkBox{flex-direction: row-reverse;}

  .brand .brand_wrap .col .linkBox .textArea .title{
      font-size: 30px;
      line-height: 1.1;
      letter-spacing: -0.005em;
      margin-bottom: 30px;
      color: #000;
      font-weight: bold;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .text{
      font-size: 15px;
      font-weight: 400;
      line-height: 1.67;
      letter-spacing: -0.015em;
      color: #000;
      margin-bottom: 50px;
  }
  
  .brand .brand_wrap .col .linkBox .textArea .btn{
    position: relative;
    background-color: #79B928;
    color: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;
    overflow: hidden;
  
  }
  
  .brand .brand_wrap .col .linkBox .textArea a::before{
    content: '';
    position: absolute;
    right: 20px;
    width: 7px;
    height: 7px;
    border-top:3px solid #fff; 
    border-right:3px solid #fff; 
    transform: rotate(45deg);
    transition-duration: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a{
    width: 150px;
    transition-delay: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a::before{
    transform: rotate(45deg) translate(50px,-50px);
  }
  
  .brand .brand_wrap .col .linkBox .textArea a::after{
    content: '';
    position: absolute;
    left: -54px;
    right: 23px;
    width: 7px;
    height: 7px;
    border-top:3px solid #fff; 
    border-right:3px solid #fff; 
    transform: rotate(45deg) translate(-50px,50px);
    transition-duration: 0.3s;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a::after{
    transform: rotate(45deg) translate(50px,-50px);
    transition-delay: 0.5s;
  }
  
  .brand .brand_wrap .col .linkBox .textArea a span{
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    font-size: 14px;
  }
  
  .brand .brand_wrap .col .linkBox:hover .textArea a span{
    visibility: visible;
    opacity: 1;
    color: #fff;
    transition-delay: 0.5s;
    font-size: 16px;
    transform: translateX(10px);
  }
  
  /* brand 끝 */
  
  
  
  /* tabsWrap */
  #tabsWrap{position: relative; background:url(../img/bg_main_popular.jpg); background-repeat: no-repeat;  padding: 50px 0;}
  .tabs_inner{position: relative; width: 90%; max-width: 1252px; margin: 0 auto; }
  
  
  .tabs_inner h2{text-align: center; font-size: 30px; font-weight: 700; margin-bottom: 50px; opacity: 0; top: 200px; position: relative;}
  
  
  .tabs_inner .tabs_title{position: relative; display: flex; justify-content: space-around;  background-color: #fff; border-radius: 50px; width: 70%; margin: 0 auto;  opacity: 0; top: 200px;}
  .tabs_inner .tabs_title li{width: 33.3%; background-color: #fff; color: #000; text-align: center; line-height: 40px; cursor: pointer; transition-duration: 0.5s; font-size: 16px;} 
  .tabs_inner .tabs_title li:first-child {border-radius: 50px 0 0 50px;}
  .tabs_inner .tabs_title li:last-child {border-radius: 0 50px 50px 0;}
  .tabs_inner .tabs_title li.select{background-color: #000; color: #fff;  border-radius: 50px;}
  

  .tabs_inner .tabs_contents{width: 100%; margin: 0 auto;  position: relative; top: 300px; opacity: 0;}
  .tabs_inner .tabs_contents .content{display: flex; margin-top: 80px; padding-bottom: 100px; justify-content: space-between;}
  .tabs_inner .tabs_contents .content .content_item{ width:49%;  margin-bottom: 100px; position: relative; background-color: #fff; }
  
  .tabs_inner .tabs_contents .content_item .contents_img {margin-top: 30px;}
  .tabs_inner .tabs_contents .content_item .contents_img img {position: relative; width: 55%; margin: 0 auto; transition-duration: 0.5s;}
  .tabs_inner .tabs_contents .content_item .contents_img img:hover {scale: 1.2;}
  
  .tabs_inner .tabs_contents .content_item .contents_text {margin: 34px 0; text-align: center; padding: 0 20px 0 20px;}
  .tabs_inner .tabs_contents .content_item .contents_text p{font-size: 15px; font-weight: 700; padding-bottom: 50px;}

  .tabs_inner .tabs_contents .content .content_item:nth-child(3){display: none;}
  .tabs_inner .tabs_contents .content_item .contents_text a {font-size: 15px; font-weight: 700; color: #79B928; position: relative;}
  .tabs_inner .tabs_contents .content_item .contents_text a span{position: absolute; display: inline-block; margin-top: 6px; margin-left: 5px;}
  .tabs_inner .tabs_contents .content_item .contents_text a:hover {text-decoration: underline; text-decoration-color: #79B928;}
  .tabs_inner .tabs_contents .content_item .contents_text a:hover span{animation: green 0.7s ease-in-out infinite;}
  
  
  .tabs_inner .tabs_contents .content{font-size: 1em; line-height: 1.6em;display: none;}
  .tabs_inner .tabs_contents .content:first-child{display: flex;}
  
  
  
  .accessory {
    position: relative;
    margin-top: 132px;
    overflow: hidden;
  }
  
  .accessory .title_wrap {
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    top: 300px; opacity: 0;
  }
  
  .accessory .title_wrap h2{
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin-bottom: 30px;
    color: #000;
    font-weight: bold;  
  }
  
  .accessory .title_wrap p{
  font-size: 15px;
  font-weight: 400;
  line-height: 1.67;
  letter-spacing: -0.015em;
  color: #666666;
  margin-top: 34px;
  }
  
  .accessory .accessory_wrap{
    margin: 0 auto;
    overflow: hidden;
    margin-top: 50px;
    margin-bottom: 60px;
  }
  .accessory .accessory_wrap .accessory_inner{
    position: relative; 
    width: 2400px;
    height: 220px;
    margin-top: 5px;
    right: 3500px;
    opacity: 0;
  }
  
  .accessory .accessory_wrap .accessory_inner ul{
    display: flex;
  }
  
  .accessory .accessory_wrap .accessory_inner li{
    width: 10%; 
  }
  
  .accessory .accessory_wrap .accessory_inner li div{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
    border-radius: 8%;
  }
  
  .accessory .accessory_wrap .accessory_inner li div img{
    width: 100%;
  }
  
  .accessory .more_btn2 {
    width: 180px;
    height: 60px;
    background-color: #fff;
    border: 2px solid #79B928;
    text-align: center;
    margin: 0 auto;
    transition-duration: 0.5s;
    opacity: 0;
    top: 200px;
  }
  .accessory .more_btn2 a{
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 57px;
    transition-duration: 0.5s;
  }
  
  .accessory .more_btn2:hover {
    border: 2px solid #79B928;
    background-color: #79B928;
  }
  
  .accessory .more_btn2:hover a{
    color: #fff;
  }
  
  /* .accessory 끝 */
  
  /* register 시작 */
  .register {
    position: relative;
    max-width: 90%;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 0;
    margin-top: 232px;
    box-sizing: border-box;
  }
  
  .register_wrap {
    width: 100%;
    overflow: hidden;
  }
  
  .register .register_wrap .col {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  
  .register .register_wrap .col2 {
    height: 400px;
    left: -500px;
    opacity: 0;
  }

  .register .register_wrap .col3 {
    left: 500px;
    opacity: 0;  
  }
  
  .register .register_wrap .col2 img{
    width: 100%;
    transform: translateY(-7%);
  }



  .register .register_wrap .col .textArea {
    position: relative;
    margin-top: 40px;
  }
  
  .register .register_wrap .col .textArea p:first-child{
    font-size: 14px;
    font-weight: 700;
    color: #79B928;
    margin-bottom: 14px;
  }
  .register .register_wrap .col .textArea p:nth-child(2){
    font-size: 30px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
  }
  .register .register_wrap .col .textArea p:nth-child(3) {
    font-weight: 400;
    font-size: 15px;
    color: #666666;
    line-height: 1.67;
    letter-spacing: -0.015em;
    width: 90%;
  }
  
  .register_wrap .more_btn2 {
    margin-top: 60px;
    width: 180px;
    height: 60px;
    background-color: #fff;
    text-align: center;
    transition-duration: 0.5s;
    border:2px solid #79B928;
  }
  .register_wrap .more_btn2 a{
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 57px;
    transition-duration: 0.5s;
  }
  
  .register_wrap .more_btn2:hover {
    border: 2px solid #79B928;
    background-color: #79B928;
  }
  
  .register_wrap .more_btn2:hover a{
    color: #fff;
  }
  
  /* register 끝 */
  
  .support {
    position: relative;
    background-color: #F8FAFB;
    width: 100%;
    height: 570px;
    margin: 0 auto;
  }
  
  .support .title_wrap {
    position: relative;
    width: 90%;
    max-width: 1226px;
    margin: 0 auto;
    text-align: center;
    padding:60px 0 60px 0;
  }
  
  .support .title_wrap h2{
    font-size: 30px;
    font-weight: 700;
    color: #000;
    opacity: 0;
    top: 100px;
    position: relative;    
  }
  
  .support .support_wrap {
    max-width: 90%;
    margin: 0 auto;
  }
  
  .support .support_wrap .col{
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    position: relative;
    opacity: 0;
    top: 100px;    
  }
  
  .support .support_wrap .col>div {
    position: relative;
    width: 45%;
    height: 140px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%);
    border-radius: 8%;
    background-color: #fff;
    transition-duration: 0.5s;
    margin-bottom: 30px;
  }
  
  .support .support_wrap .col>div:hover {
    transform: translateY(-10%);
  }
  
  .support .support_wrap .col div .textArea {
    position: absolute;
    width: 100%;
  }
  
  .support .support_wrap .col div .textArea img {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    margin-top: 20px;
  }
  
  .support .support_wrap .col div .textArea h4 {
    font-size: 17px;
    font-weight: 500;
    margin: 20px 0 20px 0;
    color: #000;
    text-decoration: underline;
    text-underline-position:under;   
    text-decoration-thickness: 1px;
  }
  
  .support .support_wrap .col div .textArea p {
    display: none;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    padding: 0 30px 0 30px ;
  }
  
  
  /* .support 끝 */
  
  
  /* store 시작 */
  #store{position: relative ; overflow: hidden; max-width: 90%; margin: 0 auto;}
  #store .title_wrap {position: relative; text-align: center; margin-top: 60px; top: 300px; opacity: 0;}
  #store .title_wrap h2{ font-size: 30px; font-weight: 700;color: #000;}
  #store .title_wrap p {font-size: 15px;font-weight: 400; line-height: 1.67;
  letter-spacing: -0.015em;color: #666666;margin-top: 34px;}
  
  
  #store .store_list{position: relative; height: 450px; display: flex; justify-content: space-between; margin-top: 60px; margin-bottom: 200px; top: 500px; opacity: 0}
  #store .store_list li{width: 20%; background-position: right bottom; background-size: cover; box-shadow: -3px 0 3px rgba(0,0,0,0.5); cursor: pointer;display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; opacity: 0.7;}
  #store .store_list li .store_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; transition-duration: 0.5s;}
  #store .store_list li .store_list_inner h3{color: #FFF;font-size: 25px; transform:rotate(90deg); transition-duration: 0.5s;  text-align: center; display: block; position: absolute; width: 500px;}
  #store .store_list li .store_list_inner p {opacity: 0; transition-duration: 2s; display: none; font-size: 15px;}
  #store .store_list li .store_list_inner .more_btn2{transition-duration: 2s; opacity: 0; width: 1px; height: 1px; font-size: 0.5px;}
  
  #store .store_list li.store_select{width: 60%; display: flex; justify-content: center; align-items: center; opacity: 1;}
  #store .store_list li.store_select .store_list_inner{width: 100%;  height: 100%; text-align: center; background-color: rgba(0,0,0,0.5);}
  #store .store_list li.store_select .store_list_inner h3{color: #FFF; margin-bottom: 30px; font-size: 30px; transform: rotate(0deg); font-weight: 700; top: 34%;}
  #store .store_list li.store_select .store_list_inner p {opacity: 1; color: #fff; font-size: 15px; font-weight: 400; display: block; margin-top: 120px; display: none;}
  #store .store_list li.store_select .store_list_inner .more_btn2{display: block; width: 180px; height: 60px; border: 1px solid #FFF; color: #FFF; text-align: center; line-height: 58px; font-size: 14px; opacity: 1; margin-top: 40px; font-weight: 400; }
  
  #store .store_list li:nth-child(1){background-image: url(../img/store_0.jpg); }
  #store .store_list li:nth-child(2){background-image: url(../img/store_1.jpg);}
  #store .store_list li:nth-child(3){background-image: url(../img/store_2.jpg);}
  
  /* store 끝 */
  
  #news {position: relative; width: 100%; background-color: #F8FAFB;}
  #news .news_wrap {max-width: 90%; margin: 0 auto; padding-top: 100px; }
  #news h2{ font-size: 30px; font-weight: 700; text-align: center;}
  #news .news_wrap .news_list {display: flex; justify-content: space-around; margin-top: 80px; margin-bottom: 60px; flex-wrap: wrap;}
  #news .news_wrap .news_list li{position: relative; width: 100%; background-color: #fff; box-shadow: 2px 4px 12px rgba(0, 0, 0, 20%); margin-bottom: 50px; top: 300px; opacity: 0;}
  #news .news_wrap .news_list li div:first-child img{ width: 100%;}
  #news .news_wrap .news_list li .news_text_wrap{background-color: #fff;padding: 14px 30px 30px 30px;}
  #news .news_wrap .news_list li .news_text_wrap h3{font-size: 0.8em; line-height: 23px; color: #fff; text-align: center;}
  #news .news_list li .news_text_wrap .text_brand{background-color: #79B928; width: 85px; height: 25px; text-align: center;}
  #news .news_list li .news_text_wrap .text_news{background-color: #000; width: 85px; height: 25px;}
  #news .news_list li .news_text_wrap .main_text{font-size: 0.9em; color: #000; margin-top: 14px;}
  #news .news_list li .news_text_wrap .sub_text{color: #666666; font-size: 0.9em;}
  
  #news .news_list li .over_box{
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; 
    opacity: 0; transition-duration: 0.3s;
  }
  #news .news_list li .over_box p{font-size: 0.9em; font-weight: 400; color: #fff;}
  #news .news_list li:hover .over_box{opacity: 1;}
  #news .more_btn{display: block; width: 190px; height: 50px; margin: 0 auto;border: 1px solid #fff; border-radius: 6px; font-size: 0.7em; color: #fff; text-align: center; line-height: 50px;}
  #news .more_btn:hover{background-color: #fff ; color: #121212; font-weight: 700;}
  
  /* .news 끝 */ 

  }