#main{position: relative; padding:0 6rem; margin-top: 10rem;}

#section1{overflow: hidden;}
.msec1{position: relative; overflow: hidden; border-radius: 4rem;}
.msec1 .swiper-slide{overflow:hidden}
.msec1 .swiper-slide .slogan{position:absolute; z-index:10; top:30%; left:60%; width:100%; padding:0 2rem; max-width:var(--container); }
.msec1 .swiper-slide .slogan p{ font-weight: bold; position: relative;}
.msec1 .swiper-slide .slogan .text1{top:0; opacity:0; font-size:6rem;  transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; filter: blur(10px); font-size:6rem;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text2 span{color:var(--main_color)}
.msec1 .swiper-slide .slogan .text3{top:10px;opacity:0; filter: blur(10px); font-size:4.5rem;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text4{top:10px;opacity:0; filter: blur(10px); font-size:2rem;  transition:0.5s 1s}
.msec1 .swiper-slide .slogan .text4 span{color:#cd0000}


.msec1 .swiper-slide .bg{transform:scale(1.1);transition:10s; height:78.2rem; position: relative; border-radius: 4rem; overflow: hidden;}
/*.msec1 .swiper-slide .bg::before{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0;}*/
.msec1 .swiper-slide .bg img{width:100%; height: 100%; object-fit: cover;}

.msec1 .swiper-slide-active .bg{transform:scale(1)}
.msec1 .swiper-slide-active .slogan .text1{top:0;opacity:1; letter-spacing:normal;}
.msec1 .swiper-slide-active .slogan .text2{top:0;opacity:1; filter:blur(0)}
.msec1 .swiper-slide-active .slogan .text3{top:0;opacity:1; filter:blur(0)}
.msec1 .swiper-slide-active .slogan .text4{top:0;opacity:1; filter:blur(0)}

/*swiper*/
.msec1 .swiper-button-prev,
.msec1 .swiper-button-next{width: 5rem; height: 5rem; background: none; bottom:10rem; top:auto; font-size: 5rem; }

.msec1 .swiper-button-prev{left:auto; left:60%; }
.msec1 .swiper-button-next{left:auto;  left: 63%; right:0}
.msec1 .swiper-pagination{max-width:var(--container); font-weight: bold; padding:0 2rem; color:#fff; text-align: left; position: absolute; left: 50%; transform: translate(-50%);  bottom: 10rem;}

.msec1 .swiper-progress-bar {position:  absolute; left: 50%; transform: translate(-50%);; width:100%; max-width: var(--container); display: block; z-index: 1; height:.5rem; }
.msec1 .swiper-progress-bar .slide_progress-bar {position: absolute; height: .3rem; background:#fff; width:50rem; clear: both; opacity:1; bottom: 15rem; left: 50%; transform: translateX(-50%); right: 0; }
.msec1 .swiper-progress-bar .slide_progress-bar:after {position: absolute; top: 0; left: 0; background:var(--sub_color); height: 100%; width: 0; content: ""; transition: 0.1s width linear;}
.msec1 .swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
.msec1 .swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear;transition-delay: unset; width: 100%; transition-duration: 5s;}


/* pagenation */

/*.msec1 .swiper-pagination-bullet{opacity: 0.5; width: 15px; height: 15px; background: #fff; box-shadow: 0px 0px 3px #fff; }
.msec1 .swiper-pagination-bullet-active{background:#fff; opacity: 1;}
*/


.msec1 .swiper-pagination-bullet {
    background: transparent; width: 4rem; height: 4rem;
  }
  .msec1 .swiper-pagination-bullet-active .path {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    -webkit-animation: dash linear 120s;
            animation: dash linear 120s;
    -webkit-animation-iteration-count: unset;
            animation-iteration-count: unset;
  }
  .path {
    display: none;
  }
  @-webkit-keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }



  /* 메인 제품 */
 .main_product{padding: 20rem 0; position: relative;}
 .main_product::before{content: ''; width: 1974px; height: 211px; background: url(../images/main/text_outline.png) no-repeat; position: absolute; bottom: 0; left: 0;}
 .main_product .inner{position: relative; display: flex;}
 .product_tit{width:30%; background: #fff; position: relative; z-index: 8;}
 .product_tit dt{font-weight: bold; font-size: 4.5rem;}
 .product_tit dt span{display: block; margin-bottom: 3.7rem;}
 .product_tit dt em{display: block; color:var(--main_color); font-weight: bold;}
 .product_tit dd{font-size: 2rem; margin-top: 3.8rem;}
 /*.product_con{width: 70%;}*/
 .product_con{width: 100%;}
 .product_slide{font-weight: bold; font-size: 3.4rem;}
 .product_slide p{border-radius: 4rem; overflow: hidden; margin-bottom: 4.3rem;}

 .product_slide .swiper-button-next,
 .product_slide .swiper-button-prev{background: none; top: 80%;}
 .product_slide .swiper-button-next{right: auto; left: 5%;}

 /* 메인 제작사례 */
 .main_case{background: url(../images/main/case_bg.jpg) no-repeat center; background-size: cover; padding:6rem; margin: 0 6rem; overflow: hidden; border-radius: 4rem; color:#fff;font-weight: bold; }
 .case_tit{margin-bottom: 5.3rem;}
 .main_case dl{display: flex; gap:17.4rem; align-items: center;}
 .main_case dl dt{font-size: 4.5rem;}
 .main_case dl dd{}
  
 .case_list{display: flex; justify-content: space-between; gap:5rem}
 .case_list li{flex:1;}
 .case_list li p{overflow: hidden; border-radius: 2rem; margin-bottom: 3rem;}
 .case_list li p img{width: 100%;}
 .case_list li a{color:#fff;}

 .main_case2{background: none; color:#333}
 .main_case2 .case_list li a{color:#333;}

/* 메인 게시판 */
.main_board{padding: 19rem 0 0 0;}
.main_board .inner{display: flex;}
.board_tit{width: 35%;}
.board_tit p{font-weight: bold; font-size: 4.5rem; margin: 4.2rem 0}
.board_tit ul{display: flex; gap:2rem}
.board_tit ul li{background: #F2FCFF; border-radius: 1rem; padding:1rem; font-size: 1.3rem;}
.board_list{width: 65%; display: flex; gap:5rem}
.board_box{flex:1; border: 1px solid #ccc; border-radius: 4rem; padding: 5rem;}
.board_box dl dt{font-weight: bold; color:var(--main_color); margin-bottom: 2rem;}
.board_box dl dd{font-weight: bold; font-size: 2.4rem;}
.board_box span{color: #B9B9B9; display: block; margin-top: 4.5rem; text-align: right;}


 /* 메인 박스 */
.main_box{padding: 5rem 0;}
.main_box .inner{display: flex; gap:5rem}
.box_left{width: 74%; background: #F2FCFF; border-radius: 4rem; padding:5.5rem 5rem; position: relative;}
.box_left dl dt{font-weight: bold; font-size: 3.6rem; margin-bottom: 4.3rem;}
.box_left dl dt span{color:var(--main_color)}
.box_left dl dd{font-size: 2rem; font-weight: bold;}
.box_left dl dd span{color:var(--sub_color)}
.box_left p{position: absolute; bottom: 0; right: 4rem;}

/* 고객센터 */
.box_tel{width:34%; border-radius: 4rem; background: var(--main_color); color:#fff; padding:5rem 3rem; font-weight: bold;}
.box_tel dl dd{font-size: 5rem; padding:1rem 0}
.box_tel p span{display: inline-block; margin-right: 3rem;} 

/* 메인 하단 */
.bottom{display: flex; margin: 6rem; border-radius: 4rem; border:1px solid #ccc; overflow: hidden;}
.bottom_map{width: 50%;}
.root_daum_roughmap .cont .section.lst{display: none;}
.bottom_online{width: 50%; padding:10rem}
.bottom_online h2{display: flex; justify-content: space-between; font-weight: bold; font-size: 4.5rem;}
.online_con{margin-top: 4rem;}
.online_con dl{display: flex; align-items: center; gap:4rem; padding:1rem 0}
.online_con dl dt{width: 20%;}
.online_con dl dd{width: calc(80% - 4rem)}

.comm_input{padding: 1rem 2rem; border: 1px solid #ccc; border-radius: 1rem !important;}
.online_con textarea{margin-bottom: 2rem;}
.btn_reservation{text-align: center;}
.btn_reservation button{background: var(--sub_color); color:#fff; padding:2.6rem 8rem; text-align: center; border-radius: 2rem;}



/* 셀렉트박스 */
select {appearance: none;border: 0;outline: 0;background: none;color: inherit;box-shadow: none;  }
select::-ms-expand {display: none; }
.form_select {position: relative;display: inline-flex;width: 18rem;border-radius: 0.5rem; overflow: hidden; border: 1px solid #ccc;}
.form_select select {flex: 1; padding: 1rem; cursor: pointer; }
.form_select::after {content: "▼";position: absolute;right: 1rem;top: 1rem;transition: 0.25s all ease;pointer-events: none;  font-size: 1.4rem; }
.form_select:hover::after {color: #f39c12; animation: bounce 0.5s infinite; }
  
  @-webkit-keyframes bounce {
    25% {
      transform: translatey(5px);
    }
    75% {
      transform: translatey(-5px);
    }
  }
  
  @keyframes bounce {
    25% {
      transform: translatey(5px);
    }
    75% {
      transform: translatey(-5px);
    }
  }


  /* 메인 하단 배너 */
  .bottom_text{padding: 10rem 0; background:url(../images/main/bottom_text.jpg) no-repeat center; text-align: center;}
  .bottom_text dl dt{font-weight: bold; font-size: 4rem;}
  .bottom_text dl dd{font-weight: bold; font-size: 3rem; color:var(--main_color)}