#main{position: relative;  height: 96.7rem; background: url(../images/main/bg.jpg) no-repeat top center;}
#section1{overflow: hidden; }
.msec1{position: relative; height: 100%;}
.msec1 .swiper-slide{overflow:hidden}
.msec1 .swiper-slide .slogan{position:absolute; z-index:1; top:10%; left:50%; transform: translateX(-50%); width:100%; padding:0 2rem; max-width:var(--container); }
.msec1 .swiper-slide .slogan p{font-weight: bold; position: relative; text-align: center;}
.msec1 .swiper-slide .slogan .text1{top:0; opacity:0; font-size:6.2rem; font-family: var(--font-main); font-weight: 800; color:var(--main_color); transition:0.5s 0.5s}
.msec1 .swiper-slide .slogan .text1 span{color:var(--sub_color)}
.msec1 .swiper-slide .slogan .text2{top:10px;opacity:0; filter: blur(10px); font-size:2.4rem;  transition:0.5s 1s}



.msec1 .swiper-slide .bg{ height:96.7rem; position: relative;}
/*.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)}


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

.msec1 .swiper-button-prev{left:auto; left: calc(80% - 5rem); }
.msec1 .swiper-button-next{left:auto;  left: 80%; 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;}



.main_img{text-align: center; margin-top: 30rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 9;}
.tree{position: absolute; bottom: -100px; left: -10rem; z-index: 9;}
.butterfly{position: absolute; top:5rem; left:0; animation: butterfly infinite 15s; z-index: 9;}

@keyframes butterfly {
    from {left: 100%;}
    to {left: 0%;}
  }

/* 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_top{margin-top: -35rem; z-index: 999;}
.main_top .inner{display: flex; gap:3rem}
.main_tel{width: 30%; background: #279CF5; color:#fff; border-radius: 20px; text-align: center; padding:3rem 5rem 2rem 5rem; z-index: 1;}
.main_tel dl{margin-bottom: 1.5rem;}
.main_tel dl dt {font-weight: bold;}
.main_tel dl dt span{color:#FFD42A}
.main_tel dl dd{font-size: 1.6rem;}
.main_tel dl dd span{display: block; font-size: 4rem; font-family: var(--font-point); font-weight: bold;}
.main_tel ul{position: relative; z-index: 9;}
.main_tel ul li{margin-bottom: .7rem;}
.main_tel ul li a{display: flex; justify-content: space-between; align-items: center;  padding:1rem 2rem; border-radius: 100rem; background: #fff; color:#117BCB; position: relative; z-index: 9;}

.main_board{width: 35%; position: relative; background: #fff; border-radius: 20px; padding: 4rem 3rem;  z-index: 9;}
.main_board h2{position: absolute; top: -3rem; left: 0; display: inline-block; color:#fff; background: #22BF9A; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; padding:1rem 2rem} 
.main_board h3{font-weight: bold; font-family: var(--font-point); font-size: 2.2rem; margin-bottom: 2rem;}
.main_board_top{display: flex; justify-content: space-between;}



.tab {overflow: hidden; }
.tab button { background-color: inherit;  float: left;  border: none;  outline: none;   cursor: pointer;  padding: 1rem;  transition: 0.3s; font-family: var(--font-point); font-size: 1.5rem; }
.tab button:hover,
.tab button.active {font-weight: bold;}
.tabcontent { display: none; padding: 6px 12px;}
.tabcontent ul li{margin-bottom: 1rem;}
.tabcontent ul li span{display: inline-flex; border-radius: 100px; justify-content: center; align-items: center; font-size:1.3rem; width: 4.3rem; height: 2.3rem; margin-right: 1.5rem;}
.tab_on01{background: #E1FFF4; color:#3FCFAD}
.tab_on02{background: #FFFAE1; color:#FF9A34}
.tab_on03{background: #F6F6F6; color:#464646}
.tabcontent ul li a{width: 50%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tabcontent ul li em{float: right;}



.popupzone{width: 30%; position: relative; background: #fff; border-radius: 20px;}
.popupzone h2{position: absolute; top: -3rem; left: 0; display: inline-block; color:#fff; background: #FF9A34; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; padding:1rem 2rem; z-index: 9;} 

.popup_slide{overflow:hidden;}
.popup_slide .swiper-pagination{text-align: left; padding-left: 2rem;}
.popup_slide .swiper-pagination-bullet-active{background:#FF9A34 ;}
.popup_slide .swiper-slide{overflow: hidden; border-radius: 2rem;}
.popup_slide .swiper-slide img{width: 100%; height: 100%; object-fit: cover;}


.main_business{padding:10rem 0}
.main_tit{font-family: var(--font-point); font-size: 3.6rem; text-align: center; margin-bottom: 5.6rem;}
.main_tit span{display: block; font-size: 2rem; color:#7f7f7f}
.business_con{display: flex; gap:4rem}
.business{flex:1; background:#E8FBFF ; border-radius: 20px; padding:3rem 0 20rem 3rem; position: relative;}
.business:nth-child(2){background:#EFFFE1 ;}
.business:nth-child(3){background:#FFFAE1 ;}
.business:nth-child(4){background:#E1FFF4 ;}
.business h3{font-weight: bold; font-size: 2.6rem; font-family: var(--font-point); margin-bottom: 1.4rem;}
.business h3 span{display: block; text-transform: uppercase; font-size: 1.4rem; color:#279CF5}
.business:nth-child(2) h3 span{color:#5CAC26}
.business:nth-child(3) h3 span{color:#FF9A34}
.business:nth-child(4) h3 span{color:#39CEAA}
.business ul{font-size: 1.6rem;}
.business p{position: absolute; bottom: 0; right: 0; text-align: right;}

.main_photo{display: flex; gap:4rem; margin-bottom: 10rem;}
.photo_con{flex:1}
.photo_con p{overflow: hidden; border-radius: 20px; margin-bottom: 2rem;}
.photo_con p img{transition: .5s;}
.photo_con p img:hover{transform: scale(1.2);}
.photo_con dl{margin-bottom: 2rem;}
.photo_con dl dt{font-weight: bold; font-size: 2rem; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} 
.photo_con dl dd{font-size: 1.6rem; color:#7f7f7f; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} 
.photo_con span{font-size: 1.5rem; color:#7f7f7f}

.family_site{background: #FBFBFB; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; padding:4rem 0}
.family_site .inner{display: flex; gap:12rem}
.family_site h2{font-weight: bold; font-size: 2.4rem; font-family: var(--font-point); width: 25%;}
.family_site h2 span{display: block; font-size: 1.6rem; color:#7f7f7f}
.site_slide{overflow: hidden; width:75%;}