html{ scroll-behavior: smooth;}


.krfont{font-family: 'Poppins', 'GmarketSans' !important;}

.inner{max-width: 1540px; padding: 0 20px; margin: 0 auto; width: 100%}

.top_btn{width: 100px; height: 100px; border-radius: 20px; background: #644D5B;
 position: fixed; right: 50px; bottom: 50px; z-index: 3;
 display: flex;
    justify-content: center;
    align-items: center; transition-duration: .5s; }
.top_btn span{background: url(../img/top.png); width: 14px; height: 18px; display: block;
 background-position: center; background-repeat: no-repeat; transition-duration: 1s}

.top_btn:hover{ box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20); background: #644D5B; border-radius: 50px}
.top_btn:hover span{margin-bottom: 10px}

.foot_are{background: #1A1A1A}
.foot_top{border-bottom: 1px solid #333; padding: 30px 0; border-top: 1px solid #333;}
.foot_top .inner{display: flex; gap:15px; align-items: center;
    justify-content: flex-start;}
.foot_top .inner a{font-size: 16px; color: #999; font-weight: 500}
/*.foot_top .inner a.agree_btn{color: #1D1D1B; }*/
.foot_top .inner span{width: 4px; height: 4px; display: block; background: #666; border-radius: 4px}

.foot_info{padding: 40px 0}
.foot_info .inner{display: flex;  align-items: flex-start;
    justify-content: space-between}
.foot_info .inner .left{display: flex; gap:50px;}



.foot_info_list{display: flex; gap:10px 20px;     flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;}
.foot_info_list li{display: flex; font-size: 16px; color: #fff; line-height: 35px; gap:20px; justify-content: flex-start;
    align-items: center;}
.foot_info_list li b{height: 35px; color: #fff; background: #222; 
border: 1px solid #111; border-radius: 35px; line-height: 35px; width: 100px; text-align: center}

.foot_info_list li.w100{width: 100%}

.foot_copy{border-top: 1px solid #333; padding: 30px 0; text-align: right}
.foot_copy p{color: #999; font-size: 16px}


.header_top{position: fixed; left: 0; top: 0; width: 100%; z-index: 9998; transition-duration: .5s;}
.header_top .inner{position: relative; display: flex;
    justify-content: space-between;
    align-items: center;}
.header_top.drop{background: rgba(255,255,255,255.8); border-color: #f5f5f5}


.fp-viewing-s05 .header_top{background: rgba(255,255,255,255.8); border-color: #f5f5f5}

.logo_top{
	width: 87px; height: 49px;
	background: url(../img/logow.png);
	background-repeat: no-repeat; background-position: center
}

.header_top.drop .logo_top{background-image: url(../img/logob.png);}

.sub_head .header_top .logo_top{background-image: url(../img/logob.png);}


.fp-viewing-s05 .header_top .logo_top{background-image: url(../img/logob.png);}


.top_nav{display: flex; gap:90px; height: 100px; align-items: center;
    justify-content: center;}
.top_nav li{position: relative; text-align: center; display: flex; height: 100px; align-items: center;
    justify-content: center;}    
.top_nav li .deps1{font-size: 20px; color: #fff; font-weight: 500; text-align: center; transition-duration: .5s; position: relative}

.header_top.drop .top_nav li .deps1{color: #1D1D1B}

.sub_head .header_top .top_nav li .deps1{color: #1D1D1B}

.fp-viewing-s05 .header_top .top_nav li .deps1{color: #1D1D1B}


.top_right{display: flex; gap:90px;justify-content: flex-end;
    align-items: center;}

.top_nav li:hover .deps1:after{opacity: 1}

.top_nav li .deps2{position: absolute; left: 50%; top: 80px; 
text-align: center; border-radius: 20px; background: rgba(255,255,255,.2); 
padding: 0px 25px; width: max-content; transform: translateX(-50%); box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);
height: 0; max-height: 0; transition-duration: .5s; visibility: hidden; opacity: 0; border: 1px solid #fff
}


.header_top.drop .top_nav li .deps2{background: rgba(255,255,255,.8);}

.header_top.drop .top_nav li .deps2 a{color: #1D1D1B}

.sub_head .header_top .top_nav li .deps2{background: rgba(255,255,255,.8);}
.sub_head .header_top .top_nav li .deps2 a{color: #1D1D1B}


.fp-viewing-s05 .header_top .top_nav li .deps2{background: rgba(255,255,255,.8);}


.fp-viewing-s05 .header_top .top_nav li .deps2 a{color: #1D1D1B}

.top_nav li:hover .deps2{visibility: visible; height: auto; max-height: 500px; opacity: 1; padding: 25px}

.top_nav li .deps2 a{font-size: 16px; font-weight: 500; color: #fff; 
opacity: .8; transition-duration: .5s; display: block;  text-align: center}
.top_nav li .deps2 a:hover{opacity: 1; font-weight: 600}
.top_nav li .deps2 a + a{margin-top: 15px;}
.top_nav li .deps2 .line{display: block; width: 100%; height: 1px; background: #ddd; margin: 15px 0}

.sns_top{display: flex; gap:20px}
.sns_top .lang_icon{background: rgba(255,255,255,.2); width: 50px; height: 50px; display: flex; border-radius: 50px;justify-content: center;
    align-items: center; transition-duration: .5s}

.sns_top .lang_icon .icon{background: url(../img/lang.png) no-repeat center; display: block; width: 100%; height: 100%}


.lang{position: relative}


 
.lang_list{position: absolute; padding:0 25px ; border-radius: 20px; background: rgba(255,255,255,.2); transform: translateX(-50%);
top: calc(100% + 10px); left: 50%; height: 0; max-height: 0; opacity: 0; visibility: hidden; transition-duration: .5s; border: 1px solid #fff;
box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.20);}
.lang_list a{display: block; text-align: center; color: #fff; font-size: 16px; font-weight: 500; transition-duration: .5s; opacity: .8}
.lang_list a + a{margin-top: 15px;}
.lang_list a:hover, .lang_list a.on{color: #fff; opacity: 1}

.lang_list.open{height: auto; max-height: 500px; opacity: 1; visibility: visible; padding: 25px}

.header_top.drop .sns_top .lang_icon{background: transparent; border: 1px solid #ddd}
.header_top.drop .sns_top .lang_icon .icon{background-image:url(../img/langon.png)  }
.header_top.drop .lang_list{background: rgba(255,255,255,.8); border-color: #f5f5f5}
.header_top.drop .lang_list a{color: #1D1D1B}

.sub_head .header_top .sns_top .lang_icon{background: transparent; border: 1px solid #ddd}
.sub_head .header_top .sns_top .lang_icon .icon{background-image:url(../img/langon.png)  }
.sub_head .header_top .lang_list{background: rgba(255,255,255,.8); border-color: #f5f5f5}
.sub_head .header_top .lang_list a{color: #1D1D1B}

.fp-viewing-s05 .header_top .sns_top .lang_icon{background: transparent; border: 1px solid #ddd}


.fp-viewing-s05 .header_top .sns_top .lang_icon .icon{background-image:url(../img/langon.png)  }


.fp-viewing-s05 .header_top .lang_list{background: rgba(255,255,255,.8); border-color: #f5f5f5}


.fp-viewing-s05 .header_top .lang_list a{color: #1D1D1B}


.video-slider {
  position: relative;
}

/* Custom Controls */
.controls {
  position: absolute;
  top: 50%;
  right: 12rem;
  display: flex;
  align-items: center;
  z-index: 10;
  transform: translateY(-50%);
  gap:10px
}



.progress-circle {
  position: relative;
  width: 80px;
  height: 80px;
}

.progress-circle svg {
  width: 100%;
  height: 100%;
}

#progressCircle {
  transform: rotate(-90deg); /* Rotate the SVG to make the progress start from the top */
}

#progressLine {
  transition: stroke-dashoffset 0.1s linear;
}

/* Custom Arrows */
.custom-arrow {
  width: 72px;
  height: 72px;
  background-color: rgba(255, 255, 255, 0.0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;

  z-index: 5;
  cursor: pointer;
   border: 3px solid rgba(255,255,255,.5);
   transition-duration: .5s
}

.custom-arrow:hover{border: 3px solid rgba(255,255,255,.8)}

.custom-prev {
  background: url(../img/prev.png) no-repeat center;

  
}

.custom-next {
  background: url(../img/next.png) no-repeat center;

}

.progress_are{width: 80px;
  height: 80px; position: relative;}


.play-pause {
  background-color: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute; 
  left: 0; top: 0; width: 80px; height: 80px;
  z-index: 2
}


#playPauseBtn.playing {
 
}

#playPauseBtn::before {
  content: ''; background: url(../img/play.png); background-repeat: no-repeat; background-position:center; 
   width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

#playPauseBtn.playing::before {
  content: ''; background: url(../img/pause.png); background-repeat: no-repeat; background-position:center; 
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}


.main_slide .slick-dots{display: none !important}




.main_slide{}


.main_slide{height: 100vh; position: relative; }
.main_slide iframe{position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;  opacity: .7}

.video_are{ position: relative;
            width: 100%;
            /*height: 0;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */*/
            max-width: 100vw;
            max-height: 100vh; z-index: -1;background:#000; background-position: center; background-size: cover;overflow: hidden}

.video_are video {
        width: 100%;
        opacity: .7;
        height: 100%;
        object-fit: cover;
    }

.video_bg{width: 100%;height: 100vh;  position: relative} 


.main_visual_txt {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 920px;
    padding: 0 20px;
    transform: translateX(-50%);
    flex-direction: column;
}
.main_visual_txt h2{font-size: 80px; font-weight: 600; color: #fff; line-height: 90px; display: flex;
justify-content: center;
    align-items: center; width: 100%; gap:20px}
.main_visual_txt h2 i{height: 2px;  background: #fff; flex:1}
.main_visual_txt h2 span{width: auto}
.main_visual_txt h2 + h2{margin-top: 15px}
.main_visual_txt p{font-size: 24px; color: #fff; margin-top: 40px; }

.scl_down{position: absolute; transform: translateX(-50%); left: 50%; bottom: 50px; text-align: center; width: 100%; z-index: 2}
.scl_down p{color: #fff; font-size: 16px;}

.main_section{padding: 150px 0}

.main_about{background: url(../img/main_about.png); background-position: center; background-size: cover}

.main_about .inner{display: flex; gap:100px;justify-content: space-between;
    align-items: center; }
.main_about .main_about_txt{flex:1; }



.main_title h2{font-size: 60px; font-weight: 600; color: #1D1D1B; line-height: 80px}
.main_title h2 b{color: #1B97D3; font-weight: bold}
.main_title p{margin-top: 20px; word-break: keep-all; font-size: 22px; line-height: 35px; color: #1D1D1B; font-weight: 500}



.main_section.life{padding: 250px 0 150px}
.life .inner{display: flex; justify-content: flex-start;
    align-items: flex-start;}

.life .inner .main_title{flex:1;     position: sticky;
    top: 120px;
    left: 0;}

.life_flex{display: flex; gap:150px 100px; align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap; width: 860px}

.life_flex a{width: calc(50% - 50px) }

.life_flex a:nth-child(2n){margin-top: -100px}

.life_flex a .thum{position: relative; overflow: hidden; border-radius: 30px;}
.life_flex a .thum .thum_img{display: block; width: 100%; height: 100%; object-fit: cover; scale:1.0; transition-duration: .5s}


.life_flex a .thum .bg_thum{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(100, 77, 91,.5); opacity: 0; transition-duration: .5s}
.life_flex a .thum .bg_thum .more_plus{position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; 
box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15); border-radius: 100px; display: flex;background: #fff;
justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%); }

.life_flex a:hover .thum{box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);}
.life_flex a:hover .thum .bg_thum{opacity: 1}
.life_flex a:hover .thum .thum_img{ scale:1.1}


.life_flex a h2{margin: 50px 0 20px; font-size: 30px; font-weight: bold; color: #1D1D1B; transition-duration: .5s; word-break: keep-all}
.life_flex a p{font-size: 18px; line-height: 28px; font-weight: 500; word-break: keep-all}

.life_flex a p span{display: block; font-size: 16px; color: #999}

.life_flex a:hover h2{color: #1B97D3}





.main_revitalize{}

.main_revitalize .main_title{position: relative}

.revitalize_slide{margin: 60px -20px 0}
.revitalize_slide a{}
.revitalize_slide a .thum{border-radius: 20px; overflow: hidden; transition-duration: .5s}
.revitalize_slide a .thum img{width: 100%; height: 100%;aspect-ratio: 16 / 9;    object-fit: cover; transition-duration: .5s; scale:1.0}


.revitalize_slide a:hover .thum{box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);}
.revitalize_slide a:hover .thum img{ scale:1.1}
.revitalize_slide .slick-slide{padding: 0 20px}

.revitalize_slide a p{font-size: 22px; margin-top: 30px; font-weight: 500; white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition-duration: .5s;}

.aro_rev{display: flex; gap:15px; position: absolute; right: 0; top: 0}
.aro_rev span{cursor: pointer; width: 100px; height: 100px; background: #fff; 
border: 1px solid #DDDDDD; border-radius: 100px; transition-duration: 1s; background-position: center; background-repeat: no-repeat}
.aro_rev span:hover{background-color: #644D5B}

.aro_rev span.prev_rev{background-image: url(../img/main/prev.png); }
.aro_rev span.next_rev{background-image: url(../img/main/next.png); }

.aro_rev span:hover.prev_rev{background-image: url(../img/main/prevon.png); }
.aro_rev span:hover.next_rev{background-image: url(../img/main/nexton.png); }

.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.5)}
.agree_pop.atv_pop{display: block}

.agree_pop_content{position: absolute; left: 50%;
  top: 50%; background: #fff; padding:30px 30px; border-radius: 20px ;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}



.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 25px;}
.agree_pop_content .agree_title .agree_close{position: absolute; right: 0; top: 0; cursor: pointer}

.agree_pop_info{max-height: 400px; overflow-y: auto; margin-top: 15px; padding: 15px 0; border-top: 1px solid #ddd}
.agree_pop_info h3{font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 16px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 30px}


.main_raw{background: #F9F9F9; overflow: hidden}

.main_raw .main_title{text-align: center}

.raw_slide{margin: 80px -10px 0}
.raw_slide .box{position: relative; border-radius: 20px; overflow: hidden}
.raw_slide .box img{width: 100%; height: 100%;     object-fit: cover;
    aspect-ratio: 1;}

.raw_slide .box p{position: absolute; bottom: 45px; left: 40px; color: #fff; font-size: 18px; word-break: keep-all}

.raw_slide .slick-slide{padding: 0 10px}